@jjlmoya/utils-tabletop 1.10.0 → 1.12.0

package/package.json

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

package/src/entries.ts

@@ -14,6 +14,10 @@ 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 { scatterDirectionSelector } from './tool/scatter-direction-selector/entry';
+export type { ScatterSelectorUI, ScatterSelectorLocaleContent } from './tool/scatter-direction-selector/entry';
 export { tabletopCategory } from './category';
 
 import { diceRollerSimulator } from './tool/dice-roller-simulator/entry';
@@ -25,6 +29,8 @@ 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';
+import { scatterDirectionSelector } from './tool/scatter-direction-selector/entry';
 
 export const ALL_ENTRIES = [
   diceRollerSimulator,
@@ -36,5 +42,7 @@ export const ALL_ENTRIES = [
   decisionWheel,
   investigationBoard,
   lunarTideTracker,
+  hiddenRoleDealer,
+  scatterDirectionSelector,
 ];
 

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(11);
   });
 
 

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(11);
     });
 
 

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/dice-roller-simulator/component.astro

@@ -1,8 +1,8 @@
 ---
-import DiceGrid from './components/DiceGrid.astro';
-import RollHistorySection from './components/RollHistorySection.astro';
-import StatsPanel from './components/StatsPanel.astro';
-import RollResultBanner from './components/RollResultBanner.astro';
+import DiceGrid from "./components/DiceGrid.astro";
+import RollHistorySection from "./components/RollHistorySection.astro";
+import StatsPanel from "./components/StatsPanel.astro";
+import RollResultBanner from "./components/RollResultBanner.astro";
 
 interface Props {
   ui: Record<string, string>;
@@ -15,33 +15,117 @@ const { ui } = Astro.props;
   <div class="tabletop-gaming-dashboard">
     <div class="forge-and-tray-grid">
       <DiceGrid labels={ui} />
-      
+
       <div class="dashboard-center">
         <div class="rolling-tray-container">
           <div class="tray-rim">
             <div class="tray-felt" id="roll-arena">
               <div class="felt-placeholder" id="arena-placeholder">
-                <svg viewBox="0 0 100 100" class="felt-crest-svg" aria-hidden="true">
-                  <circle cx="50" cy="50" r="45" fill="none" stroke="currentColor" stroke-opacity="0.15" stroke-width="1" />
-                  <circle cx="50" cy="50" r="40" fill="none" stroke="currentColor" stroke-opacity="0.08" stroke-width="1" stroke-dasharray="3,3" />
-                  
-                  <polygon points="50,15 80,32 80,68 50,85 20,68 20,32" fill="currentColor" fill-opacity="0.03" stroke="currentColor" stroke-width="2" />
-                  
-                  <polygon points="50,38 72,50 50,75 28,50" fill="none" stroke="currentColor" stroke-width="1.5" />
-                  <line x1="50" y1="15" x2="50" y2="38" stroke="currentColor" stroke-width="1.5" />
-                  <line x1="20" y1="32" x2="28" y2="50" stroke="currentColor" stroke-width="1.5" />
-                  <line x1="80" y1="32" x2="72" y2="50" stroke="currentColor" stroke-width="1.5" />
-                  <line x1="20" y1="68" x2="28" y2="50" stroke="currentColor" stroke-width="1.5" />
-                  <line x1="80" y1="68" x2="72" y2="50" stroke="currentColor" stroke-width="1.5" />
-                  <line x1="50" y1="85" x2="50" y2="75" stroke="currentColor" stroke-width="1.5" />
-                  <line x1="28" y1="50" x2="50" y2="75" stroke="currentColor" stroke-width="1.5" />
-                  <line x1="72" y1="50" x2="50" y2="75" stroke="currentColor" stroke-width="1.5" />
-                  
-                  <text x="50" y="58" font-size="12" font-weight="900" text-anchor="middle" fill="currentColor" font-family="'Outfit', sans-serif">20</text>
+                <svg
+                  viewBox="0 0 100 100"
+                  class="felt-crest-svg"
+                  aria-hidden="true"
+                >
+                  <circle
+                    cx="50"
+                    cy="50"
+                    r="45"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-opacity="0.15"
+                    stroke-width="1"></circle>
+                  <circle
+                    cx="50"
+                    cy="50"
+                    r="40"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-opacity="0.08"
+                    stroke-width="1"
+                    stroke-dasharray="3,3"></circle>
+
+                  <polygon
+                    points="50,15 80,32 80,68 50,85 20,68 20,32"
+                    fill="currentColor"
+                    fill-opacity="0.03"
+                    stroke="currentColor"
+                    stroke-width="2"></polygon>
+
+                  <polygon
+                    points="50,38 72,50 50,75 28,50"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="1.5"></polygon>
+                  <line
+                    x1="50"
+                    y1="15"
+                    x2="50"
+                    y2="38"
+                    stroke="currentColor"
+                    stroke-width="1.5"></line>
+                  <line
+                    x1="20"
+                    y1="32"
+                    x2="28"
+                    y2="50"
+                    stroke="currentColor"
+                    stroke-width="1.5"></line>
+                  <line
+                    x1="80"
+                    y1="32"
+                    x2="72"
+                    y2="50"
+                    stroke="currentColor"
+                    stroke-width="1.5"></line>
+                  <line
+                    x1="20"
+                    y1="68"
+                    x2="28"
+                    y2="50"
+                    stroke="currentColor"
+                    stroke-width="1.5"></line>
+                  <line
+                    x1="80"
+                    y1="68"
+                    x2="72"
+                    y2="50"
+                    stroke="currentColor"
+                    stroke-width="1.5"></line>
+                  <line
+                    x1="50"
+                    y1="85"
+                    x2="50"
+                    y2="75"
+                    stroke="currentColor"
+                    stroke-width="1.5"></line>
+                  <line
+                    x1="28"
+                    y1="50"
+                    x2="50"
+                    y2="75"
+                    stroke="currentColor"
+                    stroke-width="1.5"></line>
+                  <line
+                    x1="72"
+                    y1="50"
+                    x2="50"
+                    y2="75"
+                    stroke="currentColor"
+                    stroke-width="1.5"></line>
+
+                  <text
+                    x="50"
+                    y="58"
+                    font-size="12"
+                    font-weight="900"
+                    text-anchor="middle"
+                    fill="currentColor">20</text
+                  >
                 </svg>
                 <p class="felt-hint-text">Add dice to roll</p>
               </div>
-              <div class="felt-dice-container" id="dice-results-container"></div>
+              <div class="felt-dice-container" id="dice-results-container">
+              </div>
             </div>
           </div>
         </div>
@@ -56,10 +140,16 @@ const { ui } = Astro.props;
 
     <div class="tabletop-extra-tabs">
       <div class="tabs-nav">
-        <button type="button" class="extra-tab-btn active" data-extra-tab="logs-panel">Roll Logs</button>
-        <button type="button" class="extra-tab-btn" data-extra-tab="stats-panel">Statistics</button>
+        <button
+          type="button"
+          class="extra-tab-btn active"
+          data-extra-tab="logs-panel">Roll Logs</button
+        >
+        <button type="button" class="extra-tab-btn" data-extra-tab="stats-panel"
+          >Statistics</button
+        >
       </div>
-      
+
       <div class="extra-tabs-content">
         <div class="extra-tab-pane active" id="logs-panel">
           <RollHistorySection labels={ui} />

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();
+}