@jjlmoya/utils-tabletop 1.10.0 → 1.11.0

package/package.json

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

package/src/entries.ts

@@ -14,6 +14,8 @@ export { investigationBoard } from './tool/investigation-board/entry';
 export type { InvestigationBoardUI, InvestigationBoardLocaleContent } from './tool/investigation-board/entry';
 export { lunarTideTracker } from './tool/lunar-tide-tracker/entry';
 export type { LunarTideUI, LunarTideLocaleContent } from './tool/lunar-tide-tracker/entry';
+export { hiddenRoleDealer } from './tool/hidden-role-dealer/entry';
+export type { HiddenRoleDealerUI, HiddenRoleDealerLocaleContent } from './tool/hidden-role-dealer/entry';
 export { tabletopCategory } from './category';
 
 import { diceRollerSimulator } from './tool/dice-roller-simulator/entry';
@@ -25,6 +27,7 @@ import { fantasyRunesTranslator } from './tool/fantasy-runes-translator/entry';
 import { decisionWheel } from './tool/decision-wheel/entry';
 import { investigationBoard } from './tool/investigation-board/entry';
 import { lunarTideTracker } from './tool/lunar-tide-tracker/entry';
+import { hiddenRoleDealer } from './tool/hidden-role-dealer/entry';
 
 export const ALL_ENTRIES = [
   diceRollerSimulator,
@@ -36,5 +39,6 @@ export const ALL_ENTRIES = [
   decisionWheel,
   investigationBoard,
   lunarTideTracker,
+  hiddenRoleDealer,
 ];
 

package/src/tests/locale_completeness.test.ts

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

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(9);
+      expect(ALL_TOOLS.length).toBe(10);
     });
 
 

package/src/tool/decision-wheel/client.ts

@@ -197,6 +197,8 @@ addBtn.addEventListener('click', () => {
 document.querySelectorAll('.preset-btn').forEach((btn) => {
   btn.addEventListener('click', (e) => {
     const el = e.currentTarget as HTMLButtonElement;
+    document.querySelectorAll('.preset-btn').forEach((b) => b.classList.remove('active'));
+    el.classList.add('active');
     const key = el.dataset.preset as PresetKey;
     loadPreset(key);
   });

package/src/tool/decision-wheel/components/SegmentEditor.astro

@@ -9,7 +9,7 @@ const { labels } = Astro.props;
 <div class="editor-card">
   <span class="editor-label">{labels.presetLabel || 'Presets'}</span>
   <div class="preset-group">
-    <button type="button" class="preset-btn" data-preset="yesno">{labels.presetYesNo || 'Yes / No'}</button>
+    <button type="button" class="preset-btn active" data-preset="yesno">{labels.presetYesNo || 'Yes / No'}</button>
     <button type="button" class="preset-btn" data-preset="numbers">{labels.presetNumbers || 'Numbers 1-6'}</button>
     <button type="button" class="preset-btn" data-preset="actions">{labels.presetActions || 'Actions'}</button>
     <button type="button" class="preset-btn" data-preset="d20">{labels.presetD20 || 'D20'}</button>

package/src/tool/decision-wheel/decision-wheel.css

@@ -260,13 +260,15 @@
 }
 
 .preset-group {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
+  display: flex;
+  flex-wrap: wrap;
   gap: 0.5rem;
 }
 
 .preset-btn {
-  padding: 0.55rem 0.75rem;
+  flex: 1 1 auto;
+  min-width: fit-content;
+  padding: 0.55rem 0.85rem;
   border: 1px solid var(--border-color);
   border-radius: 0.6rem;
   background: var(--bg-surface);
@@ -276,6 +278,7 @@
   cursor: pointer;
   transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
   text-align: center;
+  white-space: nowrap;
 }
 
 .preset-btn:hover {
@@ -286,6 +289,13 @@
   box-shadow: 0 4px 12px var(--wheel-glow);
 }
 
+.preset-btn.active {
+  background: var(--wheel-accent);
+  color: var(--color-white);
+  border-color: var(--wheel-accent);
+  box-shadow: 0 4px 12px var(--wheel-glow);
+}
+
 .segment-list {
   display: flex;
   flex-direction: column;
@@ -371,18 +381,24 @@
 }
 
 .segment-weight {
-  width: 3.85rem;
-  padding: 0.5rem 0.25rem;
+  width: 4.85rem;
+  padding: 0.5rem 1.5rem 0.5rem 0.65rem;
   border: 1px solid var(--border-color);
   border-radius: 0.6rem;
-  background: var(--bg-page);
+  background-color: var(--bg-page);
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
+  background-repeat: no-repeat;
+  background-position: right 0.45rem center;
+  background-size: 0.85rem;
   color: var(--text-base);
   font-weight: 800;
   font-size: 0.85rem;
-  text-align: center;
   cursor: pointer;
   flex-shrink: 0;
   transition: all 0.2s ease;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
 }
 
 .segment-weight:focus {

package/src/tool/hidden-role-dealer/bibliography.astro

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

package/src/tool/hidden-role-dealer/bibliography.ts

@@ -0,0 +1,12 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'Social Deduction Games Design',
+    url: 'https://en.wikipedia.org/wiki/Social_deduction_game',
+  },
+  {
+    name: 'Fisher-Yates Shuffle Algorithm',
+    url: 'https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle',
+  },
+];

package/src/tool/hidden-role-dealer/client.ts

@@ -0,0 +1,265 @@
+import { renderWizardDOM } from './modules/wizard-html';
+import { updateSetupDOM } from './modules/wizard-renderer';
+import { parseInputValue } from './modules/utils';
+import { performRoleAssignment } from './modules/dealer-logic';
+import { PlayerManager } from './modules/player-manager';
+import { CustomRoleManager } from './modules/custom-role-manager';
+import { HoldController } from './modules/hold-controller';
+import { savePreroundWord, saveWriterWord } from './modules/writer-handler';
+import type { Player, ImpostorValues } from './types';
+
+class HiddenRoleDealerApp {
+  private container: HTMLElement;
+  private playerMgr: PlayerManager;
+  private roleMgr: CustomRoleManager;
+  private holdCtrl: HoldController;
+  private activePreset: string = 'werewolf';
+  private currentStep: number = 0;
+  private ui: Record<string, string> = {};
+  private impostorSecret: string = '';
+  private preroundActive: boolean = false;
+  private preroundContributors: Player[] = [];
+  private preroundStep: number = 0;
+  private preroundWords: string[] = [];
+
+  constructor(container: HTMLElement) {
+    this.container = container;
+    this.ui = JSON.parse(container.getAttribute('data-ui') || '{}');
+    this.playerMgr = new PlayerManager();
+    this.roleMgr = new CustomRoleManager();
+    this.holdCtrl = new HoldController(container, () => this.showScreen('revealed'));
+    this.activePreset = localStorage.getItem('hidden-role-dealer-preset') || 'werewolf';
+    this.bindEvents();
+    this.render();
+  }
+
+  private bindEvents(): void {
+    const cancel = () => this.holdCtrl.end();
+    this.container.addEventListener('click', (e) => this.handleClick(e));
+    this.container.addEventListener('keydown', (e) => this.handleKeydown(e));
+    this.container.addEventListener('pointerdown', (e) => this.handlePointerdown(e));
+    this.container.addEventListener('change', () => this.render());
+    ['pointerup', 'pointerleave', 'pointercancel'].forEach(ev => {
+      this.container.addEventListener(ev, cancel);
+    });
+  }
+
+  private handleKeydown(e: KeyboardEvent): void {
+    if (e.key !== 'Enter') return;
+    const active = document.activeElement;
+    if (active === this.container.querySelector('#input-player-name')) this.playerMgr.addFromInput(this.container);
+    if (active === this.container.querySelector('#input-role-name')) this.roleMgr.addFromInput(this.container);
+    this.render();
+  }
+
+  private handlePointerdown(e: PointerEvent): void {
+    if ((e.target as HTMLElement).closest('#btn-hold-reveal')) this.holdCtrl.start(e.clientX, e.clientY);
+  }
+
+  private handleSetupClick(target: HTMLElement): boolean {
+    if (target.closest('#btn-add-player')) {
+      this.playerMgr.addFromInput(this.container);
+      this.render();
+      return true;
+    }
+    const btnDel = target.closest('.hrd-btn-delete') as HTMLElement;
+    if (btnDel) {
+      const id = btnDel.getAttribute('data-id');
+      if (id) { this.playerMgr.delete(id); this.render(); }
+      return true;
+    }
+    const card = target.closest('.hrd-preset-card') as HTMLElement;
+    if (card) {
+      const key = card.getAttribute('data-key');
+      if (key) {
+        this.activePreset = key;
+        localStorage.setItem('hidden-role-dealer-preset', key);
+        this.render();
+      }
+      return true;
+    }
+    return this.handleOtherSetupClick(target);
+  }
+
+  private handleOtherSetupClick(target: HTMLElement): boolean {
+    if (target.closest('#btn-clear-players')) {
+      this.playerMgr.clear();
+      this.render();
+      return true;
+    }
+    if (target.closest('#btn-deal-roles')) {
+      this.startDealing();
+      return true;
+    }
+    if (target.closest('#btn-add-role')) {
+      this.roleMgr.addFromInput(this.container);
+      this.render();
+      return true;
+    }
+    const btnDelRole = target.closest('.hrd-btn-delete-role') as HTMLElement;
+    if (btnDelRole) {
+      const id = btnDelRole.getAttribute('data-id');
+      if (id) { this.roleMgr.delete(id); this.render(); }
+      return true;
+    }
+    return false;
+  }
+
+  private handleClick(e: Event): void {
+    const target = e.target as HTMLElement;
+    if (this.handleSetupClick(target)) return;
+    if (target.closest('#btn-hide-role')) {
+      this.nextStep();
+    } else if (target.closest('#btn-restart')) {
+      this.resetGame();
+    } else if (target.closest('#btn-save-writer-word')) {
+      this.handleSaveWriterWord();
+    }
+  }
+
+  private getImpostorValues(): ImpostorValues {
+    const fixedEl = this.container.querySelector('#select-impostor-fixed-count') as HTMLSelectElement;
+    const percentEl = this.container.querySelector('#input-impostor-percent') as HTMLInputElement;
+    const minEl = this.container.querySelector('#input-impostor-min') as HTMLInputElement;
+    const maxEl = this.container.querySelector('#input-impostor-max') as HTMLInputElement;
+    return {
+      fixedVal: parseInputValue(fixedEl, 1),
+      percentVal: parseInputValue(percentEl, 25),
+      minVal: parseInputValue(minEl, 1),
+      maxVal: parseInputValue(maxEl, 2)
+    };
+  }
+
+  private getSelectorValue(selector: string, fallback: string): string {
+    const el = this.container.querySelector(selector) as HTMLInputElement | HTMLSelectElement;
+    return el ? el.value : fallback;
+  }
+
+  private startDealing(): void {
+    const players = this.playerMgr.getPlayers();
+    if (players.length < 3) return;
+    this.impostorSecret = '';
+    const mode = this.getSelectorValue('#select-impostor-mode', 'fixed');
+    const result = performRoleAssignment({
+      players,
+      activePreset: this.activePreset,
+      customRoles: this.roleMgr.getRoles(),
+      ui: this.ui,
+      vals: this.getImpostorValues(),
+      mode,
+      writerId: this.getSelectorValue('#select-impostor-writer', 'random'),
+      secretInput: this.getSelectorValue('#input-impostor-secret', '')
+    });
+    this.playerMgr.setPlayers(result.players);
+    this.preroundActive = result.preroundActive;
+    this.impostorSecret = result.impostorSecret;
+    if (this.preroundActive) {
+      this.preroundContributors = [...result.players].sort(() => Math.random() - 0.5);
+      this.preroundStep = 0;
+      this.preroundWords = [];
+    }
+    this.currentStep = 0;
+    this.showScreen('distributing');
+  }
+
+  private handleSavePreroundWord(secret: string): void {
+    const mode = this.getSelectorValue('#select-impostor-mode', 'fixed');
+    const result = savePreroundWord({
+      secret,
+      preroundWords: this.preroundWords,
+      preroundStep: this.preroundStep,
+      playerMgr: this.playerMgr,
+      vals: this.getImpostorValues(),
+      mode,
+      ui: this.ui
+    });
+    this.preroundWords = result.preroundWords;
+    this.preroundStep = result.preroundStep;
+    this.preroundActive = result.preroundActive;
+    this.impostorSecret = result.impostorSecret;
+    this.currentStep = 0;
+    this.showScreen('distributing');
+  }
+
+  private handleSaveWriterWord(): void {
+    const input = this.container.querySelector('#input-writer-secret') as HTMLInputElement;
+    const secret = input ? input.value : '';
+    if (this.preroundActive) {
+      this.handleSavePreroundWord(secret);
+      return;
+    }
+    this.impostorSecret = saveWriterWord(secret, this.playerMgr, this.ui);
+    this.nextStep();
+  }
+
+  private nextStep(): void {
+    this.currentStep++;
+    const players = this.playerMgr.getPlayers();
+    if (this.currentStep >= players.length) {
+      this.showScreen('complete');
+    } else {
+      this.showScreen('distributing');
+    }
+  }
+
+  private resetGame(): void {
+    const players = this.playerMgr.getPlayers();
+    players.forEach(p => {
+      p.role = null;
+      p.revealed = false;
+    });
+    this.playerMgr.setPlayers(players);
+    this.preroundActive = false;
+    this.preroundContributors = [];
+    this.preroundStep = 0;
+    this.preroundWords = [];
+    this.showScreen('setup');
+  }
+
+  private showScreen(state: 'setup' | 'distributing' | 'revealed' | 'complete'): void {
+    const isSetup = state === 'setup';
+    (this.container.querySelector('#view-setup') as HTMLElement).style.display = isSetup ? 'block' : 'none';
+    (this.container.querySelector('#view-wizard') as HTMLElement).style.display = isSetup ? 'none' : 'block';
+    if (isSetup) {
+      this.render();
+    } else {
+      const wizardView = this.container.querySelector('#view-wizard') as HTMLElement;
+      if (wizardView) {
+        renderWizardDOM({
+          state,
+          wizardView,
+          preroundActive: this.preroundActive,
+          preroundContributors: this.preroundContributors,
+          preroundStep: this.preroundStep,
+          players: this.playerMgr.getPlayers(),
+          currentStep: this.currentStep,
+          impostorSecret: this.impostorSecret,
+          ui: this.ui
+        });
+      }
+    }
+  }
+
+  private render(): void {
+    updateSetupDOM({
+      container: this.container,
+      players: this.playerMgr.getPlayers(),
+      customRoles: this.roleMgr.getRoles(),
+      activePreset: this.activePreset,
+      ui: this.ui
+    });
+  }
+}
+
+function init(): void {
+  const container = document.querySelector('.hrd-card[data-tool="hidden-role-dealer"]') as HTMLElement;
+  if (container) {
+    new HiddenRoleDealerApp(container);
+  }
+}
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', init);
+} else {
+  init();
+}

package/src/tool/hidden-role-dealer/component.astro

@@ -0,0 +1,184 @@
+---
+import './hidden-role-dealer.css';
+
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="hrd-card" data-tool="hidden-role-dealer" data-ui={JSON.stringify(ui)}>
+  <div id="view-setup">
+    <div class="hrd-setup-grid">
+      <div class="hrd-setup-section">
+        <div class="hrd-section-title">
+          <span>{ui.playerList}</span>
+          <button id="btn-clear-players" class="hrd-btn-secondary" type="button">
+            {ui.clearPlayers}
+          </button>
+        </div>
+        <div class="hrd-input-row">
+          <input
+            id="input-player-name"
+            class="hrd-input"
+            type="text"
+            placeholder={ui.addPlayerPlaceholder}
+            maxlength="20"
+          />
+          <button id="btn-add-player" class="hrd-btn-primary" type="button">
+            {ui.addPlayer}
+          </button>
+        </div>
+        <div id="players-list" class="hrd-players-container"></div>
+      </div>
+
+      <div class="hrd-setup-section">
+        <div class="hrd-section-title">
+          <span>{ui.presetsTitle}</span>
+        </div>
+        <div class="hrd-presets-list">
+          <button class="hrd-preset-card active" data-key="werewolf" type="button">
+            <div class="hrd-preset-name">{ui.werewolfName}</div>
+            <div class="hrd-preset-desc">{ui.werewolfDesc}</div>
+          </button>
+          <button class="hrd-preset-card" data-key="avalon" type="button">
+            <div class="hrd-preset-name">{ui.avalonName}</div>
+            <div class="hrd-preset-desc">{ui.avalonDesc}</div>
+          </button>
+          <button class="hrd-preset-card" data-key="hitler" type="button">
+            <div class="hrd-preset-name">{ui.hitlerName}</div>
+            <div class="hrd-preset-desc">{ui.hitlerDesc}</div>
+          </button>
+          <button class="hrd-preset-card" data-key="impostor" type="button">
+            <div class="hrd-preset-name">{ui.impostorPresetName}</div>
+            <div class="hrd-preset-desc">{ui.impostorPresetDesc}</div>
+          </button>
+          <button class="hrd-preset-card" data-key="custom" type="button">
+            <div class="hrd-preset-name">{ui.presetCustom}</div>
+            <div class="hrd-preset-desc">{ui.customDesc}</div>
+          </button>
+        </div>
+        <div id="impostor-settings" class="hrd-custom-section" style="display: none; margin-top: 1.5rem; border-top: 1px solid var(--dealer-border); padding-top: 1.5rem;">
+          <div class="hrd-section-title">
+            <span>{ui.impostorTitle}</span>
+          </div>
+          <div class="hrd-input-row" style="margin-bottom: 1rem;">
+            <label style="flex: 1; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem;">
+              <span>{ui.impostorWriterLabel}</span>
+              <select id="select-impostor-writer" class="hrd-select" style="width: 100%;">
+                <option value="random">{ui.impostorWriterRandom}</option>
+                <option value="preround">{ui.impostorWriterPreround}</option>
+              </select>
+              <div id="impostor-writer-desc" style="font-size: 0.75rem; color: var(--dealer-text-muted); margin-top: 0.25rem; line-height: 1.4;"></div>
+            </label>
+          </div>
+          <div id="impostor-secret-wrapper" class="hrd-input-row" style="margin-bottom: 1rem;">
+            <label style="flex: 1; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem;">
+              <span>{ui.impostorSharedSecretLabel}</span>
+              <input
+                id="input-impostor-secret"
+                class="hrd-input"
+                type="text"
+                placeholder={ui.impostorSharedSecretPlaceholder}
+                maxlength="50"
+              />
+            </label>
+          </div>
+          <div class="hrd-input-row" style="margin-bottom: 1rem;">
+            <label style="flex: 1; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem;">
+              <span>{ui.impostorModeLabel}</span>
+              <select id="select-impostor-mode" class="hrd-select" style="width: 100%;">
+                <option value="fixed">{ui.impostorModeFixed}</option>
+                <option value="percentage">{ui.impostorModePercentage}</option>
+                <option value="range">{ui.impostorModeRange}</option>
+              </select>
+            </label>
+          </div>
+          <div id="impostor-fixed-wrapper" class="hrd-input-row" style="margin-bottom: 1rem;">
+            <label style="flex: 1; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem;">
+              <span>{ui.impostorFixedLabel}</span>
+              <select id="select-impostor-fixed-count" class="hrd-select" style="width: 100%;">
+                <option value="1">1</option>
+                <option value="2">2</option>
+                <option value="3">3</option>
+              </select>
+            </label>
+          </div>
+          <div id="impostor-percent-wrapper" class="hrd-input-row" style="display: none; margin-bottom: 1rem;">
+            <label style="flex: 1; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem;">
+              <span>{ui.impostorPercentageLabel}</span>
+              <input
+                id="input-impostor-percent"
+                class="hrd-input"
+                type="number"
+                value="25"
+                min="10"
+                max="90"
+              />
+            </label>
+          </div>
+          <div id="impostor-range-wrapper" class="hrd-input-row" style="display: none; margin-bottom: 1rem; gap: 1rem;">
+            <label style="flex: 1; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem;">
+              <span>{ui.impostorRangeMinLabel}</span>
+              <input
+                id="input-impostor-min"
+                class="hrd-input"
+                type="number"
+                value="1"
+                min="1"
+                max="10"
+              />
+            </label>
+            <label style="flex: 1; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem;">
+              <span>{ui.impostorRangeMaxLabel}</span>
+              <input
+                id="input-impostor-max"
+                class="hrd-input"
+                type="number"
+                value="2"
+                min="1"
+                max="10"
+              />
+            </label>
+          </div>
+        </div>
+        <div id="custom-roles-editor" class="hrd-custom-section" style="display: none; margin-top: 1.5rem; border-top: 1px solid var(--dealer-border); padding-top: 1.5rem;">
+          <div class="hrd-section-title">
+            <span>{ui.customRolesTitle}</span>
+          </div>
+          <div class="hrd-input-row" style="margin-bottom: 0.5rem;">
+            <input
+              id="input-role-name"
+              class="hrd-input"
+              type="text"
+              placeholder={ui.customRolePlaceholder}
+              maxlength="20"
+              style="flex: 2;"
+            />
+            <select id="select-role-alignment" class="hrd-select">
+              <option value="neutral">{ui.neutralLabel}</option>
+              <option value="good">{ui.goodLabel}</option>
+              <option value="evil">{ui.evilLabel}</option>
+            </select>
+            <button id="btn-add-role" class="hrd-btn-primary" type="button">
+              {ui.addPlayer}
+            </button>
+          </div>
+          <div id="custom-roles-list" class="hrd-players-container"></div>
+        </div>
+      </div>
+    </div>
+
+    <div class="hrd-deal-action-panel">
+      <div id="deal-warning" class="hrd-warning-box" style="display: none;"></div>
+      <button id="btn-deal-roles" class="hrd-btn-primary" type="button">
+        {ui.dealRoles}
+      </button>
+    </div>
+  </div>
+
+  <div id="view-wizard" class="hrd-wizard-container" style="display: none;"></div>
+</div>
+
+<script src="./client.ts"></script>