diff --git a/client/src/config/globals.js b/client/src/config/globals.js index d22357f..72d5bb6 100644 --- a/client/src/config/globals.js +++ b/client/src/config/globals.js @@ -1,6 +1,6 @@ export const globals = { USER_SIGNATURE_LENGTH: 25, - CLOCK_TICK_INTERVAL_MILLIS: 10, + CLOCK_TICK_INTERVAL_MILLIS: 100, MAX_CUSTOM_ROLE_NAME_LENGTH: 30, MAX_CUSTOM_ROLE_DESCRIPTION_LENGTH: 500, TOAST_DURATION_DEFAULT: 6, diff --git a/client/src/modules/GameCreationStepManager.js b/client/src/modules/GameCreationStepManager.js index 1d12537..1178ae0 100644 --- a/client/src/modules/GameCreationStepManager.js +++ b/client/src/modules/GameCreationStepManager.js @@ -107,13 +107,23 @@ export class GameCreationStepManager { 5: { title: 'Review and submit:', backHandler: this.defaultBackHandler, - forwardHandler: (deck, hasTimer, hasDedicatedModerator, moderatorName, timerParams) => { + forwardHandler: () => { + const button = document.getElementById('create-game'); + button.removeEventListener('click', this.steps['5'].forwardHandler); + button.classList.add('submitted'); + button.innerText = 'Creating'; XHRUtility.xhr( '/api/games/create', 'POST', null, JSON.stringify( - new Game(deck, hasTimer, hasDedicatedModerator, moderatorName, timerParams) + new Game( + this.currentGame.deck.filter((card) => card.quantity > 0), + this.currentGame.hasTimer, + this.currentGame.hasDedicatedModerator, + this.currentGame.moderatorName, + this.currentGame.timerParams + ) ) ) .then((res) => { @@ -128,9 +138,10 @@ export class GameCreationStepManager { } }).catch((e) => { const button = document.getElementById('create-game'); - button.innerText = 'Create Game'; + button.innerText = 'Create'; button.classList.remove('submitted'); - button.addEventListener('click', this.steps['4'].forwardHandler); + button.addEventListener('click', this.steps['5'].forwardHandler); + toast(e.content, 'error', true, true, 'medium'); if (e.status === 429) { toast('You\'ve sent this request too many times.', 'error', true, true, 'medium'); } @@ -449,18 +460,7 @@ function showButtons (back, forward, forwardHandler, backHandler, builtGame = nu createButton.innerText = 'Create'; createButton.setAttribute('id', 'create-game'); createButton.classList.add('app-button'); - createButton.addEventListener('click', () => { - createButton.removeEventListener('click', forwardHandler); - createButton.classList.add('submitted'); - createButton.innerText = 'Creating...'; - forwardHandler( - builtGame.deck.filter((card) => card.quantity > 0), - builtGame.hasTimer, - builtGame.hasDedicatedModerator, - builtGame.moderatorName, - builtGame.timerParams - ); - }); + createButton.addEventListener('click', forwardHandler); document.getElementById('tracker-container').appendChild(createButton); } } diff --git a/client/src/modules/GameStateRenderer.js b/client/src/modules/GameStateRenderer.js index fdc6c7a..1ae1bdd 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.js'; +import { UserUtility } from './UserUtility.js'; export class GameStateRenderer { constructor (stateBucket, socket) { @@ -10,12 +12,40 @@ export class GameStateRenderer { this.killPlayerHandlers = {}; this.revealRoleHandlers = {}; this.transferModHandlers = {}; - this.startGameHandler = (e) => { + this.startGameHandler = (e) => { // TODO: prevent multiple emissions of this event (recommend converting to XHR) e.preventDefault(); if (confirm('Start the game and deal roles?')) { socket.emit(globals.COMMANDS.START_GAME, this.stateBucket.currentGameState.accessCode); } }; + this.restartGameHandler = (e) => { + e.preventDefault(); + const button = document.getElementById('restart-game'); + button.removeEventListener('click', this.restartGameHandler); + button.classList.add('submitted'); + button.innerText = 'Restarting...'; + 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) => { + const button = document.getElementById('restart-game'); + button.innerText = 'Run it back šŸ”„'; + button.classList.remove('submitted'); + button.addEventListener('click', this.restartGameHandler); + toast(res.content, 'error', true, true, 'medium'); + }); + }; } renderLobbyPlayers () { @@ -256,7 +286,17 @@ export class GameStateRenderer { } } - renderEndOfGame () { + renderEndOfGame (gameState) { + if ( + 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', this.restartGameHandler); + document.getElementById('end-of-game-buttons').appendChild(restartGameContainer); + } this.renderPlayersWithNoRoleInformationUnlessRevealed(); } } @@ -273,6 +313,10 @@ function renderPotentialMods (gameState, group, transferModHandlers, socket) { transferModHandlers[member.id] = (e) => { if (e.type === 'click' || e.code === 'Enter') { if (confirm('Transfer moderator powers to ' + member.name + '?')) { + const transferPrompt = document.getElementById('transfer-mod-prompt'); + if (transferPrompt !== null) { + transferPrompt.innerHTML = ''; + } socket.emit(globals.COMMANDS.TRANSFER_MODERATOR, gameState.accessCode, member.id); } } diff --git a/client/src/modules/GameTimerManager.js b/client/src/modules/GameTimerManager.js index 6313512..404cc08 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); } @@ -148,6 +149,7 @@ export class GameTimerManager { const pauseBtn = document.createElement('img'); pauseBtn.setAttribute('src', '../images/pause-button.svg'); pauseBtn.addEventListener('click', this.pauseListener); + document.querySelector('#play-pause-placeholder')?.remove(); document.getElementById('play-pause').appendChild(pauseBtn); } } diff --git a/client/src/modules/HTMLFragments.js b/client/src/modules/HTMLFragments.js index a5f8bc0..0bb0b8e 100644 --- a/client/src/modules/HTMLFragments.js +++ b/client/src/modules/HTMLFragments.js @@ -80,7 +80,7 @@ export const HTMLFragments = {
`, - MODERATOR_GAME_VIEW: + TRANSFER_MOD_MODAL: ` -
-
+
`, + MODERATOR_GAME_VIEW: + `
+
-
+
+
+
@@ -116,19 +119,8 @@ export const HTMLFragments = {
`, TEMP_MOD_GAME_VIEW: - ` - -
-
+ `
+
@@ -216,21 +208,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..22b7f7a 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); @@ -102,10 +123,12 @@ function processGameState (currentGameState, userId, socket, gameStateRenderer, gameStateRenderer.renderPlayerView(true); break; case globals.USER_TYPES.MODERATOR: + document.getElementById('transfer-mod-prompt').innerHTML = HTMLFragments.TRANSFER_MOD_MODAL; document.getElementById('game-state-container').innerHTML = HTMLFragments.MODERATOR_GAME_VIEW; gameStateRenderer.renderModeratorView(); break; case globals.USER_TYPES.TEMPORARY_MODERATOR: + document.getElementById('transfer-mod-prompt').innerHTML = HTMLFragments.TRANSFER_MOD_MODAL; document.getElementById('game-state-container').innerHTML = HTMLFragments.TEMP_MOD_GAME_VIEW; gameStateRenderer.renderTempModView(); break; @@ -120,14 +143,14 @@ function processGameState (currentGameState, userId, socket, gameStateRenderer, socket.emit(globals.COMMANDS.GET_TIME_REMAINING, currentGameState.accessCode); } else { document.querySelector('#game-timer')?.remove(); + document.querySelector('#timer-container-moderator')?.remove(); document.querySelector('label[for="game-timer"]')?.remove(); } break; 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 +213,9 @@ function setClientSocketHandlers (stateBucket, gameStateRenderer, socket, timerW socket, gameStateRenderer, gameTimerManager, - timerWorker + timerWorker, + true, + true ); } ); @@ -209,7 +234,9 @@ function setClientSocketHandlers (stateBucket, gameStateRenderer, socket, timerW socket, gameStateRenderer, gameTimerManager, - timerWorker + timerWorker, + true, + true ); } ); @@ -280,6 +307,7 @@ function setClientSocketHandlers (stateBucket, gameStateRenderer, socket, timerW gameStateRenderer, gameTimerManager, timerWorker, + false, false ); }); @@ -293,7 +321,9 @@ function setClientSocketHandlers (stateBucket, gameStateRenderer, socket, timerW socket, gameStateRenderer, gameTimerManager, - timerWorker + timerWorker, + true, + true ); }); } @@ -357,7 +387,7 @@ function activateRoleInfoButton (deck) { }); document.getElementById('role-info-button').addEventListener('click', (e) => { e.preventDefault(); - document.getElementById('prompt').innerHTML = HTMLFragments.ROLE_INFO_MODAL; + 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'); diff --git a/client/src/scripts/home.js b/client/src/scripts/home.js index a78f0a2..17a9a94 100644 --- a/client/src/scripts/home.js +++ b/client/src/scripts/home.js @@ -4,45 +4,50 @@ import { injectNavbar } from '../modules/Navbar.js'; const home = () => { injectNavbar(); - document.getElementById('join-form').onsubmit = (e) => { - e.preventDefault(); - const userCode = document.getElementById('room-code').value; - if (roomCodeIsValid(userCode)) { - attemptToJoinGame(userCode); - } else { - toast('Invalid code. Codes are 4 numbers or letters.', 'error', true, true); - } - }; + document.getElementById('join-form').addEventListener('submit', attemptToJoinGame); }; function roomCodeIsValid (code) { return typeof code === 'string' && /^[A-Z0-9]{4}$/.test(code.toUpperCase().trim()); } -function attemptToJoinGame (code) { - XHRUtility.xhr( - '/api/games/' + code.toUpperCase().trim() + '/availability', - 'GET', - null, - null - ) - .then((res) => { - if (res.status === 200) { - const json = JSON.parse(res.content); - window.location = window.location.protocol + '//' + window.location.host + - '/join/' + encodeURIComponent(json.accessCode) + - '?playerCount=' + encodeURIComponent(json.playerCount) + - '&timer=' + encodeURIComponent(getTimeString(json.timerParams)); - } - }).catch((res) => { - if (res.status === 404) { - toast('Game not found', 'error', true); - } else if (res.status === 400) { - toast(res.content, 'error', true); - } else { - toast('An unknown error occurred. Please try again later.', 'error', true); - } - }); +function attemptToJoinGame (event) { + event.preventDefault(); + const userCode = document.getElementById('room-code').value; + if (roomCodeIsValid(userCode)) { + const form = document.getElementById('join-form'); + form.removeEventListener('submit', attemptToJoinGame); + form.classList.add('submitted'); + document.getElementById('join-button')?.setAttribute('value', 'Joining...'); + XHRUtility.xhr( + '/api/games/' + userCode.toUpperCase().trim() + '/availability', + 'GET', + null, + null + ) + .then((res) => { + if (res.status === 200) { + const json = JSON.parse(res.content); + window.location = window.location.protocol + '//' + window.location.host + + '/join/' + encodeURIComponent(json.accessCode) + + '?playerCount=' + encodeURIComponent(json.playerCount) + + '&timer=' + encodeURIComponent(getTimeString(json.timerParams)); + } + }).catch((res) => { + form.addEventListener('submit', attemptToJoinGame); + form.classList.remove('submitted'); + document.getElementById('join-button')?.setAttribute('value', 'Join'); + if (res.status === 404) { + toast('Game not found', 'error', true); + } else if (res.status === 400) { + toast(res.content, 'error', true); + } else { + toast('An unknown error occurred. Please try again later.', 'error', true); + } + }); + } else { + toast('Invalid code. Codes are 4 numbers or letters.', 'error', true, true); + } } function getTimeString (timerParams) { diff --git a/client/src/styles/GLOBAL.css b/client/src/styles/GLOBAL.css index 2ff1451..f1cf65e 100644 --- a/client/src/styles/GLOBAL.css +++ b/client/src/styles/GLOBAL.css @@ -607,7 +607,7 @@ input { left: 0; width: 100%; height: calc(100% + 100px); - background-color: rgba(0, 0, 0, 0.75); + background-color: rgba(0, 0, 0, 0.5); z-index: 50; } diff --git a/client/src/styles/create.css b/client/src/styles/create.css index 4bd0ac6..846324e 100644 --- a/client/src/styles/create.css +++ b/client/src/styles/create.css @@ -107,7 +107,7 @@ #deck-status-container { width: 20em; max-width: 95%; - height: 13em; + height: 10em; overflow-y: auto; position: relative; } @@ -356,7 +356,7 @@ input[type="number"] { #deck-select { margin: 0.5em 1em 1.5em 0; overflow-y: auto; - height: 15em; + height: 12em; } .deck-select-role { diff --git a/client/src/styles/game.css b/client/src/styles/game.css index a0422d6..5644446 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; @@ -494,12 +510,19 @@ label[for='moderator'] { align-items: flex-start; } -.timer-container-moderator { +#game-header button { + min-width: 10em; +} + +#timer-container-moderator { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin-bottom: 1em; + padding: 0.5em; + border-radius: 3px; + background-color: #333243; } .game-player { @@ -517,7 +540,7 @@ label[for='moderator'] { .game-player-name { position: relative; - width: 10em; + min-width: 6em; overflow: hidden; white-space: nowrap; font-weight: bold; diff --git a/client/src/views/game.html b/client/src/views/game.html index 8db4db3..c0b68e0 100644 --- a/client/src/views/game.html +++ b/client/src/views/game.html @@ -19,7 +19,8 @@ -
+
+