@jjlmoya/utils-tabletop 1.3.0

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

@@ -0,0 +1,120 @@
+import type { GameState } from './GameState';
+import { getContrastColorForBackground } from './ColorHelper';
+import { formatTime } from './FormatHelper';
+import { spawnTurnBurst, spawnExpiredBurst, spawnRippleEffect, spawnDigitSparkle, spawnWarningFlash } from './particles';
+
+export class DuelViewManager {
+  private state: GameState;
+  private duelPanel: HTMLElement;
+
+  constructor(state: GameState) {
+    this.state = state;
+    this.duelPanel = document.getElementById('duel-timer-panel') as HTMLElement;
+    this.initEvents();
+  }
+
+  private initEvents() {
+    const rotateBtns = document.querySelectorAll('.side-rotate-btn');
+    rotateBtns.forEach(btn => {
+      btn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        btn.closest('.duel-player-side')?.classList.toggle('rotated');
+      });
+    });
+    document.getElementById('duel-p1')?.addEventListener('click', () => this.handleDuelClick(0, 1));
+    document.getElementById('duel-p2')?.addEventListener('click', () => this.handleDuelClick(1, 0));
+  }
+
+  private handleDuelClick(currIdx: number, nextIdx: number) {
+    if (this.state.isPaused) return;
+    if (this.state.engine.activeTimerId === this.state.players[currIdx].id) {
+      this.state.sound.playTurn();
+      this.state.stats.endTurn(this.state.players[currIdx].id, this.state.roundNumber);
+      this.state.engine.switchTurn(this.state.players[nextIdx].id);
+      if (currIdx === 1) {
+        this.state.roundNumber++;
+        document.getElementById('duel-round-number')!.textContent = this.state.roundNumber.toString();
+      }
+      this.state.stats.startTurn();
+      this.update();
+
+      const nextSide = document.getElementById(`duel-p${nextIdx + 1}`) as HTMLElement;
+      if (nextSide) {
+        spawnTurnBurst(nextSide, `var(--color-${this.state.players[nextIdx].color})`);
+        spawnRippleEffect(nextSide.querySelector('.duel-ripple-effect') || nextSide);
+      }
+    }
+  }
+
+  public initView() {
+    this.duelPanel.style.display = 'grid';
+    const p1 = this.state.players[0];
+    const p2 = this.state.players[1];
+    const d1 = document.getElementById('duel-p1') as HTMLElement;
+    const d2 = document.getElementById('duel-p2') as HTMLElement;
+    d1.setAttribute('data-player-id', p1.id);
+    d2.setAttribute('data-player-id', p2.id);
+    d1.style.background = `var(--color-${p1.color})`;
+    d1.style.color = getContrastColorForBackground(p1.color);
+    d2.style.background = `var(--color-${p2.color})`;
+    d2.style.color = getContrastColorForBackground(p2.color);
+    document.getElementById('duel-p1-name')!.textContent = p1.name;
+    document.getElementById('duel-p2-name')!.textContent = p2.name;
+    document.getElementById('duel-round-number')!.textContent = '1';
+    document.getElementById('duel-paused-overlay')!.style.display = 'none';
+    d1.classList.remove('rotated');
+    d2.classList.remove('rotated');
+    this.update();
+  }
+
+  private updateSide(p: { id: string }, t: { remaining: number; status: string; roundsPlayed: number }, els: { side: HTMLElement; time: HTMLElement; status: HTMLElement }) {
+    const prev = els.time.textContent;
+    els.time.textContent = formatTime(t.remaining);
+    if (prev !== els.time.textContent) spawnDigitSparkle(els.time);
+
+    const rotated = els.side.classList.contains('rotated');
+    els.side.className = `duel-player-side ${t.status}`;
+    if (rotated) els.side.classList.add('rotated');
+    if (this.state.engine.activeTimerId === p.id) els.side.classList.add('active');
+
+    els.status.textContent = t.status.toUpperCase();
+    els.status.className = 'side-status-badge';
+    if (t.status === 'overtime') {
+      els.status.classList.add('warning');
+      spawnExpiredBurst(els.side);
+    }
+  }
+
+  public update() {
+    const p1 = this.state.players[0];
+    const p2 = this.state.players[1];
+    const t1 = this.state.engine.getTimer(p1.id);
+    const t2 = this.state.engine.getTimer(p2.id);
+    if (!t1 || !t2) return;
+
+    const d1 = document.getElementById('duel-p1') as HTMLElement;
+    const d2 = document.getElementById('duel-p2') as HTMLElement;
+
+    document.getElementById('duel-p1-rounds')!.textContent = `Turns: ${t1.roundsPlayed}`;
+    document.getElementById('duel-p2-rounds')!.textContent = `Turns: ${t2.roundsPlayed}`;
+
+    this.updateSide(p1, t1, { side: d1, time: document.getElementById('duel-p1-timer') as HTMLElement, status: document.getElementById('duel-p1-status') as HTMLElement });
+    this.updateSide(p2, t2, { side: d2, time: document.getElementById('duel-p2-timer') as HTMLElement, status: document.getElementById('duel-p2-status') as HTMLElement });
+  }
+
+  public triggerWarning(playerId: string) {
+    if (this.state.players[0]?.id === playerId) {
+      spawnWarningFlash(document.getElementById('duel-p1') as HTMLElement);
+    } else if (this.state.players[1]?.id === playerId) {
+      spawnWarningFlash(document.getElementById('duel-p2') as HTMLElement);
+    }
+  }
+
+  public triggerExpired(playerId: string) {
+    if (this.state.players[0]?.id === playerId) {
+      spawnExpiredBurst(document.getElementById('duel-p1') as HTMLElement);
+    } else if (this.state.players[1]?.id === playerId) {
+      spawnExpiredBurst(document.getElementById('duel-p2') as HTMLElement);
+    }
+  }
+}

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

@@ -0,0 +1,12 @@
+export function formatTime(seconds: number): string {
+  const m = Math.floor(seconds / 60);
+  const s = Math.floor(seconds % 60);
+  return `${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
+}
+
+export function formatFullTime(seconds: number): string {
+  const h = Math.floor(seconds / 3600);
+  const m = Math.floor((seconds % 3600) / 60);
+  const s = Math.floor(seconds % 60);
+  return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
+}

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

@@ -0,0 +1,136 @@
+import type { GameState } from './GameState';
+import { DuelViewManager } from './DuelViewManager';
+import { MultiplayerViewManager } from './MultiplayerViewManager';
+import { StatsModalManager } from './StatsModalManager';
+import { spawnConfetti } from './particles';
+
+export class GameRunner {
+  private state: GameState;
+  private setupPanel: HTMLElement;
+  private duelPanel: HTMLElement;
+  private multiPanel: HTMLElement;
+  private duelView: DuelViewManager;
+  private multiView: MultiplayerViewManager;
+  private statsModalManager: StatsModalManager;
+
+  constructor(state: GameState) {
+    this.state = state;
+    this.setupPanel = document.getElementById('setup-panel') as HTMLElement;
+    this.duelPanel = document.getElementById('duel-timer-panel') as HTMLElement;
+    this.multiPanel = document.getElementById('multiplayer-timer-panel') as HTMLElement;
+    this.duelView = new DuelViewManager(state);
+    this.multiView = new MultiplayerViewManager(state);
+    this.statsModalManager = new StatsModalManager(state, () => {
+      this.duelPanel.style.display = 'none';
+      this.multiPanel.style.display = 'none';
+      this.setupPanel.style.display = 'flex';
+    });
+    this.initEvents();
+  }
+
+  public startGame(baseDuration: number) {
+    this.state.players.forEach(p => {
+      this.state.engine.create(p.id, p.name, baseDuration);
+    });
+    this.setupPanel.style.display = 'none';
+    this.state.isPaused = false;
+    this.state.roundNumber = 1;
+    this.state.activePlayerIndex = 0;
+    this.state.stats.start();
+    this.bindCallbacks();
+    if (this.state.players.length === 2) {
+      this.state.activeMode = 'duel';
+      this.duelView.initView();
+    } else {
+      this.state.activeMode = 'multi';
+      this.multiView.initView();
+    }
+    const firstPlayer = this.state.players[0];
+    this.state.engine.start(firstPlayer.id);
+    this.state.stats.startTurn();
+  }
+
+  private initEvents() {
+    this.initDuelButtons();
+    this.initMultiButtons();
+  }
+
+  private initDuelButtons() {
+    document.getElementById('duel-pause-btn')?.addEventListener('click', () => this.pauseGame('duel'));
+    document.getElementById('duel-resume-btn')?.addEventListener('click', () => this.resumeGame('duel'));
+    document.getElementById('duel-reset-btn')?.addEventListener('click', () => this.resetToSetup(this.duelPanel));
+    document.getElementById('duel-back-btn')?.addEventListener('click', () => this.resetToSetup(this.duelPanel));
+  }
+
+  private initMultiButtons() {
+    document.getElementById('multi-pause-btn')?.addEventListener('click', () => this.pauseGame('multi'));
+    document.getElementById('multi-resume-btn')?.addEventListener('click', () => this.resumeGame('multi'));
+    document.getElementById('multi-reset-btn')?.addEventListener('click', () => this.resetToSetup(this.multiPanel));
+    document.getElementById('multi-back-btn')?.addEventListener('click', () => this.resetToSetup(this.multiPanel));
+  }
+
+  private pauseGame(mode: 'duel' | 'multi') {
+    this.state.isPaused = true;
+    this.state.engine.pauseAll();
+    this.state.stats.pauseTurn();
+    document.getElementById(`${mode}-paused-overlay`)!.style.display = 'flex';
+  }
+
+  private resumeGame(mode: 'duel' | 'multi') {
+    this.state.isPaused = false;
+    this.state.stats.resumeTurn();
+    this.state.engine.resumeAll(this.state.players.map(p => p.id), this.state.activePlayerIndex);
+    document.getElementById(`${mode}-paused-overlay`)!.style.display = 'none';
+  }
+
+  private resetToSetup(panel: HTMLElement) {
+    this.state.engine.destroy();
+    panel.style.display = 'none';
+    this.setupPanel.style.display = 'flex';
+  }
+
+  private handleExpired(id: string) {
+    this.state.sound.playTimeUp();
+    this.state.stats.end();
+    if (this.state.activeMode === 'duel') {
+      this.duelView.triggerExpired(id);
+    } else {
+      this.multiView.triggerExpired(id);
+    }
+    const panel = this.state.activeMode === 'duel' ? this.duelPanel : this.multiPanel;
+    spawnConfetti(panel, 30);
+    setTimeout(() => this.statsModalManager.show(this.state.roundNumber), 1200);
+  }
+
+  private bindCallbacks() {
+    this.state.engine.onTick((id) => {
+      if (this.state.activeMode === 'duel') {
+        this.duelView.update();
+      } else {
+        this.multiView.update();
+      }
+      this.checkAudioTriggers(id);
+    });
+    this.state.engine.onWarning((id) => {
+      if (this.state.activeMode === 'duel') {
+        this.duelView.triggerWarning(id);
+      } else {
+        this.multiView.triggerWarning(id);
+      }
+    });
+    this.state.engine.onExpired((id) => this.handleExpired(id));
+  }
+
+  private checkAudioTriggers(id: string) {
+    const t = this.state.engine.getTimer(id);
+    if (!t) return;
+    if (Math.floor(t.remaining) === 5 && t.remaining > 4.8) {
+      this.state.sound.playWarning();
+    } else if (Math.floor(t.remaining) <= 5 && t.remaining > 0) {
+      const exactSec = Math.ceil(t.remaining);
+      if (exactSec > 0) {
+        this.state.sound.playTick();
+      }
+    }
+  }
+}

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

@@ -0,0 +1,48 @@
+import type { PlayerConfig, PlayerColor, TimeControlMode } from '../types';
+import { SoundManager } from './SoundManager';
+import { StatsManager } from './StatsManager';
+import { createTimerEngine } from '../logic';
+
+export class GameState {
+  public ui: Record<string, string> = {};
+  public sound = new SoundManager();
+  public stats = new StatsManager();
+  public engine = createTimerEngine();
+  public players: PlayerConfig[] = [];
+  public selectedColor: PlayerColor = 'blue';
+  public activePlayerIndex = 0;
+  public isPaused = false;
+  public roundNumber = 1;
+  public activeMode: 'duel' | 'multi' = 'multi';
+
+  constructor() {
+    const el = document.querySelector('.timer-main-wrapper');
+    if (el) {
+      try {
+        this.ui = JSON.parse(el.getAttribute('data-ui') || '{}');
+      } catch {}
+    }
+    try {
+      const saved = localStorage.getItem('board-game-timer-players');
+      if (saved) {
+        this.players = JSON.parse(saved);
+      }
+    } catch {}
+  }
+
+  public savePlayers() {
+    try {
+      localStorage.setItem('board-game-timer-players', JSON.stringify(this.players));
+    } catch {}
+  }
+
+  public recreateEngine(options: { mode: TimeControlMode; increment: number; delay: number; warningTime: number }) {
+    this.engine = createTimerEngine({
+      tickInterval: 100,
+      mode: options.mode,
+      increment: options.increment,
+      delay: options.delay,
+      warningTime: options.warningTime
+    });
+  }
+}

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

@@ -0,0 +1,163 @@
+import type { GameState } from './GameState';
+import type { PlayerConfig, TimerState } from '../types';
+import { getContrastColorForBackground } from './ColorHelper';
+import { formatTime } from './FormatHelper';
+import { spawnTurnBurst, spawnParticle, spawnDigitSparkle, spawnWarningFlash, spawnExpiredBurst } from './particles';
+
+export class MultiplayerViewManager {
+  private state: GameState;
+  private multiPanel: HTMLElement;
+
+  constructor(state: GameState) {
+    this.state = state;
+    this.multiPanel = document.getElementById('multiplayer-timer-panel') as HTMLElement;
+    this.initEvents();
+  }
+
+  private initEvents() {
+    document.getElementById('giant-next-turn-btn')?.addEventListener('click', () => this.handleGiantButtonClick());
+  }
+
+  private handleGiantButtonClick() {
+    if (this.state.isPaused) return;
+    this.state.sound.playTurn();
+    const currPlayer = this.state.players[this.state.activePlayerIndex];
+    this.state.stats.endTurn(currPlayer.id, this.state.roundNumber);
+    this.state.activePlayerIndex = (this.state.activePlayerIndex + 1) % this.state.players.length;
+    if (this.state.activePlayerIndex === 0) {
+      this.state.roundNumber++;
+      const roundEl = document.getElementById('multi-round-number');
+      if (roundEl) roundEl.textContent = this.state.roundNumber.toString();
+    }
+    const nextPlayer = this.state.players[this.state.activePlayerIndex];
+    this.state.engine.switchTurn(nextPlayer.id);
+    this.state.stats.startTurn();
+    this.update();
+
+    const giantBtn = document.getElementById('giant-next-turn-btn') as HTMLElement;
+    if (giantBtn) spawnTurnBurst(giantBtn, `var(--color-${nextPlayer.color})`);
+  }
+
+  public initView() {
+    this.multiPanel.style.display = 'flex';
+    document.getElementById('multi-round-number')!.textContent = '1';
+    const modeIndicator = document.getElementById('setting-mode') as HTMLSelectElement;
+    document.getElementById('multi-mode-indicator')!.textContent = modeIndicator.value.toUpperCase();
+    document.getElementById('multi-paused-overlay')!.style.display = 'none';
+    this.renderGrid();
+  }
+
+  private renderGrid() {
+    const grid = document.getElementById('multiplayer-players-grid') as HTMLElement;
+    grid.innerHTML = '';
+    this.state.players.forEach((p) => {
+      const t = this.state.engine.getTimer(p.id);
+      if (!t) return;
+      grid.appendChild(this.createCard(p, t));
+    });
+    this.update();
+  }
+
+  private createCard(p: PlayerConfig, t: TimerState): HTMLElement {
+    const card = document.createElement('div');
+    card.className = `multi-player-card ${t.status}`;
+    card.id = `multi-card-${p.id}`;
+    card.style.setProperty('--color-timer-accent', `var(--color-${p.color})`);
+    const pct = p.time > 0 ? (t.remaining / p.time) * 100 : 0;
+    card.innerHTML = `
+      <div class="multi-card-header">
+        <span class="multi-card-name" style="color: var(--color-text-${p.color})">${p.name}</span>
+        <span class="multi-card-rounds" id="rounds-val-${p.id}">Turns: ${t.roundsPlayed}</span>
+      </div>
+      <div class="multi-card-timer" id="timer-val-${p.id}">${formatTime(t.remaining)}</div>
+      <div class="multi-card-progress">
+        <div class="multi-card-fill" id="timer-fill-${p.id}" style="width: ${pct}%; background-color: var(--color-${p.color})"></div>
+      </div>
+      <div class="multi-card-actions">
+        <button type="button" class="card-btn add-btn" data-id="${p.id}">+30s</button>
+        <button type="button" class="card-btn sub-btn" data-id="${p.id}">-30s</button>
+      </div>
+    `;
+    this.bindCardActions(card, p.id);
+    return card;
+  }
+
+  private bindCardActions(card: HTMLElement, id: string) {
+    card.querySelector('.add-btn')?.addEventListener('click', (e) => {
+      e.stopPropagation();
+      this.state.engine.addTime(id, 30);
+      this.update();
+      const timerEl = document.getElementById(`timer-val-${id}`);
+      if (timerEl) spawnDigitSparkle(timerEl);
+      spawnParticle({ parent: card, text: '+30s', x: 20 + Math.random() * 60, y: 30, variant: 'success' });
+    });
+    card.querySelector('.sub-btn')?.addEventListener('click', (e) => {
+      e.stopPropagation();
+      this.state.engine.removeTime(id, 30);
+      this.update();
+      const timerEl = document.getElementById(`timer-val-${id}`);
+      if (timerEl) spawnDigitSparkle(timerEl);
+      spawnParticle({ parent: card, text: '-30s', x: 20 + Math.random() * 60, y: 30, variant: 'warning' });
+    });
+  }
+
+  public update() {
+    this.state.players.forEach((p, idx) => {
+      const t = this.state.engine.getTimer(p.id);
+      if (t) this.syncCard(p, t, idx);
+    });
+    const activePlayer = this.state.players[this.state.activePlayerIndex];
+    if (activePlayer) {
+      const nameEl = document.getElementById('giant-active-player-name');
+      if (nameEl) nameEl.textContent = activePlayer.name;
+      const giantBtn = document.getElementById('giant-next-turn-btn');
+      if (giantBtn) {
+        giantBtn.style.backgroundColor = `var(--color-${activePlayer.color})`;
+        giantBtn.style.color = getContrastColorForBackground(activePlayer.color);
+      }
+    }
+  }
+
+  private syncCard(p: PlayerConfig, t: TimerState, idx: number) {
+    const card = document.getElementById(`multi-card-${p.id}`);
+    if (card) this.updateCardStyles(card, p, t, idx);
+    this.updateCardTimer(p, t);
+    this.updateCardFill(p, t);
+    const roundsVal = document.getElementById(`rounds-val-${p.id}`);
+    if (roundsVal) roundsVal.textContent = `Turns: ${t.roundsPlayed}`;
+    if (t.status === 'overtime' && card) spawnExpiredBurst(card);
+  }
+
+  private updateCardStyles(card: HTMLElement, p: PlayerConfig, t: TimerState, idx: number) {
+    card.className = `multi-player-card ${t.status}`;
+    if (this.state.engine.activeTimerId === p.id) {
+      card.classList.add('active');
+      this.state.activePlayerIndex = idx;
+    }
+  }
+
+  private updateCardTimer(p: PlayerConfig, t: TimerState) {
+    const el = document.getElementById(`timer-val-${p.id}`) as HTMLElement;
+    if (!el) return;
+    const prev = el.textContent;
+    el.textContent = formatTime(t.remaining);
+    if (prev && prev !== el.textContent) spawnDigitSparkle(el);
+  }
+
+  private updateCardFill(p: PlayerConfig, t: TimerState) {
+    const el = document.getElementById(`timer-fill-${p.id}`) as HTMLElement;
+    if (!el) return;
+    const pct = p.time > 0 ? (t.remaining / p.time) * 100 : 0;
+    el.style.width = `${pct}%`;
+  }
+
+  public triggerWarning(playerId: string) {
+    const card = document.getElementById(`multi-card-${playerId}`);
+    if (card) spawnWarningFlash(card);
+  }
+
+  public triggerExpired(playerId: string) {
+    const card = document.getElementById(`multi-card-${playerId}`);
+    if (card) spawnExpiredBurst(card);
+  }
+}