@conduction/docusaurus-preset 3.43.0 → 3.44.0

package/src/components/DiceDuel/engine.js

@@ -0,0 +1,182 @@
+/**
+ * Dice duel — the rules, with no DOM and no clock of its own.
+ *
+ * Larpinq's game, and the one app where a game needs no excuse. A
+ * monster blocks the path. You have a handful of dice and a choice
+ * every round: swing with what you rolled, or push your luck and
+ * reroll the weak ones.
+ *
+ * The whole game is that choice. A roll you keep is certain and
+ * usually small; a reroll is the only way to a big hit and the only
+ * way to lose the round. Nothing here is a reflex, so it is the one
+ * game on the site you can play badly while thinking hard.
+ *
+ * There is no clock anywhere in it: pushing your luck is not a thing
+ * you should be hurried through.
+ */
+
+export const DICE = 4;
+export const FACES = 6;
+
+export const MONSTERS = [
+  {key: 'goblin', hp: 12, bite: 3},
+  {key: 'troll', hp: 20, bite: 5},
+  {key: 'wyrm', hp: 30, bite: 7},
+  {key: 'lich', hp: 42, bite: 9},
+];
+
+export const DEFAULTS = {
+  hearts: 3,
+  /* A reroll costs nothing but the round's safety: the monster bites
+     when you reroll and roll worse than you already had. That is the
+     push-your-luck deal, and it is the only way to be hurt. */
+  rerollsPerRound: 2,
+  /* Sixes are worth more than their pips, so a good roll feels good
+     rather than merely numerical. */
+  critBonus: 3,
+  pointsPerKill: 25,
+};
+
+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 rollDie(state) {
+  return 1 + Math.floor(state.random() * FACES);
+}
+
+function rollAll(state) {
+  return Array.from({length: DICE}, () => rollDie(state));
+}
+
+/** What a set of dice is worth: pips, plus a bonus for every six. */
+export function damageOf(dice) {
+  const pips = dice.reduce((sum, d) => sum + d, 0);
+  const sixes = dice.filter((d) => d === FACES).length;
+  return pips + sixes * DEFAULTS.critBonus;
+}
+
+function nextMonster(state, index) {
+  const spec = MONSTERS[index % MONSTERS.length];
+  return {key: spec.key, hp: spec.hp, maxHp: spec.hp, bite: spec.bite, index};
+}
+
+export function createGame({seed = Date.now(), config = {}} = {}) {
+  const cfg = {...DEFAULTS, ...config};
+  const base = {
+    cfg,
+    random: mulberry32(seed),
+    hearts: cfg.hearts,
+    score: 0,
+    felled: 0,
+    rounds: 0,
+    last: null,
+    over: false,
+  };
+  const withMonster = {...base, monster: nextMonster(base, 0)};
+  return {
+    ...withMonster,
+    dice: rollAll(withMonster),
+    kept: Array.from({length: DICE}, () => false),
+    rerollsLeft: cfg.rerollsPerRound,
+  };
+}
+
+/** Hold or release one die between rerolls. */
+export function toggleKeep(state, index) {
+  if (state.over) return state;
+  if (!Number.isInteger(index) || index < 0 || index >= DICE) return state;
+  const kept = [...state.kept];
+  kept[index] = !kept[index];
+  return {...state, kept};
+}
+
+/**
+ * Reroll everything not held.
+ *
+ * Rolling worse than you had is what the monster punishes: that is the
+ * push, and without it holding dice would be free and the game would
+ * have no decision in it.
+ */
+export function reroll(state) {
+  if (state.over || state.rerollsLeft <= 0) return state;
+  if (state.kept.every(Boolean)) return state;
+
+  const before = damageOf(state.dice);
+  const dice = state.dice.map((die, i) => (state.kept[i] ? die : rollDie(state)));
+  const after = damageOf(dice);
+
+  if (after >= before) {
+    return {
+      ...state,
+      dice,
+      rerollsLeft: state.rerollsLeft - 1,
+      last: {result: 'rerollUp', from: before, to: after},
+    };
+  }
+
+  const hearts = state.hearts - 1;
+  return {
+    ...state,
+    dice,
+    rerollsLeft: state.rerollsLeft - 1,
+    hearts,
+    last: {result: 'bitten', from: before, to: after, by: state.monster.key},
+    over: hearts <= 0,
+  };
+}
+
+/**
+ * Swing with what is on the table.
+ *
+ * Always safe, always ends the round. A monster that survives heals
+ * nothing: the damage stays on it, so a careful player wins slowly and
+ * a lucky one wins fast.
+ */
+export function strike(state) {
+  if (state.over) return state;
+
+  const damage = damageOf(state.dice);
+  const hp = state.monster.hp - damage;
+  const rounds = state.rounds + 1;
+
+  if (hp > 0) {
+    const wounded = {...state, monster: {...state.monster, hp}, rounds, score: state.score + damage};
+    return {
+      ...wounded,
+      dice: rollAll(wounded),
+      kept: Array.from({length: DICE}, () => false),
+      rerollsLeft: wounded.cfg.rerollsPerRound,
+      last: {result: 'hit', damage, left: hp},
+    };
+  }
+
+  const felled = {
+    ...state,
+    rounds,
+    score: state.score + damage + state.cfg.pointsPerKill,
+    felled: state.felled + 1,
+    last: {result: 'felled', damage, what: state.monster.key},
+  };
+  const withMonster = {...felled, monster: nextMonster(felled, felled.monster.index + 1)};
+  return {
+    ...withMonster,
+    dice: rollAll(withMonster),
+    kept: Array.from({length: DICE}, () => false),
+    rerollsLeft: withMonster.cfg.rerollsPerRound,
+  };
+}
+
+/** 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.felled)} monsters geveld · ${n(state.rounds)} beurten`
+    : `${n(state.felled)} monsters felled · ${n(state.rounds)} rounds`;
+}

package/src/components/PipeFit/PipeFit.jsx

@@ -0,0 +1,221 @@
+/**
+ * <PipeFit />
+ *
+ * Integriq's game. A record is leaving one system for another and the
+ * route between them is half built. Turn each connector until the line
+ * runs end to end, before the payload arrives and finds a gap.
+ *
+ * Turning a connector moves both its openings at once, so fixing the
+ * join on one side can break the join on the other. That is the whole
+ * puzzle, and it is what connecting two systems actually feels like.
+ *
+ * The rules live in ./engine.js with no DOM and no clock.
+ *
+ * Usage:
+ *
+ *   <PipeFit />
+ *
+ * Fires the shared `connext:gameend` event on game over, and listens
+ * for `connext:gamereplay`.
+ *
+ * Accessibility: every connector is a button that says which openings
+ * it currently has and whether it meets its neighbour, so the route
+ * can be read and solved without seeing the diagram.
+ */
+
+import React, {useCallback, useEffect, useRef, useState} from 'react';
+import {translate} from '@docusaurus/Translate';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import {createGame, turn, step, openings, connected, remaining, summarise} from './engine';
+import styles from './PipeFit.module.css';
+
+const GAME_ID = 'pipe-fit';
+const TICK_MS = 100;
+
+/* Ports are heights, and heights have names: a route read aloud as
+   "top meets middle" is one you can solve with your eyes shut. */
+function portName(port) {
+  if (port === 0) {
+    return translate({id: 'preset.pipeFit.port.top', message: 'top', description: 'The upper opening of a connector'});
+  }
+  if (port === 1) {
+    return translate({id: 'preset.pipeFit.port.middle', message: 'middle', description: 'The middle opening of a connector'});
+  }
+  return translate({id: 'preset.pipeFit.port.bottom', message: 'bottom', description: 'The lower opening of a connector'});
+}
+
+export default function PipeFit({className}) {
+  const {i18n} = useDocusaurusContext();
+  const locale = (i18n && i18n.currentLocale) || 'en';
+
+  const [game, setGame] = 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 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 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.pipeFit.over.title', message: 'It went nowhere.', description: 'Headline on the game-over dialog after a pipe-fit run'}),
+        subtitle: translate({id: 'preset.pipeFit.over.subtitle', message: 'Three payloads into a gap. Somebody will notice next quarter.', description: 'Subtitle on the game-over dialog after a pipe-fit 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 rotate = useCallback((index) => {
+    if (!gameRef.current || gameRef.current.over) return;
+    const t = now();
+    const next = turn(gameRef.current, index, t);
+    gameRef.current = next;
+    setGame(next);
+    setLeft(remaining(next, t));
+  }, []);
+
+  const route = game ? game.route : null;
+  const last = game ? game.last : null;
+  const pct = Math.round(left * 100);
+
+  /* What each piece is carrying in, so a join can be judged. */
+  const carries = [];
+  if (route) {
+    let carry = route.source;
+    for (const piece of route.pieces) {
+      carries.push(carry);
+      carry = openings(piece).right;
+    }
+  }
+
+  return (
+    <section className={[styles.pf, className].filter(Boolean).join(' ')} aria-labelledby="pipe-fit-title">
+      <header className={styles.head}>
+        <div>
+          <p className={styles.eyebrow}>
+            {translate({id: 'preset.pipeFit.eyebrow', message: 'Mini-game', description: 'Eyebrow above the pipe-fit game on a product page'})}
+          </p>
+          <h3 className={styles.title} id="pipe-fit-title">
+            {translate({id: 'preset.pipeFit.title', message: 'Make the connection', description: 'Name of the Integriq mini-game'})}
+          </h3>
+          <p className={styles.lede}>
+            {translate({id: 'preset.pipeFit.lede', message: 'A record is on its way from one system to another and the route is half built. Turn the connectors until the line runs end to end. Turning one moves both its openings, which is the whole problem.', description: 'One-line explanation of the pipe-fit rules'})}
+          </p>
+        </div>
+        <div className={styles.hud} role="status" aria-live="polite">
+          <span className={styles.hudPill}>
+            {translate({id: 'preset.pipeFit.hud.score', message: 'Score {score}', description: 'Score readout on the pipe-fit HUD'}, {score: Number(game ? game.score : 0).toLocaleString(locale)})}
+          </span>
+          <span className={styles.hudPill}>
+            {translate({id: 'preset.pipeFit.hud.lives', message: 'Payloads left {lives}', description: 'Remaining-lives readout on the pipe-fit HUD'}, {lives: game ? game.lives : 3})}
+          </span>
+        </div>
+      </header>
+
+      {route ? (
+        <>
+          <div className={styles.route}>
+            <span className={[styles.end, styles[`port-${route.source}`]].join(' ')}>
+              {translate({id: 'preset.pipeFit.source', message: 'Source', description: 'The system a record leaves in the pipe-fit game'})}
+            </span>
+
+            {route.pieces.map((piece, i) => {
+              const {left: inPort, right: outPort} = openings(piece);
+              const joined = inPort === carries[i];
+              return (
+                <button
+                  key={i}
+                  type="button"
+                  className={[styles.piece, joined ? styles.joined : styles.gap].join(' ')}
+                  onClick={() => rotate(i)}
+                  disabled={!running}
+                  aria-label={translate(
+                    {id: 'preset.pipeFit.piece', message: 'Connector {n}: opens {in} to {out}, {state}. Turn it.', description: 'Accessible label for one connector. {in} and {out} are openings, {state} says whether it meets the piece before it.'},
+                    {
+                      n: i + 1,
+                      in: portName(inPort),
+                      out: portName(outPort),
+                      state: joined
+                        ? translate({id: 'preset.pipeFit.piece.joined', message: 'meets the one before it', description: 'State of a connector that lines up'})
+                        : translate({id: 'preset.pipeFit.piece.gap', message: 'does not meet the one before it', description: 'State of a connector that does not line up'}),
+                    },
+                  )}>
+                  <span className={[styles.mouth, styles[`port-${inPort}`]].join(' ')} aria-hidden="true" />
+                  <span className={styles.barrel} aria-hidden="true" />
+                  <span className={[styles.mouth, styles[`port-${outPort}`]].join(' ')} aria-hidden="true" />
+                </button>
+              );
+            })}
+
+            <span className={[styles.end, styles[`port-${route.target}`]].join(' ')}>
+              {translate({id: 'preset.pipeFit.target', message: 'Consumer', description: 'The system a record arrives at in the pipe-fit game'})}
+            </span>
+          </div>
+
+          <div
+            className={styles.clock}
+            role="progressbar"
+            aria-valuemin={0}
+            aria-valuemax={100}
+            aria-valuenow={pct}
+            aria-label={translate({id: 'preset.pipeFit.clock', message: 'Time before the payload arrives', description: 'Accessible name of the pipe-fit countdown'})}>
+            <div className={[styles.clockFill, left < 0.3 && styles.clockLow].filter(Boolean).join(' ')} style={{width: `${pct}%`}} />
+          </div>
+        </>
+      ) : (
+        <p className={styles.idle}>
+          {translate({id: 'preset.pipeFit.idle', message: 'Two systems, and nothing in between them yet.', description: 'Placeholder before the pipe-fit game starts'})}
+        </p>
+      )}
+
+      <footer className={styles.foot}>
+        <button type="button" className={styles.start} onClick={begin}>
+          {game
+            ? translate({id: 'preset.pipeFit.restart', message: 'Restart', description: 'Button that restarts the pipe-fit game'})
+            : translate({id: 'preset.pipeFit.start', message: 'Send it', description: 'Button that starts the pipe-fit game'})}
+        </button>
+        <p className={styles.hint} role="status" aria-live="polite">
+          {last && last.result === 'connected' && translate({id: 'preset.pipeFit.feedback.connected', message: 'Through. The next one is longer.', description: 'Feedback after completing a route'})}
+          {last && last.result === 'spilled' && translate({id: 'preset.pipeFit.feedback.spilled', message: 'The payload arrived and found a gap.', description: 'Feedback after the clock runs out'})}
+          {(!last || last.result === 'turned') && translate({id: 'preset.pipeFit.hint', message: 'Click a connector to turn it. Both of its openings move together.', description: 'Hint under the pipe-fit route'})}
+        </p>
+      </footer>
+    </section>
+  );
+}

package/src/components/PipeFit/PipeFit.module.css

@@ -0,0 +1,203 @@
+/**
+ * <PipeFit /> styles.
+ *
+ * A line of connectors read left to right, each drawn as two openings
+ * and a barrel. Tokens only, one accent on a join that does not meet.
+ * Every state is also in the button's label, so the route is solvable
+ * without the picture.
+ */
+
+.pf {
+  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: 62ch;
+  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;
+}
+
+.route {
+  display: flex;
+  align-items: stretch;
+  gap: 4px;
+  padding: 16px 12px;
+  border-radius: var(--radius-md);
+  background: var(--c-cobalt-50);
+  max-width: 720px;
+  overflow-x: auto;
+}
+
+.end {
+  position: relative;
+  flex-shrink: 0;
+  width: 78px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6px;
+  border-radius: var(--radius-md);
+  background: var(--c-cobalt-900);
+  color: white;
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 10px;
+  text-align: center;
+}
+
+/* The three heights an opening can sit at. The end blocks mark theirs
+   with a notch, the connectors with their mouths. */
+.end::after {
+  content: '';
+  position: absolute;
+  width: 8px;
+  height: 10px;
+  background: var(--c-mint-500);
+  border-radius: 2px;
+}
+.end.port-0::after { top: 8px; right: -4px; }
+.end.port-1::after { top: 50%; margin-top: -5px; right: -4px; }
+.end.port-2::after { bottom: 8px; right: -4px; }
+.end:last-child::after { right: auto; left: -4px; }
+
+.piece {
+  position: relative;
+  flex: 1;
+  min-width: 68px;
+  height: 84px;
+  border: 1px solid var(--c-cobalt-200);
+  border-radius: var(--radius-md);
+  background: white;
+  cursor: pointer;
+  padding: 0;
+  transition: border-color 120ms ease, background 120ms ease;
+}
+.piece:hover:not(:disabled) { border-color: var(--c-blue-cobalt); }
+.piece:disabled { cursor: default; opacity: 0.7; }
+.piece:focus-visible { outline: 2px solid var(--c-blue-cobalt); outline-offset: 2px; }
+
+.joined { border-color: var(--c-mint-500); }
+.gap { border-color: var(--c-orange-knvb); background: var(--c-cobalt-50); }
+
+.mouth {
+  position: absolute;
+  width: 10px;
+  height: 12px;
+  border-radius: 2px;
+  background: var(--c-blue-cobalt);
+}
+.mouth:first-of-type { left: -1px; }
+.mouth:last-of-type { right: -1px; }
+.mouth.port-0 { top: 10px; }
+.mouth.port-1 { top: 50%; margin-top: -6px; }
+.mouth.port-2 { bottom: 10px; }
+
+.barrel {
+  position: absolute;
+  left: 12px;
+  right: 12px;
+  top: 50%;
+  height: 4px;
+  margin-top: -2px;
+  border-radius: 2px;
+  background: var(--c-cobalt-200);
+}
+
+.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;
+}