Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| fa878985f6 |
4
.gitignore
vendored
4
.gitignore
vendored
@@ -1,3 +1,3 @@
|
|||||||
node_modules/
|
node_modules/
|
||||||
positions.db
|
positions.db
|
||||||
.DS_Store
|
.DS_Store
|
||||||
@@ -6,18 +6,18 @@
|
|||||||
"Eric Smithson",
|
"Eric Smithson",
|
||||||
"Seth Lima",
|
"Seth Lima",
|
||||||
"Rick Sanchez",
|
"Rick Sanchez",
|
||||||
"John Hammer"
|
"Jerry Smith"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"name": "Ariel's Team",
|
"name": "Ariel's Team",
|
||||||
"fruits": [
|
"fruits": [
|
||||||
"Jerry Smith",
|
|
||||||
"Charles Carmichael",
|
"Charles Carmichael",
|
||||||
"Michael Westen",
|
"Michael Westen",
|
||||||
"Shawn Spencer",
|
"Shawn Spencer",
|
||||||
"Eliot Alderson",
|
"Eliot Alderson",
|
||||||
"Brian D"
|
"Brian D",
|
||||||
|
"John Hammer"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
4990
package-lock.json
generated
4990
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
38
package.json
38
package.json
@@ -1,19 +1,19 @@
|
|||||||
{
|
{
|
||||||
"name": "kitchen-organizer",
|
"name": "kitchen-organizer",
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
"main": "server.js",
|
"main": "server.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"test": "echo \"Error: no test specified\" && exit 1",
|
"test": "echo \"Error: no test specified\" && exit 1",
|
||||||
"start": "node server.js"
|
"start": "node server.js"
|
||||||
},
|
},
|
||||||
"keywords": [],
|
"keywords": [],
|
||||||
"author": "",
|
"author": "",
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"description": "",
|
"description": "",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"body-parser": "^2.2.0",
|
"body-parser": "^2.2.0",
|
||||||
"express": "^5.1.0",
|
"express": "^5.1.0",
|
||||||
"socket.io": "^4.8.1",
|
"socket.io": "^4.8.1",
|
||||||
"sqlite3": "^5.1.7"
|
"sqlite3": "^5.1.7"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
BIN
positions.db
BIN
positions.db
Binary file not shown.
90
public/history.html
Normal file
90
public/history.html
Normal file
@@ -0,0 +1,90 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
|
||||||
|
<title>Cuberoo History</title>
|
||||||
|
<link rel="stylesheet" href="style.css" />
|
||||||
|
<style>
|
||||||
|
html, body { height: 100%; margin: 0; padding: 0; background: #181818; color: white; overflow: auto !important; }
|
||||||
|
body { min-height: 100vh; }
|
||||||
|
.history-list { max-width: 600px; margin: 40px auto; background: #181818; border-radius: 10px; box-shadow: 0 4px 32px #000b; padding: 24px; }
|
||||||
|
.history-item { padding: 14px 0; border-bottom: 1px solid #333; display: flex; justify-content: space-between; align-items: center; }
|
||||||
|
.history-item:last-child { border-bottom: none; }
|
||||||
|
.history-action { color: #d103f9; font-weight: bold; }
|
||||||
|
.history-timestamp { color: #aaa; font-size: 0.95em; margin-right: 18px; }
|
||||||
|
.revert-btn { background: #d103f9; color: white; border: none; border-radius: 6px; padding: 6px 18px; font-size: 1em; cursor: pointer; transition: background 0.15s; }
|
||||||
|
.revert-btn:hover { background: #a002b6; }
|
||||||
|
.history-header { text-align: center; color: #d103f9; font-size: 2em; margin-bottom: 24px; }
|
||||||
|
.back-link { color: #d103f9; text-decoration: none; font-size: 1.1em; display: block; margin-bottom: 18px; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="history-list">
|
||||||
|
<a href="index.html" class="back-link">← Back to Cuberoo</a>
|
||||||
|
<div class="history-header">Revision History</div>
|
||||||
|
<div id="historyContainer">Loading...</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
async function loadHistory() {
|
||||||
|
const res = await fetch('/api/history');
|
||||||
|
const history = await res.json();
|
||||||
|
const container = document.getElementById('historyContainer');
|
||||||
|
if (!Array.isArray(history) || history.length === 0) {
|
||||||
|
container.innerHTML = '<div style="color:#aaa;">No history yet.</div>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
container.innerHTML = '';
|
||||||
|
history.forEach((item, idx) => {
|
||||||
|
const div = document.createElement('div');
|
||||||
|
div.className = 'history-item';
|
||||||
|
div.innerHTML = `
|
||||||
|
<span class="history-timestamp">${new Date(item.timestamp).toLocaleString()}</span>
|
||||||
|
<span class="history-action">${item.action}</span>
|
||||||
|
<button class="revert-btn" data-idx="${idx}">Revert</button>
|
||||||
|
`;
|
||||||
|
container.appendChild(div);
|
||||||
|
});
|
||||||
|
// Add click handlers for revert
|
||||||
|
document.querySelectorAll('.revert-btn').forEach(btn => {
|
||||||
|
btn.addEventListener('click', async (e) => {
|
||||||
|
const idx = parseInt(btn.getAttribute('data-idx'));
|
||||||
|
// Revert to the next revision (state before this one)
|
||||||
|
let revertId = null;
|
||||||
|
if (idx + 1 < history.length) {
|
||||||
|
revertId = history[idx + 1].id;
|
||||||
|
}
|
||||||
|
if (!confirm('Revert to the state BEFORE this change? This will overwrite the current board.')) return;
|
||||||
|
if (revertId) {
|
||||||
|
const res = await fetch('/api/revert', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ id: revertId })
|
||||||
|
});
|
||||||
|
if (res.ok) {
|
||||||
|
alert('Reverted!');
|
||||||
|
window.location.href = 'index.html';
|
||||||
|
} else {
|
||||||
|
alert('Failed to revert.');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// No earlier revision, clear board
|
||||||
|
const res = await fetch('/api/revert', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ id: null })
|
||||||
|
});
|
||||||
|
if (res.ok) {
|
||||||
|
alert('Reverted to empty board!');
|
||||||
|
window.location.href = 'index.html';
|
||||||
|
} else {
|
||||||
|
alert('Failed to revert.');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
loadHistory();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -1,189 +1,190 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
|
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
|
||||||
<title>Cuberoo</title>
|
<title>Cuberoo</title>
|
||||||
<link rel="stylesheet" href="style.css" />
|
<link rel="stylesheet" href="style.css" />
|
||||||
<!-- Add manifest and icons for PWA support -->
|
<!-- Add manifest and icons for PWA support -->
|
||||||
<link rel="manifest" href="manifest.json">
|
<link rel="manifest" href="manifest.json">
|
||||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||||
<meta name="apple-mobile-web-app-title" content="Cuberoo">
|
<meta name="apple-mobile-web-app-title" content="Cuberoo">
|
||||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||||
<link rel="apple-touch-icon" href="icon-192.png">
|
<link rel="apple-touch-icon" href="icon-192.png">
|
||||||
<meta name="theme-color" content="#181818">
|
<meta name="theme-color" content="#181818">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header class="header">
|
<header class="header">
|
||||||
<div class="logo">
|
<div class="logo">
|
||||||
<img src="logo.png" alt="Logo" />
|
<img src="logo.png" alt="Logo" />
|
||||||
<span>Cuberoo</span>
|
<span>Cuberoo</span>
|
||||||
</div>
|
</div>
|
||||||
<!-- Sidebar toggle for mobile -->
|
<!-- Sidebar toggle for mobile -->
|
||||||
<button id="sidebarToggle" style="display:none;margin-left:16px;font-size:1.6em;background:none;border:none;color:#d103f9;z-index:1100;">☰</button>
|
<button id="sidebarToggle" style="display:none;margin-left:16px;font-size:1.6em;background:none;border:none;color:#d103f9;z-index:1100;">☰</button>
|
||||||
</header>
|
<a href="history.html" style="margin-left:24px;color:#d103f9;font-weight:bold;text-decoration:none;font-size:1.1em;">History</a>
|
||||||
<div class="container">
|
</header>
|
||||||
<!-- wrapper for the draggable map class -->
|
<div class="container">
|
||||||
<div id="mapWrapper" class="map-wrapper">
|
<!-- wrapper for the draggable map class -->
|
||||||
<!-- Settings button in top right -->
|
<div id="mapWrapper" class="map-wrapper">
|
||||||
<button id="settingsBtn" class="settings-btn" title="Settings">
|
<!-- Settings button in top right -->
|
||||||
<span></span>
|
<button id="settingsBtn" class="settings-btn" title="Settings">
|
||||||
</button>
|
<span></span>
|
||||||
<!-- Settings menu (hidden by default) -->
|
</button>
|
||||||
<div id="settingsMenu" class="settings-menu" style="display:none;">
|
<!-- Settings menu (hidden by default) -->
|
||||||
<div class="settings-menu-content">
|
<div id="settingsMenu" class="settings-menu" style="display:none;">
|
||||||
<!-- Square Style toggle -->
|
<div class="settings-menu-content">
|
||||||
<div style="margin-bottom:18px;">
|
<!-- Square Style toggle -->
|
||||||
<label for="squareStyleToggle" style="color:white;vertical-align:middle;">Highlight by</label>
|
<div style="margin-bottom:18px;">
|
||||||
<button id="squareStyleToggle" type="button" style="margin-left:10px;vertical-align:middle;"></button>
|
<label for="squareStyleToggle" style="color:white;vertical-align:middle;">Highlight by</label>
|
||||||
</div>
|
<button id="squareStyleToggle" type="button" style="margin-left:10px;vertical-align:middle;"></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- class for the squares -->
|
</div>
|
||||||
<div id="map" class="map"></div>
|
<!-- class for the squares -->
|
||||||
<!-- zoom controls -->
|
<div id="map" class="map"></div>
|
||||||
<div id="zoomControls">
|
<!-- zoom controls -->
|
||||||
<button id="zoomIn">+</button>
|
<div id="zoomControls">
|
||||||
<button id="zoomOut">-</button>
|
<button id="zoomIn">+</button>
|
||||||
</div>
|
<button id="zoomOut">-</button>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<!-- sidebar with the categories -->
|
|
||||||
<div class="sidebar" id="sidebar">
|
<!-- sidebar with the categories -->
|
||||||
<!-- Categories will be dynamically loaded here -->
|
<div class="sidebar" id="sidebar">
|
||||||
</div>
|
<!-- Categories will be dynamically loaded here -->
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<script>
|
|
||||||
// map layout. put numbers for the square IDs. null will be empty i guess.
|
<script>
|
||||||
const mapData = [
|
// map layout. put numbers for the square IDs. null will be empty i guess.
|
||||||
['1', '2', null, '13', '14'],
|
const mapData = [
|
||||||
['3', '4', null, '15', '16'],
|
['1', '2', null, '13', '14'],
|
||||||
['5', '6', null, '17', '18'],
|
['3', '4', null, '15', '16'],
|
||||||
['7', '8', null, '19', '20'],
|
['5', '6', null, '17', '18'],
|
||||||
['9', '10', null, '21', '22'],
|
['7', '8', null, '19', '20'],
|
||||||
['11', '12', null, '23', '24']
|
['9', '10', null, '21', '22'],
|
||||||
];
|
['11', '12', null, '23', '24']
|
||||||
const mapEl = document.getElementById('map');
|
];
|
||||||
mapData.forEach(row => {
|
const mapEl = document.getElementById('map');
|
||||||
const rowEl = document.createElement('div');
|
mapData.forEach(row => {
|
||||||
rowEl.classList.add('map-row');
|
const rowEl = document.createElement('div');
|
||||||
row.forEach(cell => {
|
rowEl.classList.add('map-row');
|
||||||
if (cell) {
|
row.forEach(cell => {
|
||||||
const squareEl = document.createElement('div');
|
if (cell) {
|
||||||
squareEl.classList.add('square');
|
const squareEl = document.createElement('div');
|
||||||
squareEl.dataset.squareId = cell;
|
squareEl.classList.add('square');
|
||||||
rowEl.appendChild(squareEl);
|
squareEl.dataset.squareId = cell;
|
||||||
} else {
|
rowEl.appendChild(squareEl);
|
||||||
const emptyEl = document.createElement('div');
|
} else {
|
||||||
emptyEl.classList.add('empty');
|
const emptyEl = document.createElement('div');
|
||||||
rowEl.appendChild(emptyEl);
|
emptyEl.classList.add('empty');
|
||||||
}
|
rowEl.appendChild(emptyEl);
|
||||||
});
|
}
|
||||||
mapEl.appendChild(rowEl);
|
});
|
||||||
});
|
mapEl.appendChild(rowEl);
|
||||||
|
});
|
||||||
// Dynamically load categories and fruits
|
|
||||||
async function loadCategories() {
|
// Dynamically load categories and fruits
|
||||||
const sidebar = document.getElementById('sidebar');
|
async function loadCategories() {
|
||||||
const res = await fetch('/api/categories');
|
const sidebar = document.getElementById('sidebar');
|
||||||
const categories = await res.json();
|
const res = await fetch('/api/categories');
|
||||||
sidebar.innerHTML = '';
|
const categories = await res.json();
|
||||||
categories.forEach(cat => {
|
sidebar.innerHTML = '';
|
||||||
const catDiv = document.createElement('div');
|
categories.forEach(cat => {
|
||||||
catDiv.className = 'categories';
|
const catDiv = document.createElement('div');
|
||||||
catDiv.innerHTML = `
|
catDiv.className = 'categories';
|
||||||
<div class="category-header">
|
catDiv.innerHTML = `
|
||||||
<h4>${cat.name}</h4>
|
<div class="category-header">
|
||||||
<button class="category-toggle" type="button">▼</button>
|
<h4>${cat.name}</h4>
|
||||||
</div>
|
<button class="category-toggle" type="button">▼</button>
|
||||||
<div class="category-content">
|
</div>
|
||||||
${cat.fruits.map(fruit =>
|
<div class="category-content">
|
||||||
`<div class="fruit" draggable="true" data-fruit="${fruit}">${fruit}</div>`
|
${cat.fruits.map(fruit =>
|
||||||
).join('')}
|
`<div class="fruit" draggable="true" data-fruit="${fruit}">${fruit}</div>`
|
||||||
</div>
|
).join('')}
|
||||||
`;
|
</div>
|
||||||
sidebar.appendChild(catDiv);
|
`;
|
||||||
});
|
sidebar.appendChild(catDiv);
|
||||||
}
|
});
|
||||||
loadCategories();
|
}
|
||||||
|
loadCategories();
|
||||||
// Settings button/menu logic
|
|
||||||
const settingsBtn = document.getElementById('settingsBtn');
|
// Settings button/menu logic
|
||||||
const settingsMenu = document.getElementById('settingsMenu');
|
const settingsBtn = document.getElementById('settingsBtn');
|
||||||
|
const settingsMenu = document.getElementById('settingsMenu');
|
||||||
settingsBtn.addEventListener('click', () => {
|
|
||||||
settingsMenu.style.display = 'block';
|
settingsBtn.addEventListener('click', () => {
|
||||||
});
|
settingsMenu.style.display = 'block';
|
||||||
// Optional: click outside menu closes it
|
});
|
||||||
document.addEventListener('mousedown', (e) => {
|
// Optional: click outside menu closes it
|
||||||
if (settingsMenu.style.display === 'block' &&
|
document.addEventListener('mousedown', (e) => {
|
||||||
!settingsMenu.contains(e.target) &&
|
if (settingsMenu.style.display === 'block' &&
|
||||||
e.target !== settingsBtn) {
|
!settingsMenu.contains(e.target) &&
|
||||||
settingsMenu.style.display = 'none';
|
e.target !== settingsBtn) {
|
||||||
}
|
settingsMenu.style.display = 'none';
|
||||||
});
|
}
|
||||||
|
});
|
||||||
// Filled/Outline setting logic (toggle)
|
|
||||||
function applySquareStyle(style) {
|
// Filled/Outline setting logic (toggle)
|
||||||
document.body.setAttribute('data-square-style', style);
|
function applySquareStyle(style) {
|
||||||
const btn = document.getElementById('squareStyleToggle');
|
document.body.setAttribute('data-square-style', style);
|
||||||
if (btn) {
|
const btn = document.getElementById('squareStyleToggle');
|
||||||
btn.textContent = style === 'filled' ? 'filling' : 'outlining';
|
if (btn) {
|
||||||
btn.className = style === 'filled' ? 'toggle-filled' : 'toggle-outline';
|
btn.textContent = style === 'filled' ? 'filling' : 'outlining';
|
||||||
}
|
btn.className = style === 'filled' ? 'toggle-filled' : 'toggle-outline';
|
||||||
}
|
}
|
||||||
function saveSquareStyle(style) {
|
}
|
||||||
localStorage.setItem('squareStyle', style);
|
function saveSquareStyle(style) {
|
||||||
}
|
localStorage.setItem('squareStyle', style);
|
||||||
function loadSquareStyle() {
|
}
|
||||||
return localStorage.getItem('squareStyle') || 'filled';
|
function loadSquareStyle() {
|
||||||
}
|
return localStorage.getItem('squareStyle') || 'filled';
|
||||||
|
}
|
||||||
function setupSquareStyleSetting() {
|
|
||||||
const toggleBtn = document.getElementById('squareStyleToggle');
|
function setupSquareStyleSetting() {
|
||||||
if (!toggleBtn) return;
|
const toggleBtn = document.getElementById('squareStyleToggle');
|
||||||
let style = loadSquareStyle();
|
if (!toggleBtn) return;
|
||||||
applySquareStyle(style);
|
let style = loadSquareStyle();
|
||||||
toggleBtn.addEventListener('click', () => {
|
applySquareStyle(style);
|
||||||
style = (style === 'filled') ? 'outline' : 'filled';
|
toggleBtn.addEventListener('click', () => {
|
||||||
applySquareStyle(style);
|
style = (style === 'filled') ? 'outline' : 'filled';
|
||||||
saveSquareStyle(style);
|
applySquareStyle(style);
|
||||||
});
|
saveSquareStyle(style);
|
||||||
}
|
});
|
||||||
|
}
|
||||||
document.addEventListener('DOMContentLoaded', setupSquareStyleSetting);
|
|
||||||
if (document.getElementById('squareStyleToggle')) setupSquareStyleSetting();
|
document.addEventListener('DOMContentLoaded', setupSquareStyleSetting);
|
||||||
|
if (document.getElementById('squareStyleToggle')) setupSquareStyleSetting();
|
||||||
// Sidebar toggle for mobile
|
|
||||||
function setupSidebarToggle() {
|
// Sidebar toggle for mobile
|
||||||
const sidebar = document.getElementById('sidebar');
|
function setupSidebarToggle() {
|
||||||
const toggleBtn = document.getElementById('sidebarToggle');
|
const sidebar = document.getElementById('sidebar');
|
||||||
function updateSidebarDisplay() {
|
const toggleBtn = document.getElementById('sidebarToggle');
|
||||||
if (window.innerWidth <= 900) {
|
function updateSidebarDisplay() {
|
||||||
toggleBtn.style.display = '';
|
if (window.innerWidth <= 900) {
|
||||||
sidebar.classList.remove('open');
|
toggleBtn.style.display = '';
|
||||||
} else {
|
sidebar.classList.remove('open');
|
||||||
toggleBtn.style.display = 'none';
|
} else {
|
||||||
sidebar.classList.remove('open');
|
toggleBtn.style.display = 'none';
|
||||||
}
|
sidebar.classList.remove('open');
|
||||||
}
|
}
|
||||||
toggleBtn.addEventListener('click', () => {
|
}
|
||||||
sidebar.classList.toggle('open');
|
toggleBtn.addEventListener('click', () => {
|
||||||
});
|
sidebar.classList.toggle('open');
|
||||||
// Close sidebar when clicking outside on mobile
|
});
|
||||||
document.addEventListener('mousedown', (e) => {
|
// Close sidebar when clicking outside on mobile
|
||||||
if (window.innerWidth > 900) return;
|
document.addEventListener('mousedown', (e) => {
|
||||||
if (sidebar.classList.contains('open') && !sidebar.contains(e.target) && e.target !== toggleBtn) {
|
if (window.innerWidth > 900) return;
|
||||||
sidebar.classList.remove('open');
|
if (sidebar.classList.contains('open') && !sidebar.contains(e.target) && e.target !== toggleBtn) {
|
||||||
}
|
sidebar.classList.remove('open');
|
||||||
});
|
}
|
||||||
window.addEventListener('resize', updateSidebarDisplay);
|
});
|
||||||
updateSidebarDisplay();
|
window.addEventListener('resize', updateSidebarDisplay);
|
||||||
}
|
updateSidebarDisplay();
|
||||||
document.addEventListener('DOMContentLoaded', setupSidebarToggle);
|
}
|
||||||
</script>
|
document.addEventListener('DOMContentLoaded', setupSidebarToggle);
|
||||||
<script src="/socket.io/socket.io.js"></script>
|
</script>
|
||||||
<script src="script.js"></script>
|
<script src="/socket.io/socket.io.js"></script>
|
||||||
</body>
|
<script src="script.js"></script>
|
||||||
</html>
|
</body>
|
||||||
|
</html>
|
||||||
|
|||||||
@@ -1,21 +1,21 @@
|
|||||||
{
|
{
|
||||||
"name": "Cuberoo",
|
"name": "Cuberoo",
|
||||||
"short_name": "Cuberoo",
|
"short_name": "Cuberoo",
|
||||||
"start_url": ".",
|
"start_url": ".",
|
||||||
"display": "standalone",
|
"display": "standalone",
|
||||||
"background_color": "#800080",
|
"background_color": "#800080",
|
||||||
"theme_color": "#800080",
|
"theme_color": "#800080",
|
||||||
"description": "Cubes, but fun.",
|
"description": "Cubes, but fun.",
|
||||||
"icons": [
|
"icons": [
|
||||||
{
|
{
|
||||||
"src": "icon-192.png",
|
"src": "icon-192.png",
|
||||||
"sizes": "192x192",
|
"sizes": "192x192",
|
||||||
"type": "image/png"
|
"type": "image/png"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"src": "icon-512.png",
|
"src": "icon-512.png",
|
||||||
"sizes": "512x512",
|
"sizes": "512x512",
|
||||||
"type": "image/png"
|
"type": "image/png"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
1709
public/script.js
1709
public/script.js
File diff suppressed because it is too large
Load Diff
926
public/style.css
926
public/style.css
@@ -1,464 +1,464 @@
|
|||||||
/* fullscreen flex container */
|
/* fullscreen flex container */
|
||||||
body, html {
|
body, html {
|
||||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: hidden; /* disable scrollbar */
|
overflow: hidden; /* disable scrollbar */
|
||||||
background: black;
|
background: black;
|
||||||
color: rgb(166, 166, 166); /* text color */
|
color: rgb(166, 166, 166); /* text color */
|
||||||
}
|
}
|
||||||
.container {
|
.container {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* sidebar with categories */
|
/* sidebar with categories */
|
||||||
.sidebar {
|
.sidebar {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 15px;
|
gap: 15px;
|
||||||
margin-left: 15px;
|
margin-left: 15px;
|
||||||
height: 100vh; /* take up entire vertical height */
|
height: 100vh; /* take up entire vertical height */
|
||||||
background: rgb(19, 19, 19);
|
background: rgb(19, 19, 19);
|
||||||
overflow-y: auto; /* make it scrollable */
|
overflow-y: auto; /* make it scrollable */
|
||||||
width: 12%; /* fixed width */
|
width: 12%; /* fixed width */
|
||||||
box-sizing: border-box; /* include padding/border in width */
|
box-sizing: border-box; /* include padding/border in width */
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar::-webkit-scrollbar {
|
.sidebar::-webkit-scrollbar {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Map layout */
|
/* Map layout */
|
||||||
.map-wrapper {
|
.map-wrapper {
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border: 0px solid white; /* disbale map border */
|
border: 0px solid white; /* disbale map border */
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 0; /* margins for map (disbaled) */
|
margin: 0; /* margins for map (disbaled) */
|
||||||
}
|
}
|
||||||
|
|
||||||
#map {
|
#map {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
cursor: grab;
|
cursor: grab;
|
||||||
will-change: transform;
|
will-change: transform;
|
||||||
}
|
}
|
||||||
|
|
||||||
.map {
|
.map {
|
||||||
display: table;
|
display: table;
|
||||||
margin-right: 30px;
|
margin-right: 30px;
|
||||||
}
|
}
|
||||||
.map-row {
|
.map-row {
|
||||||
display: table-row;
|
display: table-row;
|
||||||
}
|
}
|
||||||
.map-row > .square,
|
.map-row > .square,
|
||||||
.map-row > .empty {
|
.map-row > .empty {
|
||||||
display: table-cell;
|
display: table-cell;
|
||||||
width: 100px;
|
width: 100px;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* what the squares look like */
|
/* what the squares look like */
|
||||||
.square {
|
.square {
|
||||||
position: relative;
|
position: relative;
|
||||||
border: 1px dashed white;
|
border: 1px dashed white;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
transition: border-color 0.5s ease, box-shadow 0.5s ease
|
transition: border-color 0.5s ease, box-shadow 0.5s ease
|
||||||
}
|
}
|
||||||
|
|
||||||
.square.highlight {
|
.square.highlight {
|
||||||
border: 1px solid purple; /* highlight color when hovered over in sidebar */
|
border: 1px solid purple; /* highlight color when hovered over in sidebar */
|
||||||
background-color: purple;
|
background-color: purple;
|
||||||
}
|
}
|
||||||
|
|
||||||
.square.highlight-update {
|
.square.highlight-update {
|
||||||
border: 1px solid purple;
|
border: 1px solid purple;
|
||||||
box-shadow: 0 0 10px 2px purple;
|
box-shadow: 0 0 10px 2px purple;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* the x button to clear that square (temp, make it look better later) */
|
/* the x button to clear that square (temp, make it look better later) */
|
||||||
.clear-btn {
|
.clear-btn {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 2px;
|
top: 2px;
|
||||||
right: 2px;
|
right: 2px;
|
||||||
background: rgba(0, 0, 0, 0);
|
background: rgba(0, 0, 0, 0);
|
||||||
border: none;
|
border: none;
|
||||||
color: white;
|
color: white;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
display: none;
|
display: none;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.square:hover .clear-btn {
|
.square:hover .clear-btn {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* empty for when it's null */
|
/* empty for when it's null */
|
||||||
.empty {
|
.empty {
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* for the categories */
|
/* for the categories */
|
||||||
.categories {
|
.categories {
|
||||||
/* make sidebar wider */
|
/* make sidebar wider */
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
padding-bottom: 0px;
|
padding-bottom: 0px;
|
||||||
border: 1px solid white; /* sidebar border color */
|
border: 1px solid white; /* sidebar border color */
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fruit {
|
.fruit {
|
||||||
cursor: grab;
|
cursor: grab;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
padding: 5px 10px;
|
padding: 5px 10px;
|
||||||
border: 1px solid rgba(255, 255, 255, 0.5); /* cells inside sidebar border color */
|
border: 1px solid rgba(255, 255, 255, 0.5); /* cells inside sidebar border color */
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fruit:active {
|
.fruit:active {
|
||||||
opacity: 0.6;
|
opacity: 0.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* what the titles of the categories */
|
/* what the titles of the categories */
|
||||||
.categories h4 {
|
.categories h4 {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-top: 5px; /* change this to make the titles closer to the top of the cell */
|
margin-top: 5px; /* change this to make the titles closer to the top of the cell */
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* "cuberoo" logo and text at top */
|
/* "cuberoo" logo and text at top */
|
||||||
.header {
|
.header {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 10px;
|
top: 10px;
|
||||||
left: 10px;
|
left: 10px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo img {
|
.logo img {
|
||||||
width: 50px;
|
width: 50px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
margin-right: 6px;
|
margin-right: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo span {
|
.logo span {
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: rgb(191, 93, 245); /* color of logo text */
|
color: rgb(191, 93, 245); /* color of logo text */
|
||||||
}
|
}
|
||||||
|
|
||||||
#zoomControls {
|
#zoomControls {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 20px;
|
bottom: 20px;
|
||||||
right: 0px;
|
right: 0px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 0px;
|
gap: 0px;
|
||||||
z-index: 100; /* this makes it appear on top of the map*/
|
z-index: 100; /* this makes it appear on top of the map*/
|
||||||
}
|
}
|
||||||
|
|
||||||
#zoomControls button {
|
#zoomControls button {
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
background: rgb(0, 0, 0);
|
background: rgb(0, 0, 0);
|
||||||
color: white;
|
color: white;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
#zoomControls button:hover {
|
#zoomControls button:hover {
|
||||||
background: rgb(0, 0, 0);
|
background: rgb(0, 0, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropped-fruit {
|
.dropped-fruit {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.category-header {
|
.category-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.category-header h4 {
|
.category-header h4 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.category-toggle {
|
.category-toggle {
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 0 6px;
|
padding: 0 6px;
|
||||||
height: 28px;
|
height: 28px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.square-number {
|
.square-number {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 4px;
|
bottom: 4px;
|
||||||
right: 6px;
|
right: 6px;
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
color: #bdbdbd;
|
color: #bdbdbd;
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.custom-fruit-input {
|
.custom-fruit-input {
|
||||||
border: 1px solid #d103f9;
|
border: 1px solid #d103f9;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
padding: 6px 10px;
|
padding: 6px 10px;
|
||||||
outline: none;
|
outline: none;
|
||||||
background: #181818;
|
background: #181818;
|
||||||
color: white;
|
color: white;
|
||||||
width: 90%;
|
width: 90%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.category-selectable {
|
.category-selectable {
|
||||||
box-shadow: 0 0 0 3px #d103f9, 0 0 10px 2px #d103f9;
|
box-shadow: 0 0 0 3px #d103f9, 0 0 10px 2px #d103f9;
|
||||||
border-color: #d103f9 !important;
|
border-color: #d103f9 !important;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: box-shadow 0.2s;
|
transition: box-shadow 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.category-select-msg {
|
.category-select-msg {
|
||||||
/* see JS for inline styles */
|
/* see JS for inline styles */
|
||||||
}
|
}
|
||||||
|
|
||||||
#delete-fruit-popup {
|
#delete-fruit-popup {
|
||||||
/* see JS for inline styles, but you can add more here if needed */
|
/* see JS for inline styles, but you can add more here if needed */
|
||||||
box-shadow: 0 4px 32px #000b;
|
box-shadow: 0 4px 32px #000b;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Settings button in top right of map */
|
/* Settings button in top right of map */
|
||||||
.settings-btn {
|
.settings-btn {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 10px;
|
top: 10px;
|
||||||
right: 10px;
|
right: 10px;
|
||||||
z-index: 101;
|
z-index: 101;
|
||||||
background: rgba(30,30,30,0.95);
|
background: rgba(30,30,30,0.95);
|
||||||
border: 1px solid #d103f9;
|
border: 1px solid #d103f9;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
width: 44px;
|
width: 44px;
|
||||||
height: 44px;
|
height: 44px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
color: #d103f9;
|
color: #d103f9;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
box-shadow: 0 2px 8px #0007;
|
box-shadow: 0 2px 8px #0007;
|
||||||
transition: background 0.2s, border-color 0.2s;
|
transition: background 0.2s, border-color 0.2s;
|
||||||
}
|
}
|
||||||
.settings-btn:hover {
|
.settings-btn:hover {
|
||||||
background: #2a003a;
|
background: #2a003a;
|
||||||
border-color: #fff;
|
border-color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Settings menu styles */
|
/* Settings menu styles */
|
||||||
.settings-menu {
|
.settings-menu {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 70px;
|
top: 70px;
|
||||||
right: 16px;
|
right: 16px;
|
||||||
z-index: 102;
|
z-index: 102;
|
||||||
background: #181818;
|
background: #181818;
|
||||||
border: 1px solid #d103f9;
|
border: 1px solid #d103f9;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
box-shadow: 0 4px 32px #000b;
|
box-shadow: 0 4px 32px #000b;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
color: white;
|
color: white;
|
||||||
animation: fadeInSettings 0.2s;
|
animation: fadeInSettings 0.2s;
|
||||||
}
|
}
|
||||||
@keyframes fadeInSettings {
|
@keyframes fadeInSettings {
|
||||||
from { opacity: 0; transform: translateY(-10px);}
|
from { opacity: 0; transform: translateY(-10px);}
|
||||||
to { opacity: 1; transform: translateY(0);}
|
to { opacity: 1; transform: translateY(0);}
|
||||||
}
|
}
|
||||||
.settings-menu-header {
|
.settings-menu-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 14px 18px 10px 18px;
|
padding: 14px 18px 10px 18px;
|
||||||
border-bottom: 1px solid #333;
|
border-bottom: 1px solid #333;
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #d103f9;
|
color: #d103f9;
|
||||||
}
|
}
|
||||||
.close-settings-btn {
|
.close-settings-btn {
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
color: #d103f9;
|
color: #d103f9;
|
||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 0 4px;
|
padding: 0 4px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
transition: background 0.2s;
|
transition: background 0.2s;
|
||||||
}
|
}
|
||||||
.close-settings-btn:hover {
|
.close-settings-btn:hover {
|
||||||
background: #2a003a;
|
background: #2a003a;
|
||||||
}
|
}
|
||||||
.settings-menu-content {
|
.settings-menu-content {
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
padding-bottom: 0px;
|
padding-bottom: 0px;
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Square Style toggle button */
|
/* Square Style toggle button */
|
||||||
#squareStyleToggle {
|
#squareStyleToggle {
|
||||||
padding: 6px 18px;
|
padding: 6px 18px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
border: 1.5px solid #d103f9;
|
border: 1.5px solid #d103f9;
|
||||||
background: #191919;
|
background: #191919;
|
||||||
color: #d103f9;
|
color: #d103f9;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background 0.15s, color 0.15s, border-color 0.15s;
|
transition: background 0.15s, color 0.15s, border-color 0.15s;
|
||||||
outline: none;
|
outline: none;
|
||||||
}
|
}
|
||||||
#squareStyleToggle.toggle-filled {
|
#squareStyleToggle.toggle-filled {
|
||||||
background: #d103f9;
|
background: #d103f9;
|
||||||
color: white;
|
color: white;
|
||||||
border-color: #d103f9;
|
border-color: #d103f9;
|
||||||
}
|
}
|
||||||
#squareStyleToggle.toggle-outline {
|
#squareStyleToggle.toggle-outline {
|
||||||
background: #191919;
|
background: #191919;
|
||||||
color: #d103f9;
|
color: #d103f9;
|
||||||
border-color: #d103f9;
|
border-color: #d103f9;
|
||||||
}
|
}
|
||||||
#squareStyleToggle:hover {
|
#squareStyleToggle:hover {
|
||||||
background: #2a003a;
|
background: #2a003a;
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Filled/Outline toggle logic */
|
/* Filled/Outline toggle logic */
|
||||||
body[data-square-style="filled"] .square.highlight {
|
body[data-square-style="filled"] .square.highlight {
|
||||||
border: 1px solid purple;
|
border: 1px solid purple;
|
||||||
background-color: purple;
|
background-color: purple;
|
||||||
}
|
}
|
||||||
body[data-square-style="filled"] .square.highlight-update {
|
body[data-square-style="filled"] .square.highlight-update {
|
||||||
border: 1px solid purple;
|
border: 1px solid purple;
|
||||||
box-shadow: 0 0 10px 2px purple;
|
box-shadow: 0 0 10px 2px purple;
|
||||||
}
|
}
|
||||||
body[data-square-style="outline"] .square.highlight {
|
body[data-square-style="outline"] .square.highlight {
|
||||||
border: 1px solid #d103f9;
|
border: 1px solid #d103f9;
|
||||||
background-color: transparent !important;
|
background-color: transparent !important;
|
||||||
}
|
}
|
||||||
body[data-square-style="outline"] .square.highlight-update {
|
body[data-square-style="outline"] .square.highlight-update {
|
||||||
border: 1px solid #d103f9;
|
border: 1px solid #d103f9;
|
||||||
background-color: transparent !important;
|
background-color: transparent !important;
|
||||||
box-shadow: 0 0 10px 2px #d103f9;
|
box-shadow: 0 0 10px 2px #d103f9;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Responsive adjustments for mobile */
|
/* Responsive adjustments for mobile */
|
||||||
@media (max-width: 900px) {
|
@media (max-width: 900px) {
|
||||||
.container {
|
.container {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
.sidebar {
|
.sidebar {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
width: 35vw; /* was 80vw, now 60vw for less width */
|
width: 35vw; /* was 80vw, now 60vw for less width */
|
||||||
max-width: 240px; /* was 350px, now 240px for less width */
|
max-width: 240px; /* was 350px, now 240px for less width */
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
z-index: 1001;
|
z-index: 1001;
|
||||||
background: #181818;
|
background: #181818;
|
||||||
transform: translateX(-100%);
|
transform: translateX(-100%);
|
||||||
transition: transform 0.3s;
|
transition: transform 0.3s;
|
||||||
box-shadow: 2px 0 16px #000a;
|
box-shadow: 2px 0 16px #000a;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
.sidebar.open {
|
.sidebar.open {
|
||||||
transform: translateX(0);
|
transform: translateX(0);
|
||||||
}
|
}
|
||||||
.map-wrapper {
|
.map-wrapper {
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
#zoomControls {
|
#zoomControls {
|
||||||
right: 10px;
|
right: 10px;
|
||||||
bottom: 10px;
|
bottom: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Make squares and map responsive */
|
/* Make squares and map responsive */
|
||||||
@media (max-width: 900px) {
|
@media (max-width: 900px) {
|
||||||
.map-row > .square,
|
.map-row > .square,
|
||||||
.map-row > .empty {
|
.map-row > .empty {
|
||||||
width: 13vw;
|
width: 13vw;
|
||||||
height: 13vw;
|
height: 13vw;
|
||||||
min-width: 48px;
|
min-width: 48px;
|
||||||
min-height: 48px;
|
min-height: 48px;
|
||||||
max-width: 80px;
|
max-width: 80px;
|
||||||
max-height: 80px;
|
max-height: 80px;
|
||||||
}
|
}
|
||||||
.square {
|
.square {
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Touch-friendly buttons and inputs */
|
/* Touch-friendly buttons and inputs */
|
||||||
button, input, .fruit, .clear-btn {
|
button, input, .fruit, .clear-btn {
|
||||||
touch-action: manipulation;
|
touch-action: manipulation;
|
||||||
}
|
}
|
||||||
|
|
||||||
.clear-btn {
|
.clear-btn {
|
||||||
width: 28px;
|
width: 28px;
|
||||||
height: 28px;
|
height: 28px;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Make popup and overlays scrollable on mobile */
|
/* Make popup and overlays scrollable on mobile */
|
||||||
#delete-fruit-popup, .settings-menu {
|
#delete-fruit-popup, .settings-menu {
|
||||||
max-width: 95vw;
|
max-width: 95vw;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
}
|
}
|
||||||
403
server.js
403
server.js
@@ -1,141 +1,262 @@
|
|||||||
// server.js
|
// server.js
|
||||||
const express = require('express');
|
const express = require('express');
|
||||||
const bodyParser = require('body-parser');
|
const bodyParser = require('body-parser');
|
||||||
const sqlite3 = require('sqlite3').verbose();
|
const sqlite3 = require('sqlite3').verbose();
|
||||||
const path = require('path');
|
const path = require('path');
|
||||||
const http = require('http');
|
const http = require('http');
|
||||||
const { Server } = require('socket.io');
|
const { Server } = require('socket.io');
|
||||||
const fs = require('fs');
|
const fs = require('fs');
|
||||||
|
|
||||||
const app = express();
|
const app = express();
|
||||||
const server = http.createServer(app);
|
const server = http.createServer(app);
|
||||||
const io = new Server(server);
|
const io = new Server(server);
|
||||||
|
|
||||||
app.use(bodyParser.json());
|
app.use(bodyParser.json());
|
||||||
app.use(express.static(path.join(__dirname, 'public')));
|
app.use(express.static(path.join(__dirname, 'public')));
|
||||||
|
|
||||||
// open (or create) the SQLite database file
|
// open (or create) the SQLite database file
|
||||||
const db = new sqlite3.Database('positions.db', err => {
|
const db = new sqlite3.Database('positions.db', err => {
|
||||||
if (err) {
|
if (err) {
|
||||||
console.error('Could not open DB', err);
|
console.error('Could not open DB', err);
|
||||||
process.exit(1);
|
process.exit(1);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// create table if not exists
|
// create table if not exists
|
||||||
db.run(
|
db.run(
|
||||||
`CREATE TABLE IF NOT EXISTS positions (
|
`CREATE TABLE IF NOT EXISTS positions (
|
||||||
square_id TEXT PRIMARY KEY,
|
square_id TEXT PRIMARY KEY,
|
||||||
fruit TEXT
|
fruit TEXT
|
||||||
)`,
|
)`,
|
||||||
(err) => {
|
(err) => {
|
||||||
if (err) console.error('Could not ensure table', err);
|
if (err) console.error('Could not ensure table', err);
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
// get all saved positions
|
// Add a table for history (revision log)
|
||||||
app.get('/api/positions', (req, res) => {
|
db.run(
|
||||||
db.all('SELECT square_id, fruit FROM positions', (err, rows) => {
|
`CREATE TABLE IF NOT EXISTS history (
|
||||||
if (err) return res.status(500).json({ error: err.message });
|
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||||
// convert to an object. should look like this: { "1": "Apple", "2": "Banana", … }
|
timestamp DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||||
const mapping = {};
|
action TEXT,
|
||||||
rows.forEach(r => (mapping[r.square_id] = r.fruit));
|
positions TEXT -- JSON string of all positions
|
||||||
res.json(mapping);
|
)`,
|
||||||
});
|
(err) => {
|
||||||
});
|
if (err) console.error('Could not ensure history table', err);
|
||||||
|
}
|
||||||
// save (or update) a single square’s item
|
);
|
||||||
app.post('/api/positions', (req, res) => {
|
|
||||||
const { squareId, fruit } = req.body;
|
// Helper to save a revision to history
|
||||||
if (!squareId || typeof fruit !== 'string') {
|
function saveHistory(action, cb) {
|
||||||
return res.status(400).json({ error: 'squareId and fruit required' });
|
db.all('SELECT square_id, fruit FROM positions', (err, rows) => {
|
||||||
}
|
if (err) return cb && cb(err);
|
||||||
db.run(
|
const mapping = {};
|
||||||
`INSERT INTO positions (square_id, fruit)
|
rows.forEach(r => (mapping[r.square_id] = r.fruit));
|
||||||
VALUES (?, ?)
|
db.run(
|
||||||
ON CONFLICT(square_id) DO UPDATE SET fruit=excluded.fruit`,
|
'INSERT INTO history (action, positions) VALUES (?, ?)',
|
||||||
[squareId, fruit],
|
[action, JSON.stringify(mapping)],
|
||||||
function (err) {
|
cb
|
||||||
if (err) return res.status(500).json({ error: err.message });
|
);
|
||||||
// broadcast update via Socket.io
|
});
|
||||||
io.emit('update', { squareId, fruit });
|
}
|
||||||
res.json({ success: true });
|
|
||||||
}
|
// get all saved positions
|
||||||
);
|
app.get('/api/positions', (req, res) => {
|
||||||
});
|
db.all('SELECT square_id, fruit FROM positions', (err, rows) => {
|
||||||
|
if (err) return res.status(500).json({ error: err.message });
|
||||||
// Serve categories and fruits from a JSON file
|
// convert to an object. should look like this: { "1": "Apple", "2": "Banana", … }
|
||||||
app.get('/api/categories', (req, res) => {
|
const mapping = {};
|
||||||
const categoriesPath = path.join(__dirname, 'categories.json');
|
rows.forEach(r => (mapping[r.square_id] = r.fruit));
|
||||||
fs.readFile(categoriesPath, 'utf8', (err, data) => {
|
res.json(mapping);
|
||||||
if (err) return res.status(500).json({ error: 'Could not load categories' });
|
});
|
||||||
try {
|
});
|
||||||
const categories = JSON.parse(data);
|
|
||||||
res.json(categories);
|
// save (or update) a single square’s item
|
||||||
} catch (e) {
|
app.post('/api/positions', (req, res) => {
|
||||||
res.status(500).json({ error: 'Invalid categories file' });
|
const { squareId, fruit } = req.body;
|
||||||
}
|
if (!squareId || typeof fruit !== 'string') {
|
||||||
});
|
return res.status(400).json({ error: 'squareId and fruit required' });
|
||||||
});
|
}
|
||||||
|
db.run(
|
||||||
// Add a fruit to a category in categories.json
|
`INSERT INTO positions (square_id, fruit)
|
||||||
app.post('/api/add-fruit', (req, res) => {
|
VALUES (?, ?)
|
||||||
const { category, fruit } = req.body;
|
ON CONFLICT(square_id) DO UPDATE SET fruit=excluded.fruit`,
|
||||||
if (!category || !fruit) {
|
[squareId, fruit],
|
||||||
return res.status(400).json({ error: 'category and fruit required' });
|
function (err) {
|
||||||
}
|
if (err) return res.status(500).json({ error: err.message });
|
||||||
const categoriesPath = path.join(__dirname, 'categories.json');
|
// Save to history
|
||||||
fs.readFile(categoriesPath, 'utf8', (err, data) => {
|
saveHistory(`Moved ${fruit} to '${squareId}'`, () => {});
|
||||||
if (err) return res.status(500).json({ error: 'Could not load categories' });
|
// broadcast update via Socket.io
|
||||||
let categories;
|
io.emit('update', { squareId, fruit });
|
||||||
try {
|
res.json({ success: true });
|
||||||
categories = JSON.parse(data);
|
}
|
||||||
} catch (e) {
|
);
|
||||||
return res.status(500).json({ error: 'Invalid categories file' });
|
});
|
||||||
}
|
|
||||||
const cat = categories.find(c => c.name === category);
|
// Serve categories and fruits from a JSON file
|
||||||
if (!cat) return res.status(404).json({ error: 'Category not found' });
|
app.get('/api/categories', (req, res) => {
|
||||||
// Prevent duplicates
|
const categoriesPath = path.join(__dirname, 'categories.json');
|
||||||
if (cat.fruits.includes(fruit)) {
|
fs.readFile(categoriesPath, 'utf8', (err, data) => {
|
||||||
return res.status(400).json({ error: 'Fruit already exists in category' });
|
if (err) return res.status(500).json({ error: 'Could not load categories' });
|
||||||
}
|
try {
|
||||||
cat.fruits.push(fruit);
|
const categories = JSON.parse(data);
|
||||||
fs.writeFile(categoriesPath, JSON.stringify(categories, null, 2), err2 => {
|
res.json(categories);
|
||||||
if (err2) return res.status(500).json({ error: 'Could not save categories' });
|
} catch (e) {
|
||||||
res.json({ success: true });
|
res.status(500).json({ error: 'Invalid categories file' });
|
||||||
});
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
// Delete a fruit from a category in categories.json
|
// Add a fruit to a category in categories.json
|
||||||
app.post('/api/delete-fruit', (req, res) => {
|
app.post('/api/add-fruit', (req, res) => {
|
||||||
const { category, fruit } = req.body;
|
const { category, fruit } = req.body;
|
||||||
if (!category || !fruit) {
|
if (!category || !fruit) {
|
||||||
return res.status(400).json({ error: 'category and fruit required' });
|
return res.status(400).json({ error: 'category and fruit required' });
|
||||||
}
|
}
|
||||||
const categoriesPath = path.join(__dirname, 'categories.json');
|
const categoriesPath = path.join(__dirname, 'categories.json');
|
||||||
fs.readFile(categoriesPath, 'utf8', (err, data) => {
|
fs.readFile(categoriesPath, 'utf8', (err, data) => {
|
||||||
if (err) return res.status(500).json({ error: 'Could not load categories' });
|
if (err) return res.status(500).json({ error: 'Could not load categories' });
|
||||||
let categories;
|
let categories;
|
||||||
try {
|
try {
|
||||||
categories = JSON.parse(data);
|
categories = JSON.parse(data);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
return res.status(500).json({ error: 'Invalid categories file' });
|
return res.status(500).json({ error: 'Invalid categories file' });
|
||||||
}
|
}
|
||||||
const cat = categories.find(c => c.name === category);
|
const cat = categories.find(c => c.name === category);
|
||||||
if (!cat) return res.status(404).json({ error: 'Category not found' });
|
if (!cat) return res.status(404).json({ error: 'Category not found' });
|
||||||
const idx = cat.fruits.indexOf(fruit);
|
// Prevent duplicates
|
||||||
if (idx === -1) return res.status(404).json({ error: 'Fruit not found in category' });
|
if (cat.fruits.includes(fruit)) {
|
||||||
cat.fruits.splice(idx, 1);
|
return res.status(400).json({ error: 'Fruit already exists in category' });
|
||||||
fs.writeFile(categoriesPath, JSON.stringify(categories, null, 2), err2 => {
|
}
|
||||||
if (err2) return res.status(500).json({ error: 'Could not save categories' });
|
cat.fruits.push(fruit);
|
||||||
res.json({ success: true });
|
fs.writeFile(categoriesPath, JSON.stringify(categories, null, 2), err2 => {
|
||||||
});
|
if (err2) return res.status(500).json({ error: 'Could not save categories' });
|
||||||
});
|
res.json({ success: true });
|
||||||
});
|
});
|
||||||
|
});
|
||||||
// start server
|
});
|
||||||
const PORT = process.env.PORT || 3085;
|
|
||||||
server.listen(PORT, () => {
|
// Delete a fruit from a category in categories.json
|
||||||
console.log(`Listening on http://localhost:${PORT}`);
|
app.post('/api/delete-fruit', (req, res) => {
|
||||||
});
|
const { category, fruit } = req.body;
|
||||||
|
if (!category || !fruit) {
|
||||||
|
return res.status(400).json({ error: 'category and fruit required' });
|
||||||
|
}
|
||||||
|
const categoriesPath = path.join(__dirname, 'categories.json');
|
||||||
|
fs.readFile(categoriesPath, 'utf8', (err, data) => {
|
||||||
|
if (err) return res.status(500).json({ error: 'Could not load categories' });
|
||||||
|
let categories;
|
||||||
|
try {
|
||||||
|
categories = JSON.parse(data);
|
||||||
|
} catch (e) {
|
||||||
|
return res.status(500).json({ error: 'Invalid categories file' });
|
||||||
|
}
|
||||||
|
const cat = categories.find(c => c.name === category);
|
||||||
|
if (!cat) return res.status(404).json({ error: 'Category not found' });
|
||||||
|
const idx = cat.fruits.indexOf(fruit);
|
||||||
|
if (idx === -1) return res.status(404).json({ error: 'Fruit not found in category' });
|
||||||
|
cat.fruits.splice(idx, 1);
|
||||||
|
fs.writeFile(categoriesPath, JSON.stringify(categories, null, 2), err2 => {
|
||||||
|
if (err2) return res.status(500).json({ error: 'Could not save categories' });
|
||||||
|
res.json({ success: true });
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// API to get history
|
||||||
|
app.get('/api/history', (req, res) => {
|
||||||
|
db.all('SELECT id, timestamp, action FROM history ORDER BY id DESC', (err, rows) => {
|
||||||
|
if (err) return res.status(500).json({ error: err.message });
|
||||||
|
res.json(rows);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// API to get a specific revision's positions
|
||||||
|
app.get('/api/history/:id', (req, res) => {
|
||||||
|
db.get('SELECT positions FROM history WHERE id = ?', [req.params.id], (err, row) => {
|
||||||
|
if (err) return res.status(500).json({ error: err.message });
|
||||||
|
if (!row) return res.status(404).json({ error: 'Not found' });
|
||||||
|
res.json(JSON.parse(row.positions));
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// API to revert to a specific revision
|
||||||
|
app.post('/api/revert', (req, res) => {
|
||||||
|
const { id } = req.body;
|
||||||
|
if (!id) {
|
||||||
|
// No id: revert to empty board
|
||||||
|
db.run('DELETE FROM positions', [], (err2) => {
|
||||||
|
if (err2) return res.status(500).json({ error: err2.message });
|
||||||
|
saveHistory('Reverted to empty board', () => {});
|
||||||
|
io.emit('update', { revert: true });
|
||||||
|
return res.json({ success: true });
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
db.get('SELECT positions FROM history WHERE id = ?', [id], (err, row) => {
|
||||||
|
if (err) return res.status(500).json({ error: err.message });
|
||||||
|
if (!row) return res.status(404).json({ error: 'Not found' });
|
||||||
|
const positions = JSON.parse(row.positions);
|
||||||
|
// Clear all positions
|
||||||
|
db.run('DELETE FROM positions', [], (err2) => {
|
||||||
|
if (err2) return res.status(500).json({ error: err2.message });
|
||||||
|
// Insert all positions from the revision
|
||||||
|
const entries = Object.entries(positions);
|
||||||
|
let done = 0;
|
||||||
|
if (entries.length === 0) {
|
||||||
|
saveHistory(`Reverted to revision ${id}`, () => {});
|
||||||
|
io.emit('update', { revert: true });
|
||||||
|
return res.json({ success: true });
|
||||||
|
}
|
||||||
|
entries.forEach(([squareId, fruit]) => {
|
||||||
|
db.run(
|
||||||
|
`INSERT INTO positions (square_id, fruit) VALUES (?, ?)`,
|
||||||
|
[squareId, fruit],
|
||||||
|
(err3) => {
|
||||||
|
done++;
|
||||||
|
if (done === entries.length) {
|
||||||
|
saveHistory(`Reverted to revision ${id}`, () => {});
|
||||||
|
io.emit('update', { revert: true });
|
||||||
|
res.json({ success: true });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Move a fruit from one square to another in a single revision
|
||||||
|
app.post('/api/move', (req, res) => {
|
||||||
|
const { fromSquareId, toSquareId, fruit } = req.body;
|
||||||
|
if (!fromSquareId || !toSquareId || !fruit) {
|
||||||
|
return res.status(400).json({ error: 'fromSquareId, toSquareId, and fruit required' });
|
||||||
|
}
|
||||||
|
db.serialize(() => {
|
||||||
|
db.run(
|
||||||
|
`UPDATE positions SET fruit='' WHERE square_id=?`,
|
||||||
|
[fromSquareId],
|
||||||
|
(err1) => {
|
||||||
|
if (err1) return res.status(500).json({ error: err1.message });
|
||||||
|
db.run(
|
||||||
|
`INSERT INTO positions (square_id, fruit)
|
||||||
|
VALUES (?, ?)
|
||||||
|
ON CONFLICT(square_id) DO UPDATE SET fruit=excluded.fruit`,
|
||||||
|
[toSquareId, fruit],
|
||||||
|
(err2) => {
|
||||||
|
if (err2) return res.status(500).json({ error: err2.message });
|
||||||
|
saveHistory(`Moved ${fruit} from ${fromSquareId} to ${toSquareId}`, () => {});
|
||||||
|
io.emit('update', { fromSquareId, toSquareId, fruit });
|
||||||
|
res.json({ success: true });
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// start server
|
||||||
|
const PORT = process.env.PORT || 3085;
|
||||||
|
server.listen(PORT, () => {
|
||||||
|
console.log(`Listening on http://localhost:${PORT}`);
|
||||||
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user