@greenblacksky/honmoon 0.0.0-stage → 0.4.1

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

@@ -0,0 +1,17 @@
+<!-- The metronome on its own page. It keeps running while you move around the app. -->
+<script lang="ts">
+  import MetronomePanel from '../MetronomePanel.svelte';
+  import BackBar from '../BackBar.svelte';
+  import { go } from '../../nav.svelte';
+  const { back = { label: 'Warm up', to: 'warmhome' } }: { back?: { label: string; to: string } } =
+    $props();
+</script>
+
+<BackBar label={back.label} title="Metronome" sec onBack={() => go(back.to)} />
+<div class="sec">
+  <MetronomePanel />
+  <p class="note" style="margin-top:10px">
+    It keeps running while you move around the app — the beats are scheduled on the audio clock, not
+    by the page.
+  </p>
+</div>

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

@@ -0,0 +1,159 @@
+<!--
+  One screen answers "what shall I do now": the session that picks for you,
+  and the families to go at by hand when you want to hammer one thing.
+-->
+<script lang="ts">
+  import { honmoon, setSetting, queueSave } from '../../store/honmoon.svelte';
+  import { todayKey } from '../../util/text';
+  import { toggledIn } from '../../util/list';
+  import { micUsable } from '../../audio/mic';
+  import { bassHere } from '../../music/bass';
+  import { allCards } from '../../learn/session';
+  import { famMastery, streakDays, totals } from '../../learn/progress';
+  import {
+    appDrills,
+    appGroups,
+    famDrills,
+    famHidden,
+    famNoBass,
+    groupOff,
+    sessionGroups,
+  } from '../../drills/registry.svelte';
+  import { IC } from '../../notation/icons';
+  import { startSession } from '../../drills/runtime.svelte';
+  import { go } from '../../nav.svelte';
+  import Stat from '../Stat.svelte';
+  import BassRow from '../BassRow.svelte';
+
+  /** A rough guess at how long one card takes, for the "about N minutes" line. */
+  const SECONDS_PER_CARD = 8;
+  const SLENS = [
+    { n: 15, label: 'Short' },
+    { n: 30, label: 'Standard' },
+    { n: 50, label: 'Long' },
+  ];
+  const overall = $derived(totals());
+  const today = $derived(honmoon.daily[todayKey()] || { n: 0, c: 0 });
+  const sessionLength = $derived(honmoon.settings.slen || 30);
+  const poolSize = $derived(allCards().length);
+  const needsBass = $derived(appDrills().some((def) => def.bass));
+  const groups = sessionGroups();
+  const hasScales = appGroups().some((group) => group.k === 'scale');
+
+  function toggleGroup(group: string) {
+    const off = toggledIn(honmoon.settings.off || [], group);
+    if (off.length >= appGroups().length) {
+      return; // never switch everything off
+    }
+    honmoon.settings.off = off;
+    queueSave();
+  }
+  const plural = (count: number, word: string) => count + ' ' + word + (count === 1 ? '' : 's');
+  function open(group: string) {
+    if (group === 'scale') {
+      go('scales');
+    } else {
+      go('fam', { fam: group });
+    }
+  }
+</script>
+
+<div class="sec">
+  <Stat
+    items={[
+      { v: today.n, k: 'Today' },
+      { v: overall.n, k: 'All time' },
+      { v: overall.n ? overall.acc + '%' : '—', k: 'Accuracy' },
+      { v: streakDays(), k: 'Day streak' },
+    ]}
+  />
+</div>
+
+<div class="sec">
+  <div class="card sesscard stack">
+    <div>
+      <div class="nm" style="font-family:var(--f-disp);font-size:22px;letter-spacing:.02em">
+        Daily session
+      </div>
+      <p class="note" style="margin:4px 0 0">
+        Your weakest cards from every family you leave switched on, mixed together. Miss one and it
+        comes back later in the same session.
+      </p>
+    </div>
+    <div class="levels">
+      {#each SLENS as length (length.n)}
+        <button
+          class="chip sm"
+          data-set="slen"
+          data-val={length.n}
+          aria-pressed={+sessionLength === length.n}
+          onclick={() => setSetting('slen', length.n)}>{length.label} · {length.n}</button
+        >
+      {/each}
+    </div>
+    {#if groups.length > 1}
+      <div>
+        <div class="hint" style="margin-bottom:6px">Include</div>
+        <div class="levels">
+          {#each groups as group (group.k)}
+            <button
+              class="chip sm tog"
+              data-grp={group.k}
+              aria-pressed={!groupOff(group.k)}
+              onclick={() => toggleGroup(group.k)}>{group.n}</button
+            >
+          {/each}
+        </div>
+      </div>
+    {/if}
+    {#if needsBass}<BassRow />{/if}
+    {#if needsBass && bassHere() && !micUsable()}<p class="note" style="margin:0">
+        With no microphone here, the three play-along drills ask you to mark yourself. They still
+        count.
+      </p>{/if}
+    <button class="start" id="startsess" onclick={() => startSession('theory')}
+      >Start session</button
+    >
+    <p class="note" style="text-align:center;margin:0">
+      {sessionLength} cards · about {Math.max(
+        1,
+        Math.round((sessionLength * SECONDS_PER_CARD) / 60),
+      )} minutes{poolSize && poolSize < sessionLength
+        ? ' · only ' + poolSize + ' cards switched on, so some come round twice'
+        : ''}
+    </p>
+  </div>
+</div>
+
+<div class="sec">
+  <h2>Families</h2>
+  <div class="fams">
+    {#each appGroups() as group (group.k)}
+      {@const drills = famDrills(group.k)}
+      {@const progress = famMastery(group.k)}
+      {@const gated = famHidden(group.k)}
+      {@const noBass = famNoBass(group.k)}
+      <button class="fam" data-open={group.k} onclick={() => open(group.k)}>
+        <span class="ic">{@html IC[group.ic]}</span>
+        <span class="txt"
+          ><span class="nm">{group.n}</span>
+          <span class="sb">{group.sb}</span>
+          <span class="meta"
+            >{plural(drills.length, 'drill')}{gated
+              ? ' · ' + gated + ' more waiting in Setup'
+              : ''}{noBass ? ' · ' + noBass + ' waiting for the bass' : ''}{progress.pct
+              ? ' · ' + progress.pct + '% solid'
+              : ''}</span
+          ></span
+        >
+        <span class="mast">→</span></button
+      >
+    {/each}
+  </div>
+  <p class="note">
+    Switching a family off here takes it out of the daily session; it stays open to practise by
+    hand.{hasScales
+      ? ' Scales also have a session of their own, on their page, which ignores this row.'
+      : ''}
+  </p>
+</div>

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

@@ -0,0 +1,239 @@
+<!-- How rhythm is written: values, dots, ties, rests, bars, time signatures, and counting out loud. -->
+<script lang="ts">
+  import { METERS, RVALS, beatsText, type Bar } from '../../music/rhythm';
+  import { rhOneSVG, tsGlyphSVG } from '../../notation/rhythmsvg';
+  import { playMeter } from '../../audio/synth';
+  import RhythmBar from '../RhythmBar.svelte';
+  import RefBar from '../RefBar.svelte';
+
+  interface Props {
+    back?: { label: string; to: string };
+    /** where the drop-out clock lives, for the last paragraph */
+    clockWhere?: string;
+  }
+  const { back, clockWhere = 'Mira (the bass app), under Warm up,' }: Props = $props();
+
+  /** An example bar from its events. Compound time groups in dotted quarters (6 sixteenths). */
+  const bar = (ts: [number, number], events: Bar['ev'], compound = false): Bar => ({
+    ts,
+    u: events.reduce((sum, event) => sum + event.u, 0),
+    g: compound ? 6 : 4,
+    cmp: compound,
+    ev: events,
+  });
+</script>
+
+<RefBar title="Reading rhythm" {back} />
+
+<div class="sec">
+  <h2>The line is time, not pitch</h2>
+  <div class="card stack">
+    <p class="note">
+      On a rhythm staff there is one line and it means nothing about how high the note is — only
+      when it happens and how long it lasts. This is worth learning on its own, because rhythm is
+      the half of reading that carries a part. A bassist who reads rhythm perfectly and pitch
+      approximately will hold a band together; the reverse will not.
+    </p>
+    <p class="note">
+      Every value below is a whole number of sixteenths, and that is the only arithmetic reading
+      ever needs.
+    </p>
+  </div>
+</div>
+
+<div class="sec">
+  <h2>The values</h2>
+  <div class="card">
+    <table class="opens">
+      <tbody>
+        {#each RVALS as value (value.u)}
+          <tr
+            ><td style="width:72px">{@html rhOneSVG(value.u, false, 62)}</td>
+            <td><b>{value.n}</b><br /><span class="hint">{beatsText(value.u)} in 4/4</span></td>
+            <td style="width:72px">{@html rhOneSVG(value.u, true, 62)}</td></tr
+          >
+        {/each}
+      </tbody>
+    </table>
+    <p class="note" style="margin-top:8px">
+      Left: the note. Right: the rest of the same length — the same amount of time, deliberately not
+      played. Rests are music, and reading them accurately is what stops a line turning to mush.
+    </p>
+    <p class="note">
+      The whole rest and the half rest are the same little block; the only difference is which side
+      of the line it sits on. The whole rest hangs below, the half rest sits on top. Everyone mixes
+      them up at first.
+    </p>
+  </div>
+</div>
+
+<div class="sec">
+  <h2>The dot</h2>
+  <div class="card">
+    <RhythmBar bar={bar([4, 4], [{ u: 6 }, { u: 2 }, { u: 4 }, { u: 4 }])} count={true} />
+    <p class="note" style="margin-top:8px">
+      A dot after a note adds half of it again: a dotted quarter is a quarter plus an eighth, a beat
+      and a half. That is where nearly every syncopation in pop and rock comes from — the second
+      note lands on the <i>and</i>, and the phrase starts pushing.
+    </p>
+  </div>
+</div>
+
+<div class="sec">
+  <h2>The tie</h2>
+  <div class="card">
+    <RhythmBar
+      bar={bar([4, 4], [{ u: 2 }, { u: 2 }, { u: 2, tie: true }, { u: 2 }, { u: 4 }, { u: 4 }])}
+      count={true}
+    />
+    <p class="note" style="margin-top:8px">
+      A curved line joining two noteheads means play the first and hold through the second: one
+      sound, both lengths. It exists so a note can cross a beat or a barline while the beats stay
+      visible underneath. Counting a tie out loud, you say the number for the tied-to note but do
+      not attack it.
+    </p>
+  </div>
+</div>
+
+<div class="sec">
+  <h2>Counting out loud</h2>
+  <div class="card stack">
+    <RhythmBar
+      bar={bar(
+        [4, 4],
+        [{ u: 1 }, { u: 1 }, { u: 1 }, { u: 1 }, { u: 2 }, { u: 2 }, { u: 4 }, { u: 2 }, { u: 2 }],
+      )}
+      count={true}
+    />
+    <p class="note">
+      Four sixteenths in a beat are counted <b>1 e &amp; a</b>. Eighths are <b>1 &amp;</b>. A
+      quarter is just <b>1</b>. Say it aloud while you tap: the syllable tells you where you are
+      inside the beat without counting anything, and it is the fastest route from the page to your
+      hands.
+    </p>
+    <p class="note">
+      This is also why notes shorter than a quarter are beamed in groups of one beat. The beams are
+      not decoration — they draw the beat for you, so you can see at a glance that four sixteenths
+      belong to beat 3.
+    </p>
+    <p class="note">
+      <b>Writing a counting down.</b> The Count the bar drill writes the whole bar out in a row, one
+      slot for each step of it, in order: the syllable where a note starts and a <b>·</b> where
+      nothing does. So a bar of four quarter notes is
+      <span style="font-family:var(--f-mono)">1 2 3 4</span>, and a bar that plays only on the first
+      beat and the <i>and</i> of three is
+      <span style="font-family:var(--f-mono)">1 · · · · · &amp; ·</span>. Listing only the syllables
+      you play would be shorter, but two different bars can produce the same short list — the dots
+      are what pin each note to its place.
+    </p>
+  </div>
+</div>
+
+<div class="sec">
+  <h2>Bars and time signatures</h2>
+  <div class="card stack">
+    <p class="note">
+      Music is counted in equal packets called <b>bars</b>, and the vertical line at the end of one
+      is the <b>barline</b>. The first beat of every bar is the strong one — it is where a phrase
+      lands, where a chord usually changes, and where the bass usually plays the root. Nearly
+      everything about feel comes from knowing where beat 1 is.
+    </p>
+    <p class="note">
+      The pair of numbers at the start says how those packets are built. It looks like a fraction
+      but it is not one; it is two separate facts stacked up:
+    </p>
+    <div class="tsrow">
+      <div class="tsnum">{@html tsGlyphSVG([4, 4], 62)}</div>
+      <div>
+        <p class="note" style="margin:0">
+          <b>The bottom number</b> names the note value that counts as one beat. 4 means a quarter
+          note, 8 means an eighth note, 2 means a half note. It is the <i>denominator</i> in the sense
+          that 4 means “quarter”, and that is the only sense in which any of this is a fraction.
+        </p>
+        <p class="note"><b>The top number</b> says how many of those fit in a bar.</p>
+        <p class="note" style="margin-bottom:0">
+          So <b>4/4</b> is four quarter-note beats to a bar, and <b>3/4</b> is three. Same beat, different
+          sized packet — and that one difference is what separates a rock song from a waltz.
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="sec">
+  <h2>The ones you will meet</h2>
+  <div class="card stack">
+    <p class="note">
+      Tap any of them to hear two bars of the bare pulse. The accent is on beat 1 — listen for how
+      far apart the accents are, because that <i>is</i> the time signature.
+    </p>
+    {#each METERS as meter (meter.n)}
+      <div class="tsrow">
+        <div class="tsnum">{@html tsGlyphSVG(meter.ts, 54)}</div>
+        <div style="flex:1;min-width:0">
+          <div class="setrow" style="border:none;padding:0">
+            <span class="lbl">{meter.n}</span>
+            <button
+              class="chip sm"
+              data-meter={meter.ts.join('/')}
+              onclick={() => playMeter(meter.ts)}>♪ Hear it</button
+            >
+          </div>
+          <p class="note" style="margin:4px 0 0">{@html meter.d}</p>
+        </div>
+      </div>
+    {/each}
+  </div>
+</div>
+
+<div class="sec">
+  <h2>Counting a bar of 3/4</h2>
+  <div class="card stack">
+    <RhythmBar bar={bar([3, 4], [{ u: 4 }, { u: 2 }, { u: 2 }, { u: 4 }])} count={true} />
+    <p class="note">
+      Three beats, so the counting only ever reaches 3 before the barline comes round and it starts
+      again at 1. A bar of 3/4 that adds up to four beats is simply wrong — that is the rule the
+      Complete the bar drill is testing.
+    </p>
+  </div>
+</div>
+
+<div class="sec">
+  <h2>Why 6/8 is different</h2>
+  <div class="card stack">
+    <RhythmBar
+      bar={bar([6, 8], [{ u: 2 }, { u: 2 }, { u: 2 }, { u: 4 }, { u: 2 }], true)}
+      count={true}
+    />
+    <p class="note">
+      Read literally, 6/8 is six eighth-note beats in a bar. Nobody counts it that way above a
+      crawl. In the ear it is <b>two</b> beats that each divide into <b>three</b> — the accents fall
+      on 1 and 4 — and that is what makes it roll rather than march. Time signatures that work like
+      this are called <i>compound</i>; 6/8, 9/8 and 12/8 are the common ones.
+    </p>
+    <p class="note">
+      The quick test: if the top number is 6, 9 or 12 over an 8, divide it by three to get the real
+      number of beats. Count the eighths out loud at first — 1 2 3 4 5 6 — and let the weight settle
+      on 1 and 4 until the two-beat feel takes over.
+    </p>
+  </div>
+</div>
+
+<div class="sec">
+  <h2>How to practise it</h2>
+  <div class="card stack">
+    <p class="note">
+      <b>Say it before you play it.</b> Count the bar out loud with the metronome until it is automatic.
+      Only then put it on the instrument — sight-reading fails far more often on rhythm than on notes.
+    </p>
+    <p class="note">
+      <b>Subdivide even when nothing is subdivided.</b> If the bar is four quarter notes, still feel the
+      eighths underneath. That is what keeps long notes from shrinking.
+    </p>
+    <p class="note">
+      <b>Practise the silence.</b> The Internal clock exercise in {clockWhere} takes the metronome away
+      for a few bars at a time. Holding tempo through silence is the skill; playing along with a click
+      is only the test.
+    </p>
+  </div>
+</div>

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

@@ -0,0 +1,210 @@
+<!-- The Scales family: its own session, the drills, where you stand, and which scales are in. -->
+<script lang="ts">
+  import { honmoon, setSetting, queueSave } from '../../store/honmoon.svelte';
+  import { bassHere } from '../../music/bass';
+  import {
+    SCALES,
+    SGROUPS,
+    degPretty,
+    enabledScales,
+    scaleCards,
+    scaleOn,
+  } from '../../music/scales';
+  import { IC } from '../../notation/icons';
+  import { scaleDrillsInApp, sdrillOn } from '../../drills/registry.svelte';
+  import { startDrill, startSession } from '../../drills/runtime.svelte';
+  import { go, hasRoute } from '../../nav.svelte';
+  import { toggledIn } from '../../util/list';
+  import { scaleMatrix, scaleStats } from '../scaleboard';
+  import Stat from '../Stat.svelte';
+  import BassRow from '../BassRow.svelte';
+
+  const scaleDrills = scaleDrillsInApp();
+  const enabled = $derived(enabledScales());
+  const pairs = $derived(scaleCards().length);
+  const summary = $derived(scaleStats());
+  const needsBass = scaleDrills.some((def) => def.bass);
+  /* which groups of scales mean anything for this app's drills: arpeggios
+     and the rest are always in play, so every group is shown */
+  function toggleSdrill(id: string) {
+    const off = toggledIn(honmoon.settings.sdoff || [], id);
+    if (scaleDrills.every((def) => off.includes(def.id))) {
+      return; // never switch every scale drill off
+    }
+    honmoon.settings.sdoff = off;
+    queueSave();
+  }
+  function toggleScale(id: string) {
+    honmoon.settings.sen = toggledIn(honmoon.settings.sen || [], id);
+    queueSave();
+  }
+</script>
+
+<div class="sec">
+  <div class="bar">
+    <button class="ghost" id="back" onclick={() => go('home')}>← Practice</button>
+    <span class="spacer"></span><span class="tick">Scales</span>
+  </div>
+</div>
+
+<div class="sec">
+  <div class="card sesscard stack">
+    <div>
+      <div style="font-family:var(--f-disp);font-size:22px;letter-spacing:.02em">Scale session</div>
+      <p class="note" style="margin:4px 0 0">
+        Nothing but scale-and-key pairs, for when you want a run of them. They also turn up in the
+        daily session unless you switch the family off there.
+      </p>
+    </div>
+    <div class="levels">
+      {#each [10, 20, 30] as n (n)}
+        <button
+          class="chip sm"
+          data-set="sslen"
+          data-val={n}
+          aria-pressed={+(honmoon.settings.sslen || 20) === n}
+          onclick={() => setSetting('sslen', n)}>{n}</button
+        >
+      {/each}
+    </div>
+    <div>
+      <div class="hint" style="margin-bottom:6px">Drills</div>
+      <div class="levels">
+        {#each scaleDrills as def (def.id)}
+          {@const away = def.bass && !bassHere()}
+          <button
+            class="chip sm tog"
+            data-sdrill={def.id}
+            aria-pressed={sdrillOn(def.id) && !away}
+            disabled={away}
+            style={away ? 'opacity:.5' : ''}
+            onclick={() => toggleSdrill(def.id)}>{def.nm}{def.bass ? ' ♪' : ''}</button
+          >
+        {/each}
+      </div>
+    </div>
+    {#if needsBass}<BassRow />{/if}
+    <div>
+      <div class="hint" style="margin-bottom:6px">Roots</div>
+      <div class="levels">
+        <button
+          class="chip sm"
+          data-set="sroots"
+          data-val="nat"
+          aria-pressed={honmoon.settings.sroots !== 'all'}
+          onclick={() => setSetting('sroots', 'nat')}>Natural only</button
+        >
+        <button
+          class="chip sm"
+          data-set="sroots"
+          data-val="all"
+          aria-pressed={honmoon.settings.sroots === 'all'}
+          onclick={() => setSetting('sroots', 'all')}>All twelve</button
+        >
+        {#if needsBass || scaleDrills.some((def) => def.id === 'scbuild' || def.id === 'scwrong' || def.id === 'scname')}
+          <button
+            class="chip sm"
+            data-set="sstart"
+            data-val="both"
+            aria-pressed={honmoon.settings.sstart === 'both'}
+            onclick={() => setSetting('sstart', 'both')}>Either string</button
+          >
+          <button
+            class="chip sm"
+            data-set="sstart"
+            data-val="E"
+            aria-pressed={honmoon.settings.sstart === 'E'}
+            onclick={() => setSetting('sstart', 'E')}>E only</button
+          >
+          <button
+            class="chip sm"
+            data-set="sstart"
+            data-val="A"
+            aria-pressed={honmoon.settings.sstart === 'A'}
+            onclick={() => setSetting('sstart', 'A')}>A only</button
+          >
+        {/if}
+      </div>
+    </div>
+    <button class="start" id="startscale" onclick={() => startSession('scales')}
+      >Start scale session</button
+    >
+    <p class="note" style="text-align:center;margin:0">
+      {enabled.length} scales · {pairs} scale-and-key pairs in rotation
+    </p>
+    {#if !enabled.length}<p class="err">Switch at least one scale on below.</p>{/if}
+  </div>
+</div>
+
+{#if hasRoute('sx')}
+  <div class="sec">
+    <button class="drill ref" data-go="sx" onclick={() => go('sx')}
+      ><span class="ic">{@html IC.book}</span>
+      <span
+        ><span class="nm">Scale explorer</span><br /><span class="sb"
+          >Every scale in every key on the neck, with degrees, fingerings and the notes spelled
+          properly.</span
+        ></span
+      >
+      <span class="mast">→</span></button
+    >
+  </div>
+{/if}
+
+<div class="sec">
+  <h2>Where you stand</h2>
+  <Stat
+    items={[
+      { v: summary.seen, k: 'Met' },
+      { v: summary.solid, k: 'Solid' },
+      { v: summary.ans, k: 'Answers' },
+      { v: summary.ans ? summary.acc + '%' : '—', k: 'Accuracy' },
+    ]}
+  />
+  <div class="card" style="margin-top:10px">
+    {@html scaleMatrix()}
+    <div class="legend" style="margin-top:10px">
+      <span><b class="m0"></b>not met</span><span><b class="m1"></b>shaky</span>
+      <span><b class="m3"></b>getting there</span><span><b class="m5"></b>solid</span>
+    </div>
+  </div>
+  <p class="note">
+    One square per scale in one key — {summary.total} of them in rotation. Squares you miss come back
+    sooner and more often, exactly as they do on the Drills side. This is the same spaced repetition,
+    just over scales.
+  </p>
+</div>
+
+<div class="sec">
+  <h2>Single drills</h2>
+  <div class="drills">
+    {#each scaleDrills as def (def.id)}
+      <button class="drill" data-drill={def.id} onclick={() => startDrill(def.id, 'scale')}
+        ><span class="ic">{@html IC[def.ic]}</span>
+        <span><span class="nm">{def.nm}</span><br /><span class="sb">{def.sb}</span></span><span
+          class="mast">→</span
+        ></button
+      >
+    {/each}
+  </div>
+</div>
+
+{#each SGROUPS as group (group)}
+  <div class="sec">
+    <h2>{group}</h2>
+    <div class="stack">
+      {#each SCALES.filter((scale) => scale.g === group) as scale (scale.id)}
+        <div class="scrow" class:on={scaleOn(scale.id)}>
+          <button
+            class="chip sm tog"
+            data-scale={scale.id}
+            aria-pressed={scaleOn(scale.id)}
+            onclick={() => toggleScale(scale.id)}>{scale.n}</button
+          >
+          <span class="ivs">{scale.dg.map(degPretty).join(' ')}</span>
+          <p class="note">{scale.d}</p>
+        </div>
+      {/each}
+    </div>
+  </div>
+{/each}