From 9ba1cff82c77d15d49b534f8f7633ebed6ea2e80 Mon Sep 17 00:00:00 2001 From: AlecM33 Date: Wed, 29 Dec 2021 15:47:46 -0500 Subject: [PATCH] fix failure to attach event listener --- client/src/modules/GameStateRenderer.js | 35 +++++++++++++------------ client/src/styles/GLOBAL.css | 3 ++- client/src/styles/game.css | 8 ++++-- server/modules/GameManager.js | 23 +++++++++------- 4 files changed, 40 insertions(+), 29 deletions(-) diff --git a/client/src/modules/GameStateRenderer.js b/client/src/modules/GameStateRenderer.js index a17795a..27709b9 100644 --- a/client/src/modules/GameStateRenderer.js +++ b/client/src/modules/GameStateRenderer.js @@ -30,7 +30,7 @@ export class GameStateRenderer { } let playerCount = this.stateBucket.currentGameState.people.length; document.querySelector("label[for='lobby-players']").innerText = - "People (" + playerCount + "/" + getGameSize(this.stateBucket.currentGameState.deck) + " Players)"; + "Participants (" + playerCount + "/" + getGameSize(this.stateBucket.currentGameState.deck) + " Players)"; } renderLobbyHeader() { @@ -92,19 +92,7 @@ export class GameStateRenderer { } renderModeratorView() { - let div = document.createElement("div"); - div.innerHTML = templates.END_GAME_PROMPT; - div.querySelector("#end-game-button").addEventListener('click', (e) => { - e.preventDefault(); - if (confirm("End the game?")) { - this.socket.emit( - globals.COMMANDS.END_GAME, - this.stateBucket.currentGameState.accessCode - ); - } - }); - document.getElementById("game-content").appendChild(div); - + createEndGamePromptComponent(this.socket, this.stateBucket); let modTransferButton = document.getElementById("mod-transfer-button"); modTransferButton.addEventListener( @@ -121,9 +109,7 @@ export class GameStateRenderer { } renderTempModView() { - let div = document.createElement("div"); - div.innerHTML = templates.END_GAME_PROMPT; - document.body.appendChild(div); + createEndGamePromptComponent(this.socket, this.stateBucket) renderPlayerRole(this.stateBucket.currentGameState); this.renderPlayersWithNoRoleInformationUnlessRevealed(true); @@ -463,3 +449,18 @@ function removeExistingPlayerElements(killPlayerHandlers, revealRoleHandlers) { el.remove(); }); } + +function createEndGamePromptComponent(socket, stateBucket) { + let div = document.createElement("div"); + div.innerHTML = templates.END_GAME_PROMPT; + div.querySelector("#end-game-button").addEventListener('click', (e) => { + e.preventDefault(); + if (confirm("End the game?")) { + socket.emit( + globals.COMMANDS.END_GAME, + stateBucket.currentGameState.accessCode + ); + } + }); + document.getElementById("game-content").appendChild(div); +} diff --git a/client/src/styles/GLOBAL.css b/client/src/styles/GLOBAL.css index 189755a..812f013 100644 --- a/client/src/styles/GLOBAL.css +++ b/client/src/styles/GLOBAL.css @@ -190,7 +190,7 @@ input { align-items: center; justify-content: center; position: fixed; - z-index: 1000; + z-index: 55000; padding: 10px; border-radius: 3px; font-family: 'signika-negative', sans-serif; @@ -218,6 +218,7 @@ input { background-color: #333243; border-bottom: 2px solid #57566a; height: 51px; + z-index: 53000; } #desktop-links > a:nth-child(1), #mobile-links a:nth-child(1) { diff --git a/client/src/styles/game.css b/client/src/styles/game.css index f32930f..98413a1 100644 --- a/client/src/styles/game.css +++ b/client/src/styles/game.css @@ -45,7 +45,7 @@ flex-wrap: wrap; display: flex; width: 95%; - margin: 1em auto 85px auto; + margin: 1em auto 100px auto; } #game-state-container h2 { @@ -278,6 +278,8 @@ h1 { min-width: 5em; display: flex; justify-content: center; + align-items: center; + height: 43px; } #game-timer.low { @@ -580,6 +582,7 @@ label[for='moderator'] { border: 2px transparent; border-radius: 3px; color: #d7d7d7; + font-family: signika-negative, sans-serif; } .make-mod-button:hover { @@ -663,7 +666,7 @@ label[for='moderator'] { padding: 10px 10px 0 10px; border-radius: 3px; min-height: 25em; - max-width: 25em; + max-width: 35em; min-width: 17em; margin-top: 1em; } @@ -711,6 +714,7 @@ label[for='moderator'] { #game-timer { font-size: 30px; + height: 38px; } #players-alive-label { diff --git a/server/modules/GameManager.js b/server/modules/GameManager.js index 124ed35..c313dc3 100644 --- a/server/modules/GameManager.js +++ b/server/modules/GameManager.js @@ -343,17 +343,15 @@ function transferModeratorPowers(game, person, namespace, logger) { /* Since clients are anonymous, we have to rely to some extent on a cookie to identify them. Socket ids are unique to a client, but they are re-generated if a client disconnects and then reconnects. Thus, to have the most resilient identification i.e. to let them refresh, navigate away and come back, - get disconnected and reconnect, etc. we should have a combination of the socket id and the cookie. This - will also allow us to reject certain theoretical ways of breaking things, such as copying someone else's - cookie. Though if a client wants to clear their cookie and reset their connection, there's not much we can do. - The best thing in my opinion is to make it exceptionally difficult for clients to _accidentally_ break their experience. + get disconnected and reconnect, etc. we should have a combination of the socket id and the cookie. + My philosophy is to make it exceptionally difficult for clients to _accidentally_ break their experience. */ function handleRequestForGameState(namespace, logger, gameRunner, accessCode, personCookie, ackFn, socket) { const game = gameRunner.activeGames[accessCode]; if (game) { let matchingPerson = game.people.find((person) => person.cookie === personCookie); if (!matchingPerson) { - matchingPerson = game.spectators.find((spectator) => spectator.cookie = personCookie); + matchingPerson = game.spectators.find((spectator) => spectator.cookie === personCookie); } if (game.moderator.cookie === personCookie) { matchingPerson = game.moderator; @@ -391,7 +389,6 @@ function handleRequestForGameState(namespace, logger, gameRunner, accessCode, pe : game.people.find((person) => person.assigned === false); if (unassignedPerson) { logger.trace("completely new person with a first connection to the room: " + unassignedPerson.name); - socket.join(accessCode); unassignedPerson.assigned = true; unassignedPerson.socketId = socket.id; ackFn(GameStateCurator.getGameStateFromPerspectiveOfPerson(game, unassignedPerson, gameRunner, socket, logger)); @@ -402,10 +399,18 @@ function handleRequestForGameState(namespace, logger, gameRunner, accessCode, pe {name: unassignedPerson.name, userType: unassignedPerson.userType}, isFull ); - } else { - rejectClientRequestForGameState(ackFn); - logger.trace('this game is full'); + } else { // if the game is full, make them a spectator. + let spectator = new Person( + createRandomId(), + createRandomId(), + UsernameGenerator.generate(), + globals.USER_TYPES.SPECTATOR + ); + logger.trace("new spectator: " + spectator.name); + game.spectators.push(spectator); + ackFn(GameStateCurator.getGameStateFromPerspectiveOfPerson(game, spectator, gameRunner, socket, logger)); } + socket.join(accessCode); } } } else {