added dropdowns to teams

public/script.js

@@ -299,55 +299,65 @@ document.querySelectorAll('.categories').forEach(category => {
 function updateHighlightedBorders() {
   const squares = document.querySelectorAll('.square');
   squares.forEach(sq => {
-    // Reset any inline style if not highlighted
+    // Reset any inline style and data if not highlighted
     if (!sq.classList.contains('highlight')) {
       sq.style.borderLeftColor = '';
       sq.style.borderRightColor = '';
       sq.style.borderTopColor = '';
       sq.style.borderBottomColor = '';
+      sq.removeAttribute('data-glow-connected');
       return;
     }
-    
-    // set all borders to the highlight color. change this to change the color
+
+    // set all borders to the highlight color
     sq.style.borderLeftColor = '#d103f9';
     sq.style.borderRightColor = '#d103f9';
     sq.style.borderTopColor = '#d103f9';
     sq.style.borderBottomColor = '#d103f9';
-    
+
     // find the parent row and index
     const parentRow = sq.parentElement; // .map-row
     const cells = Array.from(parentRow.children);
     const idx = cells.indexOf(sq);
-    
-    // check left neighbor in the same row
-    if (idx > 0 && cells[idx - 1].classList.contains('square') && cells[idx - 1].classList.contains('highlight')) {
-      sq.style.borderLeftColor = 'transparent';
-    }
-    // check right neighbor in the same row
-    if (idx < cells.length - 1 && cells[idx + 1].classList.contains('square') && cells[idx + 1].classList.contains('highlight')) {
-      sq.style.borderRightColor = 'transparent';
-    }
-    
+
     // for top and bottom, get the row index from map (#map container)
     const map = parentRow.parentElement;
     const rows = Array.from(map.children);
     const rowIndex = rows.indexOf(parentRow);
-    // check top neighbor (like same cell index in previous row)
+
+    // Track which sides are connected
+    let connected = '';
+
+    // check left neighbor in the same row
+    if (idx > 0 && cells[idx - 1].classList.contains('square') && cells[idx - 1].classList.contains('highlight')) {
+      sq.style.borderLeftColor = 'transparent';
+      connected += 'L';
+    }
+    // check right neighbor in the same row
+    if (idx < cells.length - 1 && cells[idx + 1].classList.contains('square') && cells[idx + 1].classList.contains('highlight')) {
+      sq.style.borderRightColor = 'transparent';
+      connected += 'R';
+    }
+    // check top neighbor
     if (rowIndex > 0) {
       const topRow = rows[rowIndex - 1];
       const topCells = Array.from(topRow.children);
       if (topCells[idx] && topCells[idx].classList.contains('square') && topCells[idx].classList.contains('highlight')) {
         sq.style.borderTopColor = 'transparent';
+        connected += 'T';
       }
     }
-    // check bottom neighbor (like same cell index in next row)
+    // check bottom neighbor
     if (rowIndex < rows.length - 1) {
       const bottomRow = rows[rowIndex + 1];
       const bottomCells = Array.from(bottomRow.children);
       if (bottomCells[idx] && bottomCells[idx].classList.contains('square') && bottomCells[idx].classList.contains('highlight')) {
         sq.style.borderBottomColor = 'transparent';
+        connected += 'B';
       }
     }
+    // Set a data attribute for CSS to use for glow masking
+    sq.setAttribute('data-glow-connected', connected);
   });
 }
 
@@ -373,3 +383,16 @@ socket.on('update', data => {
     }, 1000);
   }
 });
+
+// Collapsible categories logic
+document.querySelectorAll('.categories').forEach(category => {
+  const toggleBtn = category.querySelector('.category-header .category-toggle');
+  const content = category.querySelector('.category-content');
+  if (toggleBtn && content) {
+    toggleBtn.addEventListener('click', () => {
+      const isOpen = content.style.display !== 'none';
+      content.style.display = isOpen ? 'none' : '';
+      toggleBtn.textContent = isOpen ? '►' : '▼';
+    });
+  }
+});