Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| fa878985f6 |
4
.gitignore
vendored
4
.gitignore
vendored
@@ -1,3 +1,3 @@
|
||||
node_modules/
|
||||
positions.db
|
||||
node_modules/
|
||||
positions.db
|
||||
.DS_Store
|
||||
@@ -6,18 +6,18 @@
|
||||
"Eric Smithson",
|
||||
"Seth Lima",
|
||||
"Rick Sanchez",
|
||||
"John Hammer"
|
||||
"Jerry Smith"
|
||||
]
|
||||
},
|
||||
{
|
||||
"name": "Ariel's Team",
|
||||
"fruits": [
|
||||
"Jerry Smith",
|
||||
"Charles Carmichael",
|
||||
"Michael Westen",
|
||||
"Shawn Spencer",
|
||||
"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",
|
||||
"version": "1.0.0",
|
||||
"main": "server.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"start": "node server.js"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"description": "",
|
||||
"dependencies": {
|
||||
"body-parser": "^2.2.0",
|
||||
"express": "^5.1.0",
|
||||
"socket.io": "^4.8.1",
|
||||
"sqlite3": "^5.1.7"
|
||||
}
|
||||
}
|
||||
{
|
||||
"name": "kitchen-organizer",
|
||||
"version": "1.0.0",
|
||||
"main": "server.js",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1",
|
||||
"start": "node server.js"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"description": "",
|
||||
"dependencies": {
|
||||
"body-parser": "^2.2.0",
|
||||
"express": "^5.1.0",
|
||||
"socket.io": "^4.8.1",
|
||||
"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>
|
||||
<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" />
|
||||
<!-- Add manifest and icons for PWA support -->
|
||||
<link rel="manifest" href="manifest.json">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-title" content="Cuberoo">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||
<link rel="apple-touch-icon" href="icon-192.png">
|
||||
<meta name="theme-color" content="#181818">
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<div class="logo">
|
||||
<img src="logo.png" alt="Logo" />
|
||||
<span>Cuberoo</span>
|
||||
</div>
|
||||
<!-- 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>
|
||||
</header>
|
||||
<div class="container">
|
||||
<!-- wrapper for the draggable map class -->
|
||||
<div id="mapWrapper" class="map-wrapper">
|
||||
<!-- Settings button in top right -->
|
||||
<button id="settingsBtn" class="settings-btn" title="Settings">
|
||||
<span></span>
|
||||
</button>
|
||||
<!-- Settings menu (hidden by default) -->
|
||||
<div id="settingsMenu" class="settings-menu" style="display:none;">
|
||||
<div class="settings-menu-content">
|
||||
<!-- Square Style toggle -->
|
||||
<div style="margin-bottom:18px;">
|
||||
<label for="squareStyleToggle" style="color:white;vertical-align:middle;">Highlight by</label>
|
||||
<button id="squareStyleToggle" type="button" style="margin-left:10px;vertical-align:middle;"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 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();
|
||||
|
||||
// Settings button/menu logic
|
||||
const settingsBtn = document.getElementById('settingsBtn');
|
||||
const settingsMenu = document.getElementById('settingsMenu');
|
||||
|
||||
settingsBtn.addEventListener('click', () => {
|
||||
settingsMenu.style.display = 'block';
|
||||
});
|
||||
// Optional: click outside menu closes it
|
||||
document.addEventListener('mousedown', (e) => {
|
||||
if (settingsMenu.style.display === 'block' &&
|
||||
!settingsMenu.contains(e.target) &&
|
||||
e.target !== settingsBtn) {
|
||||
settingsMenu.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// Filled/Outline setting logic (toggle)
|
||||
function applySquareStyle(style) {
|
||||
document.body.setAttribute('data-square-style', style);
|
||||
const btn = document.getElementById('squareStyleToggle');
|
||||
if (btn) {
|
||||
btn.textContent = style === 'filled' ? 'filling' : 'outlining';
|
||||
btn.className = style === 'filled' ? 'toggle-filled' : 'toggle-outline';
|
||||
}
|
||||
}
|
||||
function saveSquareStyle(style) {
|
||||
localStorage.setItem('squareStyle', style);
|
||||
}
|
||||
function loadSquareStyle() {
|
||||
return localStorage.getItem('squareStyle') || 'filled';
|
||||
}
|
||||
|
||||
function setupSquareStyleSetting() {
|
||||
const toggleBtn = document.getElementById('squareStyleToggle');
|
||||
if (!toggleBtn) return;
|
||||
let style = loadSquareStyle();
|
||||
applySquareStyle(style);
|
||||
toggleBtn.addEventListener('click', () => {
|
||||
style = (style === 'filled') ? 'outline' : 'filled';
|
||||
applySquareStyle(style);
|
||||
saveSquareStyle(style);
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', setupSquareStyleSetting);
|
||||
if (document.getElementById('squareStyleToggle')) setupSquareStyleSetting();
|
||||
|
||||
// Sidebar toggle for mobile
|
||||
function setupSidebarToggle() {
|
||||
const sidebar = document.getElementById('sidebar');
|
||||
const toggleBtn = document.getElementById('sidebarToggle');
|
||||
function updateSidebarDisplay() {
|
||||
if (window.innerWidth <= 900) {
|
||||
toggleBtn.style.display = '';
|
||||
sidebar.classList.remove('open');
|
||||
} else {
|
||||
toggleBtn.style.display = 'none';
|
||||
sidebar.classList.remove('open');
|
||||
}
|
||||
}
|
||||
toggleBtn.addEventListener('click', () => {
|
||||
sidebar.classList.toggle('open');
|
||||
});
|
||||
// Close sidebar when clicking outside on mobile
|
||||
document.addEventListener('mousedown', (e) => {
|
||||
if (window.innerWidth > 900) return;
|
||||
if (sidebar.classList.contains('open') && !sidebar.contains(e.target) && e.target !== toggleBtn) {
|
||||
sidebar.classList.remove('open');
|
||||
}
|
||||
});
|
||||
window.addEventListener('resize', updateSidebarDisplay);
|
||||
updateSidebarDisplay();
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded', setupSidebarToggle);
|
||||
</script>
|
||||
<script src="/socket.io/socket.io.js"></script>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</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" />
|
||||
<!-- Add manifest and icons for PWA support -->
|
||||
<link rel="manifest" href="manifest.json">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-title" content="Cuberoo">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||
<link rel="apple-touch-icon" href="icon-192.png">
|
||||
<meta name="theme-color" content="#181818">
|
||||
</head>
|
||||
<body>
|
||||
<header class="header">
|
||||
<div class="logo">
|
||||
<img src="logo.png" alt="Logo" />
|
||||
<span>Cuberoo</span>
|
||||
</div>
|
||||
<!-- 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>
|
||||
<a href="history.html" style="margin-left:24px;color:#d103f9;font-weight:bold;text-decoration:none;font-size:1.1em;">History</a>
|
||||
</header>
|
||||
<div class="container">
|
||||
<!-- wrapper for the draggable map class -->
|
||||
<div id="mapWrapper" class="map-wrapper">
|
||||
<!-- Settings button in top right -->
|
||||
<button id="settingsBtn" class="settings-btn" title="Settings">
|
||||
<span></span>
|
||||
</button>
|
||||
<!-- Settings menu (hidden by default) -->
|
||||
<div id="settingsMenu" class="settings-menu" style="display:none;">
|
||||
<div class="settings-menu-content">
|
||||
<!-- Square Style toggle -->
|
||||
<div style="margin-bottom:18px;">
|
||||
<label for="squareStyleToggle" style="color:white;vertical-align:middle;">Highlight by</label>
|
||||
<button id="squareStyleToggle" type="button" style="margin-left:10px;vertical-align:middle;"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 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();
|
||||
|
||||
// Settings button/menu logic
|
||||
const settingsBtn = document.getElementById('settingsBtn');
|
||||
const settingsMenu = document.getElementById('settingsMenu');
|
||||
|
||||
settingsBtn.addEventListener('click', () => {
|
||||
settingsMenu.style.display = 'block';
|
||||
});
|
||||
// Optional: click outside menu closes it
|
||||
document.addEventListener('mousedown', (e) => {
|
||||
if (settingsMenu.style.display === 'block' &&
|
||||
!settingsMenu.contains(e.target) &&
|
||||
e.target !== settingsBtn) {
|
||||
settingsMenu.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
// Filled/Outline setting logic (toggle)
|
||||
function applySquareStyle(style) {
|
||||
document.body.setAttribute('data-square-style', style);
|
||||
const btn = document.getElementById('squareStyleToggle');
|
||||
if (btn) {
|
||||
btn.textContent = style === 'filled' ? 'filling' : 'outlining';
|
||||
btn.className = style === 'filled' ? 'toggle-filled' : 'toggle-outline';
|
||||
}
|
||||
}
|
||||
function saveSquareStyle(style) {
|
||||
localStorage.setItem('squareStyle', style);
|
||||
}
|
||||
function loadSquareStyle() {
|
||||
return localStorage.getItem('squareStyle') || 'filled';
|
||||
}
|
||||
|
||||
function setupSquareStyleSetting() {
|
||||
const toggleBtn = document.getElementById('squareStyleToggle');
|
||||
if (!toggleBtn) return;
|
||||
let style = loadSquareStyle();
|
||||
applySquareStyle(style);
|
||||
toggleBtn.addEventListener('click', () => {
|
||||
style = (style === 'filled') ? 'outline' : 'filled';
|
||||
applySquareStyle(style);
|
||||
saveSquareStyle(style);
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', setupSquareStyleSetting);
|
||||
if (document.getElementById('squareStyleToggle')) setupSquareStyleSetting();
|
||||
|
||||
// Sidebar toggle for mobile
|
||||
function setupSidebarToggle() {
|
||||
const sidebar = document.getElementById('sidebar');
|
||||
const toggleBtn = document.getElementById('sidebarToggle');
|
||||
function updateSidebarDisplay() {
|
||||
if (window.innerWidth <= 900) {
|
||||
toggleBtn.style.display = '';
|
||||
sidebar.classList.remove('open');
|
||||
} else {
|
||||
toggleBtn.style.display = 'none';
|
||||
sidebar.classList.remove('open');
|
||||
}
|
||||
}
|
||||
toggleBtn.addEventListener('click', () => {
|
||||
sidebar.classList.toggle('open');
|
||||
});
|
||||
// Close sidebar when clicking outside on mobile
|
||||
document.addEventListener('mousedown', (e) => {
|
||||
if (window.innerWidth > 900) return;
|
||||
if (sidebar.classList.contains('open') && !sidebar.contains(e.target) && e.target !== toggleBtn) {
|
||||
sidebar.classList.remove('open');
|
||||
}
|
||||
});
|
||||
window.addEventListener('resize', updateSidebarDisplay);
|
||||
updateSidebarDisplay();
|
||||
}
|
||||
document.addEventListener('DOMContentLoaded', setupSidebarToggle);
|
||||
</script>
|
||||
<script src="/socket.io/socket.io.js"></script>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,21 +1,21 @@
|
||||
{
|
||||
"name": "Cuberoo",
|
||||
"short_name": "Cuberoo",
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"background_color": "#800080",
|
||||
"theme_color": "#800080",
|
||||
"description": "Cubes, but fun.",
|
||||
"icons": [
|
||||
{
|
||||
"src": "icon-192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "icon-512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png"
|
||||
}
|
||||
]
|
||||
}
|
||||
{
|
||||
"name": "Cuberoo",
|
||||
"short_name": "Cuberoo",
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"background_color": "#800080",
|
||||
"theme_color": "#800080",
|
||||
"description": "Cubes, but fun.",
|
||||
"icons": [
|
||||
{
|
||||
"src": "icon-192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png"
|
||||
},
|
||||
{
|
||||
"src": "icon-512.png",
|
||||
"sizes": "512x512",
|
||||
"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 */
|
||||
body, html {
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
overflow: hidden; /* disable scrollbar */
|
||||
background: black;
|
||||
color: rgb(166, 166, 166); /* text color */
|
||||
}
|
||||
.container {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
font-family: sans-serif;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* sidebar with categories */
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
margin-left: 15px;
|
||||
height: 100vh; /* take up entire vertical height */
|
||||
background: rgb(19, 19, 19);
|
||||
overflow-y: auto; /* make it scrollable */
|
||||
width: 12%; /* fixed width */
|
||||
box-sizing: border-box; /* include padding/border in width */
|
||||
}
|
||||
|
||||
.sidebar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Map layout */
|
||||
.map-wrapper {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
border: 0px solid white; /* disbale map border */
|
||||
position: relative;
|
||||
margin: 0; /* margins for map (disbaled) */
|
||||
}
|
||||
|
||||
#map {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
cursor: grab;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.map {
|
||||
display: table;
|
||||
margin-right: 30px;
|
||||
}
|
||||
.map-row {
|
||||
display: table-row;
|
||||
}
|
||||
.map-row > .square,
|
||||
.map-row > .empty {
|
||||
display: table-cell;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* what the squares look like */
|
||||
.square {
|
||||
position: relative;
|
||||
border: 1px dashed white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1.2rem;
|
||||
transition: border-color 0.5s ease, box-shadow 0.5s ease
|
||||
}
|
||||
|
||||
.square.highlight {
|
||||
border: 1px solid purple; /* highlight color when hovered over in sidebar */
|
||||
background-color: purple;
|
||||
}
|
||||
|
||||
.square.highlight-update {
|
||||
border: 1px solid purple;
|
||||
box-shadow: 0 0 10px 2px purple;
|
||||
}
|
||||
|
||||
/* the x button to clear that square (temp, make it look better later) */
|
||||
.clear-btn {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
border: none;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.square:hover .clear-btn {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* empty for when it's null */
|
||||
.empty {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* for the categories */
|
||||
.categories {
|
||||
/* make sidebar wider */
|
||||
padding: 10px;
|
||||
padding-bottom: 0px;
|
||||
border: 1px solid white; /* sidebar border color */
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.fruit {
|
||||
cursor: grab;
|
||||
margin-bottom: 10px;
|
||||
padding: 5px 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.5); /* cells inside sidebar border color */
|
||||
border-radius: 4px;
|
||||
user-select: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.fruit:active {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* what the titles of the categories */
|
||||
.categories h4 {
|
||||
text-align: center;
|
||||
margin-top: 5px; /* change this to make the titles closer to the top of the cell */
|
||||
margin-bottom: 10px;
|
||||
padding: 0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* "cuberoo" logo and text at top */
|
||||
.header {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.logo span {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
color: rgb(191, 93, 245); /* color of logo text */
|
||||
}
|
||||
|
||||
#zoomControls {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
right: 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0px;
|
||||
z-index: 100; /* this makes it appear on top of the map*/
|
||||
}
|
||||
|
||||
#zoomControls button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 1.5rem;
|
||||
background: rgb(0, 0, 0);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#zoomControls button:hover {
|
||||
background: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.dropped-fruit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.category-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.category-header h4 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.category-toggle {
|
||||
margin-left: 10px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 1.1em;
|
||||
cursor: pointer;
|
||||
padding: 0 6px;
|
||||
height: 28px;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.square-number {
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
right: 6px;
|
||||
font-size: 0.9em;
|
||||
color: #bdbdbd;
|
||||
opacity: 0.7;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.custom-fruit-input {
|
||||
border: 1px solid #d103f9;
|
||||
border-radius: 5px;
|
||||
padding: 6px 10px;
|
||||
outline: none;
|
||||
background: #181818;
|
||||
color: white;
|
||||
width: 90%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.category-selectable {
|
||||
box-shadow: 0 0 0 3px #d103f9, 0 0 10px 2px #d103f9;
|
||||
border-color: #d103f9 !important;
|
||||
cursor: pointer;
|
||||
transition: box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.category-select-msg {
|
||||
/* see JS for inline styles */
|
||||
}
|
||||
|
||||
#delete-fruit-popup {
|
||||
/* see JS for inline styles, but you can add more here if needed */
|
||||
box-shadow: 0 4px 32px #000b;
|
||||
}
|
||||
|
||||
/* Settings button in top right of map */
|
||||
.settings-btn {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
z-index: 101;
|
||||
background: rgba(30,30,30,0.95);
|
||||
border: 1px solid #d103f9;
|
||||
border-radius: 50%;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #d103f9;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 8px #0007;
|
||||
transition: background 0.2s, border-color 0.2s;
|
||||
}
|
||||
.settings-btn:hover {
|
||||
background: #2a003a;
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
/* Settings menu styles */
|
||||
.settings-menu {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
right: 16px;
|
||||
z-index: 102;
|
||||
background: #181818;
|
||||
border: 1px solid #d103f9;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 32px #000b;
|
||||
padding: 0;
|
||||
color: white;
|
||||
animation: fadeInSettings 0.2s;
|
||||
}
|
||||
@keyframes fadeInSettings {
|
||||
from { opacity: 0; transform: translateY(-10px);}
|
||||
to { opacity: 1; transform: translateY(0);}
|
||||
}
|
||||
.settings-menu-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 14px 18px 10px 18px;
|
||||
border-bottom: 1px solid #333;
|
||||
font-size: 1.1em;
|
||||
font-weight: bold;
|
||||
color: #d103f9;
|
||||
}
|
||||
.close-settings-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #d103f9;
|
||||
font-size: 1.2em;
|
||||
cursor: pointer;
|
||||
padding: 0 4px;
|
||||
border-radius: 4px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.close-settings-btn:hover {
|
||||
background: #2a003a;
|
||||
}
|
||||
.settings-menu-content {
|
||||
padding: 20px;
|
||||
padding-bottom: 0px;
|
||||
color: white;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/* Square Style toggle button */
|
||||
#squareStyleToggle {
|
||||
padding: 6px 18px;
|
||||
border-radius: 6px;
|
||||
border: 1.5px solid #d103f9;
|
||||
background: #191919;
|
||||
color: #d103f9;
|
||||
font-weight: bold;
|
||||
font-size: 1em;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, color 0.15s, border-color 0.15s;
|
||||
outline: none;
|
||||
}
|
||||
#squareStyleToggle.toggle-filled {
|
||||
background: #d103f9;
|
||||
color: white;
|
||||
border-color: #d103f9;
|
||||
}
|
||||
#squareStyleToggle.toggle-outline {
|
||||
background: #191919;
|
||||
color: #d103f9;
|
||||
border-color: #d103f9;
|
||||
}
|
||||
#squareStyleToggle:hover {
|
||||
background: #2a003a;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Filled/Outline toggle logic */
|
||||
body[data-square-style="filled"] .square.highlight {
|
||||
border: 1px solid purple;
|
||||
background-color: purple;
|
||||
}
|
||||
body[data-square-style="filled"] .square.highlight-update {
|
||||
border: 1px solid purple;
|
||||
box-shadow: 0 0 10px 2px purple;
|
||||
}
|
||||
body[data-square-style="outline"] .square.highlight {
|
||||
border: 1px solid #d103f9;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
body[data-square-style="outline"] .square.highlight-update {
|
||||
border: 1px solid #d103f9;
|
||||
background-color: transparent !important;
|
||||
box-shadow: 0 0 10px 2px #d103f9;
|
||||
}
|
||||
|
||||
/* Responsive adjustments for mobile */
|
||||
@media (max-width: 900px) {
|
||||
.container {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
padding: 0;
|
||||
}
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 35vw; /* was 80vw, now 60vw for less width */
|
||||
max-width: 240px; /* was 350px, now 240px for less width */
|
||||
height: 100vh;
|
||||
z-index: 1001;
|
||||
background: #181818;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.3s;
|
||||
box-shadow: 2px 0 16px #000a;
|
||||
margin: 0;
|
||||
}
|
||||
.sidebar.open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
.map-wrapper {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
}
|
||||
#zoomControls {
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Make squares and map responsive */
|
||||
@media (max-width: 900px) {
|
||||
.map-row > .square,
|
||||
.map-row > .empty {
|
||||
width: 13vw;
|
||||
height: 13vw;
|
||||
min-width: 48px;
|
||||
min-height: 48px;
|
||||
max-width: 80px;
|
||||
max-height: 80px;
|
||||
}
|
||||
.square {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
/* Touch-friendly buttons and inputs */
|
||||
button, input, .fruit, .clear-btn {
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.clear-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
/* Make popup and overlays scrollable on mobile */
|
||||
#delete-fruit-popup, .settings-menu {
|
||||
max-width: 95vw;
|
||||
box-sizing: border-box;
|
||||
word-break: break-word;
|
||||
/* fullscreen flex container */
|
||||
body, html {
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
overflow: hidden; /* disable scrollbar */
|
||||
background: black;
|
||||
color: rgb(166, 166, 166); /* text color */
|
||||
}
|
||||
.container {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
font-family: sans-serif;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* sidebar with categories */
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
margin-left: 15px;
|
||||
height: 100vh; /* take up entire vertical height */
|
||||
background: rgb(19, 19, 19);
|
||||
overflow-y: auto; /* make it scrollable */
|
||||
width: 12%; /* fixed width */
|
||||
box-sizing: border-box; /* include padding/border in width */
|
||||
}
|
||||
|
||||
.sidebar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Map layout */
|
||||
.map-wrapper {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
border: 0px solid white; /* disbale map border */
|
||||
position: relative;
|
||||
margin: 0; /* margins for map (disbaled) */
|
||||
}
|
||||
|
||||
#map {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
cursor: grab;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.map {
|
||||
display: table;
|
||||
margin-right: 30px;
|
||||
}
|
||||
.map-row {
|
||||
display: table-row;
|
||||
}
|
||||
.map-row > .square,
|
||||
.map-row > .empty {
|
||||
display: table-cell;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* what the squares look like */
|
||||
.square {
|
||||
position: relative;
|
||||
border: 1px dashed white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 1.2rem;
|
||||
transition: border-color 0.5s ease, box-shadow 0.5s ease
|
||||
}
|
||||
|
||||
.square.highlight {
|
||||
border: 1px solid purple; /* highlight color when hovered over in sidebar */
|
||||
background-color: purple;
|
||||
}
|
||||
|
||||
.square.highlight-update {
|
||||
border: 1px solid purple;
|
||||
box-shadow: 0 0 10px 2px purple;
|
||||
}
|
||||
|
||||
/* the x button to clear that square (temp, make it look better later) */
|
||||
.clear-btn {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
border: none;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.square:hover .clear-btn {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
/* empty for when it's null */
|
||||
.empty {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* for the categories */
|
||||
.categories {
|
||||
/* make sidebar wider */
|
||||
padding: 10px;
|
||||
padding-bottom: 0px;
|
||||
border: 1px solid white; /* sidebar border color */
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.fruit {
|
||||
cursor: grab;
|
||||
margin-bottom: 10px;
|
||||
padding: 5px 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.5); /* cells inside sidebar border color */
|
||||
border-radius: 4px;
|
||||
user-select: none;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.fruit:active {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* what the titles of the categories */
|
||||
.categories h4 {
|
||||
text-align: center;
|
||||
margin-top: 5px; /* change this to make the titles closer to the top of the cell */
|
||||
margin-bottom: 10px;
|
||||
padding: 0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* "cuberoo" logo and text at top */
|
||||
.header {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.logo span {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
color: rgb(191, 93, 245); /* color of logo text */
|
||||
}
|
||||
|
||||
#zoomControls {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
right: 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0px;
|
||||
z-index: 100; /* this makes it appear on top of the map*/
|
||||
}
|
||||
|
||||
#zoomControls button {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 1.5rem;
|
||||
background: rgb(0, 0, 0);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#zoomControls button:hover {
|
||||
background: rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
.dropped-fruit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.category-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.category-header h4 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.category-toggle {
|
||||
margin-left: 10px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 1.1em;
|
||||
cursor: pointer;
|
||||
padding: 0 6px;
|
||||
height: 28px;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.square-number {
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
right: 6px;
|
||||
font-size: 0.9em;
|
||||
color: #bdbdbd;
|
||||
opacity: 0.7;
|
||||
pointer-events: none;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.custom-fruit-input {
|
||||
border: 1px solid #d103f9;
|
||||
border-radius: 5px;
|
||||
padding: 6px 10px;
|
||||
outline: none;
|
||||
background: #181818;
|
||||
color: white;
|
||||
width: 90%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.category-selectable {
|
||||
box-shadow: 0 0 0 3px #d103f9, 0 0 10px 2px #d103f9;
|
||||
border-color: #d103f9 !important;
|
||||
cursor: pointer;
|
||||
transition: box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.category-select-msg {
|
||||
/* see JS for inline styles */
|
||||
}
|
||||
|
||||
#delete-fruit-popup {
|
||||
/* see JS for inline styles, but you can add more here if needed */
|
||||
box-shadow: 0 4px 32px #000b;
|
||||
}
|
||||
|
||||
/* Settings button in top right of map */
|
||||
.settings-btn {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
z-index: 101;
|
||||
background: rgba(30,30,30,0.95);
|
||||
border: 1px solid #d103f9;
|
||||
border-radius: 50%;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #d103f9;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 8px #0007;
|
||||
transition: background 0.2s, border-color 0.2s;
|
||||
}
|
||||
.settings-btn:hover {
|
||||
background: #2a003a;
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
/* Settings menu styles */
|
||||
.settings-menu {
|
||||
position: absolute;
|
||||
top: 70px;
|
||||
right: 16px;
|
||||
z-index: 102;
|
||||
background: #181818;
|
||||
border: 1px solid #d103f9;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 32px #000b;
|
||||
padding: 0;
|
||||
color: white;
|
||||
animation: fadeInSettings 0.2s;
|
||||
}
|
||||
@keyframes fadeInSettings {
|
||||
from { opacity: 0; transform: translateY(-10px);}
|
||||
to { opacity: 1; transform: translateY(0);}
|
||||
}
|
||||
.settings-menu-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 14px 18px 10px 18px;
|
||||
border-bottom: 1px solid #333;
|
||||
font-size: 1.1em;
|
||||
font-weight: bold;
|
||||
color: #d103f9;
|
||||
}
|
||||
.close-settings-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #d103f9;
|
||||
font-size: 1.2em;
|
||||
cursor: pointer;
|
||||
padding: 0 4px;
|
||||
border-radius: 4px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
.close-settings-btn:hover {
|
||||
background: #2a003a;
|
||||
}
|
||||
.settings-menu-content {
|
||||
padding: 20px;
|
||||
padding-bottom: 0px;
|
||||
color: white;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
/* Square Style toggle button */
|
||||
#squareStyleToggle {
|
||||
padding: 6px 18px;
|
||||
border-radius: 6px;
|
||||
border: 1.5px solid #d103f9;
|
||||
background: #191919;
|
||||
color: #d103f9;
|
||||
font-weight: bold;
|
||||
font-size: 1em;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s, color 0.15s, border-color 0.15s;
|
||||
outline: none;
|
||||
}
|
||||
#squareStyleToggle.toggle-filled {
|
||||
background: #d103f9;
|
||||
color: white;
|
||||
border-color: #d103f9;
|
||||
}
|
||||
#squareStyleToggle.toggle-outline {
|
||||
background: #191919;
|
||||
color: #d103f9;
|
||||
border-color: #d103f9;
|
||||
}
|
||||
#squareStyleToggle:hover {
|
||||
background: #2a003a;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Filled/Outline toggle logic */
|
||||
body[data-square-style="filled"] .square.highlight {
|
||||
border: 1px solid purple;
|
||||
background-color: purple;
|
||||
}
|
||||
body[data-square-style="filled"] .square.highlight-update {
|
||||
border: 1px solid purple;
|
||||
box-shadow: 0 0 10px 2px purple;
|
||||
}
|
||||
body[data-square-style="outline"] .square.highlight {
|
||||
border: 1px solid #d103f9;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
body[data-square-style="outline"] .square.highlight-update {
|
||||
border: 1px solid #d103f9;
|
||||
background-color: transparent !important;
|
||||
box-shadow: 0 0 10px 2px #d103f9;
|
||||
}
|
||||
|
||||
/* Responsive adjustments for mobile */
|
||||
@media (max-width: 900px) {
|
||||
.container {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
padding: 0;
|
||||
}
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 35vw; /* was 80vw, now 60vw for less width */
|
||||
max-width: 240px; /* was 350px, now 240px for less width */
|
||||
height: 100vh;
|
||||
z-index: 1001;
|
||||
background: #181818;
|
||||
transform: translateX(-100%);
|
||||
transition: transform 0.3s;
|
||||
box-shadow: 2px 0 16px #000a;
|
||||
margin: 0;
|
||||
}
|
||||
.sidebar.open {
|
||||
transform: translateX(0);
|
||||
}
|
||||
.map-wrapper {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
}
|
||||
#zoomControls {
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Make squares and map responsive */
|
||||
@media (max-width: 900px) {
|
||||
.map-row > .square,
|
||||
.map-row > .empty {
|
||||
width: 13vw;
|
||||
height: 13vw;
|
||||
min-width: 48px;
|
||||
min-height: 48px;
|
||||
max-width: 80px;
|
||||
max-height: 80px;
|
||||
}
|
||||
.square {
|
||||
font-size: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
/* Touch-friendly buttons and inputs */
|
||||
button, input, .fruit, .clear-btn {
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.clear-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
/* Make popup and overlays scrollable on mobile */
|
||||
#delete-fruit-popup, .settings-menu {
|
||||
max-width: 95vw;
|
||||
box-sizing: border-box;
|
||||
word-break: break-word;
|
||||
}
|
||||
403
server.js
403
server.js
@@ -1,141 +1,262 @@
|
||||
// server.js
|
||||
const express = require('express');
|
||||
const bodyParser = require('body-parser');
|
||||
const sqlite3 = require('sqlite3').verbose();
|
||||
const path = require('path');
|
||||
const http = require('http');
|
||||
const { Server } = require('socket.io');
|
||||
const fs = require('fs');
|
||||
|
||||
const app = express();
|
||||
const server = http.createServer(app);
|
||||
const io = new Server(server);
|
||||
|
||||
app.use(bodyParser.json());
|
||||
app.use(express.static(path.join(__dirname, 'public')));
|
||||
|
||||
// open (or create) the SQLite database file
|
||||
const db = new sqlite3.Database('positions.db', err => {
|
||||
if (err) {
|
||||
console.error('Could not open DB', err);
|
||||
process.exit(1);
|
||||
}
|
||||
});
|
||||
|
||||
// create table if not exists
|
||||
db.run(
|
||||
`CREATE TABLE IF NOT EXISTS positions (
|
||||
square_id TEXT PRIMARY KEY,
|
||||
fruit TEXT
|
||||
)`,
|
||||
(err) => {
|
||||
if (err) console.error('Could not ensure table', err);
|
||||
}
|
||||
);
|
||||
|
||||
// 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 });
|
||||
// convert to an object. should look like this: { "1": "Apple", "2": "Banana", … }
|
||||
const mapping = {};
|
||||
rows.forEach(r => (mapping[r.square_id] = r.fruit));
|
||||
res.json(mapping);
|
||||
});
|
||||
});
|
||||
|
||||
// save (or update) a single square’s item
|
||||
app.post('/api/positions', (req, res) => {
|
||||
const { squareId, fruit } = req.body;
|
||||
if (!squareId || typeof fruit !== 'string') {
|
||||
return res.status(400).json({ error: 'squareId and fruit required' });
|
||||
}
|
||||
db.run(
|
||||
`INSERT INTO positions (square_id, fruit)
|
||||
VALUES (?, ?)
|
||||
ON CONFLICT(square_id) DO UPDATE SET fruit=excluded.fruit`,
|
||||
[squareId, fruit],
|
||||
function (err) {
|
||||
if (err) return res.status(500).json({ error: err.message });
|
||||
// broadcast update via Socket.io
|
||||
io.emit('update', { squareId, fruit });
|
||||
res.json({ success: true });
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
// Serve categories and fruits from a JSON file
|
||||
app.get('/api/categories', (req, res) => {
|
||||
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' });
|
||||
try {
|
||||
const categories = JSON.parse(data);
|
||||
res.json(categories);
|
||||
} catch (e) {
|
||||
res.status(500).json({ error: 'Invalid categories file' });
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Add a fruit to a category in categories.json
|
||||
app.post('/api/add-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' });
|
||||
// Prevent duplicates
|
||||
if (cat.fruits.includes(fruit)) {
|
||||
return res.status(400).json({ error: 'Fruit already exists in category' });
|
||||
}
|
||||
cat.fruits.push(fruit);
|
||||
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 });
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Delete a fruit from a category in categories.json
|
||||
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 });
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// start server
|
||||
const PORT = process.env.PORT || 3085;
|
||||
server.listen(PORT, () => {
|
||||
console.log(`Listening on http://localhost:${PORT}`);
|
||||
});
|
||||
// server.js
|
||||
const express = require('express');
|
||||
const bodyParser = require('body-parser');
|
||||
const sqlite3 = require('sqlite3').verbose();
|
||||
const path = require('path');
|
||||
const http = require('http');
|
||||
const { Server } = require('socket.io');
|
||||
const fs = require('fs');
|
||||
|
||||
const app = express();
|
||||
const server = http.createServer(app);
|
||||
const io = new Server(server);
|
||||
|
||||
app.use(bodyParser.json());
|
||||
app.use(express.static(path.join(__dirname, 'public')));
|
||||
|
||||
// open (or create) the SQLite database file
|
||||
const db = new sqlite3.Database('positions.db', err => {
|
||||
if (err) {
|
||||
console.error('Could not open DB', err);
|
||||
process.exit(1);
|
||||
}
|
||||
});
|
||||
|
||||
// create table if not exists
|
||||
db.run(
|
||||
`CREATE TABLE IF NOT EXISTS positions (
|
||||
square_id TEXT PRIMARY KEY,
|
||||
fruit TEXT
|
||||
)`,
|
||||
(err) => {
|
||||
if (err) console.error('Could not ensure table', err);
|
||||
}
|
||||
);
|
||||
|
||||
// Add a table for history (revision log)
|
||||
db.run(
|
||||
`CREATE TABLE IF NOT EXISTS history (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
timestamp DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||
action TEXT,
|
||||
positions TEXT -- JSON string of all positions
|
||||
)`,
|
||||
(err) => {
|
||||
if (err) console.error('Could not ensure history table', err);
|
||||
}
|
||||
);
|
||||
|
||||
// Helper to save a revision to history
|
||||
function saveHistory(action, cb) {
|
||||
db.all('SELECT square_id, fruit FROM positions', (err, rows) => {
|
||||
if (err) return cb && cb(err);
|
||||
const mapping = {};
|
||||
rows.forEach(r => (mapping[r.square_id] = r.fruit));
|
||||
db.run(
|
||||
'INSERT INTO history (action, positions) VALUES (?, ?)',
|
||||
[action, JSON.stringify(mapping)],
|
||||
cb
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
// 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 });
|
||||
// convert to an object. should look like this: { "1": "Apple", "2": "Banana", … }
|
||||
const mapping = {};
|
||||
rows.forEach(r => (mapping[r.square_id] = r.fruit));
|
||||
res.json(mapping);
|
||||
});
|
||||
});
|
||||
|
||||
// save (or update) a single square’s item
|
||||
app.post('/api/positions', (req, res) => {
|
||||
const { squareId, fruit } = req.body;
|
||||
if (!squareId || typeof fruit !== 'string') {
|
||||
return res.status(400).json({ error: 'squareId and fruit required' });
|
||||
}
|
||||
db.run(
|
||||
`INSERT INTO positions (square_id, fruit)
|
||||
VALUES (?, ?)
|
||||
ON CONFLICT(square_id) DO UPDATE SET fruit=excluded.fruit`,
|
||||
[squareId, fruit],
|
||||
function (err) {
|
||||
if (err) return res.status(500).json({ error: err.message });
|
||||
// Save to history
|
||||
saveHistory(`Moved ${fruit} to '${squareId}'`, () => {});
|
||||
// broadcast update via Socket.io
|
||||
io.emit('update', { squareId, fruit });
|
||||
res.json({ success: true });
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
// Serve categories and fruits from a JSON file
|
||||
app.get('/api/categories', (req, res) => {
|
||||
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' });
|
||||
try {
|
||||
const categories = JSON.parse(data);
|
||||
res.json(categories);
|
||||
} catch (e) {
|
||||
res.status(500).json({ error: 'Invalid categories file' });
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Add a fruit to a category in categories.json
|
||||
app.post('/api/add-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' });
|
||||
// Prevent duplicates
|
||||
if (cat.fruits.includes(fruit)) {
|
||||
return res.status(400).json({ error: 'Fruit already exists in category' });
|
||||
}
|
||||
cat.fruits.push(fruit);
|
||||
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 });
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Delete a fruit from a category in categories.json
|
||||
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