@conduction/docusaurus-preset 3.42.0 → 3.44.0

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

@@ -0,0 +1,218 @@
+/**
+ * engine.test.js — the monster-run rules.
+ *
+ * The property the whole game rests on: obstacles never arrive so close
+ * together that no posture gets past both. The monster cannot be in the
+ * air and crouched at once, so a pair like that is a death the player
+ * could not have avoided, and an arcade game that kills you for nothing
+ * is one nobody plays twice.
+ */
+
+'use strict';
+
+const test = require('node:test');
+const assert = require('node:assert/strict');
+
+const {
+  createGame, step, jump, duck, clears, stepMs, summarise,
+  TRACK, LOW, HIGH, OBSTACLES, PARTS, DEFAULTS,
+} = require('../engine.js');
+
+/** Play the run properly: jump what is low, duck what is high. */
+function playWell(state, steps) {
+  let s = state;
+  let t = s.nextStepAt;
+  for (let i = 0; i < steps && !s.over; i++) {
+    const incoming = s.track[0];
+    if (incoming && incoming.kind === 'obstacle') {
+      s = incoming.lane === LOW ? jump(s) : duck(s);
+    }
+    s = step(s, t);
+    t = s.nextStepAt;
+  }
+  return s;
+}
+
+test('a run starts on a full track, upright and alive', () => {
+  const s = createGame({seed: 1, now: 0});
+  assert.equal(s.track.length, TRACK);
+  assert.equal(s.posture, 'run');
+  assert.equal(s.lives, DEFAULTS.lives);
+  assert.equal(s.over, false);
+});
+
+test('the run starts on empty road, so nothing is hit before a key is touched', () => {
+  /* Found by playing it: the initial fill could drop an obstacle at
+     the monster's feet, and the run cost a life in its first second. */
+  for (let seed = 1; seed <= 30; seed++) {
+    const s = createGame({seed, now: 0});
+    const runUp = s.track.slice(0, DEFAULTS.leadIn);
+    assert.ok(
+      runUp.every((cell) => cell === null),
+      `seed ${seed}: the run starts with something already in the way`,
+    );
+  }
+});
+
+test('a run that is left alone survives its own lead-in', () => {
+  let s = createGame({seed: 9, now: 0});
+  for (let i = 0; i < DEFAULTS.leadIn; i++) s = step(s, s.nextStepAt);
+  assert.equal(s.lives, DEFAULTS.lives, 'a life went before the player could react');
+  assert.equal(s.over, false);
+});
+
+test('obstacles never arrive without room to answer the one before', () => {
+  /* Forty seeds, a few hundred steps each. A bad pair shows up as one
+     run in dozens, not as every run. */
+  for (let seed = 1; seed <= 40; seed++) {
+    let s = createGame({seed, now: 0});
+    let sinceObstacle = DEFAULTS.minGap;
+    let t = s.nextStepAt;
+    for (let i = 0; i < 300 && !s.over; i++) {
+      const incoming = s.track[0];
+      if (incoming && incoming.kind === 'obstacle') {
+        assert.ok(
+          sinceObstacle >= DEFAULTS.minGap,
+          `seed ${seed}: two obstacles ${sinceObstacle} steps apart, which no posture clears`,
+        );
+        sinceObstacle = 0;
+        s = incoming.lane === LOW ? jump(s) : duck(s);
+      } else {
+        sinceObstacle += 1;
+      }
+      s = step(s, t);
+      t = s.nextStepAt;
+    }
+  }
+});
+
+test('jumping clears what is on the ground, ducking clears what is overhead', () => {
+  assert.equal(clears('jump', {kind: 'obstacle', lane: LOW}), true);
+  assert.equal(clears('run', {kind: 'obstacle', lane: LOW}), false);
+  assert.equal(clears('duck', {kind: 'obstacle', lane: LOW}), false, 'crouching under a fork');
+
+  assert.equal(clears('duck', {kind: 'obstacle', lane: HIGH}), true);
+  assert.equal(clears('jump', {kind: 'obstacle', lane: HIGH}), false, 'jumping into the thing overhead');
+  assert.equal(clears('run', {kind: 'obstacle', lane: HIGH}), false);
+});
+
+test('an empty track and a part are cleared by any posture', () => {
+  for (const posture of ['run', 'jump', 'duck']) {
+    assert.equal(clears(posture, null), true);
+    assert.equal(clears(posture, {kind: 'part', what: 'token'}), true);
+  }
+});
+
+test('running into what you did not clear costs a life and names it', () => {
+  let s = createGame({seed: 3, now: 0});
+  s = {...s, track: [{kind: 'obstacle', what: 'fork', lane: LOW}, ...s.track.slice(1)]};
+  s = step(s, s.nextStepAt);
+  assert.equal(s.lives, DEFAULTS.lives - 1);
+  assert.equal(s.hits, 1);
+  assert.equal(s.last.result, 'hit');
+  assert.equal(s.last.what, 'fork');
+});
+
+test('a part is picked up whatever the monster is doing', () => {
+  let s = createGame({seed: 4, now: 0});
+  s = {...s, track: [{kind: 'part', what: 'token', lane: HIGH}, ...s.track.slice(1)]};
+  s = step(jump(s), s.nextStepAt);
+  assert.equal(s.collected, 1);
+  assert.equal(s.score, DEFAULTS.pointsPerPart);
+});
+
+test('a posture wears off, and cannot be changed mid-air', () => {
+  let s = createGame({seed: 5, now: 0});
+  s = jump(s);
+  assert.equal(s.posture, 'jump');
+  assert.equal(duck(s).posture, 'jump', 'the monster ducked while airborne');
+
+  for (let i = 0; i < DEFAULTS.jumpSteps; i++) s = step(s, s.nextStepAt);
+  assert.equal(s.posture, 'run', 'the jump never ended');
+});
+
+test('three hits end the run, and nothing moves afterwards', () => {
+  let s = createGame({seed: 6, now: 0});
+  for (let i = 0; i < 3; i++) {
+    s = {...s, track: [{kind: 'obstacle', what: 'fork', lane: LOW}, ...s.track.slice(1)]};
+    s = step(s, s.nextStepAt);
+  }
+  assert.equal(s.over, true);
+  assert.equal(s.lives, 0);
+  assert.equal(step(s, s.nextStepAt + 10000).distance, s.distance);
+  assert.equal(jump(s).posture, s.posture, 'the monster jumped after the run ended');
+});
+
+test('nothing happens between steps', () => {
+  const s = createGame({seed: 7, now: 0});
+  const early = step(s, s.nextStepAt - 1);
+  assert.equal(early.distance, 0);
+  assert.equal(step(s, s.nextStepAt).distance, 1);
+});
+
+test('the run speeds up with the score, down to a floor a person can react in', () => {
+  const fresh = createGame({seed: 8, now: 0});
+  assert.equal(stepMs(fresh), DEFAULTS.stepStartMs);
+  assert.ok(stepMs({...fresh, score: 50}) < DEFAULTS.stepStartMs);
+  assert.equal(stepMs({...fresh, score: 9000}), DEFAULTS.stepFloorMs);
+});
+
+test('a player who reads the track survives a long run', () => {
+  for (const seed of [11, 12, 13]) {
+    const s = playWell(createGame({seed, now: 0}), 250);
+    assert.equal(s.over, false, `seed ${seed}: playing correctly still ended the run`);
+    assert.equal(s.lives, DEFAULTS.lives);
+    assert.ok(s.distance > 200);
+    assert.ok(s.score > 0);
+  }
+});
+
+test('the track deals both kinds of obstacle and something worth collecting', () => {
+  const seen = new Set();
+  let s = createGame({seed: 21, now: 0});
+  let t = s.nextStepAt;
+  for (let i = 0; i < 400 && !s.over; i++) {
+    const incoming = s.track[0];
+    if (incoming) seen.add(incoming.kind === 'obstacle' ? `o:${incoming.lane}` : 'part');
+    if (incoming && incoming.kind === 'obstacle') s = incoming.lane === LOW ? jump(s) : duck(s);
+    s = step(s, t);
+    t = s.nextStepAt;
+  }
+  assert.ok(seen.has(`o:${LOW}`), 'nothing ever arrived on the ground');
+  assert.ok(seen.has(`o:${HIGH}`), 'nothing ever arrived overhead');
+  assert.ok(seen.has('part'), 'there was never anything to collect');
+});
+
+test('every obstacle and part the generator makes is one the game knows', () => {
+  const obstacleKeys = OBSTACLES.map((o) => o.key);
+  let s = createGame({seed: 31, now: 0});
+  let t = s.nextStepAt;
+  for (let i = 0; i < 300 && !s.over; i++) {
+    for (const cell of s.track) {
+      if (!cell) continue;
+      if (cell.kind === 'obstacle') {
+        assert.ok(obstacleKeys.includes(cell.what), `unknown obstacle ${cell.what}`);
+        assert.ok([LOW, HIGH].includes(cell.lane));
+      } else {
+        assert.ok(PARTS.includes(cell.what), `unknown part ${cell.what}`);
+      }
+    }
+    const incoming = s.track[0];
+    if (incoming && incoming.kind === 'obstacle') s = incoming.lane === LOW ? jump(s) : duck(s);
+    s = step(s, t);
+    t = s.nextStepAt;
+  }
+});
+
+test('the same seed runs the same track, a different one does not', () => {
+  const shape = (seed) => createGame({seed, now: 0}).track
+    .map((c) => (c ? `${c.kind[0]}${c.lane[0]}` : '-')).join('');
+  assert.equal(shape(41), shape(41));
+  assert.notEqual(shape(41), shape(42));
+});
+
+test('the summary reads as a sentence in both locales', () => {
+  const s = {distance: 240, collected: 9};
+  assert.match(summarise(s, 'en'), /240 strides · 9 parts/);
+  assert.match(summarise(s, 'nl'), /240 stappen · 9 onderdelen/);
+});

package/src/components/MonsterRun/engine.js

@@ -0,0 +1,194 @@
+/**
+ * Monster run — the rules, with no DOM and no clock of its own.
+ *
+ * La Frankendesk's game, and the only one that belongs to a blog post
+ * rather than an app. The monster the post assembles goes for a run:
+ * jump the forks, duck the patch sets, and pick up the parts it was
+ * stitched together from.
+ *
+ * The joke is the obstacles. A fork is what a maintenance bill looks
+ * like, a patch set is what you carry forever, and a release train
+ * arrives whether you are ready or not. The things worth collecting
+ * are the ones the post argues are already shared: a token, a
+ * protocol, a component.
+ *
+ * Two inputs, jump and duck, which is what makes it a runner rather
+ * than a fourth game about picking the right answer. Time and
+ * randomness are injected; the component owns the clock.
+ */
+
+/* Where a thing sits, which decides what gets you past it. */
+export const LOW = 'low';    // on the ground: jump it
+export const HIGH = 'high';  // overhead: duck under it
+
+export const OBSTACLES = [
+  {key: 'fork', lane: LOW},
+  {key: 'patchset', lane: HIGH},
+  {key: 'releaseTrain', lane: LOW},
+  {key: 'designLanguage', lane: HIGH},
+];
+
+export const PARTS = ['token', 'protocol', 'component'];
+
+/* The track is a line of columns. The monster stands at column 0 and
+   the world walks towards it. */
+export const TRACK = 14;
+
+export const DEFAULTS = {
+  lives: 3,
+  stepStartMs: 300,
+  stepFloorMs: 120,
+  rampPerPoint: 0.9,
+  /* Airborne and crouched both last a couple of steps, so timing is a
+     decision rather than a reflex: commit early and you land in it. */
+  jumpSteps: 2,
+  duckSteps: 2,
+  obstacleChance: 0.42,
+  partChance: 0.26,
+  /* Never two obstacles back to back: the monster cannot be in the air
+     and crouched at once, and a run that kills you whatever you do is
+     the fastest way to make a player stop. */
+  minGap: 2,
+  /* The first stretch is always empty. The track is filled before the
+     run starts so obstacles are visible before they arrive, but that
+     fill can put one at the monster's feet: the run then costs a life
+     in its first second, before the player has touched a key. */
+  leadIn: 5,
+  pointsPerStep: 1,
+  pointsPerPart: 6,
+};
+
+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;
+  };
+}
+
+/** What the far end of the track should hold next. */
+function spawn(state) {
+  if (state.sinceObstacle < state.cfg.minGap) {
+    /* Too soon for another obstacle, but a part is welcome. */
+    if (state.random() < state.cfg.partChance) {
+      return {kind: 'part', what: PARTS[Math.floor(state.random() * PARTS.length)], lane: state.random() < 0.5 ? LOW : HIGH};
+    }
+    return null;
+  }
+  if (state.random() < state.cfg.obstacleChance) {
+    const pick = OBSTACLES[Math.floor(state.random() * OBSTACLES.length)];
+    return {kind: 'obstacle', what: pick.key, lane: pick.lane};
+  }
+  if (state.random() < state.cfg.partChance) {
+    return {kind: 'part', what: PARTS[Math.floor(state.random() * PARTS.length)], lane: state.random() < 0.5 ? LOW : HIGH};
+  }
+  return null;
+}
+
+export function createGame({seed = Date.now(), now = 0, config = {}} = {}) {
+  const cfg = {...DEFAULTS, ...config};
+  let state = {
+    cfg,
+    random: mulberry32(seed),
+    track: Array.from({length: TRACK}, () => null),
+    posture: 'run',      // run | jump | duck
+    postureFor: 0,       // steps left in the current posture
+    lives: cfg.lives,
+    score: 0,
+    distance: 0,
+    collected: 0,
+    hits: 0,
+    sinceObstacle: cfg.minGap,
+    nextStepAt: now + cfg.stepStartMs,
+    last: null,
+    over: false,
+  };
+  /* Fill the track so the first obstacles are visible before they
+     arrive, rather than appearing under the monster's feet. */
+  for (let i = 0; i < TRACK; i++) {
+    const cell = spawn(state);
+    state = {
+      ...state,
+      track: [...state.track.slice(1), cell],
+      sinceObstacle: cell && cell.kind === 'obstacle' ? 0 : state.sinceObstacle + 1,
+    };
+  }
+  /* Then clear the run-up, so the first thing to answer is one the
+     player watched coming. */
+  const track = [...state.track];
+  for (let i = 0; i < Math.min(cfg.leadIn, track.length); i++) track[i] = null;
+  return {...state, track};
+}
+
+export function stepMs(state) {
+  return Math.max(state.cfg.stepFloorMs, state.cfg.stepStartMs - state.score * state.cfg.rampPerPoint);
+}
+
+/** Jump, if the monster has its feet on the ground. */
+export function jump(state) {
+  if (state.over || state.posture !== 'run') return state;
+  return {...state, posture: 'jump', postureFor: state.cfg.jumpSteps};
+}
+
+/** Duck, same rule: no changing your mind mid-air. */
+export function duck(state) {
+  if (state.over || state.posture !== 'run') return state;
+  return {...state, posture: 'duck', postureFor: state.cfg.duckSteps};
+}
+
+/** Does the current posture get the monster past this cell? */
+export function clears(posture, cell) {
+  if (!cell || cell.kind !== 'obstacle') return true;
+  if (cell.lane === LOW) return posture === 'jump';
+  return posture === 'duck';
+}
+
+/**
+ * Advance one step: the world moves one column closer, the monster
+ * meets whatever arrives at its own column, and its posture wears off.
+ */
+export function step(state, now) {
+  if (state.over || now < state.nextStepAt) return state;
+
+  const arriving = state.track[0];
+  let next = {...state, distance: state.distance + 1};
+
+  if (arriving && arriving.kind === 'obstacle' && !clears(state.posture, arriving)) {
+    const lives = next.lives - 1;
+    next = {...next, lives, hits: next.hits + 1, last: {result: 'hit', what: arriving.what, at: now}, over: lives <= 0};
+  } else if (arriving && arriving.kind === 'part') {
+    /* A part is taken by running into it, whatever the posture: the
+       monster is made of these, it does not have to reach. */
+    next = {
+      ...next,
+      score: next.score + next.cfg.pointsPerPart,
+      collected: next.collected + 1,
+      last: {result: 'part', what: arriving.what, at: now},
+    };
+  } else {
+    next = {...next, score: next.score + next.cfg.pointsPerStep, last: {result: 'clear', at: now}};
+  }
+
+  if (next.over) return next;
+
+  const postureFor = Math.max(0, next.postureFor - 1);
+  const cell = spawn(next);
+  return {
+    ...next,
+    posture: postureFor === 0 ? 'run' : next.posture,
+    postureFor,
+    track: [...next.track.slice(1), cell],
+    sinceObstacle: cell && cell.kind === 'obstacle' ? 0 : next.sinceObstacle + 1,
+    nextStepAt: now + stepMs(next),
+  };
+}
+
+/** 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.distance)} stappen · ${n(state.collected)} onderdelen`
+    : `${n(state.distance)} strides · ${n(state.collected)} parts`;
+}

package/src/components/PipeFit/PipeFit.jsx

@@ -0,0 +1,221 @@
+/**
+ * <PipeFit />
+ *
+ * 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.
+ *
+ * Turning a connector moves both its openings at once, so fixing the
+ * join on one side can break the join on the other. That is the whole
+ * puzzle, and it is what connecting two systems actually feels like.
+ *
+ * The rules live in ./engine.js with no DOM and no clock.
+ *
+ * Usage:
+ *
+ *   <PipeFit />
+ *
+ * Fires the shared `connext:gameend` event on game over, and listens
+ * for `connext:gamereplay`.
+ *
+ * Accessibility: every connector is a button that says which openings
+ * it currently has and whether it meets its neighbour, so the route
+ * can be read and solved without seeing the diagram.
+ */
+
+import React, {useCallback, useEffect, useRef, useState} from 'react';
+import {translate} from '@docusaurus/Translate';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import {createGame, turn, step, openings, connected, remaining, summarise} from './engine';
+import styles from './PipeFit.module.css';
+
+const GAME_ID = 'pipe-fit';
+const TICK_MS = 100;
+
+/* Ports are heights, and heights have names: a route read aloud as
+   "top meets middle" is one you can solve with your eyes shut. */
+function portName(port) {
+  if (port === 0) {
+    return translate({id: 'preset.pipeFit.port.top', message: 'top', description: 'The upper opening of a connector'});
+  }
+  if (port === 1) {
+    return translate({id: 'preset.pipeFit.port.middle', message: 'middle', description: 'The middle opening of a connector'});
+  }
+  return translate({id: 'preset.pipeFit.port.bottom', message: 'bottom', description: 'The lower opening of a connector'});
+}
+
+export default function PipeFit({className}) {
+  const {i18n} = useDocusaurusContext();
+  const locale = (i18n && i18n.currentLocale) || 'en';
+
+  const [game, setGame] = useState(null);
+  const [left, setLeft] = useState(1);
+  const gameRef = useRef(null);
+  const startedAtRef = useRef(0);
+  const endedRef = useRef(false);
+
+  const running = Boolean(game) && !game.over;
+  const now = () => (typeof performance !== 'undefined' ? performance.now() : Date.now()) - startedAtRef.current;
+
+  const begin = useCallback(() => {
+    endedRef.current = false;
+    startedAtRef.current = (typeof performance !== 'undefined' ? performance.now() : Date.now());
+    const fresh = createGame({seed: Math.floor(Math.random() * 2 ** 31), now: 0});
+    gameRef.current = fresh;
+    setGame(fresh);
+    setLeft(1);
+  }, []);
+
+  useEffect(() => {
+    if (!running) return undefined;
+    const id = setInterval(() => {
+      const t = now();
+      const next = step(gameRef.current, t);
+      gameRef.current = next;
+      setGame(next);
+      setLeft(remaining(next, t));
+    }, TICK_MS);
+    return () => clearInterval(id);
+  }, [running]);
+
+  useEffect(() => {
+    if (!game || !game.over || endedRef.current) return;
+    endedRef.current = true;
+    if (typeof window === 'undefined') return;
+    window.dispatchEvent(new CustomEvent('connext:gameend', {
+      detail: {
+        id: GAME_ID,
+        won: false,
+        score: game.score,
+        summary: summarise(game, locale),
+        title: translate({id: 'preset.pipeFit.over.title', message: 'It went nowhere.', description: 'Headline on the game-over dialog after a pipe-fit run'}),
+        subtitle: translate({id: 'preset.pipeFit.over.subtitle', message: 'Three payloads into a gap. Somebody will notice next quarter.', description: 'Subtitle on the game-over dialog after a pipe-fit run'}),
+      },
+    }));
+  }, [game, locale]);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return undefined;
+    const onReplay = (e) => { if (e.detail && e.detail.id === GAME_ID) begin(); };
+    window.addEventListener('connext:gamereplay', onReplay);
+    return () => window.removeEventListener('connext:gamereplay', onReplay);
+  }, [begin]);
+
+  const rotate = useCallback((index) => {
+    if (!gameRef.current || gameRef.current.over) return;
+    const t = now();
+    const next = turn(gameRef.current, index, t);
+    gameRef.current = next;
+    setGame(next);
+    setLeft(remaining(next, t));
+  }, []);
+
+  const route = game ? game.route : null;
+  const last = game ? game.last : null;
+  const pct = Math.round(left * 100);
+
+  /* What each piece is carrying in, so a join can be judged. */
+  const carries = [];
+  if (route) {
+    let carry = route.source;
+    for (const piece of route.pieces) {
+      carries.push(carry);
+      carry = openings(piece).right;
+    }
+  }
+
+  return (
+    <section className={[styles.pf, className].filter(Boolean).join(' ')} aria-labelledby="pipe-fit-title">
+      <header className={styles.head}>
+        <div>
+          <p className={styles.eyebrow}>
+            {translate({id: 'preset.pipeFit.eyebrow', message: 'Mini-game', description: 'Eyebrow above the pipe-fit game on a product page'})}
+          </p>
+          <h3 className={styles.title} id="pipe-fit-title">
+            {translate({id: 'preset.pipeFit.title', message: 'Make the connection', description: 'Name of the Integriq mini-game'})}
+          </h3>
+          <p className={styles.lede}>
+            {translate({id: 'preset.pipeFit.lede', message: 'A record is on its way from one system to another and the route is half built. Turn the connectors until the line runs end to end. Turning one moves both its openings, which is the whole problem.', description: 'One-line explanation of the pipe-fit rules'})}
+          </p>
+        </div>
+        <div className={styles.hud} role="status" aria-live="polite">
+          <span className={styles.hudPill}>
+            {translate({id: 'preset.pipeFit.hud.score', message: 'Score {score}', description: 'Score readout on the pipe-fit HUD'}, {score: Number(game ? game.score : 0).toLocaleString(locale)})}
+          </span>
+          <span className={styles.hudPill}>
+            {translate({id: 'preset.pipeFit.hud.lives', message: 'Payloads left {lives}', description: 'Remaining-lives readout on the pipe-fit HUD'}, {lives: game ? game.lives : 3})}
+          </span>
+        </div>
+      </header>
+
+      {route ? (
+        <>
+          <div className={styles.route}>
+            <span className={[styles.end, styles[`port-${route.source}`]].join(' ')}>
+              {translate({id: 'preset.pipeFit.source', message: 'Source', description: 'The system a record leaves in the pipe-fit game'})}
+            </span>
+
+            {route.pieces.map((piece, i) => {
+              const {left: inPort, right: outPort} = openings(piece);
+              const joined = inPort === carries[i];
+              return (
+                <button
+                  key={i}
+                  type="button"
+                  className={[styles.piece, joined ? styles.joined : styles.gap].join(' ')}
+                  onClick={() => rotate(i)}
+                  disabled={!running}
+                  aria-label={translate(
+                    {id: 'preset.pipeFit.piece', message: 'Connector {n}: opens {in} to {out}, {state}. Turn it.', description: 'Accessible label for one connector. {in} and {out} are openings, {state} says whether it meets the piece before it.'},
+                    {
+                      n: i + 1,
+                      in: portName(inPort),
+                      out: portName(outPort),
+                      state: joined
+                        ? translate({id: 'preset.pipeFit.piece.joined', message: 'meets the one before it', description: 'State of a connector that lines up'})
+                        : translate({id: 'preset.pipeFit.piece.gap', message: 'does not meet the one before it', description: 'State of a connector that does not line up'}),
+                    },
+                  )}>
+                  <span className={[styles.mouth, styles[`port-${inPort}`]].join(' ')} aria-hidden="true" />
+                  <span className={styles.barrel} aria-hidden="true" />
+                  <span className={[styles.mouth, styles[`port-${outPort}`]].join(' ')} aria-hidden="true" />
+                </button>
+              );
+            })}
+
+            <span className={[styles.end, styles[`port-${route.target}`]].join(' ')}>
+              {translate({id: 'preset.pipeFit.target', message: 'Consumer', description: 'The system a record arrives at in the pipe-fit game'})}
+            </span>
+          </div>
+
+          <div
+            className={styles.clock}
+            role="progressbar"
+            aria-valuemin={0}
+            aria-valuemax={100}
+            aria-valuenow={pct}
+            aria-label={translate({id: 'preset.pipeFit.clock', message: 'Time before the payload arrives', description: 'Accessible name of the pipe-fit countdown'})}>
+            <div className={[styles.clockFill, left < 0.3 && styles.clockLow].filter(Boolean).join(' ')} style={{width: `${pct}%`}} />
+          </div>
+        </>
+      ) : (
+        <p className={styles.idle}>
+          {translate({id: 'preset.pipeFit.idle', message: 'Two systems, and nothing in between them yet.', description: 'Placeholder before the pipe-fit game starts'})}
+        </p>
+      )}
+
+      <footer className={styles.foot}>
+        <button type="button" className={styles.start} onClick={begin}>
+          {game
+            ? translate({id: 'preset.pipeFit.restart', message: 'Restart', description: 'Button that restarts the pipe-fit game'})
+            : translate({id: 'preset.pipeFit.start', message: 'Send it', description: 'Button that starts the pipe-fit game'})}
+        </button>
+        <p className={styles.hint} role="status" aria-live="polite">
+          {last && last.result === 'connected' && translate({id: 'preset.pipeFit.feedback.connected', message: 'Through. The next one is longer.', description: 'Feedback after completing a route'})}
+          {last && last.result === 'spilled' && translate({id: 'preset.pipeFit.feedback.spilled', message: 'The payload arrived and found a gap.', description: 'Feedback after the clock runs out'})}
+          {(!last || last.result === 'turned') && translate({id: 'preset.pipeFit.hint', message: 'Click a connector to turn it. Both of its openings move together.', description: 'Hint under the pipe-fit route'})}
+        </p>
+      </footer>
+    </section>
+  );
+}