Git_Mirror/Werewolf
1
0
Fork 0
mirror of https://github.com/AlecM33/Werewolf.git synced 2026-01-02 01:03:24 +01:00
Code Issues Packages Projects Releases Wiki Activity

merge

Browse Source
This commit is contained in:
AlecM33
2022-12-27 22:11:25 -05:00
parent 1c156b0a55 1133eb2790
commit 0f2ac69022
19 changed files with 457 additions and 306 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
client/src/config/globals.js
View File

@@ -17,7 +17,8 @@ export const globals = {
REVEAL_PLAYER: 'revealPlayer',
TRANSFER_MODERATOR: 'transferModerator',
CHANGE_NAME: 'changeName',
END_GAME: 'endGame'
END_GAME: 'endGame',
END_TIMER: 'endTimer'
},
STATUS: {
LOBBY: 'lobby',
@@ -49,7 +50,8 @@ export const globals = {
SYNC_GAME_STATE: 'syncGameState',
START_TIMER: 'startTimer',
PLAYER_LEFT: 'playerLeft',
NEW_SPECTATOR: 'newSpectator'
NEW_SPECTATOR: 'newSpectator',
RESTART_GAME: 'restartGame'
},
USER_TYPES: {
MODERATOR: 'moderator',

7
client/src/images/play-pause-placeholder.svg Normal file
View File

@@ -0,0 +1,7 @@
<svg width="263" height="271" xmlns="http://www.w3.org/2000/svg">
<g>
<title>Layer 1</title>
<ellipse stroke="none" ry="131" rx="126" id="svg_5" cy="135.237498" cx="129.999999" fill-opacity="null" stroke-opacity="null" stroke-width="8" fill="none"/>
<path transform="rotate(90.18392181396484 140.08586120605474,135.38354492187497) " stroke="none" id="svg_7" d="m86.585877,180.883554l53.499995,-91.000007l53.499995,91.000007l-106.99999,0z" fill-opacity="null" stroke-opacity="null" stroke-width="0" fill="none"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 532 B

52
client/src/images/shuffle.svg Normal file
View File

@@ -0,0 +1,52 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Tools -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg fill="#d7d7d7" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="800px" height="800px" viewBox="0 0 95.524 95.524"
xml:space="preserve">
<g>
<g>
<path d="M68.908,36.481l6.637,0.004l-0.008,3.512c-0.001,0.686,0.364,1.321,0.958,1.666c0.593,0.343,1.326,0.344,1.921,0.003
l16.145-9.284c0.596-0.342,0.963-0.976,0.964-1.662s-0.364-1.32-0.957-1.665l-16.112-9.343c-0.595-0.345-1.326-0.346-1.921-0.004
c-0.595,0.342-0.962,0.976-0.964,1.662l-0.006,3.497l-6.656-0.004c-10.232,0-17.68,9.469-24.883,18.627
c-6.009,7.643-12.224,15.545-18.084,15.545H1.921C0.86,59.036,0,59.895,0,60.957v7.775c0,1.062,0.86,1.922,1.921,1.922H25.94
c11.5,0,19.848-10.611,27.213-19.977C58.643,43.698,64.318,36.481,68.908,36.481z"/>
<path d="M94.561,63.142l-16.145-9.283c-0.595-0.343-1.328-0.343-1.921,0.003c-0.594,0.344-0.959,0.979-0.958,1.666l0.008,3.512
l-6.635,0.004c-3.48,0-7.718-4.472-10.604-7.834l-7.832,8.701c4.442,5.005,10.554,10.752,18.437,10.752l6.654-0.004l0.006,3.496
c0.001,0.687,0.369,1.319,0.964,1.662c0.296,0.17,0.626,0.255,0.957,0.255c0.333,0,0.666-0.086,0.964-0.26l16.111-9.343
c0.594-0.344,0.958-0.979,0.957-1.665C95.523,64.119,95.156,63.486,94.561,63.142z"/>
<path d="M25.94,24.872H1.921C0.86,24.872,0,25.732,0,26.792v7.776c0,1.061,0.86,1.921,1.921,1.921H25.94
c4.341,0,8.833,4.511,11.835,7.904l7.739-8.743C41.244,31.024,34.569,24.872,25.94,24.872z"/>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

19
client/src/modules/front_end_components/Confirmation.js
View File

@@ -1,16 +1,20 @@
import { toast } from './Toast.js';
export const Confirmation = (message, onYes) => {
export const Confirmation = (message, onYes = null) => {
document.querySelector('#confirmation')?.remove();
document.querySelector('#confirmation-background')?.remove();
let confirmation = document.createElement('div');
confirmation.setAttribute('id', 'confirmation');
confirmation.innerHTML =
`<div id="confirmation-message"></div>
confirmation.innerHTML = onYes
? `<div id="confirmation-message"></div>
<div class="confirmation-buttons">
<button id="confirmation-cancel-button" class="app-button cancel">Cancel</button>
<button id="confirmation-yes-button" class="app-button">Yes</button>
</div>`
: `<div id="confirmation-message"></div>
<div class="confirmation-buttons-centered">
<button id="confirmation-yes-button" class="app-button">OK</button>
</div>`;
confirmation.querySelector('#confirmation-message').innerText = message;
@@ -54,8 +58,13 @@ export const Confirmation = (message, onYes) => {
});
};
confirmation.querySelector('#confirmation-cancel-button').addEventListener('click', cancelHandler);
confirmation.querySelector('#confirmation-yes-button').addEventListener('click', confirmHandler);
if (onYes) {
confirmation.querySelector('#confirmation-cancel-button').addEventListener('click', cancelHandler);
confirmation.querySelector('#confirmation-yes-button').addEventListener('click', confirmHandler);
} else { // we are only displaying a message for them to acknowledge, so the yes button should dispel the confirmation
confirmation.querySelector('#confirmation-yes-button').addEventListener('click', cancelHandler);
}
background.addEventListener('click', cancelHandler);
document.body.appendChild(background);

20
client/src/modules/front_end_components/HTMLFragments.js
View File

@@ -44,8 +44,8 @@ export const HTMLFragments = {
<button id='start-game-button'>Start Game</button>
<p>All players must join to start.</p>
</div>`,
END_GAME_PROMPT:
`<div id='end-game-prompt'>
GAME_CONTROL_PROMPT:
`<div id='game-control-prompt'>
<button id='end-game-button'>End Game</button>
</div>`,
PLAYER_GAME_VIEW:
@@ -105,7 +105,7 @@ export const HTMLFragments = {
<div id="play-pause-placeholder"></div>
</div>
</div>
<button id='mod-transfer-button' class='moderator-player-button make-mod-button app-button'>Transfer Mod Powers \uD83D\uDD00</button>
<button id='mod-transfer-button' class='moderator-player-button make-mod-button app-button'>Transfer Mod Powers <img src='/images/shuffle.svg'/></button>
<div>
<button id='role-info-button' class='app-button'>Roles in This Game <img src='/images/info.svg'/></button>
</div>
@@ -216,22 +216,16 @@ export const HTMLFragments = {
`<div id='end-of-game-header'>
<h2>&#x1F3C1; The moderator has ended the game. Roles are revealed.</h2>
<div id="end-of-game-buttons">
<div>
<button id='role-info-button' class='app-button'>Roles in This Game <img src='/images/info.svg'/></button>
</div>
<div>
<a href='/'>
<button class='app-button'>Go Home \uD83C\uDFE0</button>
</a>
</div>
<button id='role-info-button' class='app-button'>Roles in This Game <img src='/images/info.svg'/></button>
<a href='/'>
<button class='app-button'>Go Home \uD83C\uDFE0</button>
</a>
</div>
</div>
<div id='game-people-container'>
<label id='players-alive-label'></label>
<div id='game-player-list'></div>
</div>`,
RESTART_GAME_BUTTON:
'<button id=\'restart-game\' class=\'app-button\'>Play Again 🔄</button>',
CREATE_GAME_DECK:
`<div id='deck-container'>
<div>

34
client/src/modules/game_state/states/Ended.js
View File

@@ -1,9 +1,6 @@
import { globals } from '../../../config/globals.js';
import { HTMLFragments } from '../../front_end_components/HTMLFragments.js';
import { XHRUtility } from '../../utility/XHRUtility.js';
import { UserUtility } from '../../utility/UserUtility.js';
import { toast } from '../../front_end_components/Toast.js';
import { Confirmation } from '../../front_end_components/Confirmation.js';
import { SharedStateUtil } from './shared/SharedStateUtil.js';
export class Ended {
constructor (containerId, stateBucket, socket) {
@@ -11,25 +8,6 @@ export class Ended {
this.socket = socket;
this.container = document.getElementById(containerId);
this.container.innerHTML = HTMLFragments.END_OF_GAME_VIEW;
this.restartGameHandler = () => {
XHRUtility.xhr(
'/api/games/' + this.stateBucket.currentGameState.accessCode + '/restart',
'PATCH',
null,
JSON.stringify({
playerName: this.stateBucket.currentGameState.client.name,
accessCode: this.stateBucket.currentGameState.accessCode,
sessionCookie: UserUtility.validateAnonUserSignature(globals.ENVIRONMENT.LOCAL),
localCookie: UserUtility.validateAnonUserSignature(globals.ENVIRONMENT.PRODUCTION)
})
)
.then((res) => {
toast('Game restarted!', 'success', true, true, 'medium');
})
.catch((res) => {
toast(res.content, 'error', true, true, 'medium');
});
};
}
renderEndOfGame (gameState) {
@@ -37,15 +15,7 @@ export class Ended {
gameState.client.userType === globals.USER_TYPES.MODERATOR
|| gameState.client.userType === globals.USER_TYPES.TEMPORARY_MODERATOR
) {
const restartGameContainer = document.createElement('div');
restartGameContainer.innerHTML = HTMLFragments.RESTART_GAME_BUTTON;
const button = restartGameContainer.querySelector('#restart-game');
button.addEventListener('click', () => {
Confirmation('Restart the game, dealing everyone new roles?', () => {
this.restartGameHandler();
});
});
document.getElementById('end-of-game-buttons').prepend(restartGameContainer);
document.getElementById('end-of-game-buttons').prepend(SharedStateUtil.createRestartButton(this.stateBucket));
}
this.renderPlayersWithRoleInformation();
}

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

@@ -5,15 +5,13 @@ import { Confirmation } from '../../front_end_components/Confirmation.js';
import { ModalManager } from '../../front_end_components/ModalManager.js';
import { GameTimerManager } from '../../timer/GameTimerManager.js';
import { stateBucket } from '../StateBucket.js';
import { SharedStateUtil } from './shared/SharedStateUtil.js';
export class InProgress {
constructor (containerId, stateBucket, socket) {
this.stateBucket = stateBucket;
this.socket = socket;
this.container = document.getElementById(containerId);
this.components = {
};
this.killPlayerHandlers = {};
this.revealRoleHandlers = {};
this.transferModHandlers = {};
@@ -191,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);
@@ -407,9 +414,9 @@ function removeExistingPlayerElements (killPlayerHandlers, revealRoleHandlers) {
}
function createEndGamePromptComponent (socket, stateBucket) {
if (document.querySelector('#end-game-prompt') === null) {
if (document.querySelector('#game-control-prompt') === null) {
const div = document.createElement('div');
div.innerHTML = HTMLFragments.END_GAME_PROMPT;
div.innerHTML = HTMLFragments.GAME_CONTROL_PROMPT;
div.querySelector('#end-game-button').addEventListener('click', (e) => {
e.preventDefault();
Confirmation('End the game?', () => {
@@ -419,11 +426,12 @@ function createEndGamePromptComponent (socket, stateBucket) {
stateBucket.currentGameState.accessCode,
null,
() => {
document.querySelector('#end-game-prompt')?.remove();
document.querySelector('#game-control-prompt')?.remove();
}
);
});
});
div.querySelector('#game-control-prompt').prepend(SharedStateUtil.createRestartButton(stateBucket));
document.getElementById('game-content').appendChild(div);
}
}

240
client/src/modules/game_state/states/shared/SharedStateUtil.js Normal file
View File

@@ -0,0 +1,240 @@
import { XHRUtility } from '../../../utility/XHRUtility.js';
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 = {
restartHandler: (stateBucket) => {
XHRUtility.xhr(
'/api/games/' + stateBucket.currentGameState.accessCode + '/restart',
'PATCH',
null,
JSON.stringify({
playerName: stateBucket.currentGameState.client.name,
accessCode: stateBucket.currentGameState.accessCode,
sessionCookie: UserUtility.validateAnonUserSignature(globals.ENVIRONMENT.LOCAL),
localCookie: UserUtility.validateAnonUserSignature(globals.ENVIRONMENT.PRODUCTION)
})
)
.then((res) => {})
.catch((res) => {
toast(res.content, 'error', true, true, 'medium');
});
},
createRestartButton: (stateBucket) => {
const restartGameButton = document.createElement('button');
restartGameButton.classList.add('app-button');
restartGameButton.setAttribute('id', 'restart-game-button');
restartGameButton.innerText = 'Restart';
restartGameButton.addEventListener('click', () => {
Confirmation('Restart the game, dealing everyone new roles?', () => {
SharedStateUtil.restartHandler(stateBucket);
});
});
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];
}

191
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,185 +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('#end-game-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) {
socket.on(globals.EVENT_IDS.START_GAME, () => {
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.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

@@ -1,4 +1,5 @@
import { globals } from '../../config/globals.js';
import { Confirmation } from '../front_end_components/Confirmation.js';
export class GameTimerManager {
constructor (stateBucket, socket) {
@@ -88,11 +89,21 @@ export class GameTimerManager {
}
displayExpiredTime () {
const currentBtn = document.querySelector('#play-pause img');
if (currentBtn) {
currentBtn.removeEventListener('click', this.pauseListener);
currentBtn.removeEventListener('click', this.playListener);
currentBtn.remove();
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');
@@ -123,6 +134,12 @@ export class GameTimerManager {
}
});
}
if (!socket.hasListeners(globals.COMMANDS.END_TIMER)) {
socket.on(globals.COMMANDS.END_TIMER, () => {
Confirmation('The timer has expired!');
});
}
}
swapToPlayButton () {

7
client/src/styles/confirmation.css
View File

@@ -34,7 +34,7 @@
margin: 1em 0 2em 0;
}
.confirmation-buttons button {
.confirmation-buttons button, .confirmation-buttons-centered button {
min-width: 5em;
}
@@ -43,6 +43,11 @@
justify-content: space-between;
}
.confirmation-buttons-centered {
display: flex;
justify-content: center;
}
#confirmation-cancel-button {
background-color: #762323 !important;
}

62
client/src/styles/game.css
View File

@@ -58,11 +58,13 @@
max-width: 17em;
}
#restart-game {
background-color: #0078D7;
min-width: 10em;
margin-bottom: 1em !important;
animation: shadow-pulse 1.5s infinite ease-out;
#restart-game-button, #mod-transfer-button {
background-color: #045EA6;
}
#restart-game-button:hover, #mod-transfer-button:hover {
background-color: #0078D773;
border: 2px solid #045EA6;
}
#play-pause-placeholder {
@@ -130,7 +132,15 @@ h1 {
#end-of-game-header button {
margin: 0.5em;
min-width: 12em;
font-size: 18px;
}
#end-of-game-header #restart-game-button {
margin-bottom: 1em !important;
animation: shadow-pulse 1.5s infinite ease-out;
padding: 10px;
}
.potential-moderator {
display: flex;
color: #d7d7d7;
@@ -194,7 +204,7 @@ h1 {
color: #21ba45;
}
#role-info-button img {
#role-info-button img, #mod-transfer-button img {
height: 25px;
margin-left: 10px;
}
@@ -443,7 +453,7 @@ label[for='moderator'] {
font-size: 30px;
}
#start-game-prompt, #end-game-prompt {
#start-game-prompt, #game-control-prompt {
padding: 0.5em 0;
display: flex;
flex-direction: column;
@@ -466,6 +476,34 @@ label[for='moderator'] {
background-color: #1b1a24;
}
#game-control-prompt {
padding: 0.5em 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
position: fixed;
z-index: 3;
font-family: 'signika-negative', sans-serif;
font-weight: 100;
box-shadow: 0 -6px 15px rgba(0, 0, 0, 0.5);
left: 0;
right: 0;
bottom: 0;
border-radius: 3px;
/* width: fit-content; */
font-size: 20px;
height: 100px;
margin: 0 auto;
max-width: 100%;
background-color: #1b1a24;
}
#game-control-prompt button {
margin: 0 15px;
min-width: 5em;
}
#start-game-prompt p {
color: whitesmoke;
font-size: 15px;
@@ -478,11 +516,11 @@ label[for='moderator'] {
justify-content: space-evenly;
}
#end-game-prompt {
#game-control-prompt {
box-shadow: 0 -6px 40px black;
}
#start-game-button, #end-game-button {
#start-game-button, #end-game-button, #restart-game-button {
font-family: 'signika-negative', sans-serif !important;
padding: 10px;
border-radius: 3px;
@@ -777,7 +815,7 @@ canvas {
}
@media(max-width: 800px) {
#start-game-prompt, #end-game-prompt {
#start-game-prompt, #game-control-prompt {
border-radius: 0;
width: 100%;
bottom: 0;
@@ -840,11 +878,11 @@ canvas {
font-size: 20px;
}
#start-game-prompt, #end-game-prompt {
#start-game-prompt, #game-control-prompt {
height: 65px;
}
#start-game-button, #end-game-button {
#start-game-button, #end-game-button, #restart-game-button {
font-size: 20px;
padding: 5px;
}