92 lines
2.8 KiB
HTML
92 lines
2.8 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" id="sidebar">
|
|
<!-- Categories will be dynamically loaded here -->
|
|
</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);
|
|
});
|
|
|
|
// 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>
|
|
</body>
|
|
</html>
|