@jjlmoya/utils-tabletop 1.3.0 → 1.4.0

package/src/tool/first-player-selector/modules/SelectionEngine.ts

@@ -0,0 +1,249 @@
+import type { ContactPoint, SelectionState, SelectorMode } from '../types';
+
+export class SelectionEngine {
+  private mode: SelectorMode = 'finger';
+  private state: SelectionState = 'idle';
+  private contacts: ContactPoint[] = [];
+  private winner: ContactPoint | null = null;
+
+  private countdownTimer = 0;
+  private readonly countdownDuration = 2000;
+
+  private wheelAngle = 0;
+  private wheelSpeed = 0;
+  private isSpinning = false;
+  private prevContactsCount = 0;
+
+  private onStateChange: (state: SelectionState) => void;
+  private onTick: () => void;
+  private onWinnerChosen: (winner: ContactPoint) => void;
+  private onCountdownStart: () => void;
+
+  constructor(
+    onStateChange: (state: SelectionState) => void,
+    onTick: () => void,
+    onWinnerChosen: (winner: ContactPoint) => void,
+    onCountdownStart: () => void
+  ) {
+    this.onStateChange = onStateChange;
+    this.onTick = onTick;
+    this.onWinnerChosen = onWinnerChosen;
+    this.onCountdownStart = onCountdownStart;
+  }
+
+  public setMode(mode: SelectorMode): void {
+    this.mode = mode;
+    this.reset();
+  }
+
+  public setContacts(contacts: ContactPoint[]): void {
+    const prevCount = this.prevContactsCount;
+    this.prevContactsCount = contacts.length;
+    this.contacts = contacts;
+
+    if (this.mode === 'finger') {
+      this.handleFingerContacts(contacts, prevCount);
+    }
+  }
+
+  private handleFingerContacts(contacts: ContactPoint[], prevCount: number): void {
+    if (this.state === 'celebration') {
+      this.handleCelebrationContacts(contacts, prevCount);
+      return;
+    }
+    this.handleActiveContacts(contacts, prevCount);
+  }
+
+  private handleCelebrationContacts(contacts: ContactPoint[], prevCount: number): void {
+    if (contacts.length === 0) {
+      this.reset();
+    } else if (contacts.length > prevCount) {
+      this.restartCountdown(contacts);
+    }
+  }
+
+  private handleActiveContacts(contacts: ContactPoint[], prevCount: number): void {
+    if (contacts.length < 2) {
+      if (this.state !== 'idle') {
+        this.setState('idle');
+        this.countdownTimer = 0;
+      }
+      return;
+    }
+
+    if (this.state === 'countdown' && contacts.length !== prevCount) {
+      this.countdownTimer = 0;
+      this.onCountdownStart();
+    } else if (this.state === 'idle') {
+      this.startCountdown();
+    }
+  }
+
+  private restartCountdown(contacts: ContactPoint[]): void {
+    this.reset();
+    this.contacts = contacts;
+    this.prevContactsCount = contacts.length;
+    this.setState('countdown');
+    this.countdownTimer = 0;
+    this.onCountdownStart();
+  }
+
+  private startCountdown(): void {
+    this.setState('countdown');
+    this.countdownTimer = 0;
+    this.onCountdownStart();
+  }
+
+  public startWheelSelection(): void {
+    if (this.mode !== 'wheel' || this.contacts.length < 2 || this.isSpinning) return;
+    this.winner = null;
+    this.contacts.forEach((c) => (c.isWinner = false));
+    this.setState('selecting');
+    this.isSpinning = true;
+    this.wheelSpeed = 0.3 + Math.random() * 0.2;
+    this.onCountdownStart();
+  }
+
+  public update(dt: number): void {
+    if (this.mode === 'finger') {
+      this.updateFinger(dt);
+    } else if (this.mode === 'wheel') {
+      this.updateWheel(dt);
+    }
+  }
+
+  private updateFinger(dt: number): void {
+    if (this.state !== 'countdown') return;
+
+    const prevSec = Math.floor(this.countdownTimer / 500);
+    this.countdownTimer += dt;
+    const currSec = Math.floor(this.countdownTimer / 500);
+
+    if (currSec > prevSec && this.countdownTimer < this.countdownDuration) {
+      this.onTick();
+    }
+
+    if (this.countdownTimer >= this.countdownDuration) {
+      this.chooseFingerWinner();
+    }
+  }
+
+  private updateWheel(dt: number): void {
+    if (this.state !== 'selecting' || !this.isSpinning) return;
+
+    this.wheelAngle += this.wheelSpeed * (dt / 16.666);
+    this.wheelSpeed *= Math.pow(0.97, dt / 16.666);
+
+    if (this.wheelSpeed < 0.002) {
+      this.isSpinning = false;
+      this.wheelSpeed = 0;
+      this.chooseWheelWinner();
+    }
+  }
+
+  public reset(): void {
+    this.state = 'idle';
+    this.winner = null;
+    this.contacts.forEach((c) => (c.isWinner = false));
+    this.countdownTimer = 0;
+    this.wheelAngle = 0;
+    this.wheelSpeed = 0;
+    this.isSpinning = false;
+    this.prevContactsCount = 0;
+    this.onStateChange(this.state);
+  }
+
+  public getState(): SelectionState {
+    return this.state;
+  }
+
+  public getCountdownProgress(): number {
+    return Math.min(1, this.countdownTimer / this.countdownDuration);
+  }
+
+  public getWheelAngle(): number {
+    return this.wheelAngle;
+  }
+
+  public getWinner(): ContactPoint | null {
+    return this.winner;
+  }
+
+  private setState(state: SelectionState): void {
+    this.state = state;
+    this.onStateChange(state);
+  }
+
+  private chooseFingerWinner(): void {
+    if (this.contacts.length < 2) {
+      this.reset();
+      return;
+    }
+
+    const winnerIndex = Math.floor(Math.random() * this.contacts.length);
+    const winContact = this.contacts[winnerIndex]!;
+    winContact.isWinner = true;
+    this.winner = winContact;
+    this.setState('celebration');
+    this.onWinnerChosen(winContact);
+  }
+
+  private chooseWheelWinner(): void {
+    if (this.contacts.length === 0) {
+      this.reset();
+      return;
+    }
+
+    const angle = this.normalizeAngle(this.wheelAngle);
+    const pointerAngle = 3 * Math.PI / 2;
+    const centroid = this.getCentroid();
+
+    const closestContact = this.findClosestContact(angle, pointerAngle, centroid);
+
+    closestContact.isWinner = true;
+    this.winner = closestContact;
+    this.setState('celebration');
+    this.onWinnerChosen(closestContact);
+  }
+
+  private normalizeAngle(a: number): number {
+    return ((a % (2 * Math.PI)) + 2 * Math.PI) % (2 * Math.PI);
+  }
+
+  private findClosestContact(angle: number, pointerAngle: number, centroid: { x: number; y: number }): ContactPoint {
+    let closestContact = this.contacts[0]!;
+    let minDiff = Infinity;
+
+    this.contacts.forEach((c) => {
+      const dx = c.x - centroid.x;
+      const dy = c.y - centroid.y;
+      let contactAngle = Math.atan2(dy, dx);
+      contactAngle = ((contactAngle + angle) % (2 * Math.PI) + 2 * Math.PI) % (2 * Math.PI);
+
+      let diff = Math.abs(contactAngle - pointerAngle);
+      if (diff > Math.PI) {
+        diff = 2 * Math.PI - diff;
+      }
+
+      if (diff < minDiff) {
+        minDiff = diff;
+        closestContact = c;
+      }
+    });
+
+    return closestContact;
+  }
+
+  public getCentroid(): { x: number; y: number } {
+    if (this.contacts.length === 0) {
+      return { x: 0, y: 0 };
+    }
+    let sumX = 0;
+    let sumY = 0;
+    this.contacts.forEach((c) => {
+      sumX += c.x;
+      sumY += c.y;
+    });
+    return { x: sumX / this.contacts.length, y: sumY / this.contacts.length };
+  }
+}

package/src/tool/first-player-selector/modules/SoundEffects.ts

@@ -0,0 +1,87 @@
+export class SoundEffects {
+  private ctx: AudioContext | null = null;
+  private isMuted = false;
+
+  public setMute(muted: boolean): void {
+    this.isMuted = muted;
+  }
+
+  private initCtx(): void {
+    if (!this.ctx) {
+      this.ctx = new (window.AudioContext || (window as unknown as { webkitAudioContext: typeof AudioContext }).webkitAudioContext)();
+    }
+    if (this.ctx.state === 'suspended') {
+      this.ctx.resume();
+    }
+  }
+
+  public playTick(): void {
+    if (this.isMuted) return;
+    this.initCtx();
+    if (!this.ctx) return;
+
+    const osc = this.ctx.createOscillator();
+    const gain = this.ctx.createGain();
+
+    osc.connect(gain);
+    gain.connect(this.ctx.destination);
+
+    osc.frequency.setValueAtTime(800, this.ctx.currentTime);
+    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 playCountdown(): void {
+    if (this.isMuted) return;
+    this.initCtx();
+    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(200, this.ctx.currentTime);
+    osc.frequency.exponentialRampToValueAtTime(600, this.ctx.currentTime + 1.5);
+
+    gain.gain.setValueAtTime(0.01, this.ctx.currentTime);
+    gain.gain.linearRampToValueAtTime(0.15, this.ctx.currentTime + 1.2);
+    gain.gain.exponentialRampToValueAtTime(0.01, this.ctx.currentTime + 1.5);
+
+    osc.start();
+    osc.stop(this.ctx.currentTime + 1.5);
+  }
+
+  public playWinner(): void {
+    if (this.isMuted) return;
+    this.initCtx();
+    if (!this.ctx) return;
+
+    const now = this.ctx.currentTime;
+    const notes = [261.63, 329.63, 392.00, 523.25];
+
+    notes.forEach((freq, index) => {
+      if (!this.ctx) return;
+      const osc = this.ctx.createOscillator();
+      const gain = this.ctx.createGain();
+
+      osc.connect(gain);
+      gain.connect(this.ctx.destination);
+
+      osc.type = 'sine';
+      osc.frequency.setValueAtTime(freq, now + index * 0.1);
+      
+      gain.gain.setValueAtTime(0.001, now + index * 0.1);
+      gain.gain.exponentialRampToValueAtTime(0.2, now + index * 0.1 + 0.02);
+      gain.gain.exponentialRampToValueAtTime(0.001, now + index * 0.1 + 0.6);
+
+      osc.start(now + index * 0.1);
+      osc.stop(now + index * 0.1 + 0.6);
+    });
+  }
+}

package/src/tool/first-player-selector/modules/TouchTracker.ts

@@ -0,0 +1,148 @@
+import type { ContactPoint, SelectorMode } from '../types';
+
+export class TouchTracker {
+  private canvas: HTMLCanvasElement;
+  private mode: SelectorMode = 'finger';
+  private contacts: ContactPoint[] = [];
+  private onContactsChange: (contacts: ContactPoint[]) => void;
+
+  private colors = [
+    '#E11D48',
+    '#2563EB',
+    '#16A34A',
+    '#D97706',
+    '#7C3AED',
+    '#0891B2',
+    '#DB2777',
+    '#EA580C',
+    '#4F46E5',
+    '#65A30D'
+  ];
+
+  constructor(canvas: HTMLCanvasElement, onContactsChange: (contacts: ContactPoint[]) => void) {
+    this.canvas = canvas;
+    this.onContactsChange = onContactsChange;
+    this.initEvents();
+  }
+
+  public setMode(mode: SelectorMode): void {
+    this.mode = mode;
+    this.contacts = [];
+    this.onContactsChange(this.contacts);
+  }
+
+  public getContacts(): ContactPoint[] {
+    return this.contacts;
+  }
+
+  public clear(): void {
+    this.contacts = [];
+    this.onContactsChange(this.contacts);
+  }
+
+  public setContacts(contacts: ContactPoint[]): void {
+    this.contacts = contacts;
+    this.onContactsChange(this.contacts);
+  }
+
+  private initEvents(): void {
+    this.canvas.addEventListener('touchstart', (e) => this.handleTouchStart(e), { passive: false });
+    this.canvas.addEventListener('touchmove', (e) => this.handleTouchMove(e), { passive: false });
+    this.canvas.addEventListener('touchend', (e) => this.handleTouchEnd(e));
+    this.canvas.addEventListener('touchcancel', (e) => this.handleTouchEnd(e));
+    this.canvas.addEventListener('mousedown', (e) => this.handleMouseDown(e));
+  }
+
+  private handleTouchStart(e: TouchEvent): void {
+    e.preventDefault();
+    if (this.mode !== 'finger') return;
+
+    const rect = this.canvas.getBoundingClientRect();
+    const activeIds = new Set<string>();
+
+    for (let i = 0; i < e.touches.length; i++) {
+      const touch = e.touches[i]!;
+      const id = `touch-${touch.identifier}`;
+      activeIds.add(id);
+
+      const x = touch.clientX - rect.left;
+      const y = touch.clientY - rect.top;
+
+      const existingIndex = this.contacts.findIndex((c) => c.id === id);
+      if (existingIndex > -1) {
+        this.contacts[existingIndex]!.x = x;
+        this.contacts[existingIndex]!.y = y;
+      } else {
+        const color = this.getNextColor();
+        this.contacts.push({ id, x, y, color });
+      }
+    }
+
+    this.contacts = this.contacts.filter((c) => c.id.startsWith('sim-') || activeIds.has(c.id));
+    this.onContactsChange(this.contacts);
+  }
+
+  private handleTouchMove(e: TouchEvent): void {
+    e.preventDefault();
+    if (this.mode !== 'finger') return;
+
+    const rect = this.canvas.getBoundingClientRect();
+    for (let i = 0; i < e.touches.length; i++) {
+      const touch = e.touches[i]!;
+      const id = `touch-${touch.identifier}`;
+      const contact = this.contacts.find((c) => c.id === id);
+      if (contact) {
+        contact.x = touch.clientX - rect.left;
+        contact.y = touch.clientY - rect.top;
+      }
+    }
+
+    this.onContactsChange(this.contacts);
+  }
+
+  private handleTouchEnd(e: TouchEvent): void {
+    if (this.mode !== 'finger') return;
+
+    const activeIds = new Set<string>();
+    for (let i = 0; i < e.touches.length; i++) {
+      activeIds.add(`touch-${e.touches[i]!.identifier}`);
+    }
+
+    this.contacts = this.contacts.filter((c) => c.id.startsWith('sim-') || activeIds.has(c.id));
+    this.onContactsChange(this.contacts);
+  }
+
+  private handleMouseDown(e: MouseEvent): void {
+    const rect = this.canvas.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+
+    const existingIndex = this.contacts.findIndex((c) => {
+      const dx = c.x - x;
+      const dy = c.y - y;
+      return Math.sqrt(dx * dx + dy * dy) < 30;
+    });
+
+    if (existingIndex > -1) {
+      this.contacts.splice(existingIndex, 1);
+      this.onContactsChange(this.contacts);
+      return;
+    }
+
+    if (this.contacts.length >= 10) return;
+
+    const id = this.mode === 'finger' ? `sim-${Date.now()}` : `pin-${Date.now()}`;
+    const color = this.getNextColor();
+    this.contacts.push({ id, x, y, color });
+    this.onContactsChange(this.contacts);
+  }
+
+  private getNextColor(): string {
+    const usedColors = this.contacts.map((c) => c.color);
+    const available = this.colors.filter((c) => !usedColors.includes(c));
+    if (available.length > 0) {
+      return available[0];
+    }
+    return this.colors[this.contacts.length % this.colors.length];
+  }
+}

package/src/tool/first-player-selector/seo.astro

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

package/src/tool/first-player-selector/types.ts

@@ -0,0 +1,21 @@
+export type SelectorMode = 'finger' | 'wheel';
+
+export type SelectionState = 'idle' | 'waiting' | 'countdown' | 'selecting' | 'celebration';
+
+export interface ContactPoint {
+  id: string;
+  x: number;
+  y: number;
+  color: string;
+  isWinner?: boolean;
+}
+
+export interface Particle {
+  x: number;
+  y: number;
+  vx: number;
+  vy: number;
+  radius: number;
+  color: string;
+  alpha: number;
+}

package/src/tools.ts

@@ -2,8 +2,10 @@ export { ALL_ENTRIES } from './entries';
 import type { ToolDefinition } from './types';
 import { DICE_ROLLER_SIMULATOR_TOOL } from './tool/dice-roller-simulator';
 import { BOARD_GAME_TIMER_TOOL } from './tool/board-game-timer';
+import { FIRST_PLAYER_SELECTOR_TOOL } from './tool/first-player-selector';
 
 export const ALL_TOOLS: ToolDefinition[] = [
   DICE_ROLLER_SIMULATOR_TOOL,
   BOARD_GAME_TIMER_TOOL,
+  FIRST_PLAYER_SELECTOR_TOOL,
 ];

package/src/types.ts

@@ -1,5 +1,4 @@
 import type { SEOSection } from '@jjlmoya/utils-shared';
-import type { WithContext, Thing } from 'schema-dts';
 
 export type { SEOSection };
 
@@ -32,7 +31,7 @@ export interface ToolLocaleContent<TUI extends Record<string, string> = Record<s
   faq: FAQItem[];
   bibliography: BibliographyEntry[];
   howTo: HowToStep[];
-  schemas: WithContext<Thing>[];
+  schemas: Record<string, unknown>[];
 }
 
 export interface CategoryLocaleContent {