Fix: Updated game UI

index.html

@@ -22,6 +22,7 @@
     <header>
         <h1>The Maze Game</h1>
         <p>A simple yet fun game to play when you're bored.</p>
+        <p id="lifetimeScore">Lifetime Score: 0</p>
     </header>
 
     <div class="game-container">
@@ -34,7 +35,7 @@ <h1>The Maze Game</h1>
                 <button id="moveRight" style="font: inherit; cursor: pointer">Right</button>
             </div>
         </div>
-        <button id="regenerateMaze" style="margin-top: 25px">Regenerate Maze</button>
+        <button id="regenerateMaze" style="margin-top: 25px" title="Too hard? Regenerate the maze! Note that you will lose 1 point for that." onclick="regenerateMaze()">Regenerate Maze</button>
         <button id="aboutGame" onclick="window.location.href='src/html/about.html'" style="margin-top: 25px">About Game</button>
     </div>
 

src/js/game.js

@@ -1,7 +1,10 @@
 document.getElementById('regenerateMaze').addEventListener('click', () => {
+    localStorage.getItem('highScore') ? localStorage.setItem('highScore', parseInt(localStorage.getItem('highScore')) - 1) : localStorage.setItem('highScore', 0);
     window.location.reload();
 });
 
+document.getElementById('lifetimeScore').innerText = localStorage.getItem('highScore') ? `Lifetime Score: ${localStorage.getItem('highScore')}` : 'Lifetime Score: 0';
+
 const canvas = document.getElementById('mazeCanvas');
 const ctx = canvas.getContext('2d');
 
@@ -96,7 +99,8 @@ function movePlayer(dx, dy) {
 
 function checkWin() {
     if (player.x === exit.x && player.y === exit.y) {
-        alert("Congratulations, you've escaped the maze! Now we dare you to do it again!");
+        localStorage.getItem('highScore') ? localStorage.setItem('highScore', parseInt(localStorage.getItem('highScore')) + 1) : localStorage.setItem('highScore', 1);
+        alert("Congratulations, you've escaped the maze! Now we dare you to do it again! FYI, your lifetime score is currently: " + localStorage.getItem('highScore'));
         window.location.reload();
     }
 }
@@ -125,4 +129,3 @@ document.getElementById('moveUp').addEventListener('click', () => movePlayer(0,
 document.getElementById('moveDown').addEventListener('click', () => movePlayer(0, 1));
 document.getElementById('moveLeft').addEventListener('click', () => movePlayer(-1, 0));
 document.getElementById('moveRight').addEventListener('click', () => movePlayer(1, 0));
-