Add "Change Mode" button functionality to Chess Game; update viewport meta tag and enhance responsive styles

talha-yousaf-cowlar · talha-yousaf-cowlar · commit 0b89745e2de6 · 2026-03-04T06:49:57.000+05:00
diff --git a/33-Chess-Game/index.html b/33-Chess-Game/index.html
@@ -2,7 +2,7 @@
 <html lang="en" dir="ltr">
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <title>Talha - Chess Game</title>
 
     <!-- 👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻-->
@@ -43,6 +43,7 @@ <h1>Chess</h1>
             <span class="turn-label" id="turnLabel">White to move</span>
             <span class="mode-badge" id="modeBadge">Vs Friend</span>
             <button type="button" id="newGameBtn" class="btn">New Game</button>
+            <button type="button" id="changeModeBtn" class="btn btn-ghost">Change Mode</button>
           </div>
         </header>
 
diff --git a/33-Chess-Game/script.js b/33-Chess-Game/script.js
@@ -578,6 +578,12 @@
     gameOverOverlay.classList.add("hidden");
   });
 
+  document.getElementById("changeModeBtn").addEventListener("click", () => {
+    modeScreen.classList.remove("hidden");
+    gameScreen.classList.add("hidden");
+    gameOverOverlay.classList.add("hidden");
+  });
+
   document.getElementById("playAgainBtn").addEventListener("click", () => {
     modeScreen.classList.remove("hidden");
     gameScreen.classList.add("hidden");
diff --git a/33-Chess-Game/style.css b/33-Chess-Game/style.css
@@ -151,6 +151,16 @@ body {
   background: var(--accent-hover);
 }
 
+.btn-ghost {
+  background: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.25);
+}
+
+.btn-ghost:hover {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.4);
+}
+
 .btn-large {
   padding: 0.75rem 1.5rem;
   font-size: 1rem;
@@ -297,12 +307,105 @@ body {
 
 /* ----- Responsive ----- */
 @media (max-width: 520px) {
+  .wrapper {
+    padding: 0.75rem;
+  }
+
   .board {
     width: min(95vw, 360px);
     height: min(95vw, 360px);
+    min-width: 280px;
+    min-height: 280px;
   }
 
   .square {
     font-size: clamp(1.25rem, 4.5vw, 2rem);
   }
+
+  .game-screen .header h1 {
+    font-size: 1.25rem;
+  }
+
+  .turn-label {
+    font-size: 0.9rem;
+  }
+
+  .btn,
+  .btn-ghost {
+    padding: 0.45rem 0.75rem;
+    font-size: 0.85rem;
+  }
+
+  .game-over-box {
+    padding: 1.5rem;
+    margin: 0.5rem;
+  }
+
+  .game-over-box h2 {
+    font-size: 1.25rem;
+  }
+
+  .promotion-piece-btn {
+    width: 44px;
+    height: 44px;
+    font-size: 1.75rem;
+  }
+}
+
+/* Very small phones & safe areas */
+@media (max-width: 380px) {
+  .wrapper {
+    padding: 0.5rem;
+    padding-left: max(0.5rem, env(safe-area-inset-left));
+    padding-right: max(0.5rem, env(safe-area-inset-right));
+    padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
+  }
+
+  .mode-screen {
+    padding: 1.25rem 0.5rem;
+  }
+
+  .mode-screen h1 {
+    font-size: 1.75rem;
+  }
+
+  .mode-screen p {
+    font-size: 0.9rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .mode-btn {
+    padding: 0.85rem 1rem;
+    font-size: 1rem;
+  }
+
+  .game-info {
+    gap: 0.5rem;
+  }
+
+  .mode-badge {
+    font-size: 0.75rem;
+    padding: 0.2rem 0.4rem;
+  }
+
+  .board {
+    width: min(100vw - 1rem, 320px);
+    height: min(100vw - 1rem, 320px);
+    min-width: 256px;
+    min-height: 256px;
+  }
+
+  .square {
+    font-size: clamp(1rem, 3.5vw, 1.5rem);
+  }
+}
+
+/* Safe area for notched devices (all viewports) */
+@supports (padding: env(safe-area-inset-top)) {
+  body {
+    padding-top: env(safe-area-inset-top);
+    padding-bottom: env(safe-area-inset-bottom);
+    padding-left: env(safe-area-inset-left);
+    padding-right: env(safe-area-inset-right);
+  }
 }
