@jjlmoya/utils-tabletop 1.3.0

package/src/tool/board-game-timer/modules/SetupPanelManager.ts

@@ -0,0 +1,209 @@
+import type { GameState } from './GameState';
+import type { TimeControlMode, PlayerColor, PlayerConfig } from '../types';
+
+export class SetupPanelManager {
+  private state: GameState;
+  private onStart: () => void;
+
+  private minsInput: HTMLInputElement;
+  private secsInput: HTMLInputElement;
+  private modeSelect: HTMLSelectElement;
+  private incrementInput: HTMLInputElement;
+  private warningInput: HTMLInputElement;
+  private soundToggle: HTMLInputElement;
+  private nameInput: HTMLInputElement;
+  private listContainer: HTMLElement;
+  private hintEl: HTMLElement;
+  private countBadge: HTMLElement;
+  private startBtn: HTMLButtonElement;
+
+  constructor(state: GameState, onStart: () => void) {
+    this.state = state;
+    this.onStart = onStart;
+
+    this.minsInput = document.getElementById('setting-mins') as HTMLInputElement;
+    this.secsInput = document.getElementById('setting-secs') as HTMLInputElement;
+    this.modeSelect = document.getElementById('setting-mode') as HTMLSelectElement;
+    this.incrementInput = document.getElementById('setting-increment') as HTMLInputElement;
+    this.warningInput = document.getElementById('setting-warning') as HTMLInputElement;
+    this.soundToggle = document.getElementById('toggle-sound') as HTMLInputElement;
+    this.nameInput = document.getElementById('new-player-name') as HTMLInputElement;
+    this.listContainer = document.getElementById('player-list-container') as HTMLElement;
+    this.hintEl = document.getElementById('empty-players-hint') as HTMLElement;
+    this.countBadge = document.getElementById('player-count') as HTMLElement;
+    this.startBtn = document.getElementById('start-game-btn') as HTMLButtonElement;
+
+    this.initEvents();
+    this.render();
+  }
+
+  private initEvents() {
+    this.modeSelect.addEventListener('change', () => this.updateIncrementVisibility());
+    this.updateIncrementVisibility();
+    this.initPresets();
+    this.initAdjusters();
+    this.initColorPicker();
+    this.initPlayerActions();
+  }
+
+  private updateIncrementVisibility() {
+    const val = this.modeSelect.value;
+    const targets = document.querySelectorAll('.active-fischer, .active-bronstein');
+    targets.forEach(t => {
+      (t as HTMLElement).style.display = (val === 'fischer' || val === 'bronstein') ? 'flex' : 'none';
+    });
+  }
+
+  private initPresets() {
+    const presets = document.querySelectorAll('.preset-card');
+    presets.forEach(preset => {
+      preset.addEventListener('click', () => {
+        presets.forEach(p => p.classList.remove('active'));
+        preset.classList.add('active');
+        this.applyPreset(preset);
+      });
+    });
+  }
+
+  private applyPreset(preset: Element) {
+    const presetId = preset.getAttribute('data-preset');
+    if (presetId === 'custom') return;
+    const mode = preset.getAttribute('data-mode') || 'normal';
+    const time = parseInt(preset.getAttribute('data-time') || '120');
+    const inc = parseInt(preset.getAttribute('data-increment') || '0');
+
+    this.modeSelect.value = mode;
+    this.minsInput.value = Math.floor(time / 60).toString();
+    this.secsInput.value = (time % 60).toString();
+    this.incrementInput.value = inc.toString();
+    this.updateIncrementVisibility();
+  }
+
+  private initAdjusters() {
+    document.querySelector('.dec-min')?.addEventListener('click', () => this.adjustMins(-1));
+    document.querySelector('.inc-min')?.addEventListener('click', () => this.adjustMins(1));
+    document.querySelector('.dec-sec')?.addEventListener('click', () => this.adjustSecs(-5));
+    document.querySelector('.inc-sec')?.addEventListener('click', () => this.adjustSecs(5));
+  }
+
+  private adjustMins(diff: number) {
+    const val = Math.max(0, Math.min(99, (parseInt(this.minsInput.value) || 0) + diff));
+    this.minsInput.value = val.toString();
+  }
+
+  private adjustSecs(diff: number) {
+    const val = Math.max(0, Math.min(59, (parseInt(this.secsInput.value) || 0) + diff));
+    this.secsInput.value = val.toString();
+  }
+
+  private initColorPicker() {
+    const dots = document.querySelectorAll('.color-dot');
+    dots.forEach(dot => {
+      if (dot.getAttribute('data-color') === this.state.selectedColor) {
+        dot.classList.add('active');
+      }
+      dot.addEventListener('click', () => {
+        dots.forEach(d => d.classList.remove('active'));
+        dot.classList.add('active');
+        this.state.selectedColor = dot.getAttribute('data-color') as PlayerColor;
+      });
+    });
+  }
+
+  private initPlayerActions() {
+    const addBtn = document.getElementById('add-player-btn');
+    addBtn?.addEventListener('click', () => this.addPlayer());
+    this.nameInput.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') this.addPlayer();
+    });
+    this.startBtn.addEventListener('click', () => {
+      this.state.sound.setEnabled(this.soundToggle.checked);
+      this.state.recreateEngine({
+        mode: this.modeSelect.value as TimeControlMode,
+        increment: parseInt(this.incrementInput.value) || 0,
+        delay: parseInt(this.incrementInput.value) || 0,
+        warningTime: parseInt(this.warningInput.value) || 30
+      });
+      this.onStart();
+    });
+  }
+
+  public getBaseDuration(): number {
+    const mins = parseInt(this.minsInput.value) || 0;
+    const secs = parseInt(this.secsInput.value) || 0;
+    return Math.max(1, mins * 60 + secs);
+  }
+
+  private addPlayer() {
+    const name = this.nameInput.value.trim();
+    if (!name) return;
+    this.state.players.push({
+      id: `p-${Date.now()}-${Math.random().toString(36).substr(2, 4)}`,
+      name,
+      color: this.state.selectedColor,
+      time: this.getBaseDuration()
+    });
+    this.nameInput.value = '';
+    this.state.savePlayers();
+    this.render();
+  }
+
+  public render() {
+    this.listContainer.innerHTML = '';
+    const hasPlayers = this.state.players.length > 0;
+    this.hintEl.style.display = hasPlayers ? 'none' : 'flex';
+    this.countBadge.textContent = this.state.players.length.toString();
+    this.startBtn.disabled = this.state.players.length < 2;
+
+    this.state.players.forEach((p, idx) => {
+      const row = this.createPlayerRow(p, idx);
+      this.listContainer.appendChild(row);
+    });
+  }
+
+  private createPlayerRow(p: PlayerConfig, idx: number): HTMLElement {
+    const row = document.createElement('div');
+    row.className = 'player-row';
+    row.innerHTML = `
+      <div class="player-info-meta">
+        <div class="player-badge-color" style="background-color: var(--color-${p.color}, ${p.color})"></div>
+        <span class="player-row-name">${p.name}</span>
+      </div>
+      <div class="player-row-actions">
+        <button type="button" class="btn-action order-up" data-index="${idx}">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 15l-6-6-6 6"/></svg>
+        </button>
+        <button type="button" class="btn-action order-down" data-index="${idx}">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>
+        </button>
+        <button type="button" class="btn-action danger delete-player" data-index="${idx}">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
+        </button>
+      </div>
+    `;
+    this.bindRowEvents(row, idx);
+    return row;
+  }
+
+  private bindRowEvents(row: HTMLElement, idx: number) {
+    row.querySelector('.delete-player')?.addEventListener('click', () => {
+      this.state.players.splice(idx, 1);
+      this.state.savePlayers();
+      this.render();
+    });
+    row.querySelector('.order-up')?.addEventListener('click', () => {
+      if (idx > 0) this.swapPlayers(idx, idx - 1);
+    });
+    row.querySelector('.order-down')?.addEventListener('click', () => {
+      if (idx < this.state.players.length - 1) this.swapPlayers(idx, idx + 1);
+    });
+  }
+
+  private swapPlayers(i: number, j: number) {
+    const temp = this.state.players[i];
+    this.state.players[i] = this.state.players[j];
+    this.state.players[j] = temp;
+    this.state.savePlayers();
+    this.render();
+  }
+}

package/src/tool/board-game-timer/modules/SoundManager.ts

@@ -0,0 +1,109 @@
+export class SoundManager {
+  private ctx: AudioContext | null = null;
+  private isEnabled: boolean = true;
+
+  constructor() {
+    this.ctx = null;
+  }
+
+  private initCtx() {
+    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 setEnabled(enabled: boolean) {
+    this.isEnabled = enabled;
+  }
+
+  public playTick() {
+    if (!this.isEnabled) 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.05, this.ctx.currentTime);
+    gain.gain.exponentialRampToValueAtTime(0.001, this.ctx.currentTime + 0.05);
+
+    osc.start();
+    osc.stop(this.ctx.currentTime + 0.05);
+  }
+
+  public playWarning() {
+    if (!this.isEnabled) 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(1200, this.ctx.currentTime);
+    gain.gain.setValueAtTime(0.1, this.ctx.currentTime);
+    gain.gain.exponentialRampToValueAtTime(0.001, this.ctx.currentTime + 0.15);
+
+    osc.start();
+    osc.stop(this.ctx.currentTime + 0.15);
+  }
+
+  public playTurn() {
+    if (!this.isEnabled) return;
+    this.initCtx();
+    if (!this.ctx) return;
+
+    const now = this.ctx.currentTime;
+    const osc1 = this.ctx.createOscillator();
+    const osc2 = this.ctx.createOscillator();
+    const gain = this.ctx.createGain();
+
+    osc1.connect(gain);
+    osc2.connect(gain);
+    gain.connect(this.ctx.destination);
+
+    osc1.frequency.setValueAtTime(600, now);
+    osc2.frequency.setValueAtTime(900, now + 0.06);
+
+    gain.gain.setValueAtTime(0.1, now);
+    gain.gain.exponentialRampToValueAtTime(0.001, now + 0.2);
+
+    osc1.start(now);
+    osc1.stop(now + 0.06);
+
+    osc2.start(now + 0.06);
+    osc2.stop(now + 0.2);
+  }
+
+  public playTimeUp() {
+    if (!this.isEnabled) return;
+    this.initCtx();
+    if (!this.ctx) return;
+
+    const now = this.ctx.currentTime;
+    const osc = this.ctx.createOscillator();
+    const gain = this.ctx.createGain();
+
+    osc.connect(gain);
+    gain.connect(this.ctx.destination);
+
+    osc.type = 'sawtooth';
+    osc.frequency.setValueAtTime(300, now);
+    osc.frequency.linearRampToValueAtTime(150, now + 0.8);
+
+    gain.gain.setValueAtTime(0.15, now);
+    gain.gain.exponentialRampToValueAtTime(0.001, now + 0.8);
+
+    osc.start();
+    osc.stop(now + 0.8);
+  }
+}

package/src/tool/board-game-timer/modules/SpeechManager.ts

@@ -0,0 +1 @@
+export {};

package/src/tool/board-game-timer/modules/StatsManager.ts

@@ -0,0 +1,87 @@
+export interface TurnRecord {
+  playerId: string;
+  round: number;
+  duration: number;
+}
+
+export class StatsManager {
+  private startTime: number = 0;
+  private endTime: number = 0;
+  private turns: TurnRecord[] = [];
+  private currentTurnStart: number = 0;
+
+  public start() {
+    this.startTime = Date.now();
+    this.turns = [];
+    this.currentTurnStart = 0;
+  }
+
+  public end() {
+    this.endTime = Date.now();
+  }
+
+  public startTurn() {
+    this.currentTurnStart = Date.now();
+  }
+
+  public endTurn(playerId: string, round: number) {
+    if (this.currentTurnStart === 0) return;
+    const duration = (Date.now() - this.currentTurnStart) / 1000;
+    this.turns.push({ playerId, round, duration: +duration.toFixed(2) });
+    this.currentTurnStart = 0;
+  }
+
+  public pauseTurn() {
+    if (this.currentTurnStart === 0) return;
+    const elapsed = (Date.now() - this.currentTurnStart) / 1000;
+    this.currentTurnStart = Date.now();
+    return elapsed;
+  }
+
+  public resumeTurn() {
+    this.currentTurnStart = Date.now();
+  }
+
+  public getTotalElapsedTime(): number {
+    const end = this.endTime || Date.now();
+    return (end - this.startTime) / 1000;
+  }
+
+  public getPlayerStats(playerId: string) {
+    const playerTurns = this.turns.filter(t => t.playerId === playerId);
+    if (playerTurns.length === 0) {
+      return { total: 0, average: 0, max: 0, count: 0 };
+    }
+    const total = playerTurns.reduce((acc, t) => acc + t.duration, 0);
+    const max = Math.max(...playerTurns.map(t => t.duration));
+    const average = total / playerTurns.length;
+    return {
+      total: +total.toFixed(2),
+      average: +average.toFixed(2),
+      max: +max.toFixed(2),
+      count: playerTurns.length
+    };
+  }
+
+  public getSlowestPlayerId(playerIds: string[]): string | null {
+    let slowestId: string | null = null;
+    let maxAvg = -1;
+    for (const id of playerIds) {
+      const stats = this.getPlayerStats(id);
+      if (stats.count > 0 && stats.average > maxAvg) {
+        maxAvg = stats.average;
+        slowestId = id;
+      }
+    }
+    return slowestId;
+  }
+
+  public getRanking(playerIds: string[]) {
+    return playerIds
+      .map(id => ({
+        id,
+        ...this.getPlayerStats(id)
+      }))
+      .sort((a, b) => b.average - a.average);
+  }
+}

package/src/tool/board-game-timer/modules/StatsModalManager.ts

@@ -0,0 +1,74 @@
+import type { GameState } from './GameState';
+import type { PlayerConfig } from '../types';
+
+import { formatTime, formatFullTime } from './FormatHelper';
+import { spawnConfetti } from './particles';
+
+export class StatsModalManager {
+  private state: GameState;
+  private statsModal: HTMLElement;
+  private onRestart: () => void;
+
+  constructor(state: GameState, onRestart: () => void) {
+    this.state = state;
+    this.onRestart = onRestart;
+    this.statsModal = document.getElementById('stats-modal') as HTMLElement;
+    this.initEvents();
+  }
+
+  private initEvents() {
+    document.getElementById('stats-close-btn')?.addEventListener('click', () => {
+      this.statsModal.style.display = 'none';
+    });
+    document.getElementById('stats-restart-btn')?.addEventListener('click', () => {
+      this.statsModal.style.display = 'none';
+      this.onRestart();
+    });
+  }
+
+  public show(roundNumber: number) {
+    this.state.engine.pauseAll();
+    this.state.stats.end();
+    this.statsModal.style.display = 'flex';
+
+    document.getElementById('stats-total-time')!.textContent = formatFullTime(this.state.stats.getTotalElapsedTime());
+    document.getElementById('stats-total-rounds')!.textContent = roundNumber.toString();
+
+    const slowestId = this.state.stats.getSlowestPlayerId(this.state.players.map(p => p.id));
+    const slowestPlayer = this.state.players.find(p => p.id === slowestId);
+    document.getElementById('stats-slowest-player')!.textContent = slowestPlayer ? slowestPlayer.name : '-';
+
+    this.renderRankingList();
+
+    const statsCard = this.statsModal.querySelector('.stats-modal-card') as HTMLElement;
+    if (statsCard) spawnConfetti(statsCard, 60);
+  }
+
+  private renderRankingList() {
+    const ranking = this.state.stats.getRanking(this.state.players.map(p => p.id));
+    const container = document.getElementById('stats-players-ranking') as HTMLElement;
+    container.innerHTML = '';
+
+    const maxAvg = Math.max(...ranking.map(r => r.average), 1);
+    ranking.forEach(r => {
+      const p = this.state.players.find(x => x.id === r.id);
+      if (p) this.appendRankingRow(container, p, r, maxAvg);
+    });
+  }
+
+  private appendRankingRow(container: HTMLElement, p: PlayerConfig, r: { id: string; average: number; max: number }, maxAvg: number) {
+    const pct = (r.average / maxAvg) * 100;
+    const row = document.createElement('div');
+    row.className = 'ranking-row';
+    row.innerHTML = `
+      <div class="ranking-info">
+        <span style="color: var(--color-text-${p.color})">${p.name}</span>
+        <span>Avg: ${formatTime(r.average)} (Max: ${formatTime(r.max)})</span>
+      </div>
+      <div class="ranking-bar-outer">
+        <div class="ranking-bar-inner" style="width: ${pct}%; background-color: var(--color-${p.color})"></div>
+      </div>
+    `;
+    container.appendChild(row);
+  }
+}

package/src/tool/board-game-timer/modules/TimerEngine.ts

@@ -0,0 +1,175 @@
+import type { TimerState, TimerEngine, TimerConfig } from '../types';
+import { createTimerState, addTimerTime, removeTimerTime } from './TimerStateHelper';
+import { TimerEngineClock } from './TimerEngineClock';
+
+export class TimerEngineImpl extends TimerEngineClock implements TimerEngine {
+  constructor(config?: TimerConfig) {
+    super(config);
+  }
+
+  public create(id: string, label: string, duration: number) {
+    this.timers.set(id, createTimerState(id, label, duration));
+  }
+
+  private pauseActiveTimer(active: TimerState) {
+    if (active.status !== 'running' && active.status !== 'overtime') {
+      return;
+    }
+    const now = this.getNow();
+    const elapsed = (now - (active._lastTickAt ?? now)) / 1000;
+    if (active.remaining <= 0) {
+      active.overtime = +(active.overtime + elapsed).toFixed(3);
+    } else {
+      active.remaining = Math.max(0, +(active.remaining - elapsed).toFixed(3));
+    }
+    active._lastTickAt = 0;
+    active.status = 'paused';
+    if (this.currentMode === 'fischer') {
+      active.remaining = +(active.remaining + this.currentIncrement).toFixed(3);
+    }
+  }
+
+  public start(id: string) {
+    const t = this.timers.get(id);
+    if (!t || !this.canStart(t)) return;
+    this.switchActiveTimer(id);
+    this.setupTurnRemaining(t);
+    t._lastTickAt = this.getNow();
+    t.status = 'running';
+    this.activeId = id;
+    this.delayRemaining = this.currentDelay;
+    this.startClock();
+  }
+
+  private canStart(t: TimerState): boolean {
+    return t.status === 'idle' || t.status === 'paused';
+  }
+
+  private switchActiveTimer(id: string) {
+    if (this.activeId && this.activeId !== id) {
+      const active = this.timers.get(this.activeId);
+      if (active) this.pauseActiveTimer(active);
+    }
+  }
+
+  private setupTurnRemaining(t: TimerState) {
+    if (this.currentMode === 'turn' && t.status === 'idle') {
+      t.remaining = t.initialDuration;
+    }
+  }
+
+  public pause(id: string) {
+    const t = this.timers.get(id);
+    if (!t || (t.status !== 'running' && t.status !== 'overtime')) {
+      return;
+    }
+    if (this.activeId === id) {
+      this.pauseActiveTimer(t);
+      this.activeId = undefined;
+      this.stopClock();
+    } else {
+      t.status = 'paused';
+    }
+  }
+
+  public resume(id: string) {
+    const t = this.timers.get(id);
+    if (t && t.status === 'paused') {
+      this.start(id);
+    }
+  }
+
+  public reset(id: string) {
+    const t = this.timers.get(id);
+    if (!t) return;
+    const wasActive = (t.status === 'running' || t.status === 'overtime') && this.activeId === id;
+    t.remaining = t.initialDuration;
+    t.overtime = 0;
+    t.roundsPlayed = 0;
+    t.status = 'idle';
+    t._lastTickAt = 0;
+    if (wasActive) {
+      this.activeId = undefined;
+      this.stopClock();
+    }
+  }
+
+  public addTime(id: string, seconds: number) {
+    const t = this.timers.get(id);
+    if (t) {
+      addTimerTime(t, seconds);
+    }
+  }
+
+  public removeTime(id: string, seconds: number) {
+    const t = this.timers.get(id);
+    if (t) {
+      removeTimerTime(t, seconds, () => this.notifyExpired(id));
+    }
+  }
+
+  public switchTurn(nextId: string) {
+    if (this.activeId) {
+      const current = this.timers.get(this.activeId);
+      if (current) this.pauseActiveTimer(current);
+    }
+    const next = this.timers.get(nextId);
+    if (!next || next.status === 'expired') {
+      return;
+    }
+    if (next.status === 'idle' || next.status === 'paused') {
+      this.startNextPlayer(next);
+    }
+  }
+
+  private startNextPlayer(next: TimerState) {
+    if (this.currentMode === 'turn') {
+      next.remaining = next.initialDuration;
+    }
+    next._lastTickAt = this.getNow();
+    next.status = 'running';
+    next.roundsPlayed += 1;
+    this.activeId = next.id;
+    this.delayRemaining = this.currentDelay;
+    this.startClock();
+  }
+
+  public switchToNextPlayer(playerIds: string[], currentIndex: number) {
+    const nextIndex = (currentIndex + 1) % playerIds.length;
+    const nextId = playerIds[nextIndex];
+    return { nextId, nextIndex };
+  }
+
+  public pauseAll() {
+    if (this.activeId) {
+      const active = this.timers.get(this.activeId);
+      if (active) this.pauseActiveTimer(active);
+    }
+    this.stopClock();
+    this.activeId = undefined;
+  }
+
+  public resumeAll(playerIds: string[], activeIndex: number) {
+    const id = playerIds[activeIndex];
+    if (id) this.resume(id);
+  }
+
+  public destroyTimer(id: string) {
+    const t = this.timers.get(id);
+    if (!t) return;
+    if (this.activeId === id) {
+      this.activeId = undefined;
+      this.stopClock();
+    }
+    this.timers.delete(id);
+  }
+
+  public destroy() {
+    this.stopClock();
+    this.timers.clear();
+    this.expiredCallbacks = [];
+    this.tickCallbacks = [];
+    this.warningCallbacks = [];
+    this.activeId = undefined;
+  }
+}