4a8abcfString of beads: 3D bead-spring solver, control panel, waveform, spectrogram, wav, displacement viewerJeremy Magland 1import './style.css';
2import { INSTRUMENTS } from './instruments/registry';
4const app = document.getElementById('app')!;
6function gallery() {
7 app.innerHTML = `
8 <header class="hero"><h1>Toy instruments</h1>
9 <p class="sub">Idealized physical models you can configure, simulate and listen to. Pick an instrument.</p></header>
10 <div class="gallery">${INSTRUMENTS.map(
11 (i) => `<a class="tile${i.mount ? '' : ' soon'}" ${i.mount ? `href="#/${i.id}"` : 'aria-disabled="true"'}>
12 <h2>${i.name}</h2><p>${i.blurb}</p>${i.mount ? '' : '<span class="badge">Coming later</span>'}</a>`,
13 ).join('')}</div>`;
14 document.title = 'Toy instruments';
15}
17function route() {
18 const id = location.hash.replace(/^#\/?/, '');
19 const inst = INSTRUMENTS.find((i) => i.id === id && i.mount);
20 window.scrollTo(0, 0);
21 if (!inst) return gallery();
22 document.title = `${inst.name} · Toy instruments`;
23 app.replaceChildren();
24 inst.mount!(app);
25}
27window.addEventListener('hashchange', route);
28route();