@greenblacksky/honmoon 0.0.0-stage → 0.4.1

package/src/lib/ui/screens/Explorer.svelte

@@ -0,0 +1,245 @@
+<!-- Any scale in any key: the notes, the steps, the degrees, the box on the neck, the staff and the keyboard. -->
+<script lang="ts" module>
+  type BoxLabels = 'deg' | 'note' | 'fin';
+  /** What the explorer shows; kept across visits. Starts on A minor pentatonic from the E string. */
+  const XS = $state({ sid: 'minpent', root: 9, start: 3, labels: 'deg' as BoxLabels });
+</script>
+
+<script lang="ts">
+  import { honmoon } from '../../store/honmoon.svelte';
+  import { STRINGS } from '../../music/bass';
+  import {
+    SCALES,
+    SGROUPS,
+    degPretty,
+    noteText,
+    rootName,
+    rootPool,
+    scaleDef,
+    scaleNotes,
+    scaleShape,
+    scaleSteps,
+  } from '../../music/scales';
+  import { kbBase } from '../../notation/keyboard';
+  import { playScale } from '../../audio/synth';
+  import { go, hasRoute } from '../../nav.svelte';
+  import { fretFrac, hscroll } from '../actions';
+  import { kbFollow } from '../keyfollow.svelte';
+  import { kbHalfStepLine, scaleBoard, stepRowHTML } from '../scaleboard';
+  import Fretboard from '../Fretboard.svelte';
+  import Keyboard from '../Keyboard.svelte';
+  import StaffRun from '../StaffRun.svelte';
+  import RefBar from '../RefBar.svelte';
+
+  const { back }: { back?: { label: string; to: string } } = $props();
+
+  const scale = $derived(scaleDef(XS.sid));
+  const notes = $derived(scaleNotes(XS.sid, XS.root));
+  const board = $derived(scaleBoard(XS.sid, XS.root, XS.start, XS.labels));
+  /** How far apart the keyboard lights the notes as the scale plays, in seconds. */
+  const FOLLOW_STEP_S = 0.33;
+  /** C3: the keyboard picture starts at the C at or below this plus the root. */
+  const KEYBOARD_BASE = 48;
+  const LABEL_CHOICES: [BoxLabels, string][] = [
+    ['deg', 'Degrees'],
+    ['note', 'Notes'],
+    ['fin', 'Fingers'],
+  ];
+  const START_CHOICES: [number, string][] = [
+    [3, 'E string'],
+    [2, 'A string'],
+  ];
+  const isRootNote = (semis: number) => semis % 12 === 0;
+  const total = (steps: number[]) => steps.reduce((sum, step) => sum + step, 0);
+  const shapeMidis = (shape: { pos: { s: number; f: number }[] }) =>
+    shape.pos.map((pos) => STRINGS[pos.s].open + pos.f);
+  function hear() {
+    playScale(XS.sid, XS.root, XS.start);
+    /* follow mode: the keys light in time with the notes */
+    kbFollow(shapeMidis(scaleShape(XS.sid, XS.root, XS.start, 1)), FOLLOW_STEP_S);
+  }
+</script>
+
+<RefBar title="Explorer" {back} resume={false} />
+
+<div class="sec">
+  <div class="card stack">
+    <div>
+      <div style="font-family:var(--f-disp);font-size:24px;letter-spacing:.02em">
+        {rootName(XS.root) + ' ' + scale.n.toLowerCase()}
+      </div>
+      <p class="note" style="margin:4px 0 0">{scale.d}</p>
+    </div>
+    {@html stepRowHTML(XS.sid, XS.root)}
+    <p class="note" style="margin:0">
+      Big numbers are the notes, small ones their degree. The circles between them are the <b
+        >steps</b
+      >
+      — how many frets from each note to the next. They come to {total(scaleSteps(XS.sid))}, because
+      that is one octave.
+    </p>
+    <div
+      class="fbwrap"
+      use:hscroll={{
+        frac: fretFrac(board.cf, board.lo, board.hi),
+        key: XS.sid + XS.root + XS.start,
+      }}
+    >
+      <Fretboard lo={board.lo} hi={board.hi} cells={board.cells} />
+    </div>
+    <div class="bar">
+      <span class="hint">Show</span>
+      {#each LABEL_CHOICES as [labels, title] (labels)}
+        <button
+          class="chip sm"
+          data-xs="labels"
+          data-val={labels}
+          aria-pressed={XS.labels === labels}
+          onclick={() => {
+            XS.labels = labels;
+          }}>{title}</button
+        >
+      {/each}
+    </div>
+    <div class="bar">
+      <span class="hint">From</span>
+      {#each START_CHOICES as [string, title] (string)}
+        <button
+          class="chip sm"
+          data-xs="start"
+          data-val={string}
+          aria-pressed={XS.start === string}
+          onclick={() => {
+            XS.start = string;
+          }}>{title}</button
+        >
+      {/each}
+      <span class="spacer"></span><button class="ghost" id="hearscale" onclick={hear}
+        >♪ Hear it</button
+      >
+    </div>
+    <p class="note">
+      Hollow rings are every other place that note occurs on the neck. The filled dots are one
+      playable box{board.shape.clean
+        ? ', all inside a four-fret span.'
+        : ' — this one needs a position shift, marked by the finger numbers jumping back.'}
+    </p>
+  </div>
+</div>
+
+<div class="sec">
+  <h2>On the staff</h2>
+  <div class="card">
+    <div class="fbwrap">
+      <StaffRun midis={shapeMidis(board.shape)} pref={honmoon.settings.pref} tappable={false} />
+    </div>
+  </div>
+</div>
+
+<!-- The same scale on a keyboard. On a fretboard every step looks alike, so the
+     shape of a scale is invisible; here the half steps are drawn for you —
+     they are the places where two lit white keys touch. -->
+<div class="sec">
+  <h2>On the keyboard</h2>
+  <div class="card stack">
+    <Keyboard
+      lo={kbBase(KEYBOARD_BASE + XS.root)}
+      oct={1}
+      tap="play"
+      cells={notes.map((note) => ({
+        pc: note.pc,
+        fill: isRootNote(note.semis) ? 'var(--accent)' : 'var(--good)',
+        label: XS.labels === 'note' ? noteText(note) : degPretty(note.deg),
+      }))}
+    />
+    <p class="note" style="margin:0">
+      Tap a key to hear it. {@html kbHalfStepLine(XS.sid, XS.root)}
+    </p>
+  </div>
+</div>
+
+<div class="sec">
+  <h2>Reading the steps</h2>
+  <div class="card stack">
+    <p class="note">
+      A <b>step</b> is the distance from one note of a scale to the next, counted in frets. One fret
+      is a <b>half step</b> — a semitone. Two frets is a <b>whole step</b>. That is the whole
+      vocabulary.
+    </p>
+    <p class="note">
+      Every scale is a recipe of steps from its root, and the recipe is what makes it sound the way
+      it does. Major is <b>whole whole half whole whole whole half</b>; play that from any note and
+      you have that key's major scale. On the bass the shape does not change at all when you move
+      key — it just slides up the neck. That is the one real advantage a fretted instrument has over
+      a piano, and it is why bassists think in shapes.
+    </p>
+    <p class="note">
+      Pentatonics leave notes out, so they have bigger gaps — minor pentatonic goes <b>3 2 2 3 2</b
+      >. Those three-fret jumps are exactly why it sounds open and singable rather than stepwise,
+      and why it is so hard to play a wrong note with it.
+    </p>
+    <p class="note">
+      Whatever the scale, the steps add up to <b>12</b>, because twelve semitones is an octave and
+      the scale has to arrive home.
+    </p>
+  </div>
+</div>
+
+<div class="sec">
+  <h2>Reading the degrees</h2>
+  <div class="card stack">
+    <p class="note">
+      The small number under each note is its <b>degree</b> — which note of the scale it is, counting
+      the root as 1.
+    </p>
+    <p class="note">
+      A ♭ or ♯ in front means it is a semitone lower or higher <i
+        >than it would be in the major scale</i
+      >. The major scale is the ruler everything else is measured against. So ♭3 means “a semitone
+      below the 3 you would get in major” — and that single semitone is the entire difference
+      between a major and a minor chord.
+    </p>
+    <p class="note">
+      This is why degrees are worth more to you than note names. <b>The ♭7</b> means the same thing
+      in every key, and a line built on 1 ♭3 4 5 works wherever you put it. <b>B♭</b> only means something
+      once somebody tells you what key you are in.
+    </p>
+    {#if hasRoute('degref')}<div class="bar">
+        <button class="ghost" data-go="degref" onclick={() => go('degref')}
+          >More on degrees, with pictures →</button
+        >
+      </div>{/if}
+  </div>
+</div>
+
+<div class="sec">
+  <h2>Root</h2>
+  <div class="levels">
+    {#each rootPool() as root (root)}<button
+        class="chip sm"
+        data-xs="root"
+        data-val={root}
+        aria-pressed={XS.root === root}
+        onclick={() => {
+          XS.root = root;
+        }}>{rootName(root)}</button
+      >{/each}
+  </div>
+</div>
+
+{#each SGROUPS as group (group)}
+  <div class="sec">
+    <h2>{group}</h2>
+    <div class="levels">
+      {#each SCALES.filter((def) => def.g === group) as def (def.id)}<button
+          class="chip sm"
+          data-xs="sid"
+          data-val={def.id}
+          aria-pressed={XS.sid === def.id}
+          onclick={() => {
+            XS.sid = def.id;
+          }}>{def.n}</button
+        >{/each}
+    </div>
+  </div>
+{/each}

package/src/lib/ui/screens/FamilyScreen.svelte

@@ -0,0 +1,280 @@
+<!-- One family: what it is about, what it keeps next to its drills, and the drills. -->
+<script lang="ts" module>
+  /* Rolled up by default, and it stays as you left it across re-draws — a
+     panel that snapped shut every time you toggled a chip would be unusable. */
+  const FOLD: Record<string, boolean> = $state({});
+</script>
+
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { honmoon, setSetting, queueSave, saveLocal } from '../../store/honmoon.svelte';
+  import { LEVELS, accOn, lvl, positions } from '../../music/bass';
+  import { staffNotes, multiClef } from '../../music/clefs';
+  import { midiName } from '../../music/notes';
+  import { vRange } from '../../music/voice';
+  import { IC } from '../../notation/icons';
+  import { drillOn, famDrills, famHidden, famNoBass, groupDef } from '../../drills/registry.svelte';
+  import { drillMastery } from '../../learn/progress';
+  import { startDrill } from '../../drills/runtime.svelte';
+  import { go, hasRoute } from '../../nav.svelte';
+  import { toggledIn } from '../../util/list';
+  import AccRow from '../AccRow.svelte';
+  import ScalesScreen from './ScalesScreen.svelte';
+
+  interface Props {
+    fam: string;
+    /** where the voice family's "Vocal warm-up" button goes */
+    voiceWarmup?: string;
+    /** anything an app wants to add above the drill list */
+    extra?: Snippet<[string]>;
+  }
+  const { fam, voiceWarmup = 'warmhome', extra }: Props = $props();
+
+  const group = $derived(groupDef(fam));
+  const level = $derived(lvl());
+  const drills = $derived(famDrills(fam));
+  const noBassCount = $derived(famNoBass(fam));
+  const hiddenCount = $derived(famHidden(fam));
+  const offHere = $derived(drills.filter((def) => !drillOn(def.id)).length);
+  const open = $derived(FOLD[fam] || offHere > 0);
+  interface ReadingLink {
+    route: string;
+    title: string;
+    blurb: string;
+  }
+  /** The reference pages worth reading alongside this family. */
+  const refs = $derived.by(() => {
+    const links: ReadingLink[] = [];
+    if (fam === 'read') {
+      links.push({
+        route: 'ref',
+        title: 'Staff map',
+        blurb:
+          'Every note on ' +
+          (multiClef() ? 'each clef you have on' : 'the bass clef') +
+          ', what it is called and where to play it.',
+      });
+      links.push({
+        route: 'rref',
+        title: 'How rhythm is written',
+        blurb: 'Values, dots, ties, rests, time signatures and how to count a bar out loud.',
+      });
+    }
+    if (fam === 'ear') {
+      links.push({
+        route: 'ivref',
+        title: 'What an interval is',
+        blurb: 'All twelve, what they sound like, and why one shape works in every key.',
+      });
+    }
+    return links.filter((link) => hasRoute(link.route));
+  });
+
+  function toggleDoff(id: string) {
+    honmoon.settings.doff = toggledIn(honmoon.settings.doff || [], id);
+    saveLocal();
+    queueSave();
+  }
+</script>
+
+{#if fam === 'scale'}
+  <ScalesScreen />
+{:else if group}
+  <div class="sec">
+    <div class="bar">
+      <button class="ghost" id="back" onclick={() => go('home')}>← Practice</button>
+      <span class="spacer"></span><span class="tick">{group.need}</span>
+    </div>
+  </div>
+  <div class="sec">
+    <h2>{group.n}</h2>
+    <div class="card"><p class="note" style="margin:0">{group.sb}</p></div>
+  </div>
+
+  {#if fam === 'neck'}
+    <div class="sec">
+      <h2>Range</h2>
+      <div class="levels" id="lvls">
+        {#each LEVELS as range (range.id)}
+          <button
+            class="chip"
+            data-lvl={range.id}
+            aria-pressed={range.id === level.id}
+            onclick={() => setSetting('level', range.id)}>{range.name}</button
+          >
+        {/each}
+      </div>
+      <div class="card" style="margin-top:10px"><AccRow /></div>
+      <p class="note">
+        {level.desc}{accOn() ? ', sharps and flats included' : ', natural notes only'} — {positions()
+          .length} fretboard positions, {staffNotes().length} distinct notes on the staff. Both of these
+        apply everywhere, not only here: the reading drills, the daily session and the maps on Stats all
+        follow them.
+      </p>
+    </div>
+  {/if}
+  {#if fam === 'ear'}
+    <div class="sec">
+      <h2>Intervals in rotation</h2>
+      <div class="levels">
+        <button
+          class="chip sm"
+          data-set="ivset"
+          data-val="basic"
+          aria-pressed={honmoon.settings.ivset !== 'all'}
+          onclick={() => setSetting('ivset', 'basic')}>The common six</button
+        >
+        <button
+          class="chip sm"
+          data-set="ivset"
+          data-val="all"
+          aria-pressed={honmoon.settings.ivset === 'all'}
+          onclick={() => setSetting('ivset', 'all')}>All twelve</button
+        >
+      </div>
+      <p class="note">
+        {drills.some((def) => def.id === 'scalehear')
+          ? 'Hear the scale draws on whatever is switched on over in Scales, not on this row. '
+          : ''}Start with 2nds, 3rds, 4ths, 5ths and the octave — they cover most of what you will
+        meet. The full set adds the tritone, 6ths and 7ths{drills.some((def) => def.id === 'chhear')
+          ? ', and both chord drills widen from major/minor to seven types'
+          : ''}.
+      </p>
+    </div>
+  {/if}
+  {#if fam === 'voice'}
+    {@const voiceRange = vRange()}
+    <div class="sec">
+      <h2>Your voice</h2>
+      <div class="card stack">
+        <div class="setrow" style="border:none;padding:0">
+          <span class="lbl">Range</span><span class="tick"
+            >{voiceRange.set
+              ? midiName(voiceRange.lo) + ' – ' + midiName(voiceRange.hi)
+              : 'not measured — using ' +
+                midiName(voiceRange.lo) +
+                ' – ' +
+                midiName(voiceRange.hi)}</span
+          >
+        </div>
+        <p class="note">
+          Everything sung here is transposed to sit inside that range, so nothing asks you for a
+          note you do not have.
+        </p>
+        <div class="bar">
+          {#if hasRoute('range')}<button
+              class="ghost"
+              data-go="range"
+              onclick={() => go('range', { from: 'fam' })}>Find my range</button
+            >{/if}
+          <span class="spacer"></span>
+          {#if hasRoute(voiceWarmup)}<button
+              class="ghost"
+              id="tovoicewarm"
+              onclick={() => go(voiceWarmup)}>Vocal warm-up</button
+            >{/if}
+        </div>
+      </div>
+    </div>
+  {/if}
+  {#if noBassCount}
+    <div class="sec">
+      <div class="card stack">
+        <p class="note">
+          {noBassCount === 1 ? 'One drill here is' : noBassCount + ' drills here are'} put away because
+          you said the bass is not with you. Nothing else in this family needs it.
+        </p>
+        <div class="bar">
+          <button
+            class="ghost"
+            data-set="bass"
+            data-val="true"
+            onclick={() => setSetting('bass', true)}>I have it with me</button
+          >
+        </div>
+      </div>
+    </div>
+  {/if}
+  {#if hiddenCount}
+    <div class="sec">
+      <div class="card stack">
+        <p class="note">
+          {hiddenCount === 1 ? 'One more drill here is' : hiddenCount + ' more drills here are'} switched
+          off: movable do and scale degrees — hearing a note as <i>the fifth of this key</i> rather
+          than as
+          <i>G</i>. It is a second language, and worth starting once what is below feels easy.
+        </p>
+        {#if hasRoute('setup')}<div class="bar">
+            <button class="ghost" data-go="setup" onclick={() => go('setup')}
+              >Turn it on in Setup</button
+            >
+          </div>{/if}
+      </div>
+    </div>
+  {/if}
+  {@render extra?.(fam)}
+
+  {#if refs.length}
+    <div class="sec">
+      <h2>Read about it</h2>
+      {#each refs as link (link.route)}
+        <button class="drill ref" data-go={link.route} onclick={() => go(link.route)}
+          ><span class="ic">{@html IC.book}</span><span
+            ><span class="nm">{link.title}</span><br /><span class="sb">{link.blurb}</span></span
+          ><span class="mast">→</span></button
+        >
+      {/each}
+    </div>
+  {/if}
+
+  <div class="sec">
+    <h2>Drills</h2>
+    <div class="drills">
+      {#each drills as def (def.id)}
+        <button
+          class="drill"
+          class:muted={!drillOn(def.id)}
+          data-drill={def.id}
+          onclick={() => startDrill(def.id, fam)}
+          ><span class="ic">{@html IC[def.ic]}</span>
+          <span
+            ><span class="nm"
+              >{def.nm}{#if !drillOn(def.id)}
+                <i class="offtag">not in the session</i>{/if}</span
+            >
+            <br /><span class="sb">{def.sb}</span></span
+          ><span class="mast">{drillMastery(def.id).pct}%</span></button
+        >
+      {/each}
+    </div>
+    <div class="fold" class:open>
+      <button
+        class="foldhead"
+        data-fold={fam}
+        aria-expanded={open}
+        onclick={() => {
+          FOLD[fam] = !FOLD[fam];
+        }}
+        >In the daily session{offHere ? ' · ' + offHere + ' off' : ''}<span class="caret"
+          >{open ? '▴' : '▾'}</span
+        ></button
+      >
+      {#if open}
+        <div class="levels" style="margin-top:10px">
+          {#each drills as def (def.id)}
+            <button
+              class="chip sm tog"
+              data-doff={def.id}
+              aria-pressed={drillOn(def.id)}
+              onclick={() => toggleDoff(def.id)}>{def.nm}</button
+            >
+          {/each}
+        </div>
+        <p class="note">
+          Switch one off and the daily session stops asking for it. It stays in the list above, so
+          you can still open it whenever you want to give it another go.
+        </p>
+      {/if}
+    </div>
+  </div>
+{/if}

package/src/lib/ui/screens/Glossary.svelte

@@ -0,0 +1,65 @@
+<!--
+  Every word the app uses at you, defined in one line each. The point is not
+  to teach the subject — the references do that — but to stop a single
+  unfamiliar word from making a whole drill unreadable. Written so that each
+  entry stands on its own: you arrive here having met one term, not to read
+  the list end to end.
+-->
+<script lang="ts">
+  import { GLOSS } from '../refdata';
+  import RefBar from '../RefBar.svelte';
+  const { back }: { back?: { label: string; to: string } } = $props();
+
+  let search = $state('');
+  /** The text of an HTML snippet, tags dropped. */
+  const plain = (html: string) => html.replace(/<[^>]+>/g, '').replace(/&amp;/g, '&');
+  const shown = $derived.by(() => {
+    const wanted = search.trim().toLowerCase();
+    return GLOSS.map((section) => ({
+      g: section.g,
+      items: section.items.filter(
+        ([term, meaning]) =>
+          !wanted || (plain(term) + plain(meaning)).toLowerCase().includes(wanted),
+      ),
+    }));
+  });
+  const none = $derived(shown.every((section) => !section.items.length));
+</script>
+
+<RefBar title="Vocabulary" {back} resume={false} />
+<div class="sec">
+  <div class="card stack">
+    <p class="note" style="margin:0">
+      Every term the drills use at you, one line each. Type to narrow it down.
+    </p>
+    <input
+      class="gfind"
+      id="glossq"
+      type="search"
+      placeholder="Search a word…"
+      aria-label="search the vocabulary"
+      autocomplete="off"
+      bind:value={search}
+    />
+    <p class="note" id="glossnone" hidden={!none} style="margin:0">Nothing matches that.</p>
+  </div>
+</div>
+{#each shown as section (section.g)}
+  <div class="sec gsec" hidden={!section.items.length}>
+    <h2>{section.g}</h2>
+    <div class="card stack">
+      {#each section.items as [term, meaning] (term)}<div class="gterm">
+          <b>{@html term}</b>
+          <p>{@html meaning}</p>
+        </div>{/each}
+    </div>
+  </div>
+{/each}
+<div class="sec">
+  <div class="card">
+    <p class="note" style="margin:0">
+      Still stuck on a word? The references go into each of these properly — this page is only here
+      so that one unfamiliar term cannot make a whole drill unreadable.
+    </p>
+  </div>
+</div>

package/src/lib/ui/screens/IntervalRef.svelte

@@ -0,0 +1,37 @@
+<!-- What an interval is: all twelve, what they sound like, and why one shape works in every key. -->
+<script lang="ts">
+  import { IVS } from '../../music/intervals';
+  import { playInterval } from '../../audio/synth';
+  import RefBar from '../RefBar.svelte';
+  const { back }: { back?: { label: string; to: string } } = $props();
+  /** Every interval is played up from E3. */
+  const START_NOTE = 52;
+</script>
+
+<RefBar title="Intervals" {back} />
+<div class="sec">
+  <div class="card">
+    <p class="note">
+      An interval is the distance between two notes, counted in semitones — on bass, in frets. It is
+      the same distance wherever you play it, which is why one shape works in every key, and it is
+      what you are actually doing when you sing: you do not sing frets, you sing distances.
+    </p>
+  </div>
+</div>
+<div class="sec">
+  <h2>The twelve</h2>
+  <div class="card stack">
+    {#each IVS as interval (interval.s)}
+      <div class="scrow on">
+        <button
+          class="chip sm"
+          data-ivplay={interval.s}
+          onclick={() => playInterval(START_NOTE, interval.s, false)}>{interval.ab}</button
+        >
+        <span class="ivs">{interval.n} · {interval.s}{interval.s === 1 ? ' fret' : ' frets'}</span>
+        <p class="note">{interval.c}</p>
+      </div>
+    {/each}
+  </div>
+  <p class="note">Tap any of them to hear it played from the same starting note.</p>
+</div>

package/src/lib/ui/screens/LearnIndex.svelte

@@ -0,0 +1,44 @@
+<!--
+  Every explanation in the app, in one place. They are still linked from the
+  family that uses them, but you should not have to remember which drill owns
+  an idea in order to go and read about it.
+-->
+<script lang="ts">
+  import { IC } from '../../notation/icons';
+  import { go, hasRoute } from '../../nav.svelte';
+  import { LEARN } from '../refdata';
+  const items = LEARN.filter((item) => hasRoute(item.go));
+</script>
+
+<div class="sec">
+  <div class="card">
+    <p class="note" style="margin:0">
+      {items.length} references. Nothing here is a test — read them when a drill turns up something you
+      do not recognise, or when you want the idea before the practice.
+    </p>
+  </div>
+</div>
+<div class="sec">
+  <h2>References</h2>
+  {#each items as item (item.go)}
+    <button class="drill ref" data-go={item.go} onclick={() => go(item.go)}
+      ><span class="ic">{@html IC.book}</span><span
+        ><span class="nm">{item.n}</span><br /><span class="sb">{item.sb}</span></span
+      ><span class="mast">→</span></button
+    >
+  {/each}
+</div>
+{#if hasRoute('setup')}
+  <div class="sec">
+    <div class="card">
+      <p class="note" style="margin:0">
+        How the app decides what to ask you, and why bass is written an octave high, are under <b
+          >Setup</b
+        >.
+      </p>
+      <div class="bar" style="margin-top:8px">
+        <button class="ghost" onclick={() => go('setup')}>How this works</button>
+      </div>
+    </div>
+  </div>
+{/if}