brandon/cuberoo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added dropdowns to teams

Browse Source
This commit is contained in:
Brandon Brunson
2025-06-04 14:03:41 -07:00
parent cfbf54040c
commit 6c88ec3b15
3 changed files with 111 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
public/index.html
View File

@@ -28,36 +28,56 @@
<!-- sidebar with the categories -->
<div class="sidebar">
<div class="categories">
<h4>Ted's Team</h4>
<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>
<div class="fruit" draggable="true" data-fruit="Seth Lima">Seth Lima</div>
<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 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>
<div class="fruit" draggable="true" data-fruit="Seth Lima">Seth Lima</div>
<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">
<h4>Ariel's Team</h4>
<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>
<div class="fruit" draggable="true" data-fruit="Shawn Spencer">Shawn Spencer</div>
<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 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>
<div class="fruit" draggable="true" data-fruit="Shawn Spencer">Shawn Spencer</div>
<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">
<h4>Elsa's Team</h4>
<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 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">
<h4>Ana's Team</h4>
<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>
<div class="fruit" draggable="true" data-fruit="Mike Ross">Mike Ross</div>
<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>
<div class="fruit" draggable="true" data-fruit="Mike Ross">Mike Ross</div>
</div>
</div>
</div>
</div>

49
public/script.js
View File

@@ -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 ? '►' : '▼';
});
}
});

28
public/style.css
View File

@@ -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;
}