Git_Mirror/Werewolf
1
0
Fork 0
mirror of https://github.com/AlecM33/Werewolf.git synced 2025-12-26 15:57:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix spectator event to fire for all applicable game states

Browse Source
This commit is contained in:
AlecM33
2022-12-27 18:38:56 -05:00
parent 8ac678a1d7
commit f7c31096a9
5 changed files with 228 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
client/src/modules/game_state/states/InProgress.js
View File

@@ -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);

4
client/src/modules/game_state/states/Lobby.js
View File

@@ -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');

201
client/src/modules/game_state/states/shared/SharedStateUtil.js
View File

@@ -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];
}

206
client/src/modules/page_handlers/gameHandler.js
View File

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

27
client/src/modules/timer/GameTimerManager.js
View File

@@ -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');