char-slop/chordpad.vibed.software

git clone https://git.t4t.associates/char-slop/chordpad.vibed.software

Charlotte Somimprove note inputdbf5af8

main
branchesmainall refs →
1.4 KiB53 linesraw
1import type { JSX } from "@char/aftercare/jsx-runtime";
2import { project } from "../project/store.ts";
3import { watch } from "./dom.tsx";
4import { activeTrackId, chordEdit } from "./state.ts";
5
6type Hint = [keys: string[], action: string];
7
8const HINTS: Record<string, Hint[]> = {
9  typing: [
10    [["space"], "next chord"],
11    [["enter"], "done"],
12    [["esc"], "cancel"],
13  ],
14  chords: [
15    [["A–G", "I–VII"], "type a chord"],
16    [["←→"], "move"],
17    [["↑↓"], "inversion"],
18    [["p"], "unpin"],
19    [["space"], "play"],
20  ],
21  notes: [
22    [["click"], "add"],
23    [["ctrl click"], "move cursor"],
24    [["shift drag"], "select"],
25    [["alt click"], "delete"],
26    [["↑↓"], "transpose"],
27    [["space"], "play"],
28  ],
29  none: [[["space"], "play"]],
30};
31
32const render = ([keys, action]: Hint) => (
33  <span class="hint">
34    {keys.map(k => (
35      <kbd>{k}</kbd>
36    ))}{" "}
37    {action}
38  </span>
39);
40
41/** the few keys that matter for whatever's being edited */
42export function Hints(): JSX.Element {
43  const bar = (<footer class="hints" />) as HTMLElement;
44  let shown = "";
45  watch(bar, [activeTrackId, chordEdit, project], () => {
46    const track = project.get().tracks.find(t => t.id === activeTrackId.get());
47    const which = chordEdit.get() ? "typing" : (track?.kind ?? "none");
48    if (which === shown) return;
49    shown = which;
50    bar.replaceChildren(...HINTS[which].map(render));
51  });
52  return bar;
53}