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

restart game from in-progress state

Browse Source
This commit is contained in:
AlecM33
2022-12-26 22:40:30 -05:00
parent da5b531952
commit 92327dbd7d
13 changed files with 206 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -49,7 +49,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',

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

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

@@ -43,8 +43,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:
@@ -104,7 +104,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>
@@ -215,22 +215,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();
}

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

@@ -5,6 +5,7 @@ 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) {
@@ -407,9 +408,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 +420,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);
}
}

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

@@ -0,0 +1,39 @@
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';
// 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;
}
};

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

@@ -107,7 +107,7 @@ function processGameState (
break;
case globals.STATUS.IN_PROGRESS:
if (refreshPrompt) {
document.querySelector('#end-game-prompt')?.remove();
document.querySelector('#game-control-prompt')?.remove();
}
const inProgressGame = new InProgress('game-state-container', stateBucket, socket);
inProgressGame.setSocketHandlers();
@@ -173,24 +173,39 @@ function displayClientInfo (name, 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, () => {
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 },
function (gameState) {
stateBucket.currentGameState = gameState;
processGameState(
stateBucket.currentGameState,
gameState.client.cookie,
socket,
true,
true
);
}
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(

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

@@ -55,8 +55,16 @@
max-width: 17em;
}
#restart-game {
background-color: #0078D7;
#restart-game-button, #mod-transfer-button {
background-color: #045EA6;
}
#restart-game-button:hover, #mod-transfer-button:hover {
background-color: #0078D773;
border: 2px solid #045EA6;
}
#rrrr {
min-width: 10em;
margin-bottom: 1em !important;
animation: shadow-pulse 1.5s infinite ease-out;
@@ -127,7 +135,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;
@@ -191,7 +207,7 @@ h1 {
color: #21ba45;
}
#role-info-button img {
#role-info-button img, #mod-transfer-button img {
height: 25px;
margin-left: 10px;
}
@@ -440,7 +456,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;
@@ -463,6 +479,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;
@@ -475,11 +519,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;
@@ -774,7 +818,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;
@@ -837,11 +881,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;
}

3
server/config/globals.js
View File

@@ -34,7 +34,8 @@ const globals = {
REVEAL_PLAYER: 'revealPlayer',
TRANSFER_MODERATOR: 'transferModerator',
CHANGE_NAME: 'changeName',
END_GAME: 'endGame'
END_GAME: 'endGame',
RESTART_GAME: 'restartGame'
},
MESSAGES: {
ENTER_NAME: 'Client must enter name.'

4
server/modules/ActiveGameRunner.js
View File

@@ -21,6 +21,7 @@ class ActiveGameRunner {
this.logger.debug('running game ' + game.accessCode);
const gameProcess = fork(path.join(__dirname, '/GameProcess.js'));
this.timerThreads[game.accessCode] = gameProcess;
this.logger.debug('game ' + game.accessCode + ' now associated with subProcess ' + gameProcess.pid);
gameProcess.on('message', (msg) => {
switch (msg.command) {
case globals.GAME_PROCESS_COMMANDS.END_TIMER:
@@ -52,8 +53,7 @@ class ActiveGameRunner {
});
gameProcess.on('exit', () => {
this.logger.debug('Game ' + game.accessCode + ' timer has expired.');
delete this.timerThreads[game.accessCode];
this.logger.debug('Game timer thread ' + gameProcess.pid + ' exiting - game ' + game.accessCode);
});
gameProcess.send({
command: globals.GAME_PROCESS_COMMANDS.START_TIMER,

13
server/modules/GameManager.js
View File

@@ -143,7 +143,6 @@ class GameManager {
if (this.activeGameRunner.timerThreads[game.accessCode]) {
this.logger.trace('KILLING TIMER PROCESS FOR ENDED GAME ' + game.accessCode);
this.activeGameRunner.timerThreads[game.accessCode].kill();
delete this.activeGameRunner.timerThreads[game.accessCode];
}
for (const person of game.people) {
person.revealed = true;
@@ -266,9 +265,13 @@ class GameManager {
restartGame = async (game, namespace) => {
// kill any outstanding timer threads
if (this.activeGameRunner.timerThreads[game.accessCode]) {
this.logger.info('KILLING STALE TIMER PROCESS FOR ' + game.accessCode);
this.activeGameRunner.timerThreads[game.accessCode].kill();
const subProcess = this.activeGameRunner.timerThreads[game.accessCode];
if (subProcess) {
if (!subProcess.killed) {
this.logger.info('Killing timer process ' + subProcess.pid + ' for: ' + game.accessCode);
this.activeGameRunner.timerThreads[game.accessCode].kill();
}
this.logger.debug('Deleting reference to subprocess ' + subProcess.pid);
delete this.activeGameRunner.timerThreads[game.accessCode];
}
@@ -322,7 +325,7 @@ class GameManager {
this.activeGameRunner.runGame(game, namespace);
}
namespace.in(game.accessCode).emit(globals.EVENT_IDS.START_GAME);
namespace.in(game.accessCode).emit(globals.EVENT_IDS.RESTART_GAME);
};
handleRequestForGameState = async (game, namespace, logger, gameRunner, accessCode, personCookie, ackFn, clientSocket) => {

2
spec/e2e/game_spec.js
View File

@@ -290,7 +290,7 @@ describe('game page', () => {
}
]);
expect(document.getElementById('end-of-game-header')).not.toBeNull();
expect(document.getElementById('restart-game')).not.toBeNull();
expect(document.getElementById('restart-game-button')).not.toBeNull();
});
afterAll(() => {

10
spec/unit/server/modules/GameManager_Spec.js
View File

@@ -360,7 +360,7 @@ describe('GameManager', () => {
expect(person.gameRole).toBeDefined();
}
expect(shuffleSpy).toHaveBeenCalled();
expect(emitSpy).toHaveBeenCalledWith(globals.EVENT_IDS.START_GAME);
expect(emitSpy).toHaveBeenCalledWith(globals.EVENT_IDS.RESTART_GAME);
});
it('should reset all relevant game parameters, including when the game has a timer', async () => {
@@ -387,7 +387,7 @@ describe('GameManager', () => {
expect(runGameSpy).toHaveBeenCalled();
expect(Object.keys(gameManager.activeGameRunner.timerThreads).length).toEqual(0);
expect(shuffleSpy).toHaveBeenCalled();
expect(emitSpy).toHaveBeenCalledWith(globals.EVENT_IDS.START_GAME);
expect(emitSpy).toHaveBeenCalledWith(globals.EVENT_IDS.RESTART_GAME);
});
it('should reset all relevant game parameters and preserve temporary moderator', async () => {
@@ -408,7 +408,7 @@ describe('GameManager', () => {
expect(person.gameRole).toBeDefined();
}
expect(shuffleSpy).toHaveBeenCalled();
expect(emitSpy).toHaveBeenCalledWith(globals.EVENT_IDS.START_GAME);
expect(emitSpy).toHaveBeenCalledWith(globals.EVENT_IDS.RESTART_GAME);
});
it('should reset all relevant game parameters and restore a temporary moderator from a dedicated moderator', async () => {
@@ -429,7 +429,7 @@ describe('GameManager', () => {
expect(person.gameRole).toBeDefined();
}
expect(shuffleSpy).toHaveBeenCalled();
expect(emitSpy).toHaveBeenCalledWith(globals.EVENT_IDS.START_GAME);
expect(emitSpy).toHaveBeenCalledWith(globals.EVENT_IDS.RESTART_GAME);
});
it('should reset all relevant game parameters and create a temporary mod if a dedicated mod transferred to a killed player', async () => {
@@ -450,7 +450,7 @@ describe('GameManager', () => {
expect(person.gameRole).toBeDefined();
}
expect(shuffleSpy).toHaveBeenCalled();
expect(emitSpy).toHaveBeenCalledWith(globals.EVENT_IDS.START_GAME);
expect(emitSpy).toHaveBeenCalledWith(globals.EVENT_IDS.RESTART_GAME);
});
});