From b98af2d68c06eb5abc437eb62a9de7d404095d00 Mon Sep 17 00:00:00 2001
From: AlecM33 <leohfx@gmail.com>
Date: Wed, 22 Jun 2022 18:30:18 -0400
Subject: [PATCH] double click card to flip, remove excessive margin

---
 client/src/modules/GameStateRenderer.js |  4 +-
 client/src/modules/HTMLFragments.js     | 10 ++---
 client/src/styles/game.css              | 50 ++++++++++++++++++-------
 3 files changed, 43 insertions(+), 21 deletions(-)

diff --git a/client/src/modules/GameStateRenderer.js b/client/src/modules/GameStateRenderer.js
index cac34d7..2d4755f 100644
--- a/client/src/modules/GameStateRenderer.js
+++ b/client/src/modules/GameStateRenderer.js
@@ -485,12 +485,12 @@ function renderPlayerRole (gameState) {
 
     document.querySelector('#role-description').innerText = gameState.client.gameRoleDescription;
 
-    document.getElementById('game-role-back').addEventListener('click', () => {
+    document.getElementById('game-role-back').addEventListener('dblclick', () => {
         document.getElementById('game-role').style.display = 'flex';
         document.getElementById('game-role-back').style.display = 'none';
     });
 
-    document.getElementById('game-role').addEventListener('click', () => {
+    document.getElementById('game-role').addEventListener('dblclick', () => {
         document.getElementById('game-role-back').style.display = 'flex';
         document.getElementById('game-role').style.display = 'none';
     });
diff --git a/client/src/modules/HTMLFragments.js b/client/src/modules/HTMLFragments.js
index db86009..5fc1432 100644
--- a/client/src/modules/HTMLFragments.js
+++ b/client/src/modules/HTMLFragments.js
@@ -60,8 +60,8 @@ export const HTMLFragments = {
         <p id='role-description'></p>
     </div>
     <div id='game-role-back'>
-        <h4>Click to show your role</h4>
-        <p>(click again to hide)</p>
+        <h4>Double-tap here to show your role</h4>
+        <p>(Double-tap here again to hide)</p>
     </div>
     <div id='game-people-container'>
         <label id='players-alive-label'></label>
@@ -138,8 +138,8 @@ export const HTMLFragments = {
             <p id='role-description'></p>
         </div>
         <div id='game-role-back'>
-            <h4>Click to show your role</h4>
-            <p>(click again to hide)</p>
+            <h4>Double-tap here to show your role</h4>
+            <p>(Double-tap here again to hide)</p>
         </div>
         <div id='game-people-container'>
             <label id='players-alive-label'></label>
@@ -205,7 +205,7 @@ export const HTMLFragments = {
             <h2>Roles in this game:</h2>
             <div id='game-role-info-container'></div>
             <div class='modal-button-container'>
-                <button id='close-role-info-modal-button' class='app-button'>Close</button>
+                <button id='close-role-info-modal-button' class='app-button cancel'>Close</button>
             </div>
         </div>`,
     END_OF_GAME_VIEW:
diff --git a/client/src/styles/game.css b/client/src/styles/game.css
index e783b1a..ab35553 100644
--- a/client/src/styles/game.css
+++ b/client/src/styles/game.css
@@ -182,10 +182,6 @@ h1 {
     color: #21ba45;
 }
 
-#role-info-button {
-    margin-top: 1em;
-}
-
 #role-info-button img {
     height: 25px;
     margin-left: 10px;
@@ -256,7 +252,7 @@ h1 {
     max-width: 17em;
     border-radius: 3px;
     height: 23em;
-    margin: 0 auto 2em auto;
+    margin: 10px 20px;
     width: 100%;
     box-shadow: 0 1px 1px rgba(0,0,0,0.11),
     0 2px 2px rgba(0,0,0,0.11),
@@ -268,6 +264,13 @@ h1 {
     /*transform-style: preserve-3d;*/
 }
 
+#game-role, #game-role-back {
+    user-select: none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+}
+
 .game-role-good {
     border: 5px solid #5469c5 !important;
 }
@@ -277,10 +280,6 @@ h1 {
 }
 
 #game-role-back {
-    user-select: none;
-    -ms-user-select: none;
-    -webkit-user-select: none;
-    -moz-user-select: none;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -292,7 +291,7 @@ h1 {
     max-width: 17em;
     border-radius: 3px;
     height: 23em;
-    margin: 0 auto 2em auto;
+    margin: 10px 20px;
     width: 100%;
     box-shadow: 0 1px 1px rgba(0,0,0,0.11),
     0 2px 2px rgba(0,0,0,0.11),
@@ -305,7 +304,7 @@ h1 {
 }
 
 #game-role-back h4 {
-    font-size: 24px;
+    font-size: 30px;
     padding: 0.5em;
     text-align: center;
     color: #e7e7e7;
@@ -313,7 +312,9 @@ h1 {
 
 #game-role-back p {
    color: #c3c3c3;
-    font-size: 20px;
+    font-size: 18px;
+    text-align: center;
+    padding: 10px;
 }
 
 #game-timer {
@@ -330,6 +331,7 @@ h1 {
     justify-content: center;
     align-items: center;
     height: 43px;
+    margin-bottom: 0.5em;
 }
 
 #game-timer.low {
@@ -467,6 +469,7 @@ label[for='moderator'] {
 
 #start-game-button {
     background-color: #1c8a36;
+    animation: shadow-pulse 1.5s infinite ease-out;
 }
 
 #end-game-button {
@@ -520,6 +523,7 @@ label[for='moderator'] {
     flex-wrap: wrap;
     flex-direction: column;
     align-items: center;
+    margin: 1em;
 }
 
 #game-header button {
@@ -692,6 +696,10 @@ canvas {
     width: 100%;
 }
 
+#mod-transfer-button {
+    margin-bottom: 0.5em;
+}
+
 #transfer-mod-form .modal-button-container {
     justify-content: center;
 }
@@ -791,11 +799,11 @@ canvas {
     }
 
     #game-role-back p {
-        font-size: 16px;
+        font-size: 18px;
     }
 
     #game-role-back h4 {
-        font-size: 18px;
+        font-size: 24px;
     }
 
     h2 {
@@ -820,6 +828,20 @@ canvas {
     }
 }
 
+@keyframes shadow-pulse {
+    0% {
+        box-shadow: 0 0 0 0 rgba(28, 138, 54, 0.7);
+    }
+
+    70% {
+        box-shadow: 0 0 0 10px rgba(28, 138, 54, 0);
+    }
+
+    100% {
+        box-shadow: 0 0 0 0 rgba(28, 138, 54, 0);
+    }
+}
+
 @keyframes pulse-low {
     from {
         color: rgba(231, 28, 13 , 0.1);