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 // #/<instrument>, optionally ?<settings> from a shared link (the page reads and removes them)
19 const id = location.hash.replace(/^#\/?/, '').split('?')[0];
20 const inst = INSTRUMENTS.find((i) => i.id === id && i.mount);
21 window.scrollTo(0, 0);
22 if (!inst) return gallery();
23 document.title = `${inst.name} · Toy instruments`;
24 app.replaceChildren();
25 inst.mount!(app);
26}
28window.addEventListener('hashchange', route);
29route();