@astronox/core 0.1.0

package/src/patterns/MagneticFieldPuzzle/simulation.ts

@@ -0,0 +1,244 @@
+import type {
+  MagneticFieldDirection,
+  MagneticFieldMove,
+  MagneticFieldMovement,
+  MagneticFieldPolarity,
+  MagneticFieldPosition,
+  MagneticFieldPuzzleModel,
+  MagneticFieldPuzzleState,
+  MagneticFieldSimulation,
+} from './contracts';
+
+const directions = [
+  'north',
+  'east',
+  'south',
+  'west',
+] as const satisfies readonly MagneticFieldDirection[];
+
+const directionDelta = {
+  north: [-1, 0],
+  east: [0, 1],
+  south: [1, 0],
+  west: [0, -1],
+} as const satisfies Readonly<
+  Record<MagneticFieldDirection, readonly [number, number]>
+>;
+
+type MagneticFieldMovementPuzzle = Pick<
+  MagneticFieldPuzzleModel,
+  'rows' | 'columns' | 'pieces' | 'blockedCells' | 'inverters'
+>;
+
+const geometryByPuzzle = new WeakMap<
+  object,
+  {
+    blockedPositions: ReadonlySet<string>;
+    inverterIds: ReadonlyMap<string, string>;
+  }
+>();
+
+export function createMagneticFieldInitialState(
+  puzzle: Pick<MagneticFieldPuzzleModel, 'pieces'>,
+): MagneticFieldPuzzleState {
+  return Object.fromEntries(
+    puzzle.pieces.map((piece) => [
+      piece.id,
+      {
+        row: piece.row,
+        column: piece.column,
+        polarity: piece.polarity,
+      },
+    ]),
+  );
+}
+
+export function getMagneticFieldMoves(
+  puzzle: MagneticFieldMovementPuzzle,
+  state: MagneticFieldPuzzleState,
+  pieceId: string,
+): readonly MagneticFieldMovement[] {
+  const piece = puzzle.pieces.find((candidate) => candidate.id === pieceId);
+  const current = piece ? (state[piece.id] ?? piece) : undefined;
+  if (!piece || !current) return [];
+
+  const { blockedPositions, inverterIds } = getPuzzleGeometry(puzzle);
+  const occupiedPositions = new Set(
+    puzzle.pieces
+      .filter((candidate) => candidate.id !== pieceId)
+      .map((candidate) => positionKey(state[candidate.id] ?? candidate)),
+  );
+  return directions.flatMap((direction) => {
+    const movement = createMovement({
+      puzzle,
+      pieceId,
+      direction,
+      current,
+      blockedPositions,
+      occupiedPositions,
+      inverterIds,
+    });
+    return positionsMatch(movement.from, movement.to) ? [] : [movement];
+  });
+}
+
+export function simulateMagneticFieldMove(
+  puzzle: MagneticFieldMovementPuzzle,
+  state: MagneticFieldPuzzleState,
+  move: MagneticFieldMove,
+): MagneticFieldSimulation {
+  const movement = getMagneticFieldMoves(puzzle, state, move.pieceId).find(
+    ({ direction }) => direction === move.direction,
+  );
+  if (!movement) return { state, movement: null };
+
+  return applyMagneticFieldMovement(puzzle, state, movement);
+}
+
+export function applyMagneticFieldMovement(
+  puzzle: Pick<MagneticFieldPuzzleModel, 'pieces'>,
+  state: MagneticFieldPuzzleState,
+  movement: MagneticFieldMovement,
+): MagneticFieldSimulation {
+  const current = state[movement.pieceId];
+  const initialPiece = puzzle.pieces.find(
+    (candidate) => candidate.id === movement.pieceId,
+  );
+  const polarity = current?.polarity ?? initialPiece?.polarity;
+  if (!polarity) return { state, movement: null };
+
+  return {
+    state: {
+      ...state,
+      [movement.pieceId]: {
+        ...movement.to,
+        polarity:
+          movement.crossedInverterIds.length % 2 === 0
+            ? polarity
+            : oppositePolarity(polarity),
+      },
+    },
+    movement,
+  };
+}
+
+function getPuzzleGeometry(puzzle: MagneticFieldMovementPuzzle): {
+  blockedPositions: ReadonlySet<string>;
+  inverterIds: ReadonlyMap<string, string>;
+} {
+  const cached = geometryByPuzzle.get(puzzle);
+  if (cached) return cached;
+
+  const geometry = {
+    blockedPositions: new Set(
+      puzzle.blockedCells.map(({ row, column }) =>
+        positionKey({ row, column }),
+      ),
+    ),
+    inverterIds: new Map(
+      puzzle.inverters.map(({ id, row, column }) => [
+        positionKey({ row, column }),
+        id,
+      ]),
+    ),
+  };
+  geometryByPuzzle.set(puzzle, geometry);
+  return geometry;
+}
+
+export function isMagneticFieldPuzzleComplete(
+  puzzle: Pick<MagneticFieldPuzzleModel, 'pieces' | 'targets'>,
+  state: MagneticFieldPuzzleState,
+): boolean {
+  return puzzle.targets.every((target) => {
+    const piece = state[target.pieceId];
+    return (
+      piece !== undefined &&
+      piece.row === target.row &&
+      piece.column === target.column &&
+      piece.polarity === target.polarity
+    );
+  });
+}
+
+function createMovement({
+  puzzle,
+  pieceId,
+  direction,
+  current,
+  blockedPositions,
+  occupiedPositions,
+  inverterIds,
+}: {
+  puzzle: Pick<MagneticFieldPuzzleModel, 'rows' | 'columns'>;
+  pieceId: string;
+  direction: MagneticFieldDirection;
+  current: MagneticFieldPosition;
+  blockedPositions: ReadonlySet<string>;
+  occupiedPositions: ReadonlySet<string>;
+  inverterIds: ReadonlyMap<string, string>;
+}): MagneticFieldMovement {
+  const [rowDelta, columnDelta] = directionDelta[direction];
+  let position = { row: current.row, column: current.column };
+  const crossedInverterIds: string[] = [];
+
+  while (true) {
+    const next = {
+      row: position.row + rowDelta,
+      column: position.column + columnDelta,
+    };
+    const nextKey = positionKey(next);
+    if (
+      outsidePuzzle(next, puzzle.rows, puzzle.columns) ||
+      blockedPositions.has(nextKey) ||
+      occupiedPositions.has(nextKey)
+    ) {
+      break;
+    }
+
+    position = next;
+    const inverterId = inverterIds.get(nextKey);
+    if (inverterId) crossedInverterIds.push(inverterId);
+  }
+
+  return {
+    pieceId,
+    direction,
+    from: {
+      row: current.row,
+      column: current.column,
+    },
+    to: position,
+    crossedInverterIds,
+  };
+}
+
+function outsidePuzzle(
+  position: MagneticFieldPosition,
+  rows: number,
+  columns: number,
+): boolean {
+  return (
+    position.row < 0 ||
+    position.row >= rows ||
+    position.column < 0 ||
+    position.column >= columns
+  );
+}
+
+function positionsMatch(
+  first: MagneticFieldPosition,
+  second: MagneticFieldPosition,
+): boolean {
+  return first.row === second.row && first.column === second.column;
+}
+
+function oppositePolarity(
+  polarity: MagneticFieldPolarity,
+): MagneticFieldPolarity {
+  return polarity === 'north' ? 'south' : 'north';
+}
+
+function positionKey(position: MagneticFieldPosition): string {
+  return `${position.row}:${position.column}`;
+}

package/src/patterns/MapViewport/MapViewport.astro

@@ -0,0 +1,296 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import type { Tone } from '../../theme/contracts';
+import type { DisplayMedia } from '../../display/contracts';
+import CardBody from '../../components/content/CardBody/CardBody.astro';
+import CardHeader from '../../components/content/CardHeader/CardHeader.astro';
+import SurfaceGroup from '../../composition/SurfaceGroup/SurfaceGroup.astro';
+import Modal from '../Modal/Modal.astro';
+import ModalClose from '../Modal/ModalClose.astro';
+import type {
+  MapViewportModel,
+  MapViewportShape,
+  MapViewportSizing,
+} from './contracts';
+import { getMapViewportSceneGeometry } from './geometry';
+
+type MapViewportModal = {
+  id: string;
+  title: string;
+  closeLabel: string;
+  media?: DisplayMedia;
+};
+
+type MapViewportFraming = 'embedded' | 'standalone';
+
+type Props = Omit<HTMLAttributes<'div'>, 'style'> & {
+  framing?: MapViewportFraming;
+  modal?: MapViewportModal;
+  model: MapViewportModel;
+  sizing?: MapViewportSizing;
+  tone?: Tone;
+};
+
+const {
+  class: className,
+  'data-tone': dataTone,
+  framing = 'standalone',
+  modal,
+  model,
+  sizing = 'aspect',
+  tone,
+  ...attrs
+}: Props = Astro.props;
+const resolvedTone = tone ?? dataTone;
+const backgroundLayers = model.layers
+  .filter((layer) => layer.plane === 'background')
+  .toSorted((left, right) => left.order - right.order);
+const foregroundLayers = model.layers
+  .filter((layer) => layer.plane === 'foreground')
+  .toSorted((left, right) => left.order - right.order);
+const isInteractive = (state: string): boolean =>
+  model.interaction === 'single-selection' &&
+  (state === 'available' || state === 'selected');
+const ringPath = (shape: Extract<MapViewportShape, { kind: 'ring' }>): string =>
+  [
+    `M ${shape.x - shape.radius} ${shape.y}`,
+    `a ${shape.radius} ${shape.radius} 0 1 0 ${shape.radius * 2} 0`,
+    `a ${shape.radius} ${shape.radius} 0 1 0 ${-shape.radius * 2} 0`,
+    `M ${shape.x - shape.innerRadius} ${shape.y}`,
+    `a ${shape.innerRadius} ${shape.innerRadius} 0 1 1 ${shape.innerRadius * 2} 0`,
+    `a ${shape.innerRadius} ${shape.innerRadius} 0 1 1 ${-shape.innerRadius * 2} 0`,
+  ].join(' ');
+const sceneGeometry = getMapViewportSceneGeometry(model, sizing);
+const viewportStyle = [
+  `--map-viewport-reference-aspect-ratio: ${sceneGeometry.aspectRatio}`,
+  `--map-viewport-reference-ratio: ${sceneGeometry.referenceRatio}`,
+  `--map-viewport-scene-inline-size: ${sceneGeometry.inlineSize}`,
+  `--map-viewport-scene-block-size: ${sceneGeometry.blockSize}`,
+].join('; ');
+---
+
+<div
+  class="map-viewport-frame"
+  data-framing={framing}
+  data-modal-source={modal?.id}
+  data-sizing={sizing}
+  data-tone={resolvedTone}
+  style={viewportStyle}
+>
+  <div
+    {...attrs}
+    class:list={['map-viewport', className]}
+    data-widget="map-viewport"
+    data-map-viewport
+    data-map-interaction={model.interaction}
+    data-map-logical-overflow-block={String(sceneGeometry.overflowsBlock)}
+    data-map-logical-overflow-inline={String(sceneGeometry.overflowsInline)}
+    data-map-overflow-block={String(sceneGeometry.overflowsBlock)}
+    data-map-overflow-inline={String(sceneGeometry.overflowsInline)}
+    data-map-reference-ratio={sceneGeometry.referenceRatio}
+    data-sizing={sizing}
+    data-tone={resolvedTone}
+    role="region"
+    aria-label={model.label}
+    tabindex="0"
+    style={viewportStyle}
+  >
+    <div class="map-viewport__scene" data-map-viewport-scene>
+      <svg
+        class="map-viewport__svg"
+        data-map-viewport-svg
+        viewBox={`0 0 ${model.width} ${model.height}`}
+        preserveAspectRatio="xMinYMin meet"
+        role={model.interaction === 'none' ? 'img' : 'group'}
+        aria-label={model.label}
+      >
+        {
+          backgroundLayers.map((layer) => (
+            <image
+              data-map-layer={layer.id}
+              href={layer.media.src}
+              x="0"
+              y="0"
+              width={model.width}
+              height={model.height}
+              preserveAspectRatio="none"
+            />
+          ))
+        }
+
+        <g class="map-viewport__cells" data-map-cells>
+          {
+            model.cells.map((cell) => (
+              <g
+                class="map-viewport__cell"
+                data-map-cell={cell.id}
+                data-map-cell-state={cell.state}
+                data-map-cell-palette={cell.palette}
+                role={isInteractive(cell.state) ? 'button' : undefined}
+                tabindex={isInteractive(cell.state) ? '0' : undefined}
+                aria-label={isInteractive(cell.state) ? cell.label : undefined}
+                aria-pressed={
+                  isInteractive(cell.state)
+                    ? cell.state === 'selected'
+                      ? 'true'
+                      : 'false'
+                    : undefined
+                }
+              >
+                <title>{cell.label}</title>
+                <rect
+                  x={cell.x}
+                  y={cell.y}
+                  width={cell.width}
+                  height={cell.height}
+                />
+              </g>
+            ))
+          }
+        </g>
+
+        <g class="map-viewport__shapes" data-map-shapes aria-hidden="true">
+          {
+            (model.shapes ?? []).map((shape) => (
+              <g
+                class="map-viewport__shape"
+                data-map-shape={shape.kind}
+                data-map-shape-palette={shape.palette}
+              >
+                {shape.kind === 'circle' ? (
+                  <circle cx={shape.x} cy={shape.y} r={shape.radius} />
+                ) : null}
+                {shape.kind === 'ring' ? (
+                  <path d={ringPath(shape)} fill-rule="evenodd" />
+                ) : null}
+                {shape.kind === 'polygon' ? (
+                  <polygon
+                    points={shape.points
+                      .map((point) => `${point.x},${point.y}`)
+                      .join(' ')}
+                  />
+                ) : null}
+                {shape.kind === 'horizontal-line' || shape.kind === 'cross' ? (
+                  <rect
+                    x={shape.x - shape.radius}
+                    y={shape.y - shape.halfWidth}
+                    width={shape.radius * 2}
+                    height={shape.halfWidth * 2}
+                  />
+                ) : null}
+                {shape.kind === 'vertical-line' || shape.kind === 'cross' ? (
+                  <rect
+                    x={shape.x - shape.halfWidth}
+                    y={shape.y - shape.radius}
+                    width={shape.halfWidth * 2}
+                    height={shape.radius * 2}
+                  />
+                ) : null}
+                {shape.kind === 'diagonal-cross' ? (
+                  <g transform={`rotate(45 ${shape.x} ${shape.y})`}>
+                    <rect
+                      x={shape.x - shape.halfWidth}
+                      y={shape.y - shape.radius}
+                      width={shape.halfWidth * 2}
+                      height={shape.radius * 2}
+                    />
+                    <rect
+                      x={shape.x - shape.radius}
+                      y={shape.y - shape.halfWidth}
+                      width={shape.radius * 2}
+                      height={shape.halfWidth * 2}
+                    />
+                  </g>
+                ) : null}
+              </g>
+            ))
+          }
+        </g>
+
+        <g class="map-viewport__markers" data-map-markers>
+          {
+            (model.markers ?? []).map((marker) => (
+              <g class="map-viewport__marker" data-map-marker={marker.id}>
+                <title>{marker.label}</title>
+                <image
+                  href={marker.media.src}
+                  x={marker.x}
+                  y={marker.y}
+                  width={marker.width}
+                  height={marker.height}
+                  preserveAspectRatio="xMidYMid meet"
+                />
+              </g>
+            ))
+          }
+        </g>
+
+        {
+          foregroundLayers.map((layer) => (
+            <image
+              data-map-layer={layer.id}
+              href={layer.media.src}
+              x="0"
+              y="0"
+              width={model.width}
+              height={model.height}
+              preserveAspectRatio="none"
+              pointer-events="none"
+            />
+          ))
+        }
+      </svg>
+    </div>
+    <p
+      class="map-viewport__announcement"
+      data-map-announcement
+      aria-live="polite"
+    >
+    </p>
+  </div>
+</div>
+
+{
+  modal ? (
+    <Modal
+      id={modal.id}
+      label={modal.title}
+      closeLabel={modal.closeLabel}
+      closeControl="delegated"
+      sizing="content"
+      tone={resolvedTone}
+    >
+      <SurfaceGroup
+        class="map-viewport__modal-card"
+        data-map-viewport-modal-card={modal.id}
+        style={viewportStyle}
+      >
+        {modal.media ? (
+          <CardHeader title={modal.title} media={modal.media}>
+            <ModalClose slot="action" label={modal.closeLabel} />
+          </CardHeader>
+        ) : (
+          <CardHeader title={modal.title}>
+            <ModalClose slot="action" label={modal.closeLabel} />
+          </CardHeader>
+        )}
+        <CardBody
+          class="map-viewport__modal-body"
+          inset={framing === 'embedded' ? 'none' : 'default'}
+        >
+          <div class="map-viewport__modal-portal" data-modal-portal />
+        </CardBody>
+      </SurfaceGroup>
+    </Modal>
+  ) : null
+}
+
+<script>
+  import { initMapViewport } from './mapViewportController';
+
+  for (const root of document.querySelectorAll('[data-map-viewport]')) {
+    if (root instanceof HTMLElement) {
+      initMapViewport(root);
+    }
+  }
+</script>