added dropdowns to teams

public/index.html

@@ -28,7 +28,11 @@
     <!-- sidebar with the categories -->
     <div class="sidebar">
       <div class="categories">
+        <div class="category-header">
           <h4>Ted's Team</h4>
+          <button class="category-toggle" type="button">▼</button>
+        </div>
+        <div class="category-content">
           <div class="fruit" draggable="true" data-fruit="Brandon Brunson">Brandon Brunson</div>
           <div class="fruit" draggable="true" data-fruit="Eric Smithson">Eric Smithson</div>
           <div class="fruit" draggable="true" data-fruit="John Hammer">John Hammer</div>
@@ -36,8 +40,13 @@
           <div class="fruit" draggable="true" data-fruit="Ed Edington">Ed Edington</div>
           <div class="fruit" draggable="true" data-fruit="Rick Sanchez">Rick Sanchez</div>
         </div>
+      </div>
       <div class="categories">
+        <div class="category-header">
           <h4>Ariel's Team</h4>
+          <button class="category-toggle" type="button">▼</button>
+        </div>
+        <div class="category-content">
           <div class="fruit" draggable="true" data-fruit="Jerry Smith">Jerry Smith</div>
           <div class="fruit" draggable="true" data-fruit="Charles Carmichael">Charles Carmichael</div>
           <div class="fruit" draggable="true" data-fruit="Michael Westen">Michael Westen</div>
@@ -45,15 +54,25 @@
           <div class="fruit" draggable="true" data-fruit="Eliot Alderson">Eliot Alderson</div>
           <div class="fruit" draggable="true" data-fruit="Brian D">Brian D</div>
         </div>
+      </div>
       <div class="categories">
+        <div class="category-header">
           <h4>Elsa's Team</h4>
+          <button class="category-toggle" type="button">▼</button>
+        </div>
+        <div class="category-content">
           <div class="fruit" draggable="true" data-fruit="John Dorian">John Dorian</div>
           <div class="fruit" draggable="true" data-fruit="Harvey Spectre">Harvey Spectre</div>
           <div class="fruit" draggable="true" data-fruit="Juliet O'Hara">Juliet O'Hara</div>
           <div class="fruit" draggable="true" data-fruit="Fiona Glenanne">Fiona Glenanne</div>
         </div>
+      </div>
       <div class="categories">
+        <div class="category-header">
           <h4>Ana's Team</h4>
+          <button class="category-toggle" type="button">▼</button>
+        </div>
+        <div class="category-content">
           <div class="fruit" draggable="true" data-fruit="Neal Caffrey">Neal Caffrey</div>
           <div class="fruit" draggable="true" data-fruit="Chuck Bartowski">Chuck Bartowski</div>
           <div class="fruit" draggable="true" data-fruit="Gus Burton">Gus Burton</div>
@@ -61,6 +80,7 @@
         </div>
       </div>
     </div>
+  </div>
 
   <script>
     // map layout. put numbers for the square IDs. null will be empty i guess.

public/script.js

@@ -299,16 +299,17 @@ 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';
@@ -319,35 +320,44 @@ function updateHighlightedBorders() {
     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 ? '►' : '▼';
+    });
+  }
+});

public/style.css

@@ -26,6 +26,7 @@ body, html {
   height: 100vh;       /* take up entire vertical height */
   background: rgb(19, 19, 19);
   overflow-y: auto;    /* make it scrollable */
+  width: 12%;       /* fixed width */
 }
 
 .sidebar::-webkit-scrollbar {
@@ -204,3 +205,30 @@ body, html {
     width: 100%;
     height: 100%;
 }
+
+.category-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 10px;
+}
+
+.category-header h4 {
+  margin: 0;
+  padding: 0;
+  flex: 1;
+  text-align: left;
+}
+
+.category-toggle {
+  margin-left: 10px;
+  background: none;
+  border: none;
+  color: white;
+  font-size: 1.1em;
+  cursor: pointer;
+  padding: 0 6px;
+  height: 28px;
+  align-items: center;
+  display: flex;
+}