From 11bef27b2d1f3102fdeeef51668aa2417b1ff8af Mon Sep 17 00:00:00 2001
From: Sean McGrath <smcgrath@hopper.com>
Date: Fri, 1 May 2020 17:56:12 -0400
Subject: [PATCH] auto doors

---
 app/client/jsx/Door.jsx            | 24 +++--------------
 app/client/jsx/Room.jsx            |  9 +++++++
 app/client/styles/pages/_room.scss | 42 ++++++++++++++++++++++++------
 3 files changed, 46 insertions(+), 29 deletions(-)

diff --git a/app/client/jsx/Door.jsx b/app/client/jsx/Door.jsx
index 9d35f98b3..ffbb182dd 100644
--- a/app/client/jsx/Door.jsx
+++ b/app/client/jsx/Door.jsx
@@ -4,23 +4,6 @@ class Door extends Component {
 
     constructor(props) {
         super(props);
-        this.state = {
-            isHovered: false,
-            isDoorClicked: false,
-        };
-        this.handleHover = this.handleHover.bind(this);
-    }
-
-    handleHover() {
-        this.setState({
-            isButtonHovered: !this.state.isButtonHovered
-        });
-    }
-
-    handleDoorClick() {
-        this.setState({
-            isDoorClicked: !this.state.isDoorClicked
-        });
     }
 
     render() {
@@ -38,16 +21,15 @@ class Door extends Component {
             ) :
             <div>No one is in this room :(</div>
 
-        const doorClass = this.state.isButtonHovered || this.state.isDoorClicked ? "door open" : "door"
 
         return (
             <div className="door-wrapper">
                 <div className="door-background"></div>
-                <div onClick={this.handleDoorClick.bind(this)} className="door-target">
+                <div className="door-target">
                     {users}
-                    <button onMouseEnter={this.handleHover} onMouseLeave={this.handleHover} onClick={this.props.onClick.bind(this)}>Enter {this.props.room}</button>
+                    <button onClick={this.props.onClick.bind(this)}>Enter {this.props.room}</button>
                 </div>
-                <div className={doorClass}>
+                <div id="door" className="door">
                     <div className="knob"></div>
                     <div className="spacer"></div>
                     <div className="panel-column">
diff --git a/app/client/jsx/Room.jsx b/app/client/jsx/Room.jsx
index 181c767b2..14947eb27 100644
--- a/app/client/jsx/Room.jsx
+++ b/app/client/jsx/Room.jsx
@@ -103,6 +103,15 @@ class Room extends Component {
         this.setState({ room, entered: false })
         this.props.updateCurrentRoom(room)
         this.fetchUsersForRoom(room)
+
+        // reset door anim
+        const door = document.getElementById('door')
+        if (door) {
+            door.style.webkitAnimation = "none";
+            setTimeout(() => { door.style.webkitAnimation = "" })
+        }
+        
+
     }
 
     onEnterRoom() {
diff --git a/app/client/styles/pages/_room.scss b/app/client/styles/pages/_room.scss
index ed76f7942..49aa81fdc 100755
--- a/app/client/styles/pages/_room.scss
+++ b/app/client/styles/pages/_room.scss
@@ -101,11 +101,6 @@
 			max-height: 900px;
 		}
 
-		.door-target:hover + .door,
-		.door.open {
-			-webkit-transform: rotateY(-80deg);
-		}
-
 		.door-background {
 			background: black;
 			z-index: -1;
@@ -114,13 +109,16 @@
 		.door {
 			z-index: 100;
 			background: gray;
-			transition: all .75s;
-			-webkit-transform: rotateY(0deg);
 			-webkit-transform-origin: 0% 50%;
+			-moz-transform-origin: 0% 50%;
 			overflow: visible;
 			display: flex;
 			pointer-events: none;
-
+			animation: door-open 1s;
+			-webkit-animation: door-open 1s;
+			-moz-animation: door-open 1s;
+			animation-fill-mode: forwards;  
+			-moz-animation-fill-mode: forwards;
 
 			.knob {
 				position: absolute;
@@ -206,3 +204,31 @@
 		right: 1.2em;
 	}
 }
+
+@-webkit-keyframes door-open {
+  0% {
+  	-webkit-transform: rotateY(0deg);
+  }
+
+  45% {
+  	-moz-transform: rotateY(0deg);
+  }
+
+  100% {
+  	-webkit-transform: rotateY(-80deg);
+  }
+}
+
+@-moz-keyframes door-open {
+  0% {
+  	-moz-transform: rotateY(0deg);
+  }
+
+  45% {
+  	-moz-transform: rotateY(0deg);
+  }
+
+  100% {
+  	-moz-transform: rotateY(-80deg);
+  }
+}