@conduction/docusaurus-preset 3.43.0 → 3.44.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/docusaurus-preset",
-  "version": "3.43.0",
+  "version": "3.44.0",
   "scripts": {
     "prepack": "node scripts/prepack-bundle-css.js",
     "test": "node --test"

package/src/components/DiceDuel/DiceDuel.jsx

@@ -0,0 +1,190 @@
+/**
+ * <DiceDuel />
+ *
+ * Larpinq's game, and the one app where a game needs no excuse. A
+ * monster blocks the path. You have four dice and one decision a
+ * round: swing with what you rolled, or push your luck and throw the
+ * weak ones again.
+ *
+ * The push is the game. A swing is safe and usually small; a reroll is
+ * the only road to a big hit and the only way to be bitten. Nothing is
+ * timed, because pushing your luck is not a thing to be hurried
+ * through, which also makes it the one game here you can play while
+ * thinking.
+ *
+ * The rules live in ./engine.js with no DOM and no clock.
+ *
+ * Usage:
+ *
+ *   <DiceDuel />
+ *
+ * Fires the shared `connext:gameend` event on game over, and listens
+ * for `connext:gamereplay`.
+ *
+ * Accessibility: every die is a toggle button that says its face and
+ * whether it is held, and the monster's state is a sentence. Nothing
+ * depends on seeing pips.
+ */
+
+import React, {useCallback, useEffect, useRef, useState} from 'react';
+import {translate} from '@docusaurus/Translate';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import {createGame, strike, reroll, toggleKeep, damageOf, summarise} from './engine';
+import styles from './DiceDuel.module.css';
+
+const GAME_ID = 'dice-duel';
+
+function monsterName(key) {
+  switch (key) {
+    case 'goblin':
+      return translate({id: 'preset.diceDuel.monster.goblin', message: 'a goblin', description: 'The first monster in the dice duel'});
+    case 'troll':
+      return translate({id: 'preset.diceDuel.monster.troll', message: 'a troll', description: 'The second monster in the dice duel'});
+    case 'wyrm':
+      return translate({id: 'preset.diceDuel.monster.wyrm', message: 'a wyrm', description: 'The third monster in the dice duel'});
+    default:
+      return translate({id: 'preset.diceDuel.monster.lich', message: 'a lich', description: 'The fourth monster in the dice duel'});
+  }
+}
+
+export default function DiceDuel({className}) {
+  const {i18n} = useDocusaurusContext();
+  const locale = (i18n && i18n.currentLocale) || 'en';
+
+  const [game, setGame] = useState(null);
+  const gameRef = useRef(null);
+  const endedRef = useRef(false);
+
+  const running = Boolean(game) && !game.over;
+
+  const begin = useCallback(() => {
+    endedRef.current = false;
+    const fresh = createGame({seed: Math.floor(Math.random() * 2 ** 31)});
+    gameRef.current = fresh;
+    setGame(fresh);
+  }, []);
+
+  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.diceDuel.over.title', message: 'It got you in the end.', description: 'Headline on the game-over dialog after a dice duel'}),
+        subtitle: translate({id: 'preset.diceDuel.over.subtitle', message: 'Three bad pushes. The dice were fine; the greed was the problem.', description: 'Subtitle on the game-over dialog after a dice duel'}),
+      },
+    }));
+  }, [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((fn) => {
+    if (!gameRef.current || gameRef.current.over) return;
+    const next = fn(gameRef.current);
+    gameRef.current = next;
+    setGame(next);
+  }, []);
+
+  const dice = game ? game.dice : [];
+  const monster = game ? game.monster : null;
+  const last = game ? game.last : null;
+
+  return (
+    <section className={[styles.dd, className].filter(Boolean).join(' ')} aria-labelledby="dice-duel-title">
+      <header className={styles.head}>
+        <div>
+          <p className={styles.eyebrow}>
+            {translate({id: 'preset.diceDuel.eyebrow', message: 'Mini-game', description: 'Eyebrow above the dice duel on a product page'})}
+          </p>
+          <h3 className={styles.title} id="dice-duel-title">
+            {translate({id: 'preset.diceDuel.title', message: 'Dice duel', description: 'Name of the Larpinq mini-game'})}
+          </h3>
+          <p className={styles.lede}>
+            {translate({id: 'preset.diceDuel.lede', message: 'Something is blocking the path. Swing with what you rolled, or hold the good dice and throw the rest again. Roll worse than you had and it bites.', description: 'One-line explanation of the dice-duel rules'})}
+          </p>
+        </div>
+        <div className={styles.hud} role="status" aria-live="polite">
+          <span className={styles.hudPill}>
+            {translate({id: 'preset.diceDuel.hud.score', message: 'Score {score}', description: 'Score readout on the dice-duel HUD'}, {score: Number(game ? game.score : 0).toLocaleString(locale)})}
+          </span>
+          <span className={styles.hudPill}>
+            {translate({id: 'preset.diceDuel.hud.hearts', message: 'Hearts {hearts}', description: 'Remaining-lives readout on the dice-duel HUD'}, {hearts: game ? game.hearts : 3})}
+          </span>
+        </div>
+      </header>
+
+      <div className={styles.field}>
+        <p className={styles.monster}>
+          {monster
+            ? translate(
+                {id: 'preset.diceDuel.monsterLine', message: '{what}, {hp} of {max} left', description: 'The monster and how much fight it has left'},
+                {what: monsterName(monster.key), hp: monster.hp, max: monster.maxHp},
+              )
+            : translate({id: 'preset.diceDuel.idle', message: 'Something is waiting up the path.', description: 'Placeholder before the dice duel starts'})}
+        </p>
+        {monster && (
+          <span className={styles.wounds} role="progressbar" aria-valuemin={0} aria-valuemax={monster.maxHp} aria-valuenow={monster.hp}
+            aria-label={translate({id: 'preset.diceDuel.wounds', message: 'What the monster has left', description: 'Accessible name of the monster health bar'})}>
+            <span className={styles.woundsFill} style={{width: `${Math.max(0, (monster.hp / monster.maxHp) * 100)}%`}} />
+          </span>
+        )}
+
+        <div className={styles.dice} role="group" aria-label={translate({id: 'preset.diceDuel.diceLabel', message: 'Your dice', description: 'Accessible name for the row of dice'})}>
+          {dice.map((die, i) => (
+            <button
+              key={i}
+              type="button"
+              className={[styles.die, game && game.kept[i] && styles.dieKept].filter(Boolean).join(' ')}
+              onClick={() => act((s) => toggleKeep(s, i))}
+              disabled={!running}
+              aria-pressed={Boolean(game && game.kept[i])}
+              aria-label={translate(
+                {id: 'preset.diceDuel.die', message: 'Die showing {face}{held}', description: 'Accessible label for one die. {face} is the number, {held} says whether it is held.'},
+                {face: die, held: game && game.kept[i]
+                  ? translate({id: 'preset.diceDuel.die.held', message: ', held', description: 'Appended to a die that is being kept'})
+                  : ''},
+              )}>
+              {die}
+            </button>
+          ))}
+        </div>
+
+        <p className={styles.worth}>
+          {game
+            ? translate({id: 'preset.diceDuel.worth', message: 'That swing is worth {damage}', description: 'How much the current dice are worth'}, {damage: damageOf(dice)})
+            : ''}
+        </p>
+      </div>
+
+      <footer className={styles.foot}>
+        <button type="button" className={styles.strike} onClick={() => act(strike)} disabled={!running}>
+          {translate({id: 'preset.diceDuel.strike', message: 'Swing', description: 'Button that attacks with the current dice'})}
+        </button>
+        <button type="button" className={styles.push} onClick={() => act(reroll)} disabled={!running || !game || game.rerollsLeft <= 0}>
+          {translate({id: 'preset.diceDuel.reroll', message: 'Push your luck ({left})', description: 'Button that rerolls the unheld dice. {left} is how many rerolls remain.'}, {left: game ? game.rerollsLeft : 0})}
+        </button>
+        <button type="button" className={styles.start} onClick={begin}>
+          {game
+            ? translate({id: 'preset.diceDuel.restart', message: 'New duel', description: 'Button that restarts the dice duel'})
+            : translate({id: 'preset.diceDuel.start', message: 'Draw steel', description: 'Button that starts the dice duel'})}
+        </button>
+        <p className={styles.hint} role="status" aria-live="polite">
+          {last && last.result === 'felled' && translate({id: 'preset.diceDuel.feedback.felled', message: 'It falls. Something worse is already coming.', description: 'Feedback after felling a monster'})}
+          {last && last.result === 'hit' && translate({id: 'preset.diceDuel.feedback.hit', message: 'You hit for {damage}. It has {left} left.', description: 'Feedback after a swing that did not fell the monster'}, {damage: last.damage, left: last.left})}
+          {last && last.result === 'bitten' && translate({id: 'preset.diceDuel.feedback.bitten', message: 'Worse than you had, and it bites. {from} became {to}.', description: 'Feedback after a reroll that came up worse'}, {from: last.from, to: last.to})}
+          {last && last.result === 'rerollUp' && translate({id: 'preset.diceDuel.feedback.better', message: 'Better. {from} became {to}.', description: 'Feedback after a reroll that improved the hand'}, {from: last.from, to: last.to})}
+          {!last && translate({id: 'preset.diceDuel.hint', message: 'Hold the dice you like, then push. Sixes are worth more than six.', description: 'Hint under the dice duel'})}
+        </p>
+      </footer>
+    </section>
+  );
+}

package/src/components/DiceDuel/DiceDuel.module.css

@@ -0,0 +1,191 @@
+/**
+ * <DiceDuel /> styles.
+ *
+ * Tokens only, one accent on the thing you are fighting. A held die is
+ * marked by its border and its label, never by colour alone.
+ */
+
+.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: 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;
+}
+
+.field {
+  padding: 16px;
+  border-radius: var(--radius-md);
+  background: var(--c-cobalt-50);
+  max-width: 560px;
+}
+
+.monster {
+  margin: 0 0 8px;
+  font-size: 15px;
+  color: var(--c-cobalt-900);
+}
+
+.wounds {
+  display: block;
+  height: 6px;
+  border-radius: var(--radius-pill);
+  background: var(--c-cobalt-200);
+  overflow: hidden;
+  margin-bottom: 16px;
+}
+.woundsFill {
+  display: block;
+  height: 100%;
+  background: var(--c-orange-knvb);
+  transition: width 200ms ease-out;
+}
+
+.dice {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+}
+
+.die {
+  width: 52px;
+  height: 52px;
+  border: 2px solid var(--c-cobalt-200);
+  border-radius: var(--radius-md);
+  background: white;
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--c-cobalt-900);
+  cursor: pointer;
+  transition: border-color 120ms ease, transform 120ms ease;
+}
+.die:hover:not(:disabled) { border-color: var(--c-blue-cobalt); }
+.die:disabled { opacity: 0.55; cursor: default; }
+.die:focus-visible { outline: 2px solid var(--c-blue-cobalt); outline-offset: 2px; }
+
+/* A held die sits forward and says so in its label. */
+.dieKept {
+  border-color: var(--c-mint-500);
+  background: var(--c-mint-300);
+  transform: translateY(-3px);
+}
+
+.worth {
+  margin: 12px 0 0;
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 12px;
+  color: var(--c-cobalt-700);
+  min-height: 1.2em;
+}
+
+.foot {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+  margin-top: 14px;
+}
+
+.strike {
+  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;
+}
+.strike:hover:not(:disabled) { background: var(--c-cobalt-700); border-color: var(--c-cobalt-700); }
+.strike:disabled { opacity: 0.5; cursor: default; }
+.strike:focus-visible { outline: 2px solid var(--c-cobalt-900); outline-offset: 2px; }
+
+.push {
+  background: white;
+  color: var(--c-cobalt-700);
+  border: 1px solid var(--c-cobalt-200);
+  padding: 10px 18px;
+  border-radius: var(--radius-md);
+  font-family: inherit;
+  font-weight: 500;
+  font-size: 14px;
+  cursor: pointer;
+  transition: border-color 120ms ease;
+}
+.push:hover:not(:disabled) { border-color: var(--c-orange-knvb); color: var(--c-orange-knvb); }
+.push:disabled { opacity: 0.5; cursor: default; }
+.push:focus-visible { outline: 2px solid var(--c-blue-cobalt); outline-offset: 2px; }
+
+.start {
+  background: white;
+  color: var(--c-cobalt-700);
+  border: 1px solid var(--c-cobalt-200);
+  padding: 10px 18px;
+  border-radius: var(--radius-md);
+  font-family: inherit;
+  font-weight: 500;
+  font-size: 14px;
+  cursor: pointer;
+}
+.start:hover { border-color: var(--c-blue-cobalt); color: var(--c-blue-cobalt); }
+.start:focus-visible { outline: 2px solid var(--c-blue-cobalt); outline-offset: 2px; }
+
+.hint {
+  margin: 0;
+  flex-basis: 100%;
+  font-size: 12px;
+  color: var(--c-cobalt-400);
+  min-height: 1.4em;
+}

package/src/components/DiceDuel/__tests__/engine.test.js

@@ -0,0 +1,159 @@
+/**
+ * engine.test.js — the dice-duel rules.
+ *
+ * The decision is the game: a swing is safe and small, a reroll is the
+ * only road to a big hit and the only way to be hurt. Both halves are
+ * pinned here, because a version where rerolling is free has no
+ * decision in it, and a version where swinging can hurt you has no
+ * safe move at all.
+ */
+
+'use strict';
+
+const test = require('node:test');
+const assert = require('node:assert/strict');
+
+const {
+  createGame, strike, reroll, toggleKeep, damageOf, summarise,
+  DICE, FACES, MONSTERS, DEFAULTS,
+} = require('../engine.js');
+
+/** Put known dice on the table. */
+function withDice(state, dice) {
+  return {...state, dice, kept: dice.map(() => false)};
+}
+
+test('a duel opens with a monster, a handful of dice and rerolls in hand', () => {
+  const s = createGame({seed: 1});
+  assert.equal(s.dice.length, DICE);
+  assert.ok(s.dice.every((d) => d >= 1 && d <= FACES), 'a die landed off its own faces');
+  assert.equal(s.hearts, DEFAULTS.hearts);
+  assert.equal(s.rerollsLeft, DEFAULTS.rerollsPerRound);
+  assert.equal(s.monster.hp, MONSTERS[0].hp);
+});
+
+test('damage is the pips, and a six is worth more than six', () => {
+  assert.equal(damageOf([1, 2, 3, 4]), 10);
+  assert.equal(damageOf([6, 1, 1, 1]), 9 + DEFAULTS.critBonus);
+  assert.equal(damageOf([6, 6, 6, 6]), 24 + 4 * DEFAULTS.critBonus);
+});
+
+test('a swing always lands, and the wound stays on the monster', () => {
+  let s = createGame({seed: 2});
+  s = withDice(s, [2, 2, 2, 2]);
+  const before = s.monster.hp;
+  s = strike(s);
+  assert.equal(s.monster.hp, before - 8);
+  assert.equal(s.hearts, DEFAULTS.hearts, 'swinging cost a heart');
+  assert.equal(s.last.result, 'hit');
+  assert.equal(s.rerollsLeft, DEFAULTS.rerollsPerRound, 'the new round started without rerolls');
+});
+
+test('enough damage fells the monster and brings the next one', () => {
+  let s = createGame({seed: 3});
+  s = withDice(s, [6, 6, 6, 6]);
+  const first = s.monster.key;
+  s = strike(s);
+  assert.equal(s.felled, 1);
+  assert.ok(s.score >= DEFAULTS.pointsPerKill);
+  assert.notEqual(s.monster.key, first, 'the same monster came back');
+  assert.equal(s.monster.hp, s.monster.maxHp, 'the next monster arrived already wounded');
+});
+
+test('the monsters get harder as they come', () => {
+  const hp = MONSTERS.map((m) => m.hp);
+  assert.deepEqual(hp, [...hp].sort((a, b) => a - b), 'the queue is not in rising order');
+  assert.ok(MONSTERS.length >= 3);
+});
+
+test('a reroll that improves the hand costs nothing but the reroll', () => {
+  let s = createGame({seed: 4});
+  s = withDice(s, [1, 1, 1, 1]);
+  const before = s.hearts;
+  s = reroll(s);
+  assert.equal(s.rerollsLeft, DEFAULTS.rerollsPerRound - 1);
+  /* From four ones, no roll can be worse, so this can only go up. */
+  assert.equal(s.hearts, before, 'an improving reroll cost a heart');
+  assert.equal(s.last.result, 'rerollUp');
+});
+
+test('a reroll that lands worse is what the monster punishes', () => {
+  /* Start from the best hand there is: every reroll is worse. */
+  let s = createGame({seed: 5});
+  s = withDice(s, [6, 6, 6, 6]);
+  s = reroll(s);
+  assert.equal(s.hearts, DEFAULTS.hearts - 1);
+  assert.equal(s.last.result, 'bitten');
+  assert.ok(s.last.to < s.last.from);
+});
+
+test('held dice are not rerolled', () => {
+  let s = createGame({seed: 6});
+  s = withDice(s, [6, 1, 1, 1]);
+  s = toggleKeep(s, 0);
+  s = reroll(s);
+  assert.equal(s.dice[0], 6, 'a held die was thrown again');
+});
+
+test('holding everything leaves nothing to reroll, and the reroll is refused', () => {
+  let s = createGame({seed: 7});
+  s = withDice(s, [3, 3, 3, 3]);
+  for (let i = 0; i < DICE; i++) s = toggleKeep(s, i);
+  const before = s.rerollsLeft;
+  s = reroll(s);
+  assert.equal(s.rerollsLeft, before, 'a reroll with nothing to reroll was spent');
+});
+
+test('rerolls run out, and a spent reroll cannot be taken again', () => {
+  let s = createGame({seed: 8});
+  for (let i = 0; i < DEFAULTS.rerollsPerRound; i++) s = reroll(s);
+  assert.equal(s.rerollsLeft, 0);
+  const spent = s.dice.join(',');
+  s = reroll(s);
+  assert.equal(s.dice.join(','), spent, 'the dice moved with no rerolls left');
+});
+
+test('a bad die that does not exist is ignored', () => {
+  const s = createGame({seed: 9});
+  assert.equal(toggleKeep(s, 99), s);
+  assert.equal(toggleKeep(s, -1), s);
+});
+
+test('three bites end the duel, and nothing moves afterwards', () => {
+  let s = createGame({seed: 10});
+  for (let i = 0; i < DEFAULTS.hearts; i++) {
+    s = withDice(s, [6, 6, 6, 6]);
+    s = {...s, rerollsLeft: DEFAULTS.rerollsPerRound};
+    s = reroll(s);
+  }
+  assert.equal(s.over, true);
+  assert.equal(s.hearts, 0);
+  assert.equal(strike(s).score, s.score, 'the duel kept scoring after the last heart');
+  assert.equal(reroll(s).dice.join(','), s.dice.join(','));
+});
+
+test('a player who never pushes their luck is never hurt', () => {
+  /* The whole point of the safe move: it has to stay safe forever. */
+  let s = createGame({seed: 11});
+  for (let i = 0; i < 60; i++) s = strike(s);
+  assert.equal(s.hearts, DEFAULTS.hearts);
+  assert.equal(s.over, false);
+  assert.ok(s.felled > 0, 'sixty swings felled nothing');
+});
+
+test('the same seed rolls the same duel, a different one does not', () => {
+  const run = (seed) => {
+    let s = createGame({seed});
+    const out = [s.dice.join('')];
+    for (let i = 0; i < 5; i++) { s = strike(s); out.push(s.dice.join('')); }
+    return out.join('|');
+  };
+  assert.equal(run(21), run(21));
+  assert.notEqual(run(21), run(22));
+});
+
+test('the summary reads as a sentence in both locales', () => {
+  const s = {felled: 3, rounds: 11};
+  assert.match(summarise(s, 'en'), /3 monsters felled · 11 rounds/);
+  assert.match(summarise(s, 'nl'), /3 monsters geveld · 11 beurten/);
+});