@conduction/docusaurus-preset 3.38.0 → 3.39.0

package/src/components/RecordRun/RecordRun.jsx

@@ -0,0 +1,245 @@
+/**
+ * <RecordRun />
+ *
+ * Connext's mini-game. A record travels down the stack, and the stack
+ * is where records get stuck: a format nothing can read, a permission
+ * nobody granted, a connector that was never built. Steer around what
+ * would stop it, and pick up the apps that carry it further.
+ *
+ * The only one of the games with a position to steer rather than an
+ * answer to choose, which is why it sits on the page about the stack
+ * as a whole rather than on an app's own page.
+ *
+ * The rules live in ./engine.js with no DOM and no clock.
+ *
+ * Usage:
+ *
+ *   <RecordRun />
+ *
+ * Fires the shared `connext:gameend` event on game over and listens
+ * for `connext:gamereplay`, like every other mini-game.
+ *
+ * Accessibility: three lane buttons, each usable by tab, by click and
+ * by its number key (arrow keys work too). Every lane says in text
+ * what is coming towards the record, so the board is readable without
+ * seeing the grid, and the run is announced as it happens.
+ */
+
+import React, {useCallback, useEffect, useRef, useState} from 'react';
+import {translate} from '@docusaurus/Translate';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import {
+  createGame, step, move, moveTo, summarise, LANES, BLOCK, APP,
+} from './engine';
+import styles from './RecordRun.module.css';
+
+const GAME_ID = 'record-run';
+const TICK_MS = 60;
+
+function blockCopy(what) {
+  if (what === 'format') {
+    return translate({id: 'preset.recordRun.block.format', message: 'Format nothing reads', description: 'Obstacle in the record-run game: an unreadable format'});
+  }
+  if (what === 'permission') {
+    return translate({id: 'preset.recordRun.block.permission', message: 'Permission nobody granted', description: 'Obstacle in the record-run game: a missing permission'});
+  }
+  return translate({id: 'preset.recordRun.block.connector', message: 'Connector that is not there', description: 'Obstacle in the record-run game: a missing connector'});
+}
+
+function appCopy(what) {
+  if (what === 'register') {
+    return translate({id: 'preset.recordRun.app.register', message: 'Register', description: 'Pick-up in the record-run game: a register'});
+  }
+  if (what === 'catalogue') {
+    return translate({id: 'preset.recordRun.app.catalogue', message: 'Catalogue', description: 'Pick-up in the record-run game: a catalogue'});
+  }
+  return translate({id: 'preset.recordRun.app.portal', message: 'Portal', description: 'Pick-up in the record-run game: a portal'});
+}
+
+function cellCopy(cell) {
+  if (!cell || cell.kind === 'clear') return null;
+  return cell.kind === BLOCK ? blockCopy(cell.what) : appCopy(cell.what);
+}
+
+export default function RecordRun({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.recordRun.over.title', message: 'The record got stuck.', description: 'Headline on the game-over dialog after a record-run run'}),
+        subtitle: translate({id: 'preset.recordRun.over.subtitle', message: 'Three times, on the three things that always stop one.', description: 'Subtitle on the game-over dialog after a record-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 steer = useCallback((lane) => {
+    if (!gameRef.current || gameRef.current.over) return;
+    const next = moveTo(gameRef.current, lane);
+    gameRef.current = next;
+    setGame(next);
+  }, []);
+
+  useEffect(() => {
+    if (!running || typeof window === 'undefined') return undefined;
+    const onKey = (e) => {
+      if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
+        e.preventDefault();
+        const next = move(gameRef.current, e.key === 'ArrowLeft' ? -1 : 1);
+        gameRef.current = next;
+        setGame(next);
+        return;
+      }
+      const n = Number(e.key);
+      if (Number.isInteger(n) && n >= 1 && n <= LANES) {
+        e.preventDefault();
+        steer(n - 1);
+      }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [running, steer]);
+
+  const rows = game ? game.rows : [];
+  const lane = game ? game.lane : 1;
+  const last = game && game.last ? game.last : null;
+
+  return (
+    <section className={[styles.rr, className].filter(Boolean).join(' ')} aria-labelledby="record-run-title">
+      <header className={styles.head}>
+        <div>
+          <p className={styles.eyebrow}>
+            {translate({id: 'preset.recordRun.eyebrow', message: 'Mini-game', description: 'Eyebrow above the record-run game'})}
+          </p>
+          <h3 className={styles.title} id="record-run-title">
+            {translate({id: 'preset.recordRun.title', message: 'Record run', description: 'Name of the Connext mini-game'})}
+          </h3>
+          <p className={styles.lede}>
+            {translate({id: 'preset.recordRun.lede', message: 'One record, on its way through the stack. Steer around the three things that always stop one, and pick up the apps that carry it further.', description: 'One-line explanation of the record-run rules'})}
+          </p>
+        </div>
+        <div className={styles.hud} role="status" aria-live="polite">
+          <span className={styles.hudPill}>
+            {translate({id: 'preset.recordRun.hud.score', message: 'Score {score}', description: 'Score readout on the record-run HUD'}, {score: Number(game ? game.score : 0).toLocaleString(locale)})}
+          </span>
+          <span className={styles.hudPill}>
+            {translate({id: 'preset.recordRun.hud.lives', message: 'Retries {lives}', description: 'Remaining-lives readout on the record-run HUD'}, {lives: game ? game.lives : 3})}
+          </span>
+        </div>
+      </header>
+
+      <div className={styles.track} aria-hidden="true">
+        {/* Furthest row first, so the board reads top to bottom the way
+            it moves. */}
+        {rows.map((row) => (
+          <div className={styles.row} key={row.id}>
+            {row.cells.map((cell, i) => (
+              <span
+                key={i}
+                className={[
+                  styles.cell,
+                  cell.kind === BLOCK && styles.cellBlock,
+                  cell.kind === APP && styles.cellApp,
+                  i === lane && styles.cellLane,
+                ].filter(Boolean).join(' ')}>
+                {cellCopy(cell)}
+              </span>
+            ))}
+          </div>
+        ))}
+        {!game && (
+          <p className={styles.idle}>
+            {translate({id: 'preset.recordRun.idle', message: 'A record, three lanes, and everything that gets in the way.', description: 'Placeholder on the record-run track before the game starts'})}
+          </p>
+        )}
+      </div>
+
+      <div className={styles.lanes}>
+        {Array.from({length: LANES}).map((_, i) => {
+          const incoming = rows.length ? rows[rows.length - 1].cells[i] : null;
+          const what = cellCopy(incoming);
+          return (
+            <button
+              key={i}
+              type="button"
+              className={[styles.lane, i === lane && styles.laneHere].filter(Boolean).join(' ')}
+              onClick={() => steer(i)}
+              disabled={!running}
+              aria-pressed={i === lane}
+              aria-label={translate(
+                {id: 'preset.recordRun.laneLabel', message: 'Lane {n}. Coming next: {what}', description: 'Accessible label for a record-run lane button. {what} is what the next row holds in that lane.'},
+                {n: i + 1, what: what || translate({id: 'preset.recordRun.laneClear', message: 'clear', description: 'What a record-run lane holds when the next row is empty there'})},
+              )}>
+              <span className={styles.laneKey} aria-hidden="true">{i + 1}</span>
+              <span className={styles.laneWhat} aria-hidden="true">
+                {what || translate({id: 'preset.recordRun.laneClear', message: 'clear', description: 'What a record-run lane holds when the next row is empty there'})}
+              </span>
+            </button>
+          );
+        })}
+      </div>
+
+      <footer className={styles.foot}>
+        <button type="button" className={styles.start} onClick={begin}>
+          {game
+            ? translate({id: 'preset.recordRun.restart', message: 'Restart', description: 'Button that restarts the record-run game'})
+            : translate({id: 'preset.recordRun.start', message: 'Send a record', description: 'Button that starts the record-run game'})}
+        </button>
+        <p className={styles.hint} role="status" aria-live="polite">
+          {last && last.result === 'blocked' && translate(
+            {id: 'preset.recordRun.feedback.blocked', message: 'Stuck on: {what}', description: 'Feedback after the record hits an obstacle. {what} is the obstacle.'},
+            {what: blockCopy(last.what)},
+          )}
+          {last && last.result === 'collected' && translate(
+            {id: 'preset.recordRun.feedback.collected', message: 'Picked up: {what}', description: 'Feedback after the record collects an app. {what} is the app.'},
+            {what: appCopy(last.what)},
+          )}
+          {(!last || last.result === 'through') && translate({id: 'preset.recordRun.hint', message: 'Arrow keys, the number keys, or click a lane. Open lanes pay a little, apps pay more.', description: 'Hint under the record-run board explaining the controls'})}
+        </p>
+      </footer>
+    </section>
+  );
+}

package/src/components/RecordRun/RecordRun.module.css

@@ -0,0 +1,208 @@
+/**
+ * <RecordRun /> styles.
+ *
+ * Tokens only. One accent: whatever is about to stop the record. The
+ * lane buttons repeat what each lane holds in words, so the grid is a
+ * picture of the state rather than the only copy of it.
+ */
+
+.rr {
+  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: 18px;
+}
+
+.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;
+}
+
+.track {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 12px;
+  border-radius: var(--radius-md);
+  background: var(--c-cobalt-50);
+  max-width: 620px;
+  min-height: 180px;
+}
+
+.row {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 6px;
+}
+
+.cell {
+  min-height: 26px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px 6px;
+  border-radius: var(--radius-sm);
+  background: white;
+  border: 1px solid var(--c-cobalt-100);
+  font-size: 10px;
+  line-height: 1.15;
+  text-align: center;
+  color: var(--c-cobalt-400);
+}
+
+/* The lane the record is in, marked down the whole column so the
+   player can see where they are without following the record. */
+.cellLane {
+  border-color: var(--c-blue-cobalt);
+  box-shadow: inset 0 0 0 1px var(--c-blue-cobalt);
+}
+
+.cellBlock {
+  background: var(--c-orange-knvb);
+  border-color: var(--c-orange-knvb);
+  color: white;
+  font-weight: 600;
+}
+
+.cellApp {
+  background: var(--c-mint-300);
+  border-color: var(--c-mint-500);
+  color: var(--c-cobalt-900);
+  font-weight: 600;
+}
+
+.idle {
+  margin: auto;
+  font-size: 14px;
+  color: var(--c-cobalt-400);
+  text-align: center;
+}
+
+.lanes {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 6px;
+  margin-top: 8px;
+  max-width: 620px;
+}
+
+.lane {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 10px 8px;
+  border: 1px solid var(--c-cobalt-200);
+  border-radius: var(--radius-md);
+  background: white;
+  font-family: inherit;
+  font-size: 11px;
+  color: var(--c-cobalt-700);
+  cursor: pointer;
+  transition: border-color 120ms ease, background 120ms ease;
+}
+.lane:hover:not(:disabled) { border-color: var(--c-blue-cobalt); }
+.lane:disabled { opacity: 0.55; cursor: default; }
+.lane:focus-visible { outline: 2px solid var(--c-blue-cobalt); outline-offset: 2px; }
+
+.laneHere {
+  border-color: var(--c-blue-cobalt);
+  background: var(--c-cobalt-50);
+  font-weight: 600;
+  color: var(--c-cobalt-900);
+}
+
+.laneKey {
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 10px;
+  color: var(--c-cobalt-400);
+  border: 1px solid var(--c-cobalt-200);
+  border-radius: 3px;
+  padding: 0 5px;
+}
+
+.laneWhat { text-align: center; line-height: 1.2; }
+
+.foot {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+  margin-top: 16px;
+}
+
+.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) {
+  .row:last-child { animation: rrArrive 120ms ease-out; }
+  @keyframes rrArrive {
+    from { opacity: 0.4; transform: translateY(-4px); }
+    to   { opacity: 1; transform: none; }
+  }
+}

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

@@ -0,0 +1,191 @@
+/**
+ * engine.test.js — the record-run rules.
+ *
+ * The rule that has to hold on every board: a row never blocks more
+ * than one lane. Two blocks in one row can strand a record that was
+ * already committed to a lane, and a death the player could not have
+ * avoided is the fastest way to make an arcade game feel rigged.
+ */
+
+'use strict';
+
+const test = require('node:test');
+const assert = require('node:assert/strict');
+
+const {
+  createGame, step, move, moveTo, stepMs, summarise,
+  LANES, CLEAR, BLOCK, APP, BLOCKS, APPS, DEFAULTS,
+} = require('../engine.js');
+
+/** Force the row the record is about to meet. */
+function withArriving(state, cells) {
+  const rows = [...state.rows];
+  rows[rows.length - 1] = {cells, id: 'forced'};
+  return {...state, rows};
+}
+const clearRow = () => Array.from({length: LANES}, () => ({kind: CLEAR}));
+
+test('a new game starts centred, alive, and with a full board', () => {
+  const s = createGame({seed: 1, now: 0});
+  assert.equal(s.lane, 1);
+  assert.equal(s.lives, DEFAULTS.lives);
+  assert.equal(s.rows.length, DEFAULTS.rows);
+  assert.equal(s.over, false);
+});
+
+test('no row ever blocks more than one lane', () => {
+  /* Fifty seeds, a hundred rows each: a generator bug shows up as one
+     bad row in thousands, not as every row. */
+  for (let seed = 1; seed <= 50; seed++) {
+    let s = createGame({seed, now: 0});
+    let t = 0;
+    for (let i = 0; i < 100; i++) {
+      for (const row of s.rows) {
+        const blocks = row.cells.filter((c) => c.kind === BLOCK).length;
+        assert.ok(blocks <= 1, `seed ${seed}: a row blocked ${blocks} lanes`);
+      }
+      t += stepMs(s);
+      /* Stay on a lane that is clear, so the run does not end early. */
+      const arriving = s.rows[s.rows.length - 1];
+      const safe = arriving.cells.findIndex((c) => c.kind !== BLOCK);
+      s = step(moveTo(s, safe), t);
+      if (s.over) break;
+    }
+  }
+});
+
+test('every cell the generator produces is one of the kinds the board knows', () => {
+  let s = createGame({seed: 7, now: 0});
+  let t = 0;
+  for (let i = 0; i < 200; i++) {
+    for (const row of s.rows) {
+      for (const cell of row.cells) {
+        assert.ok([CLEAR, BLOCK, APP].includes(cell.kind), `unknown cell ${cell.kind}`);
+        if (cell.kind === BLOCK) assert.ok(BLOCKS.includes(cell.what));
+        if (cell.kind === APP) assert.ok(APPS.includes(cell.what));
+      }
+    }
+    t += stepMs(s);
+    const safe = s.rows[s.rows.length - 1].cells.findIndex((c) => c.kind !== BLOCK);
+    s = step(moveTo(s, safe), t);
+    if (s.over) break;
+  }
+});
+
+test('the record moves between lanes, and the edges hold', () => {
+  const s = createGame({seed: 2, now: 0});
+  assert.equal(move(s, -1).lane, 0);
+  assert.equal(move(move(s, -1), -1).lane, 0, 'the record walked off the left edge');
+  assert.equal(move(s, 1).lane, 2);
+  assert.equal(move(move(s, 1), 1).lane, 2, 'the record walked off the right edge');
+  assert.equal(moveTo(s, 2).lane, 2);
+  assert.equal(moveTo(s, 9).lane, s.lane, 'a lane that does not exist was accepted');
+});
+
+test('nothing happens until the step is due', () => {
+  const s = createGame({seed: 3, now: 0});
+  const early = step(s, s.nextStepAt - 1);
+  assert.equal(early.travelled, 0);
+  assert.equal(early.score, 0);
+  const due = step(s, s.nextStepAt);
+  assert.equal(due.travelled, 1);
+});
+
+test('an open lane pays a little, and keeps the board full', () => {
+  let s = createGame({seed: 4, now: 0});
+  s = withArriving(s, clearRow());
+  const after = step(s, s.nextStepAt);
+  assert.equal(after.score, DEFAULTS.pointsPerRow);
+  assert.equal(after.lives, DEFAULTS.lives);
+  assert.equal(after.rows.length, DEFAULTS.rows, 'the board ran out of rows');
+});
+
+test('an app in the lane is picked up and pays properly', () => {
+  let s = createGame({seed: 5, now: 0});
+  const cells = clearRow();
+  cells[s.lane] = {kind: APP, what: 'register'};
+  s = step(withArriving(s, cells), s.nextStepAt);
+  assert.equal(s.score, DEFAULTS.pointsPerApp);
+  assert.equal(s.collected, 1);
+  assert.equal(s.last.result, 'collected');
+});
+
+test('a block in the lane costs a life and says what stopped it', () => {
+  let s = createGame({seed: 6, now: 0});
+  const cells = clearRow();
+  cells[s.lane] = {kind: BLOCK, what: 'permission'};
+  s = step(withArriving(s, cells), s.nextStepAt);
+  assert.equal(s.lives, DEFAULTS.lives - 1);
+  assert.equal(s.blocked, 1);
+  assert.equal(s.last.result, 'blocked');
+  assert.equal(s.last.what, 'permission');
+});
+
+test('a block in another lane is not the record problem', () => {
+  let s = createGame({seed: 6, now: 0});
+  const cells = clearRow();
+  cells[(s.lane + 1) % LANES] = {kind: BLOCK, what: 'format'};
+  s = step(withArriving(s, cells), s.nextStepAt);
+  assert.equal(s.lives, DEFAULTS.lives);
+  assert.equal(s.score, DEFAULTS.pointsPerRow);
+});
+
+test('three blocks end the run, and nothing moves afterwards', () => {
+  let s = createGame({seed: 8, now: 0});
+  let t = 0;
+  for (let i = 0; i < 3; i++) {
+    const cells = clearRow();
+    cells[s.lane] = {kind: BLOCK, what: 'connector'};
+    t = s.nextStepAt;
+    s = step(withArriving(s, cells), t);
+  }
+  assert.equal(s.over, true);
+  assert.equal(s.lives, 0);
+  assert.equal(step(s, t + 10000).travelled, s.travelled);
+  assert.equal(move(s, 1).lane, s.lane, 'the record still steered after game over');
+});
+
+test('the board speeds up with the score, down to a floor a person can react in', () => {
+  const fresh = createGame({seed: 9, now: 0});
+  assert.equal(stepMs(fresh), DEFAULTS.stepStartMs);
+  assert.ok(stepMs({...fresh, score: 100}) < DEFAULTS.stepStartMs);
+  assert.equal(stepMs({...fresh, score: 10000}), DEFAULTS.stepFloorMs);
+});
+
+test('a player who always takes a clear lane survives a long run', () => {
+  let s = createGame({seed: 11, now: 0});
+  let t = 0;
+  for (let i = 0; i < 300; i++) {
+    const arriving = s.rows[s.rows.length - 1];
+    const safe = arriving.cells.findIndex((c) => c.kind !== BLOCK);
+    assert.ok(safe >= 0, 'a row left the record nowhere to go');
+    t = s.nextStepAt;
+    s = step(moveTo(s, safe), t);
+  }
+  assert.equal(s.over, false);
+  assert.equal(s.lives, DEFAULTS.lives);
+  assert.ok(s.score > 0);
+});
+
+test('the same seed runs the same board, a different one does not', () => {
+  const shape = (seed) => {
+    let s = createGame({seed, now: 0});
+    let t = 0;
+    const out = [];
+    for (let i = 0; i < 10; i++) {
+      out.push(s.rows.map((r) => r.cells.map((c) => c.kind[0]).join('')).join('|'));
+      t = s.nextStepAt;
+      const safe = s.rows[s.rows.length - 1].cells.findIndex((c) => c.kind !== BLOCK);
+      s = step(moveTo(s, safe), t);
+    }
+    return out.join('//');
+  };
+  assert.equal(shape(31), shape(31));
+  assert.notEqual(shape(31), shape(32));
+});
+
+test('the summary reads as a sentence in both locales', () => {
+  const s = {travelled: 42, collected: 7};
+  assert.match(summarise(s, 'en'), /42 hops · 7 apps picked up/);
+  assert.match(summarise(s, 'nl'), /42 stappen · 7 apps onderweg/);
+});