Search

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%);

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) -->

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