Timer functionality

package-lock.json

@@ -379,6 +379,11 @@
         "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,6 +10,7 @@
   "license": "ISC",
   "dependencies": {
     "express": "^4.17.1",
+    "moment": "^2.24.0",
     "socket.io": "^2.2.0"
   }
 }

server.js

@@ -5,6 +5,7 @@ const socketIO = require('socket.io');
 const app = express();
 const server = http.Server(app);
 const io = socketIO(server);
+const moment = require('moment');
 
 var activeGames = {};
 
@@ -57,6 +58,11 @@ io.on('connection', function(socket) {
         let game = activeGames[Object.keys(activeGames).find((key) => key === gameData.code)];
         game.state = "started";
         game.players = gameData.players;
+        if (game.time) {
+            let d = new Date();
+            d.setMinutes(d.getMinutes() + parseInt(game.time));
+            game.endTime = d.toJSON();
+        }
         io.to(gameData.code).emit('state', game);
     });
     socket.on('killPlayer', function(id, code) {

static/game.js

@@ -1,7 +1,8 @@
 import {utility} from './util.js'
 
 const socket = io();
-var currentGame = null;
+let clock;
+let currentGame = null;
 
 // respond to the game state received from the server
 socket.on('state', function(game) {
@@ -52,6 +53,9 @@ function getLiveCount() {
 }
 
 function renderGame() {
+    if (currentGame.time) {
+        renderClock();
+    }
     const player = currentGame.players.find((player) => player.id === sessionStorage.getItem("id"));
     const card = player.card;
 
@@ -60,7 +64,10 @@ function renderGame() {
     document.getElementById("launch").setAttribute("class", "hidden");
     document.getElementById("game-container").setAttribute("class", "game-container");
     document.getElementById("game-container").innerHTML =
-        "<div id='players-remaining'>" + getLiveCount() + "/" + currentGame.size + " Players alive</div>" +
+        "<div class='game-header'>" +
+            "<div id='players-remaining'>" + getLiveCount() + "/" + currentGame.size + " alive</div>" +
+            "<div id='clock'></div>" +
+        "</div>" +
         "<div class='game-card'>" +
             "<div class='game-card-inner'" +
                 "<div class='game-card-front'>" +
@@ -85,6 +92,29 @@ function renderGame() {
     document.getElementById("dead-btn").addEventListener("click", killPlayer);
 }
 
+function renderClock() {
+    clock = setInterval(function() {
+        const now = new Date().getTime();
+        const end = new Date(currentGame.endTime);
+        const delta = end - now;
+        if (delta <= 0) {
+            clearInterval(clock);
+            endGame(true);
+        } else {
+            let minutes = Math.floor((delta % (1000 * 60 * 60)) / (1000 * 60));
+            let seconds = Math.floor((delta % (1000 * 60)) / 1000);
+            seconds = seconds < 10 ? "0" + seconds : seconds;
+            document.getElementById("clock").innerText = minutes + ":" + seconds;
+        }
+    }, 1000);
+}
+
+function endGame(timeExpired) {
+    if (timeExpired) {
+        console.log("expired");
+    }
+}
+
 function killPlayer() {
     socket.emit("killPlayer", currentGame.players.find((player) => player.id === sessionStorage.getItem("id")).id, currentGame.accessCode);
 }

static/setup.js

@@ -24,6 +24,7 @@ class Game {
         this.time = time;
         this.players = [];
         this.state = "lobby";
+        this.endTime = null;
     }
 }
 

static/styles.css

@@ -191,7 +191,7 @@ button {
 #create-game-container, #join-game-container {
     display: inline-block;
     text-align: left;
-    margin-bottom: 3em;
+    margin: 3em 1em;
 }
 
 a {
@@ -377,3 +377,14 @@ label {
     color: gray;
     margin-bottom: 0.5em;
 }
+
+#clock {
+    font-size: 1.7em;
+    width: 4em;
+    margin-bottom: 0.5em;
+}
+
+.game-header {
+    display: flex;
+    justify-content: space-evenly;
+}