From a475d4f71c69bdb89adf0f6ad9f5de2225fbf6fa Mon Sep 17 00:00:00 2001
From: florian <la238872@student.helha.be>
Date: Tue, 10 Jun 2025 18:53:26 +0200
Subject: [PATCH] change to white color and auto hide part of game

---
 public/index.html                    | 6 +++---
 public/script/displayMenuFunction.js | 4 ++++
 public/script/element.js             | 1 +
 public/style/index.css               | 1 +
 4 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/public/index.html b/public/index.html
index 13ca9f6..f28c343 100644
--- a/public/index.html
+++ b/public/index.html
@@ -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>
diff --git a/public/script/displayMenuFunction.js b/public/script/displayMenuFunction.js
index 260cf37..614dbe3 100644
--- a/public/script/displayMenuFunction.js
+++ b/public/script/displayMenuFunction.js
@@ -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');
 }
diff --git a/public/script/element.js b/public/script/element.js
index 6393a49..c626eb9 100644
--- a/public/script/element.js
+++ b/public/script/element.js
@@ -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');
 
diff --git a/public/style/index.css b/public/style/index.css
index 3821756..f53c969 100644
--- a/public/style/index.css
+++ b/public/style/index.css
@@ -4,6 +4,7 @@
 }
 
 body {
+  color: white;
   margin: 0;
   display: flex;
   height: 100svh;