@jjlmoya/utils-sports 1.19.0 → 1.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-sports",
-    "version": "1.19.0",
+    "version": "1.21.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/entries.ts

@@ -12,6 +12,10 @@ export { scoreKeeper } from './tool/scoreKeeper/entry';
 export type { ScoreKeeperLocaleContent } from './tool/scoreKeeper/entry';
 export { tournamentBracket } from './tool/tournamentBracket/entry';
 export type { TournamentBracketLocaleContent } from './tool/tournamentBracket/entry';
+export { tennisScoreKeeper } from './tool/tennisScoreKeeper/entry';
+export type { TennisScoreKeeperLocaleContent } from './tool/tennisScoreKeeper/entry';
+export { dartsScoreKeeper } from './tool/dartsScoreKeeper/entry';
+export type { DartsScoreKeeperLocaleContent } from './tool/dartsScoreKeeper/entry';
 export { sportsCategory } from './category';
 import { basketScoreKeeper } from './tool/basketScoreKeeper/entry';
 import { footballScoreKeeper } from './tool/footballScoreKeeper/entry';
@@ -20,4 +24,6 @@ import { pingPongScoreKeeper } from './tool/pingPongScoreKeeper/entry';
 import { reactionTester } from './tool/reactionTester/entry';
 import { scoreKeeper } from './tool/scoreKeeper/entry';
 import { tournamentBracket } from './tool/tournamentBracket/entry';
-export const ALL_ENTRIES = [basketScoreKeeper, footballScoreKeeper, gymTracker, pingPongScoreKeeper, reactionTester, scoreKeeper, tournamentBracket];
+import { tennisScoreKeeper } from './tool/tennisScoreKeeper/entry';
+import { dartsScoreKeeper } from './tool/dartsScoreKeeper/entry';
+export const ALL_ENTRIES = [basketScoreKeeper, footballScoreKeeper, gymTracker, pingPongScoreKeeper, reactionTester, scoreKeeper, tournamentBracket, tennisScoreKeeper, dartsScoreKeeper];

package/src/tests/locale_completeness.test.ts

@@ -3,6 +3,6 @@ import { ALL_TOOLS } from '../tools';
 
 describe('Locale Completeness Validation', () => {
   it('all tools registered', () => {
-    expect(ALL_TOOLS.length).toBe(7);
+    expect(ALL_TOOLS.length).toBe(9);
   });
 });

package/src/tests/tool_validation.test.ts

@@ -4,8 +4,8 @@ import { sportsCategory } from '../data';
 
 describe('Tool Validation Suite', () => {
   describe('Library Registration', () => {
-    it('should have 7 tools in ALL_TOOLS', () => {
-      expect(ALL_TOOLS.length).toBe(7);
+    it('should have 9 tools in ALL_TOOLS', () => {
+      expect(ALL_TOOLS.length).toBe(9);
     });
 
     it('sportsCategory should be defined', () => {

package/src/tool/dartsScoreKeeper/bibliography.astro

@@ -0,0 +1,15 @@
+---
+import { bibliography } from './bibliography';
+---
+
+<ul class="tn-bib-list">
+  {
+    bibliography.map((entry) => (
+      <li>
+        <a href={entry.url} target="_blank" rel="noopener noreferrer">
+          {entry.name}
+        </a>
+      </li>
+    ))
+  }
+</ul>

package/src/tool/dartsScoreKeeper/bibliography.ts

@@ -0,0 +1,8 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'WDF Playing and Tournament Rules',
+    url: 'https://dartswdf.com/rules/',
+  },
+];

package/src/tool/dartsScoreKeeper/component.astro

@@ -0,0 +1,156 @@
+---
+import type { KnownLocale } from '../../types';
+import type { DartsScoreKeeperUI } from './ui';
+
+interface Props {
+  locale?: KnownLocale;
+  ui?: Record<string, unknown>;
+}
+
+const { ui } = Astro.props;
+const t = (ui ?? {}) as DartsScoreKeeperUI;
+---
+
+<div class="tn-console" id="tn-card" data-tn-ui={JSON.stringify(t)}>
+  <div class="tn-header-panel">
+    <div class="tn-header-actions">
+      <button class="tn-action-btn" id="tn-toggle-view-btn" title="Toggle View">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <circle cx="12" cy="12" r="10"/>
+          <circle cx="12" cy="12" r="6"/>
+          <circle cx="12" cy="12" r="2"/>
+        </svg>
+      </button>
+      <button class="tn-action-btn" data-tn-reset title={t.reset}>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/>
+          <path d="M16 3h5v5M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/>
+          <path d="M8 21H3v-5"/>
+        </svg>
+      </button>
+      <button class="tn-action-btn" data-tn-fs title={t.fullscreen}>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+          <path d="M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7"/>
+        </svg>
+      </button>
+    </div>
+  </div>
+
+  <div class="tn-scoreboard">
+    <div class="tn-player-card tn-player-card-active" id="tn-card-a">
+      <div class="tn-player-name-section">
+        <input type="text" value={t.playerA} class="tn-player-input" id="tn-name-a" />
+      </div>
+      <div class="tn-big-score" id="tn-score-a">501</div>
+      <div class="tn-player-stats">
+        <div class="tn-legs-indicator" id="tn-legs-indicator-a">
+          <span class="tn-legs-dot"></span>
+          <span class="tn-legs-dot"></span>
+          <span class="tn-legs-dot"></span>
+        </div>
+        <span id="tn-avg-a">{t.average}: 0.00</span>
+      </div>
+    </div>
+
+    <div class="tn-player-card" id="tn-card-b">
+      <div class="tn-player-name-section">
+        <input type="text" value={t.playerB} class="tn-player-input" id="tn-name-b" />
+      </div>
+      <div class="tn-big-score" id="tn-score-b">501</div>
+      <div class="tn-player-stats">
+        <div class="tn-legs-indicator" id="tn-legs-indicator-b">
+          <span class="tn-legs-dot"></span>
+          <span class="tn-legs-dot"></span>
+          <span class="tn-legs-dot"></span>
+        </div>
+        <span id="tn-avg-b">{t.average}: 0.00</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="tn-checkout-panel">
+    <div class="tn-checkout-title" id="tn-checkout-suggest"></div>
+  </div>
+
+  <div class="tn-dartboard-container" id="tn-dartboard-container">
+    <div class="tn-dartboard-wrapper">
+      <svg id="tn-dartboard-svg" viewBox="0 0 320 320"></svg>
+    </div>
+    <div class="tn-dartboard-actions">
+      <button class="tn-special-btn tn-special-btn-undo" data-dt-undo>Undo</button>
+      <button class="tn-special-btn tn-special-btn-miss" data-dt-val="0">Miss (0)</button>
+    </div>
+  </div>
+
+  <div class="tn-turn-info">
+    <div class="tn-turn-title">{t.dart}</div>
+    <div class="tn-turn-darts" id="tn-turn-darts"></div>
+  </div>
+
+  <div class="tn-keypad">
+    <div class="tn-modifiers">
+      <button class="tn-mod-btn tn-mod-active" data-dt-mod="1">Single (x1)</button>
+      <button class="tn-mod-btn" data-dt-mod="2">Double (x2)</button>
+      <button class="tn-mod-btn" data-dt-mod="3">Triple (x3)</button>
+    </div>
+
+    <div class="tn-numbers-grid">
+      {Array.from({ length: 20 }, (_, i) => i + 1).map((n) => (
+        <button class="tn-val-btn" data-dt-val={n}>{n}</button>
+      ))}
+    </div>
+
+    <div class="tn-special-grid">
+      <button class="tn-special-btn" data-dt-val="25">OB (25)</button>
+      <button class="tn-special-btn" data-dt-val="50">DB (50)</button>
+      <button class="tn-special-btn tn-special-btn-miss" data-dt-val="0">Miss (0)</button>
+    </div>
+
+    <div class="tn-special-grid">
+      <button class="tn-special-btn tn-special-btn-undo" data-dt-undo>Undo</button>
+    </div>
+  </div>
+
+  <div class="tn-history-panel">
+    <div class="tn-history-grid" id="tn-history-list"></div>
+  </div>
+
+  <div class="tn-console-controls">
+    <div class="tn-control-group">
+      <button class="tn-control-btn tn-format-btn tn-format-active" data-dt-format="501">{t.score501}</button>
+      <button class="tn-control-btn tn-format-btn" data-dt-format="301">{t.score301}</button>
+    </div>
+    <div class="tn-control-group">
+      <button class="tn-control-btn tn-doubleout-active" data-dt-doubleout>{t.doubleOut}</button>
+    </div>
+  </div>
+
+  <div id="tn-winner" class="tn-celebration-screen">
+    <div class="tn-celebration-box">
+      <svg class="tn-celebration-cup" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6m12 5h1.5a2.5 2.5 0 0 0 0-5H18M6 4h12M12 18v3m-4 0h8m-4-17v14a4 4 0 0 1-4-4"/>
+      </svg>
+      <div class="tn-celebration-label">{t.winnerLabel}</div>
+      <div id="tn-winner-team" class="tn-celebration-name">Player 1</div>
+      <div id="tn-winner-score" class="tn-celebration-score">Set: 0 - 0</div>
+      <button class="tn-celebration-btn" data-close-winner>&times;</button>
+    </div>
+  </div>
+
+  <div id="tn-confetti" class="tn-confetti-field"></div>
+
+  <div id="tn-modal" class="tn-inline-modal">
+    <div class="tn-inline-modal-box">
+      <p class="tn-inline-modal-text">{t.resetConfirm}</p>
+      <div class="tn-inline-modal-btns">
+        <button id="tn-modal-cancel" class="tn-inline-modal-btn tn-inline-btn-cancel">{t.cancel}</button>
+        <button id="tn-modal-confirm" class="tn-inline-modal-btn tn-inline-btn-reset">{t.reset}</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  import { initDartsScoreKeeper } from './logic';
+  initDartsScoreKeeper();
+</script>

package/src/tool/dartsScoreKeeper/dartboard.ts

@@ -0,0 +1,69 @@
+interface RingParams {
+  cx: number;
+  cy: number;
+  rIn: number;
+  rOut: number;
+  startDeg: number;
+  endDeg: number;
+}
+
+const BOARD_NUMBERS = [20, 1, 18, 4, 13, 6, 10, 15, 2, 17, 3, 19, 7, 16, 8, 11, 14, 9, 12, 5];
+
+function polarToCartesian(cx: number, cy: number, r: number, angleDeg: number): { x: number; y: number } {
+  const angleRad = ((angleDeg - 90) * Math.PI) / 180;
+  return {
+    x: cx + r * Math.cos(angleRad),
+    y: cy + r * Math.sin(angleRad),
+  };
+}
+
+function getRingPath(params: RingParams): string {
+  const { cx, cy, rIn, rOut, startDeg, endDeg } = params;
+  const pInStart = polarToCartesian(cx, cy, rIn, startDeg);
+  const pInEnd = polarToCartesian(cx, cy, rIn, endDeg);
+  const pOutStart = polarToCartesian(cx, cy, rOut, startDeg);
+  const pOutEnd = polarToCartesian(cx, cy, rOut, endDeg);
+  return [
+    `M ${pInStart.x} ${pInStart.y}`,
+    `L ${pOutStart.x} ${pOutStart.y}`,
+    `A ${rOut} ${rOut} 0 0 1 ${pOutEnd.x} ${pOutEnd.y}`,
+    `L ${pInEnd.x} ${pInEnd.y}`,
+    `A ${rIn} ${rIn} 0 0 0 ${pInStart.x} ${pInStart.y}`,
+    'Z',
+  ].join(' ');
+}
+
+function buildSector(cx: number, cy: number, idx: number, parts: string[]): void {
+  const num = BOARD_NUMBERS[idx];
+  const startDeg = idx * 18 - 9;
+  const endDeg = idx * 18 + 9;
+  const isEven = idx % 2 === 0;
+  const colorSingle = isEven ? '#1e2430' : '#e0e0e0';
+  const colorDoubleTriple = isEven ? '#ef4444' : '#2e7d32';
+
+  const pInnerSingle = getRingPath({ cx, cy, rIn: 18, rOut: 80, startDeg, endDeg });
+  parts.push(`<path d="${pInnerSingle}" fill="${colorSingle}" class="tn-board-sector" data-dt-val="${num}" data-dt-mod="1" />`);
+
+  const pTriple = getRingPath({ cx, cy, rIn: 80, rOut: 92, startDeg, endDeg });
+  parts.push(`<path d="${pTriple}" fill="${colorDoubleTriple}" class="tn-board-sector" data-dt-val="${num}" data-dt-mod="3" />`);
+
+  const pOuterSingle = getRingPath({ cx, cy, rIn: 92, rOut: 126, startDeg, endDeg });
+  parts.push(`<path d="${pOuterSingle}" fill="${colorSingle}" class="tn-board-sector" data-dt-val="${num}" data-dt-mod="1" />`);
+
+  const pDouble = getRingPath({ cx, cy, rIn: 126, rOut: 138, startDeg, endDeg });
+  parts.push(`<path d="${pDouble}" fill="${colorDoubleTriple}" class="tn-board-sector" data-dt-val="${num}" data-dt-mod="2" />`);
+
+  const pText = polarToCartesian(cx, cy, 148, idx * 18);
+  parts.push(`<text x="${pText.x}" y="${pText.y}" fill="#fff" font-size="10" font-weight="800" text-anchor="middle" dominant-baseline="central" transform="rotate(${idx * 18}, ${pText.x}, ${pText.y})">${num}</text>`);
+}
+
+export function buildDartboardSVG(cx: number, cy: number): string {
+  const parts: string[] = [];
+  parts.push(`<circle cx="${cx}" cy="${cy}" r="160" fill="#0d1118" />`);
+  parts.push(`<circle cx="${cx}" cy="${cy}" r="18" fill="#2e7d32" class="tn-board-sector" data-dt-val="25" data-dt-mod="1" />`);
+  parts.push(`<circle cx="${cx}" cy="${cy}" r="8" fill="#ef4444" class="tn-board-sector" data-dt-val="50" data-dt-mod="2" />`);
+  for (let i = 0; i < 20; i++) {
+    buildSector(cx, cy, i, parts);
+  }
+  return parts.join('\n');
+}