adminflsu/Tetris-on-the-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change to white color and auto hide part of game

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/index.html
View File

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

4
public/script/displayMenuFunction.js
View File

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

1
public/script/element.js
View File

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

1
public/style/index.css
View File

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