Merge pull request #53 from SeanMcGrath/auto-doors

morganecf · May 1, 2020 · 34608f6 · 34608f6
2 parents 0ced8b8 + 11bef27
commit 34608f6
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 29 deletions.
diff --git 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
@@ -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
@@ -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);
+  }
+}