@conduction/docusaurus-preset 3.42.0 → 3.44.0

package/src/components/Reconcile/Reconcile.jsx

@@ -0,0 +1,240 @@
+/**
+ * <Reconcile />
+ *
+ * Shillinq's game. The bank statement is in, the invoices are open,
+ * and the month is closing. Match each payment to the invoice it
+ * settles. One line on the statement settles nothing at all: flag that
+ * one instead.
+ *
+ * Three moves, not two, and that is the point. Paying the odd line out
+ * is how money leaves quietly. Flagging a genuine payment costs too,
+ * because a bookkeeper who cries wolf at every line is one nobody
+ * listens to.
+ *
+ * The rules live in ./engine.js with no DOM and no clock.
+ *
+ * Usage:
+ *
+ *   <Reconcile />
+ *
+ * Fires the shared `connext:gameend` event on game over, and listens
+ * for `connext:gamereplay`.
+ *
+ * Accessibility: a payment is picked up with a button and dropped on
+ * an invoice with a button, so nothing needs a drag. Every amount and
+ * reference is read out, and the countdown is announced.
+ */
+
+import React, {useCallback, useEffect, useRef, useState} from 'react';
+import {translate} from '@docusaurus/Translate';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import {createGame, match, flag, step, remaining, summarise} from './engine';
+import styles from './Reconcile.module.css';
+
+const GAME_ID = 'reconcile';
+const TICK_MS = 100;
+
+export default function Reconcile({className}) {
+  const {i18n} = useDocusaurusContext();
+  const locale = (i18n && i18n.currentLocale) || 'en';
+
+  const [game, setGame] = useState(null);
+  const [held, setHeld] = 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 money = (amount) => new Intl.NumberFormat(locale, {style: 'currency', currency: 'EUR', maximumFractionDigits: 0}).format(amount);
+
+  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);
+    setHeld(null);
+    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.reconcile.over.title', message: 'The books do not balance.', description: 'Headline on the game-over dialog after a reconciliation run'}),
+        subtitle: translate({id: 'preset.reconcile.over.subtitle', message: 'Three of those, and somebody finds out in April.', description: 'Subtitle on the game-over dialog after a reconciliation 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 drop = useCallback((invoiceId) => {
+    if (!gameRef.current || gameRef.current.over || !held) return;
+    const t = now();
+    const next = match(gameRef.current, held, invoiceId, t);
+    gameRef.current = next;
+    setGame(next);
+    setHeld(null);
+    setLeft(remaining(next, t));
+  }, [held]);
+
+  const raise = useCallback((paymentId) => {
+    if (!gameRef.current || gameRef.current.over) return;
+    const t = now();
+    const next = flag(gameRef.current, paymentId, t);
+    gameRef.current = next;
+    setGame(next);
+    setHeld(null);
+    setLeft(remaining(next, t));
+  }, []);
+
+  const sheet = game ? game.sheet : null;
+  const last = game ? game.last : null;
+  const pct = Math.round(left * 100);
+
+  return (
+    <section className={[styles.rc, className].filter(Boolean).join(' ')} aria-labelledby="reconcile-title">
+      <header className={styles.head}>
+        <div>
+          <p className={styles.eyebrow}>
+            {translate({id: 'preset.reconcile.eyebrow', message: 'Mini-game', description: 'Eyebrow above the reconciliation game on a product page'})}
+          </p>
+          <h3 className={styles.title} id="reconcile-title">
+            {translate({id: 'preset.reconcile.title', message: 'Match the bank', description: 'Name of the Shillinq mini-game'})}
+          </h3>
+          <p className={styles.lede}>
+            {translate({id: 'preset.reconcile.lede', message: 'Every payment belongs to an invoice, except the one that belongs to nobody. Match what fits and flag what does not, before the month closes.', description: 'One-line explanation of the reconciliation rules'})}
+          </p>
+        </div>
+        <div className={styles.hud} role="status" aria-live="polite">
+          <span className={styles.hudPill}>
+            {translate({id: 'preset.reconcile.hud.score', message: 'Score {score}', description: 'Score readout on the reconciliation HUD'}, {score: Number(game ? game.score : 0).toLocaleString(locale)})}
+          </span>
+          <span className={styles.hudPill}>
+            {translate({id: 'preset.reconcile.hud.lives', message: 'Corrections left {lives}', description: 'Remaining-lives readout on the reconciliation HUD'}, {lives: game ? game.lives : 3})}
+          </span>
+        </div>
+      </header>
+
+      {sheet ? (
+        <>
+          <div className={styles.sheet}>
+            <div className={styles.column}>
+              <h4 className={styles.columnHead}>
+                {translate({id: 'preset.reconcile.statement', message: 'On the statement', description: 'Heading above the bank payments'})}
+              </h4>
+              <ul className={styles.list}>
+                {sheet.payments.map((payment) => (
+                  <li key={payment.id} className={payment.done ? styles.rowDone : styles.row}>
+                    <button
+                      type="button"
+                      className={[styles.pick, held === payment.id && styles.picked].filter(Boolean).join(' ')}
+                      onClick={() => setHeld(held === payment.id ? null : payment.id)}
+                      disabled={!running || payment.done}
+                      aria-pressed={held === payment.id}>
+                      <span className={styles.amount}>{money(payment.amount)}</span>
+                      <span className={styles.ref}>{payment.reference}</span>
+                    </button>
+                    <button
+                      type="button"
+                      className={styles.flag}
+                      onClick={() => raise(payment.id)}
+                      disabled={!running || payment.done}
+                      aria-label={translate(
+                        {id: 'preset.reconcile.flagOne', message: 'Flag {amount}, reference {reference}, as belonging to nobody', description: 'Accessible label for the flag button on one payment'},
+                        {amount: money(payment.amount), reference: payment.reference},
+                      )}>
+                      {translate({id: 'preset.reconcile.flag', message: 'Flag', description: 'Short label on the button that flags a payment as fraudulent'})}
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            </div>
+
+            <div className={styles.column}>
+              <h4 className={styles.columnHead}>
+                {translate({id: 'preset.reconcile.invoices', message: 'Open invoices', description: 'Heading above the open invoices'})}
+              </h4>
+              <ul className={styles.list}>
+                {sheet.invoices.map((invoice) => (
+                  <li key={invoice.id} className={invoice.settled ? styles.rowDone : styles.row}>
+                    <button
+                      type="button"
+                      className={styles.drop}
+                      onClick={() => drop(invoice.id)}
+                      disabled={!running || invoice.settled || !held}
+                      aria-label={translate(
+                        {id: 'preset.reconcile.settle', message: 'Settle invoice {reference} for {amount} with the payment you picked up', description: 'Accessible label for an invoice button'},
+                        {reference: invoice.reference, amount: money(invoice.amount)},
+                      )}>
+                      <span className={styles.amount}>{money(invoice.amount)}</span>
+                      <span className={styles.ref}>{invoice.reference}</span>
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+
+          <div
+            className={styles.clock}
+            role="progressbar"
+            aria-valuemin={0}
+            aria-valuemax={100}
+            aria-valuenow={pct}
+            aria-label={translate({id: 'preset.reconcile.clock', message: 'Time before the month closes', description: 'Accessible name of the reconciliation countdown'})}>
+            <div className={[styles.clockFill, left < 0.3 && styles.clockLow].filter(Boolean).join(' ')} style={{width: `${pct}%`}} />
+          </div>
+        </>
+      ) : (
+        <p className={styles.idle}>
+          {translate({id: 'preset.reconcile.idle', message: 'A statement, a stack of invoices, and one line that fits neither.', description: 'Placeholder before the reconciliation game starts'})}
+        </p>
+      )}
+
+      <footer className={styles.foot}>
+        <button type="button" className={styles.start} onClick={begin}>
+          {game
+            ? translate({id: 'preset.reconcile.restart', message: 'Restart', description: 'Button that restarts the reconciliation game'})
+            : translate({id: 'preset.reconcile.start', message: 'Open the statement', description: 'Button that starts the reconciliation game'})}
+        </button>
+        <p className={styles.hint} role="status" aria-live="polite">
+          {last && last.result === 'matched' && translate({id: 'preset.reconcile.feedback.matched', message: 'Settled.', description: 'Feedback after a correct match'})}
+          {last && last.result === 'caught' && translate({id: 'preset.reconcile.feedback.caught', message: 'That is the one. It was never going anywhere.', description: 'Feedback after catching the fraudulent line'})}
+          {last && last.result === 'mismatch' && translate({id: 'preset.reconcile.feedback.mismatch', message: 'That payment is not for that invoice.', description: 'Feedback after matching the wrong invoice'})}
+          {last && last.result === 'paidFraud' && translate({id: 'preset.reconcile.feedback.paidFraud', message: 'You just paid the line that belongs to nobody.', description: 'Feedback after matching the fraudulent payment to an invoice'})}
+          {last && last.result === 'flaggedGood' && translate({id: 'preset.reconcile.feedback.flaggedGood', message: 'That one was real. Flag everything and nobody reads your flags.', description: 'Feedback after flagging a genuine payment'})}
+          {last && last.result === 'monthClosed' && translate({id: 'preset.reconcile.feedback.closed', message: 'The month closed with lines still open.', description: 'Feedback after the clock runs out'})}
+          {last && last.result === 'sheet' && translate({id: 'preset.reconcile.feedback.sheet', message: 'Statement clear. Here comes the next one.', description: 'Feedback after clearing a whole sheet'})}
+          {!last && translate({id: 'preset.reconcile.hint', message: 'Pick up a payment, then click the invoice it settles. The one that fits nothing gets flagged.', description: 'Hint under the reconciliation sheet'})}
+        </p>
+      </footer>
+    </section>
+  );
+}

package/src/components/Reconcile/Reconcile.module.css

@@ -0,0 +1,217 @@
+/**
+ * <Reconcile /> styles.
+ *
+ * Two columns that read like a statement beside a ledger. Tokens only,
+ * one accent on the clock when the month is nearly up. A picked-up
+ * payment says so in its pressed state as well as its border.
+ */
+
+.rc {
+  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: 60ch;
+  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;
+}
+
+.sheet {
+  display: grid;
+  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
+  gap: 16px;
+  max-width: 720px;
+}
+@media (max-width: 700px) {
+  .sheet { grid-template-columns: 1fr; }
+}
+
+.column {
+  padding: 12px;
+  border-radius: var(--radius-md);
+  background: var(--c-cobalt-50);
+}
+
+.columnHead {
+  margin: 0 0 10px;
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 11px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--c-cobalt-400);
+}
+
+.list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.row { display: flex; gap: 6px; }
+.rowDone {
+  display: flex;
+  gap: 6px;
+  opacity: 0.4;
+}
+
+.pick,
+.drop {
+  flex: 1;
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 9px 12px;
+  border: 1px solid var(--c-cobalt-200);
+  border-radius: var(--radius-md);
+  background: white;
+  font-family: inherit;
+  cursor: pointer;
+  text-align: left;
+  transition: border-color 120ms ease, background 120ms ease;
+}
+.pick:hover:not(:disabled),
+.drop:hover:not(:disabled) { border-color: var(--c-blue-cobalt); }
+.pick:disabled,
+.drop:disabled { cursor: default; }
+.pick:focus-visible,
+.drop:focus-visible { outline: 2px solid var(--c-blue-cobalt); outline-offset: 2px; }
+
+/* The payment in hand. */
+.picked {
+  border-color: var(--c-blue-cobalt);
+  background: var(--c-cobalt-50);
+  box-shadow: inset 0 0 0 1px var(--c-blue-cobalt);
+}
+
+.amount {
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--c-cobalt-900);
+  font-variant-numeric: tabular-nums;
+}
+
+.ref {
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 11px;
+  color: var(--c-cobalt-400);
+}
+
+.flag {
+  padding: 9px 10px;
+  border: 1px solid var(--c-cobalt-200);
+  border-radius: var(--radius-md);
+  background: white;
+  font-family: inherit;
+  font-size: 12px;
+  color: var(--c-cobalt-700);
+  cursor: pointer;
+  transition: border-color 120ms ease, color 120ms ease;
+}
+.flag:hover:not(:disabled) { border-color: var(--c-orange-knvb); color: var(--c-orange-knvb); }
+.flag:disabled { cursor: default; opacity: 0.6; }
+.flag:focus-visible { outline: 2px solid var(--c-blue-cobalt); outline-offset: 2px; }
+
+.clock {
+  height: 6px;
+  border-radius: var(--radius-pill);
+  background: var(--c-cobalt-200);
+  overflow: hidden;
+  margin-top: 12px;
+  max-width: 720px;
+}
+.clockFill {
+  height: 100%;
+  background: var(--c-mint-500);
+  transition: width 100ms linear;
+}
+.clockLow { background: var(--c-orange-knvb); }
+
+.idle {
+  margin: 0;
+  font-size: 14px;
+  color: var(--c-cobalt-400);
+}
+
+.foot {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+  margin-top: 14px;
+}
+
+.start {
+  background: var(--c-blue-cobalt);
+  color: white;
+  border: 1px solid var(--c-blue-cobalt);
+  padding: 10px 18px;
+  border-radius: var(--radius-md);
+  font-family: inherit;
+  font-weight: 500;
+  font-size: 14px;
+  cursor: pointer;
+  transition: background 120ms ease;
+}
+.start:hover { background: var(--c-cobalt-700); border-color: var(--c-cobalt-700); }
+.start:focus-visible { outline: 2px solid var(--c-cobalt-900); outline-offset: 2px; }
+
+.hint {
+  margin: 0;
+  flex-basis: 100%;
+  font-size: 12px;
+  color: var(--c-cobalt-400);
+  max-width: 60ch;
+  min-height: 1.4em;
+}

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

@@ -0,0 +1,168 @@
+/**
+ * engine.test.js — the reconciliation rules.
+ *
+ * Two properties carry this one. Every sheet must be solvable: each
+ * genuine payment matches exactly one invoice, and the odd line out
+ * matches none, or the right answer is unknowable and the player is
+ * being asked to guess. And crying wolf must cost, because a game that
+ * only punished missing the fraud would teach you to flag every line.
+ */
+
+'use strict';
+
+const test = require('node:test');
+const assert = require('node:assert/strict');
+
+const {
+  createGame, match, flag, step, clockMs, remaining, sheetDone, summarise, DEFAULTS,
+} = require('../engine.js');
+
+const fraudOf = (s) => s.sheet.payments.find((p) => p.fraud);
+const genuine = (s) => s.sheet.payments.filter((p) => !p.fraud);
+const invoiceFor = (s, payment) => s.sheet.invoices.find((i) => i.amount === payment.amount);
+
+/** Clear a sheet properly: match everything, flag the odd one out. */
+function clearSheet(state, now = 0) {
+  let s = state;
+  for (const payment of genuine(s)) {
+    s = match(s, payment.id, invoiceFor(s, payment).id, now);
+  }
+  const odd = fraudOf(s);
+  return odd ? flag(s, odd.id, now) : s;
+}
+
+test('a sheet always has one payment too many, and it is the fraud', () => {
+  for (let seed = 1; seed <= 30; seed++) {
+    const s = createGame({seed, now: 0});
+    assert.equal(s.sheet.invoices.length, DEFAULTS.invoices);
+    assert.equal(s.sheet.payments.length, DEFAULTS.invoices + 1);
+    assert.equal(s.sheet.payments.filter((p) => p.fraud).length, 1, `seed ${seed}: not exactly one fraud line`);
+  }
+});
+
+test('every genuine payment settles exactly one invoice, and the fraud settles none', () => {
+  for (let seed = 1; seed <= 30; seed++) {
+    const s = createGame({seed, now: 0});
+    for (const payment of genuine(s)) {
+      const hits = s.sheet.invoices.filter((i) => i.amount === payment.amount);
+      assert.equal(hits.length, 1, `seed ${seed}: a payment matched ${hits.length} invoices`);
+    }
+    const odd = fraudOf(s);
+    assert.equal(
+      s.sheet.invoices.filter((i) => i.amount === odd.amount).length,
+      0,
+      `seed ${seed}: the fraud line matches a real invoice, so it cannot be told apart`,
+    );
+  }
+});
+
+test('matching a payment to its invoice pays and settles both sides', () => {
+  let s = createGame({seed: 2, now: 0});
+  const payment = genuine(s)[0];
+  const invoice = invoiceFor(s, payment);
+  s = match(s, payment.id, invoice.id, 10);
+  assert.equal(s.matched, 1);
+  assert.equal(s.score, DEFAULTS.pointsPerMatch);
+  assert.equal(s.lives, DEFAULTS.lives);
+  assert.equal(s.sheet.payments.find((p) => p.id === payment.id).done, true);
+  assert.equal(s.sheet.invoices.find((i) => i.id === invoice.id).settled, true);
+});
+
+test('sending a payment to the wrong invoice costs a life', () => {
+  let s = createGame({seed: 3, now: 0});
+  const payment = genuine(s)[0];
+  const wrong = s.sheet.invoices.find((i) => i.amount !== payment.amount);
+  s = match(s, payment.id, wrong.id, 20);
+  assert.equal(s.lives, DEFAULTS.lives - 1);
+  assert.equal(s.last.result, 'mismatch');
+});
+
+test('paying the fraud line costs a life wherever it is sent', () => {
+  let s = createGame({seed: 4, now: 0});
+  const odd = fraudOf(s);
+  s = match(s, odd.id, s.sheet.invoices[0].id, 20);
+  assert.equal(s.lives, DEFAULTS.lives - 1);
+  assert.equal(s.last.result, 'paidFraud');
+});
+
+test('catching the fraud pays more than a match', () => {
+  let s = createGame({seed: 5, now: 0});
+  s = flag(s, fraudOf(s).id, 30);
+  assert.equal(s.caught, 1);
+  assert.equal(s.score, DEFAULTS.pointsPerFraud);
+  assert.ok(DEFAULTS.pointsPerFraud > DEFAULTS.pointsPerMatch);
+});
+
+test('crying wolf at a genuine payment costs a life', () => {
+  let s = createGame({seed: 6, now: 0});
+  s = flag(s, genuine(s)[0].id, 30);
+  assert.equal(s.lives, DEFAULTS.lives - 1);
+  assert.equal(s.last.result, 'flaggedGood');
+});
+
+test('a handled line cannot be handled twice', () => {
+  let s = createGame({seed: 7, now: 0});
+  const payment = genuine(s)[0];
+  s = match(s, payment.id, invoiceFor(s, payment).id, 10);
+  const score = s.score;
+  s = match(s, payment.id, invoiceFor(s, payment).id, 20);
+  assert.equal(s.score, score, 'the same line paid twice');
+  assert.equal(s.lives, DEFAULTS.lives, 'a duplicate click was punished');
+});
+
+test('clearing a sheet pays a bonus and deals the next one', () => {
+  let s = createGame({seed: 8, now: 0});
+  s = clearSheet(s, 0);
+  assert.equal(s.sheets, 1);
+  assert.ok(s.sheet, 'no next sheet arrived');
+  assert.equal(sheetDone(s), false, 'the next sheet arrived already finished');
+  assert.equal(s.lives, DEFAULTS.lives);
+});
+
+test('the month closing on an unfinished sheet costs a life', () => {
+  let s = createGame({seed: 9, now: 0});
+  const closes = s.sheet.expiresAt;
+  s = step(s, closes + 1);
+  assert.equal(s.lives, DEFAULTS.lives - 1);
+  assert.equal(s.last.result, 'monthClosed');
+  assert.ok(s.sheet, 'no fresh sheet after the month closed');
+});
+
+test('three mistakes end it, and nothing moves afterwards', () => {
+  let s = createGame({seed: 10, now: 0});
+  for (let i = 0; i < DEFAULTS.lives; i++) {
+    const good = genuine(s).find((p) => !p.done);
+    s = flag(s, good.id, 10 * i);
+  }
+  assert.equal(s.over, true);
+  assert.equal(s.lives, 0);
+  const frozen = s.sheet ? match(s, genuine(s)[0].id, s.sheet.invoices[0].id, 99) : s;
+  assert.equal(frozen.score, s.score);
+});
+
+test('the clock tightens with the score, down to a readable floor', () => {
+  const fresh = createGame({seed: 11, now: 0});
+  assert.equal(clockMs(fresh), DEFAULTS.clockStartMs);
+  assert.ok(clockMs({...fresh, score: 60}) < DEFAULTS.clockStartMs);
+  assert.equal(clockMs({...fresh, score: 9000}), DEFAULTS.clockFloorMs);
+});
+
+test('the countdown runs full to empty and no further', () => {
+  const s = createGame({seed: 12, now: 0});
+  assert.equal(remaining(s, 0), 1);
+  assert.equal(remaining(s, DEFAULTS.clockStartMs * 3), 0);
+});
+
+test('a careful bookkeeper clears sheet after sheet without losing a life', () => {
+  let s = createGame({seed: 13, now: 0});
+  for (let i = 0; i < 8 && !s.over; i++) s = clearSheet(s, i * 100);
+  assert.equal(s.lives, DEFAULTS.lives);
+  assert.equal(s.sheets, 8);
+  assert.ok(s.score > 0);
+});
+
+test('the summary reads as a sentence in both locales', () => {
+  const s = {matched: 12, caught: 3};
+  assert.match(summarise(s, 'en'), /12 lines matched · 3 caught out/);
+  assert.match(summarise(s, 'nl'), /12 regels gematcht · 3 keer fraude gevonden/);
+});