@jjlmoya/utils-tabletop 1.3.0 → 1.5.0

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>