From f7c31096a9302e49e1a313b177bc350ae3180116 Mon Sep 17 00:00:00 2001 From: AlecM33 Date: Tue, 27 Dec 2022 18:38:56 -0500 Subject: [PATCH] fix spectator event to fire for all applicable game states --- .../modules/game_state/states/InProgress.js | 12 +- client/src/modules/game_state/states/Lobby.js | 4 - .../states/shared/SharedStateUtil.js | 201 +++++++++++++++++ .../src/modules/page_handlers/gameHandler.js | 206 +----------------- client/src/modules/timer/GameTimerManager.js | 27 ++- 5 files changed, 228 insertions(+), 222 deletions(-) diff --git a/client/src/modules/game_state/states/InProgress.js b/client/src/modules/game_state/states/InProgress.js index fcabca2..f690ca8 100644 --- a/client/src/modules/game_state/states/InProgress.js +++ b/client/src/modules/game_state/states/InProgress.js @@ -12,9 +12,6 @@ export class InProgress { this.stateBucket = stateBucket; this.socket = socket; this.container = document.getElementById(containerId); - this.components = { - - }; this.killPlayerHandlers = {}; this.revealRoleHandlers = {}; this.transferModHandlers = {}; @@ -192,6 +189,15 @@ export class InProgress { } }); + if (this.socket.hasListeners(globals.EVENT_IDS.NEW_SPECTATOR)) { + this.socket.removeAllListeners(globals.EVENT_IDS.NEW_SPECTATOR); + } + + this.socket.on(globals.EVENT_IDS.NEW_SPECTATOR, (spectator) => { + stateBucket.currentGameState.spectators.push(spectator); + this.displayAvailableModerators(); + }); + if (this.stateBucket.currentGameState.timerParams) { const timerWorker = new Worker(new URL('../../timer/Timer.js', import.meta.url)); const gameTimerManager = new GameTimerManager(stateBucket, this.socket); diff --git a/client/src/modules/game_state/states/Lobby.js b/client/src/modules/game_state/states/Lobby.js index 21ecad8..d2705b3 100644 --- a/client/src/modules/game_state/states/Lobby.js +++ b/client/src/modules/game_state/states/Lobby.js @@ -89,10 +89,6 @@ export class Lobby { } }); - this.socket.on(globals.EVENT_IDS.NEW_SPECTATOR, (spectator) => { - this.stateBucket.currentGameState.spectators.push(spectator); - }); - // this.socket.on(globals.EVENT_IDS.PLAYER_LEFT, (player) => { // removeStartGameFunctionalityIfPresent(this.stateBucket.currentGameState, this.startGameHandler); // toast(player.name + ' has left!', 'error', false, true, 'short'); diff --git a/client/src/modules/game_state/states/shared/SharedStateUtil.js b/client/src/modules/game_state/states/shared/SharedStateUtil.js index fdafeed..10f32dd 100644 --- a/client/src/modules/game_state/states/shared/SharedStateUtil.js +++ b/client/src/modules/game_state/states/shared/SharedStateUtil.js @@ -3,6 +3,12 @@ import { UserUtility } from '../../../utility/UserUtility.js'; import { globals } from '../../../../config/globals.js'; import { toast } from '../../../front_end_components/Toast.js'; import { Confirmation } from '../../../front_end_components/Confirmation.js'; +import { Lobby } from '../Lobby.js'; +import { stateBucket } from '../../StateBucket.js'; +import { InProgress } from '../InProgress.js'; +import { Ended } from '../Ended.js'; +import { HTMLFragments } from '../../../front_end_components/HTMLFragments.js'; +import { ModalManager } from '../../../front_end_components/ModalManager.js'; // This constant is meant to house logic that is utilized by more than one game state export const SharedStateUtil = { @@ -23,6 +29,7 @@ export const SharedStateUtil = { toast(res.content, 'error', true, true, 'medium'); }); }, + createRestartButton: (stateBucket) => { const restartGameButton = document.createElement('button'); restartGameButton.classList.add('app-button'); @@ -35,5 +42,199 @@ export const SharedStateUtil = { }); return restartGameButton; + }, + + setClientSocketHandlers: (stateBucket, socket) => { + const commonAckLogic = (gameState) => { + stateBucket.currentGameState = gameState; + processGameState( + stateBucket.currentGameState, + gameState.client.cookie, + socket, + true, + true + ); + }; + const startGameStateAckFn = (gameState) => { + commonAckLogic(gameState); + toast('Game started!', 'success'); + }; + + const restartGameStateAckFn = (gameState) => { + commonAckLogic(gameState); + toast('Game restarted!', 'success'); + }; + + const fetchGameStateHandler = (ackFn) => { + socket.emit( + globals.SOCKET_EVENTS.IN_GAME_MESSAGE, + globals.EVENT_IDS.FETCH_GAME_STATE, + stateBucket.currentGameState.accessCode, + { personId: stateBucket.currentGameState.client.cookie }, + ackFn + ); + }; + + socket.on(globals.EVENT_IDS.START_GAME, () => { fetchGameStateHandler(startGameStateAckFn); }); + + socket.on(globals.EVENT_IDS.RESTART_GAME, () => { fetchGameStateHandler(restartGameStateAckFn); }); + + socket.on(globals.EVENT_IDS.SYNC_GAME_STATE, () => { + socket.emit( + globals.SOCKET_EVENTS.IN_GAME_MESSAGE, + globals.EVENT_IDS.FETCH_GAME_STATE, + stateBucket.currentGameState.accessCode, + { personId: stateBucket.currentGameState.client.cookie }, + function (gameState) { + stateBucket.currentGameState = gameState; + processGameState( + stateBucket.currentGameState, + gameState.client.cookie, + socket, + true, + true + ); + } + ); + }); + + socket.on(globals.COMMANDS.END_GAME, (people) => { + stateBucket.currentGameState.people = people; + stateBucket.currentGameState.status = globals.STATUS.ENDED; + processGameState( + stateBucket.currentGameState, + stateBucket.currentGameState.client.cookie, + socket, + true, + true + ); + }); + }, + + syncWithGame: (stateBucket, socket, cookie, window) => { + 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.SOCKET_EVENTS.IN_GAME_MESSAGE, globals.EVENT_IDS.FETCH_GAME_STATE, accessCode, { personId: cookie }, function (gameState) { + if (gameState === null) { + window.location = '/not-found?reason=' + encodeURIComponent('game-not-found'); + } else { + stateBucket.currentGameState = gameState; + document.querySelector('.spinner-container')?.remove(); + document.querySelector('.spinner-background')?.remove(); + document.getElementById('game-content').innerHTML = HTMLFragments.INITIAL_GAME_DOM; + toast('You are connected.', 'success', true, true, 'short'); + processGameState(stateBucket.currentGameState, cookie, socket, true, true); + } + }); + } else { + window.location = '/not-found?reason=' + encodeURIComponent('invalid-access-code'); + } } }; + +function processGameState ( + currentGameState, + userId, + socket, + refreshPrompt = true, + animateContainer = false +) { + const containerAnimation = document.getElementById('game-state-container').animate( + [ + { opacity: '0', transform: 'translateY(10px)' }, + { opacity: '1', transform: 'translateY(0px)' } + ], { + duration: 500, + easing: 'ease-in-out', + fill: 'both' + }); + if (animateContainer) { + containerAnimation.play(); + } + + displayClientInfo(currentGameState.client.name, currentGameState.client.userType); + + switch (currentGameState.status) { + case globals.STATUS.LOBBY: + const lobby = new Lobby('game-state-container', stateBucket, socket); + if (refreshPrompt) { + lobby.removeStartGameFunctionalityIfPresent(); + } + lobby.populateHeader(); + lobby.populatePlayers(); + lobby.setSocketHandlers(); + if (( + currentGameState.client.userType === globals.USER_TYPES.MODERATOR + || currentGameState.client.userType === globals.USER_TYPES.TEMPORARY_MODERATOR + ) + && refreshPrompt + ) { + lobby.displayStartGamePromptForModerators(); + } + break; + case globals.STATUS.IN_PROGRESS: + if (refreshPrompt) { + document.querySelector('#game-control-prompt')?.remove(); + } + const inProgressGame = new InProgress('game-state-container', stateBucket, socket); + inProgressGame.setSocketHandlers(); + inProgressGame.setUserView(currentGameState.client.userType); + break; + case globals.STATUS.ENDED: { + const ended = new Ended('game-state-container', stateBucket, socket); + ended.renderEndOfGame(currentGameState); + break; + } + default: + break; + } + + activateRoleInfoButton(stateBucket.currentGameState.deck); +} + +function activateRoleInfoButton (deck) { + deck.sort((a, b) => { + return a.team === globals.ALIGNMENT.GOOD ? -1 : 1; + }); + document.getElementById('role-info-button').addEventListener('click', (e) => { + e.preventDefault(); + document.getElementById('role-info-prompt').innerHTML = HTMLFragments.ROLE_INFO_MODAL; + const modalContent = document.getElementById('game-role-info-container'); + for (const card of deck) { + const roleDiv = document.createElement('div'); + const roleNameDiv = document.createElement('div'); + + roleNameDiv.classList.add('role-info-name'); + + const roleName = document.createElement('h5'); + const roleQuantity = document.createElement('h5'); + const roleDescription = document.createElement('p'); + + roleDescription.innerText = card.description; + roleName.innerText = card.role; + roleQuantity.innerText = card.quantity + 'x'; + + if (card.team === globals.ALIGNMENT.GOOD) { + roleName.classList.add(globals.ALIGNMENT.GOOD); + } else { + roleName.classList.add(globals.ALIGNMENT.EVIL); + } + + roleNameDiv.appendChild(roleQuantity); + roleNameDiv.appendChild(roleName); + + roleDiv.appendChild(roleNameDiv); + roleDiv.appendChild(roleDescription); + + modalContent.appendChild(roleDiv); + } + ModalManager.displayModal('role-info-modal', 'role-info-modal-background', 'close-role-info-modal-button'); + }); +} + +function displayClientInfo (name, userType) { + document.getElementById('client-name').innerText = name; + document.getElementById('client-user-type').innerText = userType; + document.getElementById('client-user-type').innerText += globals.USER_TYPE_ICONS[userType]; +} diff --git a/client/src/modules/page_handlers/gameHandler.js b/client/src/modules/page_handlers/gameHandler.js index f1c982f..1dcf371 100644 --- a/client/src/modules/page_handlers/gameHandler.js +++ b/client/src/modules/page_handlers/gameHandler.js @@ -2,12 +2,7 @@ import { injectNavbar } from '../front_end_components/Navbar.js'; import { stateBucket } from '../game_state/StateBucket.js'; import { UserUtility } from '../utility/UserUtility.js'; import { toast } from '../front_end_components/Toast.js'; -import { globals } from '../../config/globals.js'; -import { HTMLFragments } from '../front_end_components/HTMLFragments.js'; -import { ModalManager } from '../front_end_components/ModalManager.js'; -import { Lobby } from '../game_state/states/Lobby.js'; -import { InProgress } from '../game_state/states/InProgress.js'; -import { Ended } from '../game_state/states/Ended.js'; +import { SharedStateUtil } from '../game_state/states/shared/SharedStateUtil.js'; export const gameHandler = async (socket, XHRUtility, window, gameDOM) => { document.body.innerHTML = gameDOM + document.body.innerHTML; @@ -25,7 +20,7 @@ export const gameHandler = async (socket, XHRUtility, window, gameDOM) => { stateBucket.environment = response.content; socket.on('connect', function () { - syncWithGame( + SharedStateUtil.syncWithGame( stateBucket, socket, UserUtility.validateAnonUserSignature(response.content), @@ -41,200 +36,5 @@ export const gameHandler = async (socket, XHRUtility, window, gameDOM) => { toast('Disconnected. Attempting reconnect...', 'error', true, false); }); - setClientSocketHandlers(stateBucket, socket); + SharedStateUtil.setClientSocketHandlers(stateBucket, socket); }; - -function syncWithGame (stateBucket, socket, cookie, window) { - 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.SOCKET_EVENTS.IN_GAME_MESSAGE, globals.EVENT_IDS.FETCH_GAME_STATE, accessCode, { personId: cookie }, function (gameState) { - if (gameState === null) { - window.location = '/not-found?reason=' + encodeURIComponent('game-not-found'); - } else { - stateBucket.currentGameState = gameState; - document.querySelector('.spinner-container')?.remove(); - document.querySelector('.spinner-background')?.remove(); - document.getElementById('game-content').innerHTML = HTMLFragments.INITIAL_GAME_DOM; - toast('You are connected.', 'success', true, true, 'short'); - processGameState(stateBucket.currentGameState, cookie, socket, true, true); - } - }); - } else { - window.location = '/not-found?reason=' + encodeURIComponent('invalid-access-code'); - } -} - -function processGameState ( - currentGameState, - userId, - socket, - refreshPrompt = true, - animateContainer = false -) { - const containerAnimation = document.getElementById('game-state-container').animate( - [ - { opacity: '0', transform: 'translateY(10px)' }, - { opacity: '1', transform: 'translateY(0px)' } - ], { - duration: 500, - easing: 'ease-in-out', - fill: 'both' - }); - if (animateContainer) { - containerAnimation.play(); - } - - displayClientInfo(currentGameState.client.name, currentGameState.client.userType); - - switch (currentGameState.status) { - case globals.STATUS.LOBBY: - const lobby = new Lobby('game-state-container', stateBucket, socket); - if (refreshPrompt) { - lobby.removeStartGameFunctionalityIfPresent(); - } - lobby.populateHeader(); - lobby.populatePlayers(); - lobby.setSocketHandlers(); - if (( - currentGameState.client.userType === globals.USER_TYPES.MODERATOR - || currentGameState.client.userType === globals.USER_TYPES.TEMPORARY_MODERATOR - ) - && refreshPrompt - ) { - lobby.displayStartGamePromptForModerators(); - } - break; - case globals.STATUS.IN_PROGRESS: - if (refreshPrompt) { - document.querySelector('#game-control-prompt')?.remove(); - } - const inProgressGame = new InProgress('game-state-container', stateBucket, socket); - inProgressGame.setSocketHandlers(); - inProgressGame.setUserView(currentGameState.client.userType); - break; - case globals.STATUS.ENDED: { - const ended = new Ended('game-state-container', stateBucket, socket); - ended.renderEndOfGame(currentGameState); - break; - } - default: - break; - } - - activateRoleInfoButton(stateBucket.currentGameState.deck); -} - -function activateRoleInfoButton (deck) { - deck.sort((a, b) => { - return a.team === globals.ALIGNMENT.GOOD ? -1 : 1; - }); - document.getElementById('role-info-button').addEventListener('click', (e) => { - e.preventDefault(); - document.getElementById('role-info-prompt').innerHTML = HTMLFragments.ROLE_INFO_MODAL; - const modalContent = document.getElementById('game-role-info-container'); - for (const card of deck) { - const roleDiv = document.createElement('div'); - const roleNameDiv = document.createElement('div'); - - roleNameDiv.classList.add('role-info-name'); - - const roleName = document.createElement('h5'); - const roleQuantity = document.createElement('h5'); - const roleDescription = document.createElement('p'); - - roleDescription.innerText = card.description; - roleName.innerText = card.role; - roleQuantity.innerText = card.quantity + 'x'; - - if (card.team === globals.ALIGNMENT.GOOD) { - roleName.classList.add(globals.ALIGNMENT.GOOD); - } else { - roleName.classList.add(globals.ALIGNMENT.EVIL); - } - - roleNameDiv.appendChild(roleQuantity); - roleNameDiv.appendChild(roleName); - - roleDiv.appendChild(roleNameDiv); - roleDiv.appendChild(roleDescription); - - modalContent.appendChild(roleDiv); - } - ModalManager.displayModal('role-info-modal', 'role-info-modal-background', 'close-role-info-modal-button'); - }); -} - -function displayClientInfo (name, userType) { - document.getElementById('client-name').innerText = name; - document.getElementById('client-user-type').innerText = userType; - document.getElementById('client-user-type').innerText += globals.USER_TYPE_ICONS[userType]; -} - -// Should be reserved for socket events not specific to any one game state (Lobby, In Progress, etc.) -function setClientSocketHandlers (stateBucket, socket) { - const commonAckLogic = (gameState) => { - stateBucket.currentGameState = gameState; - processGameState( - stateBucket.currentGameState, - gameState.client.cookie, - socket, - true, - true - ); - }; - const startGameStateAckFn = (gameState) => { - commonAckLogic(gameState); - toast('Game started!', 'success'); - }; - - const restartGameStateAckFn = (gameState) => { - commonAckLogic(gameState); - toast('Game restarted!', 'success'); - }; - - const fetchGameStateHandler = (ackFn) => { - socket.emit( - globals.SOCKET_EVENTS.IN_GAME_MESSAGE, - globals.EVENT_IDS.FETCH_GAME_STATE, - stateBucket.currentGameState.accessCode, - { personId: stateBucket.currentGameState.client.cookie }, - ackFn - ); - }; - - socket.on(globals.EVENT_IDS.START_GAME, () => { fetchGameStateHandler(startGameStateAckFn); }); - - socket.on(globals.EVENT_IDS.RESTART_GAME, () => { fetchGameStateHandler(restartGameStateAckFn); }); - - socket.on(globals.EVENT_IDS.SYNC_GAME_STATE, () => { - socket.emit( - globals.SOCKET_EVENTS.IN_GAME_MESSAGE, - globals.EVENT_IDS.FETCH_GAME_STATE, - stateBucket.currentGameState.accessCode, - { personId: stateBucket.currentGameState.client.cookie }, - function (gameState) { - stateBucket.currentGameState = gameState; - processGameState( - stateBucket.currentGameState, - gameState.client.cookie, - socket, - true, - true - ); - } - ); - }); - - socket.on(globals.COMMANDS.END_GAME, (people) => { - stateBucket.currentGameState.people = people; - stateBucket.currentGameState.status = globals.STATUS.ENDED; - processGameState( - stateBucket.currentGameState, - stateBucket.currentGameState.client.cookie, - socket, - true, - true - ); - }); -} diff --git a/client/src/modules/timer/GameTimerManager.js b/client/src/modules/timer/GameTimerManager.js index 8e02dd6..e44d8cd 100644 --- a/client/src/modules/timer/GameTimerManager.js +++ b/client/src/modules/timer/GameTimerManager.js @@ -89,18 +89,21 @@ export class GameTimerManager { } displayExpiredTime () { - const currentBtn = document.querySelector('#timer-container-moderator #play-pause img'); - if (currentBtn) { - currentBtn.removeEventListener('click', this.pauseListener); - currentBtn.removeEventListener('click', this.playListener); - currentBtn.classList.add('disabled'); - currentBtn.setAttribute('src', '/images/play-pause-placeholder.svg'); - } else { - document.querySelector('#play-pause-placeholder')?.remove(); - const placeholderBtn = document.createElement('img'); - placeholderBtn.setAttribute('src', '../images/play-pause-placeholder.svg'); - placeholderBtn.classList.add('disabled'); - document.getElementById('play-pause').appendChild(placeholderBtn); + if (this.stateBucket.currentGameState.client.userType === globals.USER_TYPES.TEMPORARY_MODERATOR + || this.stateBucket.currentGameState.client.userType === globals.USER_TYPES.MODERATOR) { + const currentBtn = document.querySelector('#timer-container-moderator #play-pause img'); + if (currentBtn) { + currentBtn.removeEventListener('click', this.pauseListener); + currentBtn.removeEventListener('click', this.playListener); + currentBtn.classList.add('disabled'); + currentBtn.setAttribute('src', '/images/play-pause-placeholder.svg'); + } else { + document.querySelector('#play-pause-placeholder')?.remove(); + const placeholderBtn = document.createElement('img'); + placeholderBtn.setAttribute('src', '../images/play-pause-placeholder.svg'); + placeholderBtn.classList.add('disabled'); + document.getElementById('play-pause').appendChild(placeholderBtn); + } } const timer = document.getElementById('game-timer');