diff --git a/.gitignore b/.gitignore index a1175b0..984aaaa 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ .idea node_modules/* +./client/certs/ .vscode/launch.json package-lock.json diff --git a/client/modules/GameStateRenderer.js b/client/modules/GameStateRenderer.js index a947711..caa2860 100644 --- 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); diff --git a/client/modules/Toast.js b/client/modules/Toast.js index 93a9b72..04def60 100644 --- 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); diff --git a/client/scripts/game.js b/client/scripts/game.js index 1e76185..67bd9ad 100644 --- 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; diff --git a/client/styles/GLOBAL.css b/client/styles/GLOBAL.css index 7b99623..b8fdd3c 100644 --- 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; diff --git a/client/views/game.html b/client/views/game.html index cae06da..c63ab65 100644 --- a/client/views/game.html +++ b/client/views/game.html @@ -29,9 +29,6 @@ game(); - diff --git a/server/main.js b/server/main.js index 5bf5dc8..5ae182f 100644 --- 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}`); diff --git a/server/modules/GameManager.js b/server/modules/GameManager.js index 97244bf..bc0b0d5 100644 --- 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,