From c53951803f955dc21a72be642421e1555d6a9319 Mon Sep 17 00:00:00 2001
From: AlecM33 <leohfx@gmail.com>
Date: Sat, 19 Aug 2023 12:58:41 -0400
Subject: [PATCH] more styling improvements, move return to lobby button for
 Ended game status

---
 .../front_end_components/HTMLFragments.js     |  8 +++---
 client/src/modules/game_state/states/Ended.js | 11 +++++++-
 .../modules/game_state/states/InProgress.js   |  7 ++---
 .../src/modules/page_handlers/gameHandler.js  |  4 +++
 client/src/styles/GLOBAL.css                  | 10 +++----
 client/src/styles/confirmation.css            |  4 ---
 client/src/styles/create.css                  | 25 ++++++++++--------
 client/src/styles/game.css                    | 26 +++++++++----------
 client/src/styles/home.css                    |  2 +-
 9 files changed, 54 insertions(+), 43 deletions(-)

diff --git a/client/src/modules/front_end_components/HTMLFragments.js b/client/src/modules/front_end_components/HTMLFragments.js
index 35fa91d..01264a0 100644
--- a/client/src/modules/front_end_components/HTMLFragments.js
+++ b/client/src/modules/front_end_components/HTMLFragments.js
@@ -49,11 +49,9 @@ export const HTMLFragments = {
     <button id='edit-timer-button'>Edit Timer</button>
     <button id='start-game-button'>Start Game</button>`,
     LEAVE_GAME_PROMPT:
-    '<button id=\'leave-game-button\'>Leave Room</button>',
-    GAME_CONTROL_PROMPT:
-    `<div id='game-control-prompt'>
-        <button id='end-game-button'>End Game</button>
-    </div>`,
+    '<button id=\'leave-game-button\' class="app-button">Leave Room</button>',
+    END_GAME_BUTTON:
+    '<button id=\'end-game-button\' class=\'app-button\'>End Game</button>',
     ROLE_EDIT_BUTTONS:
     `<button class="app-button cancel" id="cancel-role-changes-button">Cancel</button>
     <button class="app-button" id="save-role-changes-button">
diff --git a/client/src/modules/game_state/states/Ended.js b/client/src/modules/game_state/states/Ended.js
index 40cc29d..f4ab4a2 100644
--- a/client/src/modules/game_state/states/Ended.js
+++ b/client/src/modules/game_state/states/Ended.js
@@ -15,7 +15,7 @@ export class Ended {
             gameState.client.userType === USER_TYPES.MODERATOR
             || gameState.client.userType === USER_TYPES.TEMPORARY_MODERATOR
         ) {
-            document.getElementById('end-of-game-buttons').prepend(SharedStateUtil.createReturnToLobbyButton(this.stateBucket));
+            createPromptComponent(this.socket, this.stateBucket);
         }
         SharedStateUtil.displayCurrentModerator(this.stateBucket.currentGameState.people
             .find((person) => person.userType === USER_TYPES.MODERATOR
@@ -45,6 +45,15 @@ export class Ended {
     }
 }
 
+function createPromptComponent (socket, stateBucket) {
+    if (document.querySelector('#game-control-prompt') === null) {
+        const div = document.createElement('div');
+        div.id = 'game-control-prompt';
+        div.prepend(SharedStateUtil.createReturnToLobbyButton(stateBucket));
+        document.getElementById('game-content').appendChild(div);
+    }
+}
+
 function renderGroupOfPlayers (
     people,
     accessCode = null,
diff --git a/client/src/modules/game_state/states/InProgress.js b/client/src/modules/game_state/states/InProgress.js
index 1a25180..dd70c99 100644
--- a/client/src/modules/game_state/states/InProgress.js
+++ b/client/src/modules/game_state/states/InProgress.js
@@ -501,7 +501,8 @@ function removeExistingPlayerElements (killPlayerHandlers, revealRoleHandlers) {
 function createEndGamePromptComponent (socket, stateBucket) {
     if (document.querySelector('#game-control-prompt') === null) {
         const div = document.createElement('div');
-        div.innerHTML = HTMLFragments.GAME_CONTROL_PROMPT;
+        div.id = 'game-control-prompt';
+        div.innerHTML = HTMLFragments.END_GAME_BUTTON;
         div.querySelector('#end-game-button').addEventListener('click', (e) => {
             e.preventDefault();
             Confirmation('End the game?', () => {
@@ -511,12 +512,12 @@ function createEndGamePromptComponent (socket, stateBucket) {
                     stateBucket.currentGameState.accessCode,
                     null,
                     () => {
-                        document.querySelector('#game-control-prompt')?.remove();
+                        toast('Game ended.', 'success', true);
                     }
                 );
             });
         });
-        div.querySelector('#game-control-prompt').prepend(SharedStateUtil.createReturnToLobbyButton(stateBucket));
+        div.prepend(SharedStateUtil.createReturnToLobbyButton(stateBucket));
         document.getElementById('game-content').appendChild(div);
     }
 }
diff --git a/client/src/modules/page_handlers/gameHandler.js b/client/src/modules/page_handlers/gameHandler.js
index c30a495..28054b5 100644
--- a/client/src/modules/page_handlers/gameHandler.js
+++ b/client/src/modules/page_handlers/gameHandler.js
@@ -177,6 +177,9 @@ function processGameState (
             inProgressGame.setUserView(currentGameState.client.userType);
             break;
         case STATUS.ENDED: {
+            if (refreshPrompt) {
+                document.querySelector('#game-control-prompt')?.remove();
+            }
             const ended = new Ended('game-state-container', stateBucket, socket);
             ended.renderEndOfGame(currentGameState);
             break;
@@ -261,6 +264,7 @@ function setClientSocketHandlers (stateBucket, socket) {
     });
 
     socket.on(EVENT_IDS.END_GAME, (people) => {
+        document.querySelector('#game-control-prompt')?.remove();
         stateBucket.currentGameState.people = people;
         stateBucket.currentGameState.status = STATUS.ENDED;
         processGameState(
diff --git a/client/src/styles/GLOBAL.css b/client/src/styles/GLOBAL.css
index 1fdac25..7d5e163 100644
--- a/client/src/styles/GLOBAL.css
+++ b/client/src/styles/GLOBAL.css
@@ -236,22 +236,22 @@ button {
     color: #e7e7e7;
     font-size: 18px;
     cursor: pointer;
-    border: 2px solid #0c541d;
+    border: 3px solid transparent;
     text-shadow: 0 3px 4px rgb(0 0 0 / 55%);
 }
 
 .app-button:active, input[type=submit]:active {
-    border: 2px solid #21ba45;
+    border: 3px solid #21ba45;
 }
 
 .cancel {
     background-color: #7a1a1a !important;
-    border: 2px solid #540c0c !important;
+    border: 3px solid transparent !important;
 }
 
 .cancel:hover {
     background-color: #623232 !important;
-    border: 2px solid #7a1a1a !important;
+    border: 3px solid #7a1a1a !important;
 }
 
 .submitted {
@@ -278,7 +278,7 @@ button {
 
 .app-button:hover, input[type="submit"]:hover, #game-link:hover {
     background-color: #326243;
-    border: 2px solid #1a7a31;
+    border: 3px solid #1a7a31;
 }
 
 .emphasized {
diff --git a/client/src/styles/confirmation.css b/client/src/styles/confirmation.css
index 32df219..ef92b14 100644
--- a/client/src/styles/confirmation.css
+++ b/client/src/styles/confirmation.css
@@ -52,7 +52,3 @@
     display: flex;
     justify-content: center;
 }
-
-#confirmation-cancel-button {
-    background-color: #762323 !important;
-}
diff --git a/client/src/styles/create.css b/client/src/styles/create.css
index 2444c31..69db5f2 100644
--- a/client/src/styles/create.css
+++ b/client/src/styles/create.css
@@ -102,8 +102,8 @@
 }
 
 .template-option {
-    background-color: #4645525c;
-    border: 2px solid #46455299;
+    background-color: #000000;
+    border: 1px solid #4b4b4b;
     color: #d7d7d7;
     display: flex;
     justify-content: space-between;
@@ -129,7 +129,7 @@
 }
 
 .template-option:hover, .template-option:active {
-    border: 2px solid #e7e7e7;
+    border: 1px solid #e7e7e7;
     background-color: #33343c;
     cursor: pointer;
 }
@@ -538,7 +538,7 @@ input[type="number"] {
 }
 
 #creation-step-container > div:nth-child(2) {
-    animation: fade-in 0.5s ease-out;
+    animation: fade-in 0.5s ease-in-out;
 }
 
 #step-title {
@@ -572,7 +572,7 @@ input[type="number"] {
     width: 100%;
     height: 50px;
     position: relative;
-    max-width: 30em;
+    max-width: 28em;
 }
 
 #upload-custom-roles-modal input[type='file'] {
@@ -599,8 +599,8 @@ input[type="number"] {
 
 #step-forward-button, #step-back-button {
     padding: 0 !important;
-    width: 50px;
-    height: 44px;
+    width: 65px;
+    height: 50px;
     user-select: none;
     -ms-user-select: none;
     -webkit-user-select: none;
@@ -623,16 +623,18 @@ input[type="number"] {
 }
 
 #step-forward-button {
-    right: 30px;
+    right: 12px;
 }
 
 #create-game {
-    right: 5%;
+    right: -5px;
     position: absolute;
+    font-size: 20px;
+    height: 50px;
 }
 
 #step-back-button {
-    left: 30px;
+    left: 12px;
 }
 
 #step-1 div {
@@ -697,13 +699,14 @@ input[type="number"] {
         height: 13px;
     }
 
-    #step-forward-button, #step-back-button, #create-game {
+    #step-forward-button, #step-back-button {
         padding: 10px 15px;
         font-size: 16px;
     }
 
     #create-game {
         width: 80px;
+        right: 5px;
     }
 
     .role-name {
diff --git a/client/src/styles/game.css b/client/src/styles/game.css
index 92ebfe3..3dd2aeb 100644
--- a/client/src/styles/game.css
+++ b/client/src/styles/game.css
@@ -45,7 +45,7 @@
     border-radius: 5px;
     color: #d7d7d7;
     background-color: #1e1e1e;
-    padding: 0 10px;
+    padding: 2px 10px;
     width: 90%;
     margin-bottom: 0.5em;
 }
@@ -128,7 +128,7 @@
 }
 
 #role-edit-prompt button, #timer-edit-prompt button {
-    margin: 0 20px;
+    margin: 0 15px;
 }
 
 #save-role-changes-button img, #save-timer-changes-button img {
@@ -144,7 +144,7 @@
 #edit-timer-button,
 #save-timer-changes-button {
     background-color: #045ea6;
-    border: 2px solid #024070;
+    border: 3px solid transparent;
 }
 
 #return-to-lobby-button:hover,
@@ -155,7 +155,7 @@
 #edit-timer-button:hover,
 #save-timer-changes-button:hover {
     background-color: rgba(0, 120, 215, 0.45);
-    border: 2px solid #045EA6;
+    border: 3px solid #045EA6;
 }
 
 #mid-game-role-editor, #mid-game-timer-editor {
@@ -178,7 +178,7 @@
     border-radius: 5px;
     margin: 1em;
     background-color: #1e1e1e;
-    border: 2px solid #4b4b4b;
+    border: 1px solid #4b4b4b;
 }
 
 #timer-parameters {
@@ -267,7 +267,7 @@ h1 {
 #end-of-game-header h2 {
     border: 1px solid #4b4b4b;
     border-radius: 5px;
-    background-color: #1a1726;
+    background-color: #232328;
     padding: 7px;
     margin: 0.5em;
 }
@@ -709,7 +709,6 @@ label[for='moderator'] {
     border-radius: 5px;
     color: #e7e7e7;
     cursor: pointer;
-    border: 2px solid transparent;
     transition: background-color, border 0.3s ease-out;
     text-shadow: 0 3px 4px rgb(0 0 0 / 85%);
     font-size: 22px;
@@ -721,6 +720,7 @@ label[for='moderator'] {
 
 #start-game-button {
     background-color: #1c8a36;
+    border: 3px solid transparent
 }
 
 #end-game-button, #leave-game-button {
@@ -729,12 +729,12 @@ label[for='moderator'] {
 
 #start-game-button:hover {
     background-color: #326243;
-    border: 2px solid #1c8a36;
+    border: 3px solid #1c8a36;
 }
 
 #end-game-button:hover, #leave-game-button:hover {
     background-color: #623232;
-    border: 2px solid #8a1c1c;
+    border: 3px solid #8a1c1c;
 }
 
 #play-pause {
@@ -835,7 +835,7 @@ canvas {
     height: 25px;
     font-size: 16px;
     cursor: pointer;
-    border: 2px solid transparent;
+    border: 3px solid transparent;
     transition: background-color, border 0.2s ease-out;
     text-shadow: 0 3px 4px rgb(0 0 0 / 55%);
     margin: 5px 0 5px 25px;
@@ -846,7 +846,7 @@ canvas {
 }
 
 .kill-player-button:hover, .reveal-role-button:hover {
-    border: 2px solid #b1afcd;
+    border: 3px solid #b1afcd;
 }
 
 #game-players-container {
@@ -1023,7 +1023,7 @@ canvas {
 
 @media(max-width: 500px) {
     #game-control-prompt button, #start-game-prompt button, #leave-game-prompt button {
-        margin: 0 10px;
+        margin: 0 12px;
     }
 
     #client-container button img {
@@ -1103,7 +1103,7 @@ canvas {
     #edit-roles-button,
     #leave-game-button,
     #edit-timer-button {
-        font-size: 20px;
+        font-size: 18px;
         padding: 5px;
     }
 
diff --git a/client/src/styles/home.css b/client/src/styles/home.css
index 7d7a6f7..54fb08d 100644
--- a/client/src/styles/home.css
+++ b/client/src/styles/home.css
@@ -109,7 +109,7 @@ h3 {
 img[src='../images/new-logo.png'], #new-logo-container {
     max-width: 250px;
     width: 25vw;
-    min-width: 180px;
+    min-width: 150px;
     margin: 1em 0 1em 0;
     aspect-ratio: 500 / 641;
 }