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

refactored categories code, now a seperate modifiable file

Browse Source 
style changes and refinements
This commit is contained in:
Brandon Brunson
2025-06-04 15:06:27 -07:00
parent 6c88ec3b15
commit 9bf808c761
7 changed files with 522 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
public/index.html
View File

@@ -26,59 +26,8 @@
</div>
<!-- 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>
<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">
<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">
<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>
<div class="fruit" draggable="true" data-fruit="Mike Ross">Mike Ross</div>
</div>
</div>
<div class="sidebar" id="sidebar">
<!-- Categories will be dynamically loaded here -->
</div>
</div>
@@ -110,6 +59,31 @@
});
mapEl.appendChild(rowEl);
});
// Dynamically load categories and fruits
async function loadCategories() {
const sidebar = document.getElementById('sidebar');
const res = await fetch('/api/categories');
const categories = await res.json();
sidebar.innerHTML = '';
categories.forEach(cat => {
const catDiv = document.createElement('div');
catDiv.className = 'categories';
catDiv.innerHTML = `
<div class="category-header">
<h4>${cat.name}</h4>
<button class="category-toggle" type="button">▼</button>
</div>
<div class="category-content">
${cat.fruits.map(fruit =>
`<div class="fruit" draggable="true" data-fruit="${fruit}">${fruit}</div>`
).join('')}
</div>
`;
sidebar.appendChild(catDiv);
});
}
loadCategories();
</script>
<script src="/socket.io/socket.io.js"></script>
<script src="script.js"></script>