@astronox/core 0.5.6 → 0.5.8

package/src/patterns/LightMazePuzzle/lightMazePuzzleController.ts

@@ -0,0 +1,684 @@
+import {
+  animatePieceMovement,
+  cancelDragFrame,
+  findDirectionalDropDestination,
+  hasLeftOriginCell,
+  renderPathStream,
+  scheduleDragFrame,
+  type PuzzleDrag,
+} from '../PuzzleGrid/movement';
+import { initPuzzleSelectionDismissal } from '../PuzzleGrid/selectionDismissal';
+import { presentLightMazeCell } from './presentation';
+import {
+  setPuzzleGridCellState,
+  setPuzzleGridState,
+} from '../PuzzleGrid/state';
+import type {
+  LightMazeDirection,
+  LightMazePiece,
+  LightMazePosition,
+  LightMazePuzzleChangeDetail,
+  LightMazePuzzleLabels,
+  LightMazePuzzleModel,
+  LightMazePuzzleState,
+  LightMazePuzzleStatus,
+} from './contracts';
+import {
+  createLightMazePuzzleState,
+  evaluateLightMazeMechanism,
+  getLightMazeMoves,
+  isLightMazePuzzleComplete,
+  simulateLightMazeMove,
+} from './simulation';
+
+type Panel = {
+  element: HTMLElement;
+  board: HTMLElement;
+  model: LightMazePuzzleModel;
+  labels: LightMazePuzzleLabels;
+  state: LightMazePuzzleState;
+};
+type Instance = {
+  panels: Panel[];
+  activeIndex: number;
+  selected: LightMazePiece | null;
+  motion: AbortController | null;
+  drag: PuzzleDrag | null;
+  ignoreClick: boolean;
+  clickTimer: number | null;
+  controller: AbortController;
+  dismiss: () => void;
+};
+
+const instances = new WeakMap<HTMLElement, Instance>();
+const arrows: Record<string, LightMazeDirection> = {
+  ArrowUp: 'north',
+  ArrowRight: 'east',
+  ArrowDown: 'south',
+  ArrowLeft: 'west',
+};
+
+export function initLightMazePuzzle(root: HTMLElement): void {
+  if (instances.has(root)) return;
+  const panels = [
+    ...root.querySelectorAll<HTMLElement>('[data-light-maze-model]'),
+  ].map((element) => {
+    const model = JSON.parse(
+      element.dataset.lightMazeModel!,
+    ) as LightMazePuzzleModel;
+    return {
+      element,
+      board: element.querySelector<HTMLElement>('[data-puzzle-grid]')!,
+      model,
+      labels: JSON.parse(
+        element.dataset.lightMazeLabels!,
+      ) as LightMazePuzzleLabels,
+      state: createLightMazePuzzleState(model),
+    };
+  });
+  if (!panels.length) return;
+  const controller = new AbortController();
+  const instance: Instance = {
+    panels,
+    activeIndex: 0,
+    selected: null,
+    motion: null,
+    drag: null,
+    ignoreClick: false,
+    clickTimer: null,
+    controller,
+    dismiss: () => undefined,
+  };
+  instances.set(root, instance);
+  instance.dismiss = initPuzzleSelectionDismissal(root, {
+    dismiss: () => selectPiece(root, null),
+    isSelectionTarget: (target) => {
+      const panel = active(instance);
+      return (
+        panel.element.dataset.puzzleStatus !== 'valid' &&
+        panel.element.contains(target) &&
+        Boolean(
+          target.closest(
+            '[data-light-maze-piece], [data-light-maze-destination]',
+          ),
+        )
+      );
+    },
+  });
+  const options = { signal: controller.signal };
+  root.addEventListener(
+    'click',
+    (event) => {
+      if (!(event.target instanceof Element)) return;
+      if (instance.motion) {
+        event.preventDefault();
+        return;
+      }
+      if (instance.ignoreClick && event.detail !== 0) {
+        instance.ignoreClick = false;
+        event.preventDefault();
+        return;
+      }
+      instance.ignoreClick = false;
+      const piece = event.target.closest<HTMLButtonElement>(
+        '[data-light-maze-piece]',
+      );
+      if (piece) {
+        const id = piece.dataset.lightMazePiece as LightMazePiece;
+        selectPiece(root, instance.selected === id ? null : id);
+        return;
+      }
+      const destination = event.target.closest<HTMLButtonElement>(
+        '[data-light-maze-destination]',
+      );
+      if (destination && !destination.disabled) {
+        void move(
+          root,
+          destination.dataset.destinationPiece as LightMazePiece,
+          destination.dataset.destinationDirection as LightMazeDirection,
+        );
+      } else selectPiece(root, null);
+    },
+    options,
+  );
+
+  root.addEventListener(
+    'keydown',
+    (event) => {
+      if (instance.motion) {
+        if (arrows[event.key] || ['Enter', ' ', 'Escape'].includes(event.key))
+          event.preventDefault();
+        return;
+      }
+      if (event.altKey || event.ctrlKey || event.metaKey || instance.drag)
+        return;
+      if (event.key === 'Escape') {
+        selectPiece(root, null);
+        return;
+      }
+      const direction = arrows[event.key];
+      if (!direction) return;
+      const focused =
+        event.target instanceof Element
+          ? event.target.closest<HTMLElement>('[data-light-maze-piece]')
+          : null;
+      const piece =
+        (focused?.dataset.lightMazePiece as LightMazePiece | undefined) ??
+        instance.selected;
+      if (!piece) return;
+      event.preventDefault();
+      void move(root, piece, direction);
+    },
+    options,
+  );
+
+  root.addEventListener(
+    'pointerdown',
+    (event) => {
+      if (instance.motion) {
+        event.preventDefault();
+        clearClickTimer(instance);
+        instance.ignoreClick = true;
+        return;
+      }
+      instance.ignoreClick = false;
+      if (
+        !event.isPrimary ||
+        event.button !== 0 ||
+        instance.drag ||
+        active(instance).element.dataset.puzzleStatus === 'valid'
+      )
+        return;
+      if (!(event.target instanceof Element)) return;
+      const element = event.target.closest<HTMLButtonElement>(
+        '[data-light-maze-piece]',
+      );
+      if (!element) return;
+      const pieceId = element.dataset.lightMazePiece as LightMazePiece;
+      const origin = findCell(
+        active(instance),
+        active(instance).state[pieceId],
+      );
+      if (!origin) return;
+      const bounds = element.getBoundingClientRect();
+      element.setPointerCapture(event.pointerId);
+      instance.drag = {
+        pointerId: event.pointerId,
+        pieceId,
+        startX: event.clientX,
+        startY: event.clientY,
+        currentX: event.clientX,
+        currentY: event.clientY,
+        frameId: null,
+        element,
+        originCellBounds: origin.getBoundingClientRect(),
+        originCenterX: (bounds.left + bounds.right) / 2,
+        originCenterY: (bounds.top + bounds.bottom) / 2,
+        destinations: null,
+        moved: false,
+      };
+    },
+    options,
+  );
+
+  root.addEventListener(
+    'pointermove',
+    (event) => {
+      const drag = instance.drag;
+      if (!drag || drag.pointerId !== event.pointerId) return;
+      if (!drag.moved) {
+        if (
+          Math.hypot(event.clientX - drag.startX, event.clientY - drag.startY) <
+          12
+        )
+          return;
+        drag.moved = true;
+        drag.element.setAttribute('data-piece-dragging', '');
+        selectPiece(root, drag.pieceId as LightMazePiece);
+        drag.destinations = [
+          ...active(instance).element.querySelectorAll<HTMLButtonElement>(
+            '[data-light-maze-destination]',
+          ),
+        ];
+      }
+      event.preventDefault();
+      drag.currentX = event.clientX;
+      drag.currentY = event.clientY;
+      scheduleDragFrame(drag, () => instance.drag === drag);
+    },
+    options,
+  );
+  root.addEventListener(
+    'pointerup',
+    (event) => finishDrag(root, event, true),
+    options,
+  );
+  root.addEventListener(
+    'pointercancel',
+    (event) => finishDrag(root, event, false),
+    options,
+  );
+  root.addEventListener(
+    'lostpointercapture',
+    (event) => finishDrag(root, event, false),
+    options,
+  );
+  render(root);
+}
+
+export function selectLightMazePuzzle(root: HTMLElement, index: number): void {
+  initLightMazePuzzle(root);
+  const instance = instances.get(root);
+  if (!instance) return;
+  cancelMotion(instance);
+  cancelDrag(instance);
+  instance.activeIndex = Math.max(
+    0,
+    Math.min(index, instance.panels.length - 1),
+  );
+  instance.panels.forEach((panel, i) => {
+    panel.element.hidden = i !== instance.activeIndex;
+  });
+  resetLightMazePuzzle(root);
+}
+
+export function resetLightMazePuzzle(root: HTMLElement): void {
+  initLightMazePuzzle(root);
+  const instance = instances.get(root);
+  if (!instance) return;
+  cancelMotion(instance);
+  cancelDrag(instance);
+  clearClickTimer(instance);
+  instance.ignoreClick = false;
+  instance.selected = null;
+  const panel = active(instance);
+  panel.state = createLightMazePuzzleState(panel.model);
+  panel.element.dataset.puzzleStatus = 'incomplete';
+  setPuzzleGridState(panel.board, null);
+  for (const piece of panel.element.querySelectorAll<HTMLElement>(
+    '[data-light-maze-piece]',
+  )) {
+    piece.getAnimations().forEach((animation) => animation.cancel());
+    piece.removeAttribute('data-piece-moved');
+  }
+  render(root);
+  emitChange(root, panel);
+}
+
+export function setLightMazePuzzleStatus(
+  root: HTMLElement,
+  puzzleId: string,
+  status: LightMazePuzzleStatus,
+): void {
+  const instance = instances.get(root);
+  const panel = instance?.panels.find(
+    (candidate) => candidate.model.id === puzzleId,
+  );
+  if (!instance || !panel) return;
+  const previous = panel.element.dataset.puzzleStatus;
+  panel.element.dataset.puzzleStatus = status;
+  setPuzzleGridState(panel.board, status === 'valid' ? 'valid' : null);
+  if (status === 'valid' && panel === active(instance)) {
+    cancelDrag(instance);
+    instance.selected = null;
+    renderSelection(root);
+  }
+  if (status === 'valid' && previous !== 'valid') {
+    root.dispatchEvent(
+      new CustomEvent('puzzle:complete', {
+        bubbles: true,
+        detail: { kind: 'light-maze', puzzleId },
+      }),
+    );
+  }
+}
+
+export function destroyLightMazePuzzle(root: HTMLElement): void {
+  const instance = instances.get(root);
+  if (!instance) return;
+  cancelMotion(instance);
+  instance.controller.abort();
+  instance.dismiss();
+  cancelDrag(instance);
+  clearClickTimer(instance);
+  for (const panel of instance.panels) {
+    clearPreviews(panel);
+    for (const piece of panel.element.querySelectorAll<HTMLElement>(
+      '[data-light-maze-piece]',
+    )) {
+      piece.getAnimations().forEach((animation) => animation.cancel());
+    }
+  }
+  instances.delete(root);
+}
+
+function active(instance: Instance): Panel {
+  return instance.panels[instance.activeIndex]!;
+}
+
+function selectPiece(root: HTMLElement, piece: LightMazePiece | null): void {
+  const instance = instances.get(root);
+  if (
+    !instance ||
+    instance.motion ||
+    active(instance).element.dataset.puzzleStatus === 'valid'
+  )
+    return;
+  instance.selected = piece;
+  renderSelection(root);
+}
+
+async function move(
+  root: HTMLElement,
+  piece: LightMazePiece,
+  direction: LightMazeDirection,
+  retainSelection = true,
+): Promise<void> {
+  const instance = instances.get(root);
+  if (!instance || instance.motion) return;
+  const panel = active(instance);
+  if (panel.element.dataset.puzzleStatus === 'valid') return;
+  const movement = simulateLightMazeMove(panel.model, panel.state, {
+    piece,
+    direction,
+  });
+  if (!movement) return;
+  const element = panel.element.querySelector<HTMLButtonElement>(
+    `[data-light-maze-piece="${piece}"]`,
+  )!;
+  const bounds = element.getBoundingClientRect();
+  element.getAnimations().forEach((animation) => animation.cancel());
+  element.removeAttribute('data-piece-moved');
+  const walls = (panel.model.activators ?? []).flatMap((activator, index) =>
+    movement.state.activated.includes(index) &&
+    !panel.state.activated.includes(index)
+      ? activator.walls
+      : [],
+  );
+  const motion =
+    walls.length && !reducedMotion() ? new AbortController() : null;
+  if (motion) {
+    instance.motion = motion;
+    panel.element.setAttribute('data-light-maze-transitioning', '');
+    panel.board.setAttribute('aria-busy', 'true');
+  }
+  panel.state = motion
+    ? { ...movement.state, activated: panel.state.activated }
+    : movement.state;
+  instance.selected =
+    (retainSelection || walls.length > 0) &&
+    !isLightMazePuzzleComplete(panel.model, panel.state)
+      ? piece
+      : null;
+  render(root);
+  animatePieceMovement(element, bounds);
+  if (!motion) {
+    emitChange(root, panel);
+    return;
+  }
+  try {
+    if (!(await waitForAnimations(element.getAnimations(), motion.signal)))
+      return;
+    const cells = walls.flatMap((position) => {
+      const cell = findCell(panel, position);
+      return cell ? [cell] : [];
+    });
+    for (const cell of cells) cell.setAttribute('data-wall-removing', '');
+    panel.state = movement.state;
+    render(root);
+    if (!reducedMotion()) await animateWallRemoval(cells, motion.signal);
+  } finally {
+    if (instance.motion === motion) {
+      instance.motion = null;
+      clearMotionPresentation(panel);
+      if (!motion.signal.aborted) {
+        panel.state = movement.state;
+        render(root);
+        emitChange(root, panel);
+      }
+    }
+  }
+}
+
+function reducedMotion(): boolean {
+  return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
+
+function animateWallRemoval(
+  cells: HTMLButtonElement[],
+  signal: AbortSignal,
+): Promise<boolean> {
+  const timing: KeyframeAnimationOptions = {
+    duration: 590,
+    easing: 'ease-out',
+    fill: 'forwards',
+  };
+  const animations = cells.flatMap((cell) => {
+    const fill = cell.querySelector<HTMLElement>('[data-wall-fill]');
+    if (!fill) return [];
+    return [fill.animate([{ opacity: 1 }, { opacity: 0 }], timing)];
+  });
+  return waitForAnimations(animations, signal);
+}
+
+async function waitForAnimations(
+  animations: Animation[],
+  signal: AbortSignal,
+): Promise<boolean> {
+  const cancel = (): void =>
+    animations.forEach((animation) => animation.cancel());
+  if (signal.aborted) {
+    cancel();
+    return false;
+  }
+  signal.addEventListener('abort', cancel, { once: true });
+  try {
+    await Promise.all(
+      animations.map((animation) => animation.finished.catch(() => undefined)),
+    );
+    return !signal.aborted;
+  } finally {
+    signal.removeEventListener('abort', cancel);
+    cancel();
+  }
+}
+
+function clearMotionPresentation(panel: Panel): void {
+  panel.element.removeAttribute('data-light-maze-transitioning');
+  panel.board.removeAttribute('aria-busy');
+  for (const cell of panel.element.querySelectorAll('[data-wall-removing]'))
+    cell.removeAttribute('data-wall-removing');
+  for (const piece of panel.element.querySelectorAll('[data-light-maze-piece]'))
+    piece.removeAttribute('aria-disabled');
+}
+
+function cancelMotion(instance: Instance): void {
+  instance.motion?.abort();
+  instance.motion = null;
+  for (const panel of instance.panels) clearMotionPresentation(panel);
+}
+
+function render(root: HTMLElement): void {
+  const instance = instances.get(root);
+  if (!instance) return;
+  const panel = active(instance);
+  clearPreviews(panel);
+  const mechanism = evaluateLightMazeMechanism(panel.model, panel.state);
+  const lit = new Set(
+    mechanism.illuminatedCells.map((p) => `${p.row}:${p.column}`),
+  );
+  for (const cell of panel.element.querySelectorAll<HTMLButtonElement>(
+    '[data-light-maze-cell]',
+  )) {
+    const display = presentLightMazeCell(panel.model, mechanism, panel.labels, {
+      row: Number(cell.dataset.cellRow),
+      column: Number(cell.dataset.cellColumn),
+    });
+    cell.disabled = display.disabled;
+    cell.toggleAttribute('data-puzzle-cell-disabled', cell.disabled);
+    cell.toggleAttribute(
+      'data-light-maze-activator-consumed',
+      display.consumed,
+    );
+    cell.toggleAttribute('data-light-maze-lit', display.lit);
+    cell.toggleAttribute('data-light-maze-wall-released', display.releasedWall);
+    cell.dataset.cellLabel = display.label;
+    cell.setAttribute('aria-label', display.label);
+    if (display.target)
+      setPuzzleGridCellState(
+        cell,
+        isLightMazePuzzleComplete(panel.model, panel.state) ? 'valid' : null,
+      );
+  }
+  for (const piece of ['walker', 'light'] as const) {
+    const element = panel.element.querySelector<HTMLElement>(
+      `[data-light-maze-piece="${piece}"]`,
+    )!;
+    const position = panel.state[piece];
+    element.style.setProperty('--piece-row', String(position.row + 1));
+    element.style.setProperty('--piece-column', String(position.column + 1));
+    element.setAttribute(
+      'aria-label',
+      `${panel.labels[piece]} — ${lit.has(`${position.row}:${position.column}`) ? panel.labels.litCell : panel.labels.darkCell}`,
+    );
+  }
+  renderSelection(root);
+}
+
+function renderSelection(root: HTMLElement): void {
+  const instance = instances.get(root);
+  if (!instance) return;
+  const panel = active(instance);
+  clearPreviews(panel);
+  for (const piece of panel.element.querySelectorAll<HTMLElement>(
+    '[data-light-maze-piece]',
+  )) {
+    const selected =
+      !instance.motion && piece.dataset.lightMazePiece === instance.selected;
+    piece.toggleAttribute('data-piece-selected', selected);
+    piece.setAttribute('aria-pressed', String(selected));
+    if (instance.motion) piece.setAttribute('aria-disabled', 'true');
+    else piece.removeAttribute('aria-disabled');
+  }
+  if (
+    instance.motion ||
+    !instance.selected ||
+    panel.element.dataset.puzzleStatus === 'valid'
+  )
+    return;
+  for (const movement of getLightMazeMoves(panel.model, panel.state)) {
+    if (movement.piece !== instance.selected) continue;
+    const destination = findCell(panel, movement.to);
+    if (!destination) continue;
+    renderPathStream(panel.board, movement);
+    destination.tabIndex = 0;
+    destination.setAttribute('data-light-maze-destination', '');
+    destination.setAttribute('data-puzzle-cell-interactive', '');
+    destination.dataset.destinationPiece = movement.piece;
+    destination.dataset.destinationDirection = movement.direction;
+    const label = panel.labels.moveTemplate
+      .replaceAll('{piece}', panel.labels[movement.piece])
+      .replaceAll('{direction}', panel.labels.directions[movement.direction]);
+    destination.setAttribute(
+      'aria-label',
+      `${label} — ${destination.dataset.cellLabel}`,
+    );
+  }
+}
+
+function clearPreviews(panel: Panel): void {
+  for (const stream of panel.element.querySelectorAll(
+    '[data-puzzle-path-stream]',
+  ))
+    stream.remove();
+  for (const cell of panel.element.querySelectorAll<HTMLButtonElement>(
+    '[data-light-maze-destination]',
+  )) {
+    cell.tabIndex = -1;
+    for (const attribute of [
+      'data-light-maze-destination',
+      'data-puzzle-cell-interactive',
+      'data-destination-piece',
+      'data-destination-direction',
+    ])
+      cell.removeAttribute(attribute);
+    cell.setAttribute('aria-label', cell.dataset.cellLabel ?? '');
+  }
+}
+
+function findCell(
+  panel: Panel,
+  position: LightMazePosition,
+): HTMLButtonElement | null {
+  return panel.element.querySelector(
+    `[data-light-maze-cell][data-cell-row="${position.row}"][data-cell-column="${position.column}"]`,
+  );
+}
+
+function cancelDrag(instance: Instance): void {
+  const drag = instance.drag;
+  if (!drag) return;
+  instance.drag = null;
+  cancelDragFrame(drag);
+  drag.element.removeAttribute('data-piece-dragging');
+  drag.element.style.removeProperty('--piece-drag-x');
+  drag.element.style.removeProperty('--piece-drag-y');
+  if (drag.element.hasPointerCapture(drag.pointerId))
+    drag.element.releasePointerCapture(drag.pointerId);
+}
+
+function finishDrag(
+  root: HTMLElement,
+  event: PointerEvent,
+  commit: boolean,
+): void {
+  const instance = instances.get(root);
+  const drag = instance?.drag;
+  if (!instance || !drag || event.pointerId !== drag.pointerId) return;
+  const dx = event.clientX - drag.startX,
+    dy = event.clientY - drag.startY;
+  const destination =
+    commit && drag.moved && hasLeftOriginCell(drag, dx, dy)
+      ? findDirectionalDropDestination(drag, dx, dy)
+      : null;
+  cancelDrag(instance);
+  if (!drag.moved) return;
+  if (commit) {
+    clearClickTimer(instance);
+    instance.ignoreClick = true;
+    instance.clickTimer = window.setTimeout(() => {
+      instance.ignoreClick = false;
+      instance.clickTimer = null;
+    }, 0);
+    if (destination) {
+      void move(
+        root,
+        drag.pieceId as LightMazePiece,
+        destination.dataset.destinationDirection as LightMazeDirection,
+        false,
+      );
+      return;
+    }
+  }
+  selectPiece(root, null);
+}
+
+function clearClickTimer(instance: Instance): void {
+  if (instance.clickTimer !== null) window.clearTimeout(instance.clickTimer);
+  instance.clickTimer = null;
+}
+
+function emitChange(root: HTMLElement, panel: Panel): void {
+  const detail: LightMazePuzzleChangeDetail = {
+    kind: 'light-maze',
+    puzzleId: panel.model.id,
+    state: {
+      walker: { ...panel.state.walker },
+      light: { ...panel.state.light },
+      activated: [...panel.state.activated],
+    },
+  };
+  root.dispatchEvent(
+    new CustomEvent('puzzle:change', { bubbles: true, detail }),
+  );
+}