connection/reconnection logic

.gitignore

@@ -1,4 +1,5 @@
 .idea
 node_modules/*
+./client/certs/
 .vscode/launch.json
 package-lock.json

client/modules/GameStateRenderer.js

@@ -30,6 +30,10 @@ export class GameStateRenderer {
     }
 
     renderLobbyHeader() {
+        let existingTitle = document.querySelector('#game-link h1');
+        if (existingTitle) {
+            existingTitle.remove();
+        }
         let title = document.createElement("h1");
         title.innerText = "Lobby";
         document.getElementById("game-title").appendChild(title);

client/modules/Toast.js

@@ -1,10 +1,10 @@
-export const toast = (message, type, positionAtTop = true) => {
+export const toast = (message, type, positionAtTop = true, dispelAutomatically=true) => {
     if (message && type) {
-        buildAndInsertMessageElement(message, type, positionAtTop);
+        buildAndInsertMessageElement(message, type, positionAtTop, dispelAutomatically);
     }
 };
 
-function buildAndInsertMessageElement (message, type, positionAtTop) {
+function buildAndInsertMessageElement (message, type, positionAtTop, dispelAutomatically) {
     cancelCurrentToast();
     let backgroundColor;
     const position = positionAtTop ? 'top:3rem;' : 'bottom: 35px;';
@@ -19,9 +19,16 @@ function buildAndInsertMessageElement (message, type, positionAtTop) {
             backgroundColor = '#bef5cb';
             break;
     }
+
+    let animation = '';
+    if (dispelAutomatically) {
+        animation = 'animation:fade-in-slide-down-then-exit 6s ease normal forwards';
+    } else {
+        animation = 'animation:fade-in-slide-down 6s ease normal forwards';
+    }
     const messageEl = document.createElement("div");
     messageEl.setAttribute("id", "current-info-message");
-    messageEl.setAttribute("style", 'background-color:' + backgroundColor + ';' + position)
+    messageEl.setAttribute("style", 'background-color:' + backgroundColor + ';' + position + animation);
     messageEl.setAttribute("class", 'info-message');
     messageEl.innerText = message;
     document.body.prepend(messageEl);

client/scripts/game.js

@@ -5,33 +5,43 @@ import {GameStateRenderer} from "../modules/GameStateRenderer.js";
 import {cancelCurrentToast, toast} from "../modules/Toast.js";
 
 export const game = () => {
-    socket.emit(globals.COMMANDS.GET_ENVIRONMENT, function(environment) {
+    const socket = io('/in-game');
-        let userId = UserUtility.validateAnonUserSignature(environment);
+    socket.on('disconnect', () => {
-        const splitUrl = window.location.href.split('/game/');
+        toast('You are disconnected.', 'error', true);
-        const accessCode = splitUrl[1];
-        if (/^[a-zA-Z0-9]+$/.test(accessCode) && accessCode.length === globals.ACCESS_CODE_LENGTH) {
-            socket.emit(globals.COMMANDS.FETCH_GAME_STATE, accessCode, userId, function (gameState) {
-                if (gameState === null) {
-                    window.location.replace('/not-found');
-                } else {
-                    console.log(gameState);
-                    gameState.accessCode = accessCode;
-                    userId = gameState.client.id;
-                    UserUtility.setAnonymousUserId(userId, environment);
-                    let gameStateRenderer = new GameStateRenderer(gameState);
-                    const timerWorker = new Worker('../modules/Timer.js');
-                    processGameState(gameState, userId, socket, gameStateRenderer, timerWorker); // this socket is initialized via a script tag in the game page HTML.
-                    setClientSocketHandlers(gameStateRenderer, socket, timerWorker);
-                }
-            });
-        } else {
-            window.location.replace('/not-found');
-        }
     });
+    socket.on('connect', () => {
+        socket.emit(globals.COMMANDS.GET_ENVIRONMENT, function(returnedEnvironment) {
+            prepareGamePage(returnedEnvironment, socket);
+        });
+    })
 };
 
+function prepareGamePage(environment, socket, reconnect=false) {
+    let userId = UserUtility.validateAnonUserSignature(environment);
+    const splitUrl = window.location.href.split('/game/');
+    const accessCode = splitUrl[1];
+    if (/^[a-zA-Z0-9]+$/.test(accessCode) && accessCode.length === globals.ACCESS_CODE_LENGTH) {
+        socket.emit(globals.COMMANDS.FETCH_GAME_STATE, accessCode, userId, function (gameState) {
+            if (gameState === null) {
+                window.location = '/not-found'
+            } else {
+                toast('You are connected.', 'success', true);
+                console.log(gameState);
+                gameState.accessCode = accessCode;
+                userId = gameState.client.id;
+                UserUtility.setAnonymousUserId(userId, environment);
+                let gameStateRenderer = new GameStateRenderer(gameState);
+                const timerWorker = new Worker('../modules/Timer.js');
+                setClientSocketHandlers(gameStateRenderer, socket, timerWorker);
+                processGameState(gameState, userId, socket, gameStateRenderer, timerWorker, reconnect); // this socket is initialized via a script tag in the game page HTML.
+            }
+        });
+    } else {
+        window.location = '/not-found';
+    }
+}
+
 function processGameState (gameState, userId, socket, gameStateRenderer, timerWorker) {
-    cancelCurrentToast();
     switch (gameState.status) {
         case globals.STATUS.LOBBY:
             document.getElementById("game-state-container").innerHTML = templates.LOBBY;
@@ -60,44 +70,49 @@ function processGameState (gameState, userId, socket, gameStateRenderer, timerWo
 }
 
 function setClientSocketHandlers(gameStateRenderer, socket, timerWorker) {
-    socket.on(globals.EVENTS.PLAYER_JOINED, (player, gameIsFull) => {
+    if (!socket.hasListeners(globals.EVENTS.PLAYER_JOINED)) {
-        toast(player.name + " joined!", "success", false);
+        socket.on(globals.EVENTS.PLAYER_JOINED, (player, gameIsFull) => {
-        gameStateRenderer.gameState.people.push(player);
+            toast(player.name + " joined!", "success", false);
-        gameStateRenderer.renderLobbyPlayers();
+            gameStateRenderer.gameState.people.push(player);
-        if (
+            gameStateRenderer.renderLobbyPlayers();
-            gameIsFull
+            if (
-            && (
+                gameIsFull
-                gameStateRenderer.gameState.userType === globals.USER_TYPES.MODERATOR
+                && (
-                || gameStateRenderer.gameState.userType === globals.USER_TYPES.TEMPORARY_MODERATOR
+                    gameStateRenderer.gameState.userType === globals.USER_TYPES.MODERATOR
-            )
+                    || gameStateRenderer.gameState.userType === globals.USER_TYPES.TEMPORARY_MODERATOR
-        ) {
+                )
-           displayStartGamePromptForModerators(gameStateRenderer);
+            ) {
-        }
+                displayStartGamePromptForModerators(gameStateRenderer, socket);
-    });
-
-    socket.on(globals.EVENTS.SYNC_GAME_STATE, () => {
-        socket.emit(
-            globals.COMMANDS.FETCH_GAME_STATE,
-            gameStateRenderer.gameState.accessCode,
-            gameStateRenderer.gameState.client.id,
-            function (gameState) {
-                processGameState(gameState, gameState.client.id, socket, gameStateRenderer);
             }
-        );
+        });
-    })
+    }
+    if (!socket.hasListeners(globals.EVENTS.SYNC_GAME_STATE)) {
+        socket.on(globals.EVENTS.SYNC_GAME_STATE, () => {
+            socket.emit(
+                globals.COMMANDS.FETCH_GAME_STATE,
+                gameStateRenderer.gameState.accessCode,
+                gameStateRenderer.gameState.client.id,
+                function (gameState) {
+                    processGameState(gameState, gameState.client.id, socket, gameStateRenderer);
+                }
+            );
+        });
+    }
 
-    socket.on(globals.EVENTS.START_TIMER, () => {
+    if (!socket.hasListeners(globals.EVENTS.START_TIMER)) {
-        runGameTimer(
+        socket.on(globals.EVENTS.START_TIMER, () => {
-            gameStateRenderer.gameState.timerParams.hours,
+            runGameTimer(
-            gameStateRenderer.gameState.timerParams.minutes,
+                gameStateRenderer.gameState.timerParams.hours,
-            globals.CLOCK_TICK_INTERVAL_MILLIS,
+                gameStateRenderer.gameState.timerParams.minutes,
-            null,
+                globals.CLOCK_TICK_INTERVAL_MILLIS,
-            timerWorker
+                null,
-        )
+                timerWorker
-    })
+            )
+        });
+    }
 }
 
-function displayStartGamePromptForModerators(gameStateRenderer) {
+function displayStartGamePromptForModerators(gameStateRenderer, socket) {
     document.getElementById("lobby-players").setAttribute("style", 'margin-bottom: 130px');
     let div = document.createElement("div");
     div.innerHTML = templates.START_GAME_PROMPT;

client/styles/GLOBAL.css

@@ -126,9 +126,6 @@ input {
     min-width: 15em;
     font-size: 20px;
     margin: 0 auto;
-    animation: fade-in-slide-down-then-exit 6s ease;
-    animation-fill-mode: forwards;
-    animation-direction: normal;
 }
 
 #navbar {
@@ -261,6 +258,25 @@ input {
     }
 }
 
+@keyframes fade-in-slide-down {
+    0% {
+        opacity: 0;
+        transform: translateY(-20px);
+    }
+    5% {
+        opacity: 1;
+        transform: translateY(0px);
+    }
+    95% {
+        opacity: 1;
+        transform: translateY(0px);
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0px);
+    }
+}
+
 @media(max-width: 550px) {
     h1 {
         font-size: 35px;

client/views/game.html

@@ -29,9 +29,6 @@
     game();
 </script>
 <script src="/socket.io/socket.io.js"></script>
-<script>
-    const socket = io('/in-game');
-</script>
 </body>
 </html>
 

server/main.js

@@ -43,9 +43,9 @@ logger.log('LOG LEVEL IS: ' + logLevel)
 if (localServer) {
     environment = globals.ENVIRONMENT.LOCAL;
     logger.log('starting main in LOCAL mode.');
-    if (useHttps && fs.existsSync(path.join(__dirname, './certs/localhost-key.pem')) && fs.existsSync(path.join(__dirname, './certs/localhost.pem'))) {
+    if (useHttps && fs.existsSync(path.join(__dirname, '../client/certs/localhost-key.pem')) && fs.existsSync(path.join(__dirname, '../client/certs/localhost.pem'))) {
-        const key = fs.readFileSync(path.join(__dirname, './certs/localhost-key.pem'), 'utf-8');
+        const key = fs.readFileSync(path.join(__dirname, '../client/certs/localhost-key.pem'), 'utf-8');
-        const cert = fs.readFileSync(path.join(__dirname, './certs/localhost.pem'), 'utf-8');
+        const cert = fs.readFileSync(path.join(__dirname, '../client/certs/localhost.pem'), 'utf-8');
         logger.log('local certs detected. Using HTTPS.');
         main = https.createServer({ key, cert }, app);
         logger.log(`navigate to https://localhost:${port}`);

server/modules/GameManager.js

@@ -17,6 +17,7 @@ class GameManager {
     addGameSocketHandlers = (namespace, socket) => {
         this.namespace = namespace;
         socket.on(globals.CLIENT_COMMANDS.FETCH_GAME_STATE, (accessCode, personId, ackFn) => {
+            this.logger.trace('request for game state for accessCode ' + accessCode + ', person ' + personId);
             handleRequestForGameState(
                 this.namespace,
                 this.logger,