styling tweaks

client/src/modules/DeckStateManager.js

@@ -54,6 +54,13 @@ export class DeckStateManager {
         return total;
     }
 
+    displayDeckPlaceHolder = () => {
+        const placeholder = document.createElement('div');
+        placeholder.setAttribute('id', 'deck-list-placeholder');
+        placeholder.innerText = 'Add a card from the role box.';
+        document.getElementById('deck-list').appendChild(placeholder);
+    }
+
     updateDeckStatus = () => {
         document.getElementById('deck-count').innerText = this.getDeckSize() + ' Players';
         if (this.deck.length > 0) {
@@ -119,11 +126,10 @@ export class DeckStateManager {
                 });
             }
             if (this.deck.length === 0) {
-                const placeholder = document.createElement('div');
-                placeholder.setAttribute('id', 'deck-list-placeholder');
-                placeholder.innerText = 'Add a card from the role box.';
-                document.getElementById('deck-list').appendChild(placeholder);
+                this.displayDeckPlaceHolder();
             }
+        } else {
+            this.displayDeckPlaceHolder();
         }
     };
 }

client/src/modules/GameCreationStepManager.js

@@ -436,6 +436,7 @@ function updateTracker (step) {
 }
 
 function showButtons (back, forward, forwardHandler, backHandler, builtGame = null) {
+    document.querySelectorAll('.tracker-placeholder').forEach((el) => el.remove());
     document.querySelector('#step-back-button')?.remove();
     document.querySelector('#step-forward-button')?.remove();
     document.querySelector('#create-game')?.remove();
@@ -464,6 +465,16 @@ function showButtons (back, forward, forwardHandler, backHandler, builtGame = nu
         createButton.addEventListener('click', forwardHandler);
         document.getElementById('tracker-container').appendChild(createButton);
     }
+
+    insertPlaceHolderButtonsIfNeeded(back, forward);
+}
+
+function insertPlaceHolderButtonsIfNeeded(back, forward) {
+    let placeholder = document.createElement('div');
+    placeholder.classList.add('tracker-placeholder');
+    if (!back) {
+        document.getElementById('tracker-container').prepend(placeholder);
+    }
 }
 
 function initializeRemainingEventListeners (deckManager, roleBox) {

client/src/styles/create.css

@@ -339,8 +339,16 @@ select {
     font-size: 25px;
 }
 
+#game-time label {
+    display: block;
+    width: 6em;
+    text-align: center;
+}
+
 #game-time div {
     margin: 0.5em;
+    display: flex;
+    align-items: center;
 }
 
 #role-alignment {
@@ -481,7 +489,7 @@ input[type="number"] {
 #tracker-container {
     display: flex;
     align-items: center;
-    margin-top: 2em;
+    margin-top: 1em;
     justify-content: center;
     width: 100%;
 }
@@ -511,6 +519,14 @@ input[type="number"] {
     background-color: #66666657 !important;
     padding: 0 !important;
     width: 50px;
+    height: 44px;
+}
+
+.tracker-placeholder {
+    width: 50px;
+    height: 44px;
+    background-color: transparent;
+    border: none;
 }
 
 #step-forward-button, #create-game {
@@ -572,7 +588,7 @@ input[type="number"] {
         min-width: 90%;
     }
     h1 {
-        font-size: 35px;
+        font-size: 32px;
     }
 
     #step-1 div {
@@ -602,6 +618,10 @@ input[type="number"] {
     .compact-card {
         min-width: 130px;
     }
+
+    #step-title {
+        font-size: 21px;
+    }
 }
 
 @media(min-width: 551px) {