feat: Port 'Number Sliding Puzzle' Game to the Web App

Author: nishtha-agarwal-211

README.md

@@ -234,7 +234,7 @@ deactivate
 
 ## 🌐 Web App Catalog
 
-The browser app currently exposes 38 projects:
+The browser app currently exposes 39 projects:
 
 ### Games
 - 2048 Game
@@ -255,6 +255,7 @@ The browser app currently exposes 38 projects:
 - Whack-a-Mole
 - Word Scramble
 - Spot the Difference
+- Number Sliding Puzzle
 
 ### Math
 - AP/GP/AGP/HP Recognizer
@@ -284,7 +285,6 @@ The browser app currently exposes 38 projects:
 
 These standalone Python project files do not have a browser counterpart yet and are good future-port candidates:
 
-- [games/Number-Sliding-Puzzle/Number-Sliding-Puzzle.py](games/Number-Sliding-Puzzle/Number-Sliding-Puzzle.py)
 - [games/Reverse-Hangman-Game/Reverse-Hangman-Game.py](games/Reverse-Hangman-Game/Reverse-Hangman-Game.py)
 - [games/War-Card-Game/War-Card-Game.py](games/War-Card-Game/War-Card-Game.py)
 - [math/Happy-Number/Happy-Number.py](math/Happy-Number/Happy-Number.py)

web-app/assets/banners/number-sliding-puzzle.webp

@@ -329,6 +329,25 @@
       <section class="projects-section" aria-label="Game Projects">
         <div class="container">
           <div class="projects-grid" id="projectsGrid">
+            <div
+              class="project-card"
+              data-category="games"
+              data-project="number-sliding-puzzle"
+            >
+              <img
+                class="card-banner"
+                src="assets/banners/number-sliding-puzzle.webp"
+                alt="Number Sliding Puzzle"
+                loading="lazy"
+              / loading="lazy">
+              <div class="card-actions">
+                <button class="btn-play" aria-label="Play Number Sliding Puzzle">Try It</button>
+              </div>
+
+              <h3>Number Sliding Puzzle</h3>
+              <p>Arrange numbers in ascending order by sliding them!</p>
+            </div>
+
             <div
               class="project-card"
               data-category="games"
@@ -712,6 +731,7 @@ <h3>Word Scramble</h3>
     <script defer src="js/projects/word-scramble.js"></script>
     <script defer src="js/projects/snake.js"></script>
     <script defer src="js/projects/spot-the-difference.js"></script>
+    <script defer src="js/projects/number-sliding-puzzle.js"></script>
     <script defer src="js/projects.js"></script>
     <script defer src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
     <script defer type="module" src="js/main.js"></script>

web-app/games.html

@@ -100,6 +100,18 @@ def generate_banner(name, category, filename):
             y = 120 + (i // 2) * 120
             v_draw.rounded_rectangle([x, y, x + 140, y + 90], radius=12, fill=(255,255,255,8), outline=color_accent, width=2)
             v_draw.text((x + 70, y + 45), val, fill=color_accent, anchor="mm")
+    elif "sliding" in n_lower or "puzzle" in n_lower:
+        # Draw a 3x3 grid with sliding numbers
+        for i in range(9):
+            if i == 8:  # Empty space
+                continue
+            r_idx = i // 3
+            c_idx = i % 3
+            x = 240 + c_idx * 110
+            y = 120 + r_idx * 75
+            val = str(i + 1)
+            v_draw.rounded_rectangle([x, y, x + 90, y + 60], radius=10, fill=(255,255,255,12), outline=color_accent, width=2)
+            v_draw.text((x + 45, y + 30), val, fill=color_accent, anchor="mm")
     elif "fibonacci" in n_lower:
         # Draw golden spiral
         cx, cy = 400, 225
@@ -534,6 +546,7 @@ def draw_o(ox, oy):
     ("Progress Tracker", "utilities", "progress-tracker.webp"),
     ("Reverse Hangman", "games", "reverse-hangman.webp"),
     ("Chess Game", "games", "chess.webp"),
+    ("Number Sliding Puzzle", "games", "number-sliding-puzzle.webp"),
 
     # MATH
     ("AP/GP/AGP/HP Recognizer", "math", "progression-recognizer.webp"),

web-app/generate_banners.py

@@ -872,6 +872,7 @@ <h3>Legal</h3>
     <script defer src="js/playground.js"></script>
     <script defer type="module" src="js/main.js"></script>
     <script defer src="js/hero-canvas.js"></script>
+    <script defer src="js/projects/number-sliding-puzzle.js"></script>
     <script>
       lucide.createIcons();
     </script>
@@ -885,6 +886,13 @@ <h3>Legal</h3>
         // ALL projects from your js/projects/ folder
         const projectsData = [
           // GAMES (20+)
+          {
+            project: "number-sliding-puzzle",
+            title: "Number Sliding Puzzle",
+            category: "games",
+            desc: "Arrange tiles in order by sliding them into empty space",
+            tags: "game,puzzle,sliding,numbers",
+          },
           {
             project: "2048-game",
             title: "2048 Game",

web-app/index.html

@@ -1,4 +1,4 @@
-// Project Registry
+// Project Registry
 // Each project's HTML and logic lives in its own file under js/projects/
 
 function getProjectHTML(projectName) {
@@ -1595,6 +1595,15 @@ function getProjectHTML(projectName) {
 
 const projectInstructions = {
   // GAMES
+  "number-sliding-puzzle": {
+    title: "🧩 How to Play Number Sliding Puzzle",
+    steps: [
+      "Use arrow keys (← ↑ → ↓) or click/tap on tiles next to the empty space to slide them.",
+      "Arrange the numbers in ascending order from 1 to 8, with the blank space at the bottom right.",
+      "A moves counter keeps track of your steps.",
+      "Click the Reset button to restart the game."
+    ]
+  },
   "2048-game": {
     title: "🎮 How to Play 2048",
     steps: [
@@ -3127,7 +3136,8 @@ function initializeProject(projectName) {
     "color-palette": "initColorPalette",
     "math-quiz": "initMathQuiz",
     "resume-analyzer": "initResumeAnalyzer",
-    "caesar-cipher": "initCaesarCipher"
+    "caesar-cipher": "initCaesarCipher",
+    "number-sliding-puzzle": "initNumberSlidingPuzzle"
   };
 
   const initializerName = initializers[projectName];