sychronized pausing and resuming of game timer, fade transitions

assets/images/pause-button.svg

@@ -0,0 +1,8 @@
+<svg width="263" height="271" xmlns="http://www.w3.org/2000/svg">
+ <g>
+  <title>Layer 1</title>
+  <ellipse stroke="#7d0b0b" ry="131" rx="126" id="svg_5" fill="none" cy="135.237498" cx="131.999999" stroke-opacity="null" stroke-width="8"/>
+  <rect stroke="#7d0b0b" id="svg_1" height="123.000006" width="41" y="73.737494" x="77.5" stroke-width="0" fill="#7d0b0b"/>
+  <rect stroke="#7d0b0b" id="svg_3" height="123.000006" width="41" y="73.737494" x="144.5" stroke-width="0" fill="#7d0b0b"/>
+ </g>
+</svg>

assets/images/play-button.svg

@@ -0,0 +1,7 @@
+<svg width="263" height="271" xmlns="http://www.w3.org/2000/svg">
+ <g>
+  <title>Layer 1</title>
+  <ellipse stroke="#7d0b0b" ry="131" rx="126" id="svg_5" cy="135.237498" cx="129.999999" fill-opacity="null" stroke-opacity="null" stroke-width="8" fill="none"/>
+  <path transform="rotate(90.18392181396484 140.08586120605474,135.38354492187497) " stroke="#7d0b0b" id="svg_7" d="m86.585877,180.883554l53.499995,-91.000007l53.499995,91.000007l-106.99999,0z" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="#7d0b0b"/>
+ </g>
+</svg>

server.js

@@ -64,6 +64,21 @@ io.on('connection', function(socket) {
         }
         io.to(gameData.code).emit('state', game);
     });
+    socket.on('pauseGame', function(code) {
+        let game = activeGames[Object.keys(activeGames).find((key) => key === code)];
+        game.pauseTime = (new Date()).toJSON();
+        game.paused = true;
+        io.to(code).emit('state', game);
+    });
+    socket.on('resumeGame', function(code) {
+        let game = activeGames[Object.keys(activeGames).find((key) => key === code)];
+        game.paused = false;
+        let newTime = new Date(game.endTime).getTime() + (new Date().getTime() - new Date(game.pauseTime).getTime());
+        let newDate = new Date(game.endTime);
+        newDate.setTime(newTime);
+        game.endTime = newDate.toJSON();
+        io.to(code).emit('state', game);
+    });
     socket.on('killPlayer', function(id, code) {
         let game = activeGames[Object.keys(activeGames).find((key) => key === code)];
         let player = game.players.find((player) => player.id === id);

static/game.js

@@ -55,9 +55,6 @@ function getLiveCount() {
 }
 
 function renderGame() {
-    if (currentGame.time) {
-        renderClock();
-    }
     const player = currentGame.players.find((player) => player.id === sessionStorage.getItem("id"));
     const card = player.card;
 
@@ -66,9 +63,10 @@ function renderGame() {
     document.getElementById("launch").setAttribute("class", "hidden");
     document.getElementById("game-container").setAttribute("class", "game-container");
     document.getElementById("game-container").innerHTML =
-        "<div class='game-header'>" +
+        "<div id='game-header'>" +
             "<div id='players-remaining'>" + getLiveCount() + "/" + currentGame.size + " alive</div>" +
             "<div id='clock'></div>" +
+            "<div id='pause-container'></div>" +
         "</div>" +
         "<div id='game-card'>" +
             "<div class='game-card-inner'>" +
@@ -81,6 +79,14 @@ function renderGame() {
             "</div>" +
         "</div>";
 
+    if (currentGame.time) {
+        renderClock();
+        document.getElementById("pause-container").innerHTML = currentGame.paused ?
+            "<img alt='pause' src='../assets/images/play-button.svg' id='play-pause'/>"
+            : "<img alt='pause' src='../assets/images/pause-button.svg' id='play-pause'/>";
+        document.getElementById("play-pause").addEventListener("click", pauseOrResumeGame)
+    }
+
     // initially flip the card over for a reveal, allow it to be flipped on click/tap
     if (!cardDealt) {
         flipCard();
@@ -103,6 +109,14 @@ function renderGame() {
     document.getElementById("dead-btn").addEventListener("click", killPlayer);
 }
 
+function pauseOrResumeGame() {
+    if (currentGame.paused) {
+        socket.emit('resumeGame', currentGame.accessCode);
+    } else {
+        socket.emit('pauseGame', currentGame.accessCode);
+    }
+}
+
 function flipCard() {
     cardFlippedOver ?
         document.getElementById("game-card").setAttribute("class", "flip-down")
@@ -112,9 +126,12 @@ function flipCard() {
 
 function renderClock() {
     clock = setInterval(function() {
-        const now = new Date().getTime();
+        const start = currentGame.paused ? new Date(currentGame.pauseTime) : new Date();
         const end = new Date(currentGame.endTime);
-        const delta = end - now;
+        const delta = end - start;
+        if (currentGame.paused) {
+            clearInterval(clock);
+        }
         if (delta <= 0) {
             clearInterval(clock);
             endGame(true);

static/styles.css

@@ -64,6 +64,10 @@ html, body {
     font-family: 'sitewide-sans-serif', sans-serif;
 }
 
+@keyframes fadein {
+    from { opacity: 0 }
+    to { opacity: 1 }
+}
 .app-content {
     text-align: center;
     margin: 0 auto;
@@ -194,6 +198,10 @@ button {
     margin: 3em 1em;
 }
 
+#create-game-container, #lobby-container, #join-game-container, #game-container, #launch, #message-box {
+    animation: fadein 0.8s;
+}
+
 a {
     text-decoration: none;
     color: inherit;
@@ -349,7 +357,7 @@ label {
 }
 
 #game-card p {
-    padding: 1em;
+    padding: 0.5em;
 }
 
 .game-container {
@@ -404,13 +412,25 @@ label {
 }
 
 #flip-instruction {
-    margin: 7em 0 0 0;
     color: gray;
 }
 
-.game-header {
+#game-header {
     display: flex;
     margin: 0 auto;
     max-width: 35em;
     justify-content: space-evenly;
 }
+
+#play-pause {
+    width: 2.5em;
+    height: 2.5em;
+}
+
+#play-pause:hover {
+}
+
+#play-pause:active, #play-pause:focus {
+    opacity: 0.4;
+    transform: scale(0.90);
+}