@conduction/docusaurus-preset 3.40.0 → 3.41.1

package/package.json

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

package/src/components/LockPick/LockPick.jsx

@@ -28,7 +28,7 @@
 import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {translate} from '@docusaurus/Translate';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import {createGame, setPosition, turn, summarise, POSITIONS} from './engine';
+import {createGame, setPosition, turn, give, summarise, POSITIONS} from './engine';
 import styles from './LockPick.module.css';
 
 const GAME_ID = 'lock-pick';
@@ -107,10 +107,18 @@ export default function LockPick({className}) {
 
   const position = game ? game.position : Math.floor(POSITIONS / 2);
   const last = game ? game.last : null;
-  /* The cylinder shows what the last turn achieved, not what the
-     current position would achieve: showing the latter would hand the
-     player the answer by dragging the dial. */
-  const turned = last && (last.result === 'held' || last.result === 'snapped') ? last.give : 0;
+  /* The cylinder answers the pick as it moves, which is how this game
+     has always worked: you feel for the spot and only then commit. The
+     first version showed the last turn's result instead, so the only
+     way to learn anything was to turn, and every turn wore the pick
+     down. Sweeping was impossible and the game became a guessing game
+     with a cost per guess.
+
+     The feel is deliberately coarse, five buckets wide, so the dial
+     narrows the answer without handing it over: the last step is still
+     a commitment. */
+  const turned = game && running ? give(game) : 0;
+  const liveFeel = game && running ? feelCopy(turned) : null;
 
   return (
     <section className={[styles.lp, className].filter(Boolean).join(' ')} aria-labelledby="lock-pick-title">
@@ -145,7 +153,7 @@ export default function LockPick({className}) {
           className={styles.cylinder}
           role="img"
           aria-label={translate(
-            {id: 'preset.lockPick.cylinder', message: 'The cylinder turned {percent} per cent on the last try', description: 'Accessible description of the lock cylinder. {percent} is how far it turned.'},
+            {id: 'preset.lockPick.cylinder', message: 'The cylinder turns {percent} per cent where the pick is now', description: 'Accessible description of the lock cylinder. {percent} is how far it turns at the current pick position.'},
             {percent: Math.round(turned * 100)},
           )}>
           <div className={styles.cylinderFill} style={{transform: `rotate(${-90 + turned * 80}deg)`}} />
@@ -167,6 +175,10 @@ export default function LockPick({className}) {
             disabled={!running}
             onChange={(e) => moveTo(Number(e.target.value))}
           />
+          <p className={styles.feel} role="status" aria-live="polite">
+            {liveFeel || translate({id: 'preset.lockPick.feelIdle', message: 'Take a pick to start feeling for it.', description: 'Placeholder where the live feel line sits before the game starts'})}
+          </p>
+
           <div className={styles.pickRow}>
             <span className={styles.pickLabel}>
               {translate({id: 'preset.lockPick.wear', message: 'This pick', description: 'Label for the lock-pick durability bar'})}
@@ -176,7 +188,8 @@ export default function LockPick({className}) {
               role="progressbar"
               aria-valuemin={0}
               aria-valuemax={100}
-              aria-valuenow={game ? game.durability : 100}>
+              aria-valuenow={game ? game.durability : 100}
+              aria-label={translate({id: 'preset.lockPick.wearLabel', message: 'How much of this pick is left', description: 'Accessible name of the bar showing the current pick condition'})}>
               <span
                 className={[styles.wearFill, game && game.durability <= 35 && styles.wearLow].filter(Boolean).join(' ')}
                 style={{width: `${game ? game.durability : 100}%`}}

package/src/components/LockPick/LockPick.module.css

@@ -128,6 +128,13 @@
 }
 .slider:focus-visible { outline: 2px solid var(--c-blue-cobalt); outline-offset: 4px; }
 
+.feel {
+  margin: 10px 0 0;
+  font-size: 13px;
+  color: var(--c-cobalt-900);
+  min-height: 1.4em;
+}
+
 .pickRow {
   display: flex;
   align-items: center;

package/src/components/PaintByTokens/PaintByTokens.jsx

@@ -0,0 +1,226 @@
+/**
+ * <PaintByTokens />
+ *
+ * Thematiq's mini-game. Paint by numbers, where the numbers are the
+ * tokens a theme is made of: surface, accent, ink, muted, line. Pick a
+ * token, fill the cells that ask for it, finish the picture before the
+ * clock runs out.
+ *
+ * The swatch is never the answer. Each cell says which token it wants,
+ * and what colour that token is depends on the theme the page is
+ * wearing, which is the habit the app exists to teach.
+ *
+ * The rules live in ./engine.js with no DOM and no clock.
+ *
+ * Usage on a product page:
+ *
+ *   <PaintByTokens />
+ *
+ * Fires the shared `connext:gameend` event on game over, and listens
+ * for `connext:gamereplay`.
+ *
+ * Accessibility: every cell is a button that says which token it wants
+ * and whether it is filled, and the palette is a radio-style row on the
+ * number keys. Nothing here needs colour to be played, which is a
+ * strange thing to say about a painting game and the reason it works.
+ */
+
+import React, {useCallback, useEffect, useRef, useState} from 'react';
+import {translate} from '@docusaurus/Translate';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import {createGame, paint, select, step, timeLeft, remaining, summarise, TOKENS, COLS} from './engine';
+import styles from './PaintByTokens.module.css';
+
+const GAME_ID = 'paint-by-tokens';
+const TICK_MS = 100;
+
+function tokenLabel(token) {
+  switch (TOKENS[token]) {
+    case 'surface':
+      return translate({id: 'preset.paintByTokens.token.surface', message: 'surface', description: 'Name of the surface token in the paint-by-tokens game'});
+    case 'accent':
+      return translate({id: 'preset.paintByTokens.token.accent', message: 'accent', description: 'Name of the accent token in the paint-by-tokens game'});
+    case 'ink':
+      return translate({id: 'preset.paintByTokens.token.ink', message: 'ink', description: 'Name of the ink token in the paint-by-tokens game'});
+    case 'muted':
+      return translate({id: 'preset.paintByTokens.token.muted', message: 'muted', description: 'Name of the muted token in the paint-by-tokens game'});
+    default:
+      return translate({id: 'preset.paintByTokens.token.line', message: 'line', description: 'Name of the line token in the paint-by-tokens game'});
+  }
+}
+
+export default function PaintByTokens({className}) {
+  const {i18n} = useDocusaurusContext();
+  const locale = (i18n && i18n.currentLocale) || 'en';
+
+  const [game, setGame] = useState(null);
+  const [seconds, setSeconds] = useState(0);
+  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);
+    setSeconds(Math.ceil(timeLeft(fresh, 0) / 1000));
+  }, []);
+
+  useEffect(() => {
+    if (!running) return undefined;
+    const id = setInterval(() => {
+      const t = now();
+      const next = step(gameRef.current, t);
+      gameRef.current = next;
+      setGame(next);
+      setSeconds(Math.ceil(timeLeft(next, t) / 1000));
+    }, 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.paintByTokens.over.title', message: 'Time, and the theme is half painted.', description: 'Headline on the game-over dialog after a paint-by-tokens run'}),
+        subtitle: translate({id: 'preset.paintByTokens.over.subtitle', message: 'Every finished picture bought you time. Painting by eye spent it.', description: 'Subtitle on the game-over dialog after a paint-by-tokens 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 pick = useCallback((token) => {
+    if (!gameRef.current) return;
+    const next = select(gameRef.current, token);
+    gameRef.current = next;
+    setGame(next);
+  }, []);
+
+  const fill = useCallback((index) => {
+    if (!gameRef.current || gameRef.current.over) return;
+    const t = now();
+    const next = paint(gameRef.current, index, t);
+    gameRef.current = next;
+    setGame(next);
+    setSeconds(Math.ceil(timeLeft(next, t) / 1000));
+  }, []);
+
+  useEffect(() => {
+    if (!running || typeof window === 'undefined') return undefined;
+    const onKey = (e) => {
+      const n = Number(e.key);
+      if (Number.isInteger(n) && n >= 1 && n <= TOKENS.length) {
+        e.preventDefault();
+        pick(n - 1);
+      }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [running, pick]);
+
+  const cells = game ? game.cells : [];
+  const selected = game ? game.selected : 0;
+  const last = game ? game.last : null;
+
+  return (
+    <section className={[styles.pbt, className].filter(Boolean).join(' ')} aria-labelledby="paint-by-tokens-title">
+      <header className={styles.head}>
+        <div>
+          <p className={styles.eyebrow}>
+            {translate({id: 'preset.paintByTokens.eyebrow', message: 'Mini-game', description: 'Eyebrow above the paint-by-tokens game on a product page'})}
+          </p>
+          <h3 className={styles.title} id="paint-by-tokens-title">
+            {translate({id: 'preset.paintByTokens.title', message: 'Paint by tokens', description: 'Name of the Thematiq mini-game'})}
+          </h3>
+          <p className={styles.lede}>
+            {translate({id: 'preset.paintByTokens.lede', message: 'Paint by numbers, except the numbers are tokens. Every cell says which one it wants, and what colour that is depends on the theme, not on your eye.', description: 'One-line explanation of the paint-by-tokens rules'})}
+          </p>
+        </div>
+        <div className={styles.hud} role="status" aria-live="polite">
+          <span className={styles.hudPill}>
+            {translate({id: 'preset.paintByTokens.hud.score', message: 'Score {score}', description: 'Score readout on the paint-by-tokens HUD'}, {score: Number(game ? game.score : 0).toLocaleString(locale)})}
+          </span>
+          <span className={[styles.hudPill, running && seconds <= 5 && styles.hudLow].filter(Boolean).join(' ')}>
+            {translate({id: 'preset.paintByTokens.hud.time', message: '{seconds}s left', description: 'Remaining-time readout on the paint-by-tokens HUD'}, {seconds: running ? seconds : 0})}
+          </span>
+          <span className={styles.hudPill}>
+            {translate({id: 'preset.paintByTokens.hud.left', message: '{left} cells to go', description: 'Remaining-cells readout on the paint-by-tokens HUD'}, {left: game ? remaining(game) : 0})}
+          </span>
+        </div>
+      </header>
+
+      <div className={styles.palette} role="group" aria-label={translate({id: 'preset.paintByTokens.paletteLabel', message: 'Tokens', description: 'Accessible name for the paint-by-tokens palette'})}>
+        {TOKENS.map((_, i) => (
+          <button
+            key={i}
+            type="button"
+            className={[styles.swatch, styles[`tone${i}`], i === selected && styles.swatchOn].filter(Boolean).join(' ')}
+            onClick={() => pick(i)}
+            disabled={!running}
+            aria-pressed={i === selected}>
+            <span className={styles.swatchKey} aria-hidden="true">{i + 1}</span>
+            <span className={styles.swatchName}>{tokenLabel(i)}</span>
+          </button>
+        ))}
+      </div>
+
+      <div className={styles.grid} style={{gridTemplateColumns: `repeat(${COLS}, minmax(0, 1fr))`}}>
+        {cells.map((cell, i) => (
+          <button
+            key={i}
+            type="button"
+            className={[
+              styles.cell,
+              cell.painted && styles.cellPainted,
+              cell.painted && styles[`tone${cell.token}`],
+            ].filter(Boolean).join(' ')}
+            onClick={() => fill(i)}
+            disabled={!running || cell.painted}
+            aria-label={cell.painted
+              ? translate({id: 'preset.paintByTokens.cell.done', message: 'Filled with {token}', description: 'Accessible label for a painted cell'}, {token: tokenLabel(cell.token)})
+              : translate({id: 'preset.paintByTokens.cell.open', message: 'Wants {token}', description: 'Accessible label for an unpainted cell'}, {token: tokenLabel(cell.token)})}>
+            <span aria-hidden="true">{cell.painted ? '' : cell.token + 1}</span>
+          </button>
+        ))}
+        {!game && (
+          <p className={styles.idle}>
+            {translate({id: 'preset.paintByTokens.idle', message: 'An empty theme, and five tokens to fill it with.', description: 'Placeholder before the paint-by-tokens game starts'})}
+          </p>
+        )}
+      </div>
+
+      <footer className={styles.foot}>
+        <button type="button" className={styles.start} onClick={begin}>
+          {game
+            ? translate({id: 'preset.paintByTokens.restart', message: 'Restart', description: 'Button that restarts the paint-by-tokens game'})
+            : translate({id: 'preset.paintByTokens.start', message: 'Open a theme', description: 'Button that starts the paint-by-tokens game'})}
+        </button>
+        <p className={styles.hint} role="status" aria-live="polite">
+          {last && last.result === 'finished' && translate({id: 'preset.paintByTokens.feedback.finished', message: 'Theme done. That bought you twenty seconds.', description: 'Feedback after finishing a picture'})}
+          {last && last.result === 'wrong' && translate(
+            {id: 'preset.paintByTokens.feedback.wrong', message: 'That cell wanted {wanted}, not {used}. Three seconds gone.', description: 'Feedback after filling a cell with the wrong token'},
+            {wanted: tokenLabel(last.wanted), used: tokenLabel(last.used)},
+          )}
+          {(!last || last.result === 'painted' || last.result === 'timeout') && translate({id: 'preset.paintByTokens.hint', message: 'Pick a token with the number keys, then fill every cell that asks for it.', description: 'Hint under the paint-by-tokens board'})}
+        </p>
+      </footer>
+    </section>
+  );
+}

package/src/components/PaintByTokens/PaintByTokens.module.css

@@ -0,0 +1,202 @@
+/**
+ * <PaintByTokens /> styles.
+ *
+ * The five tones are the five tokens, drawn from the theme rather than
+ * from a palette of their own: that is the point of the game, and it
+ * means a site that reskins the preset reskins the picture with it.
+ *
+ * Every cell also carries its token as a number, so the board is
+ * playable by someone who cannot tell the tones apart.
+ */
+
+.pbt {
+  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;
+}
+.hudLow { background: var(--c-orange-knvb); color: white; }
+
+/* The five tokens. Nothing else in the file names a colour. */
+.tone0 { --pbt-tone: var(--c-cobalt-50); --pbt-ink: var(--c-cobalt-700); }
+.tone1 { --pbt-tone: var(--c-blue-cobalt); --pbt-ink: white; }
+.tone2 { --pbt-tone: var(--c-cobalt-900); --pbt-ink: white; }
+.tone3 { --pbt-tone: var(--c-cobalt-300); --pbt-ink: var(--c-cobalt-900); }
+.tone4 { --pbt-tone: var(--c-mint-500); --pbt-ink: var(--c-cobalt-900); }
+
+.palette {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.swatch {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 7px 12px 7px 8px;
+  border: 1px solid var(--c-cobalt-200);
+  border-radius: var(--radius-pill);
+  background: white;
+  font-family: inherit;
+  font-size: 12px;
+  color: var(--c-cobalt-700);
+  cursor: pointer;
+  transition: border-color 120ms ease;
+}
+.swatch::before {
+  content: '';
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  background: var(--pbt-tone);
+  border: 1px solid var(--c-cobalt-200);
+}
+.swatch:hover:not(:disabled) { border-color: var(--c-blue-cobalt); }
+.swatch:disabled { opacity: 0.55; cursor: default; }
+.swatch:focus-visible { outline: 2px solid var(--c-blue-cobalt); outline-offset: 2px; }
+
+.swatchOn {
+  border-color: var(--c-blue-cobalt);
+  background: var(--c-cobalt-50);
+  font-weight: 600;
+  color: var(--c-cobalt-900);
+}
+
+.swatchKey {
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 10px;
+  color: var(--c-cobalt-400);
+}
+
+.swatchName { white-space: nowrap; }
+
+.grid {
+  display: grid;
+  gap: 3px;
+  max-width: 460px;
+  padding: 10px;
+  border-radius: var(--radius-md);
+  background: var(--c-cobalt-50);
+  min-height: 120px;
+}
+
+.cell {
+  aspect-ratio: 1;
+  border: 1px solid var(--c-cobalt-200);
+  border-radius: var(--radius-sm);
+  background: white;
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 10px;
+  color: var(--c-cobalt-400);
+  cursor: pointer;
+  padding: 0;
+  transition: background 120ms ease, border-color 120ms ease;
+}
+.cell:hover:not(:disabled) { border-color: var(--c-blue-cobalt); }
+.cell:disabled { cursor: default; }
+.cell:focus-visible { outline: 2px solid var(--c-blue-cobalt); outline-offset: 1px; }
+
+.cellPainted {
+  background: var(--pbt-tone);
+  border-color: var(--pbt-tone);
+  color: var(--pbt-ink);
+}
+
+.idle {
+  grid-column: 1 / -1;
+  margin: auto;
+  font-size: 14px;
+  color: var(--c-cobalt-400);
+  text-align: center;
+}
+
+.foot {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+  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;
+  font-size: 12px;
+  color: var(--c-cobalt-400);
+  max-width: 52ch;
+  min-height: 1.5em;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .cellPainted { animation: pbtFill 140ms ease-out; }
+  @keyframes pbtFill {
+    from { transform: scale(0.8); }
+    to   { transform: scale(1); }
+  }
+}

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

@@ -0,0 +1,150 @@
+/**
+ * engine.test.js — the paint-by-tokens rules.
+ *
+ * The property that matters most is the dullest: every picture must be
+ * exactly ROWS × COLS cells of tokens that exist. A picture with a
+ * short row or a stray digit renders as a hole in the grid and a cell
+ * nobody can ever fill, which ends the run through no fault of the
+ * player.
+ */
+
+'use strict';
+
+const test = require('node:test');
+const assert = require('node:assert/strict');
+
+const {
+  createGame, paint, select, step, timeLeft, remaining, summarise,
+  TOKENS, PICTURES, COLS, ROWS, DEFAULTS,
+} = require('../engine.js');
+
+/** Fill the current picture correctly, selecting each token as needed. */
+function finishPicture(state, now = 0) {
+  let s = state;
+  for (let i = 0; i < s.cells.length; i++) {
+    if (s.cells[i].painted) continue;
+    s = select(s, s.cells[i].token);
+    s = paint(s, i, now);
+    if (s.over) break;
+    /* The picture is replaced the moment it is finished, so stop
+       walking this one as soon as the cell count resets. */
+    if (remaining(s) === COLS * ROWS) break;
+  }
+  return s;
+}
+
+test('every picture is a full grid of tokens that exist', () => {
+  for (const picture of PICTURES) {
+    assert.equal(picture.rows.length, ROWS, `${picture.name}: wrong number of rows`);
+    for (const row of picture.rows) {
+      assert.equal(row.length, COLS, `${picture.name}: a row is not ${COLS} cells`);
+      for (const ch of row) {
+        const token = Number(ch);
+        assert.ok(Number.isInteger(token), `${picture.name}: "${ch}" is not a token`);
+        assert.ok(token >= 0 && token < TOKENS.length, `${picture.name}: token ${token} does not exist`);
+      }
+    }
+  }
+});
+
+test('a game starts with a full picture, a clock and nothing painted', () => {
+  const s = createGame({seed: 1, now: 0});
+  assert.equal(s.cells.length, COLS * ROWS);
+  assert.equal(remaining(s), COLS * ROWS);
+  assert.equal(timeLeft(s, 0), DEFAULTS.startMs);
+  assert.equal(s.over, false);
+});
+
+test('painting a cell with the token it asks for fills it and scores', () => {
+  let s = createGame({seed: 2, now: 0});
+  s = select(s, s.cells[0].token);
+  s = paint(s, 0, 10);
+  assert.equal(s.cells[0].painted, true);
+  assert.equal(s.score, DEFAULTS.pointsPerCell);
+  assert.equal(s.last.result, 'painted');
+});
+
+test('the wrong token costs time, leaves the cell empty, and says what was wanted', () => {
+  let s = createGame({seed: 3, now: 0});
+  const wanted = s.cells[0].token;
+  const wrong = (wanted + 1) % TOKENS.length;
+  const deadline = s.endsAt;
+  s = select(s, wrong);
+  s = paint(s, 0, 20);
+  assert.equal(s.cells[0].painted, false);
+  assert.equal(s.endsAt, deadline - DEFAULTS.penaltyMs);
+  assert.equal(s.wrong, 1);
+  assert.equal(s.last.wanted, wanted);
+  assert.equal(s.last.used, wrong);
+});
+
+test('painting over a finished cell is a slip, not a mistake', () => {
+  let s = createGame({seed: 4, now: 0});
+  s = select(s, s.cells[0].token);
+  s = paint(s, 0, 10);
+  const deadline = s.endsAt;
+  const score = s.score;
+  s = paint(s, 0, 20);
+  assert.equal(s.endsAt, deadline, 'a second click on a filled cell cost time');
+  assert.equal(s.score, score, 'a second click on a filled cell scored again');
+});
+
+test('an unknown token cannot be selected, and an unknown cell cannot be painted', () => {
+  const s = createGame({seed: 5, now: 0});
+  assert.equal(select(s, 99).selected, s.selected);
+  assert.equal(select(s, -1).selected, s.selected);
+  assert.equal(paint(s, 9999, 10), s);
+});
+
+test('finishing a picture scores, buys time and deals the next one', () => {
+  let s = createGame({seed: 6, now: 0});
+  const first = s.picture;
+  const deadline = s.endsAt;
+  s = finishPicture(s, 0);
+  assert.equal(s.finished, 1);
+  assert.ok(s.score >= DEFAULTS.pointsPerPicture);
+  assert.ok(s.endsAt > deadline, 'finishing a picture bought no time');
+  assert.equal(remaining(s), COLS * ROWS, 'the next picture started part-painted');
+  assert.notEqual(s.picture, first, 'the same picture was dealt twice in a row');
+});
+
+test('every picture in the rotation can actually be finished', () => {
+  let s = createGame({seed: 7, now: 0});
+  const seen = new Set();
+  for (let i = 0; i < PICTURES.length + 1; i++) {
+    seen.add(s.picture);
+    s = finishPicture(s, 0);
+    assert.equal(s.over, false, `run ended while finishing picture ${i}`);
+  }
+  assert.equal(seen.size, PICTURES.length, 'the rotation does not reach every picture');
+  assert.equal(s.finished, PICTURES.length + 1);
+});
+
+test('the clock ends the run, and nothing paints afterwards', () => {
+  let s = createGame({seed: 8, now: 0});
+  s = step(s, DEFAULTS.startMs + 1);
+  assert.equal(s.over, true);
+  const frozen = paint(select(s, s.cells[0].token), 0, DEFAULTS.startMs + 5);
+  assert.equal(frozen.score, s.score);
+});
+
+test('a penalty that empties the clock ends the run there and then', () => {
+  let s = createGame({seed: 9, now: 0, config: {startMs: 2000}});
+  const wrong = (s.cells[0].token + 1) % TOKENS.length;
+  s = paint(select(s, wrong), 0, 100);
+  assert.equal(s.over, true);
+  assert.equal(timeLeft(s, 100), 0);
+});
+
+test('the same seed opens on the same picture, a different one need not', () => {
+  const first = (seed) => createGame({seed, now: 0}).picture;
+  assert.equal(first(21), first(21));
+  const spread = new Set([1, 2, 3, 4, 5, 6, 7, 8].map(first));
+  assert.ok(spread.size > 1, 'every seed opens on the same picture');
+});
+
+test('the summary reads as a sentence in both locales', () => {
+  const s = {finished: 3, wrong: 2};
+  assert.match(summarise(s, 'en'), /3 themes finished · 2 wrong fills/);
+  assert.match(summarise(s, 'nl'), /3 thema's af · 2 keer misgetikt/);
+});