Merge pull request #94 from EmileCalixte/room-code-hover

Timeout and animation for room code reveal
LesFreresMoutarde · Jan 7, 2021 · 18e15ba · 18e15ba
2 parents 5beb893 + 32e04f8
commit 18e15ba
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 12 deletions.
diff --git a/frontend/src/components/pages/Room/views/Lobby.js b/frontend/src/components/pages/Room/views/Lobby.js
@@ -13,28 +13,37 @@ class Lobby extends React.Component {
 
     constructor(props) {
         super(props);
-        this.state = {
-            hover: false
-        };
+
+        this.roomCodeHoverTimeout = null;
     }
 
-    onMouseEnter = () => {
-        this.setState({hover: true});
+    onRoomCodeMouseEnter = () => {
+        const hiddenCodeMessage = document.getElementById('lobby-hidden-code-message');
+        const codeSpan = document.getElementById('lobby-room-code');
+
+        hiddenCodeMessage.classList.add('is-hover');
+        this.roomCodeHoverTimeout = setTimeout(() => {
+            codeSpan.classList.add('visible');
+            hiddenCodeMessage.classList.remove('visible');
+        }, 300);
     };
 
-    onMouseLeave = () => {
-        this.setState({hover: false});
+    onRoomCodeMouseLeave = () => {
+        const hiddenCodeMessage = document.getElementById('lobby-hidden-code-message');
+        const codeSpan = document.getElementById('lobby-room-code');
+
+        clearTimeout(this.roomCodeHoverTimeout);
+        hiddenCodeMessage.classList.remove('is-hover');
+        codeSpan.classList.remove('visible');
+        hiddenCodeMessage.classList.add('visible');
     }
 
     render() {
         const { roomData, gameConfiguration, currentPlayer, isHost, startQuiz, changeOptions, leaveRoom } = this.props;
-        const { hover } = this.state;
 
             let displayClass = 'hidden';
             if(isHost) displayClass = 'visible';
 
-        const roomCodeText = hover ? roomData.id : 'Survolez pour afficher le code du salon';
-
         return (
             <div className="lobby-container">
                 <div className="lobby-title">
@@ -68,8 +77,9 @@ class Lobby extends React.Component {
                 </div>
                 <div>
                     <p className="lobby-room-code">
-                        <span onMouseEnter={() => this.onMouseEnter()} onMouseLeave={() => this.onMouseLeave()}>
-                            {roomCodeText}
+                        <span id="lobby-hover-to-show-code" onMouseEnter={this.onRoomCodeMouseEnter} onMouseLeave={this.onRoomCodeMouseLeave}>
+                            <span id="lobby-hidden-code-message" className="visible">Survolez pour afficher le code du salon</span>
+                            <span id="lobby-room-code">{roomData.id}</span>
                         </span>
                     </p>
                 </div>

diff --git a/frontend/src/css/style.css b/frontend/src/css/style.css
@@ -906,6 +906,47 @@ button:disabled {
     text-align: center;
 }
 
+#lobby-hover-to-show-code {
+    position: relative;
+}
+
+#lobby-hover-to-show-code #lobby-hidden-code-message,
+#lobby-hover-to-show-code #lobby-room-code {
+    display: inline-block;
+    cursor: default;
+}
+
+#lobby-hover-to-show-code #lobby-hidden-code-message {
+    transition: transform 0.1s;
+    user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+}
+
+#lobby-hover-to-show-code #lobby-hidden-code-message.is-hover {
+    transform: scale(0.95);
+    transition: transform 0.4s ease-in;
+}
+
+/*#hover-to-show-code #hidden-code-message,*/
+#lobby-hover-to-show-code #lobby-room-code {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+
+    transition: opacity 0s;
+}
+
+#lobby-hover-to-show-code #lobby-room-code.visible {
+    transition: opacity 0.2s ease-in;
+}
+
+#lobby-hidden-code-message:not(.visible),
+#lobby-room-code:not(.visible) {
+    opacity: 0;
+}
+
 .leave-button {
     color: white;
     background-color: #DE2D48;