immortaly007
083744203b
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>
128 lines
3.6 KiB
Svelte
128 lines
3.6 KiB
Svelte
<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>
|