@jjlmoya/utils-tabletop 1.4.0 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-tabletop",
-    "version": "1.4.0",
+    "version": "1.6.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",
@@ -17,7 +17,7 @@
         "access": "public"
     },
     "scripts": {
-        "dev": "astro dev",
+        "dev": "astro dev --host",
         "start": "astro dev",
         "build": "astro build",
         "preview": "astro preview",
@@ -42,9 +42,11 @@
         "@iconify-json/mdi": "^1.2.3",
         "@jjlmoya/prompagate": "^1.1.0",
         "@jjlmoya/utils-shared": "1.2.0",
+        "@panzoom/panzoom": "^4.6.2",
         "astro": "^6.1.2",
         "astro-icon": "^1.1.0",
-        "html2canvas": "^1.4.1"
+        "html2canvas": "^1.4.1",
+        "interactjs": "^1.10.27"
     },
     "devDependencies": {
         "@astrojs/check": "^0.9.8",

package/src/entries.ts

@@ -4,10 +4,24 @@ export { boardGameTimer } from './tool/board-game-timer/entry';
 export type { BoardGameTimerUI, BoardGameTimerLocaleContent } from './tool/board-game-timer/entry';
 export { firstPlayerSelector } from './tool/first-player-selector/entry';
 export type { FirstPlayerSelectorUI, FirstPlayerSelectorLocaleContent } from './tool/first-player-selector/entry';
+export { scoreTracker } from './tool/score-tracker/entry';
+export type { ScoreTrackerUI, ScoreTrackerLocaleContent } from './tool/score-tracker/entry';
+export { initiativeTracker } from './tool/rpg-initiative-tracker/entry';
+export type { InitiativeTrackerUI, InitiativeTrackerLocaleContent } from './tool/rpg-initiative-tracker/entry';
+export { fantasyRunesTranslator } from './tool/fantasy-runes-translator/entry';
+export type { FantasyRunesTranslatorUI, FantasyRunesTranslatorLocaleContent } from './tool/fantasy-runes-translator/entry';
+export { investigationBoard } from './tool/investigation-board/entry';
+export type { InvestigationBoardUI, InvestigationBoardLocaleContent } from './tool/investigation-board/entry';
 export { tabletopCategory } from './category';
 
 import { diceRollerSimulator } from './tool/dice-roller-simulator/entry';
 import { boardGameTimer } from './tool/board-game-timer/entry';
 import { firstPlayerSelector } from './tool/first-player-selector/entry';
+import { scoreTracker } from './tool/score-tracker/entry';
+import { initiativeTracker } from './tool/rpg-initiative-tracker/entry';
+import { fantasyRunesTranslator } from './tool/fantasy-runes-translator/entry';
+import { decisionWheel } from './tool/decision-wheel/entry';
+import { investigationBoard } from './tool/investigation-board/entry';
+
+export const ALL_ENTRIES = [diceRollerSimulator, boardGameTimer, firstPlayerSelector, scoreTracker, initiativeTracker, fantasyRunesTranslator, decisionWheel, investigationBoard];
 
-export const ALL_ENTRIES = [diceRollerSimulator, boardGameTimer, firstPlayerSelector];

package/src/index.ts

@@ -3,6 +3,9 @@ export const tabletopCategorySEO = () => import('./category/TabletopCategorySEO.
 
 export { diceRollerSimulator, DICE_ROLLER_SIMULATOR_TOOL } from './tool/dice-roller-simulator';
 export { boardGameTimer, BOARD_GAME_TIMER_TOOL } from './tool/board-game-timer';
+export { fantasyRunesTranslator, FANTASY_RUNES_TRANSLATOR_TOOL } from './tool/fantasy-runes-translator';
+export { investigationBoard, INVESTIGATION_BOARD_TOOL } from './tool/investigation-board';
+
 
 export type {
   KnownLocale,

package/src/tests/locale_completeness.test.ts

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

package/src/tests/tool_validation.test.ts

@@ -5,9 +5,10 @@ import { tabletopCategory } from '../data';
 describe('Tool Validation Suite', () => {
   describe('Library Registration', () => {
     it('should have tools in ALL_TOOLS', () => {
-      expect(ALL_TOOLS.length).toBe(3);
+      expect(ALL_TOOLS.length).toBe(8);
     });
 
+
     it('tabletopCategory should be defined', () => {
       expect(tabletopCategory).toBeDefined();
       expect(tabletopCategory.i18n).toBeDefined();

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

@@ -0,0 +1,78 @@
+export class SoundEngine {
+  private ctx: AudioContext | null = null;
+  private muted = false;
+
+  private initCtx(): void {
+    if (this.ctx) return;
+    const AudioContextClass = window.AudioContext || (window as unknown as { webkitAudioContext: typeof AudioContext }).webkitAudioContext;
+    if (AudioContextClass) {
+      this.ctx = new AudioContextClass();
+    }
+  }
+
+  public setMuted(muted: boolean): void {
+    this.muted = muted;
+  }
+
+  public isMuted(): boolean {
+    return this.muted;
+  }
+
+  public playTick(): void {
+    if (this.muted) return;
+    this.initCtx();
+    if (!this.ctx) return;
+
+    if (this.ctx.state === 'suspended') {
+      this.ctx.resume();
+    }
+
+    const osc = this.ctx.createOscillator();
+    const gain = this.ctx.createGain();
+
+    osc.connect(gain);
+    gain.connect(this.ctx.destination);
+
+    osc.type = 'sine';
+    osc.frequency.setValueAtTime(800, this.ctx.currentTime);
+    osc.frequency.exponentialRampToValueAtTime(100, this.ctx.currentTime + 0.05);
+
+    gain.gain.setValueAtTime(0.1, this.ctx.currentTime);
+    gain.gain.exponentialRampToValueAtTime(0.01, this.ctx.currentTime + 0.05);
+
+    osc.start();
+    osc.stop(this.ctx.currentTime + 0.05);
+  }
+
+  public playChime(): void {
+    if (this.muted) return;
+    this.initCtx();
+    if (!this.ctx) return;
+
+    if (this.ctx.state === 'suspended') {
+      this.ctx.resume();
+    }
+
+    const notes = [523.25, 659.25, 783.99, 1046.50];
+    const now = this.ctx.currentTime;
+
+    notes.forEach((freq, idx) => {
+      if (!this.ctx) return;
+      const osc = this.ctx.createOscillator();
+      const gain = this.ctx.createGain();
+
+      osc.connect(gain);
+      gain.connect(this.ctx.destination);
+
+      osc.type = 'triangle';
+      osc.frequency.setValueAtTime(freq, now + idx * 0.08);
+
+      gain.gain.setValueAtTime(0, now + idx * 0.08);
+      gain.gain.linearRampToValueAtTime(0.15, now + idx * 0.08 + 0.02);
+      gain.gain.exponentialRampToValueAtTime(0.001, now + idx * 0.08 + 0.3);
+
+      osc.start(now + idx * 0.08);
+      osc.stop(now + idx * 0.08 + 0.35);
+    });
+  }
+}

package/src/tool/decision-wheel/bibliography.astro

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

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

@@ -0,0 +1,8 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'Decision Wheel Spinner Guide',
+    url: 'https://en.wikipedia.org/wiki/Wheel_of_fortune_(game_show)',
+  },
+];

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

@@ -0,0 +1,226 @@
+import type { WheelSegment, SpinResultEntry, PresetKey } from './types';
+import {
+  getPresetSegments,
+  addSegment as addSegmentLogic,
+  removeSegment as removeSegmentLogic,
+  updateSegment as updateSegmentLogic,
+  selectRandomSegment,
+  getSelectedIndex,
+  addHistoryItem,
+} from './logic';
+import { SoundEngine } from './audio';
+import { drawWheel } from './drawing';
+import { bindSegmentEvents, renderSegmentEditor, renderResult, triggerEmphasis, renderHistory } from './ui';
+
+let segments = getPresetSegments('yesno');
+let history: SpinResultEntry[] = [];
+let isSpinning = false;
+let currentAngle = 0;
+
+const MAX_SEGMENTS = 16;
+const soundEngine = new SoundEngine();
+
+const canvas = document.getElementById('wheel-canvas') as HTMLCanvasElement;
+const spinBtn = document.getElementById('spin-btn') as HTMLButtonElement;
+const resultDisplay = document.getElementById('result-display') as HTMLElement;
+const historyList = document.getElementById('history-list') as HTMLElement;
+const historyEmpty = document.getElementById('history-empty') as HTMLElement;
+const clearBtn = document.getElementById('clear-history-btn') as HTMLButtonElement;
+const segmentList = document.getElementById('segment-list') as HTMLElement;
+const addBtn = document.getElementById('add-segment-btn') as HTMLButtonElement;
+const mainCard = document.querySelector('.tool-main-card') as HTMLElement;
+const pointerEl = document.querySelector('.wheel-pointer') as HTMLElement;
+const muteBtn = document.getElementById('mute-btn') as HTMLButtonElement;
+
+if (muteBtn) {
+  const onSvg = muteBtn.querySelector('.sound-on-svg') as HTMLElement;
+  const offSvg = muteBtn.querySelector('.sound-off-svg') as HTMLElement;
+  muteBtn.addEventListener('click', () => {
+    const isMuted = !soundEngine.isMuted();
+    soundEngine.setMuted(isMuted);
+    if (onSvg && offSvg) {
+      onSvg.style.display = isMuted ? 'none' : 'block';
+      offSvg.style.display = isMuted ? 'block' : 'none';
+    }
+    muteBtn.setAttribute('aria-label', isMuted ? 'Unmute Sounds' : 'Mute Sounds');
+  });
+}
+
+function t(key: string): string {
+  if (!mainCard) return '';
+  try {
+    const ui = JSON.parse(mainCard.getAttribute('data-ui') || '{}');
+    return ui[key] || '';
+  } catch {
+    return '';
+  }
+}
+
+interface SpinState {
+  startTime: number;
+  duration: number;
+  startAngle: number;
+  totalRotation: number;
+  lastIndex: number;
+  resolve: () => void;
+}
+
+function runSpinAnimation(now: number, state: SpinState): void {
+  const elapsed = now - state.startTime;
+  const progress = Math.min(elapsed / state.duration, 1);
+  const eased = 1 - Math.pow(1 - progress, 4);
+  currentAngle = state.startAngle + state.totalRotation * eased;
+  drawWheel(canvas, segments, currentAngle);
+
+  const currentIndex = getSelectedIndex(segments, currentAngle);
+  if (currentIndex !== state.lastIndex) {
+    soundEngine.playTick();
+    if (pointerEl) {
+      pointerEl.classList.add('tick-active');
+      setTimeout(() => {
+        pointerEl.classList.remove('tick-active');
+      }, 40);
+    }
+    state.lastIndex = currentIndex;
+  }
+
+  if (progress < 1) {
+    requestAnimationFrame((t) => runSpinAnimation(t, state));
+  } else {
+    currentAngle = state.startAngle + state.totalRotation;
+    drawWheel(canvas, segments, currentAngle);
+    state.resolve();
+  }
+}
+
+function animateSpin(targetIndex: number): Promise<void> {
+  return new Promise((resolve) => {
+    const totalWeight = segments.reduce((sum, s) => sum + (s.weight || 1), 0);
+    let acc = 0;
+    for (let i = 0; i < targetIndex; i++) {
+      acc += segments[i].weight || 1;
+    }
+    const targetSliceWeight = segments[targetIndex].weight || 1;
+    const startAngleSeg = (acc / totalWeight) * 360;
+    const endAngleSeg = ((acc + targetSliceWeight) / totalWeight) * 360;
+    const targetAngle = startAngleSeg + (endAngleSeg - startAngleSeg) / 2;
+
+    const fullSpins = 4 + Math.floor(Math.random() * 3);
+    const totalRotation = fullSpins * 360 + (360 - targetAngle);
+    const duration = 2500 + fullSpins * 300;
+
+    const state: SpinState = {
+      startTime: performance.now(),
+      duration,
+      startAngle: currentAngle,
+      totalRotation,
+      lastIndex: getSelectedIndex(segments, currentAngle),
+      resolve,
+    };
+
+    requestAnimationFrame((t) => runSpinAnimation(t, state));
+  });
+}
+
+function setSegmentsWithReset(newSegments: WheelSegment[]): void {
+  segments = newSegments;
+  currentAngle = 0;
+  drawWheel(canvas, segments, currentAngle);
+  renderSegmentEditor(segmentList, segments, t, bindAll);
+  renderResult(resultDisplay, null, false, t);
+}
+
+function handleUpdateSegment(id: string, field: string, value: string): void {
+  segments = updateSegmentLogic(segments, id, field, value);
+  if (field === 'color' || field === 'weight') {
+    drawWheel(canvas, segments, currentAngle);
+  }
+}
+
+function handleRemoveSegment(id: string): void {
+  segments = removeSegmentLogic(segments, id);
+  renderSegmentEditor(segmentList, segments, t, bindAll);
+  drawWheel(canvas, segments, currentAngle);
+}
+
+function bindAll(): void {
+  bindSegmentEvents(segmentList, handleUpdateSegment, handleRemoveSegment);
+}
+
+async function onSpin(): Promise<void> {
+  if (isSpinning) return;
+  if (segments.length < 2) return;
+  isSpinning = true;
+  spinBtn.disabled = true;
+  renderResult(resultDisplay, null, true, t);
+
+  const canvasCard = canvas.closest('.canvas-card') as HTMLElement;
+  if (canvasCard) {
+    canvasCard.classList.add('spinning');
+  }
+
+  const targetIndex = selectRandomSegment(segments);
+  await animateSpin(targetIndex);
+
+  const resultSegment = segments[targetIndex];
+  history = addHistoryItem(history, resultSegment, targetIndex);
+
+  soundEngine.playChime();
+
+  if (canvasCard) {
+    canvasCard.classList.remove('spinning');
+  }
+
+  isSpinning = false;
+  spinBtn.disabled = false;
+  renderResult(resultDisplay, { segment: resultSegment, index: targetIndex, timestamp: Date.now() }, false, t);
+  renderHistory(historyList, historyEmpty, history);
+  triggerEmphasis();
+}
+
+spinBtn.addEventListener('click', onSpin);
+
+clearBtn.addEventListener('click', () => {
+  history = [];
+  renderHistory(historyList, historyEmpty, history);
+});
+
+addBtn.addEventListener('click', () => {
+  if (segments.length >= MAX_SEGMENTS) return;
+  segments = addSegmentLogic(segments);
+  renderSegmentEditor(segmentList, segments, t, bindAll);
+  drawWheel(canvas, segments, currentAngle);
+});
+
+document.querySelectorAll('.preset-btn').forEach((btn) => {
+  btn.addEventListener('click', (e) => {
+    const el = e.currentTarget as HTMLButtonElement;
+    const key = el.dataset.preset as PresetKey;
+    loadPreset(key);
+  });
+});
+
+function loadPreset(key: PresetKey): void {
+  const newSegments = getPresetSegments(key);
+  setSegmentsWithReset(newSegments);
+}
+
+document.querySelectorAll('.tab-header').forEach((btn) => {
+  btn.addEventListener('click', (e) => {
+    const target = e.currentTarget as HTMLButtonElement;
+    const tabName = target.dataset.tab;
+
+    document.querySelectorAll('.tab-header').forEach((h) => h.classList.remove('active'));
+    document.querySelectorAll('.tab-pane').forEach((p) => p.classList.remove('active'));
+
+    target.classList.add('active');
+    const pane = document.getElementById(`pane-${tabName}`);
+    if (pane) {
+      pane.classList.add('active');
+    }
+  });
+});
+
+drawWheel(canvas, segments, currentAngle);
+renderSegmentEditor(segmentList, segments, t, bindAll);
+renderHistory(historyList, historyEmpty, history);

package/src/tool/decision-wheel/component.astro

@@ -0,0 +1,48 @@
+---
+import WheelCanvas from './components/WheelCanvas.astro';
+import SegmentEditor from './components/SegmentEditor.astro';
+import SpinResult from './components/SpinResult.astro';
+import SpinHistory from './components/SpinHistory.astro';
+
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="tool-main-card" data-ui={JSON.stringify(ui)}>
+  <div class="wheel-dashboard">
+    <div class="wheel-layout">
+      
+      <div class="wheel-canvas-section">
+        <div class="canvas-card">
+          <WheelCanvas labels={ui} />
+          <div class="wheel-pointer" aria-hidden="true"></div>
+        </div>
+        <button type="button" id="spin-btn" class="spin-button">{ui.spinButton || 'Spin the Wheel'}</button>
+        <SpinResult labels={ui} />
+      </div>
+
+      <div class="wheel-controls-section">
+        <div class="tab-container">
+          <div class="tab-headers">
+            <button type="button" class="tab-header active" data-tab="editor">{ui.presetLabel || 'Customize'}</button>
+            <button type="button" class="tab-header" data-tab="history">{ui.historyTitle || 'History'}</button>
+          </div>
+          <div class="tab-contents">
+            <div class="tab-pane active" id="pane-editor">
+              <SegmentEditor labels={ui} />
+            </div>
+            <div class="tab-pane" id="pane-history">
+              <SpinHistory labels={ui} />
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</div>
+
+<script src="./client.ts"></script>

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

@@ -0,0 +1,22 @@
+---
+interface Props {
+  labels: Record<string, string>;
+}
+
+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" 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>
+    <button type="button" class="preset-btn" data-preset="alignment">{labels.presetAlignment || 'Alignment'}</button>
+    <button type="button" class="preset-btn" data-preset="loot">{labels.presetLoot || 'Loot Rarity'}</button>
+    <button type="button" class="preset-btn" data-preset="custom">{labels.presetCustom || 'Custom'}</button>
+  </div>
+  <div class="segment-list" id="segment-list"></div>
+  <button type="button" id="add-segment-btn" class="btn-add-segment">{labels.addSegmentLabel || 'Add Segment'}</button>
+</div>

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

@@ -0,0 +1,17 @@
+---
+interface Props {
+  labels: Record<string, string>;
+}
+
+const { labels } = Astro.props;
+---
+
+<div class="history-section">
+  <div class="history-header">
+    <h3 class="history-title">{labels.historyTitle || 'Spin History'}</h3>
+    <button type="button" id="clear-history-btn" class="btn-clear-history">{labels.clearHistory || 'Clear'}</button>
+  </div>
+  <div class="history-list" id="history-list">
+    <div class="history-empty" id="history-empty">{labels.noHistory || 'No spins yet.'}</div>
+  </div>
+</div>

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

@@ -0,0 +1,13 @@
+---
+interface Props {
+  labels: Record<string, string>;
+}
+
+const { labels } = Astro.props;
+---
+
+<div class="result-section">
+  <div id="result-display" class="result-display">
+    <div class="result-placeholder">{labels.noHistory || 'Spin to see result'}</div>
+  </div>
+</div>

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

@@ -0,0 +1,23 @@
+---
+interface Props {
+  labels: Record<string, string>;
+}
+
+const { labels } = Astro.props;
+const label = labels.title || 'Decision Wheel Spinner';
+---
+
+<div class="wheel-canvas-container">
+  <canvas id="wheel-canvas" class="wheel-canvas" width="300" height="300" role="img" aria-label={label}></canvas>
+</div>
+<button type="button" id="mute-btn" class="mute-btn" aria-label="Mute Sounds">
+  <svg class="sound-on-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
+    <path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path>
+  </svg>
+  <svg class="sound-off-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="display: none;">
+    <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
+    <line x1="23" y1="9" x2="17" y2="15"></line>
+    <line x1="17" y1="9" x2="23" y2="15"></line>
+  </svg>
+</button>