diff --git a/client/src/modules/GameCreationStepManager.js b/client/src/modules/GameCreationStepManager.js
index c46b891..0f508b5 100644
--- a/client/src/modules/GameCreationStepManager.js
+++ b/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');
diff --git a/client/src/scripts/game.js b/client/src/scripts/game.js
index 082d452..c9d2946 100644
--- a/client/src/scripts/game.js
+++ b/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);
diff --git a/client/src/styles/GLOBAL.css b/client/src/styles/GLOBAL.css
index 12aa42b..189755a 100644
--- a/client/src/styles/GLOBAL.css
+++ b/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;
}
diff --git a/client/src/styles/home.css b/client/src/styles/home.css
index 2bcc5f7..a61f86b 100644
--- a/client/src/styles/home.css
+++ b/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 {
diff --git a/client/src/styles/modal.css b/client/src/styles/modal.css
index 4854377..0988214 100644
--- a/client/src/styles/modal.css
+++ b/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%;
diff --git a/client/src/views/create.html b/client/src/views/create.html
index ae67cae..a12a0f9 100644
--- a/client/src/views/create.html
+++ b/client/src/views/create.html
@@ -88,9 +88,5 @@
-
-