118 lines
4.6 KiB
HTML
118 lines
4.6 KiB
HTML
<!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">
|
|
<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>
|
|
</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>
|