@conduction/docusaurus-preset 3.37.0 → 3.39.0

package/src/components/BlueprintRush/engine.js

@@ -0,0 +1,172 @@
+/**
+ * Blueprint rush — the rules, with no DOM and no clock of its own.
+ *
+ * Buildiq's game. A blueprint asks for the parts an app needs: where
+ * the records live, what one looks like, how people fill it in, who
+ * may see it. The tray offers the parts plus a few that belong to
+ * some other app. Fit the blueprint before the clock runs out; every
+ * finished app buys you more time.
+ *
+ * Unlike the other two games this one is a puzzle rather than a
+ * reaction test: the pressure comes from reading four slots at once,
+ * not from a card you have to hit in time. Picking a part that does
+ * not belong costs seconds rather than a life, because in the builder
+ * a wrong part is an undo, not a disaster.
+ *
+ * Time and randomness are injected. The component owns the clock.
+ */
+
+/* Every part an app can need. `slot` is what the blueprint asks for,
+   in the reader's words; the component supplies the sentences. */
+export const PARTS = [
+  'register',
+  'schema',
+  'form',
+  'view',
+  'flow',
+  'permission',
+  'widget',
+  'notification',
+];
+
+export const DEFAULTS = {
+  /* Long enough to read four slots and a tray on the first blueprint,
+     and the bonus keeps a good player alive rather than the start
+     being generous. */
+  startMs: 30000,
+  bonusMs: 7000,
+  penaltyMs: 2500,
+  slots: 4,
+  distractors: 2,
+  pointsPerApp: 25,
+  comboBonus: 5,
+};
+
+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;
+  };
+}
+
+function shuffled(list, random) {
+  const out = [...list];
+  for (let i = out.length - 1; i > 0; i--) {
+    const j = Math.floor(random() * (i + 1));
+    [out[i], out[j]] = [out[j], out[i]];
+  }
+  return out;
+}
+
+function dealBlueprint(state, now) {
+  const pool = shuffled(PARTS, state.random);
+  const needed = pool.slice(0, state.cfg.slots);
+  const distractors = pool.slice(state.cfg.slots, state.cfg.slots + state.cfg.distractors);
+  return {
+    ...state,
+    blueprint: {
+      /* Slots keep the order they were dealt in; the tray is shuffled
+         separately, so the answer is never "top to bottom". */
+      needed,
+      filled: [],
+      tray: shuffled([...needed, ...distractors], state.random),
+      startedAt: now,
+    },
+  };
+}
+
+export function createGame({seed = Date.now(), now = 0, config = {}} = {}) {
+  const cfg = {...DEFAULTS, ...config};
+  const base = {
+    cfg,
+    random: mulberry32(seed),
+    blueprint: null,
+    score: 0,
+    built: 0,
+    wrong: 0,
+    combo: 0,
+    bestCombo: 0,
+    endsAt: now + cfg.startMs,
+    last: null,
+    over: false,
+  };
+  return dealBlueprint(base, now);
+}
+
+/** Milliseconds left on the clock, never negative. */
+export function timeLeft(state, now) {
+  return Math.max(0, state.endsAt - now);
+}
+
+/** Advance to `now`. The only thing the clock can do here is end it. */
+export function step(state, now) {
+  if (state.over) return state;
+  if (timeLeft(state, now) > 0) return state;
+  return {...state, over: true, last: {result: 'timeout', at: now}};
+}
+
+/**
+ * Put `part` on the blueprint.
+ *
+ * A part the blueprint does not ask for, or one already placed, costs
+ * seconds. Completing the blueprint scores, adds time and deals the
+ * next one.
+ */
+export function place(state, part, now) {
+  if (state.over || !state.blueprint) return state;
+
+  const {needed, filled} = state.blueprint;
+  const wanted = needed.includes(part);
+  const already = filled.includes(part);
+
+  if (!wanted || already) {
+    const endsAt = state.endsAt - state.cfg.penaltyMs;
+    const out = {
+      ...state,
+      endsAt,
+      wrong: state.wrong + 1,
+      combo: 0,
+      last: {result: already ? 'duplicate' : 'wrong', part, at: now},
+    };
+    /* The penalty can end the run: check here rather than waiting for
+       the next tick, so the game does not keep taking clicks after the
+       clock has already gone. */
+    return timeLeft(out, now) > 0 ? out : {...out, over: true};
+  }
+
+  const nextFilled = [...filled, part];
+  const done = nextFilled.length === needed.length;
+
+  if (!done) {
+    return {
+      ...state,
+      blueprint: {...state.blueprint, filled: nextFilled},
+      last: {result: 'placed', part, at: now},
+    };
+  }
+
+  const combo = state.combo + 1;
+  const gained = state.cfg.pointsPerApp + (combo - 1) * state.cfg.comboBonus;
+  const built = {
+    ...state,
+    blueprint: {...state.blueprint, filled: nextFilled},
+    score: state.score + gained,
+    built: state.built + 1,
+    combo,
+    bestCombo: Math.max(state.bestCombo, combo),
+    endsAt: state.endsAt + state.cfg.bonusMs,
+    last: {result: 'built', points: gained, at: now},
+  };
+  return dealBlueprint(built, now);
+}
+
+/** 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.built)} apps gebouwd · reeks ${n(state.bestCombo)}`
+    : `${n(state.built)} apps built · streak ${n(state.bestCombo)}`;
+}

package/src/components/DeadlineDefender/DeadlineDefender.jsx

@@ -0,0 +1,237 @@
+/**
+ * <DeadlineDefender />
+ *
+ * Dossiq's mini-game. A case arrives with its legal deadline already
+ * running. Read it, send it to the right next step, and do it before
+ * the clock empties. The wrong step costs the same as running out of
+ * time, because in a real queue both end the same way: the case sits
+ * somewhere nobody is looking.
+ *
+ * The rules live in ./engine.js with no DOM and no clock. This file
+ * owns the clock, the keyboard and the paint.
+ *
+ * Usage on a product page:
+ *
+ *   <DeadlineDefender />
+ *
+ * Fires the shared `connext:gameend` event on game over, and listens
+ * for `connext:gamereplay`, like every other mini-game.
+ *
+ * Accessibility: the three steps are real buttons, reachable by tab
+ * and by the keys 1, 2 and 3. The case text carries the whole puzzle,
+ * so nothing depends on the countdown bar being seen; the bar is
+ * announced as a percentage for anyone who cannot see it drain.
+ */
+
+import React, {useCallback, useEffect, useRef, useState} from 'react';
+import {translate} from '@docusaurus/Translate';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import {
+  createGame, step, route, remaining, summarise, LANES, INTAKE, REVIEW, DECISION,
+} from './engine';
+import styles from './DeadlineDefender.module.css';
+
+const GAME_ID = 'deadline-defender';
+const TICK_MS = 80;
+
+function laneLabel(lane) {
+  if (lane === INTAKE) {
+    return translate({id: 'preset.deadlineDefender.lane.intake', message: 'Intake', description: 'Name of the intake step in the deadline-defender game'});
+  }
+  if (lane === REVIEW) {
+    return translate({id: 'preset.deadlineDefender.lane.review', message: 'Assessment', description: 'Name of the assessment step in the deadline-defender game'});
+  }
+  return translate({id: 'preset.deadlineDefender.lane.decision', message: 'Decision', description: 'Name of the decision step in the deadline-defender game'});
+}
+
+/* One sentence per situation, each written so the right step follows
+   from what it says rather than from remembering a colour. */
+function situationText(key) {
+  switch (key) {
+    case 'permitReceived':
+      return translate({id: 'preset.deadlineDefender.case.permitReceived', message: 'A permit application came in through the portal. Nothing registered yet.', description: 'Deadline-defender case that belongs in intake'});
+    case 'objectionReceived':
+      return translate({id: 'preset.deadlineDefender.case.objectionReceived', message: 'An objection arrived by post. It has not been logged.', description: 'Deadline-defender case that belongs in intake'});
+    case 'complaintReceived':
+      return translate({id: 'preset.deadlineDefender.case.complaintReceived', message: 'A complaint was filed this morning. No case number yet.', description: 'Deadline-defender case that belongs in intake'});
+    case 'documentsComplete':
+      return translate({id: 'preset.deadlineDefender.case.documentsComplete', message: 'The last missing document came in. The file is complete.', description: 'Deadline-defender case that belongs in assessment'});
+    case 'siteVisitDone':
+      return translate({id: 'preset.deadlineDefender.case.siteVisitDone', message: 'The site visit is done and the report is attached.', description: 'Deadline-defender case that belongs in assessment'});
+    case 'adviceReturned':
+      return translate({id: 'preset.deadlineDefender.case.adviceReturned', message: 'The advice from the fire service came back. Nobody has read it against the file.', description: 'Deadline-defender case that belongs in assessment'});
+    case 'assessmentDone':
+      return translate({id: 'preset.deadlineDefender.case.assessmentDone', message: 'The assessment is finished and the draft is written.', description: 'Deadline-defender case that belongs in decision'});
+    case 'objectionAssessed':
+      return translate({id: 'preset.deadlineDefender.case.objectionAssessed', message: 'The objection has been assessed. It needs signing off.', description: 'Deadline-defender case that belongs in decision'});
+    default:
+      return translate({id: 'preset.deadlineDefender.case.enforcementReady', message: 'Enforcement has been prepared and checked. It waits on a signature.', description: 'Deadline-defender case that belongs in decision'});
+  }
+}
+
+export default function DeadlineDefender({className}) {
+  const {i18n} = useDocusaurusContext();
+  const locale = (i18n && i18n.currentLocale) || 'en';
+
+  const [game, setGame] = useState(null);
+  const [left, setLeft] = useState(0);
+  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);
+    setLeft(1);
+  }, []);
+
+  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);
+      setLeft(remaining(next, now));
+    }, 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.deadlineDefender.over.title', message: 'The queue won.', description: 'Headline on the game-over dialog after a deadline-defender run'}),
+        subtitle: translate({id: 'preset.deadlineDefender.over.subtitle', message: 'Three cases in the wrong place, or past their date. Both count.', description: 'Subtitle on the game-over dialog after a deadline-defender 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 send = useCallback((lane) => {
+    if (!gameRef.current || gameRef.current.over || !gameRef.current.current) return;
+    const now = (typeof performance !== 'undefined' ? performance.now() : Date.now()) - startedAtRef.current;
+    const next = route(gameRef.current, lane, now);
+    gameRef.current = next;
+    setGame(next);
+    setLeft(remaining(next, now));
+  }, []);
+
+  useEffect(() => {
+    if (!running || typeof window === 'undefined') return undefined;
+    const onKey = (e) => {
+      const n = Number(e.key);
+      if (Number.isInteger(n) && n >= 1 && n <= LANES.length) {
+        e.preventDefault();
+        send(LANES[n - 1]);
+      }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [running, send]);
+
+  const current = game ? game.current : null;
+  const lives = game ? game.lives : 3;
+  const score = game ? game.score : 0;
+  const pct = Math.round(left * 100);
+  const last = game && game.last ? game.last.result : null;
+
+  return (
+    <section className={[styles.dd, className].filter(Boolean).join(' ')} aria-labelledby="deadline-defender-title">
+      <header className={styles.head}>
+        <div>
+          <p className={styles.eyebrow}>
+            {translate({id: 'preset.deadlineDefender.eyebrow', message: 'Mini-game', description: 'Eyebrow above the deadline-defender game on a product page'})}
+          </p>
+          <h3 className={styles.title} id="deadline-defender-title">
+            {translate({id: 'preset.deadlineDefender.title', message: 'Deadline defender', description: 'Name of the Dossiq mini-game'})}
+          </h3>
+          <p className={styles.lede}>
+            {translate({id: 'preset.deadlineDefender.lede', message: 'Every case arrives with its clock already running. Send it to the right step before the time is gone. The wrong step costs the same as being late.', description: 'One-line explanation of the deadline-defender rules'})}
+          </p>
+        </div>
+        <div className={styles.hud} role="status" aria-live="polite">
+          <span className={styles.hudPill}>
+            {translate({id: 'preset.deadlineDefender.hud.score', message: 'Score {score}', description: 'Score readout on the deadline-defender HUD'}, {score: Number(score).toLocaleString(locale)})}
+          </span>
+          <span className={styles.hudPill}>
+            {translate({id: 'preset.deadlineDefender.hud.lives', message: 'Cases you can still lose {lives}', description: 'Remaining-lives readout on the deadline-defender HUD'}, {lives})}
+          </span>
+        </div>
+      </header>
+
+      <div className={styles.desk}>
+        {current ? (
+          <article className={styles.file} aria-live="polite">
+            <p className={styles.fileNo}>
+              {translate({id: 'preset.deadlineDefender.caseNo', message: 'Case {id}', description: 'Case-number line on the deadline-defender file. {id} is the case number.'}, {id: current.id})}
+            </p>
+            <p className={styles.fileText}>{situationText(current.key)}</p>
+            <div
+              className={styles.clock}
+              role="progressbar"
+              aria-valuemin={0}
+              aria-valuemax={100}
+              aria-valuenow={pct}
+              aria-label={translate({id: 'preset.deadlineDefender.clock', message: 'Time left on this deadline', description: 'Accessible name of the deadline countdown bar'})}>
+              <div
+                className={[styles.clockFill, left < 0.3 && styles.clockLow].filter(Boolean).join(' ')}
+                style={{width: `${pct}%`}}
+              />
+            </div>
+          </article>
+        ) : (
+          <p className={styles.empty}>
+            {game
+              ? translate({id: 'preset.deadlineDefender.next', message: 'Next case…', description: 'Placeholder between two cases in the deadline-defender game'})
+              : translate({id: 'preset.deadlineDefender.idle', message: 'The queue is waiting for you.', description: 'Placeholder on the deadline-defender desk before the game starts'})}
+          </p>
+        )}
+      </div>
+
+      <div className={styles.lanes}>
+        {LANES.map((lane, i) => (
+          <button
+            key={lane}
+            type="button"
+            className={styles.lane}
+            onClick={() => send(lane)}
+            disabled={!running || !current}>
+            <span className={styles.laneKey} aria-hidden="true">{i + 1}</span>
+            <span className={styles.laneName}>{laneLabel(lane)}</span>
+          </button>
+        ))}
+      </div>
+
+      <footer className={styles.foot}>
+        <button type="button" className={styles.start} onClick={begin}>
+          {game
+            ? translate({id: 'preset.deadlineDefender.restart', message: 'Restart', description: 'Button that restarts the deadline-defender game'})
+            : translate({id: 'preset.deadlineDefender.start', message: 'Open the queue', description: 'Button that starts the deadline-defender game'})}
+        </button>
+        <p className={styles.hint} role="status" aria-live="polite">
+          {last === 'misrouted' && translate({id: 'preset.deadlineDefender.feedback.misrouted', message: 'Wrong step. That case is now somewhere nobody is looking.', description: 'Feedback after routing a case to the wrong step'})}
+          {last === 'missed' && translate({id: 'preset.deadlineDefender.feedback.missed', message: 'Out of time. The deadline ran while it sat there.', description: 'Feedback after letting a deadline expire'})}
+          {last !== 'misrouted' && last !== 'missed' && translate({id: 'preset.deadlineDefender.hint', message: 'Click a step, or press 1, 2 or 3. Each case in a row is worth more than the last.', description: 'Hint under the deadline-defender board explaining the controls and the streak bonus'})}
+        </p>
+      </footer>
+    </section>
+  );
+}

package/src/components/DeadlineDefender/DeadlineDefender.module.css

@@ -0,0 +1,193 @@
+/**
+ * <DeadlineDefender /> styles.
+ *
+ * Tokens only. One accent: the countdown once it is nearly gone. The
+ * case text carries the puzzle, so the colour never has to.
+ */
+
+.dd {
+  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: 56ch;
+  font-size: 14px;
+  line-height: 1.5;
+  color: var(--c-cobalt-700);
+}
+
+.hud {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+.hudPill {
+  padding: 6px 10px;
+  border-radius: var(--radius-pill);
+  background: var(--c-cobalt-50);
+  color: var(--c-cobalt-900);
+  white-space: nowrap;
+}
+
+/* The desk holds one case at a time, and keeps its height between two
+   of them so the lanes underneath never jump. */
+.desk {
+  min-height: 132px;
+  display: flex;
+  align-items: center;
+  max-width: 620px;
+}
+
+.file {
+  width: 100%;
+  border: 1px solid var(--c-cobalt-200);
+  border-left: 3px solid var(--c-blue-cobalt);
+  border-radius: var(--radius-md);
+  background: var(--c-cobalt-50);
+  padding: 14px 16px;
+}
+
+.fileNo {
+  margin: 0 0 6px;
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  color: var(--c-cobalt-400);
+}
+
+.fileText {
+  margin: 0 0 12px;
+  font-size: 15px;
+  line-height: 1.45;
+  color: var(--c-cobalt-900);
+}
+
+.clock {
+  height: 6px;
+  border-radius: var(--radius-pill);
+  background: var(--c-cobalt-200);
+  overflow: hidden;
+}
+.clockFill {
+  height: 100%;
+  background: var(--c-mint-500);
+  /* The width is set per tick, so the transition only smooths the
+     steps between ticks; it must never outlast one. */
+  transition: width 80ms linear;
+}
+.clockLow { background: var(--c-orange-knvb); }
+
+.empty {
+  margin: 0;
+  font-size: 14px;
+  color: var(--c-cobalt-400);
+}
+
+.lanes {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+  margin-top: 14px;
+  max-width: 620px;
+}
+
+.lane {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 14px 10px;
+  border: 1px solid var(--c-cobalt-200);
+  border-radius: var(--radius-md);
+  background: white;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--c-cobalt-900);
+  cursor: pointer;
+  transition: border-color 120ms ease, background 120ms ease;
+}
+.lane:hover:not(:disabled) { border-color: var(--c-blue-cobalt); background: var(--c-cobalt-50); }
+.lane:disabled { opacity: 0.55; cursor: default; }
+.lane:focus-visible { outline: 2px solid var(--c-blue-cobalt); outline-offset: 2px; }
+
+.laneKey {
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 11px;
+  color: var(--c-cobalt-400);
+  border: 1px solid var(--c-cobalt-200);
+  border-radius: 3px;
+  padding: 1px 5px;
+}
+
+.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) {
+  .file { animation: ddArrive 140ms ease-out both; }
+  @keyframes ddArrive {
+    from { opacity: 0; transform: translateY(5px); }
+    to   { opacity: 1; transform: none; }
+  }
+}