fix failure to attach event listener

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);
+}

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) {

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 {

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 {