From 1c156b0a55803d42336760320187f12925789e67 Mon Sep 17 00:00:00 2001
From: AlecM33 <leohfx@gmail.com>
Date: Mon, 26 Dec 2022 14:31:50 -0500
Subject: [PATCH] refine spectator count

---
 .../front_end_components/HTMLFragments.js     |  3 +-
 client/src/modules/game_state/states/Lobby.js | 15 ++++++
 client/src/styles/game.css                    |  5 +-
 server/modules/GameStateCurator.js            | 48 +++----------------
 4 files changed, 28 insertions(+), 43 deletions(-)

diff --git a/client/src/modules/front_end_components/HTMLFragments.js b/client/src/modules/front_end_components/HTMLFragments.js
index 4a55af7..6a918e9 100644
--- a/client/src/modules/front_end_components/HTMLFragments.js
+++ b/client/src/modules/front_end_components/HTMLFragments.js
@@ -25,7 +25,8 @@ export const HTMLFragments = {
     </div>
     <div>
         <div id='lobby-people-container'>
-            <label for='lobby-players'>Other People</label>
+            <label for='lobby-players'></label>
+            <div id="spectator-count"></div>
             <div id='lobby-players'></div>
         </div>
         <div id='lobby-footer'>
diff --git a/client/src/modules/game_state/states/Lobby.js b/client/src/modules/game_state/states/Lobby.js
index 21ecad8..bd64585 100644
--- a/client/src/modules/game_state/states/Lobby.js
+++ b/client/src/modules/game_state/states/Lobby.js
@@ -46,6 +46,11 @@ export class Lobby {
         const playerCount = this.container.querySelector('#game-player-count');
         playerCount.innerText = this.stateBucket.currentGameState.gameSize + ' Players';
 
+        setNumberOfSpectators(
+            this.stateBucket.currentGameState.spectators.length,
+            this.container.querySelector('#spectator-count')
+        )
+
         const gameCode = this.container.querySelector('#game-code');
         gameCode.innerHTML = 'Or enter this code on the homepage: <span>' +
             this.stateBucket.currentGameState.accessCode + '</span>';
@@ -91,6 +96,10 @@ export class Lobby {
 
         this.socket.on(globals.EVENT_IDS.NEW_SPECTATOR, (spectator) => {
             this.stateBucket.currentGameState.spectators.push(spectator);
+            setNumberOfSpectators(
+                this.stateBucket.currentGameState.spectators.length,
+                document.getElementById('spectator-count')
+            );
         });
 
         // this.socket.on(globals.EVENT_IDS.PLAYER_LEFT, (player) => {
@@ -127,6 +136,12 @@ export class Lobby {
     }
 }
 
+function setNumberOfSpectators(number, el) {
+    el.innerText = '+ ' + (number === 1
+        ? number + ' Spectator'
+        : number + ' Spectators');
+}
+
 function enableOrDisableStartButton (gameState, buttonContainer, handler) {
     if (gameState.isFull) {
         buttonContainer.querySelector('#start-game-button').addEventListener('click', handler);
diff --git a/client/src/styles/game.css b/client/src/styles/game.css
index c058c5e..2bcaa95 100644
--- a/client/src/styles/game.css
+++ b/client/src/styles/game.css
@@ -25,7 +25,10 @@
 
 #lobby-people-container label {
     display: block;
-    margin-bottom: 0.5em;
+}
+
+#spectator-count {
+    color: #b1afcd;
 }
 
 .lobby-player-client {
diff --git a/server/modules/GameStateCurator.js b/server/modules/GameStateCurator.js
index 902b460..2089af0 100644
--- a/server/modules/GameStateCurator.js
+++ b/server/modules/GameStateCurator.js
@@ -5,7 +5,7 @@ const globals = require('../config/globals');
     information that they shouldn't.
  */
 const GameStateCurator = {
-    getGameStateFromPerspectiveOfPerson: (game, person, gameRunner, socket, logger) => {
+    getGameStateFromPerspectiveOfPerson: (game, person, gameRunner) => {
         return getGameStateBasedOnPermissions(game, person, gameRunner);
     },
 
@@ -58,30 +58,6 @@ function getGameStateBasedOnPermissions (game, person, gameRunner) {
             out: person.out
         };
     switch (person.userType) {
-        case globals.USER_TYPES.PLAYER:
-        case globals.USER_TYPES.KILLED_PLAYER: {
-            const state = {
-                accessCode: game.accessCode,
-                status: game.status,
-                moderator: GameStateCurator.mapPerson(game.moderator),
-                client: client,
-                deck: game.deck,
-                gameSize: game.gameSize,
-                people: game.people
-                    .filter((person) => {
-                        return person.assigned === true;
-                    })
-                    .map((filteredPerson) =>
-                        GameStateCurator.mapPerson(filteredPerson)
-                    ),
-                timerParams: game.timerParams,
-                isFull: game.isFull
-            };
-            if (game.status === globals.STATUS.ENDED) {
-                state.people = GameStateCurator.mapPeopleForModerator(game.people);
-            }
-            return state;
-        }
         case globals.USER_TYPES.MODERATOR:
             return {
                 accessCode: game.accessCode,
@@ -98,22 +74,9 @@ function getGameStateBasedOnPermissions (game, person, gameRunner) {
                 )
             };
         case globals.USER_TYPES.TEMPORARY_MODERATOR:
-            return {
-                accessCode: game.accessCode,
-                status: game.status,
-                moderator: GameStateCurator.mapPerson(game.moderator),
-                client: client,
-                deck: game.deck,
-                gameSize: game.gameSize,
-                people: game.people
-                    .filter((person) => {
-                        return person.assigned === true;
-                    })
-                    .map((filteredPerson) => GameStateCurator.mapPerson(filteredPerson)),
-                timerParams: game.timerParams,
-                isFull: game.isFull
-            };
         case globals.USER_TYPES.SPECTATOR:
+        case globals.USER_TYPES.PLAYER:
+        case globals.USER_TYPES.KILLED_PLAYER:
             return {
                 accessCode: game.accessCode,
                 status: game.status,
@@ -127,7 +90,10 @@ function getGameStateBasedOnPermissions (game, person, gameRunner) {
                     })
                     .map((filteredPerson) => GameStateCurator.mapPerson(filteredPerson)),
                 timerParams: game.timerParams,
-                isFull: game.isFull
+                isFull: game.isFull,
+                spectators: game.spectators.map((filteredPerson) =>
+                    GameStateCurator.mapPerson(filteredPerson)
+                )
             };
         default:
             break;