@conduction/docusaurus-preset 3.42.0 → 3.43.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/docusaurus-preset",
-  "version": "3.42.0",
+  "version": "3.43.0",
   "scripts": {
     "prepack": "node scripts/prepack-bundle-css.js",
     "test": "node --test"

package/src/components/MonsterRun/MonsterRun.jsx

@@ -0,0 +1,233 @@
+/**
+ * <MonsterRun />
+ *
+ * La Frankendesk's game, and the only one that belongs to a blog post
+ * rather than an app. The monster the post stitches together goes for
+ * a run: jump the forks, duck the patch sets, collect the parts it was
+ * made of.
+ *
+ * The obstacles are the post's own argument. A fork is a permanent
+ * maintenance bill, a patch set is a thing you carry forever, a
+ * release train arrives whether you are ready or not, and a design
+ * language is the thing you keep walking into. What is worth picking
+ * up is what the post says is already shared: a token, a protocol, a
+ * component.
+ *
+ * Two inputs, jump and duck, so it is a runner rather than a fourth
+ * game about picking the right answer. The rules live in ./engine.js
+ * with no DOM and no clock.
+ *
+ * Usage:
+ *
+ *   <MonsterRun />
+ *
+ * Fires the shared `connext:gameend` event on game over, and listens
+ * for `connext:gamereplay`, like every other mini-game.
+ *
+ * Accessibility: jump and duck are real buttons as well as arrow keys,
+ * and the track ahead is announced as a sentence, so the run can be
+ * played by someone who cannot see it coming.
+ */
+
+import React, {useCallback, useEffect, useRef, useState} from 'react';
+import {translate} from '@docusaurus/Translate';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import {createGame, step, jump, duck, summarise, LOW} from './engine';
+import styles from './MonsterRun.module.css';
+
+const GAME_ID = 'monster-run';
+const TICK_MS = 40;
+
+function obstacleCopy(what) {
+  switch (what) {
+    case 'fork':
+      return translate({id: 'preset.monsterRun.obstacle.fork', message: 'a fork', description: 'Monster-run obstacle on the ground: a fork of the code'});
+    case 'patchset':
+      return translate({id: 'preset.monsterRun.obstacle.patchset', message: 'a patch set', description: 'Monster-run obstacle overhead: a patch set'});
+    case 'releaseTrain':
+      return translate({id: 'preset.monsterRun.obstacle.releaseTrain', message: 'a release train', description: 'Monster-run obstacle on the ground: a release train'});
+    default:
+      return translate({id: 'preset.monsterRun.obstacle.designLanguage', message: 'another design language', description: 'Monster-run obstacle overhead: a design language'});
+  }
+}
+
+function partCopy(what) {
+  switch (what) {
+    case 'token':
+      return translate({id: 'preset.monsterRun.part.token', message: 'a token', description: 'Monster-run pick-up: a design token'});
+    case 'protocol':
+      return translate({id: 'preset.monsterRun.part.protocol', message: 'a protocol', description: 'Monster-run pick-up: a protocol'});
+    default:
+      return translate({id: 'preset.monsterRun.part.component', message: 'a component', description: 'Monster-run pick-up: a component'});
+  }
+}
+
+export default function MonsterRun({className}) {
+  const {i18n} = useDocusaurusContext();
+  const locale = (i18n && i18n.currentLocale) || 'en';
+
+  const [game, setGame] = useState(null);
+  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);
+  }, []);
+
+  useEffect(() => {
+    if (!running) return undefined;
+    const id = setInterval(() => {
+      const next = step(gameRef.current, now());
+      if (next !== gameRef.current) {
+        gameRef.current = next;
+        setGame(next);
+      }
+    }, 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.monsterRun.over.title', message: 'The monster is down.', description: 'Headline on the game-over dialog after a monster-run run'}),
+        subtitle: translate({id: 'preset.monsterRun.over.subtitle', message: 'Three forks will do that. The parts were never the problem.', description: 'Subtitle on the game-over dialog after a monster-run 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 act = useCallback((what) => {
+    if (!gameRef.current || gameRef.current.over) return;
+    const next = what === 'jump' ? jump(gameRef.current) : duck(gameRef.current);
+    gameRef.current = next;
+    setGame(next);
+  }, []);
+
+  useEffect(() => {
+    if (!running || typeof window === 'undefined') return undefined;
+    const onKey = (e) => {
+      if (e.key === 'ArrowUp' || e.key === ' ' || e.key === 'w') { e.preventDefault(); act('jump'); }
+      if (e.key === 'ArrowDown' || e.key === 's') { e.preventDefault(); act('duck'); }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [running, act]);
+
+  const track = game ? game.track : [];
+  const posture = game ? game.posture : 'run';
+  const last = game ? game.last : null;
+
+  /* What is coming, in words, for anyone who cannot watch it come. */
+  const incoming = track.slice(0, 4).find((c) => c && c.kind === 'obstacle');
+  const ahead = incoming
+    ? translate(
+        {id: 'preset.monsterRun.ahead', message: 'Coming up: {what}, {where}', description: 'Spoken description of the next obstacle. {what} is the obstacle, {where} says whether to jump or duck.'},
+        {
+          what: obstacleCopy(incoming.what),
+          where: incoming.lane === LOW
+            ? translate({id: 'preset.monsterRun.ahead.low', message: 'on the ground', description: 'Where a monster-run obstacle sits when it must be jumped'})
+            : translate({id: 'preset.monsterRun.ahead.high', message: 'overhead', description: 'Where a monster-run obstacle sits when it must be ducked'}),
+        },
+      )
+    : translate({id: 'preset.monsterRun.ahead.clear', message: 'The way ahead is clear.', description: 'Spoken description when no monster-run obstacle is near'});
+
+  return (
+    <section className={[styles.mr, className].filter(Boolean).join(' ')} aria-labelledby="monster-run-title">
+      <header className={styles.head}>
+        <div>
+          <p className={styles.eyebrow}>
+            {translate({id: 'preset.monsterRun.eyebrow', message: 'Mini-game', description: 'Eyebrow above the monster-run game'})}
+          </p>
+          <h3 className={styles.title} id="monster-run-title">
+            {translate({id: 'preset.monsterRun.title', message: 'The monster goes for a run', description: 'Name of the La Frankendesk mini-game'})}
+          </h3>
+          <p className={styles.lede}>
+            {translate({id: 'preset.monsterRun.lede', message: 'Jump the forks, duck the patch sets, and pick up the parts it was stitched together from. The parts were never the problem.', description: 'One-line explanation of the monster-run rules'})}
+          </p>
+        </div>
+        <div className={styles.hud} role="status" aria-live="polite">
+          <span className={styles.hudPill}>
+            {translate({id: 'preset.monsterRun.hud.score', message: 'Score {score}', description: 'Score readout on the monster-run HUD'}, {score: Number(game ? game.score : 0).toLocaleString(locale)})}
+          </span>
+          <span className={styles.hudPill}>
+            {translate({id: 'preset.monsterRun.hud.lives', message: 'Stitches {lives}', description: 'Remaining-lives readout on the monster-run HUD'}, {lives: game ? game.lives : 3})}
+          </span>
+        </div>
+      </header>
+
+      <div className={styles.stage} aria-hidden="true">
+        <div className={[styles.monster, styles[`posture-${posture}`]].filter(Boolean).join(' ')}>
+          <span className={styles.head1} />
+          <span className={styles.body1} />
+          <span className={styles.bolt} />
+        </div>
+
+        <div className={styles.track}>
+          {track.map((cell, i) => (
+            <span
+              key={i}
+              className={[
+                styles.cell,
+                cell && cell.kind === 'obstacle' && styles.obstacle,
+                cell && cell.kind === 'part' && styles.part,
+                cell && cell.lane === LOW ? styles.low : cell && styles.high,
+              ].filter(Boolean).join(' ')}>
+              {cell && (cell.kind === 'obstacle' ? obstacleCopy(cell.what) : partCopy(cell.what))}
+            </span>
+          ))}
+        </div>
+        <span className={styles.ground} />
+      </div>
+
+      <p className={styles.ahead} role="status" aria-live="polite">
+        {game ? ahead : translate({id: 'preset.monsterRun.idle', message: 'It has been lying on the table since the last section.', description: 'Placeholder before the monster-run game starts'})}
+      </p>
+
+      <div className={styles.controls}>
+        <button type="button" className={styles.action} onClick={() => act('jump')} disabled={!running}>
+          {translate({id: 'preset.monsterRun.jump', message: 'Jump', description: 'Button that makes the monster jump'})}
+        </button>
+        <button type="button" className={styles.action} onClick={() => act('duck')} disabled={!running}>
+          {translate({id: 'preset.monsterRun.duck', message: 'Duck', description: 'Button that makes the monster duck'})}
+        </button>
+        <button type="button" className={styles.start} onClick={begin}>
+          {game
+            ? translate({id: 'preset.monsterRun.restart', message: 'Again', description: 'Button that restarts the monster-run game'})
+            : translate({id: 'preset.monsterRun.start', message: 'It lives', description: 'Button that starts the monster-run game'})}
+        </button>
+        <p className={styles.hint}>
+          {last && last.result === 'hit' && translate(
+            {id: 'preset.monsterRun.feedback.hit', message: 'Straight into {what}.', description: 'Feedback after hitting an obstacle. {what} is the obstacle.'},
+            {what: obstacleCopy(last.what)},
+          )}
+          {last && last.result === 'part' && translate(
+            {id: 'preset.monsterRun.feedback.part', message: 'Picked up {what}.', description: 'Feedback after collecting a part. {what} is the part.'},
+            {what: partCopy(last.what)},
+          )}
+          {(!last || last.result === 'clear') && translate({id: 'preset.monsterRun.hint', message: 'Up jumps, down ducks. Arrow keys work too.', description: 'Hint under the monster-run controls'})}
+        </p>
+      </div>
+    </section>
+  );
+}

package/src/components/MonsterRun/MonsterRun.module.css

@@ -0,0 +1,231 @@
+/**
+ * <MonsterRun /> styles.
+ *
+ * A side-on strip: the monster on the left, the world walking towards
+ * it. Tokens only, one accent for what would stop it, and the track
+ * also spells out what is coming, so the run is readable without the
+ * picture.
+ */
+
+.mr {
+  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: 58ch;
+  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;
+}
+
+/* ======================================================================
+   The strip
+   ====================================================================== */
+
+.stage {
+  position: relative;
+  display: flex;
+  align-items: flex-end;
+  gap: 10px;
+  height: 132px;
+  padding: 0 12px 14px;
+  border-radius: var(--radius-md);
+  background: var(--c-cobalt-50);
+  overflow: hidden;
+}
+
+.ground {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 12px;
+  height: 2px;
+  background: var(--c-cobalt-200);
+}
+
+/* The monster: a head, a body and one bolt. Three boxes is enough
+   silhouette at this size, and it keeps the whole thing token-built. */
+.monster {
+  position: relative;
+  width: 26px;
+  height: 46px;
+  flex-shrink: 0;
+  z-index: 1;
+  transition: transform 120ms ease-out, height 120ms ease-out;
+}
+.head1 {
+  position: absolute;
+  top: 0;
+  left: 3px;
+  width: 20px;
+  height: 16px;
+  border-radius: 3px 3px 2px 2px;
+  background: var(--c-forest-500, var(--c-mint-500));
+}
+.body1 {
+  position: absolute;
+  top: 16px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 3px;
+  background: var(--c-cobalt-900);
+}
+.bolt {
+  position: absolute;
+  top: 6px;
+  right: 0;
+  width: 6px;
+  height: 3px;
+  border-radius: 1px;
+  background: var(--c-orange-knvb);
+}
+
+.posture-jump { transform: translateY(-34px); }
+.posture-duck { height: 26px; }
+.posture-duck .head1 { top: 0; height: 12px; }
+.posture-duck .body1 { top: 12px; }
+
+.track {
+  display: flex;
+  align-items: flex-end;
+  gap: 6px;
+  flex: 1;
+  height: 100%;
+  padding-bottom: 2px;
+}
+
+.cell {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px;
+  border-radius: var(--radius-sm);
+  font-size: 8px;
+  line-height: 1.1;
+  text-align: center;
+  color: transparent;
+  overflow: hidden;
+}
+
+/* Only the cells holding something get a box; the rest are air. */
+.obstacle {
+  background: var(--c-orange-knvb);
+  color: white;
+  font-weight: 600;
+}
+.part {
+  background: var(--c-mint-300);
+  color: var(--c-cobalt-900);
+  font-weight: 600;
+}
+
+.low  { height: 34px; align-self: flex-end; }
+.high { height: 30px; align-self: flex-start; margin-top: 8px; }
+
+.ahead {
+  margin: 10px 0 0;
+  font-size: 13px;
+  color: var(--c-cobalt-700);
+  min-height: 1.4em;
+}
+
+.controls {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+  margin-top: 12px;
+}
+
+.action {
+  background: white;
+  color: var(--c-cobalt-900);
+  border: 1px solid var(--c-cobalt-200);
+  padding: 10px 20px;
+  border-radius: var(--radius-md);
+  font-family: inherit;
+  font-weight: 600;
+  font-size: 14px;
+  cursor: pointer;
+  transition: border-color 120ms ease;
+}
+.action:hover:not(:disabled) { border-color: var(--c-blue-cobalt); color: var(--c-blue-cobalt); }
+.action:disabled { opacity: 0.5; cursor: default; }
+.action:focus-visible { outline: 2px solid var(--c-blue-cobalt); outline-offset: 2px; }
+
+.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);
+  min-height: 1.4em;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  /* The posture still changes, it just stops sliding there. */
+  .monster { transition: none; }
+}

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/index.js

@@ -65,6 +65,7 @@ export {default as DeadlineDefender} from './DeadlineDefender/DeadlineDefender.j
 export {default as BlueprintRush} from './BlueprintRush/BlueprintRush.jsx';
 export {default as RecordRun} from './RecordRun/RecordRun.jsx';
 export {default as HiddenGame} from './HiddenGame/HiddenGame.jsx';
+export {default as MonsterRun} from './MonsterRun/MonsterRun.jsx';
 export {default as LockPick} from './LockPick/LockPick.jsx';
 export {default as PaintByTokens} from './PaintByTokens/PaintByTokens.jsx';
 export {default as Redaction} from './Redaction/Redaction.jsx';