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

package/src/overlay/controls-panel.ts

@@ -1,163 +1,163 @@
-/**
- * The Controls screen: rebind inputs, show or hide the on-screen controls,
- * edit the touch layout, reset to defaults.
- */
-import { readGamepads } from '../input/gamepad';
-import type { InputConfig, InputDef } from '../input/types';
-import { escapeHtml, findElements, requireElement } from './dom';
-
-/** What the Controls screen drives (the input system). */
-export interface ControlsPanelHost {
-  /** The player's show/hide state of the on-screen controls. */
-  readonly showingVirtual: boolean;
-  /** Show or hide the on-screen controls (persisted). */
-  showVirtual(isVisible: boolean): void;
-  /** Force the controls visible while editing the layout. */
-  setVirtualEditing(isEditing: boolean): void;
-  /** Rebind an input (persisted). */
-  rebind(inputName: string, patch: Partial<InputDef>): void;
-  /** Forget every remap. */
-  resetControls(): void;
-  /** A readable label of an input's current binding. */
-  bindingLabel(inputName: string): string;
-}
-
-/** How long a rebind waits for a key or button. */
-const REBIND_TIMEOUT_MS = 8000;
-
-/** The Controls screen markup for `config`. */
-function panelHtml(config: InputConfig, host: ControlsPanelHost): string {
-  let rows = '';
-  for (const [group, groupDefinition] of Object.entries(config.groups)) {
-    rows += `<h4>${escapeHtml(group)}</h4>`;
-    for (const name of Object.keys(groupDefinition.inputs)) {
-      const escapedName = escapeHtml(name);
-      rows += `<div class="cr"><span>${escapedName}</span><b class="bind" data-i="${escapedName}">${escapeHtml(host.bindingLabel(name))}</b><button class="rb" data-i="${escapedName}">Rebind</button></div>`;
-    }
-  }
-  return `
-      <div class="panel-card">
-        <h3>Controls</h3>
-        <label class="chk"><input type="checkbox" class="showv"> Show on-screen controls</label>
-        <button class="btn editlayout">Edit touch layout</button>
-        <div class="crs">${rows}</div>
-        <div class="panel-actions">
-          <button class="btn reset">Reset to defaults</button>
-          <button class="btn done">Done</button>
-        </div>
-        <p class="hint"></p>
-        <div class="edit-bar"><span>Drag a control to move it</span><button class="btn editdone">Done</button></div>
-      </div>`;
-}
-
-/** The Controls screen (one at a time). */
-export class ControlsPanel {
-  private readonly root: ShadowRoot;
-  private readonly shadowHost: HTMLElement;
-  private panel: HTMLDivElement | null = null;
-  private isEditingLayout = false;
-
-  constructor(root: ShadowRoot, shadowHost: HTMLElement) {
-    this.root = root;
-    this.shadowHost = shadowHost;
-  }
-
-  /** Whether the player is dragging controls around. */
-  get isEditing(): boolean {
-    return this.isEditingLayout;
-  }
-
-  /** Open the screen (or close it when already open). */
-  toggle(config: InputConfig | null, host: ControlsPanelHost): void {
-    if (config === null) {
-      return;
-    }
-    if (this.panel !== null) {
-      this.close();
-      return;
-    }
-    const panel = document.createElement('div');
-    panel.className = 'panel';
-    panel.innerHTML = panelHtml(config, host);
-    this.root.appendChild(panel);
-    this.panel = panel;
-    const showToggle = requireElement(panel, '.showv', HTMLInputElement);
-    showToggle.checked = host.showingVirtual;
-    showToggle.addEventListener('change', () => {
-      host.showVirtual(showToggle.checked);
-    });
-    requireElement(panel, '.editlayout', HTMLButtonElement).addEventListener('click', () => {
-      this.setEditing(!this.isEditingLayout, host);
-    });
-    requireElement(panel, '.reset', HTMLButtonElement).addEventListener('click', () => {
-      host.resetControls();
-      this.close();
-    });
-    requireElement(panel, '.done', HTMLButtonElement).addEventListener('click', () => {
-      this.setEditing(false, host);
-      this.close();
-    });
-    requireElement(panel, '.editdone', HTMLButtonElement).addEventListener('click', () => {
-      this.setEditing(false, host);
-    });
-    for (const button of findElements(panel, '.rb', HTMLButtonElement)) {
-      button.addEventListener('click', () => {
-        this.captureRebind(button.dataset['i'] ?? '', host, panel);
-      });
-    }
-  }
-
-  private close(): void {
-    this.panel?.remove();
-    this.panel = null;
-  }
-
-  private setEditing(isEditing: boolean, host: ControlsPanelHost): void {
-    this.isEditingLayout = isEditing;
-    this.shadowHost.classList.toggle('editing', isEditing);
-    // Forces the controls visible without touching the player's show/hide choice.
-    host.setVirtualEditing(isEditing);
-  }
-
-  /** Wait for the next key or gamepad button and bind `inputName` to it. */
-  private captureRebind(inputName: string, host: ControlsPanelHost, panel: HTMLElement): void {
-    const hint = requireElement(panel, '.hint', HTMLElement);
-    hint.textContent = `Press a key or gamepad button for "${inputName}"…`;
-    let frameRequest = 0;
-    const startedAt = performance.now();
-    const cleanUp = (): void => {
-      window.removeEventListener('keydown', onKey, true);
-      cancelAnimationFrame(frameRequest);
-    };
-    const finish = (patch: Partial<InputDef>, label: string): void => {
-      host.rebind(inputName, patch);
-      const binding = findElements(panel, '.bind', HTMLElement).find((element) => element.dataset['i'] === inputName);
-      if (binding !== undefined) {
-        binding.textContent = label;
-      }
-      hint.textContent = '';
-      cleanUp();
-    };
-    function onKey(event: KeyboardEvent): void {
-      event.preventDefault();
-      finish({ keys: [event.key] }, event.key);
-    }
-    const pollPads = (): void => {
-      for (const pad of readGamepads()) {
-        const pressed = pad.buttons.findIndex((button) => button.pressed);
-        if (pressed >= 0) {
-          finish({ gamepad: { button: pressed } }, `Pad ${String(pressed)}`);
-          return;
-        }
-      }
-      if (performance.now() - startedAt > REBIND_TIMEOUT_MS) {
-        hint.textContent = '';
-        cleanUp();
-        return;
-      }
-      frameRequest = requestAnimationFrame(pollPads);
-    };
-    window.addEventListener('keydown', onKey, true);
-    frameRequest = requestAnimationFrame(pollPads);
-  }
-}
+/**
+ * The Controls screen: rebind inputs, show or hide the on-screen controls,
+ * edit the touch layout, reset to defaults.
+ */
+import { readGamepads } from '../input/gamepad';
+import type { InputConfig, InputDef } from '../input/types';
+import { escapeHtml, findElements, requireElement } from './dom';
+
+/** What the Controls screen drives (the input system). */
+export interface ControlsPanelHost {
+  /** The player's show/hide state of the on-screen controls. */
+  readonly showingVirtual: boolean;
+  /** Show or hide the on-screen controls (persisted). */
+  showVirtual(isVisible: boolean): void;
+  /** Force the controls visible while editing the layout. */
+  setVirtualEditing(isEditing: boolean): void;
+  /** Rebind an input (persisted). */
+  rebind(inputName: string, patch: Partial<InputDef>): void;
+  /** Forget every remap. */
+  resetControls(): void;
+  /** A readable label of an input's current binding. */
+  bindingLabel(inputName: string): string;
+}
+
+/** How long a rebind waits for a key or button. */
+const REBIND_TIMEOUT_MS = 8000;
+
+/** The Controls screen markup for `config`. */
+function panelHtml(config: InputConfig, host: ControlsPanelHost): string {
+  let rows = '';
+  for (const [group, groupDefinition] of Object.entries(config.groups)) {
+    rows += `<h4>${escapeHtml(group)}</h4>`;
+    for (const name of Object.keys(groupDefinition.inputs)) {
+      const escapedName = escapeHtml(name);
+      rows += `<div class="cr"><span>${escapedName}</span><b class="bind" data-i="${escapedName}">${escapeHtml(host.bindingLabel(name))}</b><button class="rb" data-i="${escapedName}">Rebind</button></div>`;
+    }
+  }
+  return `
+      <div class="panel-card">
+        <h3>Controls</h3>
+        <label class="chk"><input type="checkbox" class="showv"> Show on-screen controls</label>
+        <button class="btn editlayout">Edit touch layout</button>
+        <div class="crs">${rows}</div>
+        <div class="panel-actions">
+          <button class="btn reset">Reset to defaults</button>
+          <button class="btn done">Done</button>
+        </div>
+        <p class="hint"></p>
+        <div class="edit-bar"><span>Drag a control to move it</span><button class="btn editdone">Done</button></div>
+      </div>`;
+}
+
+/** The Controls screen (one at a time). */
+export class ControlsPanel {
+  private readonly root: ShadowRoot;
+  private readonly shadowHost: HTMLElement;
+  private panel: HTMLDivElement | null = null;
+  private isEditingLayout = false;
+
+  constructor(root: ShadowRoot, shadowHost: HTMLElement) {
+    this.root = root;
+    this.shadowHost = shadowHost;
+  }
+
+  /** Whether the player is dragging controls around. */
+  get isEditing(): boolean {
+    return this.isEditingLayout;
+  }
+
+  /** Open the screen (or close it when already open). */
+  toggle(config: InputConfig | null, host: ControlsPanelHost): void {
+    if (config === null) {
+      return;
+    }
+    if (this.panel !== null) {
+      this.close();
+      return;
+    }
+    const panel = document.createElement('div');
+    panel.className = 'panel';
+    panel.innerHTML = panelHtml(config, host);
+    this.root.appendChild(panel);
+    this.panel = panel;
+    const showToggle = requireElement(panel, '.showv', HTMLInputElement);
+    showToggle.checked = host.showingVirtual;
+    showToggle.addEventListener('change', () => {
+      host.showVirtual(showToggle.checked);
+    });
+    requireElement(panel, '.editlayout', HTMLButtonElement).addEventListener('click', () => {
+      this.setEditing(!this.isEditingLayout, host);
+    });
+    requireElement(panel, '.reset', HTMLButtonElement).addEventListener('click', () => {
+      host.resetControls();
+      this.close();
+    });
+    requireElement(panel, '.done', HTMLButtonElement).addEventListener('click', () => {
+      this.setEditing(false, host);
+      this.close();
+    });
+    requireElement(panel, '.editdone', HTMLButtonElement).addEventListener('click', () => {
+      this.setEditing(false, host);
+    });
+    for (const button of findElements(panel, '.rb', HTMLButtonElement)) {
+      button.addEventListener('click', () => {
+        this.captureRebind(button.dataset['i'] ?? '', host, panel);
+      });
+    }
+  }
+
+  private close(): void {
+    this.panel?.remove();
+    this.panel = null;
+  }
+
+  private setEditing(isEditing: boolean, host: ControlsPanelHost): void {
+    this.isEditingLayout = isEditing;
+    this.shadowHost.classList.toggle('editing', isEditing);
+    // Forces the controls visible without touching the player's show/hide choice.
+    host.setVirtualEditing(isEditing);
+  }
+
+  /** Wait for the next key or gamepad button and bind `inputName` to it. */
+  private captureRebind(inputName: string, host: ControlsPanelHost, panel: HTMLElement): void {
+    const hint = requireElement(panel, '.hint', HTMLElement);
+    hint.textContent = `Press a key or gamepad button for "${inputName}"…`;
+    let frameRequest = 0;
+    const startedAt = performance.now();
+    const cleanUp = (): void => {
+      window.removeEventListener('keydown', onKey, true);
+      cancelAnimationFrame(frameRequest);
+    };
+    const finish = (patch: Partial<InputDef>, label: string): void => {
+      host.rebind(inputName, patch);
+      const binding = findElements(panel, '.bind', HTMLElement).find((element) => element.dataset['i'] === inputName);
+      if (binding !== undefined) {
+        binding.textContent = label;
+      }
+      hint.textContent = '';
+      cleanUp();
+    };
+    function onKey(event: KeyboardEvent): void {
+      event.preventDefault();
+      finish({ keys: [event.key] }, event.key);
+    }
+    const pollPads = (): void => {
+      for (const pad of readGamepads()) {
+        const pressed = pad.buttons.findIndex((button) => button.pressed);
+        if (pressed >= 0) {
+          finish({ gamepad: { button: pressed } }, `Pad ${String(pressed)}`);
+          return;
+        }
+      }
+      if (performance.now() - startedAt > REBIND_TIMEOUT_MS) {
+        hint.textContent = '';
+        cleanUp();
+        return;
+      }
+      frameRequest = requestAnimationFrame(pollPads);
+    };
+    window.addEventListener('keydown', onKey, true);
+    frameRequest = requestAnimationFrame(pollPads);
+  }
+}

package/src/overlay/dom.ts

@@ -1,46 +1,46 @@
-/**
- * Typed DOM helpers for the overlay: element lookups that check the element
- * class instead of asserting it, and small escapes.
- */
-
-/** The first element under `root` matching `selector` that is an instance of `elementClass`; throws if missing. */
-export function requireElement<ElementType extends Element>(root: ParentNode, selector: string, elementClass: new () => ElementType): ElementType {
-  const found = root.querySelector(selector);
-  if (!(found instanceof elementClass)) {
-    throw new Error(`[hub] overlay element ${selector} is missing`);
-  }
-  return found;
-}
-
-/** Every element under `root` matching `selector` that is an instance of `elementClass`. */
-export function findElements<ElementType extends Element>(root: ParentNode, selector: string, elementClass: new () => ElementType): ElementType[] {
-  return [...root.querySelectorAll(selector)].filter((found): found is ElementType => found instanceof elementClass);
-}
-
-/** `document.body`, which is `null` while the page is still parsing its head (whatever lib.dom says). */
-export function pageBody(): HTMLElement | null {
-  return document.body;
-}
-
-const HTML_ESCAPES: Record<string, string> = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
-
-/** Escape text for HTML. */
-export function escapeHtml(text: string): string {
-  return text.replace(/[&<>"']/g, (character) => HTML_ESCAPES[character] ?? character);
-}
-
-/** Clear an element's position styles. */
-export function clearPosition(element: HTMLElement): void {
-  element.style.left = '';
-  element.style.right = '';
-  element.style.top = '';
-  element.style.bottom = '';
-  element.style.transform = '';
-}
-
-/** Position an element's top-left corner in viewport px. */
-export function placeAt(element: HTMLElement, left: number, top: number): void {
-  clearPosition(element);
-  element.style.left = `${String(left)}px`;
-  element.style.top = `${String(top)}px`;
-}
+/**
+ * Typed DOM helpers for the overlay: element lookups that check the element
+ * class instead of asserting it, and small escapes.
+ */
+
+/** The first element under `root` matching `selector` that is an instance of `elementClass`; throws if missing. */
+export function requireElement<ElementType extends Element>(root: ParentNode, selector: string, elementClass: new () => ElementType): ElementType {
+  const found = root.querySelector(selector);
+  if (!(found instanceof elementClass)) {
+    throw new Error(`[hub] overlay element ${selector} is missing`);
+  }
+  return found;
+}
+
+/** Every element under `root` matching `selector` that is an instance of `elementClass`. */
+export function findElements<ElementType extends Element>(root: ParentNode, selector: string, elementClass: new () => ElementType): ElementType[] {
+  return [...root.querySelectorAll(selector)].filter((found): found is ElementType => found instanceof elementClass);
+}
+
+/** `document.body`, which is `null` while the page is still parsing its head (whatever lib.dom says). */
+export function pageBody(): HTMLElement | null {
+  return document.body;
+}
+
+const HTML_ESCAPES: Record<string, string> = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };
+
+/** Escape text for HTML. */
+export function escapeHtml(text: string): string {
+  return text.replace(/[&<>"']/g, (character) => HTML_ESCAPES[character] ?? character);
+}
+
+/** Clear an element's position styles. */
+export function clearPosition(element: HTMLElement): void {
+  element.style.left = '';
+  element.style.right = '';
+  element.style.top = '';
+  element.style.bottom = '';
+  element.style.transform = '';
+}
+
+/** Position an element's top-left corner in viewport px. */
+export function placeAt(element: HTMLElement, left: number, top: number): void {
+  clearPosition(element);
+  element.style.left = `${String(left)}px`;
+  element.style.top = `${String(top)}px`;
+}