@conduction/docusaurus-preset 3.42.0 → 3.44.0

package/src/components/PipeFit/PipeFit.module.css

@@ -0,0 +1,203 @@
+/**
+ * <PipeFit /> styles.
+ *
+ * A line of connectors read left to right, each drawn as two openings
+ * and a barrel. Tokens only, one accent on a join that does not meet.
+ * Every state is also in the button's label, so the route is solvable
+ * without the picture.
+ */
+
+.pf {
+  border: 1px solid var(--c-cobalt-100);
+  border-radius: var(--radius-lg);
+  background: white;
+  padding: clamp(16px, 3vw, 28px);
+  font-family: var(--conduction-typography-font-family-body);
+}
+
+.head {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  align-items: flex-start;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.eyebrow {
+  margin: 0 0 4px;
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 11px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--c-orange-knvb);
+}
+
+.title {
+  margin: 0 0 6px;
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--c-cobalt-900);
+}
+
+.lede {
+  margin: 0;
+  max-width: 62ch;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--c-cobalt-700);
+}
+
+.hud {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+.hudPill {
+  padding: 6px 10px;
+  border-radius: var(--radius-pill);
+  background: var(--c-cobalt-50);
+  color: var(--c-cobalt-900);
+  white-space: nowrap;
+}
+
+.route {
+  display: flex;
+  align-items: stretch;
+  gap: 4px;
+  padding: 16px 12px;
+  border-radius: var(--radius-md);
+  background: var(--c-cobalt-50);
+  max-width: 720px;
+  overflow-x: auto;
+}
+
+.end {
+  position: relative;
+  flex-shrink: 0;
+  width: 78px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6px;
+  border-radius: var(--radius-md);
+  background: var(--c-cobalt-900);
+  color: white;
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 10px;
+  text-align: center;
+}
+
+/* The three heights an opening can sit at. The end blocks mark theirs
+   with a notch, the connectors with their mouths. */
+.end::after {
+  content: '';
+  position: absolute;
+  width: 8px;
+  height: 10px;
+  background: var(--c-mint-500);
+  border-radius: 2px;
+}
+.end.port-0::after { top: 8px; right: -4px; }
+.end.port-1::after { top: 50%; margin-top: -5px; right: -4px; }
+.end.port-2::after { bottom: 8px; right: -4px; }
+.end:last-child::after { right: auto; left: -4px; }
+
+.piece {
+  position: relative;
+  flex: 1;
+  min-width: 68px;
+  height: 84px;
+  border: 1px solid var(--c-cobalt-200);
+  border-radius: var(--radius-md);
+  background: white;
+  cursor: pointer;
+  padding: 0;
+  transition: border-color 120ms ease, background 120ms ease;
+}
+.piece:hover:not(:disabled) { border-color: var(--c-blue-cobalt); }
+.piece:disabled { cursor: default; opacity: 0.7; }
+.piece:focus-visible { outline: 2px solid var(--c-blue-cobalt); outline-offset: 2px; }
+
+.joined { border-color: var(--c-mint-500); }
+.gap { border-color: var(--c-orange-knvb); background: var(--c-cobalt-50); }
+
+.mouth {
+  position: absolute;
+  width: 10px;
+  height: 12px;
+  border-radius: 2px;
+  background: var(--c-blue-cobalt);
+}
+.mouth:first-of-type { left: -1px; }
+.mouth:last-of-type { right: -1px; }
+.mouth.port-0 { top: 10px; }
+.mouth.port-1 { top: 50%; margin-top: -6px; }
+.mouth.port-2 { bottom: 10px; }
+
+.barrel {
+  position: absolute;
+  left: 12px;
+  right: 12px;
+  top: 50%;
+  height: 4px;
+  margin-top: -2px;
+  border-radius: 2px;
+  background: var(--c-cobalt-200);
+}
+
+.clock {
+  height: 6px;
+  border-radius: var(--radius-pill);
+  background: var(--c-cobalt-200);
+  overflow: hidden;
+  margin-top: 12px;
+  max-width: 720px;
+}
+.clockFill {
+  height: 100%;
+  background: var(--c-mint-500);
+  transition: width 100ms linear;
+}
+.clockLow { background: var(--c-orange-knvb); }
+
+.idle {
+  margin: 0;
+  font-size: 14px;
+  color: var(--c-cobalt-400);
+}
+
+.foot {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+  margin-top: 14px;
+}
+
+.start {
+  background: var(--c-blue-cobalt);
+  color: white;
+  border: 1px solid var(--c-blue-cobalt);
+  padding: 10px 18px;
+  border-radius: var(--radius-md);
+  font-family: inherit;
+  font-weight: 500;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background 120ms ease;
+}
+.start:hover { background: var(--c-cobalt-700); border-color: var(--c-cobalt-700); }
+.start:focus-visible { outline: 2px solid var(--c-cobalt-900); outline-offset: 2px; }
+
+.hint {
+  margin: 0;
+  flex-basis: 100%;
+  font-size: 12px;
+  color: var(--c-cobalt-400);
+  max-width: 60ch;
+  min-height: 1.4em;
+}

package/src/components/PipeFit/__tests__/engine.test.js

@@ -0,0 +1,176 @@
+/**
+ * engine.test.js — the pipe-fit rules.
+ *
+ * The property everything rests on: every route dealt can actually be
+ * finished. The route is built from a working line and then scrambled,
+ * so a solution exists by construction, and the test proves it by
+ * finding one. An unsolvable puzzle on a clock reads as a broken game,
+ * and the player has no way to tell the difference.
+ */
+
+'use strict';
+
+const test = require('node:test');
+const assert = require('node:assert/strict');
+
+const {
+  createGame, turn, step, connected, openings, clockMs, remaining, summarise,
+  PORTS, DEFAULTS,
+} = require('../engine.js');
+
+/**
+ * Solve a route by walking it: each piece has exactly one turn that
+ * meets what is carried in, so the line settles in one pass.
+ */
+function solve(state, now = 0) {
+  let s = state;
+  const finished = s.routes;
+  for (let i = 0; i < s.route.pieces.length; i++) {
+    /* Whatever the piece before it hands over. */
+    let carry = s.route.source;
+    for (let k = 0; k < i; k++) carry = openings(s.route.pieces[k]).right;
+
+    for (let t = 0; t < PORTS; t++) {
+      if (openings(s.route.pieces[i]).left === carry) break;
+      s = turn(s, i, now);
+      /* The last turn of a route replaces it with the next one, so
+         stop here: carrying on would solve a route nobody asked for,
+         which is how this walk first read as a failure. */
+      if (s.over || s.routes > finished) return s;
+    }
+  }
+  return s;
+}
+
+test('a route is dealt, out of true, with a source and a target', () => {
+  const s = createGame({seed: 1, now: 0});
+  assert.equal(s.route.pieces.length, DEFAULTS.lengthStart);
+  assert.ok(s.route.source >= 0 && s.route.source < PORTS);
+  assert.ok(s.route.target >= 0 && s.route.target < PORTS);
+  assert.equal(connected(s.route), false, 'the route was dealt already finished');
+});
+
+test('every route dealt can be finished', () => {
+  /* Thirty seeds, several routes each: an unsolvable deal shows up as
+     one route in dozens, not as every route. */
+  for (let seed = 1; seed <= 30; seed++) {
+    let s = createGame({seed, now: 0});
+    for (let round = 0; round < 4; round++) {
+      const before = s.routes;
+      s = solve(s, round * 10);
+      assert.equal(s.routes, before + 1, `seed ${seed}: a route could not be finished`);
+    }
+  }
+});
+
+test('turning moves both openings together, which is the whole puzzle', () => {
+  const piece = {shape: {left: 0, right: 1}, turn: 0};
+  const before = openings(piece);
+  const after = openings({...piece, turn: 1});
+  assert.equal(after.left, (before.left + 1) % PORTS);
+  assert.equal(after.right, (before.right + 1) % PORTS);
+});
+
+test('a line is only connected when every join meets and it reaches the target', () => {
+  const route = {
+    source: 0,
+    target: 2,
+    pieces: [{shape: {left: 0, right: 1}, turn: 0}, {shape: {left: 1, right: 2}, turn: 0}],
+  };
+  assert.equal(connected(route), true);
+
+  const broken = {...route, pieces: [{...route.pieces[0], turn: 1}, route.pieces[1]]};
+  assert.equal(connected(broken), false, 'a broken join read as connected');
+
+  const wrongTarget = {...route, target: 0};
+  assert.equal(connected(wrongTarget), false, 'a line that ends nowhere read as connected');
+});
+
+test('finishing a route pays a bonus and deals the next one', () => {
+  let s = createGame({seed: 3, now: 0});
+  s = solve(s, 0);
+  assert.equal(s.routes, 1);
+  assert.ok(s.score >= DEFAULTS.pointsPerRoute);
+  assert.ok(s.route, 'no next route arrived');
+  assert.equal(connected(s.route), false);
+  assert.equal(s.lives, DEFAULTS.lives, 'finishing a route cost a life');
+});
+
+test('routes get longer, but never longer than a person will finish', () => {
+  let s = createGame({seed: 4, now: 0});
+  const lengths = [s.route.pieces.length];
+  for (let i = 0; i < 12 && !s.over; i++) {
+    s = solve(s, i * 10);
+    lengths.push(s.route.pieces.length);
+  }
+  assert.ok(Math.max(...lengths) > DEFAULTS.lengthStart, 'the routes never grew');
+  assert.ok(Math.max(...lengths) <= DEFAULTS.lengthMax, 'a route grew past its own ceiling');
+});
+
+test('turning is never punished, only the route that is never finished', () => {
+  let s = createGame({seed: 5, now: 0});
+  for (let i = 0; i < 20; i++) s = turn(s, i % s.route.pieces.length, 10);
+  assert.equal(s.lives, DEFAULTS.lives, 'fiddling with the connectors cost a life');
+  assert.ok(s.turns >= 20);
+});
+
+test('a connector that does not exist is ignored', () => {
+  const s = createGame({seed: 6, now: 0});
+  assert.equal(turn(s, 99, 0), s);
+  assert.equal(turn(s, -1, 0), s);
+});
+
+test('the payload arriving on an unfinished route costs a life', () => {
+  let s = createGame({seed: 7, now: 0});
+  const arrives = s.route.expiresAt;
+  s = step(s, arrives + 1);
+  assert.equal(s.lives, DEFAULTS.lives - 1);
+  assert.equal(s.last.result, 'spilled');
+  assert.ok(s.route, 'no fresh route after the spill');
+});
+
+test('three spills end it, and nothing turns afterwards', () => {
+  let s = createGame({seed: 8, now: 0});
+  let t = 0;
+  for (let i = 0; i < DEFAULTS.lives; i++) {
+    t = s.route.expiresAt + 1;
+    s = step(s, t);
+  }
+  assert.equal(s.over, true);
+  assert.equal(s.lives, 0);
+  assert.equal(turn(s, 0, t + 10).turns, s.turns);
+  assert.equal(step(s, t + 10000).lives, 0);
+});
+
+test('nothing spills before the payload is due', () => {
+  const s = createGame({seed: 9, now: 0});
+  assert.equal(step(s, s.route.expiresAt - 1).lives, DEFAULTS.lives);
+});
+
+test('the clock tightens with the score, down to a workable floor', () => {
+  const fresh = createGame({seed: 10, now: 0});
+  assert.equal(clockMs(fresh), DEFAULTS.clockStartMs);
+  assert.ok(clockMs({...fresh, score: 80}) < DEFAULTS.clockStartMs);
+  assert.equal(clockMs({...fresh, score: 9000}), DEFAULTS.clockFloorMs);
+});
+
+test('the countdown runs full to empty and no further', () => {
+  const s = createGame({seed: 11, now: 0});
+  assert.equal(remaining(s, 0), 1);
+  assert.equal(remaining(s, DEFAULTS.clockStartMs * 3), 0);
+});
+
+test('the same seed deals the same routes, a different one does not', () => {
+  const shape = (seed) => {
+    const s = createGame({seed, now: 0});
+    return `${s.route.source}>${s.route.pieces.map((p) => `${p.shape.left}${p.shape.right}:${p.turn}`).join(',')}>${s.route.target}`;
+  };
+  assert.equal(shape(21), shape(21));
+  assert.notEqual(shape(21), shape(22));
+});
+
+test('the summary reads as a sentence in both locales', () => {
+  const s = {routes: 5, turns: 34};
+  assert.match(summarise(s, 'en'), /5 routes connected · 34 turns/);
+  assert.match(summarise(s, 'nl'), /5 koppelingen gelegd · 34 keer gedraaid/);
+});

package/src/components/PipeFit/engine.js

@@ -0,0 +1,178 @@
+/**
+ * Pipe fit — the rules, with no DOM and no clock of its own.
+ *
+ * Integriq's game. A record is leaving one system for another and the
+ * route between them is half built. Turn each connector until the line
+ * runs end to end, before the payload arrives and finds a gap.
+ *
+ * A route is a row of connectors, each with an opening on its left and
+ * its right. Turning one moves both openings together, so fixing the
+ * join on one side can break the join on the other: that is the whole
+ * puzzle, and it is exactly what integrating two systems feels like.
+ *
+ * Time and randomness are injected; the component owns the clock.
+ */
+
+/* The three heights a connector can open at. A join works when the
+   right-hand opening of one meets the left-hand opening of the next. */
+export const PORTS = 3;
+
+export const DEFAULTS = {
+  lives: 3,
+  lengthStart: 3,
+  lengthMax: 6,
+  /* A route grows every few clears rather than every one: a puzzle
+     that gets longer each time outruns the clock before it gets
+     interesting. */
+  growEvery: 2,
+  clockStartMs: 26000,
+  clockFloorMs: 11000,
+  rampPerPoint: 55,
+  pointsPerTurn: 1,
+  pointsPerRoute: 20,
+};
+
+function mulberry32(seed) {
+  let a = seed >>> 0;
+  return function random() {
+    a |= 0; a = (a + 0x6D2B79F5) | 0;
+    let t = Math.imul(a ^ (a >>> 15), 1 | a);
+    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+export function clockMs(state) {
+  return Math.max(state.cfg.clockFloorMs, state.cfg.clockStartMs - state.score * state.cfg.rampPerPoint);
+}
+
+/**
+ * A connector is `{shape, turn}`. `shape` is the pair of openings as
+ * built, `turn` is how many times it has been turned; the openings
+ * that count are the shape rotated by the turn.
+ */
+export function openings(piece) {
+  return {
+    left: (piece.shape.left + piece.turn) % PORTS,
+    right: (piece.shape.right + piece.turn) % PORTS,
+  };
+}
+
+/** Does the whole route line up, source to consumer? */
+export function connected(route) {
+  if (!route || !route.pieces.length) return false;
+  let carry = route.source;
+  for (const piece of route.pieces) {
+    const {left, right} = openings(piece);
+    if (left !== carry) return false;
+    carry = right;
+  }
+  return carry === route.target;
+}
+
+/**
+ * Build a route that is solvable, then turn the pieces out of true.
+ *
+ * Built from a working line rather than at random: a route assembled
+ * by chance can be unsolvable, and an unsolvable puzzle on a clock
+ * reads to the player as a broken game.
+ */
+function deal(state, now, length) {
+  const source = Math.floor(state.random() * PORTS);
+  let carry = source;
+  const pieces = [];
+
+  for (let i = 0; i < length; i++) {
+    const right = Math.floor(state.random() * PORTS);
+    /* The shape is stored as if unturned, so that turning it back is
+       always possible. */
+    pieces.push({shape: {left: carry, right}, turn: 0});
+    carry = right;
+  }
+
+  const route = {source, target: carry, pieces, startedAt: now, expiresAt: now + clockMs(state)};
+
+  /* Now scramble. Keep scrambling until it is actually out of true,
+     or a route could be dealt already solved. */
+  let scrambled = route;
+  for (let attempt = 0; attempt < 8; attempt++) {
+    scrambled = {
+      ...route,
+      pieces: route.pieces.map((p) => ({...p, turn: Math.floor(state.random() * PORTS)})),
+    };
+    if (!connected(scrambled)) break;
+  }
+  return {...state, route: scrambled};
+}
+
+export function createGame({seed = Date.now(), now = 0, config = {}} = {}) {
+  const cfg = {...DEFAULTS, ...config};
+  const base = {
+    cfg,
+    random: mulberry32(seed),
+    route: null,
+    score: 0,
+    lives: cfg.lives,
+    routes: 0,
+    turns: 0,
+    last: null,
+    over: false,
+  };
+  return deal(base, now, cfg.lengthStart);
+}
+
+export function remaining(state, now) {
+  if (!state.route) return 0;
+  const total = state.route.expiresAt - state.route.startedAt;
+  if (total <= 0) return 0;
+  return Math.min(1, Math.max(0, (state.route.expiresAt - now) / total));
+}
+
+function nextLength(state) {
+  const grown = state.cfg.lengthStart + Math.floor((state.routes + 1) / state.cfg.growEvery);
+  return Math.min(state.cfg.lengthMax, grown);
+}
+
+/**
+ * Turn one connector.
+ *
+ * Completing the route scores and deals the next one. Turning is never
+ * punished: the mistake this game is about is the route that was never
+ * finished, not the fiddling on the way there.
+ */
+export function turn(state, index, now) {
+  if (state.over || !state.route) return state;
+  if (!Number.isInteger(index) || index < 0 || index >= state.route.pieces.length) return state;
+
+  const pieces = state.route.pieces.map((p, i) => (i === index ? {...p, turn: (p.turn + 1) % PORTS} : p));
+  const route = {...state.route, pieces};
+  const turned = {...state, route, turns: state.turns + 1, score: state.score + state.cfg.pointsPerTurn};
+
+  if (!connected(route)) return {...turned, last: {result: 'turned', at: now}};
+
+  const cleared = {
+    ...turned,
+    score: turned.score + turned.cfg.pointsPerRoute,
+    routes: turned.routes + 1,
+    last: {result: 'connected', at: now},
+  };
+  return deal(cleared, now, nextLength(cleared));
+}
+
+/** The payload arrives; an unfinished route costs a life. */
+export function step(state, now) {
+  if (state.over || !state.route) return state;
+  if (now < state.route.expiresAt) return state;
+
+  const lives = state.lives - 1;
+  const hit = {...state, lives, last: {result: 'spilled', at: now}, over: lives <= 0};
+  return hit.over ? {...hit, route: null} : deal(hit, now, state.route.pieces.length);
+}
+
+/** The line that goes on the game-over card and into the post. */
+export function summarise(state, locale = 'en') {
+  const n = (v) => Number(v || 0).toLocaleString(locale);
+  return locale === 'nl'
+    ? `${n(state.routes)} koppelingen gelegd · ${n(state.turns)} keer gedraaid`
+    : `${n(state.routes)} routes connected · ${n(state.turns)} turns`;
+}