connection/reconnection logic

2025-12-26 15:57:50 +01:00 · 2021-11-29 19:58:24 -05:00
parent 0560dcffa9
commit dfe6edeb96
8 changed files with 111 additions and 70 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,5 @@
 .idea
 node_modules/*
+./client/certs/
 .vscode/launch.json
 package-lock.json
--- a/client/modules/GameStateRenderer.js
+++ b/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);
--- a/client/modules/Toast.js
+++ b/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);
--- a/client/scripts/game.js
+++ b/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) {
-        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.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');
-        }
+    const socket = io('/in-game');
+    socket.on('disconnect', () => {
+        toast('You are disconnected.', 'error', true);
    });
+    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) => {
-        toast(player.name + " joined!", "success", false);
-        gameStateRenderer.gameState.people.push(player);
-        gameStateRenderer.renderLobbyPlayers();
-        if (
-            gameIsFull
-            && (
-                gameStateRenderer.gameState.userType === globals.USER_TYPES.MODERATOR
-                || gameStateRenderer.gameState.userType === globals.USER_TYPES.TEMPORARY_MODERATOR
-            )
-        ) {
-           displayStartGamePromptForModerators(gameStateRenderer);
-        }
-    });
-
-    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.PLAYER_JOINED)) {
+        socket.on(globals.EVENTS.PLAYER_JOINED, (player, gameIsFull) => {
+            toast(player.name + " joined!", "success", false);
+            gameStateRenderer.gameState.people.push(player);
+            gameStateRenderer.renderLobbyPlayers();
+            if (
+                gameIsFull
+                && (
+                    gameStateRenderer.gameState.userType === globals.USER_TYPES.MODERATOR
+                    || gameStateRenderer.gameState.userType === globals.USER_TYPES.TEMPORARY_MODERATOR
+                )
+            ) {
+                displayStartGamePromptForModerators(gameStateRenderer, socket);
            }
-        );
-    })
+        });
+    }
+    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, () => {
-        runGameTimer(
-            gameStateRenderer.gameState.timerParams.hours,
-            gameStateRenderer.gameState.timerParams.minutes,
-            globals.CLOCK_TICK_INTERVAL_MILLIS,
-            null,
-            timerWorker
-        )
-    })
+    if (!socket.hasListeners(globals.EVENTS.START_TIMER)) {
+        socket.on(globals.EVENTS.START_TIMER, () => {
+            runGameTimer(
+                gameStateRenderer.gameState.timerParams.hours,
+                gameStateRenderer.gameState.timerParams.minutes,
+                globals.CLOCK_TICK_INTERVAL_MILLIS,
+                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;
--- a/client/styles/GLOBAL.css
+++ b/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;
--- a/client/views/game.html
+++ b/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>

--- a/server/main.js
+++ b/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'))) {
-        const key = fs.readFileSync(path.join(__dirname, './certs/localhost-key.pem'), 'utf-8');
-        const cert = fs.readFileSync(path.join(__dirname, './certs/localhost.pem'), 'utf-8');
+    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, '../client/certs/localhost-key.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}`);
--- a/server/modules/GameManager.js
+++ b/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,