Clicking the card now toggles flipping it over. Removed moment - don't need it

package-lock.json

@@ -379,11 +379,6 @@
         "mime-db": "1.40.0"
       }
     },
-    "moment": {
-      "version": "2.24.0",
-      "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
-      "integrity": "sha512-bV7f+6l2QigeBBZSM/6yTNq4P2fNpSWj/0e7jQcy87A8e7o2nAfP/34/2ky5Vw4B9S446EtIhodAzkFCcR4dQg=="
-    },
     "ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",

package.json

@@ -10,7 +10,6 @@
   "license": "ISC",
   "dependencies": {
     "express": "^4.17.1",
-    "moment": "^2.24.0",
     "socket.io": "^2.2.0"
   }
 }

server.js

@@ -5,7 +5,6 @@ const socketIO = require('socket.io');
 const app = express();
 const server = http.Server(app);
 const io = socketIO(server);
-const moment = require('moment');
 
 var activeGames = {};
 

static/game.js

@@ -3,6 +3,7 @@ import {utility} from './util.js'
 const socket = io();
 let clock;
 let currentGame = null;
+let cardFlippedOver = false;
 
 // respond to the game state received from the server
 socket.on('state', function(game) {
@@ -68,15 +69,21 @@ function renderGame() {
             "<div id='players-remaining'>" + getLiveCount() + "/" + currentGame.size + " alive</div>" +
             "<div id='clock'></div>" +
         "</div>" +
-        "<div class='game-card'>" +
-            "<div class='game-card-inner'" +
+        "<div id='game-card'>" +
+            "<div class='game-card-inner'>" +
                 "<div class='game-card-front'>" +
                     "<h2>" + card.role + "</h2>" +
                     "<p>" + card.description + "</p>" +
+                    "<p id='flip-instruction'>Click to flip</p>" +
                 "</div>" +
                 "<div class='game-card-back'></div>" +
             "</div>" +
         "</div>";
+
+    // initially flip the card over for a reveal, allow it to be flipped on click/tap
+    flipCard();
+    document.getElementById("game-card").addEventListener("click", flipCard);
+
     let killedBtn = document.createElement("button");
     killedBtn.setAttribute("id", "dead-btn");
 
@@ -92,6 +99,13 @@ function renderGame() {
     document.getElementById("dead-btn").addEventListener("click", killPlayer);
 }
 
+function flipCard() {
+    cardFlippedOver ?
+        document.getElementById("game-card").setAttribute("class", "flip-down")
+        : document.getElementById("game-card").setAttribute("class", "flip-up");
+    cardFlippedOver = !cardFlippedOver;
+}
+
 function renderClock() {
     clock = setInterval(function() {
         const now = new Date().getTime();

static/styles.css

@@ -296,7 +296,7 @@ label {
 
 /* GAME */
 
-@keyframes flip {
+@keyframes flip-up {
     0% {
         transform: rotateY(0deg);
     }
@@ -305,7 +305,17 @@ label {
     }
 }
 
-.game-card {
+@keyframes flip-down {
+    0% {
+        transform: rotateY(0deg);
+    }
+    100% {
+        transform: rotateY(180deg);
+    }
+}
+
+
+#game-card {
     border: 1px solid #7d0b0b;
     background-color: #f0f0f0;
     display: flex;
@@ -318,19 +328,27 @@ label {
     width: 72%;
     box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
     perspective: 1000px;
-    animation: flip 0.7s;
-    animation-fill-mode: forwards;
-    animation-direction: reverse;
     transform-style: preserve-3d;
 }
 
-.game-card h2 {
+.flip-up {
+    animation: flip-up 0.7s;
+    animation-fill-mode: forwards;
+    animation-direction: reverse;
+}
+
+.flip-down {
+    animation: flip-down 0.7s;
+    animation-fill-mode: forwards;
+}
+
+#game-card h2 {
     font-size: 2em;
     color: #7d0b0b;
     font-family: 'diavlo', sans-serif;
 }
 
-.game-card p {
+#game-card p {
     padding: 1em;
 }
 
@@ -384,7 +402,13 @@ label {
     margin-bottom: 0.5em;
 }
 
+#flip-instruction {
+    margin: 7em 0 0 0;
+    color: gray;
+}
+
 .game-header {
     display: flex;
+    margin: 0 auto;
     justify-content: space-evenly;
 }