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

inital commit

Browse Source
This commit is contained in:
Brandon Brunson
2025-05-28 04:04:41 -07:00
commit c7ee97d6a9
9 changed files with 3263 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
public/index.html Normal file
View File

@@ -0,0 +1,97 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<title>Cuberoo</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header class="header">
<div class="logo">
<img src="logo.png" alt="Logo" /> <!-- put it in public -->
<span>Cuberoo</span>
</div>
</header>
<div class="container">
<!-- wrapper for the draggable map class -->
<div id="mapWrapper" class="map-wrapper">
<!-- class for the squares -->
<div id="map" class="map"></div>
<!-- zoom controls -->
<div id="zoomControls">
<button id="zoomIn">+</button>
<button id="zoomOut">-</button>
</div>
</div>
<!-- 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>
<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>
<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>
<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>
</div>
</div>
<script>
// map layout. put numbers for the square IDs. null will be empty i guess.
const mapData = [
['1', '2', null, '13', '14'],
['3', '4', null, '15', '16'],
['5', '6', null, '17', '18'],
['7', '8', null, '19', '20'],
['9', '10', null, '21', '22'],
['11', '12', null, '23', '24']
];
const mapEl = document.getElementById('map');
mapData.forEach(row => {
const rowEl = document.createElement('div');
rowEl.classList.add('map-row');
row.forEach(cell => {
if (cell) {
const squareEl = document.createElement('div');
squareEl.classList.add('square');
squareEl.dataset.squareId = cell;
rowEl.appendChild(squareEl);
} else {
const emptyEl = document.createElement('div');
emptyEl.classList.add('empty');
rowEl.appendChild(emptyEl);
}
});
mapEl.appendChild(rowEl);
});
</script>
<script src="/socket.io/socket.io.js"></script>
<script src="script.js"></script>
</body>
</html>