Merge branch 'Main' into feat/gamified-level

Author: codewithakshyaaa

navbar.js

@@ -66,19 +66,19 @@
   `;
   const homeBtn = `
   <a class="btn ${isHome ? "btn-primary active" : "btn-ghost"} btn-sm" href="${homeHref}">
-    <span class="mobile-nav-icon"><i class="fas fa-home"></i></span>
+    <span class="mobile-nav-icon"><i class="fas fa-home" aria-hidden="true"></i></span>
     Home
   </a>`;
 
   const learnBtn = `
   <a class="btn ${isLearn ? "btn-primary active" : "btn-ghost"} btn-sm" href="${learnHref}">
-    <span class="mobile-nav-icon"><i class="fas fa-graduation-cap"></i></span>
+    <span class="mobile-nav-icon"><i class="fas fa-graduation-cap" aria-hidden="true"></i></span>
     Learn
   </a>`;
 
   const contributorsBtn = `
   <a class="btn ${isContributors ? "btn-primary active" : "btn-ghost"} btn-sm" href="${contributorsHref}">
-    <span class="mobile-nav-icon"><i class="fas fa-users"></i></span>
+    <span class="mobile-nav-icon"><i class="fas fa-users" aria-hidden="true"></i></span>
     Contributors
   </a>`;
 
@@ -96,7 +96,7 @@
     safeStorage.getItem("customCursorEnabled") !== "false";
   const cursorBtn = `
     <button class="btn btn-ghost btn-sm" id="cursorToggleNav" aria-label="Toggle custom cursor (currently ${customCursorEnabled ? "Custom" : "Default"})">
-      <span class="mobile-nav-icon"><i class="fas ${customCursorEnabled ? "fa-circle-notch" : "fa-mouse-pointer"}"></i></span>
+      <span class="mobile-nav-icon"><i class="fas ${customCursorEnabled ? "fa-circle-notch" : "fa-mouse-pointer"}" aria-hidden="true"></i></span>
       Cursor: ${customCursorEnabled ? "Custom" : "Default"}
     </button>
   `;
@@ -139,7 +139,7 @@
         <div class="mobile-menu-header">
           <span class="mobile-menu-title">MENU</span>
           <button class="mobile-menu-close" id="mobileMenuClose" type="button">
-            <i class="fas fa-times"></i>
+            <i class="fas fa-times" aria-hidden="true"></i>
           </button>
         </div>
         ${navButtonsHTML}
@@ -248,6 +248,14 @@
         dropdownMenu.classList.remove("show");
       }
     });
+
+    document.addEventListener("keydown", (e) => {
+      if (e.key === "Escape" && dropdownMenu.classList.contains("show")) {
+        dropdownToggle.setAttribute("aria-expanded", "false");
+        dropdownMenu.classList.remove("show");
+        dropdownToggle.focus();
+      }
+    });
   }
 
   const logoutBtn = document.getElementById("logoutBtn");
@@ -272,7 +280,7 @@
     // Update all cursor toggle buttons on the page (both standard and mobile drawer might have it)
     document.querySelectorAll("#cursorToggleNav").forEach((btn) => {
       btn.innerHTML = `
-        <span class="mobile-nav-icon"><i class="fas ${nextState ? "fa-circle-notch" : "fa-mouse-pointer"}"></i></span>
+        <span class="mobile-nav-icon"><i class="fas ${nextState ? "fa-circle-notch" : "fa-mouse-pointer"}" aria-hidden="true"></i></span>
         Cursor: ${nextState ? "Custom" : "Default"}
       `;
       btn.setAttribute(

projects.json

@@ -1910,5 +1910,13 @@
   "techStack": ["html", "css", "javascript"],
   "difficulty": "intermediate",
   "projectDesc": "A responsive Kanban Board application featuring drag-and-drop task management, task creation, editing, deletion, local storage persistence, and dark/light theme support."
+},
+  {
+  "projectNo": 210,
+  "projectName": "Cricket Scorecard",
+  "projectPath": "./public/Cricket-Scorecard/index.html",
+  "techStack": ["html", "css", "javascript"],
+  "difficulty": "advanced",
+  "projectDesc": "A tool to view the schedule of upcoming matches and watch live scorecard."
 }
 ]

public/2048_game/index.html

@@ -4,15 +4,16 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <meta name="description" content="2048 — A beautiful, feature-rich tile puzzle game." />
+  <meta name="description" content="2048 — A beautiful, feature-rich tile puzzle game. Slide tiles, merge numbers, and reach the 2048 tile!" />
   <title>2048</title>
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@700;800;900&display=swap" rel="stylesheet" />
   <link rel="stylesheet" href="style.css" />
+  <style id="theme-style"></style>
 </head>
 
 <body class="light">
-<a href="/" class="project-back-button" style="position:fixed;left:18px;top:18px;padding:8px 16px;border-radius:8px;background:#1e293b;color:#3b82f6;border:1px solid #3b82f6;text-decoration:none;z-index:9999;font-weight:700;font-family:Inter, system-ui, sans-serif;transition:all 0.2s ease;" onmouseover="this.style.background='#3b82f6';this.style.color='#fff'" onmouseout="this.style.background='#1e293b';this.style.color='#3b82f6'">← Back to Home</a>
+
 
 
   <div id="g">
@@ -49,19 +50,31 @@ <h1 class="logo" aria-label="2048">2048</h1>
         <div class="btns">
           <button class="btn" id="nb" aria-label="New Game">New Game</button>
           <button class="btn sm" id="ub" aria-label="Undo last move">↩ Undo</button>
+          <button class="btn sm" id="pausebtn" aria-label="Pause game" style="display:none">⏸ Pause</button>
+          <button class="btn sm" id="hintbtn" aria-label="Hint">💡 Hint</button>
         </div>
         <div class="top-icons">
           <button class="icon-btn" id="stbtn" title="View Stats" aria-label="View Stats">📊</button>
           <button class="icon-btn" id="sdbtn" title="Toggle Sound" aria-label="Toggle Sound">🔊</button>
           <button class="icon-btn" id="tb" title="Toggle Theme" aria-label="Toggle Theme">☀</button>
+          <button class="icon-btn" id="howto-btn" title="How to Play" aria-label="How to Play">❓</button>
         </div>
       </div>
 
       <!-- Mode selector -->
       <div class="mode-row" role="group" aria-label="Game mode">
-  <button class="mode-btn active" data-mode="classic">Classic</button>
-  <button class="mode-btn" data-mode="timed">⏱ 60s</button>
-  <button class="mode-btn" data-mode="zen">Zen 5×5</button>
+  <div class="theme-row" role="group" aria-label="Tile theme">
+    <span class="theme-label">Theme:</span>
+    <button class="theme-btn active" data-theme="classic">Classic</button>
+    <button class="theme-btn" data-theme="ocean">🌊 Ocean</button>
+    <button class="theme-btn" data-theme="neon">⚡ Neon</button>
+    <button class="theme-btn" data-theme="retro">🎮 Retro</button>
+  </div>
+  <div class="mode-btns-row">
+    <button class="mode-btn active" data-mode="classic">Classic</button>
+    <button class="mode-btn" data-mode="timed">⏱ 60s</button>
+    <button class="mode-btn" data-mode="zen">Zen 5×5</button>
+  </div>
 </div>
 
       <!-- Timer bar (timed mode only) -->
@@ -86,14 +99,7 @@ <h1 class="logo" aria-label="2048">2048</h1>
   <div class="tiles-layer" id="tl" aria-hidden="true"></div>
 
   <!-- Game-over / win overlay -->
-  <div
-  id="ov"
-  class="ov"
-  style="display:none"
-  role="dialog"
-  aria-modal="true"
-  aria-label="Game result">
-</div>
+  <div id="ov" style="display:none" role="dialog" aria-modal="true" aria-label="Game result"></div>
 
   <!-- Achievement pop-up -->
   <div class="achievement" id="ach" role="alert">
@@ -117,6 +123,11 @@ <h2 class="stats-title">Your Stats</h2>
         <div class="stat-card"><div class="lbl">Best Tile</div><div class="val" id="st-tile">2</div></div>
       </div>
 
+      <div class="graph-section">
+        <div class="ach-list-title">Last 10 Games</div>
+        <canvas id="score-graph" style="width:100%;height:80px;"></canvas>
+      </div>
+
       <div class="ach-list">
         <div class="ach-list-title">Achievements</div>
         <div id="ach-badges"></div>
@@ -128,9 +139,111 @@ <h2 class="stats-title">Your Stats</h2>
 
 </div><!-- /.wrap -->
 
+      <p class="hint">Arrow keys · WASD · Swipe to play · <button id="howto-inline-btn" class="hint-link-btn" aria-label="How to Play">How to Play ❓</button></p>
     </div><!-- /#inner -->
   </div><!-- /#g -->
 
+  <!-- ===== How to Play Modal ===== -->
+  <div id="howto-modal" class="howto-overlay" role="dialog" aria-modal="true" aria-labelledby="howto-title" style="display:none">
+    <div class="howto-card">
+      <button class="howto-close" id="howto-close" aria-label="Close How to Play">✕</button>
+
+      <div class="howto-header">
+        <span class="howto-icon">🎮</span>
+        <h2 class="howto-title" id="howto-title">How to Play 2048</h2>
+      </div>
+
+      <!-- Goal -->
+      <div class="howto-section">
+        <h3 class="howto-section-title">🏆 Goal</h3>
+        <p class="howto-text">
+          Slide the tiles on the grid. When two tiles with the <strong>same number</strong> collide,
+          they <strong>merge into one</strong>. Reach the <strong class="howto-highlight">2048</strong> tile to win!
+        </p>
+      </div>
+
+      <!-- Controls -->
+      <div class="howto-section">
+        <h3 class="howto-section-title">🕹️ Controls</h3>
+
+        <div class="howto-controls-grid">
+          <!-- Keyboard -->
+          <div class="howto-control-block">
+            <p class="howto-control-label">⌨️ Keyboard</p>
+            <div class="howto-keys">
+              <div class="key-row">
+                <kbd class="key">↑</kbd>
+              </div>
+              <div class="key-row">
+                <kbd class="key">←</kbd>
+                <kbd class="key">↓</kbd>
+                <kbd class="key">→</kbd>
+              </div>
+              <p class="key-note">Arrow Keys or WASD</p>
+            </div>
+          </div>
+
+          <!-- Swipe -->
+          <div class="howto-control-block">
+            <p class="howto-control-label">📱 Mobile</p>
+            <div class="howto-swipe">
+              <div class="swipe-icon" aria-hidden="true">
+                <svg width="52" height="52" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <circle cx="24" cy="24" r="10" stroke="rgba(255,255,255,0.6)" stroke-width="2" fill="none"/>
+                  <line x1="24" y1="4"  x2="24" y2="14" stroke="rgba(255,255,255,0.8)" stroke-width="2.5" stroke-linecap="round"/>
+                  <line x1="24" y1="34" x2="24" y2="44" stroke="rgba(255,255,255,0.8)" stroke-width="2.5" stroke-linecap="round"/>
+                  <line x1="4"  y1="24" x2="14" y2="24" stroke="rgba(255,255,255,0.8)" stroke-width="2.5" stroke-linecap="round"/>
+                  <line x1="34" y1="24" x2="44" y2="24" stroke="rgba(255,255,255,0.8)" stroke-width="2.5" stroke-linecap="round"/>
+                  <polygon points="24,4 21,10 27,10" fill="rgba(255,255,255,0.8)"/>
+                  <polygon points="24,44 21,38 27,38" fill="rgba(255,255,255,0.8)"/>
+                  <polygon points="4,24 10,21 10,27" fill="rgba(255,255,255,0.8)"/>
+                  <polygon points="44,24 38,21 38,27" fill="rgba(255,255,255,0.8)"/>
+                </svg>
+              </div>
+              <p class="key-note">Swipe in any direction</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Pro Tips -->
+      <div class="howto-section">
+        <h3 class="howto-section-title">💡 Pro Tips</h3>
+        <ul class="howto-tips">
+          <li>Keep your <strong>highest tile</strong> in a corner.</li>
+          <li>Build a <strong>snake chain</strong> of descending values.</li>
+          <li>Use <strong>↩ Undo</strong> to recover from a bad move.</li>
+          <li>Try <strong>💡 Hint</strong> when you are stuck!</li>
+        </ul>
+      </div>
+
+      <!-- Game Modes -->
+      <div class="howto-section">
+        <h3 class="howto-section-title">⚙️ Game Modes</h3>
+        <div class="howto-modes">
+          <div class="howto-mode-card">
+            <span class="mode-emoji">🎯</span>
+            <strong>Classic</strong>
+            <span>4×4 grid, no time limit</span>
+          </div>
+          <div class="howto-mode-card">
+            <span class="mode-emoji">⏱️</span>
+            <strong>Timed 60s</strong>
+            <span>Race against the clock</span>
+          </div>
+          <div class="howto-mode-card">
+            <span class="mode-emoji">🧘</span>
+            <strong>Zen 5×5</strong>
+            <span>Bigger grid, relaxed play</span>
+          </div>
+        </div>
+      </div>
+
+      <button class="btn howto-start-btn" id="howto-close2">Got it — Let's Play! 🚀</button>
+    </div>
+  </div>
+  <!-- ===== / How to Play Modal ===== -->
+
   <script src="script.js"></script>
 </body>
 

public/2048_game/script.js

@@ -88,7 +88,12 @@ let stats = { best: 0, games: 0, wins: 0, bestTile: 2, earned: [] };
 function loadStats() {
   try {
     const s = localStorage.getItem('2048stats');
-    if (s) stats = JSON.parse(s);
+    if (s) {
+      const parsed = JSON.parse(s);
+      stats = { ...stats, ...parsed };
+      if (!stats.earned) stats.earned = [];
+      if (!stats.scoreHistory) stats.scoreHistory = [];
+    }
   } catch (_) {}
 }
 
@@ -275,24 +280,20 @@ function applyGridDimensions() {
 
 function slideRow(row) {
   const arr = row.filter((x) => x);
-  let pts = 0,
-    didMerge = false;
+  let pts = 0;
   for (let i = 0; i < arr.length - 1; i++) {
-    if (arr[i] === arr[i + 1] && !didMerge) {
+    if (arr[i] === arr[i + 1]) {
       arr[i] *= 2;
       pts += arr[i];
       arr.splice(i + 1, 1);
-      didMerge = true;
-    } else {
-      didMerge = false;
     }
   }
   while (arr.length < N) arr.push(0);
   return { row: arr, pts };
 }
 
 function rotateBoard(b, turns) {
-  let out = b;
+  let out = b.map(row => [...row]); // ensure deep copy to prevent mutation
   for (let t = 0; t < turns; t++) {
     const tmp = Array.from({ length: N }, () => Array(N).fill(0));
     for (let r = 0; r < N; r++) for (let c = 0; c < N; c++) tmp[c][N - 1 - r] = out[r][c];
@@ -917,7 +918,9 @@ document.addEventListener('visibilitychange', () => {
       paused = false;
       startTimer();
 
-      if (tfill) tfill.classList.remove('paused');
+
+      document.getElementById('tfill').classList.remove('paused');
+
 
       showToast('Timer resumed');
     }