@astronox/core 0.1.0

package/src/patterns/MagneticFieldPuzzle/MagneticFieldPuzzle.astro

@@ -0,0 +1,217 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+import MinusIcon from '../../components/icons/MinusIcon.astro';
+import PlusIcon from '../../components/icons/PlusIcon.astro';
+import SlashIcon from '../../components/icons/SlashIcon.astro';
+import PuzzleGrid from '../PuzzleGrid/PuzzleGrid.astro';
+import type {
+  MagneticFieldPuzzleLabels,
+  MagneticFieldPuzzleModel,
+} from './contracts';
+
+type Props = HTMLAttributes<'section'> & {
+  label: string;
+  labels: MagneticFieldPuzzleLabels;
+  puzzles: readonly MagneticFieldPuzzleModel[];
+};
+
+const {
+  class: className,
+  label,
+  labels,
+  puzzles,
+  ...attrs
+}: Props = Astro.props;
+---
+
+<section
+  {...attrs}
+  class:list={['magnetic-field-puzzle', className]}
+  aria-label={label}
+  data-magnetic-field-puzzle
+>
+  {
+    puzzles.map((puzzle, puzzleIndex) => {
+      const cells = Array.from(
+        { length: puzzle.rows * puzzle.columns },
+        (_, index) => ({
+          row: Math.floor(index / puzzle.columns),
+          column: index % puzzle.columns,
+        }),
+      );
+
+      return (
+        <div
+          class="magnetic-field-puzzle__instance"
+          data-puzzle-id={puzzle.id}
+          data-puzzle-status="incomplete"
+          hidden={puzzleIndex !== 0}
+        >
+          <PuzzleGrid
+            class="magnetic-field-puzzle__board"
+            label={puzzle.label}
+            rows={puzzle.rows}
+            columns={puzzle.columns}
+            data-field-board
+            data-field-rows={puzzle.rows}
+            data-field-columns={puzzle.columns}
+          >
+            {cells.map(({ row, column }) => {
+              const target = puzzle.targets.find(
+                (candidate) =>
+                  candidate.row === row && candidate.column === column,
+              );
+              const inverter = puzzle.inverters.find(
+                (candidate) =>
+                  candidate.row === row && candidate.column === column,
+              );
+              const blockedCell = puzzle.blockedCells.find(
+                (candidate) =>
+                  candidate.row === row && candidate.column === column,
+              );
+              const targetPiece = target
+                ? puzzle.pieces.find(
+                    (candidate) => candidate.id === target.pieceId,
+                  )
+                : undefined;
+              const cellLabel =
+                blockedCell?.label ??
+                (target
+                  ? `${target.label} — ${labels.polarities[target.polarity]}`
+                  : undefined) ??
+                inverter?.label ??
+                '';
+
+              return (
+                <button
+                  class="puzzle-grid__cell magnetic-field-puzzle__cell"
+                  type="button"
+                  aria-label={cellLabel || undefined}
+                  disabled={blockedCell ? true : undefined}
+                  tabindex={blockedCell ? undefined : -1}
+                  data-puzzle-cell
+                  data-puzzle-cell-disabled={blockedCell ? '' : undefined}
+                  data-field-cell
+                  data-field-blocked-cell={blockedCell?.id}
+                  data-field-target-cell={target?.id}
+                  data-field-target-polarity={target?.polarity}
+                  data-field-inverter-cell={inverter?.id}
+                  data-cell-row={row}
+                  data-cell-column={column}
+                  data-cell-label={cellLabel || undefined}
+                  style={`--cell-row: ${row + 1}; --cell-column: ${column + 1};`}
+                >
+                  {target ? (
+                    <span
+                      class="magnetic-field-puzzle__target"
+                      data-field-target={target.id}
+                      data-target-label={target.label}
+                      data-target-piece={target.pieceId}
+                      data-target-polarity={target.polarity}
+                      data-target-row={target.row}
+                      data-target-column={target.column}
+                      aria-hidden="true"
+                    >
+                      <span
+                        class="magnetic-field-puzzle__identity"
+                        data-polarity={target.polarity}
+                      >
+                        {targetPiece?.shortLabel}
+                      </span>
+                    </span>
+                  ) : null}
+
+                  {inverter ? (
+                    <span
+                      class="magnetic-field-puzzle__inverter"
+                      data-field-inverter={inverter.id}
+                      data-inverter-label={inverter.label}
+                      data-inverter-row={inverter.row}
+                      data-inverter-column={inverter.column}
+                      aria-hidden="true"
+                    >
+                      <span
+                        class="magnetic-field-puzzle__polarity-icon"
+                        data-polarity="south"
+                      >
+                        <PlusIcon />
+                      </span>
+                      <span class="magnetic-field-puzzle__inverter-separator">
+                        <SlashIcon />
+                      </span>
+                      <span
+                        class="magnetic-field-puzzle__polarity-icon"
+                        data-polarity="north"
+                      >
+                        <MinusIcon />
+                      </span>
+                    </span>
+                  ) : null}
+                </button>
+              );
+            })}
+
+            {puzzle.pieces.map((piece) => (
+              <button
+                class="magnetic-field-puzzle__piece"
+                type="button"
+                aria-label={`${piece.label} — ${labels.polarities[piece.polarity]}`}
+                aria-pressed="false"
+                data-field-piece={piece.id}
+                data-piece-label={piece.label}
+                data-piece-short-label={piece.shortLabel}
+                data-piece-row={piece.row}
+                data-piece-column={piece.column}
+                data-piece-polarity={piece.polarity}
+                data-piece-pupil-position={piece.pupilPosition}
+                data-polarity-label-north={labels.polarities.north}
+                data-polarity-label-south={labels.polarities.south}
+                data-initial-row={piece.row}
+                data-initial-column={piece.column}
+                data-initial-polarity={piece.polarity}
+                style={`--piece-row: ${piece.row + 1}; --piece-column: ${piece.column + 1};`}
+              >
+                <span
+                  class="magnetic-field-puzzle__piece-core"
+                  aria-hidden="true"
+                >
+                  <span class="magnetic-field-puzzle__piece-iris">
+                    <span class="magnetic-field-puzzle__piece-pupil" />
+                  </span>
+                  <span class="magnetic-field-puzzle__piece-identity-region">
+                    <span
+                      class="magnetic-field-puzzle__identity"
+                      data-polarity={piece.polarity}
+                      data-piece-polarity-identity
+                    >
+                      {piece.shortLabel}
+                    </span>
+                  </span>
+                </span>
+              </button>
+            ))}
+          </PuzzleGrid>
+
+          <span
+            hidden
+            data-direction-label-north={labels.directions.north}
+            data-direction-label-east={labels.directions.east}
+            data-direction-label-south={labels.directions.south}
+            data-direction-label-west={labels.directions.west}
+            data-move-template={labels.moveTemplate}
+          />
+        </div>
+      );
+    })
+  }
+</section>
+
+<script>
+  import { initMagneticFieldPuzzle } from './magneticFieldPuzzleController';
+
+  for (const root of document.querySelectorAll(
+    '[data-magnetic-field-puzzle]',
+  )) {
+    if (root instanceof HTMLElement) initMagneticFieldPuzzle(root);
+  }
+</script>

package/src/patterns/MagneticFieldPuzzle/MagneticFieldPuzzle.css

@@ -0,0 +1,383 @@
+.magnetic-field-puzzle {
+  --magnetic-piece-structure-color: #1f2838;
+  --magnetic-piece-shell-background: #a5c4d0;
+  --magnetic-piece-iris-background: #f4de62;
+  --magnetic-piece-pupil-background: #000;
+  --magnetic-piece-shell-border-width: calc(var(--nox-border-width) * 2);
+  --magnetic-piece-iris-border-width: var(--nox-border-width);
+  --magnetic-polarity-gap: calc(var(--nox-space-1) / 2);
+  --magnetic-polarity-size: var(--nox-font-size-md);
+}
+
+.magnetic-field-puzzle,
+.magnetic-field-puzzle__instance {
+  display: grid;
+  min-inline-size: 0;
+}
+
+.magnetic-field-puzzle__instance[hidden] {
+  display: none;
+}
+
+.magnetic-field-puzzle__board {
+  isolation: isolate;
+  touch-action: manipulation;
+}
+
+.magnetic-field-puzzle__cell {
+  appearance: none;
+}
+
+.magnetic-field-puzzle__cell[data-field-target-cell],
+.magnetic-field-puzzle__cell[data-field-inverter-cell] {
+  --puzzle-cell-base-background: var(--nox-surface);
+  --puzzle-cell-base-color: var(--nox-text);
+
+  border-style: dashed;
+}
+
+.magnetic-field-puzzle__cell[data-field-target-polarity='north'] {
+  --puzzle-cell-base-border: var(--nox-source-tone-info);
+}
+
+.magnetic-field-puzzle__cell[data-field-target-polarity='south'] {
+  --puzzle-cell-base-border: var(--nox-source-tone-danger);
+}
+
+.magnetic-field-puzzle__cell[data-field-inverter-cell] {
+  border-block-start-color: var(--nox-source-tone-info);
+  border-inline-start-color: var(--nox-source-tone-info);
+  border-block-end-color: var(--nox-source-tone-danger);
+  border-inline-end-color: var(--nox-source-tone-danger);
+}
+
+.magnetic-field-puzzle__cell[data-puzzle-cell-state='invalid'] {
+  --puzzle-cell-state-background: color-mix(
+    in srgb,
+    var(--nox-source-tone-warning) 12%,
+    var(--nox-surface)
+  );
+  --puzzle-cell-state-border: var(--nox-source-tone-warning);
+  --puzzle-cell-state-color: var(--nox-source-tone-warning);
+}
+
+.magnetic-field-puzzle__target {
+  position: relative;
+  z-index: 3;
+  display: inline-grid;
+  place-items: center;
+  min-inline-size: 0;
+}
+
+.magnetic-field-puzzle__inverter {
+  position: relative;
+  z-index: 3;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-inline-size: 0;
+  gap: var(--magnetic-polarity-gap);
+  font-size: var(--magnetic-polarity-size);
+  font-weight: var(--nox-font-weight-strong);
+}
+
+.magnetic-field-puzzle__identity {
+  color: var(--magnetic-piece-structure-color);
+  display: inline-grid;
+  place-items: center;
+  font-size: var(--magnetic-polarity-size);
+  font-weight: var(--nox-font-weight-strong);
+  line-height: 1;
+}
+
+.magnetic-field-puzzle__identity[data-polarity='north'] {
+  color: var(--nox-source-tone-info);
+}
+
+.magnetic-field-puzzle__identity[data-polarity='south'] {
+  color: var(--nox-source-tone-danger);
+}
+
+.magnetic-field-puzzle__polarity-icon {
+  display: grid;
+  inline-size: 1em;
+  block-size: 1em;
+  aspect-ratio: 1;
+  place-items: center;
+  color: var(--nox-source-tone-info);
+}
+
+.magnetic-field-puzzle__polarity-icon > svg {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+.magnetic-field-puzzle__polarity-icon[data-polarity='south'] {
+  color: var(--nox-source-tone-danger);
+}
+
+.magnetic-field-puzzle__inverter-separator {
+  display: grid;
+  inline-size: 0.75em;
+  block-size: 1em;
+  place-items: center;
+  color: var(--nox-text-muted);
+}
+
+.magnetic-field-puzzle__inverter-separator > svg {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+@media (width < 34rem) {
+  .magnetic-field-puzzle {
+    --magnetic-piece-shell-border-width: var(--nox-border-width);
+    --magnetic-piece-iris-border-width: calc(var(--nox-border-width) / 2);
+    --magnetic-polarity-gap: 0px;
+    --magnetic-polarity-size: var(--nox-font-size-sm);
+  }
+}
+
+.magnetic-field-puzzle__cell[data-field-destination] {
+  --puzzle-cell-ring-width: var(--nox-focus-ring-width);
+  --puzzle-cell-ring-color: var(--nox-source-tone-info);
+
+  z-index: 3;
+  overflow: visible;
+}
+
+.magnetic-field-puzzle__path-stream {
+  --field-path-rotation: 0deg;
+
+  position: relative;
+  z-index: 3;
+  grid-row: var(--field-path-row);
+  grid-column: var(--field-path-column);
+  min-inline-size: 0;
+  min-block-size: 0;
+  overflow: visible;
+  pointer-events: none;
+}
+
+.magnetic-field-puzzle__path-chevron {
+  --field-path-chevron-opacity: 0.38;
+
+  position: absolute;
+  display: grid;
+  inset-block-start: var(--field-path-static-block);
+  inset-inline-start: var(--field-path-static-inline);
+  inline-size: 1em;
+  block-size: 1em;
+  place-items: center;
+  color: var(--nox-source-tone-success);
+  font-size: var(--nox-font-size-xl);
+  opacity: var(--field-path-chevron-opacity);
+  pointer-events: none;
+  transform: translate(-50%, -50%) rotate(var(--field-path-rotation));
+}
+
+.magnetic-field-puzzle__path-chevron::before {
+  content: '';
+  inline-size: 0.46em;
+  block-size: 0.46em;
+  border-block-start: calc(var(--nox-border-width) * 2) solid currentColor;
+  border-inline-end: calc(var(--nox-border-width) * 2) solid currentColor;
+  transform: rotate(45deg);
+}
+
+.magnetic-field-puzzle__path-stream[data-field-path-direction='north'] {
+  --field-path-rotation: -90deg;
+}
+
+.magnetic-field-puzzle__path-stream[data-field-path-direction='south'] {
+  --field-path-rotation: 90deg;
+}
+
+.magnetic-field-puzzle__path-stream[data-field-path-direction='west'] {
+  --field-path-rotation: 180deg;
+}
+
+.magnetic-field-puzzle__piece {
+  --piece-pupil-block-position: 35%;
+  --piece-pupil-inline-position: 68%;
+
+  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;
+  background: transparent;
+  color: var(--nox-text);
+  font: inherit;
+  cursor: grab;
+  touch-action: none;
+  user-select: none;
+}
+
+.magnetic-field-puzzle__piece[data-piece-pupil-position='center'] {
+  --piece-pupil-block-position: 50%;
+  --piece-pupil-inline-position: 50%;
+}
+
+.magnetic-field-puzzle__piece[data-piece-pupil-position='lower-start'] {
+  --piece-pupil-block-position: 65%;
+  --piece-pupil-inline-position: 32%;
+}
+
+.magnetic-field-puzzle__piece-core {
+  --piece-interaction-overlay: transparent;
+  --piece-ring-width: 0px;
+  --piece-ring-color: transparent;
+
+  position: relative;
+  display: grid;
+  place-items: center;
+  inline-size: 72%;
+  aspect-ratio: 1;
+  padding: 0;
+  border: var(--magnetic-piece-shell-border-width) solid
+    var(--magnetic-piece-structure-color);
+  border-radius: var(--nox-radius-pill);
+  background:
+    linear-gradient(
+      var(--piece-interaction-overlay),
+      var(--piece-interaction-overlay)
+    ),
+    var(--magnetic-piece-shell-background);
+  box-shadow: 0 0 0 var(--piece-ring-width) var(--piece-ring-color);
+  font-size: var(--nox-font-size-xs);
+  font-weight: var(--nox-font-weight-strong);
+  transition:
+    background var(--nox-motion-duration-sm) var(--nox-motion-easing-standard),
+    box-shadow var(--nox-motion-duration-sm) var(--nox-motion-easing-standard);
+}
+
+.magnetic-field-puzzle__piece-iris {
+  position: absolute;
+  inset-block-start: 10%;
+  display: grid;
+  inline-size: 40%;
+  aspect-ratio: 1;
+  place-items: center;
+  border: var(--magnetic-piece-iris-border-width) solid
+    var(--magnetic-piece-structure-color);
+  border-radius: var(--nox-radius-pill);
+  background: var(--magnetic-piece-iris-background);
+}
+
+.magnetic-field-puzzle__piece-pupil {
+  position: absolute;
+  inset-block-start: var(--piece-pupil-block-position);
+  inset-inline-start: var(--piece-pupil-inline-position);
+  inline-size: 16%;
+  aspect-ratio: 1;
+  border-radius: var(--nox-radius-pill);
+  background: var(--magnetic-piece-pupil-background);
+  transform: translate(-50%, -50%);
+}
+
+.magnetic-field-puzzle__piece-identity-region {
+  position: absolute;
+  inset-block: 56% 6%;
+  inset-inline: 0;
+  display: grid;
+  place-items: center;
+}
+
+.magnetic-field-puzzle__piece[data-piece-selected]
+  .magnetic-field-puzzle__piece-core {
+  --piece-ring-width: var(--nox-focus-ring-width);
+  --piece-ring-color: var(--nox-source-tone-info);
+}
+
+.magnetic-field-puzzle__piece[data-piece-dragging] {
+  z-index: 6;
+  cursor: grabbing;
+}
+
+.magnetic-field-puzzle__piece[data-piece-dragging]
+  .magnetic-field-puzzle__piece-core {
+  transform: translate3d(var(--piece-drag-x, 0px), var(--piece-drag-y, 0px), 0)
+    scale(1.04);
+  transition: none;
+  will-change: transform;
+}
+
+.magnetic-field-puzzle__piece:focus-visible {
+  outline: none;
+}
+
+.magnetic-field-puzzle__piece:focus-visible .magnetic-field-puzzle__piece-core {
+  --piece-ring-width: var(--nox-focus-ring-width);
+  --piece-ring-color: var(--nox-source-tone-info);
+}
+
+@media (hover: hover) {
+  .magnetic-field-puzzle__piece:hover .magnetic-field-puzzle__piece-core {
+    --piece-interaction-overlay: color-mix(
+      in srgb,
+      var(--nox-tone-color) 10%,
+      transparent
+    );
+  }
+}
+
+.magnetic-field-puzzle__piece:active .magnetic-field-puzzle__piece-core {
+  --piece-interaction-overlay: color-mix(
+    in srgb,
+    var(--nox-tone-color) 16%,
+    transparent
+  );
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .magnetic-field-puzzle__piece[data-piece-moved] {
+    animation: magnetic-field-slide 260ms var(--nox-motion-easing-standard);
+  }
+
+  .magnetic-field-puzzle__path-chevron {
+    animation: magnetic-field-path var(--field-path-duration) linear infinite
+      both;
+    animation-delay: calc(var(--field-path-chevron-index) * -700ms);
+  }
+}
+
+@keyframes magnetic-field-slide {
+  from {
+    transform: translate3d(
+      var(--piece-move-inline-distance),
+      var(--piece-move-block-distance),
+      0
+    );
+  }
+}
+
+@keyframes magnetic-field-path {
+  0% {
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    opacity: 0;
+    transform: translate(-50%, -50%) rotate(var(--field-path-rotation))
+      scale(0.9);
+  }
+
+  12%,
+  82% {
+    opacity: var(--field-path-chevron-opacity);
+  }
+
+  100% {
+    inset-block-start: var(--field-path-target-block);
+    inset-inline-start: var(--field-path-target-inline);
+    opacity: 0;
+    transform: translate(-50%, -50%) rotate(var(--field-path-rotation)) scale(1);
+  }
+}

package/src/patterns/MagneticFieldPuzzle/contracts.ts

@@ -0,0 +1,81 @@
+export type MagneticFieldDirection = 'north' | 'east' | 'south' | 'west';
+export type MagneticFieldPolarity = 'north' | 'south';
+export type MagneticFieldPupilPosition = 'upper-end' | 'center' | 'lower-start';
+export type MagneticFieldPuzzleStatus = 'incomplete' | 'valid';
+
+export type MagneticFieldPosition = {
+  row: number;
+  column: number;
+};
+
+export type MagneticFieldPiece = MagneticFieldPosition & {
+  id: string;
+  label: string;
+  shortLabel: string;
+  polarity: MagneticFieldPolarity;
+  pupilPosition: MagneticFieldPupilPosition;
+};
+
+export type MagneticFieldTarget = MagneticFieldPosition & {
+  id: string;
+  label: string;
+  pieceId: string;
+  polarity: MagneticFieldPolarity;
+};
+
+export type MagneticFieldBlockedCell = MagneticFieldPosition & {
+  id: string;
+  label: string;
+};
+
+export type MagneticFieldInverter = MagneticFieldPosition & {
+  id: string;
+  label: string;
+};
+
+export type MagneticFieldMove = {
+  pieceId: string;
+  direction: MagneticFieldDirection;
+};
+
+export type MagneticFieldPuzzleModel = {
+  id: string;
+  label: string;
+  rows: number;
+  columns: number;
+  pieces: readonly MagneticFieldPiece[];
+  targets: readonly MagneticFieldTarget[];
+  blockedCells: readonly MagneticFieldBlockedCell[];
+  inverters: readonly MagneticFieldInverter[];
+};
+
+export type MagneticFieldPieceState = MagneticFieldPosition & {
+  polarity: MagneticFieldPolarity;
+};
+
+export type MagneticFieldPuzzleState = Readonly<
+  Record<string, MagneticFieldPieceState>
+>;
+
+export type MagneticFieldMovement = MagneticFieldMove & {
+  from: MagneticFieldPosition;
+  to: MagneticFieldPosition;
+  crossedInverterIds: readonly string[];
+};
+
+export type MagneticFieldSimulation = {
+  state: MagneticFieldPuzzleState;
+  movement: MagneticFieldMovement | null;
+};
+
+export type MagneticFieldPuzzleLabels = {
+  directions: Readonly<Record<MagneticFieldDirection, string>>;
+  polarities: Readonly<Record<MagneticFieldPolarity, string>>;
+  moveTemplate: string;
+};
+
+export type MagneticFieldPuzzleChangeDetail = {
+  kind: 'magnetic-field';
+  puzzleId: string;
+  state: MagneticFieldPuzzleState;
+};