diff --git a/client/src/modules/front_end_components/HTMLFragments.js b/client/src/modules/front_end_components/HTMLFragments.js index 01264a0..0d3aca2 100644 --- a/client/src/modules/front_end_components/HTMLFragments.js +++ b/client/src/modules/front_end_components/HTMLFragments.js @@ -262,7 +262,7 @@ export const HTMLFragments = {
`, INITIAL_GAME_DOM: - `
+ `
@@ -273,6 +273,7 @@ export const HTMLFragments = { edit name
+
`, // via https://loading.io/css/ SPINNER: diff --git a/client/src/modules/game_state/states/InProgress.js b/client/src/modules/game_state/states/InProgress.js index dd70c99..4590d2d 100644 --- a/client/src/modules/game_state/states/InProgress.js +++ b/client/src/modules/game_state/states/InProgress.js @@ -506,6 +506,7 @@ function createEndGamePromptComponent (socket, stateBucket) { div.querySelector('#end-game-button').addEventListener('click', (e) => { e.preventDefault(); Confirmation('End the game?', () => { + toast('Ending...', 'neutral', true, false); socket.emit( SOCKET_EVENTS.IN_GAME_MESSAGE, EVENT_IDS.END_GAME, @@ -553,6 +554,7 @@ function renderPotentialMods (gameState, group, transferModHandlers, socket) { if (e.type === 'click' || e.code === 'Enter') { ModalManager.dispelModal('transfer-mod-modal', 'transfer-mod-modal-background'); Confirmation('Transfer moderator powers to \'' + member.name + '\'?', () => { + toast('Transferring...', 'neutral', true, false); const transferPrompt = document.getElementById('transfer-mod-prompt'); if (transferPrompt !== null) { transferPrompt.innerHTML = ''; @@ -562,19 +564,8 @@ function renderPotentialMods (gameState, group, transferModHandlers, socket) { EVENT_IDS.TRANSFER_MODERATOR, gameState.accessCode, { personId: member.id }, - (err) => { - if (err) { - console.error(err); - socket.emit( - SOCKET_EVENTS.IN_GAME_MESSAGE, - EVENT_IDS.FETCH_GAME_STATE, - gameState.accessCode, - { personId: gameState.client.cookie }, - (gameState) => { - SharedStateUtil.gameStateAckFn(gameState, socket); - } - ); - } + () => { + toast('Transferred!', 'success', true, true); } ); }); diff --git a/client/src/modules/game_state/states/Lobby.js b/client/src/modules/game_state/states/Lobby.js index 822a622..e3416f1 100644 --- a/client/src/modules/game_state/states/Lobby.js +++ b/client/src/modules/game_state/states/Lobby.js @@ -24,25 +24,14 @@ export class Lobby { return; } Confirmation('Start game and deal roles?', () => { - socket.timeout(5000).emit( + toast('Starting...', 'neutral', true, false); + socket.emit( SOCKET_EVENTS.IN_GAME_MESSAGE, EVENT_IDS.START_GAME, stateBucket.currentGameState.accessCode, null, - (err) => { - if (err) { - socket.emit( - SOCKET_EVENTS.IN_GAME_MESSAGE, - EVENT_IDS.FETCH_GAME_STATE, - stateBucket.currentGameState.accessCode, - { personId: stateBucket.currentGameState.client.cookie }, - (gameState) => { - SharedStateUtil.gameStateAckFn(gameState, socket); - } - ); - } else { - this.removeStartGameFunctionalityIfPresent(); - } + () => { + this.removeStartGameFunctionalityIfPresent(); } ); }); diff --git a/client/src/modules/game_state/states/shared/SharedStateUtil.js b/client/src/modules/game_state/states/shared/SharedStateUtil.js index a3db71f..5c91349 100644 --- a/client/src/modules/game_state/states/shared/SharedStateUtil.js +++ b/client/src/modules/game_state/states/shared/SharedStateUtil.js @@ -36,13 +36,14 @@ export const SharedStateUtil = { ).catch((res) => { toast(res.content, 'error', true, true, 'medium'); }); + toast('Resetting to Lobby...', 'neutral', true, false); }, createReturnToLobbyButton: (stateBucket) => { const returnToLobbyButton = document.createElement('button'); returnToLobbyButton.classList.add('app-button'); returnToLobbyButton.setAttribute('id', 'return-to-lobby-button'); - returnToLobbyButton.innerText = 'Return to Lobby'; + returnToLobbyButton.innerText = 'Reset to Lobby'; returnToLobbyButton.addEventListener('click', () => { Confirmation('Return everyone to the Lobby?', () => { SharedStateUtil.restartHandler(stateBucket, STATUS.LOBBY); diff --git a/client/src/modules/page_handlers/gameHandler.js b/client/src/modules/page_handlers/gameHandler.js index 28054b5..d8d0af5 100644 --- a/client/src/modules/page_handlers/gameHandler.js +++ b/client/src/modules/page_handlers/gameHandler.js @@ -146,6 +146,7 @@ function processGameState ( switch (currentGameState.status) { case STATUS.LOBBY: + document.getElementById('lobby-title').style.display = 'flex'; const lobby = new Lobby('game-state-container', stateBucket, socket); if (refreshPrompt) { lobby.removeStartGameFunctionalityIfPresent(); @@ -167,6 +168,7 @@ function processGameState ( } break; case STATUS.IN_PROGRESS: + document.getElementById('lobby-title').style.display = 'none'; if (refreshPrompt) { document.querySelector('#game-control-prompt')?.remove(); document.querySelector('#leave-game-prompt')?.remove(); @@ -177,6 +179,7 @@ function processGameState ( inProgressGame.setUserView(currentGameState.client.userType); break; case STATUS.ENDED: { + document.getElementById('lobby-title').style.display = 'none'; if (refreshPrompt) { document.querySelector('#game-control-prompt')?.remove(); } diff --git a/client/src/styles/game.css b/client/src/styles/game.css index 3dd2aeb..5cdd78e 100644 --- a/client/src/styles/game.css +++ b/client/src/styles/game.css @@ -578,8 +578,16 @@ h1 { margin-left: 0.5em; } -#game-title { - margin: 0 auto; +#lobby-title { + margin: 0.5em auto 0 auto; + font-family: 'signika-negative', sans-serif; + color: #d7d7d7; + font-size: 25px; + filter: drop-shadow(2px 2px 4px black); + border: 1px solid #46455299; + background: #4645525c; + padding: 2px 10px; + border-radius: 5px; } #client-container {