@conduction/docusaurus-preset 3.43.0 → 3.44.0

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/);
+});

package/src/components/Reconcile/engine.js

@@ -0,0 +1,228 @@
+/**
+ * Reconcile — the rules, with no DOM and no clock of its own.
+ *
+ * Shillinq's game. The bank statement is in and the invoices are open.
+ * Match each payment to the invoice it settles, before the month
+ * closes. One of the lines on the statement matches nothing at all,
+ * and sending that one to an invoice is how money goes missing
+ * quietly.
+ *
+ * So there are three moves, not two: match it, or flag it as the one
+ * that does not belong. Flagging a genuine payment is a mistake too,
+ * because a bookkeeper who cries wolf at every line is a bookkeeper
+ * nobody listens to.
+ *
+ * Time and randomness are injected; the component owns the clock.
+ */
+
+/* Round amounts in whole euros: the game is about matching, not about
+   arithmetic with cents. */
+const AMOUNTS = [120, 240, 360, 480, 750, 900, 1240, 1600, 2100, 3400];
+const REFERENCES = ['2026-014', '2026-027', '2026-031', '2026-048', '2026-052', '2026-066'];
+
+export const DEFAULTS = {
+  lives: 3,
+  invoices: 4,
+  clockStartMs: 24000,
+  clockFloorMs: 9000,
+  rampPerPoint: 90,
+  pointsPerMatch: 8,
+  pointsPerFraud: 20,
+  pointsPerSheet: 12,
+};
+
+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;
+}
+
+export function clockMs(state) {
+  return Math.max(state.cfg.clockFloorMs, state.cfg.clockStartMs - state.score * state.cfg.rampPerPoint);
+}
+
+/**
+ * Deal a sheet: N invoices, N payments that settle them, and one more
+ * payment that settles nothing.
+ *
+ * The odd one out is built from an amount no invoice carries, because
+ * a fraud line that happens to equal a real invoice would make the
+ * right answer unknowable.
+ */
+function deal(state, now) {
+  const amounts = shuffled(AMOUNTS, state.random).slice(0, state.cfg.invoices);
+  const references = shuffled(REFERENCES, state.random);
+
+  const invoices = amounts.map((amount, i) => ({
+    id: `inv-${i}`,
+    reference: references[i % references.length],
+    amount,
+    settled: false,
+  }));
+
+  const payments = invoices.map((invoice, i) => ({
+    id: `pay-${i}`,
+    amount: invoice.amount,
+    reference: invoice.reference,
+    fraud: false,
+    done: false,
+  }));
+
+  const spare = AMOUNTS.filter((a) => !amounts.includes(a));
+  payments.push({
+    id: 'pay-odd',
+    amount: spare[Math.floor(state.random() * spare.length)],
+    /* A reference nobody issued: close enough to look filed, wrong
+       enough to be findable. */
+    reference: `2026-${900 + Math.floor(state.random() * 90)}`,
+    fraud: true,
+    done: false,
+  });
+
+  return {
+    ...state,
+    sheet: {
+      invoices,
+      payments: shuffled(payments, state.random),
+      startedAt: now,
+      expiresAt: now + clockMs(state),
+    },
+  };
+}
+
+export function createGame({seed = Date.now(), now = 0, config = {}} = {}) {
+  const cfg = {...DEFAULTS, ...config};
+  const base = {
+    cfg,
+    random: mulberry32(seed),
+    sheet: null,
+    score: 0,
+    lives: cfg.lives,
+    matched: 0,
+    caught: 0,
+    mistakes: 0,
+    sheets: 0,
+    last: null,
+    over: false,
+  };
+  return deal(base, now);
+}
+
+export function remaining(state, now) {
+  if (!state.sheet) return 0;
+  const total = state.sheet.expiresAt - state.sheet.startedAt;
+  if (total <= 0) return 0;
+  return Math.min(1, Math.max(0, (state.sheet.expiresAt - now) / total));
+}
+
+/** Everything on this sheet handled? */
+export function sheetDone(state) {
+  return Boolean(state.sheet) && state.sheet.payments.every((p) => p.done);
+}
+
+function loseLife(state, reason, now) {
+  const lives = state.lives - 1;
+  return {
+    ...state,
+    lives,
+    mistakes: state.mistakes + 1,
+    last: {result: reason, at: now},
+    over: lives <= 0,
+  };
+}
+
+function advance(state, now) {
+  if (!sheetDone(state)) return state;
+  const cleared = {
+    ...state,
+    score: state.score + state.cfg.pointsPerSheet,
+    sheets: state.sheets + 1,
+    last: {result: 'sheet', at: now},
+  };
+  return deal(cleared, now);
+}
+
+/**
+ * Send a payment to an invoice.
+ *
+ * Right pays, wrong costs a life, and the fraud line costs a life
+ * wherever it is sent: that is the mistake the app exists to prevent.
+ */
+export function match(state, paymentId, invoiceId, now) {
+  if (state.over || !state.sheet) return state;
+  const payment = state.sheet.payments.find((p) => p.id === paymentId);
+  const invoice = state.sheet.invoices.find((i) => i.id === invoiceId);
+  if (!payment || !invoice || payment.done || invoice.settled) return state;
+
+  if (payment.fraud || payment.amount !== invoice.amount) {
+    return loseLife(state, payment.fraud ? 'paidFraud' : 'mismatch', now);
+  }
+
+  const next = {
+    ...state,
+    sheet: {
+      ...state.sheet,
+      payments: state.sheet.payments.map((p) => (p.id === paymentId ? {...p, done: true} : p)),
+      invoices: state.sheet.invoices.map((i) => (i.id === invoiceId ? {...i, settled: true} : i)),
+    },
+    score: state.score + state.cfg.pointsPerMatch,
+    matched: state.matched + 1,
+    last: {result: 'matched', at: now},
+  };
+  return advance(next, now);
+}
+
+/**
+ * Flag a payment as the one that belongs to nobody.
+ *
+ * Crying wolf at a genuine payment costs a life too. A game that only
+ * punished missing the fraud would teach you to flag everything.
+ */
+export function flag(state, paymentId, now) {
+  if (state.over || !state.sheet) return state;
+  const payment = state.sheet.payments.find((p) => p.id === paymentId);
+  if (!payment || payment.done) return state;
+
+  if (!payment.fraud) return loseLife(state, 'flaggedGood', now);
+
+  const next = {
+    ...state,
+    sheet: {
+      ...state.sheet,
+      payments: state.sheet.payments.map((p) => (p.id === paymentId ? {...p, done: true} : p)),
+    },
+    score: state.score + state.cfg.pointsPerFraud,
+    caught: state.caught + 1,
+    last: {result: 'caught', at: now},
+  };
+  return advance(next, now);
+}
+
+/** The month closes on its own, and an unfinished sheet costs a life. */
+export function step(state, now) {
+  if (state.over || !state.sheet) return state;
+  if (now < state.sheet.expiresAt) return state;
+  const hit = loseLife(state, 'monthClosed', now);
+  return hit.over ? {...hit, sheet: null} : deal(hit, 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.matched)} regels gematcht · ${n(state.caught)} keer fraude gevonden`
+    : `${n(state.matched)} lines matched · ${n(state.caught)} caught out`;
+}

package/src/components/index.js

@@ -66,6 +66,9 @@ export {default as BlueprintRush} from './BlueprintRush/BlueprintRush.jsx';
 export {default as RecordRun} from './RecordRun/RecordRun.jsx';
 export {default as HiddenGame} from './HiddenGame/HiddenGame.jsx';
 export {default as MonsterRun} from './MonsterRun/MonsterRun.jsx';
+export {default as DiceDuel} from './DiceDuel/DiceDuel.jsx';
+export {default as Reconcile} from './Reconcile/Reconcile.jsx';
+export {default as PipeFit} from './PipeFit/PipeFit.jsx';
 export {default as LockPick} from './LockPick/LockPick.jsx';
 export {default as PaintByTokens} from './PaintByTokens/PaintByTokens.jsx';
 export {default as Redaction} from './Redaction/Redaction.jsx';