@jjlmoya/utils-tabletop 1.11.0 → 1.13.0

package/src/tool/scatter-direction-selector/seo.astro

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

package/src/tool/scatter-direction-selector/settings.ts

@@ -0,0 +1,81 @@
+export class SettingsBinder {
+  private sectorsCount: number = 8;
+  private diceType: string = 'd6';
+  private maxCustomDist: number = 12;
+  private hitChance: number = 33;
+  private windDriftMode: boolean = false;
+
+  onSectorsChange: ((count: number) => void) | null = null;
+  onModeChange: ((wind: boolean) => void) | null = null;
+  onDiceChange: ((dice: string) => void) | null = null;
+  onCustomMaxChange: ((max: number) => void) | null = null;
+  onHitChanceChange: ((chance: number) => void) | null = null;
+
+  getSectors(): number { return this.sectorsCount; }
+  getDice(): string { return this.diceType; }
+  getMode(): boolean { return this.windDriftMode; }
+  getMaxDist(): number { return this.maxCustomDist; }
+  getHitChance(): number { return this.hitChance; }
+
+  bind(root: HTMLElement): void {
+    this.bindSectorToggle(root);
+    this.bindModeToggle(root);
+    this.bindDiceSelect(root);
+    this.bindCustomMax(root);
+    this.bindHitChance(root);
+  }
+
+  private bindSectorToggle(root: HTMLElement): void {
+    const btns = root.querySelectorAll('[data-sectors]');
+    btns.forEach((btn) => {
+      btn.addEventListener('click', () => {
+        btns.forEach((b) => b.classList.remove('active'));
+        btn.classList.add('active');
+        this.sectorsCount = parseInt(btn.getAttribute('data-sectors') || '8', 10);
+        this.onSectorsChange?.(this.sectorsCount);
+      });
+    });
+  }
+
+  private bindModeToggle(root: HTMLElement): void {
+    const btns = root.querySelectorAll('[data-mode]');
+    const hint = root.querySelector('#sds-wind-hint') as HTMLElement;
+    btns.forEach((btn) => {
+      btn.addEventListener('click', () => {
+        btns.forEach((b) => b.classList.remove('active'));
+        btn.classList.add('active');
+        this.windDriftMode = btn.getAttribute('data-mode') === 'wind';
+        hint.style.display = this.windDriftMode ? 'block' : 'none';
+        this.onModeChange?.(this.windDriftMode);
+      });
+    });
+  }
+
+  private bindDiceSelect(root: HTMLElement): void {
+    const select = root.querySelector('#sds-dice-select') as HTMLSelectElement;
+    select.addEventListener('change', () => {
+      this.diceType = select.value;
+      const wrap = root.querySelector('#sds-custom-dist-wrapper') as HTMLElement;
+      wrap.style.display = this.diceType === 'custom' ? 'block' : 'none';
+      this.onDiceChange?.(this.diceType);
+    });
+  }
+
+  private bindCustomMax(root: HTMLElement): void {
+    const input = root.querySelector('#sds-custom-max') as HTMLInputElement;
+    input.addEventListener('input', () => {
+      this.maxCustomDist = Math.max(1, parseInt(input.value, 10) || 12);
+      this.onCustomMaxChange?.(this.maxCustomDist);
+    });
+  }
+
+  private bindHitChance(root: HTMLElement): void {
+    const input = root.querySelector('#sds-hit-chance') as HTMLInputElement;
+    const display = root.querySelector('#sds-hit-chance-val') as HTMLElement;
+    input.addEventListener('input', () => {
+      this.hitChance = parseInt(input.value, 10);
+      display.textContent = `${this.hitChance}%`;
+      this.onHitChanceChange?.(this.hitChance);
+    });
+  }
+}

package/src/tool/scatter-direction-selector/sound.ts

@@ -0,0 +1,22 @@
+export class SoundManager {
+  private ctx: AudioContext | null = null;
+  enabled: boolean = true;
+
+  play(freq: number, type: OscillatorType, dur: number): void {
+    if (!this.enabled) return;
+    const ACtor = (window.AudioContext || (window as { webkitAudioContext?: typeof AudioContext }).webkitAudioContext) as typeof AudioContext;
+    if (!this.ctx) this.ctx = new ACtor();
+    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 = type;
+    osc.frequency.setValueAtTime(freq, this.ctx.currentTime);
+    gain.gain.setValueAtTime(0.08, this.ctx.currentTime);
+    gain.gain.exponentialRampToValueAtTime(0.001, this.ctx.currentTime + dur);
+    osc.start();
+    osc.stop(this.ctx.currentTime + dur);
+  }
+}

package/src/tools.ts

@@ -10,6 +10,7 @@ import { DECISION_WHEEL_TOOL } from './tool/decision-wheel';
 import { INVESTIGATION_BOARD_TOOL } from './tool/investigation-board';
 import { LUNAR_TIDE_TRACKER_TOOL } from './tool/lunar-tide-tracker';
 import { HIDDEN_ROLE_DEALER_TOOL } from './tool/hidden-role-dealer';
+import { SCATTER_DIRECTION_SELECTOR_TOOL } from './tool/scatter-direction-selector';
 
 export const ALL_TOOLS: ToolDefinition[] = [
   DICE_ROLLER_SIMULATOR_TOOL,
@@ -22,5 +23,6 @@ export const ALL_TOOLS: ToolDefinition[] = [
   INVESTIGATION_BOARD_TOOL,
   LUNAR_TIDE_TRACKER_TOOL,
   HIDDEN_ROLE_DEALER_TOOL,
+  SCATTER_DIRECTION_SELECTOR_TOOL,
 ];