Phase 4: drone + T6/E-series + polish + deploy + README

Add drone synth + DronePlayer, wire T6 (mode over drone) and E1-E3 info pages (E3 carries a drone). Screen Wake Lock while any click/drone plays. Vitest suite for scheduler timing (no drift over 5 min) and music-layer correctness (triads, CAGED, diatonic, fretboard). Deploy artifacts: public/_redirects, multi-stage Dockerfile + nginx.conf (SPA fallback, immutable asset caching, gzip), .dockerignore. README covering build, Cloudflare Pages / nginx / Docker deploy, and the deep-link URL format. prefers-reduced-motion honored throughout. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-22 00:36:34 +02:00
parent 365aac58a0
commit 083744203b
15 changed files with 706 additions and 1 deletions
@@ -0,0 +1,127 @@
+<script lang="ts">
+  import { onDestroy } from 'svelte'
+  import { Note } from 'tonal'
+  import { CHROMATIC_ROOTS } from '../../lib/music/theory'
+  import { Drone } from '../../lib/audio/drone'
+  import { keepAwake, allowSleep } from '../../lib/wakeLock'
+
+  interface Props {
+    root?: string
+    octave?: number
+  }
+  // Bindable so a parent (T6) can tie a fretboard to the drone's root.
+  let { root = $bindable('A'), octave = $bindable(3) }: Props = $props()
+
+  let volume = $state(0.35)
+  let playing = $state(false)
+  const drone = new Drone()
+
+  let midi = $derived(Note.midi(`${root}${octave}`) ?? 57)
+
+  // Follow root/octave changes live while playing.
+  $effect(() => {
+    if (playing) drone.setNote(midi)
+  })
+
+  async function toggle() {
+    if (playing) {
+      drone.stop()
+      playing = false
+      allowSleep()
+    } else {
+      await drone.start(midi)
+      drone.setVolume(volume)
+      playing = true
+      keepAwake()
+    }
+  }
+  function onVol(e: Event) {
+    volume = Number((e.target as HTMLInputElement).value)
+    drone.setVolume(volume)
+  }
+
+  onDestroy(() => {
+    drone.stop()
+    allowSleep()
+  })
+</script>
+
+<section class="drone">
+  <button class="play" class:playing onclick={toggle} aria-label={playing ? 'Stop drone' : 'Play drone'}>
+    <span class="glyph">{playing ? '❚❚' : '▶'}</span>
+    {playing ? 'Stop drone' : 'Play drone'}
+    <span class="note num">{root}<sub>{octave}</sub></span>
+  </button>
+
+  <div class="row">
+    <span class="eyebrow">Root</span>
+    <div class="chips">
+      {#each CHROMATIC_ROOTS as r}
+        <button class="chip" class:sel={r === root} onclick={() => (root = r)}>{r}</button>
+      {/each}
+    </div>
+  </div>
+
+  <div class="row inline">
+    <div class="oct">
+      <span class="eyebrow">Octave</span>
+      <div class="chips">
+        {#each [2, 3, 4] as o}
+          <button class="chip" class:sel={o === octave} onclick={() => (octave = o)}>{o}</button>
+        {/each}
+      </div>
+    </div>
+    <label class="vol">
+      <span class="eyebrow">Volume</span>
+      <input type="range" min="0" max="1" step="0.01" value={volume} oninput={onVol} aria-label="Drone volume" />
+    </label>
+  </div>
+</section>
+
+<style>
+  .drone {
+    background: var(--walnut);
+    border: 1px solid var(--fretwire-dim);
+    border-radius: var(--radius-lg);
+    padding: 1.1rem;
+    margin-bottom: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+  .play {
+    width: 100%;
+    padding: 0.9rem;
+    font-family: var(--font-display);
+    font-size: var(--step-2);
+    background: var(--tubeglow);
+    color: #201607;
+    border: none;
+    border-radius: var(--radius);
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+  }
+  .play.playing { background: transparent; color: var(--tubeglow); border: 1px solid var(--tubeglow-soft); }
+  .note { margin-left: 0.4rem; font-weight: 500; }
+  .note sub { font-size: 0.6em; }
+  .row { display: flex; flex-direction: column; gap: 0.5rem; }
+  .row.inline { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 1rem; }
+  .chips { display: flex; gap: 0.4rem; flex-wrap: wrap; }
+  .chip {
+    min-width: 2.5rem;
+    padding: 0.4rem 0.55rem;
+    background: var(--walnut-hi);
+    border: 1px solid var(--fretwire-dim);
+    border-radius: 999px;
+    color: var(--inlay-dim);
+    font-family: var(--font-mono);
+    font-size: var(--step-0);
+    text-align: center;
+  }
+  .chip.sel { color: var(--tubeglow); border-color: var(--tubeglow-soft); }
+  .vol { display: flex; flex-direction: column; gap: 0.5rem; flex: 1; max-width: 45%; }
+  .vol input { accent-color: var(--tubeglow); width: 100%; }
+</style>