@diffenderfer-games/hub 2.0.0-next.2 → 2.0.0-next.4

package/src/input/modality.ts

@@ -0,0 +1,122 @@
+/**
+ * Which kind of input the player used last, published as `data-hub-input` on
+ * `<html>` so focus styles show only to keyboard and gamepad players: a tap or
+ * click never leaves a ring behind, and touch devices show none at all. The
+ * attribute is the shared state, so every bundle's copy of the client agrees.
+ */
+import { isTypingTarget } from './device-state';
+import { FOCUS_RING_SHADOW } from './focus-ring';
+
+/** `keys`: keyboard or gamepad. `pointer`: mouse or pen. `touch`: a finger. */
+export type InputModality = 'keys' | 'pointer' | 'touch';
+
+/** The `<html>` attribute that holds the modality. */
+export const MODALITY_ATTRIBUTE = 'data-hub-input';
+
+const STYLE_ID = 'hub-focus-style';
+const MODIFIER_KEYS = new Set(['Shift', 'Control', 'Alt', 'Meta', 'AltGraph', 'CapsLock']);
+const MODALITIES: readonly InputModality[] = ['keys', 'pointer', 'touch'];
+
+/**
+ * The page focus styles: the gamepad highlight (`gp-focus`) for keyboard and
+ * gamepad players only, and no browser focus ring on buttons after a tap.
+ */
+const PAGE_FOCUS_CSS = `html[${MODALITY_ATTRIBUTE}="keys"] .gp-focus{outline:none !important;box-shadow:${FOCUS_RING_SHADOW} !important;}
+html[${MODALITY_ATTRIBUTE}="touch"] :is(button,a,summary,[role="button"],[tabindex]):focus{outline:none;}`;
+
+/** The modality a pointer event's `pointerType` implies. */
+export function modalityOfPointer(pointerType: string): InputModality {
+  return pointerType === 'touch' ? 'touch' : 'pointer';
+}
+
+/** The modality a key press implies, or `null` when it says nothing (a lone modifier, typing in a field). */
+export function modalityOfKey(key: string, isTyping: boolean): InputModality | null {
+  if (MODIFIER_KEYS.has(key)) {
+    return null;
+  }
+  // Typing (an on-screen keyboard fires keydown too) is not navigating; Tab always is.
+  return isTyping && key !== 'Tab' ? null : 'keys';
+}
+
+/** Where the modality is stored: `<html>`, or a fake in tests. */
+export interface ModalityRoot {
+  getAttribute(name: string): string | null;
+  setAttribute(name: string, value: string): void;
+}
+
+/** Reads and writes the page's modality attribute. */
+export class ModalityTracker {
+  private readonly root: ModalityRoot;
+
+  /** Start at `initial` unless another copy already set the attribute. */
+  constructor(root: ModalityRoot, initial: InputModality) {
+    this.root = root;
+    if (this.readAttribute() === null) {
+      this.set(initial);
+    }
+  }
+
+  /** The last modality used. */
+  get current(): InputModality {
+    return this.readAttribute() ?? 'pointer';
+  }
+
+  /** Whether focus should show: the last input was a keyboard or gamepad. */
+  get showsFocus(): boolean {
+    return this.current === 'keys';
+  }
+
+  /** Record the modality the player just used. */
+  set(modality: InputModality): void {
+    if (this.readAttribute() !== modality) {
+      this.root.setAttribute(MODALITY_ATTRIBUTE, modality);
+    }
+  }
+
+  /** A key went down (`isTyping`: in a text field). */
+  noteKey(key: string, isTyping: boolean): void {
+    const modality = modalityOfKey(key, isTyping);
+    if (modality !== null) {
+      this.set(modality);
+    }
+  }
+
+  /** A pointer went down. */
+  notePointer(pointerType: string): void {
+    this.set(modalityOfPointer(pointerType));
+  }
+
+  private readAttribute(): InputModality | null {
+    const value = this.root.getAttribute(MODALITY_ATTRIBUTE);
+    return MODALITIES.find((modality) => modality === value) ?? null;
+  }
+}
+
+let pageTracker: ModalityTracker | null = null;
+
+/** Track the page's modality (once per bundle) and add the focus styles (once per page). */
+export function trackInputModality(): ModalityTracker {
+  if (pageTracker !== null) {
+    return pageTracker;
+  }
+  const root = document.documentElement;
+  const isTouchDevice = typeof matchMedia === 'function' && matchMedia('(hover: none) and (pointer: coarse)').matches;
+  const isFirstCopy = root.getAttribute(MODALITY_ATTRIBUTE) === null;
+  const tracker = new ModalityTracker(root, isTouchDevice ? 'touch' : 'pointer');
+  pageTracker = tracker;
+  if (isFirstCopy) {
+    document.addEventListener('keydown', (event) => {
+      tracker.noteKey(event.key, isTypingTarget(event.target));
+    }, true);
+    document.addEventListener('pointerdown', (event) => {
+      tracker.notePointer(event.pointerType);
+    }, true);
+  }
+  if (document.getElementById(STYLE_ID) === null) {
+    const style = document.createElement('style');
+    style.id = STYLE_ID;
+    style.textContent = PAGE_FOCUS_CSS;
+    document.head.appendChild(style);
+  }
+  return tracker;
+}

package/src/input/nav-state.ts

@@ -9,8 +9,8 @@ import type { NavBlurEvent, NavElement, NavElementKind, NavFocusEvent, NavTarget
 
 /** What a navigable list draws with (the overlay). */
 export interface NavHighlighter {
-  /** Ring the highlighted element. */
-  showHighlight(bounds: Rect): void;
+  /** Ring the highlighted element, following its corner radius (a CSS `border-radius`, or empty). */
+  showHighlight(bounds: Rect, radius: string): void;
   /** Remove the ring. */
   hideHighlight(): void;
   /** Open the on-screen keyboard for a text field. */
@@ -50,6 +50,11 @@ function boundsOf(element: NavElement): Rect {
   return element.el === undefined ? { x: 0, y: 0, width: 0, height: 0 } : rectOf(element.el);
 }
 
+/** A navigable element's CSS corner radius, so the ring can follow it (empty for a non-DOM element). */
+function radiusOf(element: NavElement): string {
+  return element.el === undefined ? '' : getComputedStyle(element.el).borderRadius;
+}
+
 /** The text field a navigable element edits, if it is one. */
 function textFieldOf(element: NavElement): HTMLInputElement | HTMLTextAreaElement | null {
   return element.el instanceof HTMLInputElement || element.el instanceof HTMLTextAreaElement ? element.el : null;
@@ -148,16 +153,20 @@ export class NavState {
     this.position(highlighter);
   }
 
-  /** Move the ring to the highlighted element (or hide it). */
+  /** Move the ring to the highlighted element (or hide it), following keyboard focus (Tab) within the list. */
   position(highlighter: NavHighlighter | null): void {
     if (highlighter === null) {
       return;
     }
+    const focused = this.elements.findIndex((element) => element.el !== undefined && element.el === document.activeElement);
+    if (focused >= 0) {
+      this.index = focused;
+    }
     const current = this.elements[this.index];
     if (current === undefined) {
       highlighter.hideHighlight();
     } else {
-      highlighter.showHighlight(boundsOf(current));
+      highlighter.showHighlight(boundsOf(current), radiusOf(current));
     }
   }
 

package/src/input/zero-config.ts

@@ -14,9 +14,8 @@ 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';
-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]>([
@@ -51,17 +50,6 @@ function dispatchKey(type: 'keydown' | 'keyup', code: string): void {
   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>>();
 
@@ -168,7 +156,6 @@ export function runZeroConfigFrame(frame: ZeroConfigFrame): void {
   if (frame.gamepads.length === 0) {
     return;
   }
-  ensureFocusStyle();
   if (frame.slug === null) {
     navigateCatalog(frame);
   } else {

package/src/input.ts

@@ -9,6 +9,9 @@ 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';

package/src/overlay/overlay.ts

@@ -6,6 +6,7 @@
  */
 import type { NavHighlighter } from '../input/nav-state';
 import type { InputConfig, InputOverrides, Rect, VirtualDef } from '../input/types';
+import { trackInputModality } from '../input/modality';
 import { readField } from '../realtime/cross-bundle';
 import { ControlsPanel } from './controls-panel';
 import type { ControlsPanelHost } from './controls-panel';
@@ -160,9 +161,10 @@ export class Overlay implements NavHighlighter {
     }
   }
 
-  /** Ring the highlighted element. */
-  showHighlight(bounds: Rect): void {
-    this.ring.hidden = false;
+  /** Ring the highlighted element, for keyboard and gamepad players only (never after a tap or click). */
+  showHighlight(bounds: Rect, radius: string): void {
+    this.ring.hidden = !trackInputModality().showsFocus;
+    this.ring.style.borderRadius = radius;
     this.ring.style.left = `${String(bounds.x)}px`;
     this.ring.style.top = `${String(bounds.y)}px`;
     this.ring.style.width = `${String(bounds.width)}px`;

package/src/overlay/styles.ts

@@ -1,6 +1,7 @@
 /**
  * The overlay's styles (inside its shadow root, so games can't restyle it).
  */
+import { FOCUS_RING_SHADOW } from '../input/focus-ring';
 
 /** The hub accent colour. */
 export const ACCENT_COLOR = '#ff5f3b';
@@ -28,8 +29,8 @@ export const OVERLAY_CSS = `
 :host(.editing) .edit-bar .btn { margin: 0; }
 .safe-probe { position: fixed; left: 0; top: 0; width: 0; height: 0; visibility: hidden; pointer-events: none;
   padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
-.ring { position: fixed; pointer-events: none; z-index: 2147483200; border: 3px solid ${ACCENT_COLOR}; border-radius: 8px;
-        box-shadow: 0 0 0 2px rgba(0,0,0,.4); transition: left .08s, top .08s, width .08s, height .08s; }
+.ring { position: fixed; pointer-events: none; z-index: 2147483200; box-shadow: ${FOCUS_RING_SHADOW};
+        transition: left .08s, top .08s, width .08s, height .08s; }
 .ring[hidden] { display: none; }
 .kb { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483400; background: #0d0f14ee; padding: 10px;
       pointer-events: auto; border-top: 1px solid #2a3142; }
@@ -38,7 +39,7 @@ export const OVERLAY_CSS = `
 .kb .k { flex: 1; min-width: 0; max-width: 64px; height: 46px; border-radius: 8px; border: 1px solid #2a3142;
          background: #11141c; color: #e8e6df; font: 16px monospace; cursor: pointer; }
 .kb .k.space { max-width: 280px; } .kb .k.wide { max-width: 90px; }
-.kb .k.kfocus { border-color: ${ACCENT_COLOR}; box-shadow: 0 0 0 2px ${ACCENT_COLOR}; }
+.kb .k.kfocus { box-shadow: ${FOCUS_RING_SHADOW}; }
 .panel { position: fixed; inset: 0; z-index: 2147483500; display: grid; place-items: center; background: rgba(0,0,0,.6); pointer-events: auto;
          font-family: 'Space Mono', ui-monospace, monospace; }
 .panel-card { background: #0d0f14; color: #e8e6df; border: 1px solid #2a3142; border-radius: 12px; padding: 18px;

package/src/realtime/rooms-forwarder.ts

@@ -1,18 +1,30 @@
 /**
  * `hub.rooms`: hub relay rooms, forwarded to the social runtime. Each room is
- * wrapped so its rejections use the core client's error classes.
+ * wrapped so its rejections use the core client's error classes, and the
+ * page's open rooms are tracked (`isInHubRoom`), so `hub.resume` can refuse
+ * to save an online run.
  */
 import type { Json, RoomInfo } from '@diffenderfer-games/hub-contract';
 import { outdatedRuntime, pageBridge, rethrowAsHubError } from './bridge';
 import type { HubRoom, HubRoomsApi, RoomEvents, RoomSelf, RoomSendOptions, RoomState, RoomStateOptions } from './room-types';
 import type { RoomSeat } from './wire-types';
 
+/** The rooms this page is in (created, joined or reclaimed, and not yet left or closed). */
+const openRooms = new Set<HubRoom>();
+
+/** Whether this page is in a hub room right now. */
+export function isInHubRoom(): boolean {
+  return openRooms.size > 0;
+}
+
 /** A runtime room whose rejections are re-created as the core client's errors. */
 class ForwardedRoom implements HubRoom {
   private readonly room: HubRoom;
 
   constructor(room: HubRoom) {
     this.room = room;
+    openRooms.add(room);
+    room.on('closed', () => { openRooms.delete(room); });
   }
 
   get info(): RoomInfo {
@@ -68,6 +80,7 @@ class ForwardedRoom implements HubRoom {
   }
 
   leave(): Promise<void> {
+    openRooms.delete(this.room);
     return rethrowAsHubError(this.room.leave());
   }