From eb0a5aab05badde22effb77beffc4d845fb3fb53 Mon Sep 17 00:00:00 2001
From: Joey Yakimowich-Payne <jyapayne@pm.me>
Date: Thu, 17 Apr 2025 21:49:04 -0600
Subject: [PATCH] Search

---
 beango/css/beango.css |  9 +++++++++
 beango/index.html     |  6 ++++++
 beango/js/beango.js   | 29 +++++++++++++++++++++++++++++
 3 files changed, 44 insertions(+)

diff --git a/beango/css/beango.css b/beango/css/beango.css
index 5b6c2ba..cf5f6d8 100644
--- a/beango/css/beango.css
+++ b/beango/css/beango.css
@@ -82,6 +82,15 @@ body {
     max-width: 100%;
 }
 
+/* NEW: Style for highlighted search results */
+.bingo-cell.highlighted {
+    border-color: #3b82f6; /* Tailwind blue-500 */
+    border-width: 3px;
+    transform: scale(1.05);
+    box-shadow: 0 0 15px rgba(59, 130, 246, 0.6); /* Stronger blue glow */
+    z-index: 10; /* Ensure highlighted cells are visually on top if overlapping happens during scale */
+}
+
 /* Add darken filter on hover */
 .bingo-cell:hover {
     filter: brightness(85%);
diff --git a/beango/index.html b/beango/index.html
index 81ee1c3..651e5fd 100644
--- a/beango/index.html
+++ b/beango/index.html
@@ -52,6 +52,12 @@
                 </svg>
             </button>
         </div>
+
+        <!-- Search Bar -->
+        <div class="mb-4 w-full max-w-xl">
+            <label for="search-input" class="sr-only">Search Items</label>
+            <input type="search" id="search-input" placeholder="Search items on board..." class="w-full px-4 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500">
+        </div>
     </div>
 
     <!-- Configuration Pane (Right Side) -->
diff --git a/beango/js/beango.js b/beango/js/beango.js
index ed0e206..d8fa247 100644
--- a/beango/js/beango.js
+++ b/beango/js/beango.js
@@ -1101,6 +1101,35 @@ function loadFromLocalStorage() {
         applyBoardBgStyle();
     });
 
+    // --- Search Listener ---
+    const searchInput = document.getElementById('search-input');
+    if (searchInput) {
+        searchInput.addEventListener('input', () => {
+            const searchTerm = searchInput.value.trim().toLowerCase();
+            const cells = document.querySelectorAll('#bingo-board .bingo-cell');
+
+            // Split search term into words
+            const searchWords = searchTerm.split(/\s+/).filter(word => word.length > 0);
+
+            cells.forEach(cell => {
+                const textSpan = cell.querySelector('.bingo-cell-text');
+                let isMatch = false;
+                if (textSpan && searchWords.length > 0) {
+                    const cellText = textSpan.textContent.trim().toLowerCase();
+                    // Check if ALL search words are included in the cell text
+                    isMatch = searchWords.every(word => cellText.includes(word));
+                }
+
+                // Add or remove highlight based on match status
+                if (isMatch) {
+                    cell.classList.add('highlighted');
+                } else {
+                    cell.classList.remove('highlighted');
+                }
+            });
+        });
+    }
+
     // --- Other Listeners ---
     window.addEventListener('resize', equalizeCellSizes);
     equalizeCellSizes(); // Initial call after load