@greenblacksky/honmoon 0.0.0-stage → 0.4.0

package/src/lib/ui/tapfix.ts

@@ -0,0 +1,93 @@
+/* Every control is driven from pointer events, not click. On Android Chrome a
+   click can be withheld altogether — the button lights up from :active and
+   nothing else happens — when the browser is still arbitrating the gesture.
+   pointerdown/pointerup always arrive, so a tap is recognised here: press and
+   release on the same button, little movement, no long press. The button is
+   then clicked programmatically, so every Svelte onclick handler just works.
+
+   The browser may still send its own click afterwards, and by then the screen
+   has often re-drawn — it would hit whatever button moved under the finger
+   and fire a second, wrong action. Real pointer clicks that arrive just after
+   a recognised tap are swallowed. Keyboard Enter and Space produce a click
+   with no pointer sequence in front of it, and those always go through. */
+
+let installed = false;
+/** A press that moves further than this is a pan, not a tap. */
+const MAX_MOVE_PX = 14;
+/** A press held longer than this is a long press, not a tap. */
+const MAX_PRESS_MS = 800;
+/** The browser's own click arriving this soon after a recognised tap is a duplicate. */
+const DUPLICATE_CLICK_MS = 600;
+
+export function installTapFix(root: Document = document): void {
+  if (installed || typeof window === 'undefined' || !window.PointerEvent) {
+    return;
+  }
+  installed = true;
+  let press: { button: HTMLButtonElement; x: number; y: number; t: number } | null = null;
+  let tappedAt = 0;
+  let clickingOurselves = false;
+  const buttonAt = (node: EventTarget | null) =>
+    node && (node as Element).closest
+      ? ((node as Element).closest('button') as HTMLButtonElement | null)
+      : null;
+
+  root.addEventListener(
+    'pointerdown',
+    (event) => {
+      const button = buttonAt(event.target);
+      press = button ? { button, x: event.clientX, y: event.clientY, t: Date.now() } : null;
+    },
+    true,
+  );
+  root.addEventListener(
+    'pointercancel',
+    () => {
+      press = null;
+    },
+    true,
+  );
+  root.addEventListener(
+    'pointerup',
+    (event) => {
+      const started = press;
+      press = null;
+      if (!started || buttonAt(event.target) !== started.button) {
+        return;
+      }
+      const moved =
+        Math.abs(event.clientX - started.x) > MAX_MOVE_PX ||
+        Math.abs(event.clientY - started.y) > MAX_MOVE_PX;
+      const heldTooLong = Date.now() - started.t > MAX_PRESS_MS;
+      if (moved || heldTooLong || started.button.disabled) {
+        return;
+      }
+      tappedAt = Date.now();
+      clickingOurselves = true;
+      try {
+        started.button.click();
+      } finally {
+        clickingOurselves = false;
+      }
+    },
+    true,
+  );
+  root.addEventListener(
+    'click',
+    (event) => {
+      if (clickingOurselves) {
+        return;
+      }
+      const mouse = event as MouseEvent;
+      const fromKeyboard = mouse.detail === 0 && !mouse.clientX && !mouse.clientY;
+      if (fromKeyboard || !buttonAt(event.target)) {
+        return;
+      }
+      if (Date.now() - tappedAt < DUPLICATE_CLICK_MS) {
+        event.stopPropagation();
+        event.preventDefault();
+      }
+    },
+    true,
+  );
+}

package/src/lib/ui/types.ts

@@ -0,0 +1,40 @@
+/** One tab in the header. */
+export interface Tab {
+  id: string;
+  label: string;
+  /** the screen the tab opens */
+  to: string;
+  /** every screen that belongs to this tab, so it stays lit there */
+  views: string[];
+}
+
+/** The sections the Stats screen can show; each app lists the ones it wants. */
+export type StatsSection =
+  | 'overall'
+  | 'twoweeks'
+  | 'areas'
+  | 'bynote'
+  | 'neck'
+  | 'staff'
+  | 'scales'
+  | 'byscale'
+  | 'weakest'
+  | 'tempo'
+  | 'data';
+
+/** The rows the Setup screen can show; each app lists the ones it wants. */
+export type SetupRow =
+  | 'range'
+  | 'acc'
+  | 'pref'
+  | 'appearance'
+  | 'bass'
+  | 'hints'
+  | 'labels'
+  | 'clefs'
+  | 'mdo'
+  | 'rhythm'
+  | 'sound'
+  | 'mic'
+  | 'how'
+  | 'data';

package/src/lib/util/list.ts

@@ -0,0 +1,4 @@
+/** A copy of a list with an item added, or removed if it was already there. */
+export function toggledIn<T>(list: readonly T[], item: T): T[] {
+  return list.includes(item) ? list.filter((other) => other !== item) : [...list, item];
+}

package/src/lib/util/random.ts

@@ -0,0 +1,23 @@
+/* Every random choice in Honmoon goes through Math.random, on purpose: a test
+   can replace it with a seeded generator and get the same questions every
+   run. That only holds while the code asks for random numbers in the same
+   order, so keep the order of calls when refactoring, and do not reach for a
+   second source of randomness. */
+
+/** A random whole number from 0 up to (not including) n. */
+export function rnd(n: number): number {
+  return Math.floor(Math.random() * n);
+}
+
+export function pickOf<T>(items: readonly T[]): T {
+  return items[rnd(items.length)];
+}
+
+/** Fisher–Yates, in place. Returns the same array for chaining. */
+export function shuffle<T>(items: T[]): T[] {
+  for (let i = items.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [items[i], items[j]] = [items[j], items[i]];
+  }
+  return items;
+}

package/src/lib/util/text.ts

@@ -0,0 +1,50 @@
+/** Escapes text for use inside the SVG/HTML strings the notation code builds. */
+export function esc(s: unknown): string {
+  return String(s).replace(
+    /[&<>]/g,
+    (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;' })[c] as string,
+  );
+}
+
+/** "a fifth", "an octave" */
+export function anA(w: string): string {
+  return (/^[aeiou]/i.test(w) ? 'an ' : 'a ') + w;
+}
+
+export const NUMWORD = [
+  'zero',
+  'one',
+  'two',
+  'three',
+  'four',
+  'five',
+  'six',
+  'seven',
+  'eight',
+  'nine',
+  'ten',
+  'eleven',
+  'twelve',
+];
+
+/** Local calendar day as YYYY-MM-DD — the key the daily log is stored under. */
+export function dayKey(d: Date): string {
+  return (
+    d.getFullYear() +
+    '-' +
+    String(d.getMonth() + 1).padStart(2, '0') +
+    '-' +
+    String(d.getDate()).padStart(2, '0')
+  );
+}
+
+export function todayKey(): string {
+  return dayKey(new Date());
+}
+
+/** "3m 07s"-style durations used on the summary screens. */
+export function minsSecs(totalSecs: number): string {
+  const mins = Math.floor((totalSecs || 0) / 60);
+  const secs = (totalSecs || 0) % 60;
+  return (mins ? mins + 'm ' : '') + secs + 's';
+}