nodemon, fix small issues

client/src/modules/GameCreationStepManager.js

@@ -319,6 +319,7 @@ function showButtons(back, forward, forwardHandler, backHandler, builtGame=null)
         backButton.innerText = "\u2bc7 Back";
         backButton.addEventListener('click', backHandler);
         backButton.setAttribute("id", "step-back-button");
+        backButton.classList.add('cancel');
         document.getElementById("tracker-container").prepend(backButton);
     }
 

client/src/modules/Templates.js

@@ -116,7 +116,7 @@ export const templates = {
                     "<h3>Transfer Mod Powers &#128081;</h3>" +
                 "</div>" +
                 "<div id='modal-button-container'>" +
-                    "<button id='close-modal-button'>Cancel</button>" +
+                    "<button id='close-modal-button' class='cancel'>Cancel</button>" +
                 "</div>" +
             "</form>" +
         "</div>" +

client/src/scripts/game.js

@@ -141,6 +141,7 @@ function processGameState (currentGameState, userId, socket, gameStateRenderer,
             }
             break;
         case globals.STATUS.ENDED:
+            document.querySelector("#end-game-prompt")?.remove();
             let container = document.getElementById("game-state-container")
             container.innerHTML = templates.END_OF_GAME_VIEW;
             container.classList.add('vertical-flex');

client/src/styles/GLOBAL.css

@@ -23,7 +23,8 @@ th, thead, tr, tt, u, ul, var {
 
 html {
     font-family: 'signika-negative', sans-serif !important;
-    background-color: #121314 !important;
+    background-color: #0f0f10;
+    height: 100%;
 }
 
 body {
@@ -48,7 +49,7 @@ body {
 
 h1 {
     font-family: 'diavlo', sans-serif;
-    color: #ab2626;
+    color: #b1afcd;
     filter: drop-shadow(2px 2px 4px black);
     margin: 0.5em 0;
 }
@@ -154,6 +155,11 @@ button:active, input[type=submit]:active {
     border: 2px solid #21ba45;
 }
 
+.cancel:hover {
+    background-color: #623232 !important;
+    border: 2px solid #8a1c1c;
+}
+
 .container {
     padding: 5px;
     border-radius: 3px;
@@ -206,6 +212,7 @@ input {
     padding: 5px 0;
     width: 100%;
     background-color: #333243;
+    border-bottom: 2px solid #57566a
 }
 
 #navbar img {

client/src/styles/create.css

@@ -85,9 +85,10 @@
 
 #deck-container, #custom-roles-container {
     margin: 1em 0;
-    background-color: #1f1f1f;
+    background-color: #191920;
     padding: 10px;
     border-radius: 3px;
+    border: 2px solid #333243;
 }
 
 #step-3 {
@@ -101,7 +102,7 @@
 }
 
 option {
-    background-color: #1f1f1f;
+    background-color: #191920;
     cursor: pointer;
 }
 
@@ -148,7 +149,7 @@ select {
 }
 
 #game-form > div {
-    background-color: #1f1f1f;
+    background-color: #191920;
     display: flex;
     flex-direction: column;
     padding: 10px;
@@ -164,7 +165,8 @@ select {
 #game-time {
     display: flex;
     flex-wrap: wrap;
-    background-color: #1f1f1f;
+    background-color: #191920;
+    border: 2px solid #333243;
     border-radius: 3px;
 }
 
@@ -290,13 +292,13 @@ input[type="number"] {
 }
 
 #step-1 div {
-    background-color: black;
+    background-color: #191920;
     color: whitesmoke;
     padding: 1em;
     max-width: 20em;
     margin: 0.5em;
     cursor: pointer;
-    border: 2px solid transparent;
+    border: 2px solid #333243;
     border-radius: 3px;
     box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6);
 }
@@ -315,7 +317,8 @@ input[type="number"] {
 }
 
 .review-option {
-    background-color: #1f1f1f;
+    background-color: #191920;
+    border: 2px solid #333243;
     color: whitesmoke;
     padding: 10px;
     font-size: 18px;

client/src/styles/game.css

@@ -178,6 +178,7 @@ h1 {
 
 #role-info-modal #modal-button-container {
     margin-top: 1em;
+    justify-content: center;
 }
 
 #game-role-info-container .role-info-name {
@@ -186,7 +187,7 @@ h1 {
     font-size: 20px;
     font-family: signika-negative, sans-serif;
     margin: 0.5em 0;
-    background-color: #15191c;
+    background-color: black;
 }
 
 #role-info-modal h2 {
@@ -541,7 +542,15 @@ label[for='moderator'] {
 }
 
 .reveal-role-button {
-    background-color: #3f5256;
+    background-color: #586a6e;
+}
+
+.reveal-role-button:hover, #mod-transfer-button:hover {
+    background-color: #4e5664;
+}
+
+.kill-player-button:hover {
+    background-color: #b35c5c;
 }
 
 .reveal-role-button img {

client/src/styles/home.css

@@ -1,5 +1,6 @@
 html {
-    height: 100%;
+    background: rgb(0,0,0);
+    background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgb(17 18 18) 35%, rgba(27,31,31,1) 100%);
 }
 
 body {
@@ -18,7 +19,7 @@ form {
     margin: 1em 0;
     padding: 10px;
     border-radius: 3px;
-    background-color: #1f1f1f;
+    background-color: black;
     justify-content: center;
     align-items: center;
 }
@@ -70,7 +71,7 @@ form > div {
 #join-container > label {
     font-size: 35px;
     font-family: 'diavlo', sans-serif;
-    color: #ab2626;
+    color: #b1afcd;
     filter: drop-shadow(2px 2px 4px black);
 }
 

client/src/styles/modal.css

@@ -7,7 +7,7 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    background-color: #23282b;
+    background-color: #191920;
     align-items: center;
     justify-content: center;
     max-width: 25em;

client/src/views/create.html

@@ -42,7 +42,7 @@
                 <textarea style="resize:none" id="role-description" rows="10" cols="30" placeholder="Describe your role..." required></textarea>
             </div>
             <div id="modal-button-container">
-                <button id="close-modal-button">Close</button>
+                <button id="close-modal-button" class="cancel">Close</button>
                 <input type="submit" id="create-role-button" value="Create Role"/>
             </div>
         </form>