From 90b3184e2105c235dc190ab6a9ba6e9905267b09 Mon Sep 17 00:00:00 2001
From: Anas <166026229+Anas255-exe@users.noreply.github.com>
Date: Mon, 27 Oct 2025 08:48:33 +0000
Subject: [PATCH] feat(ui): add pause overlay for #game-board when paused

- Add #pause-overlay element to Index.html, positioned over #game-board.
- Add CSS for semi-transparent dark background, centered "GAME PAUSED" text, and fade transition.
- Toggle overlay visibility from script.js on pause/resume (show immediately on pause, hide on resume/start/reset).
- Prevents input while paused and scales responsively with the board.

Test: start game -> Pause shows overlay; Resume hides overlay.
---
 Index.html |  3 +++
 script.js  | 21 +++++++++++++++++++++
 style.css  | 41 +++++++++++++++++++++++++++++++++++++++++
 3 files changed, 65 insertions(+)

diff --git a/Index.html b/Index.html
index c68a28a..236f1dc 100644
--- a/Index.html
+++ b/Index.html
@@ -42,6 +42,9 @@
   <main>
     <section id="game-area">
       <canvas id="gameBoard" width="400" height="400"></canvas>
+      <div id="pause-overlay" aria-hidden="true">
+        <div class="pause-text">GAME PAUSED</div>
+      </div>
       <div id="game-stats">
         <span id="scoreBox">Score: <span id="score">0</span></span>
         <span id="bestScoreBox"> </span>
diff --git a/script.js b/script.js
index 84de7fd..7c9736b 100644
--- a/script.js
+++ b/script.js
@@ -397,6 +397,18 @@ function resetGame() {
 const startBtn = document.getElementById('startBtn');
 const pauseBtn = document.getElementById('pauseBtn');
 const resetBtn = document.getElementById('resetBtn');
+const pauseOverlay = document.getElementById('pause-overlay');
+
+function setPauseOverlay(visible) {
+    if (!pauseOverlay) return;
+    if (visible) {
+        pauseOverlay.classList.add('show');
+        pauseOverlay.setAttribute('aria-hidden', 'false');
+    } else {
+        pauseOverlay.classList.remove('show');
+        pauseOverlay.setAttribute('aria-hidden', 'true');
+    }
+}
 
 
 startBtn.onclick = () => {
@@ -404,6 +416,8 @@ startBtn.onclick = () => {
         if (snake.length > 1 || score > 0 || direction.x !== 0 || direction.y !== 0) {
             resetGame();
         }
+        // Ensure overlay is hidden when starting/resuming play
+        setPauseOverlay(false);
         gameRunning = true;
         pauseBtn.textContent = 'Pause';
         pauseBtn.disabled = false;
@@ -417,10 +431,14 @@ pauseBtn.onclick = () => {
         gameRunning = false;
         pauseBtn.textContent = 'Resume';
         document.body.classList.remove('game-active');
+        // Show overlay immediately when paused
+        setPauseOverlay(true);
     } else {
         gameRunning = true;
         pauseBtn.textContent = 'Pause';
         document.body.classList.add('game-active');
+        // Hide overlay when resuming
+        setPauseOverlay(false);
         if (!animationId) loop();
     }
 };
@@ -429,6 +447,7 @@ resetBtn.onclick = () => {
     pauseBtn.textContent = 'Pause';
     pauseBtn.disabled = true;
     resetBtn.disabled = true;
+    setPauseOverlay(false);
     resetGame();
 };
 
@@ -442,4 +461,6 @@ window.onload = function () {
     loadBestScore();
     initGameVars();
     draw();
+    // Ensure pause overlay hidden on load
+    setPauseOverlay(false);
 };
diff --git a/style.css b/style.css
index 18d043d..73af85f 100644
--- a/style.css
+++ b/style.css
@@ -292,4 +292,45 @@ footer {
     max-width: 95vw;
     max-height: 89vw;
   }
+}
+
+/* Pause overlay that appears above the game canvas when paused */
+#pause-overlay {
+  position: absolute;
+  /* Place overlay directly over the canvas (canvas is centered) */
+  top: 22px; /* matches #game-area padding-top */
+  left: 50%;
+  transform: translateX(-50%);
+  width: 400px;
+  height: 400px;
+  max-width: 96vw;
+  max-height: 70vw;
+  border-radius: 11px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.6);
+  color: var(--white);
+  font-size: 34px;
+  font-weight: 800;
+  text-align: center;
+  letter-spacing: 1px;
+  z-index: 200;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity .18s ease;
+}
+
+#pause-overlay.show {
+  opacity: 1;
+  pointer-events: auto; /* block interactions when paused */
+}
+
+#pause-overlay .pause-text {
+  text-shadow: 0 4px 18px rgba(0,0,0,0.6);
+  font-family: 'Inter', Arial, sans-serif;
+}
+
+@media (max-width:520px) {
+  #pause-overlay { top: 16px; }
 }
\ No newline at end of file