fix: Restore projects display, theme toggle, favorites, and modal close

web-app/generate_banners.py

@@ -433,24 +433,30 @@ def draw_o(ox, oy):
     print(f"Generated HD banner: {filename}")
 
 # Project category directory mappings
+
 projects = [
     # GAMES
     ("2048 Game", "games", "2048-game.jpg"),
     ("Coin Flip", "games", "coin-flip.jpg"),
     ("Dice Rolling", "games", "dice-rolling.jpg"),
     ("Dots & Boxes AI", "games", "dots-boxes.jpg"),
-    ("Emoji Memory Game", "games", "emoji-memory.jpg"),
+    ("Emoji Memory Game", "games", "emoji-memory-game.jpg"),  # FIXED filename
     ("FLAMES Game", "games", "flames.jpg"),
     ("Flappy Game", "games", "flappy-game.jpg"),
     ("Hangman", "games", "hangman.jpg"),
     ("Math Quiz", "games", "math-quiz.jpg"),
     ("Number Guessing", "games", "number-guessing.jpg"),
     ("Password Forge", "games", "password-forge.jpg"),
     ("Rock Paper Scissors", "games", "rock-paper-scissor.jpg"),
-    ("Snake Game", "games", "snake-game.jpg"),
+    ("Snake Game", "games", "snake.jpg"),
     ("Whack-a-Mole", "games", "whack-a-mole.jpg"),
     ("Word Scramble", "games", "word-scramble.jpg"),
     ("Blackjack 21", "games", "blackjack21.jpg"),
+    ("Simon Says", "games", "simon-says.jpg"),
+    ("Tic Tac Toe", "games", "tic-tac-toe.jpg"),
+    ("Spot the Difference", "games", "spot-the-difference.jpg"),
+    ("Productive Pet", "utilities", "productive-pet.jpg"),
+    ("Progress Tracker", "utilities", "progress-tracker.jpg"),
 
     # MATH
     ("AP/GP/AGP/HP Recognizer", "math", "progression-recognizer.jpg"),
@@ -463,6 +469,9 @@ def draw_o(ox, oy):
     ("Pascal's Triangle", "math", "pascal-triangle.jpg"),
     ("Prime Analyzer", "math", "prime-analyzer.jpg"),
     ("Projectile Motion", "math", "projectile-motion.jpg"),
+    ("Binary Search", "math", "binary-search.jpg"),
+    ("Bubble Sort", "math", "bubble-sort.jpg"),
+    ("Tower of Hanoi", "math", "tower-of-hanoi.jpg"),
 
     # UTILITIES
     ("Morse Code", "utilities", "morse-code.jpg"),
@@ -472,7 +481,6 @@ def draw_o(ox, oy):
     ("Color Palette Suggestor", "utilities", "color-palette.jpg"),
     ("AI Resume Analyzer", "utilities", "resume-analyzer.jpg"),
     ("Caesar Cipher", "utilities", "caesar-cipher.jpg"),
-    ("Simon Says", "games", "simon-says.jpg"),
 ]
 
 # Run generation

web-app/js/main.js

@@ -1644,4 +1644,3 @@ if (progressBar) {
 
   // Initial card filtering state update
   updateProjectVisibility(currentCategory, currentSearchQuery);
-});

web-app/js/projects/tic-tac-toe.js

@@ -545,27 +545,27 @@ function initTicTacToe() {
   }
 
   // ── SCREEN ──
-  function showScreen(id) {
+ function showScreen(id) {
     document.querySelectorAll(".screen").forEach(s => {
-      s.classList.toggle("screen--active", s.id === id);
+        s.classList.toggle("screen--active", s.id === id);
     });
   }
 
   // ── PILLS ──
-  document.getElementById("diff-group").style.display = "none";
+  const diffGroup = document.getElementById("diff-group");
+  if (diffGroup) diffGroup.style.display = "none";
 
   function initPills(groupId, cb) {
     const grp = document.getElementById(groupId);
     if (!grp) return;
     grp.querySelectorAll(".pill").forEach(btn => {
-      btn.addEventListener("click", () => {
-        grp.querySelectorAll(".pill").forEach(b => b.classList.remove("pill--on"));
-        btn.classList.add("pill--on");
-        cb(btn.dataset.val);
-      });
+        btn.addEventListener("click", () => {
+            grp.querySelectorAll(".pill").forEach(b => b.classList.remove("pill--on"));
+            btn.classList.add("pill--on");
+            cb(btn.dataset.val);
+        });
     });
   }
-
   initPills("mode-group", val => {
     mode = val;
     const diffGrp = document.getElementById("diff-group");
@@ -605,9 +605,7 @@ function initTicTacToe() {
   // ── EVENT LISTENERS ──
   document.getElementById("start-btn").addEventListener("click", () => {
     p1 = document.getElementById("p1-input").value.trim() || "Player 1";
-    p2 = mode === "ai"
-      ? "Computer "
-      : (document.getElementById("p2-input").value.trim() || "Player 2");
+    p2 = mode === "ai" ? "Computer" : (document.getElementById("p2-input").value.trim() || "Player 2");
     scores = { p1: 0, p2: 0, draws: 0 };
     round = 1;
     buildBoard();