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

package/src/overlay/virtual-controls.ts

@@ -1,262 +1,262 @@
-/**
- * Building one on-screen control (button, tap region, joystick or dpad) and
- * wiring its touch and mouse handling, plus drag-to-move while the player
- * edits the layout.
- */
-import type { VirtualDef } from '../input/types';
-import { placeAt, requireElement } from './dom';
-import { declaredSize, isStickType } from './layout-geometry';
-import type { ListenerScope } from './listener-scope';
-import { ACCENT_COLOR } from './styles';
-
-/** What a control reports. */
-export interface VirtualControlCallbacks {
-  /** A button went down. */
-  onButtonDown(id: string): void;
-  /** A button came up. */
-  onButtonUp(id: string): void;
-  /** A stick moved (-1..1 per axis; 0, 0 on release). */
-  onStick(id: string, outX: number, outY: number): void;
-  /** A tap region was tapped. */
-  onTap(): void;
-  /** The player dropped a dragged control: its top-left corner as % of the viewport. */
-  onDragged(id: string, spot: { x: number; y: number }): void;
-}
-
-/** What controls need from the overlay. */
-export interface VirtualControlEnvironment {
-  readonly callbacks: VirtualControlCallbacks;
-  /** Window listeners, removed when the controls are rebuilt. */
-  readonly scope: ListenerScope;
-  /** Whether the player is editing the layout (controls drag instead of acting). */
-  isEditing(): boolean;
-}
-
-/** A dpad snaps past this deflection. */
-const DPAD_THRESHOLD = 0.4;
-
-const RADIUS_BY_SHAPE = { circle: '50%', pill: '999px', square: '0', round: '16px' } as const;
-
-/** The first touch of a touch event. */
-function firstTouch(event: TouchEvent): Touch | undefined {
-  return event.changedTouches[0];
-}
-
-function bindButton(id: string, element: HTMLElement, environment: VirtualControlEnvironment): void {
-  const { callbacks } = environment;
-  const isTapRegion = element.classList.contains('vc-transparent');
-  const press = (event: Event): void => {
-    if (environment.isEditing()) {
-      return;
-    }
-    event.preventDefault();
-    element.classList.add('pressed');
-    callbacks.onButtonDown(id);
-    if (isTapRegion) {
-      callbacks.onTap();
-    }
-  };
-  const release = (event: Event): void => {
-    event.preventDefault();
-    element.classList.remove('pressed');
-    callbacks.onButtonUp(id);
-  };
-  element.addEventListener('touchstart', press, { passive: false });
-  element.addEventListener('touchend', release, { passive: false });
-  element.addEventListener('touchcancel', release, { passive: false });
-  element.addEventListener('mousedown', press);
-  environment.scope.listenWindow('mouseup', release);
-}
-
-function bindStick(id: string, wrapper: HTMLElement, knob: HTMLElement, definition: VirtualDef, environment: VirtualControlEnvironment): void {
-  const isDpad = definition.type === 'dpad';
-  const axisMode = definition.axis ?? 'both';
-  const { callbacks } = environment;
-  let activeTouchId = -1;
-  let centreX = 0;
-  let centreY = 0;
-  let travelX = 1;
-  let travelY = 1;
-  const measure = (): void => {
-    const bounds = wrapper.getBoundingClientRect();
-    centreX = bounds.left + bounds.width / 2;
-    centreY = bounds.top + bounds.height / 2;
-    const knobRadius = knob.getBoundingClientRect().width / 2 || Math.min(bounds.width, bounds.height) * 0.25;
-    travelX = Math.max(1, bounds.width / 2 - knobRadius);
-    travelY = Math.max(1, bounds.height / 2 - knobRadius);
-  };
-  const moveTo = (pointerX: number, pointerY: number): void => {
-    let dx = axisMode === 'y' ? 0 : pointerX - centreX;
-    let dy = axisMode === 'x' ? 0 : pointerY - centreY;
-    if (axisMode === 'both') {
-      const limit = Math.min(travelX, travelY);
-      const distance = Math.hypot(dx, dy);
-      if (distance > limit) {
-        dx = (dx * limit) / distance;
-        dy = (dy * limit) / distance;
-      }
-    } else {
-      dx = Math.max(-travelX, Math.min(travelX, dx));
-      dy = Math.max(-travelY, Math.min(travelY, dy));
-    }
-    let outX = dx / travelX;
-    let outY = dy / travelY;
-    if (isDpad) {
-      outX = Math.abs(outX) > DPAD_THRESHOLD ? Math.sign(outX) : 0;
-      outY = Math.abs(outY) > DPAD_THRESHOLD ? Math.sign(outY) : 0;
-    }
-    knob.style.transform = `translate(${String(dx)}px, ${String(dy)}px)`;
-    callbacks.onStick(id, outX, outY);
-  };
-  const release = (): void => {
-    activeTouchId = -1;
-    knob.style.transform = 'translate(0,0)';
-    callbacks.onStick(id, 0, 0);
-  };
-  wrapper.addEventListener('touchstart', (event) => {
-    const touch = firstTouch(event);
-    if (environment.isEditing() || touch === undefined) {
-      return;
-    }
-    event.preventDefault();
-    measure();
-    activeTouchId = touch.identifier;
-    moveTo(touch.clientX, touch.clientY);
-  }, { passive: false });
-  wrapper.addEventListener('touchmove', (event) => {
-    event.preventDefault();
-    for (const touch of event.changedTouches) {
-      if (touch.identifier === activeTouchId) {
-        moveTo(touch.clientX, touch.clientY);
-      }
-    }
-  }, { passive: false });
-  wrapper.addEventListener('touchend', release, { passive: false });
-  wrapper.addEventListener('touchcancel', release, { passive: false });
-  // Mouse drag (desktop testing).
-  let isMouseHeld = false;
-  wrapper.addEventListener('mousedown', (event) => {
-    if (environment.isEditing()) {
-      return;
-    }
-    measure();
-    isMouseHeld = true;
-    moveTo(event.clientX, event.clientY);
-  });
-  environment.scope.listenWindow('mousemove', (event) => {
-    if (isMouseHeld) {
-      moveTo(event.clientX, event.clientY);
-    }
-  });
-  environment.scope.listenWindow('mouseup', () => {
-    if (isMouseHeld) {
-      isMouseHeld = false;
-      release();
-    }
-  });
-}
-
-/** Drag-to-move while editing: the control keeps its grab point under the finger and stays fully on-screen. */
-function bindEditDrag(id: string, element: HTMLElement, environment: VirtualControlEnvironment): void {
-  let isDragging = false;
-  let grabX = 0;
-  let grabY = 0;
-  let droppedSpot: { x: number; y: number } | null = null;
-  const start = (pointerX: number, pointerY: number): void => {
-    if (!environment.isEditing()) {
-      return;
-    }
-    isDragging = true;
-    const bounds = element.getBoundingClientRect();
-    grabX = pointerX - bounds.left;
-    grabY = pointerY - bounds.top;
-    droppedSpot = null;
-  };
-  const move = (pointerX: number, pointerY: number): void => {
-    if (!isDragging) {
-      return;
-    }
-    const viewportWidth = window.innerWidth;
-    const viewportHeight = window.innerHeight;
-    const left = Math.max(0, Math.min(viewportWidth - element.offsetWidth, pointerX - grabX));
-    const top = Math.max(0, Math.min(viewportHeight - element.offsetHeight, pointerY - grabY));
-    placeAt(element, left, top);
-    droppedSpot = { x: (left / viewportWidth) * 100, y: (top / viewportHeight) * 100 };
-  };
-  const end = (): void => {
-    if (!isDragging) {
-      return;
-    }
-    isDragging = false;
-    if (droppedSpot !== null) {
-      environment.callbacks.onDragged(id, droppedSpot);
-    }
-  };
-  element.addEventListener('mousedown', (event) => {
-    start(event.clientX, event.clientY);
-  });
-  element.addEventListener('touchstart', (event) => {
-    const touch = firstTouch(event);
-    if (touch !== undefined) {
-      start(touch.clientX, touch.clientY);
-    }
-  }, { passive: true });
-  environment.scope.listenWindow('mousemove', (event) => {
-    move(event.clientX, event.clientY);
-  });
-  environment.scope.listenWindow('touchmove', (event) => {
-    const touch = firstTouch(event);
-    if (isDragging && touch !== undefined) {
-      move(touch.clientX, touch.clientY);
-    }
-  });
-  environment.scope.listenWindow('mouseup', end);
-  environment.scope.listenWindow('touchend', end);
-}
-
-/** Build one on-screen control element, wired up. */
-export function createVirtualControl(definition: VirtualDef, environment: VirtualControlEnvironment): HTMLElement {
-  const isStick = isStickType(definition.type);
-  const { w: width, h: height } = declaredSize(definition);
-  const wrapper = document.createElement('div');
-  wrapper.className = `vc vc-${definition.type}`;
-  wrapper.dataset['controlId'] = definition.id;
-  // The v1 expando tests and tools read the control id from.
-  Reflect.set(wrapper, '__id', definition.id);
-  wrapper.style.width = `${String(width)}px`;
-  wrapper.style.height = `${String(height)}px`;
-  if (definition.opacity !== undefined) {
-    wrapper.style.opacity = String(definition.opacity);
-  }
-  wrapper.style.setProperty('--vc-color', definition.color ?? ACCENT_COLOR);
-  if (definition.bg !== undefined) {
-    wrapper.style.setProperty('--vc-bg', definition.bg);
-  }
-  if (definition.text !== undefined) {
-    wrapper.style.color = definition.text;
-  }
-  const radius = RADIUS_BY_SHAPE[definition.shape ?? (isStick ? 'circle' : 'round')];
-  wrapper.style.borderRadius = radius;
-  if (isStick) {
-    wrapper.innerHTML = '<div class="base"></div><div class="knob"></div>';
-    requireElement(wrapper, '.base', HTMLElement).style.borderRadius = radius;
-    // The knob stays a circle sized to the short edge (a wide pill stick gets a
-    // round knob that slides). Single-axis sticks get a knob that mostly fills
-    // the short edge; 2D sticks a smaller one with room to travel.
-    const knob = requireElement(wrapper, '.knob', HTMLElement);
-    const isSingleAxis = definition.axis === 'x' || definition.axis === 'y';
-    const knobDiameter = Math.round(Math.min(width, height) * (isSingleAxis ? 0.92 : 0.5));
-    knob.style.width = `${String(knobDiameter)}px`;
-    knob.style.height = `${String(knobDiameter)}px`;
-    bindStick(definition.id, wrapper, knob, definition, environment);
-  } else {
-    // The game's own markup (an SVG icon, an entity in a label), inserted as given.
-    wrapper.innerHTML = definition.html ?? `<span>${definition.label ?? ''}</span>`;
-    if (definition.type === 'tap') {
-      wrapper.classList.add('vc-transparent');
-    }
-    bindButton(definition.id, wrapper, environment);
-  }
-  bindEditDrag(definition.id, wrapper, environment);
-  return wrapper;
-}
+/**
+ * Building one on-screen control (button, tap region, joystick or dpad) and
+ * wiring its touch and mouse handling, plus drag-to-move while the player
+ * edits the layout.
+ */
+import type { VirtualDef } from '../input/types';
+import { placeAt, requireElement } from './dom';
+import { declaredSize, isStickType } from './layout-geometry';
+import type { ListenerScope } from './listener-scope';
+import { ACCENT_COLOR } from './styles';
+
+/** What a control reports. */
+export interface VirtualControlCallbacks {
+  /** A button went down. */
+  onButtonDown(id: string): void;
+  /** A button came up. */
+  onButtonUp(id: string): void;
+  /** A stick moved (-1..1 per axis; 0, 0 on release). */
+  onStick(id: string, outX: number, outY: number): void;
+  /** A tap region was tapped. */
+  onTap(): void;
+  /** The player dropped a dragged control: its top-left corner as % of the viewport. */
+  onDragged(id: string, spot: { x: number; y: number }): void;
+}
+
+/** What controls need from the overlay. */
+export interface VirtualControlEnvironment {
+  readonly callbacks: VirtualControlCallbacks;
+  /** Window listeners, removed when the controls are rebuilt. */
+  readonly scope: ListenerScope;
+  /** Whether the player is editing the layout (controls drag instead of acting). */
+  isEditing(): boolean;
+}
+
+/** A dpad snaps past this deflection. */
+const DPAD_THRESHOLD = 0.4;
+
+const RADIUS_BY_SHAPE = { circle: '50%', pill: '999px', square: '0', round: '16px' } as const;
+
+/** The first touch of a touch event. */
+function firstTouch(event: TouchEvent): Touch | undefined {
+  return event.changedTouches[0];
+}
+
+function bindButton(id: string, element: HTMLElement, environment: VirtualControlEnvironment): void {
+  const { callbacks } = environment;
+  const isTapRegion = element.classList.contains('vc-transparent');
+  const press = (event: Event): void => {
+    if (environment.isEditing()) {
+      return;
+    }
+    event.preventDefault();
+    element.classList.add('pressed');
+    callbacks.onButtonDown(id);
+    if (isTapRegion) {
+      callbacks.onTap();
+    }
+  };
+  const release = (event: Event): void => {
+    event.preventDefault();
+    element.classList.remove('pressed');
+    callbacks.onButtonUp(id);
+  };
+  element.addEventListener('touchstart', press, { passive: false });
+  element.addEventListener('touchend', release, { passive: false });
+  element.addEventListener('touchcancel', release, { passive: false });
+  element.addEventListener('mousedown', press);
+  environment.scope.listenWindow('mouseup', release);
+}
+
+function bindStick(id: string, wrapper: HTMLElement, knob: HTMLElement, definition: VirtualDef, environment: VirtualControlEnvironment): void {
+  const isDpad = definition.type === 'dpad';
+  const axisMode = definition.axis ?? 'both';
+  const { callbacks } = environment;
+  let activeTouchId = -1;
+  let centreX = 0;
+  let centreY = 0;
+  let travelX = 1;
+  let travelY = 1;
+  const measure = (): void => {
+    const bounds = wrapper.getBoundingClientRect();
+    centreX = bounds.left + bounds.width / 2;
+    centreY = bounds.top + bounds.height / 2;
+    const knobRadius = knob.getBoundingClientRect().width / 2 || Math.min(bounds.width, bounds.height) * 0.25;
+    travelX = Math.max(1, bounds.width / 2 - knobRadius);
+    travelY = Math.max(1, bounds.height / 2 - knobRadius);
+  };
+  const moveTo = (pointerX: number, pointerY: number): void => {
+    let dx = axisMode === 'y' ? 0 : pointerX - centreX;
+    let dy = axisMode === 'x' ? 0 : pointerY - centreY;
+    if (axisMode === 'both') {
+      const limit = Math.min(travelX, travelY);
+      const distance = Math.hypot(dx, dy);
+      if (distance > limit) {
+        dx = (dx * limit) / distance;
+        dy = (dy * limit) / distance;
+      }
+    } else {
+      dx = Math.max(-travelX, Math.min(travelX, dx));
+      dy = Math.max(-travelY, Math.min(travelY, dy));
+    }
+    let outX = dx / travelX;
+    let outY = dy / travelY;
+    if (isDpad) {
+      outX = Math.abs(outX) > DPAD_THRESHOLD ? Math.sign(outX) : 0;
+      outY = Math.abs(outY) > DPAD_THRESHOLD ? Math.sign(outY) : 0;
+    }
+    knob.style.transform = `translate(${String(dx)}px, ${String(dy)}px)`;
+    callbacks.onStick(id, outX, outY);
+  };
+  const release = (): void => {
+    activeTouchId = -1;
+    knob.style.transform = 'translate(0,0)';
+    callbacks.onStick(id, 0, 0);
+  };
+  wrapper.addEventListener('touchstart', (event) => {
+    const touch = firstTouch(event);
+    if (environment.isEditing() || touch === undefined) {
+      return;
+    }
+    event.preventDefault();
+    measure();
+    activeTouchId = touch.identifier;
+    moveTo(touch.clientX, touch.clientY);
+  }, { passive: false });
+  wrapper.addEventListener('touchmove', (event) => {
+    event.preventDefault();
+    for (const touch of event.changedTouches) {
+      if (touch.identifier === activeTouchId) {
+        moveTo(touch.clientX, touch.clientY);
+      }
+    }
+  }, { passive: false });
+  wrapper.addEventListener('touchend', release, { passive: false });
+  wrapper.addEventListener('touchcancel', release, { passive: false });
+  // Mouse drag (desktop testing).
+  let isMouseHeld = false;
+  wrapper.addEventListener('mousedown', (event) => {
+    if (environment.isEditing()) {
+      return;
+    }
+    measure();
+    isMouseHeld = true;
+    moveTo(event.clientX, event.clientY);
+  });
+  environment.scope.listenWindow('mousemove', (event) => {
+    if (isMouseHeld) {
+      moveTo(event.clientX, event.clientY);
+    }
+  });
+  environment.scope.listenWindow('mouseup', () => {
+    if (isMouseHeld) {
+      isMouseHeld = false;
+      release();
+    }
+  });
+}
+
+/** Drag-to-move while editing: the control keeps its grab point under the finger and stays fully on-screen. */
+function bindEditDrag(id: string, element: HTMLElement, environment: VirtualControlEnvironment): void {
+  let isDragging = false;
+  let grabX = 0;
+  let grabY = 0;
+  let droppedSpot: { x: number; y: number } | null = null;
+  const start = (pointerX: number, pointerY: number): void => {
+    if (!environment.isEditing()) {
+      return;
+    }
+    isDragging = true;
+    const bounds = element.getBoundingClientRect();
+    grabX = pointerX - bounds.left;
+    grabY = pointerY - bounds.top;
+    droppedSpot = null;
+  };
+  const move = (pointerX: number, pointerY: number): void => {
+    if (!isDragging) {
+      return;
+    }
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    const left = Math.max(0, Math.min(viewportWidth - element.offsetWidth, pointerX - grabX));
+    const top = Math.max(0, Math.min(viewportHeight - element.offsetHeight, pointerY - grabY));
+    placeAt(element, left, top);
+    droppedSpot = { x: (left / viewportWidth) * 100, y: (top / viewportHeight) * 100 };
+  };
+  const end = (): void => {
+    if (!isDragging) {
+      return;
+    }
+    isDragging = false;
+    if (droppedSpot !== null) {
+      environment.callbacks.onDragged(id, droppedSpot);
+    }
+  };
+  element.addEventListener('mousedown', (event) => {
+    start(event.clientX, event.clientY);
+  });
+  element.addEventListener('touchstart', (event) => {
+    const touch = firstTouch(event);
+    if (touch !== undefined) {
+      start(touch.clientX, touch.clientY);
+    }
+  }, { passive: true });
+  environment.scope.listenWindow('mousemove', (event) => {
+    move(event.clientX, event.clientY);
+  });
+  environment.scope.listenWindow('touchmove', (event) => {
+    const touch = firstTouch(event);
+    if (isDragging && touch !== undefined) {
+      move(touch.clientX, touch.clientY);
+    }
+  });
+  environment.scope.listenWindow('mouseup', end);
+  environment.scope.listenWindow('touchend', end);
+}
+
+/** Build one on-screen control element, wired up. */
+export function createVirtualControl(definition: VirtualDef, environment: VirtualControlEnvironment): HTMLElement {
+  const isStick = isStickType(definition.type);
+  const { w: width, h: height } = declaredSize(definition);
+  const wrapper = document.createElement('div');
+  wrapper.className = `vc vc-${definition.type}`;
+  wrapper.dataset['controlId'] = definition.id;
+  // The v1 expando tests and tools read the control id from.
+  Reflect.set(wrapper, '__id', definition.id);
+  wrapper.style.width = `${String(width)}px`;
+  wrapper.style.height = `${String(height)}px`;
+  if (definition.opacity !== undefined) {
+    wrapper.style.opacity = String(definition.opacity);
+  }
+  wrapper.style.setProperty('--vc-color', definition.color ?? ACCENT_COLOR);
+  if (definition.bg !== undefined) {
+    wrapper.style.setProperty('--vc-bg', definition.bg);
+  }
+  if (definition.text !== undefined) {
+    wrapper.style.color = definition.text;
+  }
+  const radius = RADIUS_BY_SHAPE[definition.shape ?? (isStick ? 'circle' : 'round')];
+  wrapper.style.borderRadius = radius;
+  if (isStick) {
+    wrapper.innerHTML = '<div class="base"></div><div class="knob"></div>';
+    requireElement(wrapper, '.base', HTMLElement).style.borderRadius = radius;
+    // The knob stays a circle sized to the short edge (a wide pill stick gets a
+    // round knob that slides). Single-axis sticks get a knob that mostly fills
+    // the short edge; 2D sticks a smaller one with room to travel.
+    const knob = requireElement(wrapper, '.knob', HTMLElement);
+    const isSingleAxis = definition.axis === 'x' || definition.axis === 'y';
+    const knobDiameter = Math.round(Math.min(width, height) * (isSingleAxis ? 0.92 : 0.5));
+    knob.style.width = `${String(knobDiameter)}px`;
+    knob.style.height = `${String(knobDiameter)}px`;
+    bindStick(definition.id, wrapper, knob, definition, environment);
+  } else {
+    // The game's own markup (an SVG icon, an entity in a label), inserted as given.
+    wrapper.innerHTML = definition.html ?? `<span>${definition.label ?? ''}</span>`;
+    if (definition.type === 'tap') {
+      wrapper.classList.add('vc-transparent');
+    }
+    bindButton(definition.id, wrapper, environment);
+  }
+  bindEditDrag(definition.id, wrapper, environment);
+  return wrapper;
+}

package/src/race.ts

@@ -1,10 +1,10 @@
-/**
- * `@diffenderfer-games/hub/race`: the race forwarder (`hub.race`), for games
- * that want only this namespace.
- *
- * @packageDocumentation
- */
-export { raceForwarder as race } from './realtime/race-forwarder';
-export type * from './realtime/race-types';
-export type { RaceHistory, RaceRecordPlayer, RaceResultPlayer, RaceStatusEvent } from './realtime/wire-types';
-export type { RaceOutcome, RaceParams, RaceRecord, RaceResult, RaceState, RaceStats, RaceStatValue, Racer, RacerResult, RacerState, RoomInfo } from '@diffenderfer-games/hub-contract';
+/**
+ * `@diffenderfer-games/hub/race`: the race forwarder (`hub.race`), for games
+ * that want only this namespace.
+ *
+ * @packageDocumentation
+ */
+export { raceForwarder as race } from './realtime/race-forwarder';
+export type * from './realtime/race-types';
+export type { RaceHistory, RaceRecordPlayer, RaceResultPlayer, RaceStatusEvent } from './realtime/wire-types';
+export type { RaceOutcome, RaceParams, RaceRecord, RaceResult, RaceState, RaceStats, RaceStatValue, Racer, RacerResult, RacerState, RoomInfo } from '@diffenderfer-games/hub-contract';