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

package/src/input/zero-config.ts

@@ -1,177 +1,164 @@
-/**
- * The zero-config fallback for games that never call `hub.input.define()`:
- * on the catalog page a gamepad moves a highlight across the game tiles; in
- * a game it presses the keys `game.controls` maps its buttons to. Runs each
- * frame only while the menu is closed and no game has taken over input.
- */
-import type { RepeatingEdges } from './edges';
-import { anyPadDirections, isAnyPadButtonPressed, isPadButtonPressed, PAD_BUTTON, padDirections } from './gamepad';
-import type { Direction } from './gamepad';
-import type { LegacyControls } from './legacy-controls';
-import { controlMapFor } from './legacy-controls';
-import { findNearestInDirection, rectOf } from './spatial';
-import { isTypingTarget } from './device-state';
-
-/** Synthetic keys stay pressed past half deflection. */
-const SYNTH_DEADZONE = 0.5;
-const FOCUS_CLASS = 'gp-focus';
-const FOCUS_STYLE_ID = 'gp-focus-style';
-const FOCUS_CSS = '.gp-focus{outline:3px solid #ff5f3b !important;outline-offset:2px;border-radius:4px;}';
-
-/** `KeyboardEvent.code` → its `key` and legacy `keyCode`. */
-const KEY_FOR_CODE = new Map<string, readonly [string, number]>([
-  ['ArrowUp', ['ArrowUp', 38]], ['ArrowDown', ['ArrowDown', 40]], ['ArrowLeft', ['ArrowLeft', 37]], ['ArrowRight', ['ArrowRight', 39]],
-  ['Space', [' ', 32]], ['Enter', ['Enter', 13]], ['Escape', ['Escape', 27]], ['Tab', ['Tab', 9]], ['Backspace', ['Backspace', 8]],
-  ['ShiftLeft', ['Shift', 16]], ['ControlLeft', ['Control', 17]], ['AltLeft', ['Alt', 18]],
-]);
-for (let code = 65; code <= 90; code += 1) {
-  const letter = String.fromCharCode(code);
-  KEY_FOR_CODE.set(`Key${letter}`, [letter.toLowerCase(), code]);
-}
-for (let digit = 0; digit <= 9; digit += 1) {
-  KEY_FOR_CODE.set(`Digit${String(digit)}`, [String(digit), 48 + digit]);
-}
-
-/** What the fallback reads from the input system each frame. */
-export interface ZeroConfigFrame {
-  readonly gamepads: readonly Gamepad[];
-  readonly slug: string | null;
-  readonly controls: LegacyControls;
-  readonly navEdges: RepeatingEdges;
-}
-
-/** Dispatch a synthetic key event (with the legacy `keyCode`/`which` old games read) on the focused element. */
-function dispatchKey(type: 'keydown' | 'keyup', code: string): void {
-  const [key, keyCode] = KEY_FOR_CODE.get(code) ?? [code, 0];
-  const active = document.activeElement;
-  const target: EventTarget = active !== null && active !== document.body ? active : document.body;
-  const event = new KeyboardEvent(type, { key, code, bubbles: true, cancelable: true });
-  Object.defineProperty(event, 'keyCode', { get: () => keyCode });
-  Object.defineProperty(event, 'which', { get: () => keyCode });
-  target.dispatchEvent(event);
-}
-
-/** Add the highlight style to the page once. */
-function ensureFocusStyle(): void {
-  if (document.getElementById(FOCUS_STYLE_ID) !== null) {
-    return;
-  }
-  const style = document.createElement('style');
-  style.id = FOCUS_STYLE_ID;
-  style.textContent = FOCUS_CSS;
-  document.head.appendChild(style);
-}
-
-/** The keys each pad holds down, by pad index. */
-const heldCodes = new Map<number, Set<string>>();
-
-function releaseAllKeys(): void {
-  for (const [padIndex, codes] of heldCodes) {
-    for (const code of codes) {
-      dispatchKey('keyup', code);
-    }
-    heldCodes.set(padIndex, new Set());
-  }
-}
-
-/** In a game: press and release the mapped keys to match each pad. */
-function synthesizeKeys(frame: ZeroConfigFrame): void {
-  if (isTypingTarget(document.activeElement)) {
-    releaseAllKeys();
-    return;
-  }
-  frame.gamepads.forEach((pad, padIndex) => {
-    const map = controlMapFor(frame.controls, padIndex);
-    const directions = padDirections(pad, SYNTH_DEADZONE);
-    const wanted = new Set<string>();
-    for (const direction of ['up', 'down', 'left', 'right'] as const) {
-      if (directions[direction]) {
-        wanted.add(map[direction]);
-      }
-    }
-    for (const [buttonIndex, code] of map.buttons) {
-      if (isPadButtonPressed(pad, buttonIndex)) {
-        wanted.add(code);
-      }
-    }
-    const held = heldCodes.get(padIndex) ?? new Set<string>();
-    wanted.forEach((code) => {
-      if (!held.has(code)) {
-        dispatchKey('keydown', code);
-      }
-    });
-    held.forEach((code) => {
-      if (!wanted.has(code)) {
-        dispatchKey('keyup', code);
-      }
-    });
-    heldCodes.set(padIndex, wanted);
-  });
-}
-
-/** The visible game tiles on the catalog page. */
-function visibleTiles(): HTMLElement[] {
-  return [...document.querySelectorAll<HTMLElement>('.grid .card')].filter((card) => card.offsetParent !== null);
-}
-
-function highlightTile(tiles: readonly HTMLElement[], index: number): void {
-  tiles.forEach((tile) => {
-    tile.classList.remove(FOCUS_CLASS);
-  });
-  const tile = tiles[index];
-  tile?.classList.add(FOCUS_CLASS);
-  tile?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
-}
-
-/** On the catalog page: move the highlight across the tiles; A or Start opens one. */
-function navigateCatalog(frame: ZeroConfigFrame): void {
-  const held = anyPadDirections(frame.gamepads, SYNTH_DEADZONE);
-  const isAccepting = isAnyPadButtonPressed(frame.gamepads, PAD_BUTTON.A) || isAnyPadButtonPressed(frame.gamepads, PAD_BUTTON.START);
-  const fired: Record<Direction, boolean> = {
-    up: frame.navEdges.fires('lu', held.up),
-    down: frame.navEdges.fires('ld', held.down),
-    left: frame.navEdges.fires('ll', held.left),
-    right: frame.navEdges.fires('lr', held.right),
-  };
-  const shouldAccept = frame.navEdges.fires('la', isAccepting) && isAccepting;
-  const tiles = visibleTiles();
-  if (tiles.length === 0) {
-    return;
-  }
-  const focused = tiles.findIndex((tile) => tile.classList.contains(FOCUS_CLASS));
-  const focusedTile = tiles[focused];
-  if (focusedTile === undefined) {
-    highlightTile(tiles, 0);
-    return;
-  }
-  if (shouldAccept) {
-    const href = focusedTile.getAttribute('href');
-    if (href === null) {
-      focusedTile.click();
-    } else {
-      location.href = href;
-    }
-    return;
-  }
-  const direction = (['up', 'down', 'left', 'right'] as const).find((candidate) => fired[candidate]);
-  if (direction === undefined) {
-    return;
-  }
-  const next = findNearestInDirection(tiles.map(rectOf), focused, direction);
-  if (next >= 0) {
-    highlightTile(tiles, next);
-  }
-}
-
-/** One frame of the zero-config fallback. */
-export function runZeroConfigFrame(frame: ZeroConfigFrame): void {
-  if (frame.gamepads.length === 0) {
-    return;
-  }
-  ensureFocusStyle();
-  if (frame.slug === null) {
-    navigateCatalog(frame);
-  } else {
-    synthesizeKeys(frame);
-  }
-}
+/**
+ * The zero-config fallback for games that never call `hub.input.define()`:
+ * on the catalog page a gamepad moves a highlight across the game tiles; in
+ * a game it presses the keys `game.controls` maps its buttons to. Runs each
+ * frame only while the menu is closed and no game has taken over input.
+ */
+import type { RepeatingEdges } from './edges';
+import { anyPadDirections, isAnyPadButtonPressed, isPadButtonPressed, PAD_BUTTON, padDirections } from './gamepad';
+import type { Direction } from './gamepad';
+import type { LegacyControls } from './legacy-controls';
+import { controlMapFor } from './legacy-controls';
+import { findNearestInDirection, rectOf } from './spatial';
+import { isTypingTarget } from './device-state';
+
+/** Synthetic keys stay pressed past half deflection. */
+const SYNTH_DEADZONE = 0.5;
+/** The catalog tile highlight; its style (keyboard and gamepad players only) is in `modality.ts`. */
+const FOCUS_CLASS = 'gp-focus';
+
+/** `KeyboardEvent.code` → its `key` and legacy `keyCode`. */
+const KEY_FOR_CODE = new Map<string, readonly [string, number]>([
+  ['ArrowUp', ['ArrowUp', 38]], ['ArrowDown', ['ArrowDown', 40]], ['ArrowLeft', ['ArrowLeft', 37]], ['ArrowRight', ['ArrowRight', 39]],
+  ['Space', [' ', 32]], ['Enter', ['Enter', 13]], ['Escape', ['Escape', 27]], ['Tab', ['Tab', 9]], ['Backspace', ['Backspace', 8]],
+  ['ShiftLeft', ['Shift', 16]], ['ControlLeft', ['Control', 17]], ['AltLeft', ['Alt', 18]],
+]);
+for (let code = 65; code <= 90; code += 1) {
+  const letter = String.fromCharCode(code);
+  KEY_FOR_CODE.set(`Key${letter}`, [letter.toLowerCase(), code]);
+}
+for (let digit = 0; digit <= 9; digit += 1) {
+  KEY_FOR_CODE.set(`Digit${String(digit)}`, [String(digit), 48 + digit]);
+}
+
+/** What the fallback reads from the input system each frame. */
+export interface ZeroConfigFrame {
+  readonly gamepads: readonly Gamepad[];
+  readonly slug: string | null;
+  readonly controls: LegacyControls;
+  readonly navEdges: RepeatingEdges;
+}
+
+/** Dispatch a synthetic key event (with the legacy `keyCode`/`which` old games read) on the focused element. */
+function dispatchKey(type: 'keydown' | 'keyup', code: string): void {
+  const [key, keyCode] = KEY_FOR_CODE.get(code) ?? [code, 0];
+  const active = document.activeElement;
+  const target: EventTarget = active !== null && active !== document.body ? active : document.body;
+  const event = new KeyboardEvent(type, { key, code, bubbles: true, cancelable: true });
+  Object.defineProperty(event, 'keyCode', { get: () => keyCode });
+  Object.defineProperty(event, 'which', { get: () => keyCode });
+  target.dispatchEvent(event);
+}
+
+/** The keys each pad holds down, by pad index. */
+const heldCodes = new Map<number, Set<string>>();
+
+function releaseAllKeys(): void {
+  for (const [padIndex, codes] of heldCodes) {
+    for (const code of codes) {
+      dispatchKey('keyup', code);
+    }
+    heldCodes.set(padIndex, new Set());
+  }
+}
+
+/** In a game: press and release the mapped keys to match each pad. */
+function synthesizeKeys(frame: ZeroConfigFrame): void {
+  if (isTypingTarget(document.activeElement)) {
+    releaseAllKeys();
+    return;
+  }
+  frame.gamepads.forEach((pad, padIndex) => {
+    const map = controlMapFor(frame.controls, padIndex);
+    const directions = padDirections(pad, SYNTH_DEADZONE);
+    const wanted = new Set<string>();
+    for (const direction of ['up', 'down', 'left', 'right'] as const) {
+      if (directions[direction]) {
+        wanted.add(map[direction]);
+      }
+    }
+    for (const [buttonIndex, code] of map.buttons) {
+      if (isPadButtonPressed(pad, buttonIndex)) {
+        wanted.add(code);
+      }
+    }
+    const held = heldCodes.get(padIndex) ?? new Set<string>();
+    wanted.forEach((code) => {
+      if (!held.has(code)) {
+        dispatchKey('keydown', code);
+      }
+    });
+    held.forEach((code) => {
+      if (!wanted.has(code)) {
+        dispatchKey('keyup', code);
+      }
+    });
+    heldCodes.set(padIndex, wanted);
+  });
+}
+
+/** The visible game tiles on the catalog page. */
+function visibleTiles(): HTMLElement[] {
+  return [...document.querySelectorAll<HTMLElement>('.grid .card')].filter((card) => card.offsetParent !== null);
+}
+
+function highlightTile(tiles: readonly HTMLElement[], index: number): void {
+  tiles.forEach((tile) => {
+    tile.classList.remove(FOCUS_CLASS);
+  });
+  const tile = tiles[index];
+  tile?.classList.add(FOCUS_CLASS);
+  tile?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+}
+
+/** On the catalog page: move the highlight across the tiles; A or Start opens one. */
+function navigateCatalog(frame: ZeroConfigFrame): void {
+  const held = anyPadDirections(frame.gamepads, SYNTH_DEADZONE);
+  const isAccepting = isAnyPadButtonPressed(frame.gamepads, PAD_BUTTON.A) || isAnyPadButtonPressed(frame.gamepads, PAD_BUTTON.START);
+  const fired: Record<Direction, boolean> = {
+    up: frame.navEdges.fires('lu', held.up),
+    down: frame.navEdges.fires('ld', held.down),
+    left: frame.navEdges.fires('ll', held.left),
+    right: frame.navEdges.fires('lr', held.right),
+  };
+  const shouldAccept = frame.navEdges.fires('la', isAccepting) && isAccepting;
+  const tiles = visibleTiles();
+  if (tiles.length === 0) {
+    return;
+  }
+  const focused = tiles.findIndex((tile) => tile.classList.contains(FOCUS_CLASS));
+  const focusedTile = tiles[focused];
+  if (focusedTile === undefined) {
+    highlightTile(tiles, 0);
+    return;
+  }
+  if (shouldAccept) {
+    const href = focusedTile.getAttribute('href');
+    if (href === null) {
+      focusedTile.click();
+    } else {
+      location.href = href;
+    }
+    return;
+  }
+  const direction = (['up', 'down', 'left', 'right'] as const).find((candidate) => fired[candidate]);
+  if (direction === undefined) {
+    return;
+  }
+  const next = findNearestInDirection(tiles.map(rectOf), focused, direction);
+  if (next >= 0) {
+    highlightTile(tiles, next);
+  }
+}
+
+/** One frame of the zero-config fallback. */
+export function runZeroConfigFrame(frame: ZeroConfigFrame): void {
+  if (frame.gamepads.length === 0) {
+    return;
+  }
+  if (frame.slug === null) {
+    navigateCatalog(frame);
+  } else {
+    synthesizeKeys(frame);
+  }
+}

package/src/input.ts

@@ -1,22 +1,26 @@
-/**
- * `@diffenderfer-games/hub/input`: the input system (`hub.input`): the
- * page-wide {@link getInput}, the {@link InputSystem} class, the on-screen
- * control layout, and the overlay stack behind `hub.overlay`.
- *
- * @packageDocumentation
- */
-export { InputSystem } from './input/input-system';
-export type { InputSystemOptions } from './input/input-system';
-export { getInput, INPUT_SINGLETON_API, isInputSystem, parseInputOverrides } from './input/page-input';
-export type { InputOptions } from './input/page-input';
-export { isPageInputControl } from './input/page-control';
-export type { PageInputControl } from './input/page-control';
-export type * from './input/types';
-export { Overlay } from './overlay/overlay';
-export { layoutControls } from './overlay/layout';
-export type { LayoutOptions } from './overlay/layout';
-export { boxesTouch, controlSize } from './overlay/layout-geometry';
-export type { Insets, LayoutBox, LayoutItem } from './overlay/layout-geometry';
-export { getUiStack, isUiStack } from './uistack/page-stack';
-export { UI_STACK_VERSION } from './uistack/ui-stack';
-export type * from './uistack/types';
+/**
+ * `@diffenderfer-games/hub/input`: the input system (`hub.input`): the
+ * page-wide {@link getInput}, the {@link InputSystem} class, the on-screen
+ * control layout, and the overlay stack behind `hub.overlay`.
+ *
+ * @packageDocumentation
+ */
+export { InputSystem } from './input/input-system';
+export type { InputSystemOptions } from './input/input-system';
+export { getInput, INPUT_SINGLETON_API, isInputSystem, parseInputOverrides } from './input/page-input';
+export type { InputOptions } from './input/page-input';
+export { FOCUS_RING_SHADOW } from './input/focus-ring';
+export { MODALITY_ATTRIBUTE, trackInputModality } from './input/modality';
+export type { InputModality } from './input/modality';
+export { isPageInputControl } from './input/page-control';
+export type { PageInputControl } from './input/page-control';
+export type * from './input/types';
+export type { AutoNavigateTarget } from './input/navigator';
+export { Overlay } from './overlay/overlay';
+export { layoutControls } from './overlay/layout';
+export type { LayoutOptions } from './overlay/layout';
+export { boxesTouch, controlSize } from './overlay/layout-geometry';
+export type { Insets, LayoutBox, LayoutItem } from './overlay/layout-geometry';
+export { getUiStack, isUiStack } from './uistack/page-stack';
+export { UI_STACK_VERSION } from './uistack/ui-stack';
+export type * from './uistack/types';

package/src/mp.ts

@@ -1,10 +1,10 @@
-/**
- * `@diffenderfer-games/hub/mp`: the multiplayer forwarder (`hub.mp`):
- * invites, launches, the leave guard and own-server tickets.
- *
- * @packageDocumentation
- */
-export { multiplayerForwarder as mp } from './realtime/multiplayer-forwarder';
-export type * from './realtime/multiplayer-types';
-export type { InviteCreated } from './realtime/wire-types';
-export type { Invite, JoinInfo, Launch, LaunchTicket, Party } from '@diffenderfer-games/hub-contract';
+/**
+ * `@diffenderfer-games/hub/mp`: the multiplayer forwarder (`hub.mp`):
+ * invites, launches, the leave guard and own-server tickets.
+ *
+ * @packageDocumentation
+ */
+export { multiplayerForwarder as mp } from './realtime/multiplayer-forwarder';
+export type * from './realtime/multiplayer-types';
+export type { InviteCreated, InviteLink } from './realtime/wire-types';
+export type { Invite, JoinInfo, Launch, LaunchTicket, Party } from '@diffenderfer-games/hub-contract';