diff --git a/client/src/modules/GameStateRenderer.js b/client/src/modules/GameStateRenderer.js index fdc6c7a..55f8916 100644 --- a/client/src/modules/GameStateRenderer.js +++ b/client/src/modules/GameStateRenderer.js @@ -2,6 +2,8 @@ import { globals } from '../config/globals.js'; import { toast } from './Toast.js'; import { HTMLFragments } from './HTMLFragments.js'; import { ModalManager } from './ModalManager.js'; +import {XHRUtility} from "./XHRUtility"; +import {UserUtility} from "./UserUtility"; export class GameStateRenderer { constructor (stateBucket, socket) { @@ -256,7 +258,33 @@ export class GameStateRenderer { } } - renderEndOfGame () { + renderEndOfGame (gameState) { + if ( + gameState.client.userType === globals.USER_TYPES.MODERATOR + || gameState.client.userType === globals.USER_TYPES.TEMPORARY_MODERATOR + ) { + let div = document.createElement('div'); + div.innerHTML = HTMLFragments.RESTART_GAME_BUTTON; + div.querySelector('#restart-game').addEventListener('click', () => { + XHRUtility.xhr( + '/api/games/' + gameState.accessCode + '/restart', + 'PATCH', + null, + JSON.stringify({ + playerName: gameState.client.name, + accessCode: gameState.accessCode, + sessionCookie: UserUtility.validateAnonUserSignature(globals.ENVIRONMENT.LOCAL), + localCookie: UserUtility.validateAnonUserSignature(globals.ENVIRONMENT.PRODUCTION) + }) + ) + .then((res) => { + + }).catch((res) => { + + }); + }) + document.getElementById('end-of-game-buttons').appendChild(div); + } this.renderPlayersWithNoRoleInformationUnlessRevealed(); } } diff --git a/client/src/modules/GameTimerManager.js b/client/src/modules/GameTimerManager.js index 6313512..7df7c04 100644 --- a/client/src/modules/GameTimerManager.js +++ b/client/src/modules/GameTimerManager.js @@ -135,6 +135,7 @@ export class GameTimerManager { const playBtn = document.createElement('img'); playBtn.setAttribute('src', '../images/play-button.svg'); playBtn.addEventListener('click', this.playListener); + document.querySelector('#play-pause-placeholder')?.remove(); document.getElementById('play-pause').appendChild(playBtn); } diff --git a/client/src/modules/HTMLFragments.js b/client/src/modules/HTMLFragments.js index a5f8bc0..bcbda1b 100644 --- a/client/src/modules/HTMLFragments.js +++ b/client/src/modules/HTMLFragments.js @@ -95,7 +95,9 @@ export const HTMLFragments = {
-
+
+
+
@@ -216,21 +218,27 @@ export const HTMLFragments = {
`, END_OF_GAME_VIEW: - `

The moderator has ended the game. Roles are revealed.

-
-
- -
-
- - - + `
+

The moderator has ended the game. Roles are revealed.

+
+
+ +
+
+ + + +
`, + RESTART_GAME_BUTTON: + `
+ +
`, CREATE_GAME_DECK: `
diff --git a/client/src/scripts/game.js b/client/src/scripts/game.js index 53066ea..9aaee03 100644 --- a/client/src/scripts/game.js +++ b/client/src/scripts/game.js @@ -59,7 +59,7 @@ function syncWithGame (stateBucket, gameTimerManager, gameStateRenderer, timerWo 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, gameStateRenderer, gameTimerManager, timerWorker); + processGameState(stateBucket.currentGameState, cookie, socket, gameStateRenderer, gameTimerManager, timerWorker, true, true); } }); } else { @@ -67,7 +67,28 @@ function syncWithGame (stateBucket, gameTimerManager, gameStateRenderer, timerWo } } -function processGameState (currentGameState, userId, socket, gameStateRenderer, gameTimerManager, timerWorker, refreshPrompt = true) { +function processGameState ( + currentGameState, + userId, + socket, + gameStateRenderer, + gameTimerManager, + timerWorker, + 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); if (refreshPrompt) { removeStartGameFunctionalityIfPresent(gameStateRenderer); @@ -126,8 +147,7 @@ function processGameState (currentGameState, userId, socket, gameStateRenderer, case globals.STATUS.ENDED: { const container = document.getElementById('game-state-container'); container.innerHTML = HTMLFragments.END_OF_GAME_VIEW; - container.classList.add('vertical-flex'); - gameStateRenderer.renderEndOfGame(); + gameStateRenderer.renderEndOfGame(currentGameState); break; } default: @@ -190,7 +210,9 @@ function setClientSocketHandlers (stateBucket, gameStateRenderer, socket, timerW socket, gameStateRenderer, gameTimerManager, - timerWorker + timerWorker, + true, + true ); } ); @@ -209,7 +231,9 @@ function setClientSocketHandlers (stateBucket, gameStateRenderer, socket, timerW socket, gameStateRenderer, gameTimerManager, - timerWorker + timerWorker, + true, + true ); } ); @@ -280,6 +304,7 @@ function setClientSocketHandlers (stateBucket, gameStateRenderer, socket, timerW gameStateRenderer, gameTimerManager, timerWorker, + false, false ); }); @@ -293,7 +318,9 @@ function setClientSocketHandlers (stateBucket, gameStateRenderer, socket, timerW socket, gameStateRenderer, gameTimerManager, - timerWorker + timerWorker, + true, + true ); }); } diff --git a/client/src/styles/game.css b/client/src/styles/game.css index a0422d6..cdb29e9 100644 --- a/client/src/styles/game.css +++ b/client/src/styles/game.css @@ -47,14 +47,28 @@ display: flex; width: 95%; margin: 1em auto 100px auto; + animation: fade-in-slide-up 2s; } #game-state-container h2 { - margin: 1em 0; - text-align: center; + margin: 0.5em 0; max-width: 17em; } +#restart-game { + background-color: #0078D7; + min-width: 10em; +} + +#play-pause-placeholder { + width: 60px; + height: 60px; +} + +#restart-game:hover { + border-color: whitesmoke; +} + #lobby-header { margin-bottom: 1em; max-width: 95%; @@ -84,6 +98,7 @@ h1 { #end-of-game-header { display: flex; + flex-direction: column; flex-wrap: wrap; margin: 0 !important; align-items: center; @@ -91,6 +106,7 @@ h1 { #end-of-game-header button { margin: 0.5em; + min-width: 10em; } .potential-moderator { display: flex; diff --git a/server/api/GamesAPI.js b/server/api/GamesAPI.js index f5aca63..ae4364b 100644 --- a/server/api/GamesAPI.js +++ b/server/api/GamesAPI.js @@ -89,6 +89,29 @@ router.patch('/:code/players', function (req, res) { } }); +router.patch('/:code/restart', function (req, res) { + if ( + req.body === null + || !validateAccessCode(req.body.accessCode) + || !validateName(req.body.playerName) + || !validateCookie(req.body.localCookie) + || !validateCookie(req.body.sessionCookie) + ) { + res.status(400).send(); + } else { + const game = gameManager.activeGameRunner.activeGames[req.body.accessCode]; + if (game) { + gameManager.restartGame(game, gameManager.namespace).then((data) => { + res.status(200).send(); + }).catch((code) => { + res.status(code).send(); + }); + } else { + res.status(404).send(); + } + } +}); + router.get('/environment', function (req, res) { res.status(200).send(gameManager.environment); }); diff --git a/server/model/Game.js b/server/model/Game.js index 7a35f89..d6a7dcf 100644 --- a/server/model/Game.js +++ b/server/model/Game.js @@ -1,11 +1,12 @@ class Game { - constructor (accessCode, status, people, deck, hasTimer, moderator, timerParams = null) { + constructor (accessCode, status, people, deck, hasTimer, moderator, hasDedicatedModerator, timerParams = null) { this.accessCode = accessCode; this.status = status; this.moderator = moderator; this.people = people; this.deck = deck; this.hasTimer = hasTimer; + this.hasDedicatedModerator = hasDedicatedModerator; this.timerParams = timerParams; this.isFull = false; this.timeRemaining = null; diff --git a/server/modules/GameManager.js b/server/modules/GameManager.js index 95fbe67..498222e 100644 --- a/server/modules/GameManager.js +++ b/server/modules/GameManager.js @@ -187,6 +187,7 @@ class GameManager { gameParams.deck, gameParams.hasTimer, moderator, + gameParams.hasDedicatedModerator, gameParams.timerParams ); this.activeGameRunner.activeGames[newAccessCode].createTime = new Date().toJSON(); @@ -308,6 +309,36 @@ class GameManager { } }; + restartGame = async (game, namespace) => { + if (this.activeGameRunner.timerThreads[game.accessCode]) { + this.logger.info('KILLING STALE TIMER PROCESS FOR ' + accessCode); + this.activeGameRunner.timerThreads[game.accessCode].kill(); + delete this.activeGameRunner.timerThreads[game.accessCode]; + } + game.status = globals.STATUS.IN_PROGRESS; + let cards = []; // this will contain copies of each card equal to the quantity. + for (const card of game.deck) { + for (let i = 0; i < card.quantity; i ++) { + cards.push(card); + } + } + for (let i = 0; i < game.people.length; i ++) { + console.log(game.people[i].name); + console.log(cards[i].role); + if (game.people[i].out) { + game.people[i].out = false; + } + game.people[i].gameRole = cards[i].role; + game.people[i].gameRoleDescription = cards[i].description; + game.people[i].alignment = cards[i].team; + } + if (game.hasTimer) { + game.timerParams.paused = true; + this.activeGameRunner.runGame(game, namespace); + } + namespace.in(game.accessCode).emit(globals.CLIENT_COMMANDS.START_GAME); + } + handleRequestForGameState = async (namespace, logger, gameRunner, accessCode, personCookie, ackFn, clientSocket) => { const game = gameRunner.activeGames[accessCode]; if (game) { @@ -379,7 +410,7 @@ function initializePeopleForGame (uniqueCards, moderator) { } } - cards = shuffleArray(cards); // The deck should probably be shuffled, ey?. + cards = shuffle(cards); // The deck should probably be shuffled, ey?. let j = 0; if (moderator.userType === globals.USER_TYPES.TEMPORARY_MODERATOR) { // temporary moderators should be dealt in. @@ -410,13 +441,20 @@ function initializePeopleForGame (uniqueCards, moderator) { return people; } -function shuffleArray (array) { - for (let i = 0; i < array.length; i ++) { - const randIndex = Math.floor(Math.random() * i); - const temp = array[i]; - array[i] = array[randIndex]; - array[randIndex] = temp; +/* +-- To shuffle an array a of n elements (indices 0..n-1): +for i from nāˆ’1 downto 1 do + j ← random integer such that 0 ≤ j ≤ i + exchange a[j] and a[i] + */ +function shuffle(array) { + for (let i = array.length - 1; i > 0; i --) { + const j = Math.floor(Math.random() * (i + 1)); + const temp = array[j]; + array[j] = array[i]; + array[i] = temp; } + return array; }