144 lines
3.9 KiB
HTML
144 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>p5.js Sketch Selector</title>
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<script src="js/p5.js"></script>
|
|
<script src="js/addons/p5.sound.min.js"></script>
|
|
<style>
|
|
#sketch-selector {
|
|
position: fixed;
|
|
top: 10px;
|
|
right: 10px;
|
|
background: rgba(255, 255, 255, 0.9);
|
|
padding: 8px 12px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 6px rgba(0,0,0,0.2);
|
|
font-family: sans-serif;
|
|
z-index: 1000;
|
|
font-size: 14px;
|
|
}
|
|
select, button {
|
|
margin-left: 5px;
|
|
}
|
|
#status {
|
|
position: fixed;
|
|
bottom: 10px;
|
|
right: 10px;
|
|
background: rgba(0,0,0,0.7);
|
|
color: white;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
font-family: monospace;
|
|
font-size: 12px;
|
|
z-index: 1000;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="sketch-selector">
|
|
<label>Sketch: </label>
|
|
<select id="sketchSelect"></select>
|
|
<button id="loadBtn">Load</button>
|
|
</div>
|
|
<div id="status">No sketch loaded.</div>
|
|
|
|
<script>
|
|
// Helper: reload page with selected sketch
|
|
function reloadWithSketch(filename) {
|
|
if (filename) {
|
|
window.location.search = `?sketch=${encodeURIComponent(filename)}`;
|
|
} else {
|
|
window.location.search = ''; // clear
|
|
}
|
|
}
|
|
|
|
// Fallback list of sketch files (if auto-detection fails)
|
|
const FALLBACK_SKETCHES = [
|
|
"calmCircles.js",
|
|
"Cubes.js",
|
|
"labyrinth.js",
|
|
"RecursiveCubes.js",
|
|
"image.js"
|
|
];
|
|
|
|
// Auto-detect .js files in the same directory
|
|
async function detectSketches() {
|
|
try {
|
|
const response = await fetch(window.location.pathname);
|
|
const html = await response.text();
|
|
const parser = new DOMParser();
|
|
const doc = parser.parseFromString(html, 'text/html');
|
|
const links = doc.querySelectorAll('a');
|
|
const jsFiles = [];
|
|
for (let link of links) {
|
|
const href = link.getAttribute('href');
|
|
if (href && href.endsWith('.js') && !href.includes('/') && !href.includes('p5')) {
|
|
jsFiles.push(href);
|
|
}
|
|
}
|
|
if (jsFiles.length > 0) return jsFiles;
|
|
} catch (err) {
|
|
console.warn('Auto-detection failed, using fallback list:', err);
|
|
}
|
|
return FALLBACK_SKETCHES;
|
|
}
|
|
|
|
// Update dropdown with detected sketch files
|
|
function updateDropdown(selectElement, sketches, currentSketch) {
|
|
selectElement.innerHTML = '';
|
|
for (let sk of sketches) {
|
|
const option = document.createElement('option');
|
|
option.value = "sketches/"+sk;
|
|
option.textContent = sk;
|
|
if (sk === currentSketch) option.selected = true;
|
|
selectElement.appendChild(option);
|
|
}
|
|
}
|
|
|
|
// Main initialisation
|
|
(async function() {
|
|
const sketches = await detectSketches();
|
|
const currentSketch = new URLSearchParams(window.location.search).get('sketch');
|
|
const selectEl = document.getElementById('sketchSelect');
|
|
const loadBtn = document.getElementById('loadBtn');
|
|
const statusEl = document.getElementById('status');
|
|
|
|
// Fill dropdown
|
|
updateDropdown(selectEl, sketches, currentSketch);
|
|
|
|
// Show current sketch in status
|
|
if (currentSketch && sketches.includes(currentSketch)) {
|
|
statusEl.textContent = `Running: ${currentSketch}`;
|
|
} else {
|
|
statusEl.textContent = 'No sketch selected.';
|
|
}
|
|
|
|
// Handle load button: reload page with selected sketch
|
|
loadBtn.addEventListener('click', () => {
|
|
const selected = selectEl.value;
|
|
if (selected) {
|
|
reloadWithSketch(selected);
|
|
}
|
|
});
|
|
})();
|
|
</script>
|
|
|
|
<!--
|
|
Synchronously load the sketch specified in the URL parameter.
|
|
This must be placed after the selector UI but before any other dynamic scripts.
|
|
It ensures the sketch's setup() and draw() are defined before p5.js finishes loading.
|
|
-->
|
|
<script>
|
|
(function() {
|
|
const params = new URLSearchParams(window.location.search);
|
|
const sketchFile = params.get('sketch');
|
|
if (sketchFile) {
|
|
document.write('<script src="' + sketchFile + '"><\/script>');
|
|
}
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html> |