import './style.css';
import { INSTRUMENTS } from './instruments/registry';

const app = document.getElementById('app')!;

function gallery() {
  app.innerHTML = `
    <header class="hero"><h1>Toy instruments</h1>
    <p class="sub">Idealized physical models you can configure, simulate and listen to. Pick an instrument.</p></header>
    <div class="gallery">${INSTRUMENTS.map(
      (i) => `<a class="tile${i.mount ? '' : ' soon'}" ${i.mount ? `href="#/${i.id}"` : 'aria-disabled="true"'}>
        <h2>${i.name}</h2><p>${i.blurb}</p>${i.mount ? '' : '<span class="badge">Coming later</span>'}</a>`,
    ).join('')}</div>`;
  document.title = 'Toy instruments';
}

function route() {
  // #/<instrument>, optionally ?<settings> from a shared link (the page reads and removes them)
  const id = location.hash.replace(/^#\/?/, '').split('?')[0];
  const inst = INSTRUMENTS.find((i) => i.id === id && i.mount);
  window.scrollTo(0, 0);
  if (!inst) return gallery();
  document.title = `${inst.name} · Toy instruments`;
  app.replaceChildren();
  inst.mount!(app);
}

window.addEventListener('hashchange', route);
route();