@jjlmoya/utils-tabletop 1.3.0

package/src/tool/board-game-timer/client.ts

@@ -0,0 +1,17 @@
+import { GameState } from './modules/GameState';
+import { SetupPanelManager } from './modules/SetupPanelManager';
+import { GameRunner } from './modules/GameRunner';
+
+function init() {
+  const state = new GameState();
+  const runner = new GameRunner(state);
+  const setup = new SetupPanelManager(state, () => {
+    runner.startGame(setup.getBaseDuration());
+  });
+}
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', init);
+} else {
+  init();
+}

package/src/tool/board-game-timer/component.astro

@@ -0,0 +1,22 @@
+---
+import './board-game-timer.css';
+import SetupPanel from './components/SetupPanel.astro';
+import DuelTimer from './components/DuelTimer.astro';
+import MultiplayerTimer from './components/MultiplayerTimer.astro';
+import StatsModal from './components/StatsModal.astro';
+
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="timer-main-wrapper" data-ui={JSON.stringify(ui)}>
+  <SetupPanel ui={ui} />
+  <DuelTimer ui={ui} />
+  <MultiplayerTimer ui={ui} />
+  <StatsModal ui={ui} />
+</div>
+
+<script src="./client.ts"></script>

package/src/tool/board-game-timer/components/DuelTimer.astro

@@ -0,0 +1,75 @@
+---
+import { Icon } from 'astro-icon/components';
+
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div id="duel-timer-panel" class="timer-duel-panel" style="display: none">
+  <div class="duel-player-side" id="duel-p1" data-player-id="">
+    <div class="duel-player-container">
+      <div class="side-header">
+        <span class="player-name-lbl" id="duel-p1-name">Player 1</span>
+        <button type="button" class="side-rotate-btn" title="Rotate Display">
+          <Icon name="mdi:rotate-3d-variant" width="20" height="20" />
+        </button>
+      </div>
+      <div class="side-timer" id="duel-p1-timer">00:00</div>
+      <div class="side-meta">
+        <span class="rounds-count-lbl" id="duel-p1-rounds">Turns: 0</span>
+        <span class="side-status-badge" id="duel-p1-status">READY</span>
+      </div>
+    </div>
+    <div class="duel-ripple-effect"></div>
+  </div>
+
+  <div class="duel-controls-bar">
+    <button type="button" class="ctrl-bar-btn" id="duel-back-btn" title="Back to Setup">
+      <Icon name="mdi:cog" width="24" height="24" />
+    </button>
+
+    <div class="round-counter-display">
+      <span class="round-lbl">{ui.roundLabel || 'Round'}</span>
+      <span class="round-num" id="duel-round-number">1</span>
+    </div>
+
+    <button type="button" class="ctrl-bar-btn primary-ctrl" id="duel-pause-btn" title="Pause Game">
+      <Icon name="mdi:pause" width="28" height="28" />
+    </button>
+
+    <button type="button" class="ctrl-bar-btn" id="duel-reset-btn" title="Reset Game">
+      <Icon name="mdi:refresh" width="24" height="24" />
+    </button>
+  </div>
+
+  <div class="duel-player-side" id="duel-p2" data-player-id="">
+    <div class="duel-player-container">
+      <div class="side-header">
+        <span class="player-name-lbl" id="duel-p2-name">Player 2</span>
+        <button type="button" class="side-rotate-btn" title="Rotate Display">
+          <Icon name="mdi:rotate-3d-variant" width="20" height="20" />
+        </button>
+      </div>
+      <div class="side-timer" id="duel-p2-timer">00:00</div>
+      <div class="side-meta">
+        <span class="rounds-count-lbl" id="duel-p2-rounds">Turns: 0</span>
+        <span class="side-status-badge" id="duel-p2-status">READY</span>
+      </div>
+    </div>
+    <div class="duel-ripple-effect"></div>
+  </div>
+
+  <div id="duel-paused-overlay" class="duel-overlay paused-overlay" style="display: none">
+    <div class="overlay-card">
+      <Icon name="mdi:pause-circle-outline" width="64" height="64" />
+      <h3>{ui.pausedOverlay || 'Game Paused'}</h3>
+      <button type="button" class="resume-hero-btn" id="duel-resume-btn">
+        <Icon name="mdi:play" width="24" height="24" />
+        <span>{ui.resumeGame || 'Resume'}</span>
+      </button>
+    </div>
+  </div>
+</div>

package/src/tool/board-game-timer/components/MultiplayerTimer.astro

@@ -0,0 +1,58 @@
+---
+import { Icon } from 'astro-icon/components';
+
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div id="multiplayer-timer-panel" class="timer-multiplayer-panel" style="display: none">
+  <div class="multiplayer-header-bar">
+    <button type="button" class="ctrl-bar-btn" id="multi-back-btn" title="Back to Setup">
+      <Icon name="mdi:cog" width="22" height="22" />
+    </button>
+
+    <div class="game-meta-indicators">
+      <div class="meta-indicator">
+        <span class="meta-lbl">{ui.roundLabel || 'Round'}</span>
+        <span class="meta-val" id="multi-round-number">1</span>
+      </div>
+      <div class="meta-indicator">
+        <span class="meta-lbl">{ui.modeLabel || 'Mode'}</span>
+        <span class="meta-val" id="multi-mode-indicator">Normal</span>
+      </div>
+    </div>
+
+    <div class="header-action-group">
+      <button type="button" class="ctrl-bar-btn primary-ctrl" id="multi-pause-btn" title="Pause Game">
+        <Icon name="mdi:pause" width="24" height="24" />
+      </button>
+      <button type="button" class="ctrl-bar-btn" id="multi-reset-btn" title="Reset Game">
+        <Icon name="mdi:refresh" width="22" height="22" />
+      </button>
+    </div>
+  </div>
+
+  <div class="multiplayer-grid" id="multiplayer-players-grid"></div>
+
+  <div class="giant-turn-button-container">
+    <button type="button" id="giant-next-turn-btn" class="giant-next-btn">
+      <Icon name="mdi:skip-next" width="48" height="48" />
+      <span class="giant-btn-lbl">{ui.nextTurn || 'End Turn'}</span>
+      <span class="giant-btn-sub" id="giant-active-player-name">Player Name</span>
+    </button>
+  </div>
+
+  <div id="multi-paused-overlay" class="multi-overlay paused-overlay" style="display: none">
+    <div class="overlay-card">
+      <Icon name="mdi:pause-circle-outline" width="64" height="64" />
+      <h3>{ui.pausedOverlay || 'Game Paused'}</h3>
+      <button type="button" class="resume-hero-btn" id="multi-resume-btn">
+        <Icon name="mdi:play" width="24" height="24" />
+        <span>{ui.resumeGame || 'Resume'}</span>
+      </button>
+    </div>
+  </div>
+</div>

package/src/tool/board-game-timer/components/SetupPanel.astro

@@ -0,0 +1,155 @@
+---
+import { Icon } from 'astro-icon/components';
+
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+
+const presets = [
+  { id: 'casual', label: 'Casual', mode: 'normal', time: 120, increment: 0, delay: 0 },
+  { id: 'blitz', label: 'Blitz', mode: 'normal', time: 300, increment: 0, delay: 0 },
+  { id: 'strategic', label: 'Strategic', mode: 'fischer', time: 1800, increment: 10, delay: 0 },
+  { id: 'hourglass', label: 'Hourglass', mode: 'hourglass', time: 60, increment: 0, delay: 0 },
+  { id: 'cooperative', label: 'Cooperative', mode: 'normal', time: 600, increment: 0, delay: 0 },
+  { id: 'custom', label: 'Custom', mode: 'normal', time: 300, increment: 0, delay: 0 },
+];
+
+const colors = ['blue', 'red', 'green', 'yellow', 'purple', 'orange', 'teal', 'pink'] as const;
+---
+
+<div id="setup-panel" class="timer-setup-panel">
+  <div class="setup-grid">
+    <div class="setup-card settings-column">
+      <div class="settings-group">
+        <h4>{ui.presetsTitle || 'Presets'}</h4>
+        <div class="presets-grid">
+          {presets.map((preset) => (
+            <button
+              type="button"
+              class="preset-card"
+              data-preset={preset.id}
+              data-mode={preset.mode}
+              data-time={preset.time}
+              data-increment={preset.increment}
+              data-delay={preset.delay}
+            >
+              <span class="preset-name">{preset.label}</span>
+              <span class="preset-meta">
+                {preset.id === 'custom' ? 'Manual' : `${Math.floor(preset.time / 60)}m ${preset.increment > 0 ? `+${preset.increment}s` : ''}`}
+              </span>
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div class="settings-group">
+        <h4>{ui.timeControlTitle || 'Time Control'}</h4>
+        <div class="settings-grid">
+          <div class="control-box">
+            <span class="config-label">{ui.modeLabel || 'Mode'}</span>
+            <select id="setting-mode" class="select-input">
+              <option value="normal">{ui.modeNormal || 'Normal Count'}</option>
+              <option value="fischer">{ui.modeFischer || 'Fischer (Increment)'}</option>
+              <option value="bronstein">{ui.modeBronstein || 'Bronstein (Delay)'}</option>
+              <option value="hourglass">{ui.modeHourglass || 'Hourglass'}</option>
+              <option value="turn">{ui.modeTurn || 'Turn Reset'}</option>
+            </select>
+          </div>
+
+          <div class="control-box">
+            <span class="config-label">{ui.baseTimeLabel || 'Base Time'}</span>
+            <div class="time-inputs-container">
+              <div class="time-adjuster-group">
+                <button type="button" class="time-adj-btn dec-min" aria-label="Decrease minutes">-</button>
+                <input type="number" id="setting-mins" class="num-input" value="5" min="0" max="99" />
+                <button type="button" class="time-adj-btn inc-min" aria-label="Increase minutes">+</button>
+                <span class="time-unit-lbl">m</span>
+              </div>
+              <span class="time-sep">:</span>
+              <div class="time-adjuster-group">
+                <button type="button" class="time-adj-btn dec-sec" aria-label="Decrease seconds">-</button>
+                <input type="number" id="setting-secs" class="num-input" value="0" min="0" max="59" />
+                <button type="button" class="time-adj-btn inc-sec" aria-label="Increase seconds">+</button>
+                <span class="time-unit-lbl">s</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="control-box active-fischer active-bronstein">
+            <span class="config-label">{ui.incrementLabel || 'Increment/Delay'}</span>
+            <div class="number-input-wrapper">
+              <input type="number" id="setting-increment" class="num-input-full" value="0" min="0" max="99" />
+              <span class="unit-label">s</span>
+            </div>
+          </div>
+
+          <div class="control-box">
+            <span class="config-label">{ui.warningTimeLabel || 'Warning Threshold'}</span>
+            <div class="number-input-wrapper">
+              <input type="number" id="setting-warning" class="num-input-full" value="30" min="0" max="99" />
+              <span class="unit-label">s</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="settings-group">
+        <h4>{ui.audioTitle || 'Audio Alerts'}</h4>
+        <div class="audio-toggles">
+          <label class="toggle-control">
+            <input type="checkbox" id="toggle-sound" checked />
+            <span class="toggle-slider"></span>
+            <span class="toggle-label">{ui.soundAlerts || 'Sound Effects'}</span>
+          </label>
+        </div>
+      </div>
+    </div>
+
+    <div class="setup-card players-column">
+      <div class="settings-group">
+        <h4>{ui.playersTitle || 'Players'}</h4>
+        <div class="player-input-block">
+          <div class="player-input-row-nowrap">
+            <input type="text" id="new-player-name" class="text-input" placeholder={ui.playerNamePlaceholder} maxlength="15" />
+            <button type="button" id="add-player-btn" class="btn-action primary">
+              <Icon name="mdi:plus" width="20" height="20" />
+            </button>
+          </div>
+          <div class="color-picker-row">
+            <div class="color-picker-grid">
+              {colors.map((color) => (
+                <button
+                  type="button"
+                  class={`color-dot color-${color}`}
+                  data-color={color}
+                  aria-label={`Select ${color}`}
+                ></button>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="settings-group list-group">
+        <div class="player-list-header">
+          <span>{ui.playersAdded || 'Added Players'}</span>
+          <span id="player-count" class="count-badge">0</span>
+        </div>
+        <div id="player-list-container" class="player-list-scroll"></div>
+        <div id="empty-players-hint" class="players-hint">
+          <Icon name="mdi:account-group-outline" width="40" height="40" />
+          <p>{ui.noPlayersHint || 'Add at least 2 players to start'}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="setup-actions">
+    <button type="button" id="start-game-btn" class="start-hero-btn" disabled>
+      <Icon name="mdi:play" width="28" height="28" />
+      <span>{ui.startGame || 'Start Game'}</span>
+    </button>
+  </div>
+</div>

package/src/tool/board-game-timer/components/StatsModal.astro

@@ -0,0 +1,52 @@
+---
+import { Icon } from 'astro-icon/components';
+
+interface Props {
+  ui: Record<string, string>;
+}
+
+const { ui } = Astro.props;
+---
+
+<div id="stats-modal" class="timer-modal-backdrop" style="display: none">
+  <div class="stats-modal-card">
+    <div class="modal-header">
+      <div class="header-title-group">
+        <Icon name="mdi:chart-bar" width="28" height="28" />
+        <h3>{ui.statsTitle || 'Game Statistics'}</h3>
+      </div>
+      <button type="button" id="stats-close-btn" class="modal-close-btn" aria-label="Close">
+        <Icon name="mdi:close" width="24" height="24" />
+      </button>
+    </div>
+
+    <div class="modal-body">
+      <div class="general-stats-grid">
+        <div class="stat-card-mini">
+          <span class="mini-lbl">{ui.totalGameTime || 'Total Time'}</span>
+          <span class="mini-val" id="stats-total-time">00:00:00</span>
+        </div>
+        <div class="stat-card-mini">
+          <span class="mini-lbl">{ui.totalRounds || 'Total Rounds'}</span>
+          <span class="mini-val" id="stats-total-rounds">0</span>
+        </div>
+        <div class="stat-card-mini highlighted-stat">
+          <span class="mini-lbl">{ui.slowestPlayer || 'Slowest Player'}</span>
+          <span class="mini-val" id="stats-slowest-player">-</span>
+        </div>
+      </div>
+
+      <div class="charts-section">
+        <h4>{ui.playerPerformance || 'Player Time Analysis'}</h4>
+        <div class="players-ranking-list" id="stats-players-ranking"></div>
+      </div>
+    </div>
+
+    <div class="modal-footer">
+      <button type="button" id="stats-restart-btn" class="modal-action-btn primary">
+        <Icon name="mdi:autorenew" width="20" height="20" />
+        <span>{ui.playAgain || 'New Game'}</span>
+      </button>
+    </div>
+  </div>
+</div>

package/src/tool/board-game-timer/entry.ts

@@ -0,0 +1,76 @@
+import type { TabletopToolEntry, ToolLocaleContent } from '../../types';
+
+export type BoardGameTimerUI = {
+  title: string;
+  setupTitle: string;
+  playerNamePlaceholder: string;
+  addPlayer: string;
+  removePlayer: string;
+  startGame: string;
+  pauseGame: string;
+  resumeGame: string;
+  resetGame: string;
+  nextTurn: string;
+  addTime: string;
+  removeTime: string;
+  playerLabel: string;
+  minutesLabel: string;
+  secondsLabel: string;
+  expiredLabel: string;
+  overtimeLabel: string;
+  turnIndicator: string;
+  warningLowTime: string;
+  pausedOverlay: string;
+  roundLabel: string;
+  settingsTitle: string;
+  baseTimeLabel: string;
+  incrementLabel: string;
+  warningTimeLabel: string;
+  confirmLabel: string;
+  cancelLabel: string;
+  noPlayersHint: string;
+  addPlayerHint: string;
+  timeUpLabel: string;
+  presetsTitle: string;
+  timeControlTitle: string;
+  modeLabel: string;
+  modeNormal: string;
+  modeFischer: string;
+  modeBronstein: string;
+  modeHourglass: string;
+  modeTurn: string;
+  audioTitle: string;
+  soundAlerts: string;
+  playersTitle: string;
+  playersAdded: string;
+  statsTitle: string;
+  totalGameTime: string;
+  totalRounds: string;
+  slowestPlayer: string;
+  playerPerformance: string;
+  playAgain: string;
+};
+
+export type BoardGameTimerLocaleContent = ToolLocaleContent<BoardGameTimerUI>;
+
+export const boardGameTimer: TabletopToolEntry<BoardGameTimerUI> = {
+  id: 'board-game-timer',
+  icons: { bg: 'mdi:timer-outline', fg: 'mdi:timer' },
+  i18n: {
+    en: () => import('./i18n/en').then((m) => m.content),
+    de: () => import('./i18n/de').then((m) => m.content),
+    es: () => import('./i18n/es').then((m) => m.content),
+    fr: () => import('./i18n/fr').then((m) => m.content),
+    id: () => import('./i18n/id').then((m) => m.content),
+    it: () => import('./i18n/it').then((m) => m.content),
+    ja: () => import('./i18n/ja').then((m) => m.content),
+    ko: () => import('./i18n/ko').then((m) => m.content),
+    nl: () => import('./i18n/nl').then((m) => m.content),
+    pl: () => import('./i18n/pl').then((m) => m.content),
+    pt: () => import('./i18n/pt').then((m) => m.content),
+    ru: () => import('./i18n/ru').then((m) => m.content),
+    sv: () => import('./i18n/sv').then((m) => m.content),
+    tr: () => import('./i18n/tr').then((m) => m.content),
+    zh: () => import('./i18n/zh').then((m) => m.content),
+  },
+};