@conduction/docusaurus-preset 3.38.0 → 3.39.0

package/src/components/RecordRun/engine.js

@@ -0,0 +1,180 @@
+/**
+ * Record run — the rules, with no DOM and no clock of its own.
+ *
+ * Connext's 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 is not there. Move the record out
+ * of the way of what would stop it, and pick up the apps that move it
+ * along.
+ *
+ * The board is three lanes and a queue of rows moving towards the
+ * record. That makes it the only one of the four games with a position
+ * to steer rather than a thing to choose, which is the point: three
+ * games about picking the right answer would be one game three times.
+ *
+ * The grid is the whole state, so a run is replayable from a seed and
+ * every rule below is a pure function of it.
+ */
+
+export const LANES = 3;
+
+/* What a row can hold in a lane. */
+export const CLEAR = 'clear';
+export const BLOCK = 'block';
+export const APP = 'app';
+
+/* The three ways a record gets stuck, and the apps that carry it on.
+   The component turns these into words; the engine only cares that a
+   block stops the record and an app is worth collecting. */
+export const BLOCKS = ['format', 'permission', 'connector'];
+export const APPS = ['register', 'catalogue', 'portal'];
+
+export const DEFAULTS = {
+  lives: 3,
+  rows: 6,
+  /* How long a row takes to travel one step towards the record. Falls
+     with the score, down to a floor a person can still react inside. */
+  stepStartMs: 620,
+  stepFloorMs: 240,
+  rampPerPoint: 1.6,
+  pointsPerRow: 2,
+  pointsPerApp: 8,
+  /* Two lanes blocked at once is a dead end when the record is already
+     committed, so a row never carries more than one block. */
+  blockChance: 0.55,
+  appChance: 0.3,
+};
+
+function mulberry32(seed) {
+  let a = seed >>> 0;
+  return function random() {
+    a |= 0; a = (a + 0x6D2B79F5) | 0;
+    let t = Math.imul(a ^ (a >>> 15), 1 | a);
+    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+/**
+ * Build one row: at most one block, optionally one app, and never a
+ * board the record cannot get through.
+ */
+function makeRow(state) {
+  const cells = Array.from({length: LANES}, () => ({kind: CLEAR}));
+
+  if (state.random() < state.cfg.blockChance) {
+    const lane = Math.floor(state.random() * LANES);
+    cells[lane] = {kind: BLOCK, what: BLOCKS[Math.floor(state.random() * BLOCKS.length)]};
+  }
+
+  if (state.random() < state.cfg.appChance) {
+    const free = cells.map((c, i) => (c.kind === CLEAR ? i : -1)).filter((i) => i >= 0);
+    if (free.length) {
+      const lane = free[Math.floor(state.random() * free.length)];
+      cells[lane] = {kind: APP, what: APPS[Math.floor(state.random() * APPS.length)]};
+    }
+  }
+
+  return {cells, id: `r${state.spawned}`};
+}
+
+export function createGame({seed = Date.now(), now = 0, config = {}} = {}) {
+  const cfg = {...DEFAULTS, ...config};
+  let state = {
+    cfg,
+    random: mulberry32(seed),
+    lane: 1,
+    rows: [],
+    spawned: 0,
+    score: 0,
+    lives: cfg.lives,
+    collected: 0,
+    blocked: 0,
+    travelled: 0,
+    nextStepAt: now + cfg.stepStartMs,
+    last: null,
+    over: false,
+  };
+  /* Start with a full board so the first rows are visible before they
+     matter, rather than the record meeting a row it never saw. */
+  for (let i = 0; i < cfg.rows; i++) {
+    state = {...state, rows: [...state.rows, makeRow(state)], spawned: state.spawned + 1};
+  }
+  return state;
+}
+
+/** How long a row currently takes to advance one step. */
+export function stepMs(state) {
+  const {cfg, score} = state;
+  return Math.max(cfg.stepFloorMs, cfg.stepStartMs - score * cfg.rampPerPoint);
+}
+
+/** Move the record. Lanes do not wrap: the edges are edges. */
+export function move(state, delta) {
+  if (state.over) return state;
+  const lane = Math.min(LANES - 1, Math.max(0, state.lane + delta));
+  return lane === state.lane ? state : {...state, lane};
+}
+
+export function moveTo(state, lane) {
+  if (state.over) return state;
+  if (!Number.isInteger(lane) || lane < 0 || lane >= LANES) return state;
+  return {...state, lane};
+}
+
+/**
+ * Advance the board if the step is due.
+ *
+ * The row nearest the record is the one it meets. A block in the
+ * record's lane costs a life; an app in it is collected; an empty lane
+ * is worth the small points that keep a careful player moving.
+ */
+export function step(state, now) {
+  if (state.over || now < state.nextStepAt) return state;
+
+  const rows = [...state.rows];
+  const arriving = rows.pop();
+  let next = {...state, rows, travelled: state.travelled + 1};
+
+  const cell = arriving ? arriving.cells[state.lane] : {kind: CLEAR};
+
+  if (cell.kind === BLOCK) {
+    const lives = next.lives - 1;
+    next = {
+      ...next,
+      lives,
+      blocked: next.blocked + 1,
+      last: {result: 'blocked', what: cell.what, at: now},
+      over: lives <= 0,
+    };
+  } else if (cell.kind === APP) {
+    next = {
+      ...next,
+      score: next.score + next.cfg.pointsPerApp,
+      collected: next.collected + 1,
+      last: {result: 'collected', what: cell.what, at: now},
+    };
+  } else {
+    next = {...next, score: next.score + next.cfg.pointsPerRow, last: {result: 'through', at: now}};
+  }
+
+  if (next.over) return next;
+
+  /* Refill from the far end, so the board is always full and the
+     player can read what is coming. */
+  const fresh = makeRow(next);
+  return {
+    ...next,
+    rows: [fresh, ...next.rows],
+    spawned: next.spawned + 1,
+    nextStepAt: now + stepMs(next),
+  };
+}
+
+/** The line that goes on the game-over card and into the post. */
+export function summarise(state, locale = 'en') {
+  const n = (v) => Number(v || 0).toLocaleString(locale);
+  return locale === 'nl'
+    ? `${n(state.travelled)} stappen · ${n(state.collected)} apps onderweg`
+    : `${n(state.travelled)} hops · ${n(state.collected)} apps picked up`;
+}

package/src/components/StampRush/StampRush.jsx

@@ -0,0 +1,232 @@
+/**
+ * <StampRush />
+ *
+ * Decidiq's mini-game. Decisions land on the desk faster than you can
+ * read them; adopt the ones that carry quorum, hold back the ones that
+ * do not. Stamping a decision that has no quorum, or one you should
+ * have declared an interest in, costs a life. Holding one back costs
+ * nothing, which is the only way a game can reward restraint.
+ *
+ * The rules live in ./engine.js with no DOM and no clock, so they are
+ * tested rather than observed. This file owns the clock, the keyboard
+ * and the paint.
+ *
+ * Usage on a product page:
+ *
+ *   <StampRush />
+ *
+ * On game over it fires the same `connext:gameend` event every other
+ * mini-game fires, so the shared <GameModal/> records the score and
+ * offers to post it, and it listens for `connext:gamereplay` so the
+ * dialog's "Play again" restarts it in place.
+ *
+ * Accessibility: every desk slot is a real button, reachable by tab and
+ * by the number keys 1 to 6. Score, lives and each decision's state are
+ * announced as text, never by colour alone. Nothing moves until the
+ * player starts the game, so `prefers-reduced-motion` only quiets the
+ * card entrance and the stamp flash.
+ */
+
+import React, {useCallback, useEffect, useRef, useState} from 'react';
+import {translate} from '@docusaurus/Translate';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import {createGame, step, stamp, summarise, SLOTS, READY, NO_QUORUM, CONFLICT} from './engine';
+import styles from './StampRush.module.css';
+
+const GAME_ID = 'stamp-rush';
+const TICK_MS = 100;
+
+function cardCopy(card) {
+  if (!card) return null;
+  if (card.kind === READY) {
+    return {
+      title: translate({id: 'preset.stampRush.card.ready.title', message: 'Ready to adopt', description: 'Stamp-rush card that the player should stamp'}),
+      note: translate(
+        {id: 'preset.stampRush.card.ready.note', message: 'Quorum {have} of {need}', description: 'Quorum line on a stamp-rush card. {have} present, {need} required.'},
+        {have: card.quorum.have, need: card.quorum.need},
+      ),
+    };
+  }
+  if (card.kind === NO_QUORUM) {
+    return {
+      title: translate({id: 'preset.stampRush.card.noQuorum.title', message: 'No quorum', description: 'Stamp-rush card the player must hold back because too few members are present'}),
+      note: translate(
+        {id: 'preset.stampRush.card.noQuorum.note', message: 'Quorum {have} of {need}', description: 'Quorum line on a stamp-rush card that lacks quorum.'},
+        {have: card.quorum.have, need: card.quorum.need},
+      ),
+    };
+  }
+  return {
+    title: translate({id: 'preset.stampRush.card.conflict.title', message: 'Interest declared', description: 'Stamp-rush card the player must hold back because of a declared conflict of interest'}),
+    note: translate({id: 'preset.stampRush.card.conflict.note', message: 'You may not vote', description: 'Second line on the conflict-of-interest card'}),
+  };
+}
+
+export default function StampRush({className}) {
+  const {i18n} = useDocusaurusContext();
+  const locale = (i18n && i18n.currentLocale) || 'en';
+
+  const [game, setGame] = useState(null);
+  const [flash, setFlash] = useState(null);
+  /* The run is kept in a ref as well, because the tick and the
+     game-over dispatch both read it outside React's render cycle. */
+  const gameRef = useRef(null);
+  const startedAtRef = useRef(0);
+  const endedRef = useRef(false);
+
+  const running = Boolean(game) && !game.over;
+
+  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);
+    setFlash(null);
+  }, []);
+
+  /* The clock. One interval for the whole board: cards expire and
+     spawn on the same tick, so nothing can drift apart. */
+  useEffect(() => {
+    if (!running) return undefined;
+    const id = setInterval(() => {
+      const now = (typeof performance !== 'undefined' ? performance.now() : Date.now()) - startedAtRef.current;
+      const next = step(gameRef.current, now);
+      gameRef.current = next;
+      setGame(next);
+    }, TICK_MS);
+    return () => clearInterval(id);
+  }, [running]);
+
+  /* Game over: tell the shared dialog once, with a line it can post. */
+  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.stampRush.over.title', message: 'The meeting ran out of patience.', description: 'Headline on the game-over dialog after a stamp-rush run'}),
+        subtitle: translate({id: 'preset.stampRush.over.subtitle', message: 'Three bad stamps and the chair takes the pen back.', description: 'Subtitle on the game-over dialog after a stamp-rush run'}),
+      },
+    }));
+  }, [game, locale]);
+
+  /* "Play again" in the dialog restarts this game in place. */
+  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 hit = useCallback((slot) => {
+    if (!gameRef.current || gameRef.current.over) return;
+    const card = gameRef.current.slots[slot];
+    if (!card) return;
+    const now = (typeof performance !== 'undefined' ? performance.now() : Date.now()) - startedAtRef.current;
+    const next = stamp(gameRef.current, slot, now);
+    gameRef.current = next;
+    setGame(next);
+    setFlash({slot, good: card.kind === READY, at: now});
+  }, []);
+
+  /* Number keys 1 to 6, so the game is playable without a mouse and
+     fast enough to be worth playing that way. */
+  useEffect(() => {
+    if (!running || typeof window === 'undefined') return undefined;
+    const onKey = (e) => {
+      const n = Number(e.key);
+      if (Number.isInteger(n) && n >= 1 && n <= SLOTS) {
+        e.preventDefault();
+        hit(n - 1);
+      }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [running, hit]);
+
+  const lives = game ? game.lives : 3;
+  const score = game ? game.score : 0;
+
+  return (
+    <section className={[styles.rush, className].filter(Boolean).join(' ')} aria-labelledby="stamp-rush-title">
+      <header className={styles.head}>
+        <div>
+          <p className={styles.eyebrow}>
+            {translate({id: 'preset.stampRush.eyebrow', message: 'Mini-game', description: 'Eyebrow above the stamp-rush game on a product page'})}
+          </p>
+          <h3 className={styles.title} id="stamp-rush-title">
+            {translate({id: 'preset.stampRush.title', message: 'Stamp rush', description: 'Name of the Decidiq mini-game'})}
+          </h3>
+          <p className={styles.lede}>
+            {translate({id: 'preset.stampRush.lede', message: 'Adopt what has quorum. Hold back what does not. Three bad stamps and the chair takes the pen back.', description: 'One-line explanation of the stamp-rush rules'})}
+          </p>
+        </div>
+        <div className={styles.hud} role="status" aria-live="polite">
+          <span className={styles.hudScore}>
+            {translate({id: 'preset.stampRush.hud.score', message: 'Score {score}', description: 'Score readout on the stamp-rush HUD'}, {score: Number(score).toLocaleString(locale)})}
+          </span>
+          <span className={styles.hudLives}>
+            {translate({id: 'preset.stampRush.hud.lives', message: 'Stamps left {lives}', description: 'Remaining-lives readout on the stamp-rush HUD'}, {lives})}
+          </span>
+        </div>
+      </header>
+
+      <div className={styles.desk}>
+        {Array.from({length: SLOTS}).map((_, i) => {
+          const card = game ? game.slots[i] : null;
+          const copy = cardCopy(card);
+          const isFlash = flash && flash.slot === i;
+          return (
+            <button
+              key={i}
+              type="button"
+              className={[
+                styles.slot,
+                card && styles.slotFull,
+                card && card.kind === READY && styles.slotReady,
+                card && card.kind !== READY && styles.slotHold,
+                isFlash && (flash.good ? styles.flashGood : styles.flashBad),
+              ].filter(Boolean).join(' ')}
+              onClick={() => hit(i)}
+              onAnimationEnd={() => setFlash((f) => (f && f.slot === i ? null : f))}
+              disabled={!running}
+              aria-label={copy
+                ? translate(
+                    /* States the decision and nothing else. An
+                       earlier version ended "Stamp it", which told a
+                       screen-reader user to stamp the very cards the
+                       game exists to hold back. */
+                    {id: 'preset.stampRush.slot.full', message: 'Desk {n}: {state}, {note}', description: 'Accessible label for an occupied stamp-rush desk slot. {state} is the decision state, {note} its quorum line.'},
+                    {n: i + 1, state: copy.title, note: copy.note},
+                  )
+                : translate({id: 'preset.stampRush.slot.empty', message: 'Desk {n}: empty', description: 'Accessible label for an empty stamp-rush desk slot'}, {n: i + 1})}>
+              <span className={styles.slotIndex} aria-hidden="true">{i + 1}</span>
+              {copy && (
+                <span className={styles.card}>
+                  <span className={styles.cardTitle}>{copy.title}</span>
+                  <span className={styles.cardNote}>{copy.note}</span>
+                </span>
+              )}
+            </button>
+          );
+        })}
+      </div>
+
+      <footer className={styles.foot}>
+        <button type="button" className={styles.start} onClick={begin}>
+          {game
+            ? translate({id: 'preset.stampRush.restart', message: 'Restart', description: 'Button that restarts the stamp-rush game'})
+            : translate({id: 'preset.stampRush.start', message: 'Take the pen', description: 'Button that starts the stamp-rush game'})}
+        </button>
+        <p className={styles.hint}>
+          {translate({id: 'preset.stampRush.hint', message: 'Click a desk, or press its number. Adopting is worth more each time you get it right in a row.', description: 'Hint under the stamp-rush board explaining the controls and the streak bonus'})}
+        </p>
+      </footer>
+    </section>
+  );
+}

package/src/components/StampRush/StampRush.module.css

@@ -0,0 +1,188 @@
+/**
+ * <StampRush /> styles.
+ *
+ * Tokens only, and one orange accent: the card that must be held back.
+ * Every state is carried by text as well as by colour, because a
+ * player who cannot tell mint from terracotta still has to know which
+ * decision may be adopted.
+ */
+
+.rush {
+  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: 52ch;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--c-cobalt-700);
+}
+
+.hud {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+.hudScore,
+.hudLives {
+  padding: 6px 10px;
+  border-radius: var(--radius-pill);
+  background: var(--c-cobalt-50);
+  color: var(--c-cobalt-900);
+  white-space: nowrap;
+}
+
+/* Capped: across a full content column the six slots become
+   billboards, and a desk you cannot take in at a glance is not a game
+   you can play at speed. */
+.desk {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 10px;
+  max-width: 560px;
+}
+@media (max-width: 560px) {
+  .desk { grid-template-columns: repeat(2, 1fr); }
+}
+
+.slot {
+  position: relative;
+  aspect-ratio: 5 / 3;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  border: 1px dashed var(--c-cobalt-200);
+  border-radius: var(--radius-md);
+  background: var(--c-cobalt-50);
+  cursor: pointer;
+  font-family: inherit;
+  text-align: center;
+  transition: border-color 120ms ease, background 120ms ease;
+}
+.slot:disabled { cursor: default; opacity: 0.75; }
+.slot:focus-visible {
+  outline: 2px solid var(--c-blue-cobalt);
+  outline-offset: 2px;
+}
+
+.slotIndex {
+  position: absolute;
+  top: 6px;
+  left: 8px;
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 10px;
+  color: var(--c-cobalt-300);
+}
+
+.slotFull {
+  border-style: solid;
+  background: white;
+  box-shadow: var(--shadow-3);
+}
+.slotReady { border-color: var(--c-mint-500); }
+.slotHold  { border-color: var(--c-orange-knvb); }
+
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.cardTitle {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--c-cobalt-900);
+  line-height: 1.25;
+}
+
+.cardNote {
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 11px;
+  color: var(--c-cobalt-700);
+}
+
+.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: 48ch;
+}
+
+/* The card arriving, and the answer to a stamp. Motion only: every
+   state above is already readable without it. */
+@media (prefers-reduced-motion: no-preference) {
+  .slotFull .card { animation: srLand 160ms ease-out both; }
+  @keyframes srLand {
+    from { opacity: 0; transform: translateY(4px) scale(0.96); }
+    to   { opacity: 1; transform: none; }
+  }
+
+  .flashGood { animation: srGood 260ms ease-out; }
+  .flashBad  { animation: srBad 260ms ease-out; }
+  @keyframes srGood {
+    0%   { background: var(--c-mint-300); }
+    100% { background: var(--c-cobalt-50); }
+  }
+  @keyframes srBad {
+    0%, 100% { background: var(--c-cobalt-50); transform: translateX(0); }
+    25%  { background: var(--c-coral-300); transform: translateX(-3px); }
+    75%  { transform: translateX(3px); }
+  }
+}