Merge branch 'main' into fix/project-content-unavailable

Author: steam-bell-92

web-app/assets/banners/pattern-recall-game.webp

@@ -158,14 +158,14 @@
               >
                 <div class="spinner"></div>
               </div>
-              <div class="recent-searches-section" id="recentSearchesSection">
+              <div class="recent-searches-section" id="dropdownRecentSearchesSection">
                 <div class="dropdown-section-title recent-searches-header">
                   <span class="recent-searches-heading">
                     <i class="fas fa-history" aria-hidden="true"></i>
                     Recent Searches
                   </span>
                 </div>
-                <div class="recent-searches-chips" id="recentSearchesList" role="list"></div>
+                <div class="recent-searches-chips" id="dropdownRecentSearchesList" role="list"></div>
               </div>
               <div
                 class="results-section"
@@ -636,6 +636,25 @@ <h3>Sudoku Solver &amp; Game</h3>
               <p>Interactive Sudoku puzzle with levels and visual backtracking solver.</p>
             </div>
 
+            <div
+              class="project-card"
+              data-category="games"
+              data-project="queens-logic-puzzle"
+            >
+              <img
+                class="card-banner"
+                src="assets/banners/queens-logic-puzzle.webp"
+                alt="Queens Logic Puzzle"
+                loading="lazy"
+              />
+              <div class="card-actions">
+                <button class="btn-play" aria-label="Play Queens Logic Puzzle">Try It</button>
+              </div>
+
+              <h3>Queens Logic Puzzle</h3>
+              <p>Place queens following row, column, region, and adjacency rules!</p>
+            </div>
+
 
             <div
               class="project-card"
@@ -844,6 +863,7 @@ <h3>War Card Game</h3>
     <script defer src="js/projects/word-scramble.js"></script>
     <script defer src="js/projects/spot-the-difference.js"></script>
     <script defer src="js/projects/sudoku-game.js"></script>
+    <script defer src="js/projects/queens-logic-puzzle.js"></script>
     <script defer src="js/projects/number-sliding-puzzle.js"></script>
     <script defer src="js/projects/chess.js"></script>
     <script defer src="js/projects/war-card-game.js"></script>

web-app/assets/banners/queens-logic-puzzle.svg

@@ -427,6 +427,75 @@ def draw_die(ox, oy):
             x = gx_min + r * 80 + 40
             y = gy_min + c * 80 + 40
             v_draw.text((x, y), d, fill=color_accent, anchor="mm")
+    elif "queens" in n_lower or "logic" in n_lower:
+        # Draw colored irregular regions with queens - matching the reference design
+        cx, cy = 400, 225
+        
+        # Region colors inspired by the reference image (matching glassmorphism theme)
+        region_colors_queens = [
+            (219, 112, 147),    # Pink/Magenta
+            (70, 130, 180),     # Steel Blue
+            (144, 238, 144),    # Light Green
+            (255, 215, 0),      # Gold/Yellow
+            (186, 85, 211),     # Medium Orchid
+            (135, 206, 250)     # Light Sky Blue
+        ]
+        
+        # Define irregular regions (6 regions, roughly 6 cells each)
+        # Each region is a list of (row, col) coordinates
+        regions_map = {
+            0: [(0, 0), (0, 1), (0, 2), (1, 0), (1, 1), (1, 2)],           # Pink - top-left
+            1: [(0, 3), (0, 4), (0, 5), (1, 3), (1, 4), (1, 5)],           # Blue - top-right
+            2: [(2, 0), (2, 1), (3, 0), (3, 1), (4, 0), (4, 1)],           # Green - left
+            3: [(2, 2), (2, 3), (3, 2), (3, 3), (4, 2), (4, 3)],           # Gold - center
+            4: [(2, 4), (2, 5), (3, 4), (3, 5), (4, 4), (4, 5)],           # Purple - right
+            5: [(5, 0), (5, 1), (5, 2), (5, 3), (5, 4), (5, 5)]            # Light Blue - bottom
+        }
+        
+        grid_size = 6
+        cell_w = 50
+        cell_h = 50
+        grid_x = cx - (grid_size * cell_w) // 2
+        grid_y = cy - (grid_size * cell_h) // 2 + 20
+        
+        # Draw each cell with region background
+        for region_id, cells in regions_map.items():
+            region_col = region_colors_queens[region_id]
+            for r, c in cells:
+                x = grid_x + c * cell_w
+                y = grid_y + r * cell_h
+                
+                # Draw filled cell with semi-transparent region color
+                v_draw.rectangle(
+                    [x + 1, y + 1, x + cell_w - 1, y + cell_h - 1],
+                    fill=(*region_col, 100),
+                    outline=(*region_col, 150),
+                    width=2
+                )
+        
+        # Draw grid borders
+        for r in range(grid_size + 1):
+            v_draw.line([(grid_x, grid_y + r * cell_h), (grid_x + grid_size * cell_w, grid_y + r * cell_h)], 
+                        fill=(255, 255, 255, 80), width=1)
+        for c in range(grid_size + 1):
+            v_draw.line([(grid_x + c * cell_w, grid_y), (grid_x + c * cell_w, grid_y + grid_size * cell_h)], 
+                        fill=(255, 255, 255, 80), width=1)
+        
+        # Place queens on some cells (solution-like pattern)
+        queen_positions = [
+            (0, 1, 0),  # Region 0 (Pink)
+            (1, 4, 1),  # Region 1 (Blue)
+            (2, 1, 2),  # Region 2 (Green)
+            (3, 3, 3),  # Region 3 (Gold)
+            (4, 4, 4),  # Region 4 (Purple)
+            (5, 2, 5)   # Region 5 (Light Blue)
+        ]
+        
+        for region_id, c, r in queen_positions:
+            x = grid_x + c * cell_w + cell_w // 2
+            y = grid_y + r * cell_h + cell_h // 2
+            # Draw glowing queen crown emoji
+            v_draw.text((x, y), "👑", fill=(255, 255, 255, 255), anchor="mm", font=font_subtitle)
     elif "blackjack" in n_lower:
         # Playing cards
         def draw_card(x, y, val):
@@ -513,6 +582,8 @@ def draw_o(ox, oy):
         v_draw.ellipse([cx-30, cy-30, cx+30, cy+30], outline=color_accent, width=3)
         v_draw.ellipse([cx-15, cy-15, cx+15, cy+15], outline=color_accent, width=2)
         v_draw.text((cx, cy), "AI", fill=color_accent, anchor="mm")
+        # Add "REVERSE" text
+        v_draw.text((400, 280), "REVERSE", fill=color_accent, anchor="mm", font=font_title)
     elif "unit converter" in n_lower:
         cx, cy = 400, 225
 
@@ -670,6 +741,37 @@ def draw_o(ox, oy):
         for x, y in [(430, 160), (340, 280), (460, 280)]:
             v_draw.line([(x-6, y-6), (x+6, y+6)], fill=color_accent_dim, width=2)
             v_draw.line([(x+6, y-6), (x-6, y+6)], fill=color_accent_dim, width=2)
+    elif "sorting" in n_lower or "visualizer" in n_lower:
+        # Sorting bars visualization
+        cx, cy = 400, 225
+        # Draw sorting bars
+        bar_values = [30, 50, 20, 80, 40, 60, 10, 70, 35, 55, 25, 75]
+        bar_width = 30
+        total_width = len(bar_values) * (bar_width + 6)
+        start_x = cx - total_width // 2
+        for i, val in enumerate(bar_values):
+            x = start_x + i * (bar_width + 6)
+            height = val * 1.2
+            y = cy + 60 - height
+            # Different colors for different heights
+            if val > 60:
+                color = (239, 68, 68)  # Red for tall
+            elif val > 35:
+                color = (245, 158, 11)  # Yellow for medium
+            else:
+                color = (16, 185, 129)  # Green for short
+            v_draw.rounded_rectangle(
+                [x, y, x + bar_width, cy + 60],
+                radius=4,
+                fill=color,
+                outline=color_accent_dim,
+                width=1
+            )
+        # Add sorting arrows
+        v_draw.line([(cx - 100, cy - 80), (cx + 100, cy - 80)], fill=color_accent, width=2)
+        v_draw.polygon([(cx + 100, cy - 85), (cx + 115, cy - 80), (cx + 100, cy - 75)], fill=color_accent)
+        # Text
+        v_draw.text((400, 300), "SORTING", fill=color_accent, anchor="mm", font=font_title)
     else:
         # Default nice abstract waves
         points = []
@@ -736,7 +838,7 @@ def draw_o(ox, oy):
     ("Chess Game", "games", "chess.webp"),
     ("Number Sliding Puzzle", "games", "number-sliding-puzzle.webp"),
     ("War Card Game", "games", "war-card-game.webp"),
-    ("Minesweeper", "games", "minesweeper.webp"),
+    ("Queens Logic Puzzle", "games", "queens-logic-puzzle.webp"),
 
     # MATH
     ("AP/GP/AGP/HP Recognizer", "math", "progression-recognizer.webp"),