@greenblacksky/honmoon 0.0.0-stage → 0.4.1

package/src/lib/ui/AccRow.svelte

@@ -0,0 +1,23 @@
+<!-- The sharps-and-flats switch, shown in both the places you might look for it:
+     beside the range on the neck screen, and in Setup under Notes. -->
+<script lang="ts">
+  import { setSetting } from '../store/honmoon.svelte';
+  import { accOn } from '../music/bass';
+  const on = $derived(accOn());
+</script>
+
+<div class="setrow">
+  <span class="lbl">Sharps and flats</span>
+  <button
+    class="chip sm"
+    data-set="acc"
+    data-val={String(!on)}
+    aria-pressed={on}
+    onclick={() => setSetting('acc', !on)}>{on ? 'In' : 'Out'}</button
+  >
+  <span class="hint"
+    >{on
+      ? 'All twelve notes are in rotation. Which name a black note gets — F♯ or G♭ — follows the sharps-or-flats choice below.'
+      : 'Only the seven natural notes: A B C D E F G. Switch this on when those feel automatic, and the five black notes join in — on the neck, on the staff, and in every drill that names a note.'}</span
+  >
+</div>

package/src/lib/ui/BackBar.svelte

@@ -0,0 +1,23 @@
+<!-- The bar at the top of a sub-screen: a way back on the left, a title on the right. -->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  interface Props {
+    label: string;
+    onBack: () => void;
+    title?: string;
+    id?: string;
+    /** wrap in a .sec like most screens do */
+    sec?: boolean;
+    extra?: Snippet;
+  }
+  const { label, onBack, title = '', id = 'back', sec = false, extra }: Props = $props();
+</script>
+
+{#snippet bar()}
+  <div class="bar">
+    <button class="ghost" {id} onclick={onBack}>← {label}</button>
+    {@render extra?.()}
+    <span class="spacer"></span><span class="tick">{title}</span>
+  </div>
+{/snippet}
+{#if sec}<div class="sec">{@render bar()}</div>{:else}{@render bar()}{/if}

package/src/lib/ui/BassRow.svelte

@@ -0,0 +1,30 @@
+<!-- One control, offered wherever a session is about to start: is the bass in the room? -->
+<script lang="ts">
+  import { setSetting } from '../store/honmoon.svelte';
+  import { bassHere } from '../music/bass';
+  const on = $derived(bassHere());
+</script>
+
+<div>
+  <div class="hint" style="margin-bottom:6px">Bass</div>
+  <div class="levels">
+    <button
+      class="chip sm"
+      data-set="bass"
+      data-val="true"
+      aria-pressed={on}
+      onclick={() => setSetting('bass', true)}>With me</button
+    >
+    <button
+      class="chip sm"
+      data-set="bass"
+      data-val="false"
+      aria-pressed={!on}
+      onclick={() => setSetting('bass', false)}>Left at home</button
+    >
+  </div>
+  {#if !on}<p class="note" style="margin-top:6px">
+      The play-along drills are out until you say otherwise. Everything else works with nothing but
+      the screen.
+    </p>{/if}
+</div>

package/src/lib/ui/Chips.svelte

@@ -0,0 +1,23 @@
+<!-- A row of choice chips, exactly one pressed. -->
+<script lang="ts" generics="T">
+  interface Props {
+    items: { v: T; label: string }[];
+    value: T;
+    onPick: (v: T) => void;
+    sm?: boolean;
+    /** extra attributes for tests: data-set="<name>" on each chip */
+    name?: string;
+  }
+  const { items, value, onPick, sm = true, name }: Props = $props();
+</script>
+
+{#each items as it (String(it.v))}
+  <button
+    class="chip"
+    class:sm
+    data-set={name}
+    data-val={String(it.v)}
+    aria-pressed={value === it.v}
+    onclick={() => onPick(it.v)}>{@html it.label}</button
+  >
+{/each}

package/src/lib/ui/DataCard.svelte

@@ -0,0 +1,66 @@
+<!--
+  A copy of your progress you can keep, and a way to bring one back. Until
+  Firebase sync is set up this is the only backup there is: clearing the
+  browser's data, or uninstalling the app from the home screen, loses it.
+-->
+<script lang="ts">
+  import { exportText, importText } from '../store/honmoon.svelte';
+  const { appId = 'honmoon' }: { appId?: string } = $props();
+  let msg = $state('');
+  let input: HTMLInputElement;
+
+  function exportNow() {
+    const blob = new Blob([exportText()], { type: 'application/json' });
+    const link = document.createElement('a');
+    const today = new Date().toISOString().slice(0, 10);
+    link.href = URL.createObjectURL(blob);
+    link.download = appId + '-progress-' + today + '.json';
+    document.body.appendChild(link);
+    link.click();
+    setTimeout(() => {
+      URL.revokeObjectURL(link.href);
+      link.remove();
+    }, 1000);
+    msg = 'Saved ' + link.download + ' to your downloads.';
+  }
+  async function picked(event: Event) {
+    const file = (event.target as HTMLInputElement).files?.[0];
+    if (!file) {
+      return;
+    }
+    const text = await file.text();
+    if (
+      !confirm(
+        'Replace the progress in this app with the file you picked? Your settings stay as they are.',
+      )
+    ) {
+      input.value = '';
+      return;
+    }
+    msg = importText(text).msg;
+    input.value = '';
+  }
+</script>
+
+<div class="sec">
+  <h2>Your data</h2>
+  <div class="card stack">
+    <p class="note">
+      Progress is kept in this browser only. Save a copy now and then — clearing the browser's data
+      or removing the app from your home screen would lose it. A file saved from Fretboard Fluency
+      can be brought in here too.
+    </p>
+    <div class="bar">
+      <button class="ghost" id="exportprog" onclick={exportNow}>Save a copy</button>
+      <button class="ghost" id="importprog" onclick={() => input.click()}>Bring one back</button>
+      <input
+        bind:this={input}
+        type="file"
+        accept="application/json,.json"
+        hidden
+        onchange={picked}
+      />
+    </div>
+    {#if msg}<p class="note" style="margin:0">{msg}</p>{/if}
+  </div>
+</div>

package/src/lib/ui/Fretboard.svelte

@@ -0,0 +1,71 @@
+<!--
+  The bass neck, plus — when it can be tapped — a layer of real HTML buttons
+  positioned over it in percentages of the drawing. Reliable everywhere,
+  unlike transparent SVG hit areas, and reachable from a keyboard.
+-->
+<script lang="ts">
+  import { percentBox } from './overlay';
+  import { fbCell, fbDims, fretboardSVG, type FretboardOpts } from '../notation/fretboard';
+  import { STRINGS } from '../music/bass';
+
+  interface Props extends FretboardOpts {
+    /** restrict the tappable spots to these */
+    only?: { s: number; f: number }[] | null;
+    onTap?: (s: number, f: number, scrollLeft: number) => void;
+  }
+  const { onTap, only = null, ...options }: Props = $props();
+
+  const lo = $derived(options.lo || 0);
+  const hi = $derived(options.hi == null ? 12 : options.hi);
+  const size = $derived(fbDims(lo, hi));
+  const svg = $derived(fretboardSVG(options));
+  const spotKey = (string: number, fret: number) => string + ':' + fret;
+  const targets = $derived.by(() => {
+    if (!options.tap) {
+      return [];
+    }
+    const allowed = only ? only.map((spot) => spotKey(spot.s, spot.f)) : null;
+    const out: { s: number; f: number; style: string; label: string }[] = [];
+    for (let string = 0; string < STRINGS.length; string++) {
+      if (options.onlyString != null && string !== options.onlyString) {
+        continue;
+      }
+      for (let fret = lo; fret <= hi; fret++) {
+        if (allowed && !allowed.includes(spotKey(string, fret))) {
+          continue;
+        }
+        out.push({
+          s: string,
+          f: fret,
+          label: STRINGS[string].n + ' string, fret ' + fret,
+          style: percentBox(fbCell(lo, string, fret), size.W, size.H),
+        });
+      }
+    }
+    return out;
+  });
+
+  function tap(event: MouseEvent, string: number, fret: number) {
+    const wrap = (event.currentTarget as HTMLElement).closest('.fbwrap') as HTMLElement | null;
+    onTap?.(string, fret, wrap ? wrap.scrollLeft : 0);
+  }
+</script>
+
+<div class="fbstage">
+  {@html svg}
+  {#if options.tap}
+    <div class="taplayer">
+      {#each targets as target (spotKey(target.s, target.f))}
+        <button
+          class="hit"
+          type="button"
+          data-s={target.s}
+          data-f={target.f}
+          aria-label={target.label}
+          style={target.style}
+          onclick={(event) => tap(event, target.s, target.f)}
+        ></button>
+      {/each}
+    </div>
+  {/if}
+</div>

package/src/lib/ui/Keyboard.svelte

@@ -0,0 +1,54 @@
+<!--
+  A piano keyboard. Real buttons over the drawing, the same trick the
+  fretboard uses, for the same reasons: transparent SVG hit areas are
+  unreliable on touch, and buttons can be reached from a keyboard. Black keys
+  come last so they sit above the white ones they overlap.
+-->
+<script lang="ts">
+  import { percentBox } from './overlay';
+  import { kbDims, kbKeys, kbSVG, type KeyboardOpts } from '../notation/keyboard';
+  import { midiName } from '../music/notes';
+  import { handleKey } from '../drills/runtime.svelte';
+  import { follow, followTarget } from './keyfollow.svelte';
+
+  interface Props extends KeyboardOpts {
+    /** taps answer (in a drill) or sound (anywhere else) */
+    tap?: boolean | 'play';
+    /** centre the board instead of letting it scroll */
+    fit?: boolean;
+    onKey?: (midi: number) => void;
+  }
+  const { tap = false, fit = true, onKey = handleKey, ...options }: Props = $props();
+
+  const size = $derived(kbDims(options));
+  const svg = $derived(kbSVG(options));
+  const keys = $derived(kbKeys(options));
+  const lit = $derived(
+    followTarget(
+      follow.lit,
+      keys.map((key) => key.midi),
+    ),
+  );
+</script>
+
+<div class="kbwrap" class:fit>
+  <div class="kbstage">
+    {@html svg}
+    {#if tap}
+      <div class="taplayer">
+        {#each keys as key (key.midi)}
+          <button
+            class="hit"
+            class:bk={key.black}
+            class:lit={lit === key.midi}
+            type="button"
+            data-kb={key.midi}
+            aria-label={midiName(key.midi)}
+            style={percentBox({ ...key, y: 0 }, size.W, size.H)}
+            onclick={() => onKey(key.midi)}
+          ></button>
+        {/each}
+      </div>
+    {/if}
+  </div>
+</div>

package/src/lib/ui/MetronomePanel.svelte

@@ -0,0 +1,101 @@
+<!-- The metronome's controls: tempo, start/stop, feel, subdivision, tap tempo. -->
+<script lang="ts">
+  import {
+    BPM_MAX,
+    BPM_MIN,
+    met,
+    metSetBpm,
+    metSetSub,
+    metTap,
+    metToggle,
+  } from '../audio/metronome.svelte';
+  const { compact = false }: { compact?: boolean } = $props();
+
+  /** From here up the buttons move two beats per minute at a time, below it one. */
+  const FAST_TEMPO = 120;
+  const stepDown = () => (met.bpm > FAST_TEMPO ? 2 : 1);
+  const stepUp = () => (met.bpm >= FAST_TEMPO ? 2 : 1);
+  const clampBpm = (bpm: number) => Math.max(BPM_MIN, Math.min(BPM_MAX, bpm));
+  const sliderValue = (event: Event) => +(event.target as HTMLInputElement).value;
+  const FEELS: [number, string][] = [
+    [4, '4/4'],
+    [3, '3/4'],
+    [6, '6/8'],
+  ];
+  const SUBDIVISIONS: [number, string][] = [
+    [1, 'Quarters'],
+    [2, 'Eighths'],
+    [3, 'Triplets'],
+    [4, '16ths'],
+  ];
+</script>
+
+<div class="card met stack">
+  <div class="metrow">
+    <button class="mbtn" id="bpmdn" onclick={() => metSetBpm(met.bpm - stepDown())}>−</button>
+    <div class="bpm"><span class="v">{met.bpm}</span><span class="u">bpm</span></div>
+    <button class="mbtn" id="bpmup" onclick={() => metSetBpm(met.bpm + stepUp())}>+</button>
+    <span class="metdot {met.flash}" id="metdot"></span>
+    <span class="tick" id="metbeat">{met.on ? met.beatLabel : '—'}</span>
+    <span class="spacer"></span>
+    <button
+      class={met.on ? 'ghost on' : 'start'}
+      id="mettoggle"
+      style="width:auto"
+      onclick={metToggle}>{met.on ? 'Stop' : 'Start'}</button
+    >
+  </div>
+  <input
+    class="slider"
+    id="bpmslider"
+    type="range"
+    min={BPM_MIN}
+    max={BPM_MAX}
+    step="1"
+    value={met.bpm}
+    aria-label="tempo"
+    oninput={(event) => {
+      met.bpm = clampBpm(sliderValue(event));
+    }}
+    onchange={(event) => metSetBpm(sliderValue(event))}
+  />
+  {#if !compact}
+    <div class="bar">
+      <span class="hint">Feel</span>
+      {#each FEELS as [beats, title] (beats)}
+        <button
+          class="chip sm"
+          data-met="beats"
+          data-val={beats}
+          aria-pressed={met.beats === beats}
+          onclick={() => {
+            met.beats = beats;
+          }}>{title}</button
+        >
+      {/each}
+    </div>
+    <div class="bar">
+      <span class="hint">Click</span>
+      {#each SUBDIVISIONS as [sub, title] (sub)}
+        <button
+          class="chip sm"
+          data-met="sub"
+          data-val={sub}
+          aria-pressed={met.sub === sub}
+          onclick={() => metSetSub(sub)}>{title}</button
+        >
+      {/each}
+    </div>
+    <div class="bar">
+      <button
+        class="ghost"
+        class:on={met.subClick}
+        id="metsubclick"
+        onclick={() => {
+          met.subClick = !met.subClick;
+        }}>{met.subClick ? 'Subdivisions audible' : 'Subdivisions silent'}</button
+      >
+      <button class="ghost" id="mettap" onclick={metTap}>Tap tempo</button>
+    </div>
+  {/if}
+</div>

package/src/lib/ui/RefBar.svelte

@@ -0,0 +1,28 @@
+<!-- The bar at the top of a reference page: back to Learn, and back to the drill if one is in progress. -->
+<script lang="ts">
+  import { drill, armListen } from '../drills/runtime.svelte';
+  import { go } from '../nav.svelte';
+
+  interface Props {
+    title: string;
+    back?: { label: string; to: string };
+    /** offer "Back to the drill" when a question is open */
+    resume?: boolean;
+  }
+  const { title, back = { label: 'Learn', to: 'learn' }, resume = true }: Props = $props();
+
+  function toDrill() {
+    go('drill', { id: drill.id });
+    if (drill.q && drill.q.kind === 'play' && !drill.answered) {
+      armListen();
+    }
+  }
+</script>
+
+<div class="bar">
+  <button class="ghost" id="backlearn" onclick={() => go(back.to)}>← {back.label}</button>
+  {#if resume && drill.q}<button class="ghost on" id="resume" onclick={toDrill}
+      >Back to the drill</button
+    >{/if}
+  <span class="spacer"></span><span class="tick">{title}</span>
+</div>

package/src/lib/ui/RhythmBar.svelte

@@ -0,0 +1,9 @@
+<!-- A bar of rhythm on its one-line staff, scrolling sideways if it is wider than the screen. -->
+<script lang="ts">
+  import { rhythmSVG, type RhythmOpts } from '../notation/rhythmsvg';
+  import type { Bar } from '../music/rhythm';
+
+  const { bar, ...options }: { bar: Bar } & RhythmOpts = $props();
+</script>
+
+<div class="rhwrap"><div class="fbstage">{@html rhythmSVG(bar, options)}</div></div>

package/src/lib/ui/Shell.svelte

@@ -0,0 +1,96 @@
+<!--
+  The frame every Honmoon app sits in: the header with its tabs, the scrolling
+  main column, and the error bar. If anything throws it says so on screen —
+  a silent exception looks exactly like a dead button, and that is not a
+  thing to debug twice.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { onMount } from 'svelte';
+  import { honmoon } from '../store/honmoon.svelte';
+  import { met, metStop } from '../audio/metronome.svelte';
+  import { go, nav, setScroller } from '../nav.svelte';
+  import { installTapFix } from './tapfix';
+  import type { Tab } from './types';
+
+  interface Props {
+    appName: string;
+    /** the app's mark beside its name: an SVG drawn in currentColor (the accent) */
+    icon?: string;
+    tabs: Tab[];
+    /** which tab owns a screen no tab lists */
+    fallbackTab?: string;
+    /** override for screens whose tab depends on where they were opened from */
+    tabFor?: (view: string) => string | null;
+    children: Snippet;
+  }
+  const { appName, icon, tabs, fallbackTab, tabFor, children }: Props = $props();
+
+  let main: HTMLElement;
+  let oops = $state('');
+
+  const active = $derived.by(() => {
+    const view = nav.view.name;
+    const custom = tabFor?.(view);
+    if (custom) {
+      return custom;
+    }
+    const owner = tabs.find((tab) => tab.views.includes(view));
+    return owner?.id ?? fallbackTab ?? tabs[0]?.id;
+  });
+
+  /* The stylesheet already knows how to be forced one way or the other; this
+     just sets the attribute it looks for, and removes it to follow the device. */
+  $effect(() => {
+    const theme = honmoon.settings.theme || 'auto';
+    if (theme === 'auto') {
+      document.documentElement.removeAttribute('data-theme');
+    } else {
+      document.documentElement.setAttribute('data-theme', theme);
+    }
+  });
+
+  onMount(() => {
+    installTapFix();
+    setScroller(main);
+    /* an uncaught error shows in a strip at the bottom: there is no console on a phone */
+    const onError = (event: ErrorEvent) => {
+      oops = '⚠ ' + ((event && event.message) || 'script error');
+    };
+    const onRejection = (event: PromiseRejectionEvent) => {
+      const reason = event && event.reason;
+      oops = '⚠ promise: ' + ((reason && (reason.message || reason.code)) || reason);
+    };
+    window.addEventListener('error', onError);
+    window.addEventListener('unhandledrejection', onRejection);
+    return () => {
+      window.removeEventListener('error', onError);
+      window.removeEventListener('unhandledrejection', onRejection);
+    };
+  });
+</script>
+
+<div id="app">
+  <header>
+    <div class="brand">
+      {#if icon}<span class="mk icon">{@html icon}</span>{:else}<span class="mk"></span>{/if}<span
+        class="bt">{appName}</span
+      >
+    </div>
+    {#if met.on}
+      <button class="hbtn metchip" id="metchip" onclick={metStop}>♩{met.bpm} ■</button>
+    {/if}
+    {#each tabs as tab (tab.id)}
+      <button
+        class="hbtn"
+        id={tab.id}
+        aria-current={active === tab.id ? 'true' : 'false'}
+        onclick={() => go(tab.to)}>{@html tab.label}</button
+      >
+    {/each}
+  </header>
+  <main id="main" bind:this={main}>
+    {@render children()}
+  </main>
+  <div id="oops" hidden={!oops}>{oops}</div>
+</div>

package/src/lib/ui/StaffRun.svelte

@@ -0,0 +1,46 @@
+<!-- One staff carrying a run of notes, each labelled in both systems, optionally tappable. -->
+<script lang="ts">
+  import { percentBox } from './overlay';
+  import type { Pref } from '../store/types';
+  import { RUN, runWidth, runX0, staffRunSVG } from '../notation/staff';
+  import { noteName, pcOf } from '../music/notes';
+
+  interface Props {
+    midis: number[];
+    pref: Pref;
+    sel?: number;
+    tappable?: boolean;
+    clef?: string;
+    onNote?: (m: number) => void;
+  }
+  const { midis, pref, sel = -1, tappable = true, clef = 'bass', onNote }: Props = $props();
+
+  const svg = $derived(staffRunSVG(midis, pref, sel, true, clef));
+  const width = $derived(runWidth(midis.length, clef));
+  const firstX = $derived(runX0(clef));
+  /** The tap target for the note at an index: one note's width, full height. */
+  const noteBox = (index: number) => ({
+    x: firstX + index * RUN.dx - RUN.dx / 2 + 2,
+    y: 0,
+    w: RUN.dx,
+    h: 1,
+  });
+</script>
+
+<div class="fbstage">
+  {@html svg}
+  {#if tappable}
+    <div class="taplayer">
+      {#each midis as midi, index (index)}
+        <button
+          class="hit"
+          type="button"
+          data-refn={midi}
+          aria-label={'note ' + noteName(pcOf(midi), 'en', pref)}
+          style={percentBox(noteBox(index), width, 1)}
+          onclick={() => onNote?.(midi)}
+        ></button>
+      {/each}
+    </div>
+  {/if}
+</div>

package/src/lib/ui/Stat.svelte

@@ -0,0 +1,13 @@
+<!-- The four-up row of big numbers at the top of Practice, Stats and the summaries. -->
+<script lang="ts">
+  const { items }: { items: { v: string | number; k: string }[] } = $props();
+</script>
+
+<div class="statrow">
+  {#each items as item (item.k)}
+    <div>
+      <div class="v">{item.v}</div>
+      <div class="k">{item.k}</div>
+    </div>
+  {/each}
+</div>

package/src/lib/ui/actions.ts

@@ -0,0 +1,36 @@
+import type { Action } from 'svelte/action';
+
+export interface HScrollParams {
+  /** where to centre, as a fraction of the content width */
+  frac?: number | null;
+  /** or an exact scroll position to restore */
+  left?: number | null;
+  /** re-apply whenever this changes (a new question, a new selection) */
+  key?: unknown;
+}
+
+/** Brings the interesting part of a wide board into view — the marked fret,
+    the selected note — instead of leaving it off to the right on a phone. */
+export const hscroll: Action<HTMLElement, HScrollParams> = (node, params) => {
+  let lastKey: unknown = Symbol('none');
+  function apply(options: HScrollParams) {
+    if (options.key === lastKey) {
+      return;
+    }
+    lastKey = options.key;
+    requestAnimationFrame(() => {
+      if (options.left != null) {
+        node.scrollLeft = options.left;
+      } else if (options.frac != null) {
+        node.scrollLeft = Math.max(0, options.frac * node.scrollWidth - node.clientWidth / 2);
+      }
+    });
+  }
+  apply(params);
+  return { update: apply };
+};
+
+/** The fraction of a board's width at which fret `f` sits, for a board drawn from `lo` to `hi`. */
+export function fretFrac(fret: number, lo: number, hi: number): number {
+  return (fret - lo + 0.5) / (hi - lo + 1);
+}

package/src/lib/ui/keyfollow.svelte.ts

@@ -0,0 +1,48 @@
+import { pcOf } from '../music/notes';
+
+/* follow mode: light keys from outside while something plays. The board shows
+   one octave; a line that runs outside it still has a key of that name, so a
+   note off the board lights the key with the same name rather than nothing. */
+export const follow: { lit: number | null } = $state({ lit: null });
+let timers: ReturnType<typeof setTimeout>[] = [];
+
+/** The last key stays lit this long after its note. */
+const LINGER_MS = 420;
+
+/** Light each note's key in turn, `step` seconds apart. */
+export function kbFollow(midis: number[], step: number): void {
+  kbFollowStop();
+  midis.forEach((midi, i) => {
+    timers.push(
+      setTimeout(
+        () => {
+          follow.lit = midi;
+        },
+        i * step * 1000,
+      ),
+    );
+  });
+  timers.push(
+    setTimeout(
+      () => {
+        follow.lit = null;
+      },
+      midis.length * step * 1000 + LINGER_MS,
+    ),
+  );
+}
+export function kbFollowStop(): void {
+  timers.forEach(clearTimeout);
+  timers = [];
+  follow.lit = null;
+}
+/** Which of the drawn keys the followed note lights. */
+export function followTarget(lit: number | null, drawn: number[]): number | null {
+  if (lit == null) {
+    return null;
+  }
+  if (drawn.includes(lit)) {
+    return lit;
+  }
+  return drawn.find((key) => pcOf(key) === pcOf(lit)) ?? null;
+}