@astronox/core 0.5.5 → 0.5.7

package/src/patterns/SlidingPuzzle/SlidingPuzzle.astro

@@ -0,0 +1,185 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import Media from '../../primitives/media/Media/Media.astro';
+import PuzzleGrid from '../PuzzleGrid/PuzzleGrid.astro';
+import type {
+  SlidingPuzzleLabels,
+  SlidingPuzzleMedia,
+  SlidingPuzzleModel,
+} from './contracts';
+
+type Props = HTMLAttributes<'section'> & {
+  label: string;
+  labels: SlidingPuzzleLabels;
+  media: SlidingPuzzleMedia;
+  puzzles: readonly SlidingPuzzleModel[];
+};
+
+const {
+  class: className,
+  label,
+  labels,
+  media,
+  puzzles,
+  ...attrs
+}: Props = Astro.props;
+---
+
+<section
+  {...attrs}
+  class:list={['sliding-puzzle', className]}
+  aria-label={label}
+  data-sliding-puzzle
+>
+  {
+    puzzles.map((puzzle, index) => (
+      <div
+        class="sliding-puzzle__instance"
+        data-puzzle-id={puzzle.id}
+        data-puzzle-status="incomplete"
+        data-sliding-model={JSON.stringify(puzzle)}
+        data-sliding-labels={JSON.stringify(labels)}
+        hidden={index !== 0}
+        style={`--piece-selection-filter: url(#sliding-outline-${encodeURIComponent(puzzle.id)}); --piece-hover-filter: url(#sliding-hover-${encodeURIComponent(puzzle.id)});`}
+      >
+        <svg
+          class="sliding-puzzle__filters"
+          aria-hidden="true"
+          focusable="false"
+        >
+          <defs>
+            <filter
+              id={`sliding-hover-${encodeURIComponent(puzzle.id)}`}
+              color-interpolation-filters="sRGB"
+            >
+              <feFlood
+                class="sliding-puzzle__hover-color"
+                flood-opacity="0.1"
+              />
+              <feComposite operator="in" in2="SourceAlpha" />
+              <feMerge>
+                <feMergeNode in="SourceGraphic" />
+                <feMergeNode />
+              </feMerge>
+            </filter>
+            <filter
+              id={`sliding-outline-${encodeURIComponent(puzzle.id)}`}
+              x="-25%"
+              y="-25%"
+              width="150%"
+              height="150%"
+              color-interpolation-filters="sRGB"
+            >
+              {/* Soften the square dilation at silhouette corners. */}
+              <feMorphology in="SourceAlpha" operator="dilate" radius="2" />
+              <feGaussianBlur stdDeviation="0.5" result="outline" />
+              <feFlood class="sliding-puzzle__ring-color" />
+              <feComposite operator="in" in2="outline" />
+              <feMerge>
+                <feMergeNode />
+                <feMergeNode in="SourceGraphic" />
+              </feMerge>
+            </filter>
+          </defs>
+        </svg>
+        <PuzzleGrid
+          class="sliding-puzzle__board"
+          label={puzzle.label}
+          rows={puzzle.rows}
+          columns={puzzle.columns}
+        >
+          {Array.from(
+            { length: puzzle.rows * puzzle.columns },
+            (_, cellIndex) => {
+              const row = Math.floor(cellIndex / puzzle.columns);
+              const column = cellIndex % puzzle.columns;
+              const blocked = puzzle.blockedCells.some(
+                (cell) => cell.row === row && cell.column === column,
+              );
+              const target =
+                puzzle.target.row === row && puzzle.target.column === column;
+              const hole = puzzle.holes.find(
+                ({ position }) =>
+                  position.row === row && position.column === column,
+              );
+              const exit = puzzle.holes.find(
+                ({ exit }) => exit.row === row && exit.column === column,
+              );
+              const transferTone = (hole ?? exit)?.tone ?? 'neutral';
+              const fragile =
+                Boolean(hole) ||
+                puzzle.fragileCells.some(
+                  (cell) => cell.row === row && cell.column === column,
+                );
+              const cellLabel = blocked
+                ? labels.blockedCell
+                : target
+                  ? labels.target
+                  : fragile
+                    ? labels.fragileCell
+                    : '';
+              return (
+                <button
+                  class="puzzle-grid__cell sliding-puzzle__cell"
+                  type="button"
+                  disabled={blocked}
+                  tabindex={-1}
+                  aria-label={cellLabel || undefined}
+                  data-puzzle-cell
+                  data-puzzle-cell-disabled={blocked ? '' : undefined}
+                  data-sliding-cell
+                  data-sliding-target={target ? '' : undefined}
+                  data-sliding-fragile={fragile ? '' : undefined}
+                  data-sliding-hole={hole ? '' : undefined}
+                  data-cell-row={row}
+                  data-cell-column={column}
+                  data-cell-label={cellLabel}
+                  style={`--cell-row: ${row + 1}; --cell-column: ${column + 1}; --sliding-transfer-color: var(--nox-source-tone-${transferTone});`}
+                >
+                  {fragile && (
+                    <svg
+                      class="sliding-puzzle__crack"
+                      viewBox="0 0 100 100"
+                      aria-hidden="true"
+                      focusable="false"
+                    >
+                      <path d="M44 0 54 25 40 46 60 65 48 100M40 46 18 36 0 44M60 65 80 49 100 55M54 25 75 14" />
+                    </svg>
+                  )}
+                  {hole && (
+                    <span class="sliding-puzzle__hole" aria-hidden="true" />
+                  )}
+                  {target && (
+                    <span class="sliding-puzzle__target" aria-hidden="true">
+                      <Media media={media.target} size="fill" />
+                    </span>
+                  )}
+                </button>
+              );
+            },
+          )}
+          <button
+            class="sliding-puzzle__piece"
+            type="button"
+            aria-label={labels.piece}
+            aria-pressed="false"
+            data-sliding-piece
+            style={`--piece-row: ${puzzle.start.row + 1}; --piece-column: ${puzzle.start.column + 1};`}
+          >
+            <span class="sliding-puzzle__piece-media" aria-hidden="true">
+              <Media media={media.piece} size="fill" />
+            </span>
+          </button>
+        </PuzzleGrid>
+      </div>
+    ))
+  }
+</section>
+
+<script>
+  import { initSlidingPuzzle } from './slidingPuzzleController';
+
+  for (const root of document.querySelectorAll('[data-sliding-puzzle]')) {
+    if (root instanceof HTMLElement) initSlidingPuzzle(root);
+  }
+</script>

package/src/patterns/SlidingPuzzle/SlidingPuzzle.css

@@ -0,0 +1,186 @@
+.sliding-puzzle,
+.sliding-puzzle__instance {
+  display: grid;
+  min-inline-size: 0;
+}
+
+.sliding-puzzle__instance[hidden] {
+  display: none;
+}
+
+.sliding-puzzle__filters {
+  position: absolute;
+  inline-size: 0;
+  block-size: 0;
+  pointer-events: none;
+}
+
+.sliding-puzzle__ring-color {
+  flood-color: var(--nox-source-tone-info);
+}
+
+.sliding-puzzle__hover-color {
+  flood-color: var(--nox-tone-color);
+}
+
+.sliding-puzzle__board {
+  isolation: isolate;
+  touch-action: manipulation;
+}
+
+.sliding-puzzle__cell {
+  appearance: none;
+}
+
+.sliding-puzzle__cell[data-sliding-exit-discovered] {
+  --puzzle-cell-base-border: var(--sliding-transfer-color);
+
+  border-style: dashed;
+}
+
+.sliding-puzzle__cell[data-sliding-target] {
+  --puzzle-cell-base-border: var(--nox-source-tone-success);
+
+  border-style: dashed;
+}
+
+.sliding-puzzle__cell[data-sliding-fragile]:not([data-sliding-collapsed]):not(
+    [data-sliding-hole-open]
+  ) {
+  --puzzle-cell-base-border: var(--nox-source-tone-neutral);
+
+  border-style: dashed;
+}
+
+.sliding-puzzle__crack {
+  position: absolute;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  fill: none;
+  stroke: var(--nox-source-tone-neutral);
+  stroke-width: 3;
+  pointer-events: none;
+}
+
+.sliding-puzzle__cell[data-sliding-collapsed] .sliding-puzzle__crack {
+  display: none;
+}
+
+.sliding-puzzle__hole {
+  display: none;
+  inline-size: 72%;
+  aspect-ratio: 1;
+  border: calc(var(--nox-border-width) * 2) solid var(--sliding-transfer-color);
+  border-radius: var(--nox-radius-pill);
+  background: color-mix(
+    in srgb,
+    var(--nox-source-tone-neutral) 20%,
+    var(--nox-mix-dark)
+  );
+  pointer-events: none;
+}
+
+.sliding-puzzle__cell[data-sliding-hole-open] .sliding-puzzle__hole {
+  display: block;
+}
+
+.sliding-puzzle__cell[data-sliding-hole-open] .sliding-puzzle__crack {
+  display: none;
+}
+
+.sliding-puzzle__cell[data-sliding-destination] {
+  --puzzle-cell-ring-width: var(--nox-focus-ring-width);
+  --puzzle-cell-ring-color: var(--nox-source-tone-info);
+
+  z-index: 3;
+  overflow: visible;
+}
+
+.sliding-puzzle__target {
+  display: grid;
+  inline-size: 90%;
+  aspect-ratio: 1;
+  pointer-events: none;
+}
+
+.sliding-puzzle__piece {
+  position: relative;
+  z-index: 4;
+  display: grid;
+  grid-row: var(--piece-row);
+  grid-column: var(--piece-column);
+  min-inline-size: 0;
+  min-block-size: 0;
+  margin: var(--nox-space-1);
+  padding: 0;
+  place-items: center;
+  border: 0;
+  border-radius: var(--nox-radius-sm);
+  background: transparent;
+  cursor: grab;
+  touch-action: none;
+  user-select: none;
+}
+
+.sliding-puzzle__piece-media {
+  display: grid;
+  inline-size: 80%;
+  aspect-ratio: 1;
+  pointer-events: none;
+}
+
+.sliding-puzzle__piece:focus-visible {
+  outline: none;
+}
+
+.sliding-puzzle__piece:is([data-piece-selected], :focus-visible):not(
+    [data-piece-transferring]
+  )
+  .sliding-puzzle__piece-media {
+  filter: var(--piece-selection-filter);
+}
+
+@media (hover: hover) {
+  .sliding-puzzle__piece:hover .sliding-puzzle__piece-media {
+    filter: var(--piece-hover-filter);
+  }
+
+  .sliding-puzzle__piece:is([data-piece-selected], :focus-visible):hover:not(
+      [data-piece-transferring]
+    )
+    .sliding-puzzle__piece-media {
+    filter: var(--piece-hover-filter) var(--piece-selection-filter);
+  }
+}
+
+.sliding-puzzle__piece[data-piece-dragging] {
+  z-index: 6;
+  cursor: grabbing;
+}
+
+.sliding-puzzle__piece[data-piece-dragging] .sliding-puzzle__piece-media {
+  transform: translate3d(var(--piece-drag-x, 0px), var(--piece-drag-y, 0px), 0)
+    scale(1.04);
+  will-change: transform;
+}
+
+.sliding-puzzle__instance[data-puzzle-status='valid'] .sliding-puzzle__piece {
+  cursor: default;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .sliding-puzzle__piece[data-piece-moved] {
+    animation: sliding-puzzle-move 260ms var(--nox-motion-easing-standard);
+  }
+}
+
+@keyframes sliding-puzzle-move {
+  from {
+    transform: translate3d(
+      var(--piece-move-inline-distance),
+      var(--piece-move-block-distance),
+      0
+    );
+  }
+}

package/src/patterns/SlidingPuzzle/contracts.ts

@@ -0,0 +1,62 @@
+import type { DisplayMedia } from '../../display/contracts';
+import type { Tone } from '../../theme/contracts';
+
+export type SlidingDirection = 'north' | 'east' | 'south' | 'west';
+export type SlidingPosition = { row: number; column: number };
+export type SlidingPuzzleStatus = 'incomplete' | 'valid';
+
+export type SlidingPuzzleModel = {
+  id: string;
+  label: string;
+  rows: number;
+  columns: number;
+  start: SlidingPosition;
+  target: SlidingPosition;
+  blockedCells: readonly SlidingPosition[];
+  fragileCells: readonly SlidingPosition[];
+  // Entry direction selects the adjacent landing cell around each exit.
+  // A transfer ends the move; its landing never triggers another tile.
+  holes: readonly {
+    position: SlidingPosition;
+    exit: SlidingPosition;
+    tone?: Tone;
+  }[];
+};
+
+export type SlidingPuzzleState = {
+  position: SlidingPosition;
+  collapsedCells: readonly SlidingPosition[];
+  // Source tile positions, tracked independently and cleared on reset.
+  openHoles: readonly SlidingPosition[];
+};
+
+export type SlidingPuzzleLabels = {
+  piece: string;
+  target: string;
+  blockedCell: string;
+  fragileCell: string;
+  collapsedCell: string;
+  hole: string;
+  directions: Readonly<Record<SlidingDirection, string>>;
+  moveTemplate: string;
+};
+
+export type SlidingPuzzleMedia = {
+  piece: DisplayMedia;
+  target: DisplayMedia;
+};
+
+export type SlidingMovement = {
+  direction: SlidingDirection;
+  from: SlidingPosition;
+  slideTo: SlidingPosition;
+  to: SlidingPosition;
+  teleported: boolean;
+  state: SlidingPuzzleState;
+};
+
+export type SlidingPuzzleChangeDetail = {
+  kind: 'sliding';
+  puzzleId: string;
+  state: SlidingPuzzleState;
+};

package/src/patterns/SlidingPuzzle/simulation.ts

@@ -0,0 +1,106 @@
+import type {
+  SlidingDirection,
+  SlidingMovement,
+  SlidingPuzzleModel,
+  SlidingPuzzleState,
+} from './contracts';
+
+const deltas = {
+  north: [-1, 0],
+  east: [0, 1],
+  south: [1, 0],
+  west: [0, -1],
+} as const;
+
+export function createSlidingPuzzleState(
+  puzzle: SlidingPuzzleModel,
+): SlidingPuzzleState {
+  return { position: { ...puzzle.start }, collapsedCells: [], openHoles: [] };
+}
+
+export function isSlidingPuzzleComplete(
+  puzzle: SlidingPuzzleModel,
+  state: SlidingPuzzleState,
+): boolean {
+  return (
+    state.position.row === puzzle.target.row &&
+    state.position.column === puzzle.target.column
+  );
+}
+
+export function simulateSlidingMove(
+  puzzle: SlidingPuzzleModel,
+  state: SlidingPuzzleState,
+  direction: SlidingDirection,
+): SlidingMovement | null {
+  if (isSlidingPuzzleComplete(puzzle, state)) return null;
+  const [dr, dc] = deltas[direction];
+  let to = { ...state.position };
+  const collapsedCells = [...state.collapsedCells];
+  while (true) {
+    const next = { row: to.row + dr, column: to.column + dc };
+    if (
+      next.row < 0 ||
+      next.row >= puzzle.rows ||
+      next.column < 0 ||
+      next.column >= puzzle.columns ||
+      [...puzzle.blockedCells, ...collapsedCells].some(
+        (cell) => cell.row === next.row && cell.column === next.column,
+      )
+    )
+      break;
+    // Entering a fragile tile collapses it, including the stopping tile.
+    // A piece resting on a collapsed tile may leave it, but cannot return.
+    to = next;
+    const hole = puzzle.holes.find(
+      ({ position }) =>
+        position.row === to.row && position.column === to.column,
+    );
+    if (hole) {
+      const arrival = {
+        row: hole.exit.row + dr,
+        column: hole.exit.column + dc,
+      };
+      const openHoles = state.openHoles.some(
+        (position) => position.row === to.row && position.column === to.column,
+      )
+        ? [...state.openHoles]
+        : [...state.openHoles, { ...to }];
+      return {
+        direction,
+        from: { ...state.position },
+        slideTo: to,
+        to: arrival,
+        teleported: true,
+        state: { position: arrival, collapsedCells, openHoles },
+      };
+    }
+    if (
+      puzzle.fragileCells.some(
+        (cell) => cell.row === to.row && cell.column === to.column,
+      )
+    ) {
+      collapsedCells.push({ ...to });
+    }
+  }
+  if (to.row === state.position.row && to.column === state.position.column)
+    return null;
+  return {
+    direction,
+    from: { ...state.position },
+    slideTo: to,
+    to,
+    teleported: false,
+    state: { position: to, collapsedCells, openHoles: [...state.openHoles] },
+  };
+}
+
+export function getSlidingMoves(
+  puzzle: SlidingPuzzleModel,
+  state: SlidingPuzzleState,
+): SlidingMovement[] {
+  return (Object.keys(deltas) as SlidingDirection[]).flatMap((direction) => {
+    const movement = simulateSlidingMove(puzzle, state, direction);
+    return movement ? [movement] : [];
+  });
+}