@diffenderfer-games/hub 2.0.0-next.0 → 2.0.0-next.10

package/src/input/device-state.ts

@@ -1,146 +1,146 @@
-/**
- * The raw state of every input device, updated by DOM events and sampled once
- * per frame: held keys and mouse buttons, the pointer, movement and wheel
- * accumulators, one-frame pulses, on-screen sticks and buttons, and gamepads.
- */
-import { AXIS_DEADZONE, readGamepads } from './gamepad';
-
-/** An on-screen stick's output, -1..1 per axis. */
-export interface StickOutput {
-  outX: number;
-  outY: number;
-}
-
-/** A 2D accumulator. */
-interface Delta {
-  dx: number;
-  dy: number;
-}
-
-/** Keys that scroll the page; cancelled during play (not while typing). */
-const SCROLL_KEYS = new Set([' ', 'arrowup', 'arrowdown', 'arrowleft', 'arrowright']);
-
-/** Input types that don't take text (buttons, checkboxes, sliders…). */
-const NON_TEXT_INPUT_TYPES = new Set(['button', 'submit', 'reset', 'checkbox', 'radio', 'range', 'color', 'file', 'image']);
-
-/** Whether typing in `target` owns Space and the arrow keys. */
-export function isTypingTarget(target: EventTarget | null): boolean {
-  if (!(target instanceof HTMLElement)) {
-    return false;
-  }
-  if (target.isContentEditable || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement) {
-    return true;
-  }
-  return target instanceof HTMLInputElement && !NON_TEXT_INPUT_TYPES.has(target.type);
-}
-
-/** What the device state reports back to the input system. */
-export interface DeviceStateEvents {
-  /** The mouse moved or clicked: it is the active pointer. */
-  onMouseActivity(): void;
-  /** A gamepad connected (`true`) or disconnected (`false`). */
-  onGamepadConnection(isConnected: boolean): void;
-  /** Whether keydown should cancel scrolling keys (a game defined its inputs). */
-  shouldCancelScrollKeys(): boolean;
-}
-
-/** Raw device state for one page. */
-export class DeviceState {
-  readonly heldKeys = new Set<string>();
-  readonly heldMouseButtons = new Set<number>();
-  readonly pressedVirtualButtons = new Set<string>();
-  readonly sticks = new Map<string, StickOutput>();
-  pointerX = 0;
-  pointerY = 0;
-  readonly movement: Delta = { dx: 0, dy: 0 };
-  readonly wheel: Delta = { dx: 0, dy: 0 };
-  gamepads: Gamepad[] = [];
-  frame = 0;
-  private readonly pulseFrames = new Map<string, number>();
-
-  /** Fire a one-frame pulse (`tap`, `mouse:dbl`). */
-  pulse(name: string): void {
-    this.pulseFrames.set(name, this.frame);
-  }
-
-  /** Whether a pulse fired this frame or the last. */
-  isPulseActive(name: string): boolean {
-    const firedAt = this.pulseFrames.get(name);
-    return firedAt === this.frame || firedAt === this.frame - 1;
-  }
-
-  /** Poll the gamepads. Returns whether any are connected and whether any moved. */
-  pollGamepads(): { isConnected: boolean; hasActivity: boolean } {
-    this.gamepads = readGamepads();
-    const hasActivity = this.gamepads.some((pad) => pad.buttons.some((button) => button.pressed || button.value > 0.5)
-      || pad.axes.some((axis) => Math.abs(axis) > AXIS_DEADZONE));
-    return { isConnected: this.gamepads.length > 0, hasActivity };
-  }
-
-  /** End-of-frame decay of the relative accumulators. */
-  decay(): void {
-    this.movement.dx = 0;
-    this.movement.dy = 0;
-    this.wheel.dx *= 0.6;
-    this.wheel.dy *= 0.6;
-  }
-
-  /** Release everything held (focus loss, hidden tab), so nothing sticks. */
-  releaseAll(): void {
-    this.heldKeys.clear();
-    this.heldMouseButtons.clear();
-    this.pressedVirtualButtons.clear();
-    for (const stick of this.sticks.values()) {
-      stick.outX = 0;
-      stick.outY = 0;
-    }
-  }
-
-  /** Wire the DOM listeners that feed this state. */
-  listen(events: DeviceStateEvents): void {
-    if (typeof window === 'undefined') {
-      return;
-    }
-    window.addEventListener('keydown', (event) => {
-      const key = event.key.toLowerCase();
-      this.heldKeys.add(key);
-      if (events.shouldCancelScrollKeys() && SCROLL_KEYS.has(key) && !isTypingTarget(event.target)) {
-        event.preventDefault();
-      }
-    });
-    window.addEventListener('keyup', (event) => this.heldKeys.delete(event.key.toLowerCase()));
-    window.addEventListener('mousemove', (event) => {
-      this.movement.dx += event.movementX;
-      this.movement.dy += event.movementY;
-      this.pointerX = event.clientX;
-      this.pointerY = event.clientY;
-      events.onMouseActivity();
-    });
-    window.addEventListener('mousedown', (event) => {
-      this.heldMouseButtons.add(event.button);
-      events.onMouseActivity();
-    });
-    window.addEventListener('mouseup', (event) => this.heldMouseButtons.delete(event.button));
-    window.addEventListener('dblclick', () => {
-      this.pulse('mouse:dbl');
-    });
-    window.addEventListener('wheel', (event) => {
-      this.wheel.dx += Math.sign(event.deltaX);
-      this.wheel.dy += Math.sign(event.deltaY);
-    }, { passive: true });
-    window.addEventListener('blur', () => {
-      this.releaseAll();
-    });
-    document.addEventListener('visibilitychange', () => {
-      if (document.hidden) {
-        this.releaseAll();
-      }
-    });
-    window.addEventListener('gamepadconnected', () => {
-      events.onGamepadConnection(true);
-    });
-    window.addEventListener('gamepaddisconnected', () => {
-      events.onGamepadConnection(false);
-    });
-  }
-}
+/**
+ * The raw state of every input device, updated by DOM events and sampled once
+ * per frame: held keys and mouse buttons, the pointer, movement and wheel
+ * accumulators, one-frame pulses, on-screen sticks and buttons, and gamepads.
+ */
+import { AXIS_DEADZONE, readGamepads } from './gamepad';
+
+/** An on-screen stick's output, -1..1 per axis. */
+export interface StickOutput {
+  outX: number;
+  outY: number;
+}
+
+/** A 2D accumulator. */
+interface Delta {
+  dx: number;
+  dy: number;
+}
+
+/** Keys that scroll the page; cancelled during play (not while typing). */
+const SCROLL_KEYS = new Set([' ', 'arrowup', 'arrowdown', 'arrowleft', 'arrowright']);
+
+/** Input types that don't take text (buttons, checkboxes, sliders…). */
+const NON_TEXT_INPUT_TYPES = new Set(['button', 'submit', 'reset', 'checkbox', 'radio', 'range', 'color', 'file', 'image']);
+
+/** Whether typing in `target` owns Space and the arrow keys. */
+export function isTypingTarget(target: EventTarget | null): boolean {
+  if (!(target instanceof HTMLElement)) {
+    return false;
+  }
+  if (target.isContentEditable || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement) {
+    return true;
+  }
+  return target instanceof HTMLInputElement && !NON_TEXT_INPUT_TYPES.has(target.type);
+}
+
+/** What the device state reports back to the input system. */
+export interface DeviceStateEvents {
+  /** The mouse moved or clicked: it is the active pointer. */
+  onMouseActivity(): void;
+  /** A gamepad connected (`true`) or disconnected (`false`). */
+  onGamepadConnection(isConnected: boolean): void;
+  /** Whether keydown should cancel scrolling keys (a game defined its inputs). */
+  shouldCancelScrollKeys(): boolean;
+}
+
+/** Raw device state for one page. */
+export class DeviceState {
+  readonly heldKeys = new Set<string>();
+  readonly heldMouseButtons = new Set<number>();
+  readonly pressedVirtualButtons = new Set<string>();
+  readonly sticks = new Map<string, StickOutput>();
+  pointerX = 0;
+  pointerY = 0;
+  readonly movement: Delta = { dx: 0, dy: 0 };
+  readonly wheel: Delta = { dx: 0, dy: 0 };
+  gamepads: Gamepad[] = [];
+  frame = 0;
+  private readonly pulseFrames = new Map<string, number>();
+
+  /** Fire a one-frame pulse (`tap`, `mouse:dbl`). */
+  pulse(name: string): void {
+    this.pulseFrames.set(name, this.frame);
+  }
+
+  /** Whether a pulse fired this frame or the last. */
+  isPulseActive(name: string): boolean {
+    const firedAt = this.pulseFrames.get(name);
+    return firedAt === this.frame || firedAt === this.frame - 1;
+  }
+
+  /** Poll the gamepads. Returns whether any are connected and whether any moved. */
+  pollGamepads(): { isConnected: boolean; hasActivity: boolean } {
+    this.gamepads = readGamepads();
+    const hasActivity = this.gamepads.some((pad) => pad.buttons.some((button) => button.pressed || button.value > 0.5)
+      || pad.axes.some((axis) => Math.abs(axis) > AXIS_DEADZONE));
+    return { isConnected: this.gamepads.length > 0, hasActivity };
+  }
+
+  /** End-of-frame decay of the relative accumulators. */
+  decay(): void {
+    this.movement.dx = 0;
+    this.movement.dy = 0;
+    this.wheel.dx *= 0.6;
+    this.wheel.dy *= 0.6;
+  }
+
+  /** Release everything held (focus loss, hidden tab), so nothing sticks. */
+  releaseAll(): void {
+    this.heldKeys.clear();
+    this.heldMouseButtons.clear();
+    this.pressedVirtualButtons.clear();
+    for (const stick of this.sticks.values()) {
+      stick.outX = 0;
+      stick.outY = 0;
+    }
+  }
+
+  /** Wire the DOM listeners that feed this state. */
+  listen(events: DeviceStateEvents): void {
+    if (typeof window === 'undefined') {
+      return;
+    }
+    window.addEventListener('keydown', (event) => {
+      const key = event.key.toLowerCase();
+      this.heldKeys.add(key);
+      if (events.shouldCancelScrollKeys() && SCROLL_KEYS.has(key) && !isTypingTarget(event.target)) {
+        event.preventDefault();
+      }
+    });
+    window.addEventListener('keyup', (event) => this.heldKeys.delete(event.key.toLowerCase()));
+    window.addEventListener('mousemove', (event) => {
+      this.movement.dx += event.movementX;
+      this.movement.dy += event.movementY;
+      this.pointerX = event.clientX;
+      this.pointerY = event.clientY;
+      events.onMouseActivity();
+    });
+    window.addEventListener('mousedown', (event) => {
+      this.heldMouseButtons.add(event.button);
+      events.onMouseActivity();
+    });
+    window.addEventListener('mouseup', (event) => this.heldMouseButtons.delete(event.button));
+    window.addEventListener('dblclick', () => {
+      this.pulse('mouse:dbl');
+    });
+    window.addEventListener('wheel', (event) => {
+      this.wheel.dx += Math.sign(event.deltaX);
+      this.wheel.dy += Math.sign(event.deltaY);
+    }, { passive: true });
+    window.addEventListener('blur', () => {
+      this.releaseAll();
+    });
+    document.addEventListener('visibilitychange', () => {
+      if (document.hidden) {
+        this.releaseAll();
+      }
+    });
+    window.addEventListener('gamepadconnected', () => {
+      events.onGamepadConnection(true);
+    });
+    window.addEventListener('gamepaddisconnected', () => {
+      events.onGamepadConnection(false);
+    });
+  }
+}

package/src/input/edges.ts

@@ -1,55 +1,55 @@
-/**
- * Edge detection for polled buttons: a plain rising edge, and a rising edge
- * that repeats while held (menu navigation: a first step, a pause, then steady
- * steps).
- */
-
-/** Delay before a held direction starts repeating. */
-const FIRST_REPEAT_DELAY_MS = 320;
-/** Interval between repeats while held. */
-const REPEAT_INTERVAL_MS = 130;
-
-/** A monotonic clock in ms. */
-export function nowMs(): number {
-  return typeof performance === 'undefined' ? Date.now() : performance.now();
-}
-
-/** Rising edges of named polled buttons. */
-export class RisingEdges {
-  private readonly wasPressed = new Map<string, boolean>();
-
-  /** Whether `key` went from released to pressed since the last call for it. */
-  rose(key: string, isPressed: boolean): boolean {
-    const wasPressedBefore = this.wasPressed.get(key) === true;
-    this.wasPressed.set(key, isPressed);
-    return isPressed && !wasPressedBefore;
-  }
-}
-
-/** Rising edges that repeat while held. */
-export class RepeatingEdges {
-  private readonly timers = new Map<string, { isHeld: boolean; nextAt: number }>();
-
-  /** Whether `key` fires now: on the press, then after a delay, then steadily while held. */
-  fires(key: string, isPressed: boolean, at: number = nowMs()): boolean {
-    let timer = this.timers.get(key);
-    if (timer === undefined) {
-      timer = { isHeld: false, nextAt: 0 };
-      this.timers.set(key, timer);
-    }
-    if (!isPressed) {
-      timer.isHeld = false;
-      return false;
-    }
-    if (!timer.isHeld) {
-      timer.isHeld = true;
-      timer.nextAt = at + FIRST_REPEAT_DELAY_MS;
-      return true;
-    }
-    if (at >= timer.nextAt) {
-      timer.nextAt = at + REPEAT_INTERVAL_MS;
-      return true;
-    }
-    return false;
-  }
-}
+/**
+ * Edge detection for polled buttons: a plain rising edge, and a rising edge
+ * that repeats while held (menu navigation: a first step, a pause, then steady
+ * steps).
+ */
+
+/** Delay before a held direction starts repeating. */
+const FIRST_REPEAT_DELAY_MS = 320;
+/** Interval between repeats while held. */
+const REPEAT_INTERVAL_MS = 130;
+
+/** A monotonic clock in ms. */
+export function nowMs(): number {
+  return typeof performance === 'undefined' ? Date.now() : performance.now();
+}
+
+/** Rising edges of named polled buttons. */
+export class RisingEdges {
+  private readonly wasPressed = new Map<string, boolean>();
+
+  /** Whether `key` went from released to pressed since the last call for it. */
+  rose(key: string, isPressed: boolean): boolean {
+    const wasPressedBefore = this.wasPressed.get(key) === true;
+    this.wasPressed.set(key, isPressed);
+    return isPressed && !wasPressedBefore;
+  }
+}
+
+/** Rising edges that repeat while held. */
+export class RepeatingEdges {
+  private readonly timers = new Map<string, { isHeld: boolean; nextAt: number }>();
+
+  /** Whether `key` fires now: on the press, then after a delay, then steadily while held. */
+  fires(key: string, isPressed: boolean, at: number = nowMs()): boolean {
+    let timer = this.timers.get(key);
+    if (timer === undefined) {
+      timer = { isHeld: false, nextAt: 0 };
+      this.timers.set(key, timer);
+    }
+    if (!isPressed) {
+      timer.isHeld = false;
+      return false;
+    }
+    if (!timer.isHeld) {
+      timer.isHeld = true;
+      timer.nextAt = at + FIRST_REPEAT_DELAY_MS;
+      return true;
+    }
+    if (at >= timer.nextAt) {
+      timer.nextAt = at + REPEAT_INTERVAL_MS;
+      return true;
+    }
+    return false;
+  }
+}

package/src/input/focus-ring.ts

@@ -0,0 +1,13 @@
+/**
+ * The hub's focus ring: a two-tone box-shadow (a dark gap, then a light ring)
+ * that follows the element's own border-radius and shows on light and dark
+ * buttons alike. Pages tune it with CSS variables:
+ * `--hub-focus-color` (the ring), `--hub-focus-inner` (the gap),
+ * `--hub-focus-width` and `--hub-focus-gap`.
+ */
+
+const GAP = 'var(--hub-focus-gap, 2px)';
+const WIDTH = 'var(--hub-focus-width, 3px)';
+
+/** The ring as a `box-shadow` value. */
+export const FOCUS_RING_SHADOW = `0 0 0 ${GAP} var(--hub-focus-inner, rgba(13, 15, 20, 0.85)), 0 0 0 calc(${GAP} + ${WIDTH}) var(--hub-focus-color, #fff)`;

package/src/input/gamepad.ts

@@ -1,61 +1,61 @@
-/**
- * Reading standard gamepads: button indices, the stick deadzone and the
- * directions a pad is pointing.
- */
-
-/** Standard-gamepad button indices. */
-export const PAD_BUTTON = {
-  A: 0, B: 1, X: 2, Y: 3, LB: 4, RB: 5, LT: 6, RT: 7, SELECT: 8, START: 9, UP: 12, DOWN: 13, LEFT: 14, RIGHT: 15,
-} as const;
-
-/** Stick deflection below this is ignored. */
-export const AXIS_DEADZONE = 0.35;
-
-/** A screen direction. */
-export type Direction = 'up' | 'down' | 'left' | 'right';
-
-/** Which directions are held. */
-export type HeldDirections = Record<Direction, boolean>;
-
-/** The connected gamepads (the browser's list has holes). */
-export function readGamepads(): Gamepad[] {
-  if (typeof navigator === 'undefined' || typeof navigator.getGamepads !== 'function') {
-    return [];
-  }
-  return navigator.getGamepads().filter((pad): pad is Gamepad => pad !== null);
-}
-
-/** Whether `pad` holds button `index`. */
-export function isPadButtonPressed(pad: Gamepad, index: number): boolean {
-  return pad.buttons[index]?.pressed === true;
-}
-
-/** Whether any pad holds button `index`. */
-export function isAnyPadButtonPressed(pads: readonly Gamepad[], index: number): boolean {
-  return pads.some((pad) => isPadButtonPressed(pad, index));
-}
-
-/** The directions one pad points (left stick past `deadzone`, or the d-pad). */
-export function padDirections(pad: Gamepad, deadzone: number): HeldDirections {
-  const horizontal = pad.axes[0] ?? 0;
-  const vertical = pad.axes[1] ?? 0;
-  return {
-    up: vertical < -deadzone || isPadButtonPressed(pad, PAD_BUTTON.UP),
-    down: vertical > deadzone || isPadButtonPressed(pad, PAD_BUTTON.DOWN),
-    left: horizontal < -deadzone || isPadButtonPressed(pad, PAD_BUTTON.LEFT),
-    right: horizontal > deadzone || isPadButtonPressed(pad, PAD_BUTTON.RIGHT),
-  };
-}
-
-/** The directions any pad points. */
-export function anyPadDirections(pads: readonly Gamepad[], deadzone: number): HeldDirections {
-  const held: HeldDirections = { up: false, down: false, left: false, right: false };
-  for (const pad of pads) {
-    const directions = padDirections(pad, deadzone);
-    held.up ||= directions.up;
-    held.down ||= directions.down;
-    held.left ||= directions.left;
-    held.right ||= directions.right;
-  }
-  return held;
-}
+/**
+ * Reading standard gamepads: button indices, the stick deadzone and the
+ * directions a pad is pointing.
+ */
+
+/** Standard-gamepad button indices. */
+export const PAD_BUTTON = {
+  A: 0, B: 1, X: 2, Y: 3, LB: 4, RB: 5, LT: 6, RT: 7, SELECT: 8, START: 9, UP: 12, DOWN: 13, LEFT: 14, RIGHT: 15,
+} as const;
+
+/** Stick deflection below this is ignored. */
+export const AXIS_DEADZONE = 0.35;
+
+/** A screen direction. */
+export type Direction = 'up' | 'down' | 'left' | 'right';
+
+/** Which directions are held. */
+export type HeldDirections = Record<Direction, boolean>;
+
+/** The connected gamepads (the browser's list has holes). */
+export function readGamepads(): Gamepad[] {
+  if (typeof navigator === 'undefined' || typeof navigator.getGamepads !== 'function') {
+    return [];
+  }
+  return navigator.getGamepads().filter((pad): pad is Gamepad => pad !== null);
+}
+
+/** Whether `pad` holds button `index`. */
+export function isPadButtonPressed(pad: Gamepad, index: number): boolean {
+  return pad.buttons[index]?.pressed === true;
+}
+
+/** Whether any pad holds button `index`. */
+export function isAnyPadButtonPressed(pads: readonly Gamepad[], index: number): boolean {
+  return pads.some((pad) => isPadButtonPressed(pad, index));
+}
+
+/** The directions one pad points (left stick past `deadzone`, or the d-pad). */
+export function padDirections(pad: Gamepad, deadzone: number): HeldDirections {
+  const horizontal = pad.axes[0] ?? 0;
+  const vertical = pad.axes[1] ?? 0;
+  return {
+    up: vertical < -deadzone || isPadButtonPressed(pad, PAD_BUTTON.UP),
+    down: vertical > deadzone || isPadButtonPressed(pad, PAD_BUTTON.DOWN),
+    left: horizontal < -deadzone || isPadButtonPressed(pad, PAD_BUTTON.LEFT),
+    right: horizontal > deadzone || isPadButtonPressed(pad, PAD_BUTTON.RIGHT),
+  };
+}
+
+/** The directions any pad points. */
+export function anyPadDirections(pads: readonly Gamepad[], deadzone: number): HeldDirections {
+  const held: HeldDirections = { up: false, down: false, left: false, right: false };
+  for (const pad of pads) {
+    const directions = padDirections(pad, deadzone);
+    held.up ||= directions.up;
+    held.down ||= directions.down;
+    held.left ||= directions.left;
+    held.right ||= directions.right;
+  }
+  return held;
+}

package/src/input/input-events.ts

@@ -1,32 +1,32 @@
-/**
- * The input system's events (`hub.input.on`): typed listeners per event,
- * isolated so one failing listener can't stop the frame loop.
- */
-import type { InputEvents } from './types';
-
-/** Listeners by event name. */
-export class InputEventHub {
-  private readonly listeners: { [Name in keyof InputEvents]: Set<(payload: InputEvents[Name]) => void> } = {
-    focus: new Set(), blur: new Set(), act: new Set(), sourcechange: new Set(), navigate: new Set(),
-  };
-
-  /** Subscribe. Returns the unsubscribe function. */
-  on<Name extends keyof InputEvents>(event: Name, listener: (payload: InputEvents[Name]) => void): () => void {
-    const registered = this.listeners[event];
-    registered.add(listener);
-    return () => {
-      registered.delete(listener);
-    };
-  }
-
-  /** Deliver an event to every listener. */
-  emit<Name extends keyof InputEvents>(event: Name, payload: InputEvents[Name]): void {
-    for (const listener of [...this.listeners[event]]) {
-      try {
-        listener(payload);
-      } catch {
-        // A game's listener failing must not stop the frame loop.
-      }
-    }
-  }
-}
+/**
+ * The input system's events (`hub.input.on`): typed listeners per event,
+ * isolated so one failing listener can't stop the frame loop.
+ */
+import type { InputEvents } from './types';
+
+/** Listeners by event name. */
+export class InputEventHub {
+  private readonly listeners: { [Name in keyof InputEvents]: Set<(payload: InputEvents[Name]) => void> } = {
+    focus: new Set(), blur: new Set(), act: new Set(), sourcechange: new Set(), navigate: new Set(),
+  };
+
+  /** Subscribe. Returns the unsubscribe function. */
+  on<Name extends keyof InputEvents>(event: Name, listener: (payload: InputEvents[Name]) => void): () => void {
+    const registered = this.listeners[event];
+    registered.add(listener);
+    return () => {
+      registered.delete(listener);
+    };
+  }
+
+  /** Deliver an event to every listener. */
+  emit<Name extends keyof InputEvents>(event: Name, payload: InputEvents[Name]): void {
+    for (const listener of [...this.listeners[event]]) {
+      try {
+        listener(payload);
+      } catch {
+        // A game's listener failing must not stop the frame loop.
+      }
+    }
+  }
+}