From 7e71bbb27a82e3a21deeb556403536ffb2c32d88 Mon Sep 17 00:00:00 2001
From: Alec <leohfx@gmail.com>
Date: Wed, 6 Mar 2024 00:39:15 -0500
Subject: [PATCH] Spectator bugfixes (#188)

* fix spectator bugs

* fix import spacing

* remove log

* fix redundant parens

* remove comma
---
 client/src/config/globals.js                  |  3 +-
 .../modules/game_state/states/InProgress.js   | 32 +++++++++++++++++++
 client/src/modules/game_state/states/Lobby.js |  7 ++--
 3 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/client/src/config/globals.js b/client/src/config/globals.js
index 041fa74..ae48a9b 100644
--- a/client/src/config/globals.js
+++ b/client/src/config/globals.js
@@ -105,6 +105,7 @@ export const IN_PROGRESS_EVENTS = function () {
     return [
         EVENT_IDS.KILL_PLAYER,
         EVENT_IDS.REVEAL_PLAYER,
-        EVENT_IDS.ADD_SPECTATOR
+        EVENT_IDS.ADD_SPECTATOR,
+        EVENT_IDS.KICK_PERSON
     ];
 };
diff --git a/client/src/modules/game_state/states/InProgress.js b/client/src/modules/game_state/states/InProgress.js
index 4590d2d..278754b 100644
--- a/client/src/modules/game_state/states/InProgress.js
+++ b/client/src/modules/game_state/states/InProgress.js
@@ -35,11 +35,13 @@ export class InProgress {
                 break;
             case USER_TYPES.MODERATOR:
                 document.getElementById('transfer-mod-prompt').innerHTML = HTMLFragments.TRANSFER_MOD_MODAL;
+                document.getElementById('player-options-prompt').innerHTML = HTMLFragments.PLAYER_OPTIONS_MODAL;
                 this.container.innerHTML = HTMLFragments.MODERATOR_GAME_VIEW;
                 this.renderModeratorView();
                 break;
             case USER_TYPES.TEMPORARY_MODERATOR:
                 document.getElementById('transfer-mod-prompt').innerHTML = HTMLFragments.TRANSFER_MOD_MODAL;
+                document.getElementById('player-options-prompt').innerHTML = HTMLFragments.PLAYER_OPTIONS_MODAL;
                 this.container.innerHTML = HTMLFragments.TEMP_MOD_GAME_VIEW;
                 this.renderTempModView();
                 break;
@@ -257,6 +259,14 @@ export class InProgress {
             }
         });
 
+        this.socket.on(EVENT_IDS.KICK_PERSON, (kickedId, gameIsStartable) => {
+            if (kickedId === this.stateBucket.currentGameState.client.id) {
+                window.location = '/?message=' + encodeURIComponent('You were kicked by the moderator.');
+            } else {
+                this.handleSpectatorExiting(kickedId);
+            }
+        });
+
         if (this.stateBucket.currentGameState.timerParams) {
             if (this.stateBucket.timerWorker) {
                 this.stateBucket.timerWorker.terminate();
@@ -390,6 +400,28 @@ export class InProgress {
         }
     }
 
+    handleSpectatorExiting (id) {
+        const index = this.stateBucket.currentGameState.people.findIndex(person => person.id === id);
+        if (index >= 0) {
+            this.stateBucket.currentGameState.people
+                .splice(index, 1);
+        }
+        SharedStateUtil.setNumberOfSpectators(
+            this.stateBucket.currentGameState.people.filter(p => p.userType === USER_TYPES.SPECTATOR).length,
+            document.getElementById('spectator-count')
+        );
+        if (this.stateBucket.currentGameState.client.userType === USER_TYPES.MODERATOR
+            || this.stateBucket.currentGameState.client.userType === USER_TYPES.TEMPORARY_MODERATOR) {
+            toast(
+                'Spectator kicked.',
+                'success',
+                true,
+                true,
+                'short'
+            );
+        }
+    }
+
     displayAvailableModerators () {
         document.getElementById('transfer-mod-modal-content').innerText = '';
         document.querySelectorAll('.potential-moderator').forEach((el) => {
diff --git a/client/src/modules/game_state/states/Lobby.js b/client/src/modules/game_state/states/Lobby.js
index e3416f1..4d1d56c 100644
--- a/client/src/modules/game_state/states/Lobby.js
+++ b/client/src/modules/game_state/states/Lobby.js
@@ -316,11 +316,8 @@ export class Lobby {
             document.getElementById('spectator-count')
         );
         this.populatePlayers();
-        if ((
-            this.stateBucket.currentGameState.client.userType === USER_TYPES.MODERATOR
-            || this.stateBucket.currentGameState.client.userType === USER_TYPES.TEMPORARY_MODERATOR
-        )
-        ) {
+        if (this.stateBucket.currentGameState.client.userType === USER_TYPES.MODERATOR
+            || this.stateBucket.currentGameState.client.userType === USER_TYPES.TEMPORARY_MODERATOR) {
             toast(
                 event === EVENT_IDS.LEAVE_ROOM ? 'A player left.' : 'Player kicked.',
                 event === EVENT_IDS.LEAVE_ROOM ? 'warning' : 'success',