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

package/src/overlay/on-screen-keyboard.ts

@@ -1,137 +1,137 @@
-/**
- * The on-screen keyboard for text fields, usable by touch, mouse or gamepad
- * (the stick or d-pad moves between keys, A presses, B or Start closes).
- */
-import { RepeatingEdges, RisingEdges } from '../input/edges';
-import { isAnyPadButtonPressed, PAD_BUTTON, readGamepads } from '../input/gamepad';
-import type { Direction } from '../input/gamepad';
-import { findNearestInDirection, rectOf } from '../input/spatial';
-import { findElements } from './dom';
-
-const LETTER_ROWS = ['1234567890', 'qwertyuiop', 'asdfghjkl', 'zxcvbnm'];
-const STICK_THRESHOLD = 0.5;
-
-/** One key's markup. */
-function keyHtml(label: string, key: string, extraClass = ''): string {
-  return `<button class="k ${extraClass}" data-k="${key}">${label}</button>`;
-}
-
-const KEYBOARD_HTML = `<div class="kb-rows">${LETTER_ROWS.map((row) => `<div class="kb-row">${Array.from(row).map((character) => keyHtml(character, character)).join('')}</div>`).join('')}`
-  + `<div class="kb-row">${keyHtml('⇧', 'shift', 'wide')}${keyHtml('space', ' ', 'space')}${keyHtml('⌫', 'back', 'wide')}${keyHtml('↵', 'enter', 'wide')}${keyHtml('✕', 'close', 'wide')}</div></div>`;
-
-/** The direction the pads point, from the summed stick and d-pad. */
-function heldDirection(pads: readonly Gamepad[]): Direction | null {
-  let horizontal = 0;
-  let vertical = 0;
-  for (const pad of pads) {
-    horizontal += (pad.axes[0] ?? 0) - Number(pad.buttons[PAD_BUTTON.LEFT]?.pressed === true) + Number(pad.buttons[PAD_BUTTON.RIGHT]?.pressed === true);
-    vertical += (pad.axes[1] ?? 0) - Number(pad.buttons[PAD_BUTTON.UP]?.pressed === true) + Number(pad.buttons[PAD_BUTTON.DOWN]?.pressed === true);
-  }
-  if (Math.abs(horizontal) <= STICK_THRESHOLD && Math.abs(vertical) <= STICK_THRESHOLD) {
-    return null;
-  }
-  if (Math.abs(horizontal) > Math.abs(vertical)) {
-    return horizontal > 0 ? 'right' : 'left';
-  }
-  return vertical > 0 ? 'down' : 'up';
-}
-
-/** The on-screen keyboard (one at a time, inside the overlay's shadow root). */
-export class OnScreenKeyboard {
-  private readonly root: ShadowRoot;
-  private panel: HTMLDivElement | null = null;
-  private target: HTMLInputElement | HTMLTextAreaElement | null = null;
-  private keys: HTMLElement[] = [];
-  private focusedIndex = 0;
-  private isShifted = false;
-  private readonly repeats = new RepeatingEdges();
-  private readonly presses = new RisingEdges();
-
-  constructor(root: ShadowRoot) {
-    this.root = root;
-  }
-
-  /** Whether the keyboard is showing. */
-  get isOpen(): boolean {
-    return this.panel !== null;
-  }
-
-  /** Open it for `target` (replacing any open keyboard). */
-  open(target: HTMLInputElement | HTMLTextAreaElement | null): void {
-    this.close();
-    this.target = target;
-    this.isShifted = false;
-    this.focusedIndex = 0;
-    const panel = document.createElement('div');
-    panel.className = 'kb';
-    panel.innerHTML = KEYBOARD_HTML;
-    this.root.appendChild(panel);
-    this.panel = panel;
-    this.keys = findElements(panel, '.k', HTMLElement);
-    for (const key of this.keys) {
-      const press = (event: Event): void => {
-        event.preventDefault();
-        this.press(key.dataset['k'] ?? '');
-      };
-      key.addEventListener('mousedown', press);
-      key.addEventListener('touchstart', press, { passive: false });
-    }
-    this.highlightFocusedKey();
-  }
-
-  /** Close it. */
-  close(): void {
-    this.panel?.remove();
-    this.panel = null;
-    this.target = null;
-    this.keys = [];
-  }
-
-  /** Called every frame while open: gamepad navigation. */
-  pollGamepads(): void {
-    if (this.panel === null) {
-      return;
-    }
-    const pads = readGamepads();
-    const direction = heldDirection(pads);
-    if (this.repeats.fires('move', direction !== null) && direction !== null) {
-      this.moveFocus(direction);
-    }
-    if (this.presses.rose('act', isAnyPadButtonPressed(pads, PAD_BUTTON.A))) {
-      this.press(this.keys[this.focusedIndex]?.dataset['k'] ?? '');
-    }
-    const isClosing = isAnyPadButtonPressed(pads, PAD_BUTTON.B) || isAnyPadButtonPressed(pads, PAD_BUTTON.START);
-    if (this.presses.rose('close', isClosing)) {
-      this.close();
-    }
-  }
-
-  private press(key: string): void {
-    if (key === 'close' || key === 'enter') {
-      this.close();
-      return;
-    }
-    if (key === 'shift') {
-      this.isShifted = !this.isShifted;
-      return;
-    }
-    const target = this.target;
-    if (target === null || key === '') {
-      return;
-    }
-    target.value = key === 'back' ? target.value.slice(0, -1) : target.value + (this.isShifted ? key.toUpperCase() : key);
-    target.dispatchEvent(new Event('input', { bubbles: true }));
-  }
-
-  private moveFocus(direction: Direction): void {
-    const next = findNearestInDirection(this.keys.map(rectOf), this.focusedIndex, direction);
-    if (next >= 0) {
-      this.focusedIndex = next;
-      this.highlightFocusedKey();
-    }
-  }
-
-  private highlightFocusedKey(): void {
-    this.keys.forEach((key, index) => key.classList.toggle('kfocus', index === this.focusedIndex));
-  }
-}
+/**
+ * The on-screen keyboard for text fields, usable by touch, mouse or gamepad
+ * (the stick or d-pad moves between keys, A presses, B or Start closes).
+ */
+import { RepeatingEdges, RisingEdges } from '../input/edges';
+import { isAnyPadButtonPressed, PAD_BUTTON, readGamepads } from '../input/gamepad';
+import type { Direction } from '../input/gamepad';
+import { findNearestInDirection, rectOf } from '../input/spatial';
+import { findElements } from './dom';
+
+const LETTER_ROWS = ['1234567890', 'qwertyuiop', 'asdfghjkl', 'zxcvbnm'];
+const STICK_THRESHOLD = 0.5;
+
+/** One key's markup. */
+function keyHtml(label: string, key: string, extraClass = ''): string {
+  return `<button class="k ${extraClass}" data-k="${key}">${label}</button>`;
+}
+
+const KEYBOARD_HTML = `<div class="kb-rows">${LETTER_ROWS.map((row) => `<div class="kb-row">${Array.from(row).map((character) => keyHtml(character, character)).join('')}</div>`).join('')}`
+  + `<div class="kb-row">${keyHtml('⇧', 'shift', 'wide')}${keyHtml('space', ' ', 'space')}${keyHtml('⌫', 'back', 'wide')}${keyHtml('↵', 'enter', 'wide')}${keyHtml('✕', 'close', 'wide')}</div></div>`;
+
+/** The direction the pads point, from the summed stick and d-pad. */
+function heldDirection(pads: readonly Gamepad[]): Direction | null {
+  let horizontal = 0;
+  let vertical = 0;
+  for (const pad of pads) {
+    horizontal += (pad.axes[0] ?? 0) - Number(pad.buttons[PAD_BUTTON.LEFT]?.pressed === true) + Number(pad.buttons[PAD_BUTTON.RIGHT]?.pressed === true);
+    vertical += (pad.axes[1] ?? 0) - Number(pad.buttons[PAD_BUTTON.UP]?.pressed === true) + Number(pad.buttons[PAD_BUTTON.DOWN]?.pressed === true);
+  }
+  if (Math.abs(horizontal) <= STICK_THRESHOLD && Math.abs(vertical) <= STICK_THRESHOLD) {
+    return null;
+  }
+  if (Math.abs(horizontal) > Math.abs(vertical)) {
+    return horizontal > 0 ? 'right' : 'left';
+  }
+  return vertical > 0 ? 'down' : 'up';
+}
+
+/** The on-screen keyboard (one at a time, inside the overlay's shadow root). */
+export class OnScreenKeyboard {
+  private readonly root: ShadowRoot;
+  private panel: HTMLDivElement | null = null;
+  private target: HTMLInputElement | HTMLTextAreaElement | null = null;
+  private keys: HTMLElement[] = [];
+  private focusedIndex = 0;
+  private isShifted = false;
+  private readonly repeats = new RepeatingEdges();
+  private readonly presses = new RisingEdges();
+
+  constructor(root: ShadowRoot) {
+    this.root = root;
+  }
+
+  /** Whether the keyboard is showing. */
+  get isOpen(): boolean {
+    return this.panel !== null;
+  }
+
+  /** Open it for `target` (replacing any open keyboard). */
+  open(target: HTMLInputElement | HTMLTextAreaElement | null): void {
+    this.close();
+    this.target = target;
+    this.isShifted = false;
+    this.focusedIndex = 0;
+    const panel = document.createElement('div');
+    panel.className = 'kb';
+    panel.innerHTML = KEYBOARD_HTML;
+    this.root.appendChild(panel);
+    this.panel = panel;
+    this.keys = findElements(panel, '.k', HTMLElement);
+    for (const key of this.keys) {
+      const press = (event: Event): void => {
+        event.preventDefault();
+        this.press(key.dataset['k'] ?? '');
+      };
+      key.addEventListener('mousedown', press);
+      key.addEventListener('touchstart', press, { passive: false });
+    }
+    this.highlightFocusedKey();
+  }
+
+  /** Close it. */
+  close(): void {
+    this.panel?.remove();
+    this.panel = null;
+    this.target = null;
+    this.keys = [];
+  }
+
+  /** Called every frame while open: gamepad navigation. */
+  pollGamepads(): void {
+    if (this.panel === null) {
+      return;
+    }
+    const pads = readGamepads();
+    const direction = heldDirection(pads);
+    if (this.repeats.fires('move', direction !== null) && direction !== null) {
+      this.moveFocus(direction);
+    }
+    if (this.presses.rose('act', isAnyPadButtonPressed(pads, PAD_BUTTON.A))) {
+      this.press(this.keys[this.focusedIndex]?.dataset['k'] ?? '');
+    }
+    const isClosing = isAnyPadButtonPressed(pads, PAD_BUTTON.B) || isAnyPadButtonPressed(pads, PAD_BUTTON.START);
+    if (this.presses.rose('close', isClosing)) {
+      this.close();
+    }
+  }
+
+  private press(key: string): void {
+    if (key === 'close' || key === 'enter') {
+      this.close();
+      return;
+    }
+    if (key === 'shift') {
+      this.isShifted = !this.isShifted;
+      return;
+    }
+    const target = this.target;
+    if (target === null || key === '') {
+      return;
+    }
+    target.value = key === 'back' ? target.value.slice(0, -1) : target.value + (this.isShifted ? key.toUpperCase() : key);
+    target.dispatchEvent(new Event('input', { bubbles: true }));
+  }
+
+  private moveFocus(direction: Direction): void {
+    const next = findNearestInDirection(this.keys.map(rectOf), this.focusedIndex, direction);
+    if (next >= 0) {
+      this.focusedIndex = next;
+      this.highlightFocusedKey();
+    }
+  }
+
+  private highlightFocusedKey(): void {
+    this.keys.forEach((key, index) => key.classList.toggle('kfocus', index === this.focusedIndex));
+  }
+}