@conduction/docusaurus-preset 3.41.1 → 3.43.0

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/);
+});