@jjlmoya/utils-tabletop 1.26.0 → 1.28.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-tabletop",
-    "version": "1.26.0",
+    "version": "1.28.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/category/index.ts

@@ -2,6 +2,8 @@ import { diceRollerSimulator } from '../tool/dice-roller-simulator/entry';
 import { boardGameTimer } from '../tool/board-game-timer/entry';
 import { dungeonMapGenerator } from '../tool/dungeon-map-generator/entry';
 import { encounterDifficultyCalculator } from '../tool/encounter-difficulty-calculator/entry';
+import { tokenStampStudio } from '../tool/token-stamp-studio/entry';
+import { musScoreboard } from '../tool/mus-scoreboard/entry';
 import type { CategoryLocaleContent, KnownLocale } from '../types';
 
 export const tabletopCategory = {
@@ -11,6 +13,8 @@ export const tabletopCategory = {
     boardGameTimer,
     dungeonMapGenerator,
     encounterDifficultyCalculator,
+    tokenStampStudio,
+    musScoreboard,
   ],
   i18n: {
     de: () => import('./i18n/de').then((m) => m.content),

package/src/entries.ts

@@ -35,6 +35,8 @@ import { hiddenRoleDealer } from './tool/hidden-role-dealer/entry';
 import { scatterDirectionSelector } from './tool/scatter-direction-selector/entry';
 import { dungeonMapGenerator } from './tool/dungeon-map-generator/entry';
 import { encounterDifficultyCalculator } from './tool/encounter-difficulty-calculator/entry';
+import { tokenStampStudio } from './tool/token-stamp-studio/entry';
+import { musScoreboard } from './tool/mus-scoreboard/entry';
 
 export const ALL_ENTRIES = [
   diceRollerSimulator,
@@ -50,5 +52,7 @@ export const ALL_ENTRIES = [
   scatterDirectionSelector,
   dungeonMapGenerator,
   encounterDifficultyCalculator,
+  tokenStampStudio,
+  musScoreboard,
 ];
 

package/src/index.ts

@@ -7,6 +7,7 @@ export { fantasyRunesTranslator, FANTASY_RUNES_TRANSLATOR_TOOL } from './tool/fa
 export { investigationBoard, INVESTIGATION_BOARD_TOOL } from './tool/investigation-board';
 export { lunarTideTracker, LUNAR_TIDE_TRACKER_TOOL } from './tool/lunar-tide-tracker';
 export { dungeonMapGenerator, DUNGEON_MAP_GENERATOR_TOOL } from './tool/dungeon-map-generator';
+export { tokenStampStudio, TOKEN_STAMP_STUDIO_TOOL } from './tool/token-stamp-studio';
 
 
 export type {

package/src/tests/locale_completeness.test.ts

@@ -22,7 +22,7 @@ describe('Locale Completeness Validation', () => {
   });
 
   it('all tools registered', () => {
-    expect(ALL_TOOLS.length).toBe(13);
+    expect(ALL_TOOLS.length).toBe(15);
   });
 
 

package/src/tests/tool_validation.test.ts

@@ -5,7 +5,7 @@ import { tabletopCategory } from '../data';
 describe('Tool Validation Suite', () => {
   describe('Library Registration', () => {
     it('should have tools in ALL_TOOLS', () => {
-      expect(ALL_TOOLS.length).toBe(13);
+      expect(ALL_TOOLS.length).toBe(15);
     });
 
 

package/src/tool/mus-scoreboard/bibliography.astro

@@ -0,0 +1,16 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { musScoreboard } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props as Props;
+const loader = musScoreboard.i18n[locale] || musScoreboard.i18n.en;
+const content = await loader?.();
+if (!content) return null;
+---
+
+{content && <SharedBibliography links={content.bibliography} />}

package/src/tool/mus-scoreboard/bibliography.ts

@@ -0,0 +1,12 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'La Federación Española de Mus, Reglamento de Juego',
+    url: 'https://lafederaciondemus.es/wp-content/uploads/2026/02/Reglamento-de-Juego-Federacion.pdf',
+  },
+  {
+    name: 'La Federación Española de Mus, Reglamento oficial',
+    url: 'https://lafederaciondemus.es/reglamento/',
+  },
+];

package/src/tool/mus-scoreboard/component.astro

@@ -0,0 +1,169 @@
+---
+import './online-mus-scoreboard.css';
+import { musScoreboard } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'en' } = Astro.props as Props;
+const loader = musScoreboard.i18n[locale] || musScoreboard.i18n.en;
+const content = await loader?.();
+if (!content) return null;
+const { ui } = content;
+---
+
+<div class="mus-scoreboard" data-mus-scoreboard>
+  <div class="mus-board-card">
+    <section class="mus-onboarding" aria-labelledby="mus-how-to-use">
+      <div class="mus-onboarding-mark" aria-hidden="true">
+        <span></span>
+        <span></span>
+        <span></span>
+        <span></span>
+      </div>
+      <div>
+        <p class="mus-kicker" id="mus-how-to-use">LIVE TABLE</p>
+        <p class="mus-onboarding-copy">{ui.onboarding}</p>
+      </div>
+    </section>
+
+    <form class="mus-config" data-config-form>
+      <div class="mus-config-heading">
+        <div>
+          <p class="mus-kicker">SET THE TABLE</p>
+          <h2>{ui.matchSettings}</h2>
+        </div>
+        <span class="mus-rule-seal" aria-hidden="true">MUS</span>
+      </div>
+      <div class="mus-name-grid">
+        <label class="mus-field">
+          <span>{ui.pairOneLabel}</span>
+          <input type="text" maxlength="24" data-pair-name="0" value={ui.pairOneDefault} required />
+        </label>
+        <label class="mus-field">
+          <span>{ui.pairTwoLabel}</span>
+          <input type="text" maxlength="24" data-pair-name="1" value={ui.pairTwoDefault} required />
+        </label>
+      </div>
+      <div class="mus-rules-grid">
+        <fieldset class="mus-choice-group">
+          <legend>{ui.targetPointsLabel}</legend>
+          <p>{ui.targetPointsHint}</p>
+          <div class="mus-choice-row">
+            <label><input type="radio" name="target-points" data-target-input="30" value="30" /><span>{ui.pointsOption30}</span></label>
+            <label><input type="radio" name="target-points" data-target-input="40" value="40" checked /><span>{ui.pointsOption40}</span></label>
+            <label><input type="radio" name="target-points" data-target-input="50" value="50" /><span>{ui.pointsOption50}</span></label>
+          </div>
+        </fieldset>
+        <fieldset class="mus-choice-group">
+          <legend>{ui.gamesToWinLabel}</legend>
+          <p>{ui.gamesToWinHint}</p>
+          <div class="mus-choice-row">
+            <label><input type="radio" name="games-to-win" data-games-input="1" value="1" /><span>{ui.gamesOption1}</span></label>
+            <label><input type="radio" name="games-to-win" data-games-input="2" value="2" checked /><span>{ui.gamesOption2}</span></label>
+            <label><input type="radio" name="games-to-win" data-games-input="3" value="3" /><span>{ui.gamesOption3}</span></label>
+          </div>
+        </fieldset>
+      </div>
+      <fieldset class="mus-deck-group">
+        <legend>{ui.deckLabel}</legend>
+        <p>{ui.deckHint}</p>
+        <div class="mus-choice-row">
+          <label><input type="radio" name="mus-deck" data-deck-input="spanish" value="spanish" checked /><span>{ui.spanishDeck}</span></label>
+          <label><input type="radio" name="mus-deck" data-deck-input="french" value="french" /><span>{ui.frenchDeck}</span></label>
+        </div>
+        <p class="mus-deck-notice" data-french-deck-notice hidden role="status"><span aria-hidden="true">i</span>{ui.frenchDeckNotice}</p>
+      </fieldset>
+      <p class="mus-form-message" data-config-message hidden role="alert"></p>
+      <button class="mus-primary-button" type="submit">{ui.startMatch}</button>
+    </form>
+
+    <section class="mus-match-panel" data-match-panel hidden aria-labelledby="mus-live-match-heading">
+    <div class="mus-match-header">
+      <div>
+        <p class="mus-kicker">{ui.liveMatch}</p>
+        <h2 id="mus-live-match-heading"><span data-target-points>40</span> {ui.targetLabel}</h2>
+      </div>
+      <div class="mus-match-meta">
+        <span><strong data-games-to-win>2</strong> {ui.vacaLabel}</span>
+        <button class="mus-quiet-button" type="button" data-action="reset">{ui.resetMatch}</button>
+      </div>
+    </div>
+
+    <div class="mus-felt" data-mus-felt data-hand-team="0" aria-label={ui.visualScoreLabel}>
+      <div class="mus-felt-caption mus-felt-caption-left" data-pair-label="0"></div>
+      <div class="mus-felt-caption mus-felt-caption-right" data-pair-label="1"></div>
+      <div class="mus-hand-choices" role="group" aria-label={ui.handLabel}>
+        <button class="mus-hand-choice mus-hand-choice-left" type="button" data-action="set-hand" data-team="0" data-hand-choice="0" aria-pressed="true"><span data-hand-choice-label="0">A</span></button>
+        <button class="mus-hand-choice mus-hand-choice-right" type="button" data-action="set-hand" data-team="1" data-hand-choice="1" aria-pressed="false"><span data-hand-choice-label="1">B</span></button>
+      </div>
+      <div class="mus-score-arc mus-score-arc-left" data-score-track="0" role="progressbar" aria-valuemin="0" aria-valuemax="40" aria-valuenow="0"><span class="mus-score-marker" data-score-marker="0" aria-hidden="true"></span></div>
+      <div class="mus-score-arc mus-score-arc-right" data-score-track="1" role="progressbar" aria-valuemin="0" aria-valuemax="40" aria-valuenow="0"><span class="mus-score-marker" data-score-marker="1" aria-hidden="true"></span></div>
+      <span class="mus-center-suit" data-hand-indicator aria-label={ui.handLabel}>M</span>
+      <div class="mus-felt-center">
+        <span class="mus-center-label">{ui.scoreLabel}</span>
+        <strong><span data-score="0">0</span><i>:</i><span data-score="1">0</span></strong>
+        <span class="mus-center-status" data-status-message>{ui.matchSaved}</span>
+      </div>
+    </div>
+
+    <div class="mus-pair-score-row">
+      <article class="mus-pair-card mus-pair-card-left">
+        <header><span class="mus-pair-index">A</span><h3 data-pair-label="0"></h3><span class="mus-game-count"><span data-games="0">0</span> {ui.gameLabel}</span></header>
+        <p class="mus-score-breakdown" data-breakdown="0">0 {ui.amarracoPlural} + 0 {ui.stonePlural}</p>
+        <p class="mus-remaining" data-remaining="0">40 {ui.pointsToGo}</p>
+        <div class="mus-tally" data-tally="0" aria-label={ui.stonesLabel}></div>
+        <div class="mus-score-actions">
+          <button type="button" data-action="add-one" data-team="0">+1 <span>{ui.addStone}</span></button>
+          <button type="button" data-action="add-five" data-team="0">+5 <span>{ui.addAmarraco}</span></button>
+          <button class="mus-close-button" type="button" data-action="close-game" data-team="0" disabled>{ui.closeGame}</button>
+        </div>
+      </article>
+      <article class="mus-pair-card mus-pair-card-right">
+        <header><span class="mus-pair-index">B</span><h3 data-pair-label="1"></h3><span class="mus-game-count"><span data-games="1">0</span> {ui.gameLabel}</span></header>
+        <p class="mus-score-breakdown" data-breakdown="1">0 {ui.amarracoPlural} + 0 {ui.stonePlural}</p>
+        <p class="mus-remaining" data-remaining="1">40 {ui.pointsToGo}</p>
+        <div class="mus-tally" data-tally="1" aria-label={ui.stonesLabel}></div>
+        <div class="mus-score-actions">
+          <button type="button" data-action="add-one" data-team="1">+1 <span>{ui.addStone}</span></button>
+          <button type="button" data-action="add-five" data-team="1">+5 <span>{ui.addAmarraco}</span></button>
+          <button class="mus-close-button" type="button" data-action="close-game" data-team="1" disabled>{ui.closeGame}</button>
+        </div>
+      </article>
+    </div>
+
+    <div class="mus-status-strip">
+      <div><span class="mus-status-dot"></span><span data-status-message>{ui.matchSaved}</span></div>
+      <div class="mus-secondary-actions"><button type="button" data-action="undo">{ui.undo}</button><span class="mus-history-label">{ui.lastAction}</span></div>
+    </div>
+    <details class="mus-history-details">
+      <summary>{ui.historyTitle}</summary>
+      <ol data-history-list><li class="mus-history-empty">{ui.noHistory}</li></ol>
+    </details>
+    </section>
+
+    <div class="mus-confirmation" data-confirmation hidden>
+      <div class="mus-confirmation-backdrop" data-action="cancel-confirmation" aria-hidden="true"></div>
+      <section class="mus-confirmation-card" role="dialog" aria-modal="true" aria-labelledby="mus-confirmation-title" aria-describedby="mus-confirmation-message">
+        <span class="mus-confirmation-mark" aria-hidden="true">M</span>
+        <p class="mus-kicker">{ui.confirmationTitle}</p>
+        <h2 id="mus-confirmation-title" data-confirmation-title>{ui.confirmationTitle}</h2>
+        <p id="mus-confirmation-message" data-confirmation-message></p>
+        <div class="mus-confirmation-actions">
+          <button class="mus-secondary-button" type="button" data-action="cancel-confirmation">{ui.cancelAction}</button>
+          <button class="mus-primary-button" type="button" data-action="accept-confirmation">{ui.confirmAction}</button>
+        </div>
+      </section>
+    </div>
+  </div>
+</div>
+
+<script type="application/json" data-mus-ui set:html={JSON.stringify(ui)}></script>
+<script>
+  import { mountMusScoreboard } from './controller';
+  const root = document.querySelector<HTMLElement>('[data-mus-scoreboard]');
+  const uiNode = document.querySelector<HTMLScriptElement>('[data-mus-ui]');
+  if (root && uiNode) mountMusScoreboard(root, JSON.parse(uiNode.textContent || '{}'));
+</script>

package/src/tool/mus-scoreboard/controller.ts

@@ -0,0 +1,178 @@
+import { addPoints, closeGame, createMusState, setHand, undoLastAction, updateConfig, type MusConfig, type MusState, type Team } from './logic';
+import { evaluateMusState } from './evaluator';
+import { loadMusState, saveMusState } from './storage';
+import { renderMusState } from './dom-views';
+import type { MusScoreboardUI } from './ui';
+
+interface ControllerContext {
+  root: HTMLElement;
+  ui: MusScoreboardUI;
+  state: MusState;
+  pendingConfirmation: (() => void) | null;
+}
+
+const getInput = (root: HTMLElement, selector: string): HTMLInputElement => {
+  const input = root.querySelector<HTMLInputElement>(selector);
+  if (!input) throw new Error(`Missing scoreboard input ${selector}`);
+  return input;
+};
+
+const readConfig = (root: HTMLElement): MusConfig => ({
+  pairNames: [
+    getInput(root, '[data-pair-name="0"]').value.trim(),
+    getInput(root, '[data-pair-name="1"]').value.trim(),
+  ],
+  targetPoints: Number(getInput(root, '[data-target-input]:checked').value),
+  gamesToWin: Number(getInput(root, '[data-games-input]:checked').value),
+  deck: getInput(root, '[data-deck-input]:checked').value as MusConfig['deck'],
+});
+
+const getMessages = (ui: MusScoreboardUI) => ({ waiting: ui.waitingForScore, ready: ui.closeGameHint, won: ui.vacaWon });
+
+const refresh = (context: ControllerContext, message = context.ui.matchSaved, showPanel = true): void => {
+  const evaluation = evaluateMusState(context.state, getMessages(context.ui));
+  renderMusState(context.root, context.state, context.ui, message || evaluation.message);
+  if (showPanel) context.root.querySelector<HTMLElement>('[data-match-panel]')?.removeAttribute('hidden');
+  if (showPanel) saveMusState(context.state);
+};
+
+const setConfigMessage = (root: HTMLElement, message = ''): void => {
+  const element = root.querySelector<HTMLElement>('[data-config-message]');
+  if (!element) return;
+  element.textContent = message;
+  element.hidden = !message;
+};
+
+const setFrenchDeckNotice = (root: HTMLElement, deck: MusConfig['deck']): void => {
+  const notice = root.querySelector<HTMLElement>('[data-french-deck-notice]');
+  if (!notice) return;
+  notice.hidden = deck !== 'french';
+};
+
+const closeConfirmation = (context: ControllerContext): void => {
+  const dialog = context.root.querySelector<HTMLElement>('[data-confirmation]');
+  if (!dialog) return;
+  dialog.hidden = true;
+  context.pendingConfirmation = null;
+};
+
+const showConfirmation = (context: ControllerContext, message: string, action: () => void): void => {
+  const dialog = context.root.querySelector<HTMLElement>('[data-confirmation]');
+  const messageElement = context.root.querySelector<HTMLElement>('[data-confirmation-message]');
+  const acceptButton = context.root.querySelector<HTMLButtonElement>('[data-action="accept-confirmation"]');
+  if (!dialog || !messageElement || !acceptButton) return;
+  messageElement.textContent = message;
+  context.pendingConfirmation = action;
+  dialog.hidden = false;
+  requestAnimationFrame(() => acceptButton.focus());
+};
+
+const setPairLabels = (root: HTMLElement, state: MusState): void => {
+  state.config.pairNames.forEach((name, team) => {
+    root.querySelector<HTMLElement>(`[data-pair-label="${team}"]`)!.textContent = name;
+  });
+};
+
+const changeScore = (context: ControllerContext, team: Team, amount: 1 | 5): void => {
+  if (context.state.games.some((games) => games >= context.state.config.gamesToWin)) return;
+  context.state = addPoints(context.state, team, amount);
+  refresh(context, `${context.state.config.pairNames[team]} ${context.ui.pointsAdded} +${amount}`);
+};
+
+const confirmClose = (context: ControllerContext, team: Team): void => {
+  if (context.state.points[team] < context.state.config.targetPoints) return;
+  showConfirmation(context, `${context.state.config.pairNames[team]}: ${context.ui.closeGamePrompt}`, () => {
+    context.state = closeGame(context.state, team);
+    const winner = context.state.games[team] >= context.state.config.gamesToWin;
+    refresh(context, winner ? context.ui.vacaWon : `${context.state.config.pairNames[team]} ${context.ui.gameClosed}`);
+  });
+};
+
+const applySettings = (context: ControllerContext): void => {
+  const config = readConfig(context.root);
+  if (config.pairNames.some((name) => !name)) {
+    setConfigMessage(context.root, context.ui.pairNameRequired);
+    getInput(context.root, '[data-pair-name="0"]').focus();
+    return;
+  }
+  setConfigMessage(context.root);
+  context.state = updateConfig(context.state, config);
+  setPairLabels(context.root, context.state);
+  refresh(context, context.ui.settingsApplied);
+};
+
+const handleUndo = (context: ControllerContext): void => {
+  if (!context.state.history.length) return;
+  context.state = undoLastAction(context.state);
+  refresh(context, context.ui.undo);
+};
+
+const changeHand = (context: ControllerContext, team: Team): void => {
+  if (context.state.hand === team) return;
+  context.state = setHand(context.state, team);
+  refresh(context, `${context.state.config.pairNames[team]} ${context.ui.handSelected}`);
+};
+
+const handleReset = (context: ControllerContext): void => {
+  showConfirmation(context, context.ui.resetMatchPrompt, () => {
+    context.state = createMusState(context.state.config);
+    refresh(context, context.ui.resetMatch);
+  });
+};
+
+const acceptConfirmation = (context: ControllerContext): void => {
+  const action = context.pendingConfirmation;
+  closeConfirmation(context);
+  action?.();
+};
+
+type ActionHandler = (context: ControllerContext, element: HTMLElement) => void;
+
+const actionHandlers: Record<string, ActionHandler> = {
+  'add-one': (context, element) => changeScore(context, Number(element.dataset.team) as Team, 1),
+  'add-five': (context, element) => changeScore(context, Number(element.dataset.team) as Team, 5),
+  'close-game': (context, element) => confirmClose(context, Number(element.dataset.team) as Team),
+  'set-hand': (context, element) => changeHand(context, Number(element.dataset.team) as Team),
+  undo: (context) => handleUndo(context),
+  'cancel-confirmation': (context) => closeConfirmation(context),
+  'accept-confirmation': (context) => acceptConfirmation(context),
+  reset: (context) => handleReset(context),
+};
+
+const handleAction = (context: ControllerContext, element: HTMLElement): void => {
+  const action = element.dataset.action;
+  if (action) actionHandlers[action]?.(context, element);
+};
+
+const bindClickActions = (context: ControllerContext): void => {
+  context.root.addEventListener('click', (event) => {
+    const target = event.target as HTMLElement;
+    const actionElement = target.closest<HTMLElement>('[data-action]');
+    if (actionElement) handleAction(context, actionElement);
+  });
+};
+
+export const mountMusScoreboard = (root: HTMLElement, ui: MusScoreboardUI): void => {
+  const savedState = loadMusState();
+  const context: ControllerContext = { root, ui, state: savedState || createMusState(), pendingConfirmation: null };
+  getInput(root, '[data-pair-name="0"]').value = context.state.config.pairNames[0];
+  getInput(root, '[data-pair-name="1"]').value = context.state.config.pairNames[1];
+  getInput(root, `[data-target-input="${context.state.config.targetPoints}"]`).checked = true;
+  getInput(root, `[data-games-input="${context.state.config.gamesToWin}"]`).checked = true;
+  getInput(root, `[data-deck-input="${context.state.config.deck}"]`).checked = true;
+  setPairLabels(root, context.state);
+  setFrenchDeckNotice(root, context.state.config.deck);
+  bindClickActions(context);
+  root.addEventListener('change', (event) => {
+    const target = event.target as HTMLInputElement;
+    if (target.matches('[data-deck-input]')) setFrenchDeckNotice(root, target.value as MusConfig['deck']);
+  });
+  root.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape' && context.pendingConfirmation) closeConfirmation(context);
+  });
+  root.querySelector<HTMLFormElement>('[data-config-form]')?.addEventListener('submit', (event) => {
+    event.preventDefault();
+    applySettings(context);
+  });
+  refresh(context, context.ui.matchSaved, savedState !== null);
+};

package/src/tool/mus-scoreboard/dom-views.ts

@@ -0,0 +1,87 @@
+import { canCloseGame, decomposeScore, getMatchWinner, remainingPoints, type MusState, type Team } from './logic';
+import type { MusScoreboardUI } from './ui';
+
+const query = <T extends Element>(root: ParentNode, selector: string): T => {
+  const element = root.querySelector<T>(selector);
+  if (!element) throw new Error(`Missing scoreboard element ${selector}`);
+  return element;
+};
+
+const setText = (root: ParentNode, selector: string, value: string): void => {
+  query<HTMLElement>(root, selector).textContent = value;
+};
+
+const setTeamProgress = (root: ParentNode, team: Team, points: number, target: number): void => {
+  const progress = Math.min(100, points / target * 100);
+  const track = query<HTMLElement>(root, `[data-score-track="${team}"]`);
+  track.style.setProperty('--score-progress', String(progress / 100));
+  track.setAttribute('aria-valuenow', String(points));
+  const marker = query<HTMLElement>(root, `[data-score-marker="${team}"]`);
+  marker.style.setProperty('--score-progress', String(progress / 100));
+};
+
+const renderTally = (root: ParentNode, team: Team, score: number, ui: MusScoreboardUI): void => {
+  const target = query<HTMLElement>(root, `[data-tally="${team}"]`);
+  target.replaceChildren();
+  const parts = decomposeScore(score);
+  for (let index = 0; index < parts.amarracos; index += 1) {
+    const amarraco = document.createElement('span');
+    amarraco.className = 'mus-tally-amarraco';
+    amarraco.setAttribute('aria-label', ui.amarracoSingular);
+    target.append(amarraco);
+  }
+  for (let index = 0; index < parts.stones; index += 1) {
+    const stone = document.createElement('span');
+    stone.className = 'mus-tally-stone';
+    stone.setAttribute('aria-label', ui.stoneSingular);
+    target.append(stone);
+  }
+};
+
+const renderHistory = (root: ParentNode, state: MusState, ui: MusScoreboardUI): void => {
+  const list = query<HTMLOListElement>(root, '[data-history-list]');
+  list.replaceChildren();
+  if (!state.history.length) {
+    const empty = document.createElement('li');
+    empty.className = 'mus-history-empty';
+    empty.textContent = ui.noHistory;
+    list.append(empty);
+    return;
+  }
+  state.history.slice(-6).reverse().forEach((entry) => {
+    const item = document.createElement('li');
+    item.textContent = entry.team === null ? entry.action : `${state.config.pairNames[entry.team]} ${entry.action}`;
+    list.append(item);
+  });
+};
+
+export const renderMusState = (root: ParentNode, state: MusState, ui: MusScoreboardUI, message: string): void => {
+  const felt = query<HTMLElement>(root, '[data-mus-felt]');
+  felt.dataset.handTeam = String(state.hand);
+  state.config.pairNames.forEach((name, team) => {
+    setText(root, `[data-hand-choice-label="${team}"]`, name.slice(0, 1).toUpperCase());
+    const handChoice = query<HTMLButtonElement>(root, `[data-hand-choice="${team}"]`);
+    handChoice.setAttribute('aria-pressed', String(state.hand === team));
+    handChoice.setAttribute('aria-label', `${ui.handLabel}: ${name}`);
+  });
+  state.points.forEach((score, team) => {
+    const index = team as Team;
+    const parts = decomposeScore(score);
+    setText(root, `[data-score="${index}"]`, String(score));
+    setText(root, `[data-breakdown="${index}"]`, `${parts.amarracos} ${parts.amarracos === 1 ? ui.amarracoSingular : ui.amarracoPlural} + ${parts.stones} ${parts.stones === 1 ? ui.stoneSingular : ui.stonePlural}`);
+    setText(root, `[data-remaining="${index}"]`, `${remainingPoints(state, index)} ${ui.pointsToGo}`);
+    setTeamProgress(root, index, score, state.config.targetPoints);
+    renderTally(root, index, score, ui);
+  });
+  state.games.forEach((games, team) => setText(root, `[data-games="${team}"]`, String(games)));
+  const matchWinner = getMatchWinner(state);
+  state.points.forEach((_, team) => {
+    const closeButton = query<HTMLButtonElement>(root, `[data-action="close-game"][data-team="${team}"]`);
+    closeButton.disabled = !canCloseGame(state, team as Team) || matchWinner !== null;
+  });
+  query<HTMLButtonElement>(root, '[data-action="undo"]').disabled = state.history.length === 0;
+  setText(root, '[data-target-points]', String(state.config.targetPoints));
+  setText(root, '[data-games-to-win]', String(state.config.gamesToWin));
+  setText(root, '[data-status-message]', message);
+  renderHistory(root, state, ui);
+};

package/src/tool/mus-scoreboard/entry.ts

@@ -0,0 +1,27 @@
+import type { TabletopToolEntry, ToolLocaleContent } from '../../types';
+import type { MusScoreboardUI } from './ui';
+
+export type { MusScoreboardUI } from './ui';
+export type MusScoreboardLocaleContent = ToolLocaleContent<MusScoreboardUI>;
+
+export const musScoreboard: TabletopToolEntry<MusScoreboardUI> = {
+  id: 'mus-scoreboard',
+  icons: { bg: 'mdi:cards-playing-outline', fg: 'mdi:counter' },
+  i18n: {
+    de: () => import('./i18n/de').then((module) => module.content),
+    en: () => import('./i18n/en').then((module) => module.content),
+    es: () => import('./i18n/es').then((module) => module.content),
+    fr: () => import('./i18n/fr').then((module) => module.content),
+    'id': () => import('./i18n/id').then((module) => module.content),
+    it: () => import('./i18n/it').then((module) => module.content),
+    ja: () => import('./i18n/ja').then((module) => module.content),
+    ko: () => import('./i18n/ko').then((module) => module.content),
+    nl: () => import('./i18n/nl').then((module) => module.content),
+    pl: () => import('./i18n/pl').then((module) => module.content),
+    pt: () => import('./i18n/pt').then((module) => module.content),
+    ru: () => import('./i18n/ru').then((module) => module.content),
+    sv: () => import('./i18n/sv').then((module) => module.content),
+    tr: () => import('./i18n/tr').then((module) => module.content),
+    zh: () => import('./i18n/zh').then((module) => module.content),
+  },
+};

package/src/tool/mus-scoreboard/evaluator.ts

@@ -0,0 +1,27 @@
+import { decomposeScore, getMatchWinner, isGameReadyToClose, remainingPoints, type MusState, type Team } from './logic';
+
+export interface MusEvaluation {
+  winner: Team | null;
+  readyTeam: Team | null;
+  badges: [string, string];
+  message: string;
+}
+
+const findLeader = (points: [number, number]): Team | null => {
+  if (points[0] === points[1]) return null;
+  return points[0] > points[1] ? 0 : 1;
+};
+
+export const evaluateMusState = (state: MusState, messages: { waiting: string; ready: string; won: string }): MusEvaluation => {
+  const winner = getMatchWinner(state);
+  const readyTeam = state.points.findIndex((points) => points >= state.config.targetPoints);
+  const badges = state.points.map((points) => {
+    const parts = decomposeScore(points);
+    return `${parts.amarracos} / ${parts.stones}`;
+  }) as [string, string];
+  if (winner !== null) return { winner, readyTeam: null, badges, message: messages.won };
+  if (isGameReadyToClose(state)) return { winner: null, readyTeam: readyTeam as Team, badges, message: messages.ready };
+  const lead = findLeader(state.points);
+  const message = lead === null ? messages.waiting : `${messages.waiting} ${remainingPoints(state, lead as Team)}`;
+  return { winner: null, readyTeam: null, badges, message };
+};