From 6c88ec3b155bd686e4ebef596a23323254929c01 Mon Sep 17 00:00:00 2001 From: brandon Date: Wed, 4 Jun 2025 14:03:41 -0700 Subject: [PATCH] added dropdowns to teams --- public/index.html | 68 ++++++++++++++++++++++++++++++----------------- public/script.js | 55 +++++++++++++++++++++++++++----------- public/style.css | 28 +++++++++++++++++++ 3 files changed, 111 insertions(+), 40 deletions(-) diff --git a/public/index.html b/public/index.html index a712e7e..abb5a8f 100644 --- a/public/index.html +++ b/public/index.html @@ -28,36 +28,56 @@
-

Ted's Team

-
Brandon Brunson
-
Eric Smithson
-
John Hammer
-
Seth Lima
-
Ed Edington
-
Rick Sanchez
+
+

Ted's Team

+ +
+
+
Brandon Brunson
+
Eric Smithson
+
John Hammer
+
Seth Lima
+
Ed Edington
+
Rick Sanchez
+
-

Ariel's Team

-
Jerry Smith
-
Charles Carmichael
-
Michael Westen
-
Shawn Spencer
-
Eliot Alderson
-
Brian D
+
+

Ariel's Team

+ +
+
+
Jerry Smith
+
Charles Carmichael
+
Michael Westen
+
Shawn Spencer
+
Eliot Alderson
+
Brian D
+
-

Elsa's Team

-
John Dorian
-
Harvey Spectre
-
Juliet O'Hara
-
Fiona Glenanne
+
+

Elsa's Team

+ +
+
+
John Dorian
+
Harvey Spectre
+
Juliet O'Hara
+
Fiona Glenanne
+
-

Ana's Team

-
Neal Caffrey
-
Chuck Bartowski
-
Gus Burton
-
Mike Ross
+
+

Ana's Team

+ +
+
+
Neal Caffrey
+
Chuck Bartowski
+
Gus Burton
+
Mike Ross
+
diff --git a/public/script.js b/public/script.js index b23ee36..a2f9eb9 100644 --- a/public/script.js +++ b/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 ? '►' : '▼'; + }); + } +}); diff --git a/public/style.css b/public/style.css index 4eea9cf..7c53e2b 100644 --- a/public/style.css +++ b/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 { @@ -203,4 +204,31 @@ body, html { text-align: center; 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; } \ No newline at end of file