various tweaks

client/src/modules/GameCreationStepManager.js

@@ -316,7 +316,7 @@ function showButtons(back, forward, forwardHandler, backHandler, builtGame=null)
     document.querySelector("#create-game")?.remove();
     if (back) {
         let backButton = document.createElement("button");
-        backButton.innerText = "\u2bc7 Back";
+        backButton.innerText = "\u25C0";
         backButton.addEventListener('click', backHandler);
         backButton.setAttribute("id", "step-back-button");
         backButton.classList.add('cancel');
@@ -326,7 +326,7 @@ function showButtons(back, forward, forwardHandler, backHandler, builtGame=null)
 
     if (forward && builtGame === null) {
         let fwdButton = document.createElement("button");
-        fwdButton.innerHTML = "Next \u25b6";
+        fwdButton.innerHTML = "\u25b6";
         fwdButton.addEventListener('click', forwardHandler);
         fwdButton.setAttribute("id", "step-forward-button");
         fwdButton.classList.add('app-button');

client/src/scripts/game.js

@@ -87,8 +87,9 @@ function initializeGame(stateBucket, socket, timerWorker, userId, gameStateRende
 }
 
 function processGameState (currentGameState, userId, socket, gameStateRenderer, gameTimerManager, timerWorker) {
-    console.log(currentGameState);
     displayClientInfo(currentGameState.client.name, currentGameState.client.userType);
+    document.querySelector("#start-game-prompt")?.remove();
+    document.querySelector("#end-game-prompt")?.remove();
     switch (currentGameState.status) {
         case globals.STATUS.LOBBY:
             document.getElementById("game-state-container").innerHTML = templates.LOBBY;
@@ -112,22 +113,19 @@ function processGameState (currentGameState, userId, socket, gameStateRenderer,
                     gameStateRenderer.renderPlayerView();
                     break;
                 case globals.USER_TYPES.KILLED_PLAYER:
-                    document.querySelector("#end-game-prompt")?.remove();
+
                     document.getElementById("game-state-container").innerHTML = templates.PLAYER_GAME_VIEW;
                     gameStateRenderer.renderPlayerView(true);
                     break;
                 case globals.USER_TYPES.MODERATOR:
-                    document.querySelector("#start-game-prompt")?.remove();
                     document.getElementById("game-state-container").innerHTML = templates.MODERATOR_GAME_VIEW;
                     gameStateRenderer.renderModeratorView();
                     break;
                 case globals.USER_TYPES.TEMPORARY_MODERATOR:
-                    document.querySelector("#start-game-prompt")?.remove();
                     document.getElementById("game-state-container").innerHTML = templates.TEMP_MOD_GAME_VIEW;
                     gameStateRenderer.renderTempModView();
                     break;
                 case globals.USER_TYPES.SPECTATOR:
-                    document.querySelector("#end-game-prompt")?.remove();
                     document.getElementById("game-state-container").innerHTML = templates.SPECTATOR_GAME_VIEW;
                     gameStateRenderer.renderSpectatorView();
                     break;
@@ -144,7 +142,6 @@ 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');
@@ -263,7 +260,6 @@ function setClientSocketHandlers(stateBucket, gameStateRenderer, socket, timerWo
 
     if (!socket.hasListeners(globals.COMMANDS.END_GAME)) {
         socket.on(globals.COMMANDS.END_GAME, (people) => {
-            document.querySelector("#end-game-prompt")?.remove();
             stateBucket.currentGameState.people = people;
             stateBucket.currentGameState.status = globals.STATUS.ENDED;
             processGameState(stateBucket.currentGameState, stateBucket.currentGameState.client.cookie, socket, gameStateRenderer, gameTimerManager, timerWorker);

client/src/styles/GLOBAL.css

@@ -241,7 +241,7 @@ input {
     font-family: 'diavlo', sans-serif;
     border-radius: 5px;
     padding: 2px 5px;
-    font-size: 19px;
+    font-size: 20px;
     margin: 0 0.75em;
     width: fit-content;
 }
@@ -281,7 +281,7 @@ input {
 }
 
 .mobile-link {
-    margin-top: 0.5em !important;
+    margin-top: 1em !important;
     margin-left: 1em !important;
 }
 

client/src/styles/home.css

@@ -12,13 +12,22 @@ button#home-create-button {
     margin-bottom: 1em;
 }
 
+#home-page-top-section {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    background-color: #1e1b26;
+    margin-bottom: 15px;
+}
+
 form {
     display: flex;
     flex-wrap: wrap;
     margin: 10px 0;
     padding: 10px;
     border-radius: 3px;
-    background-color: black;
     justify-content: center;
     align-items: center;
 }
@@ -60,7 +69,7 @@ img[src='../images/logo_cropped.gif'] {
 }
 
 form > div {
-    margin: 1em 0;
+    margin: 15px 0;
 }
 
 #join-container {

client/src/styles/modal.css

@@ -1,7 +1,7 @@
 .modal {
     border-radius: 2px;
     text-align: center;
-    position: absolute;
+    position: fixed;
     width: 85%;
     z-index: 100;
     top: 50%;

client/src/views/create.html

@@ -88,9 +88,5 @@
 <!--    </form>-->
 </div>
 <script src="/dist/create-bundle.js"></script>
-<script src="/socket.io/socket.io.js"></script>
-<script>
-    const socket = io();
-</script>
 </body>
 </html>

client/src/views/home.html

@@ -23,11 +23,13 @@
     <body>
     <div id="mobile-menu-background-overlay"></div>
     <div id="navbar"></div>
+    <div id="home-page-top-section">
         <img src="../images/logo_cropped.gif"/>
         <h3>A tool to run werewolf when not in-person, or in any setting without a deck of cards.</h3>
         <a href="/create">
             <button id="home-create-button" class="app-button">Create A Game</button>
         </a>
+    </div>
     <div id="join-container">
         <label for="join-form">Join A Game</label>
         <form id="join-form">
@@ -49,9 +51,5 @@
         </div>
     </footer>
     <script src="/dist/home-bundle.js"></script>
-    <script src="/socket.io/socket.io.js"></script>
-    <script>
-        const socket = io();
-    </script>
     </body>
 </html>

package.json

@@ -41,6 +41,9 @@
   },
   "devDependencies": {},
   "nodemonConfig": {
-    "ignore": ["client/*", "node_modules/*"]
+    "ignore": [
+      "client/*",
+      "node_modules/*"
+    ]
   }
 }

server/modules/ServerBootstrapper.js

@@ -93,7 +93,7 @@ const ServerBootstrapper = {
                     origin: ["https://playwerewolf.uk.r.appspot.com", "wss://playwerewolf.uk.r.appspot.com"],
                     methods: ["GET", "POST"],
                     allowedHeaders: ["Content-Type", "X-Requested-With", "Accept"],
-                    credentials: false
+                    credentials: true
                 },
                 transports: ["polling"]
             });