@astronox/core 0.5.5 → 0.5.6

package/src/patterns/SlidingPuzzle/slidingPuzzleController.ts

@@ -0,0 +1,703 @@
+import {
+  setPuzzleGridCellState,
+  setPuzzleGridState,
+} from '../PuzzleGrid/state';
+import { initPuzzleSelectionDismissal } from '../PuzzleGrid/selectionDismissal';
+import {
+  animatePieceMovement,
+  cancelDragFrame,
+  findDirectionalDropDestination,
+  hasLeftOriginCell,
+  renderPathStream,
+  scheduleDragFrame,
+  type PuzzleDrag,
+} from '../PuzzleGrid/movement';
+import type {
+  SlidingDirection,
+  SlidingMovement,
+  SlidingPosition,
+  SlidingPuzzleChangeDetail,
+  SlidingPuzzleLabels,
+  SlidingPuzzleModel,
+  SlidingPuzzleStatus,
+  SlidingPuzzleState,
+} from './contracts';
+import {
+  getSlidingMoves,
+  isSlidingPuzzleComplete,
+  simulateSlidingMove,
+  createSlidingPuzzleState,
+} from './simulation';
+
+type Instance = {
+  activeIndex: number;
+  state: SlidingPuzzleState;
+  selected: boolean;
+  drag: PuzzleDrag | null;
+  terrainFrame: number | null;
+  motion: AbortController | null;
+  ignoreNextClick: boolean;
+  abort: AbortController;
+  dismiss: () => void;
+};
+
+const instances = new WeakMap<HTMLElement, Instance>();
+const directions: Readonly<Partial<Record<string, SlidingDirection>>> = {
+  ArrowUp: 'north',
+  ArrowRight: 'east',
+  ArrowDown: 'south',
+  ArrowLeft: 'west',
+};
+
+export function initSlidingPuzzle(root: HTMLElement): void {
+  if (instances.has(root)) return;
+  const first = panels(root)[0];
+  if (!first) return;
+  const instance: Instance = {
+    activeIndex: 0,
+    state: createSlidingPuzzleState(model(first)),
+    selected: false,
+    drag: null,
+    terrainFrame: null,
+    motion: null,
+    ignoreNextClick: false,
+    abort: new AbortController(),
+    dismiss: () => {},
+  };
+  instances.set(root, instance);
+  const options = { signal: instance.abort.signal };
+  instance.dismiss = initPuzzleSelectionDismissal(root, {
+    dismiss: () => select(root, false),
+    isSelectionTarget: (target) => {
+      const panel = activePanel(root);
+      return Boolean(
+        panel &&
+        panel.dataset.puzzleStatus !== 'valid' &&
+        panel.contains(target) &&
+        target.closest('[data-sliding-piece], [data-sliding-destination]'),
+      );
+    },
+  });
+
+  root.addEventListener(
+    'click',
+    (event) => {
+      if (!(event.target instanceof Element)) return;
+      if (instance.ignoreNextClick) {
+        instance.ignoreNextClick = false;
+        return;
+      }
+      if (event.target.closest('[data-sliding-piece]')) {
+        select(root, !instance.selected);
+        return;
+      }
+      const destination = event.target.closest<HTMLButtonElement>(
+        '[data-sliding-destination]',
+      );
+      const direction = destination?.dataset.destinationDirection as
+        SlidingDirection | undefined;
+      if (destination && !destination.disabled && direction)
+        void move(root, direction);
+      else select(root, false);
+    },
+    options,
+  );
+
+  root.addEventListener(
+    'keydown',
+    (event) => {
+      if (event.altKey || event.ctrlKey || event.metaKey) return;
+      if (event.key === 'Escape') {
+        cancelDrag(instance);
+        select(root, false);
+        return;
+      }
+      const direction = directions[event.key];
+      if (!direction || !(event.target instanceof Element)) return;
+      if (!instance.selected && !event.target.closest('[data-sliding-piece]'))
+        return;
+      event.preventDefault();
+      void move(root, direction);
+    },
+    options,
+  );
+
+  root.addEventListener(
+    'dragstart',
+    (event) => event.preventDefault(),
+    options,
+  );
+  root.addEventListener(
+    'pointerdown',
+    (event) => {
+      if (
+        !event.isPrimary ||
+        event.button !== 0 ||
+        !(event.target instanceof Element)
+      )
+        return;
+      const panel = activePanel(root);
+      const piece = event.target.closest<HTMLButtonElement>(
+        '[data-sliding-piece]',
+      );
+      if (
+        !panel ||
+        !piece ||
+        panel.dataset.puzzleStatus === 'valid' ||
+        instance.motion ||
+        isMoving(piece)
+      )
+        return;
+      const origin = cell(panel, instance.state.position);
+      if (!origin) return;
+      const bounds = piece.getBoundingClientRect();
+      piece.setPointerCapture(event.pointerId);
+      instance.drag = {
+        pointerId: event.pointerId,
+        pieceId: 'piece',
+        element: piece,
+        startX: event.clientX,
+        startY: event.clientY,
+        currentX: event.clientX,
+        currentY: event.clientY,
+        frameId: null,
+        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) {
+        drag.moved =
+          Math.hypot(
+            event.clientX - drag.startX,
+            event.clientY - drag.startY,
+          ) >= 12;
+        if (!drag.moved) return;
+        drag.element.setAttribute('data-piece-dragging', '');
+        select(root, true);
+      }
+      event.preventDefault();
+      drag.destinations ??= [
+        ...(activePanel(root)?.querySelectorAll<HTMLButtonElement>(
+          '[data-sliding-destination]',
+        ) ?? []),
+      ];
+      drag.currentX = event.clientX;
+      drag.currentY = event.clientY;
+      scheduleDragFrame(drag, () => instance.drag === drag);
+    },
+    options,
+  );
+
+  const finish = (event: PointerEvent, commit: boolean): void => {
+    const drag = instance.drag;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    const dx = event.clientX - drag.startX;
+    const dy = event.clientY - drag.startY;
+    const destination =
+      commit && drag.moved && hasLeftOriginCell(drag, dx, dy)
+        ? findDirectionalDropDestination(drag, dx, dy)
+        : null;
+    cancelDrag(instance);
+    if (commit && drag.moved) {
+      instance.ignoreNextClick = true;
+      window.setTimeout(() => {
+        instance.ignoreNextClick = false;
+      }, 0);
+      const direction = destination?.dataset.destinationDirection as
+        SlidingDirection | undefined;
+      if (direction) void move(root, direction, false);
+    }
+    if (drag.moved) select(root, false);
+  };
+  root.addEventListener('pointerup', (event) => finish(event, true), options);
+  root.addEventListener(
+    'pointercancel',
+    (event) => finish(event, false),
+    options,
+  );
+  root.addEventListener(
+    'lostpointercapture',
+    () => cancelDrag(instance),
+    options,
+  );
+}
+
+export function destroySlidingPuzzle(root: HTMLElement): void {
+  const instance = instances.get(root);
+  if (!instance) return;
+  cancelDrag(instance);
+  cancelMotion(instance);
+  cancelTerrainFrame(instance);
+  instance.dismiss();
+  instance.abort.abort();
+  instances.delete(root);
+}
+
+export function selectSlidingPuzzle(root: HTMLElement, index: number): void {
+  initSlidingPuzzle(root);
+  const instance = instances.get(root);
+  if (!instance) return;
+  const entries = panels(root);
+  instance.activeIndex = Math.max(0, Math.min(index, entries.length - 1));
+  entries.forEach((panel, i) => {
+    panel.hidden = i !== instance.activeIndex;
+  });
+  resetSlidingPuzzle(root);
+}
+
+export function resetSlidingPuzzle(root: HTMLElement): void {
+  initSlidingPuzzle(root);
+  const panel = activePanel(root);
+  const instance = instances.get(root);
+  if (!panel || !instance) return;
+  cancelDrag(instance);
+  cancelMotion(instance);
+  cancelTerrainFrame(instance);
+  instance.selected = false;
+  instance.ignoreNextClick = false;
+  instance.state = createSlidingPuzzleState(model(panel));
+  setSlidingPuzzleStatus(root, panel.dataset.puzzleId ?? '', 'incomplete');
+  render(root);
+  previews(root);
+  emitChange(root);
+}
+
+export function setSlidingPuzzleStatus(
+  root: HTMLElement,
+  puzzleId: string,
+  status: SlidingPuzzleStatus,
+): void {
+  const panel = panels(root).find(
+    (entry) => entry.dataset.puzzleId === puzzleId,
+  );
+  if (!panel) return;
+  const previous = panel.dataset.puzzleStatus;
+  panel.dataset.puzzleStatus = status;
+  const board = panel.querySelector<HTMLElement>('[data-puzzle-grid]');
+  if (board) setPuzzleGridState(board, status === 'valid' ? 'valid' : null);
+  if (status === 'valid') {
+    const instance = instances.get(root);
+    if (instance && panel === activePanel(root)) instance.selected = false;
+    clearPreviews(panel);
+    const piece = panel.querySelector<HTMLButtonElement>(
+      '[data-sliding-piece]',
+    );
+    piece?.removeAttribute('data-piece-selected');
+    piece?.setAttribute('aria-pressed', 'false');
+  }
+  if (status === 'valid' && previous !== status)
+    root.dispatchEvent(
+      new CustomEvent('puzzle:complete', {
+        bubbles: true,
+        detail: { kind: 'sliding', puzzleId },
+      }),
+    );
+}
+
+function select(root: HTMLElement, selected: boolean): void {
+  const instance = instances.get(root);
+  const panel = activePanel(root);
+  if (
+    !instance ||
+    !panel ||
+    instance.motion ||
+    panel.dataset.puzzleStatus === 'valid'
+  )
+    return;
+  instance.selected = selected;
+  previews(root);
+}
+
+async function move(
+  root: HTMLElement,
+  direction: SlidingDirection,
+  retainSelection = true,
+): Promise<void> {
+  const instance = instances.get(root);
+  const panel = activePanel(root);
+  const piece = panel?.querySelector<HTMLButtonElement>('[data-sliding-piece]');
+  if (
+    !instance ||
+    !panel ||
+    !piece ||
+    instance.drag ||
+    instance.motion ||
+    isMoving(piece) ||
+    panel.dataset.puzzleStatus === 'valid'
+  )
+    return;
+  const puzzle = model(panel);
+  const movement = simulateSlidingMove(puzzle, instance.state, direction);
+  if (!movement) return;
+  const motion = new AbortController();
+  instance.motion = motion;
+  piece.setAttribute('aria-busy', 'true');
+  const clearBusy = (): void => piece.removeAttribute('aria-busy');
+  motion.signal.addEventListener('abort', clearBusy, { once: true });
+  cancelTerrainFrame(instance);
+  const previousState = instance.state;
+  renderTerrain(panel, previousState);
+  const bounds = piece.getBoundingClientRect();
+  instance.state = movement.state;
+  instance.selected =
+    retainSelection && !isSlidingPuzzleComplete(puzzle, movement.state);
+  render(root, false, movement.slideTo);
+  // Ordinary slides expose the next moves immediately, like the magnetic
+  // puzzle. A transfer keeps the current preview until the piece reappears,
+  // so outgoing paths do not disclose its hidden landing position early.
+  if (!movement.teleported || !instance.selected) previews(root);
+  try {
+    if (
+      !(await animateSlide(
+        panel,
+        piece,
+        instance,
+        movement,
+        previousState,
+        bounds,
+        motion.signal,
+      ))
+    )
+      return;
+    if (movement.teleported) {
+      if (!(await animateTransfer(piece, 'fall', motion.signal))) return;
+      render(root, false);
+      previews(root);
+      if (!(await animateTransfer(piece, 'arrive', motion.signal))) return;
+    }
+    if (motion.signal.aborted) return;
+    instance.motion = null;
+    render(root);
+    emitChange(root);
+  } finally {
+    motion.signal.removeEventListener('abort', clearBusy);
+    if (instance.motion === motion) instance.motion = null;
+    if (!motion.signal.aborted) clearBusy();
+  }
+}
+
+function animateSlide(
+  panel: HTMLElement,
+  piece: HTMLButtonElement,
+  instance: Instance,
+  movement: SlidingMovement,
+  previousState: SlidingPuzzleState,
+  bounds: DOMRect,
+  signal: AbortSignal,
+): Promise<boolean> {
+  const finalBounds = piece.getBoundingClientRect();
+  animatePieceMovement(piece, bounds);
+  // Follow the actual slide so each tile changes as the piece enters it,
+  // including the tile where it stops. No delayed collapse on departure.
+  const horizontal = movement.from.column !== movement.slideTo.column;
+  const start = horizontal ? bounds.left : bounds.top;
+  const travel = (horizontal ? finalBounds.left : finalBounds.top) - start;
+  const distance =
+    Math.abs(movement.slideTo.row - movement.from.row) +
+    Math.abs(movement.slideTo.column - movement.from.column);
+  let revealedCount = previousState.collapsedCells.length;
+  let revealedHoles = previousState.openHoles.length;
+  return new Promise((resolve) => {
+    const stop = (): void => {
+      cancelTerrainFrame(instance);
+      piece.getAnimations().forEach((animation) => animation.cancel());
+      signal.removeEventListener('abort', stop);
+      resolve(false);
+    };
+    signal.addEventListener('abort', stop, { once: true });
+    const revealTerrain = (): void => {
+      instance.terrainFrame = null;
+      if (signal.aborted) {
+        stop();
+        return;
+      }
+      const moving = isMoving(piece);
+      const currentBounds = piece.getBoundingClientRect();
+      const progress =
+        moving && travel !== 0
+          ? ((horizontal ? currentBounds.left : currentBounds.top) - start) /
+            travel
+          : 1;
+      const collapsedCells = movement.state.collapsedCells.filter(
+        (position) => {
+          if (
+            previousState.collapsedCells.some(
+              (previous) =>
+                previous.row === position.row &&
+                previous.column === position.column,
+            )
+          )
+            return true;
+          const steps =
+            Math.abs(position.row - movement.from.row) +
+            Math.abs(position.column - movement.from.column);
+          return progress >= (steps - 0.5) / distance;
+        },
+      );
+      const openHoles =
+        movement.teleported && progress >= (distance - 0.5) / distance
+          ? movement.state.openHoles
+          : previousState.openHoles;
+      if (
+        collapsedCells.length !== revealedCount ||
+        openHoles.length !== revealedHoles ||
+        !moving
+      ) {
+        renderTerrain(panel, {
+          position: movement.slideTo,
+          collapsedCells,
+          openHoles,
+        });
+        revealedCount = collapsedCells.length;
+        revealedHoles = openHoles.length;
+      }
+      if (moving)
+        instance.terrainFrame = window.requestAnimationFrame(revealTerrain);
+      else {
+        signal.removeEventListener('abort', stop);
+        resolve(true);
+      }
+    };
+    revealTerrain();
+  });
+}
+
+function animateTransfer(
+  piece: HTMLButtonElement,
+  phase: 'fall' | 'arrive',
+  signal: AbortSignal,
+): Promise<boolean> {
+  if (signal.aborted) return Promise.resolve(false);
+  if (window.matchMedia('(prefers-reduced-motion: reduce)').matches)
+    return Promise.resolve(true);
+  const hidden = { opacity: 0, transform: 'scale(0.15)' };
+  const visible = { opacity: 1, transform: 'scale(1)' };
+  const animation = piece.animate(
+    phase === 'fall' ? [visible, hidden] : [hidden, visible],
+    {
+      duration: 160,
+      easing: 'ease-out',
+      fill: 'forwards',
+    },
+  );
+  const cancel = (): void => animation.cancel();
+  signal.addEventListener('abort', cancel, { once: true });
+  return animation.finished
+    .then(
+      () => !signal.aborted,
+      () => false,
+    )
+    .finally(() => {
+      signal.removeEventListener('abort', cancel);
+      animation.cancel();
+    });
+}
+
+function render(
+  root: HTMLElement,
+  updateTerrain = true,
+  position?: SlidingPosition,
+): void {
+  const instance = instances.get(root);
+  const panel = activePanel(root);
+  const piece = panel?.querySelector<HTMLButtonElement>('[data-sliding-piece]');
+  if (!instance || !panel || !piece) return;
+  piece.getAnimations().forEach((animation) => animation.cancel());
+  piece.removeAttribute('data-piece-moved');
+  piece.style.setProperty(
+    '--piece-row',
+    String((position ?? instance.state.position).row + 1),
+  );
+  piece.style.setProperty(
+    '--piece-column',
+    String((position ?? instance.state.position).column + 1),
+  );
+  if (updateTerrain) renderTerrain(panel, instance.state);
+  const target = panel.querySelector<HTMLElement>('[data-sliding-target]');
+  if (target && updateTerrain)
+    setPuzzleGridCellState(
+      target,
+      isSlidingPuzzleComplete(model(panel), instance.state) ? 'valid' : null,
+    );
+}
+
+function renderTerrain(panel: HTMLElement, state: SlidingPuzzleState): void {
+  const labels = JSON.parse(
+    panel.dataset.slidingLabels ?? '{}',
+  ) as SlidingPuzzleLabels;
+  for (const fragile of model(panel).fragileCells) {
+    const element = cell(panel, fragile);
+    if (!element) continue;
+    const collapsed = state.collapsedCells.some(
+      (position) =>
+        position.row === fragile.row && position.column === fragile.column,
+    );
+    element.disabled = collapsed;
+    element.toggleAttribute('data-sliding-collapsed', collapsed);
+    element.toggleAttribute('data-puzzle-cell-disabled', collapsed);
+    element.dataset.cellLabel = collapsed
+      ? labels.collapsedCell
+      : labels.fragileCell;
+    if (!element.hasAttribute('data-sliding-destination'))
+      element.setAttribute('aria-label', element.dataset.cellLabel);
+  }
+  for (const hole of model(panel).holes) {
+    const element = cell(panel, hole.position);
+    if (!element) continue;
+    const open = state.openHoles.some(
+      (position) =>
+        position.row === hole.position.row &&
+        position.column === hole.position.column,
+    );
+    element.toggleAttribute('data-sliding-hole-open', open);
+    element.dataset.cellLabel = open ? labels.hole : labels.fragileCell;
+    if (!element.hasAttribute('data-sliding-destination'))
+      element.setAttribute('aria-label', element.dataset.cellLabel);
+  }
+}
+
+function previews(root: HTMLElement): void {
+  const instance = instances.get(root);
+  const panel = activePanel(root);
+  if (!instance || !panel) return;
+  clearPreviews(panel);
+  const piece = panel.querySelector<HTMLElement>('[data-sliding-piece]');
+  piece?.toggleAttribute('data-piece-selected', instance.selected);
+  piece?.setAttribute('aria-pressed', String(instance.selected));
+  if (!instance.selected) return;
+  const board = panel.querySelector<HTMLElement>('[data-puzzle-grid]');
+  const labels = JSON.parse(
+    panel.dataset.slidingLabels ?? '{}',
+  ) as SlidingPuzzleLabels;
+  // Before discovery, preview ordinary ice. Do not expose the hidden hole
+  // through path lengths, destination markers or accessible move labels.
+  const puzzle = model(panel);
+  const previewPuzzle = {
+    ...puzzle,
+    holes: puzzle.holes.filter((hole) =>
+      instance.state.openHoles.some(
+        (position) =>
+          position.row === hole.position.row &&
+          position.column === hole.position.column,
+      ),
+    ),
+  };
+  for (const movement of getSlidingMoves(previewPuzzle, instance.state)) {
+    if (board) renderPathStream(board, { ...movement, to: movement.slideTo });
+    const destination = cell(panel, movement.slideTo);
+    if (!destination) continue;
+    destination.removeAttribute('tabindex');
+    destination.setAttribute('data-sliding-destination', '');
+    destination.setAttribute('data-puzzle-cell-interactive', '');
+    destination.dataset.destinationPiece = 'piece';
+    destination.dataset.destinationDirection = movement.direction;
+    destination.setAttribute(
+      'aria-label',
+      labels.moveTemplate
+        .replaceAll('{piece}', labels.piece)
+        .replaceAll('{direction}', labels.directions[movement.direction]),
+    );
+  }
+}
+
+function clearPreviews(panel: HTMLElement): void {
+  for (const stream of panel.querySelectorAll('[data-puzzle-path-stream]'))
+    stream.remove();
+  for (const destination of panel.querySelectorAll<HTMLButtonElement>(
+    '[data-sliding-destination]',
+  )) {
+    destination.tabIndex = -1;
+    destination.removeAttribute('data-sliding-destination');
+    destination.removeAttribute('data-puzzle-cell-interactive');
+    delete destination.dataset.destinationDirection;
+    delete destination.dataset.destinationPiece;
+    if (destination.dataset.cellLabel)
+      destination.setAttribute('aria-label', destination.dataset.cellLabel);
+    else destination.removeAttribute('aria-label');
+  }
+}
+
+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 cancelTerrainFrame(instance: Instance): void {
+  if (instance.terrainFrame === null) return;
+  window.cancelAnimationFrame(instance.terrainFrame);
+  instance.terrainFrame = null;
+}
+
+function cancelMotion(instance: Instance): void {
+  instance.motion?.abort();
+  instance.motion = null;
+}
+
+function isMoving(piece: HTMLElement): boolean {
+  return piece
+    .getAnimations()
+    .some((animation) => animation.playState === 'running');
+}
+
+function emitChange(root: HTMLElement): void {
+  const panel = activePanel(root);
+  const instance = instances.get(root);
+  if (!panel || !instance) return;
+  root.dispatchEvent(
+    new CustomEvent<SlidingPuzzleChangeDetail>('puzzle:change', {
+      bubbles: true,
+      detail: {
+        kind: 'sliding',
+        puzzleId: model(panel).id,
+        state: {
+          position: { ...instance.state.position },
+          collapsedCells: instance.state.collapsedCells.map((position) => ({
+            ...position,
+          })),
+          openHoles: instance.state.openHoles.map((position) => ({
+            ...position,
+          })),
+        },
+      },
+    }),
+  );
+}
+
+function model(panel: HTMLElement): SlidingPuzzleModel {
+  return JSON.parse(panel.dataset.slidingModel ?? '{}') as SlidingPuzzleModel;
+}
+
+function panels(root: HTMLElement): HTMLElement[] {
+  return [...root.querySelectorAll<HTMLElement>(':scope > [data-puzzle-id]')];
+}
+
+function activePanel(root: HTMLElement): HTMLElement | undefined {
+  return panels(root)[instances.get(root)?.activeIndex ?? 0];
+}
+
+function cell(
+  panel: HTMLElement,
+  position: SlidingPosition,
+): HTMLButtonElement | null {
+  return panel.querySelector(
+    `[data-sliding-cell][data-cell-row="${position.row}"][data-cell-column="${position.column}"]`,
+  );
+}

package/src/patterns/index.ts

@@ -10,6 +10,10 @@ export { default as Modal } from './Modal/Modal.astro';
 export { default as ModalClose } from './Modal/ModalClose.astro';
 export { default as ModalOpen } from './Modal/ModalOpen.astro';
 export { default as PuzzleGrid } from './PuzzleGrid/PuzzleGrid.astro';
+export { default as SlidingPuzzle } from './SlidingPuzzle/SlidingPuzzle.astro';
+export * from './SlidingPuzzle/contracts';
+export * from './SlidingPuzzle/simulation';
+export * from './SlidingPuzzle/slidingPuzzleController';
 export { default as SpriteProjectilePreview } from './SpriteProjectilePreview/SpriteProjectilePreview.astro';
 export { default as StageFlow } from './StageFlow/StageFlow.astro';
 export { default as Table } from './Table/Table.astro';