Merge branch 'master' of https://github.com/AlecM33/Werewolf

README.md

@@ -8,10 +8,15 @@ This is a Javascript application running on a node express server. I am using th
 
 <br>
 <div>
-  <img align="left" alt="create" width="200" src="/assets/images/screenshots/create.PNG" />
-  <img align="left" alt="lobby" width="200" src="/assets/images/screenshots/lobby.PNG" />
-  <img alt="hunter" width="200" src="/assets/images/screenshots/game.PNG" />
-  <img alt="game" width="200" src="/assets/images/screenshots/hunter.PNG" />
+  <img alt="home" width="200" src="/assets/images/screenshots/home.PNG" />
+  <img alt="create" width="200" src="/assets/images/screenshots/create.PNG" />
+  <img alt="lobby" width="200" src="/assets/images/screenshots/lobby.PNG" />
+</div>
+<br>
+<div>
+  <img alt="game" width="200" src="/assets/images/screenshots/game.PNG" />
+  <img alt="killed" width="200" src="/assets/images/screenshots/killed.PNG" />
+  <img alt="hunter" width="200" src="/assets/images/screenshots/hunter.PNG" />
 </div>
 <br>
 <br>

server.js

@@ -111,30 +111,29 @@ io.on('connection', function(socket) {
             }
         }
     });
-    // broadcast current game state to all sockets in the room with a particular access code
+    // send the game state to the client that requested it
     socket.on('requestState', function(data) {
         const game = activeGames[Object.keys(activeGames).find((key) => key === data.code)];
         if (game && Object.keys(socket.rooms).includes(data.code) === false) {
             socket.join(data.code, function() {
-                io.sockets.in(data.code).emit('state', game);
+                socket.emit('state', game);
             });
         } else {
             if (game) {
-                io.sockets.in(data.code).emit('state', game);
+                socket.emit('state', game);
             }
         }
     });
     socket.on('startGame', function(gameData) {
         let game = activeGames[Object.keys(activeGames).find((key) => key === gameData.code)];
         if (game) {
-            game.state = "started";
+            game.status = "started";
             game.players = gameData.players;
             if (game.time) {
                 let d = new Date();
                 d.setMinutes(d.getMinutes() + parseInt(game.time));
                 game.endTime = d.toJSON();
             }
-            io.sockets.in(gameData.code).emit('state', game);
         }
     });
     socket.on('pauseGame', function(code) {
@@ -142,7 +141,6 @@ io.on('connection', function(socket) {
         if (game) {
             game.pauseTime = (new Date()).toJSON();
             game.paused = true;
-            io.sockets.in(code).emit('state', game);
         }
     });
     socket.on('resumeGame', function(code) {
@@ -153,15 +151,13 @@ io.on('connection', function(socket) {
             let newDate = new Date(game.endTime);
             newDate.setTime(newTime);
             game.endTime = newDate.toJSON();
-            io.sockets.in(code).emit('state', game);
         }
     });
     socket.on("timerExpired", function(code) {
         let game = activeGames[Object.keys(activeGames).find((key) => key === code)];
         if (game) {
             game.winningTeam = "wolf";
-            game.state = "ended";
-            io.sockets.in(code).emit('state', game);
+            game.status = "ended";
         }
     });
     socket.on('killPlayer', function(id, code) {
@@ -176,14 +172,10 @@ io.on('connection', function(socket) {
             const winCheck = teamWon(game);
             if (winCheck === "wolf") {
                 game.winningTeam = "wolf";
-                game.state = "ended";
-                io.sockets.in(code).emit('state', game);
-            } else if (winCheck === "village") {
+                game.status = "ended";
+            } if (winCheck === "village") {
                 game.winningTeam = "village";
-                game.state = "ended";
-                io.sockets.in(code).emit('state', game);
-            } else {
-                io.sockets.in(code).emit('state', game);
+                game.status = "ended";
             }
         }
     });

static/game.js

@@ -5,6 +5,7 @@ const socket = io();
 const standardRoles = ["Villager", "Werewolf", "Seer", "Shadow", "Hunter", "Mason", "Minion", "Sorcerer"];
 let clock;
 let currentGame = null;
+let lastGameState = null;
 let cardFlippedOver = false;
 let cardRendered = false;
 let lastKilled = null;
@@ -12,7 +13,9 @@ let lastKilled = null;
 // respond to the game state received from the server
 socket.on('state', function(game) {
     currentGame = game;
-    buildGameBasedOnState();
+    if(detectChanges(game)) {
+        buildGameBasedOnState(game);
+    }
 });
 
 window.onblur = function() { // pause animations if the window is not in focus
@@ -27,8 +30,8 @@ window.onfocus = function() { // play animations when window is focused
     this.document.querySelector("#killed-name").style.animationPlayState = 'running';
 };
 
-function buildGameBasedOnState() {
-    switch(currentGame.state) {
+function buildGameBasedOnState(game) {
+    switch(game.status) {
         case "lobby":
             renderLobby();
             break;
@@ -43,6 +46,19 @@ function buildGameBasedOnState() {
     }
 }
 
+function detectChanges(game) {
+    if (lastGameState === null ||
+        lastGameState.status !== game.status ||
+        lastGameState.paused !== game.paused ||
+        lastGameState.lastKilled !== game.lastKilled ||
+        lastGameState.startTime !== game.startTime ||
+        lastGameState.players.length !== game.players.length) {
+        lastGameState = game;
+        return true;
+    } 
+        return false;
+}
+
 function hideAfterExit(e) {
     e.target.style.display = 'none';
     e.target.classList.remove(e.target.exitClass);
@@ -312,7 +328,7 @@ function renderLobby() {
     }
 }
 
-// request the current state of the game from the server
-window.onload = function() {
+// request game state from server periodically
+setInterval(function () {
     socket.emit('requestState', {code: sessionStorage.getItem("code")});
-};
+}, 200);

static/setup.js

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