change to white color and auto hide part of game

This commit is contained in:
florian 2025-06-10 18:53:26 +02:00
parent 3513ed8268
commit a475d4f71c
4 changed files with 9 additions and 3 deletions

View File

@ -50,7 +50,7 @@
<div class="gameOver-menu menu hidden" id="game-over-menu">
<p>Game Over</p>
<label id="restart-button" class="button">Restart</label>
<label id="main-menu-button2">Main Menu</label>
<label id="main-menu-button2" class="button">Main Menu</label>
</div>
<div class="pause-menu menu hidden" id="pause-menu">
<p>Paused</p>
@ -63,13 +63,13 @@
</div>
</div>
<div class="last">
<div class="frame">
<div class="frame hidden" id="preview-frame">
<p>Next</p>
<div id="preview-container">
<canvas id="preview-canvas" width="100" height="100"></canvas>
</div>
</div>
<div class="frame pauseContainer" id="pause-container">
<div class="frame pauseContainer hidden" id="pause-container">
<div id="pause-button" class="icon play-pause">
</div>

View File

@ -4,6 +4,7 @@ function displayMainMenu() {
boardContainer.classList.add('hidden');
pauseButton.classList.remove('paused');
buttonContainer.classList.add('hidden');
previewFrame.classList.add('hidden');
gameOverMenu.classList.add('hidden');
}
@ -12,6 +13,7 @@ function displayPause() {
mainMenu.classList.add('hidden');
loadMenu.classList.add('hidden');
boardContainer.classList.add('hidden');
previewFrame.classList.add('hidden');
pauseButton.classList.add('paused');
pauseMenu.classList.remove('hidden');
@ -24,6 +26,7 @@ function displayGameBoard() {
gameOverMenu.classList.add('hidden');
pauseButton.classList.remove('paused');
buttonContainer.classList.remove('hidden');
previewFrame.classList.remove('hidden');
boardContainer.classList.remove('hidden');
}
@ -34,6 +37,7 @@ function displayGameOver() {
boardContainer.classList.add('hidden');
pauseButton.classList.remove('paused');
buttonContainer.classList.add('hidden');
previewFrame.classList.add('hidden');
gameOverMenu.classList.remove('hidden');
}

View File

@ -18,6 +18,7 @@ const boardContainer = document.getElementById('board-container');
const previewContainer = document.getElementById('preview-container');
const buttonContainer = document.getElementById('pause-container');
const previewFrame = document.getElementById('preview-frame');
const highScoreTemplate = document.getElementById('high-score-template');

View File

@ -4,6 +4,7 @@
}
body {
color: white;
margin: 0;
display: flex;
height: 100svh;