diff --git a/client/src/modules/DeckStateManager.js b/client/src/modules/DeckStateManager.js index dd0f620..2cf9cf2 100644 --- a/client/src/modules/DeckStateManager.js +++ b/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(); } }; } diff --git a/client/src/modules/GameCreationStepManager.js b/client/src/modules/GameCreationStepManager.js index 169d35b..0c88100 100644 --- a/client/src/modules/GameCreationStepManager.js +++ b/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) { diff --git a/client/src/styles/create.css b/client/src/styles/create.css index 82ddb52..fa1a988 100644 --- a/client/src/styles/create.css +++ b/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) {