@conduction/docusaurus-preset 3.42.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/MonsterRun/MonsterRun.jsx

@@ -0,0 +1,233 @@
+/**
+ * <MonsterRun />
+ *
+ * La Frankendesk's game, and the only one that belongs to a blog post
+ * rather than an app. The monster the post stitches together goes for
+ * a run: jump the forks, duck the patch sets, collect the parts it was
+ * made of.
+ *
+ * The obstacles are the post's own argument. A fork is a permanent
+ * maintenance bill, a patch set is a thing you carry forever, a
+ * release train arrives whether you are ready or not, and a design
+ * language is the thing you keep walking into. What is worth picking
+ * up is what the post says is already shared: a token, a protocol, a
+ * component.
+ *
+ * Two inputs, jump and duck, so it is a runner rather than a fourth
+ * game about picking the right answer. The rules live in ./engine.js
+ * with no DOM and no clock.
+ *
+ * Usage:
+ *
+ *   <MonsterRun />
+ *
+ * Fires the shared `connext:gameend` event on game over, and listens
+ * for `connext:gamereplay`, like every other mini-game.
+ *
+ * Accessibility: jump and duck are real buttons as well as arrow keys,
+ * and the track ahead is announced as a sentence, so the run can be
+ * played by someone who cannot see it coming.
+ */
+
+import React, {useCallback, useEffect, useRef, useState} from 'react';
+import {translate} from '@docusaurus/Translate';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import {createGame, step, jump, duck, summarise, LOW} from './engine';
+import styles from './MonsterRun.module.css';
+
+const GAME_ID = 'monster-run';
+const TICK_MS = 40;
+
+function obstacleCopy(what) {
+  switch (what) {
+    case 'fork':
+      return translate({id: 'preset.monsterRun.obstacle.fork', message: 'a fork', description: 'Monster-run obstacle on the ground: a fork of the code'});
+    case 'patchset':
+      return translate({id: 'preset.monsterRun.obstacle.patchset', message: 'a patch set', description: 'Monster-run obstacle overhead: a patch set'});
+    case 'releaseTrain':
+      return translate({id: 'preset.monsterRun.obstacle.releaseTrain', message: 'a release train', description: 'Monster-run obstacle on the ground: a release train'});
+    default:
+      return translate({id: 'preset.monsterRun.obstacle.designLanguage', message: 'another design language', description: 'Monster-run obstacle overhead: a design language'});
+  }
+}
+
+function partCopy(what) {
+  switch (what) {
+    case 'token':
+      return translate({id: 'preset.monsterRun.part.token', message: 'a token', description: 'Monster-run pick-up: a design token'});
+    case 'protocol':
+      return translate({id: 'preset.monsterRun.part.protocol', message: 'a protocol', description: 'Monster-run pick-up: a protocol'});
+    default:
+      return translate({id: 'preset.monsterRun.part.component', message: 'a component', description: 'Monster-run pick-up: a component'});
+  }
+}
+
+export default function MonsterRun({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.monsterRun.over.title', message: 'The monster is down.', description: 'Headline on the game-over dialog after a monster-run run'}),
+        subtitle: translate({id: 'preset.monsterRun.over.subtitle', message: 'Three forks will do that. The parts were never the problem.', description: 'Subtitle on the game-over dialog after a monster-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 act = useCallback((what) => {
+    if (!gameRef.current || gameRef.current.over) return;
+    const next = what === 'jump' ? jump(gameRef.current) : duck(gameRef.current);
+    gameRef.current = next;
+    setGame(next);
+  }, []);
+
+  useEffect(() => {
+    if (!running || typeof window === 'undefined') return undefined;
+    const onKey = (e) => {
+      if (e.key === 'ArrowUp' || e.key === ' ' || e.key === 'w') { e.preventDefault(); act('jump'); }
+      if (e.key === 'ArrowDown' || e.key === 's') { e.preventDefault(); act('duck'); }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [running, act]);
+
+  const track = game ? game.track : [];
+  const posture = game ? game.posture : 'run';
+  const last = game ? game.last : null;
+
+  /* What is coming, in words, for anyone who cannot watch it come. */
+  const incoming = track.slice(0, 4).find((c) => c && c.kind === 'obstacle');
+  const ahead = incoming
+    ? translate(
+        {id: 'preset.monsterRun.ahead', message: 'Coming up: {what}, {where}', description: 'Spoken description of the next obstacle. {what} is the obstacle, {where} says whether to jump or duck.'},
+        {
+          what: obstacleCopy(incoming.what),
+          where: incoming.lane === LOW
+            ? translate({id: 'preset.monsterRun.ahead.low', message: 'on the ground', description: 'Where a monster-run obstacle sits when it must be jumped'})
+            : translate({id: 'preset.monsterRun.ahead.high', message: 'overhead', description: 'Where a monster-run obstacle sits when it must be ducked'}),
+        },
+      )
+    : translate({id: 'preset.monsterRun.ahead.clear', message: 'The way ahead is clear.', description: 'Spoken description when no monster-run obstacle is near'});
+
+  return (
+    <section className={[styles.mr, className].filter(Boolean).join(' ')} aria-labelledby="monster-run-title">
+      <header className={styles.head}>
+        <div>
+          <p className={styles.eyebrow}>
+            {translate({id: 'preset.monsterRun.eyebrow', message: 'Mini-game', description: 'Eyebrow above the monster-run game'})}
+          </p>
+          <h3 className={styles.title} id="monster-run-title">
+            {translate({id: 'preset.monsterRun.title', message: 'The monster goes for a run', description: 'Name of the La Frankendesk mini-game'})}
+          </h3>
+          <p className={styles.lede}>
+            {translate({id: 'preset.monsterRun.lede', message: 'Jump the forks, duck the patch sets, and pick up the parts it was stitched together from. The parts were never the problem.', description: 'One-line explanation of the monster-run rules'})}
+          </p>
+        </div>
+        <div className={styles.hud} role="status" aria-live="polite">
+          <span className={styles.hudPill}>
+            {translate({id: 'preset.monsterRun.hud.score', message: 'Score {score}', description: 'Score readout on the monster-run HUD'}, {score: Number(game ? game.score : 0).toLocaleString(locale)})}
+          </span>
+          <span className={styles.hudPill}>
+            {translate({id: 'preset.monsterRun.hud.lives', message: 'Stitches {lives}', description: 'Remaining-lives readout on the monster-run HUD'}, {lives: game ? game.lives : 3})}
+          </span>
+        </div>
+      </header>
+
+      <div className={styles.stage} aria-hidden="true">
+        <div className={[styles.monster, styles[`posture-${posture}`]].filter(Boolean).join(' ')}>
+          <span className={styles.head1} />
+          <span className={styles.body1} />
+          <span className={styles.bolt} />
+        </div>
+
+        <div className={styles.track}>
+          {track.map((cell, i) => (
+            <span
+              key={i}
+              className={[
+                styles.cell,
+                cell && cell.kind === 'obstacle' && styles.obstacle,
+                cell && cell.kind === 'part' && styles.part,
+                cell && cell.lane === LOW ? styles.low : cell && styles.high,
+              ].filter(Boolean).join(' ')}>
+              {cell && (cell.kind === 'obstacle' ? obstacleCopy(cell.what) : partCopy(cell.what))}
+            </span>
+          ))}
+        </div>
+        <span className={styles.ground} />
+      </div>
+
+      <p className={styles.ahead} role="status" aria-live="polite">
+        {game ? ahead : translate({id: 'preset.monsterRun.idle', message: 'It has been lying on the table since the last section.', description: 'Placeholder before the monster-run game starts'})}
+      </p>
+
+      <div className={styles.controls}>
+        <button type="button" className={styles.action} onClick={() => act('jump')} disabled={!running}>
+          {translate({id: 'preset.monsterRun.jump', message: 'Jump', description: 'Button that makes the monster jump'})}
+        </button>
+        <button type="button" className={styles.action} onClick={() => act('duck')} disabled={!running}>
+          {translate({id: 'preset.monsterRun.duck', message: 'Duck', description: 'Button that makes the monster duck'})}
+        </button>
+        <button type="button" className={styles.start} onClick={begin}>
+          {game
+            ? translate({id: 'preset.monsterRun.restart', message: 'Again', description: 'Button that restarts the monster-run game'})
+            : translate({id: 'preset.monsterRun.start', message: 'It lives', description: 'Button that starts the monster-run game'})}
+        </button>
+        <p className={styles.hint}>
+          {last && last.result === 'hit' && translate(
+            {id: 'preset.monsterRun.feedback.hit', message: 'Straight into {what}.', description: 'Feedback after hitting an obstacle. {what} is the obstacle.'},
+            {what: obstacleCopy(last.what)},
+          )}
+          {last && last.result === 'part' && translate(
+            {id: 'preset.monsterRun.feedback.part', message: 'Picked up {what}.', description: 'Feedback after collecting a part. {what} is the part.'},
+            {what: partCopy(last.what)},
+          )}
+          {(!last || last.result === 'clear') && translate({id: 'preset.monsterRun.hint', message: 'Up jumps, down ducks. Arrow keys work too.', description: 'Hint under the monster-run controls'})}
+        </p>
+      </div>
+    </section>
+  );
+}

package/src/components/MonsterRun/MonsterRun.module.css

@@ -0,0 +1,231 @@
+/**
+ * <MonsterRun /> styles.
+ *
+ * A side-on strip: the monster on the left, the world walking towards
+ * it. Tokens only, one accent for what would stop it, and the track
+ * also spells out what is coming, so the run is readable without the
+ * picture.
+ */
+
+.mr {
+  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: 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;
+}
+
+/* ======================================================================
+   The strip
+   ====================================================================== */
+
+.stage {
+  position: relative;
+  display: flex;
+  align-items: flex-end;
+  gap: 10px;
+  height: 132px;
+  padding: 0 12px 14px;
+  border-radius: var(--radius-md);
+  background: var(--c-cobalt-50);
+  overflow: hidden;
+}
+
+.ground {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 12px;
+  height: 2px;
+  background: var(--c-cobalt-200);
+}
+
+/* The monster: a head, a body and one bolt. Three boxes is enough
+   silhouette at this size, and it keeps the whole thing token-built. */
+.monster {
+  position: relative;
+  width: 26px;
+  height: 46px;
+  flex-shrink: 0;
+  z-index: 1;
+  transition: transform 120ms ease-out, height 120ms ease-out;
+}
+.head1 {
+  position: absolute;
+  top: 0;
+  left: 3px;
+  width: 20px;
+  height: 16px;
+  border-radius: 3px 3px 2px 2px;
+  background: var(--c-forest-500, var(--c-mint-500));
+}
+.body1 {
+  position: absolute;
+  top: 16px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 3px;
+  background: var(--c-cobalt-900);
+}
+.bolt {
+  position: absolute;
+  top: 6px;
+  right: 0;
+  width: 6px;
+  height: 3px;
+  border-radius: 1px;
+  background: var(--c-orange-knvb);
+}
+
+.posture-jump { transform: translateY(-34px); }
+.posture-duck { height: 26px; }
+.posture-duck .head1 { top: 0; height: 12px; }
+.posture-duck .body1 { top: 12px; }
+
+.track {
+  display: flex;
+  align-items: flex-end;
+  gap: 6px;
+  flex: 1;
+  height: 100%;
+  padding-bottom: 2px;
+}
+
+.cell {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px;
+  border-radius: var(--radius-sm);
+  font-size: 8px;
+  line-height: 1.1;
+  text-align: center;
+  color: transparent;
+  overflow: hidden;
+}
+
+/* Only the cells holding something get a box; the rest are air. */
+.obstacle {
+  background: var(--c-orange-knvb);
+  color: white;
+  font-weight: 600;
+}
+.part {
+  background: var(--c-mint-300);
+  color: var(--c-cobalt-900);
+  font-weight: 600;
+}
+
+.low  { height: 34px; align-self: flex-end; }
+.high { height: 30px; align-self: flex-start; margin-top: 8px; }
+
+.ahead {
+  margin: 10px 0 0;
+  font-size: 13px;
+  color: var(--c-cobalt-700);
+  min-height: 1.4em;
+}
+
+.controls {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+  margin-top: 12px;
+}
+
+.action {
+  background: white;
+  color: var(--c-cobalt-900);
+  border: 1px solid var(--c-cobalt-200);
+  padding: 10px 20px;
+  border-radius: var(--radius-md);
+  font-family: inherit;
+  font-weight: 600;
+  font-size: 14px;
+  cursor: pointer;
+  transition: border-color 120ms ease;
+}
+.action:hover:not(:disabled) { border-color: var(--c-blue-cobalt); color: var(--c-blue-cobalt); }
+.action:disabled { opacity: 0.5; cursor: default; }
+.action:focus-visible { outline: 2px solid var(--c-blue-cobalt); outline-offset: 2px; }
+
+.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);
+  min-height: 1.4em;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  /* The posture still changes, it just stops sliding there. */
+  .monster { transition: none; }
+}