Merge pull request #178 from AlecM33/loading-toasts

neutral loading toasts
AlecM33 · Sep 5, 2023 · 8f0a719 · 8f0a719
2 parents b432c65 + 817f692
commit 8f0a719
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 32 deletions.
diff --git 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 = {
             <div class='game-player-role'></div>
         </div>`,
     INITIAL_GAME_DOM:
-        `<div id='game-title'></div>
+        `
         <div id='client-container'>
             <label for='client'>You</label>
             <div id='client'>
@@ -273,6 +273,7 @@ export const HTMLFragments = {
                 <img alt="edit name" src="../../images/pencil.svg"/>
             </button>
         </div>
+        <div id='lobby-title' style="display:none;">Lobby</div>
         <div id='game-state-container'></div>`,
     // 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 {