@jjlmoya/utils-sports 1.32.0 → 1.34.0

package/package.json

@@ -1,13 +1,15 @@
 {
     "name": "@jjlmoya/utils-sports",
-    "version": "1.32.0",
+    "version": "1.34.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",
     "exports": {
         ".": "./src/index.ts",
         "./data": "./src/data.ts",
-        "./entries": "./src/entries.ts"
+        "./entries": "./src/entries.ts",
+        "./runtime/*": "./src/tool/*/index.ts",
+        "./category-seo": "./src/category/seo.astro"
     },
     "files": [
         "src",

package/src/category/index.ts

@@ -5,6 +5,7 @@ import { scoreKeeper } from '../tool/scoreKeeper/index';
 import { tournamentBracket } from '../tool/tournamentBracket/index';
 import { gymTracker } from '../tool/gymTracker/index';
 import { reactionTester } from '../tool/reactionTester/index';
+import { eloRatingCalculator } from '../tool/eloRatingCalculator/index';
 import { pingPongScoreKeeper } from '../tool/pingPongScoreKeeper/index';
 import { rugbyScoreKeeper } from '../tool/rugbyScoreKeeper/index';
 import { baseballScoreKeeper } from '../tool/baseballScoreKeeper/index';
@@ -18,6 +19,7 @@ export const sportsCategory: SportsCategoryEntry = {
     tournamentBracket,
     gymTracker,
     reactionTester,
+    eloRatingCalculator,
     pingPongScoreKeeper,
     rugbyScoreKeeper,
     baseballScoreKeeper,

package/src/entries.ts

@@ -8,6 +8,8 @@ export { pingPongScoreKeeper } from './tool/pingPongScoreKeeper/entry';
 export type { PingPongScoreKeeperLocaleContent } from './tool/pingPongScoreKeeper/entry';
 export { reactionTester } from './tool/reactionTester/entry';
 export type { ReactionTesterLocaleContent } from './tool/reactionTester/entry';
+export { eloRatingCalculator } from './tool/eloRatingCalculator/entry';
+export type { EloRatingCalculatorLocaleContent } from './tool/eloRatingCalculator/entry';
 export { scoreKeeper } from './tool/scoreKeeper/entry';
 export type { ScoreKeeperLocaleContent } from './tool/scoreKeeper/entry';
 export { tournamentBracket } from './tool/tournamentBracket/entry';
@@ -34,6 +36,7 @@ import { footballScoreKeeper } from './tool/footballScoreKeeper/entry';
 import { gymTracker } from './tool/gymTracker/entry';
 import { pingPongScoreKeeper } from './tool/pingPongScoreKeeper/entry';
 import { reactionTester } from './tool/reactionTester/entry';
+import { eloRatingCalculator } from './tool/eloRatingCalculator/entry';
 import { scoreKeeper } from './tool/scoreKeeper/entry';
 import { tournamentBracket } from './tool/tournamentBracket/entry';
 import { tennisScoreKeeper } from './tool/tennisScoreKeeper/entry';
@@ -44,5 +47,5 @@ import { beachVolleyballScoreKeeper } from './tool/beachVolleyballScoreKeeper/en
 import { snookerScoreKeeper } from './tool/snookerScoreKeeper/entry';
 import { rugbyScoreKeeper } from './tool/rugbyScoreKeeper/entry';
 import { baseballScoreKeeper } from './tool/baseballScoreKeeper/entry';
-export const ALL_ENTRIES = [basketScoreKeeper, footballScoreKeeper, gymTracker, pingPongScoreKeeper, reactionTester, scoreKeeper, tournamentBracket, tennisScoreKeeper, dartsScoreKeeper, padelScoreKeeper, streetballScoreKeeper, beachVolleyballScoreKeeper, snookerScoreKeeper, rugbyScoreKeeper, baseballScoreKeeper];
+export const ALL_ENTRIES = [basketScoreKeeper, footballScoreKeeper, gymTracker, pingPongScoreKeeper, reactionTester, eloRatingCalculator, scoreKeeper, tournamentBracket, tennisScoreKeeper, dartsScoreKeeper, padelScoreKeeper, streetballScoreKeeper, beachVolleyballScoreKeeper, snookerScoreKeeper, rugbyScoreKeeper, baseballScoreKeeper];
 

package/src/index.ts

@@ -29,3 +29,5 @@ export type { GymTrackerUI, GymTrackerLocaleContent } from './tool/gymTracker/in
 export { REACTION_TESTER_TOOL, reactionTester } from './tool/reactionTester/index';
 export type { ReactionTesterUI, ReactionTesterLocaleContent } from './tool/reactionTester/index';
 
+export { ELO_RATING_CALCULATOR_TOOL, eloRatingCalculator } from './tool/eloRatingCalculator/index';
+export type { EloRatingCalculatorUI, EloRatingCalculatorLocaleContent } from './tool/eloRatingCalculator/index';

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(15);
+    expect(ALL_TOOLS.length).toBe(16);
   });
 });

package/src/tests/pagespeed_best_practices.test.ts

@@ -0,0 +1,198 @@
+import { describe, expect, it } from 'vitest';
+import { readdirSync, readFileSync } from 'fs';
+import { join, relative } from 'path';
+import { ALL_TOOLS } from '../tools';
+import type { SEOSection, ToolLocaleContent } from '../types';
+
+const srcDir = join(process.cwd(), 'src');
+const toolDir = join(srcDir, 'tool');
+const geometryReads = [
+  'offsetWidth',
+  'offsetHeight',
+  'offsetTop',
+  'offsetLeft',
+  'clientWidth',
+  'clientHeight',
+  'clientTop',
+  'clientLeft',
+  'scrollWidth',
+  'scrollHeight',
+  'scrollTop',
+  'scrollLeft',
+  'getBoundingClientRect',
+  'getClientRects',
+  'computedStyle',
+  'getComputedStyle',
+];
+const domWrites = [
+  '.style.',
+  '.classList.add',
+  '.classList.remove',
+  '.classList.toggle',
+  '.appendChild',
+  '.insertBefore',
+  '.prepend',
+  '.append',
+  '.remove',
+  '.innerHTML',
+  '.textContent',
+  '.setAttribute',
+];
+
+function findFiles(dir: string, extensions: string[]): string[] {
+  const files: string[] = [];
+  for (const entry of readdirSync(dir, { withFileTypes: true })) {
+    const fullPath = join(dir, entry.name);
+    if (entry.isDirectory()) files.push(...findFiles(fullPath, extensions));
+    else if (extensions.some((extension) => entry.name.endsWith(extension))) files.push(fullPath);
+  }
+  return files;
+}
+
+function relativePath(file: string): string {
+  return relative(process.cwd(), file).replace(/\\/g, '/');
+}
+
+function findFormControls(content: string, tagName: 'input' | 'select'): RegExpMatchArray[] {
+  return Array.from(content.matchAll(new RegExp(`<${tagName}\\b[^>]*>`, 'gi')));
+}
+
+function attrValue(tag: string, attr: string): string | null {
+  const match = tag.match(new RegExp(`\\b${attr}\\s*=\\s*(?:"([^"]+)"|'([^']+)'|\\{([^}]+)\\})`, 'i'));
+  return match?.[1] ?? match?.[2] ?? match?.[3] ?? null;
+}
+
+function booleanAttr(tag: string, attr: string): boolean {
+  return new RegExp(`\\b${attr}\\b`, 'i').test(tag);
+}
+
+function controlStartIndex(content: string, tag: RegExpMatchArray): number {
+  return tag.index ?? content.indexOf(tag[0]);
+}
+
+function hasWrappingLabel(content: string, tag: RegExpMatchArray): boolean {
+  const index = controlStartIndex(content, tag);
+  const before = content.slice(0, index);
+  const labelOpen = before.lastIndexOf('<label');
+  const labelClose = before.lastIndexOf('</label>');
+  const nextLabelClose = content.indexOf('</label>', index + tag[0].length);
+  return labelOpen > labelClose && nextLabelClose !== -1;
+}
+
+function hasAccessibleName(content: string, tag: RegExpMatchArray): boolean {
+  const source = tag[0];
+  if (attrValue(source, 'aria-label')) return true;
+  if (attrValue(source, 'aria-labelledby')) return true;
+  const id = attrValue(source, 'id');
+  if (id && hasExplicitLabel(content, id)) return true;
+  return hasWrappingLabel(content, tag);
+}
+
+function isVisuallyHiddenFileInput(tag: string): boolean {
+  const type = attrValue(tag, 'type')?.toLowerCase() ?? 'text';
+  const attributes = `${attrValue(tag, 'style') ?? ''} ${attrValue(tag, 'class') ?? ''}`.toLowerCase();
+  const hiddenPatterns = ['display:none', 'display: none', 'file-input'];
+  return type === 'file' && hiddenPatterns.some((pattern) => attributes.includes(pattern));
+}
+
+function isIgnoredInput(tag: string): boolean {
+  const type = attrValue(tag, 'type')?.toLowerCase() ?? 'text';
+  return ['hidden', 'button', 'submit', 'reset'].includes(type) || booleanAttr(tag, 'aria-hidden') || isVisuallyHiddenFileInput(tag);
+}
+
+function controlFailures(content: string, tagName: 'input' | 'select'): string[] {
+  return findFormControls(content, tagName)
+    .filter((tag) => tagName !== 'input' || !isIgnoredInput(tag[0]))
+    .filter((tag) => !hasAccessibleName(content, tag))
+    .map((tag) => tag[0]);
+}
+
+function explicitLabelMessage(tagName: string, path: string, failures: string[]): string {
+  return `${tagName} controls without label, wrapping label, aria-label or aria-labelledby in ${path}:\n${failures.join('\n')}`;
+}
+
+function hasExplicitLabel(content: string, id: string): boolean {
+  const escapedId = id.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  return (
+    new RegExp(`<label\\b[^>]*\\bfor\\s*=\\s*["']${escapedId}["'][^>]*>`, 'i').test(content)
+    || new RegExp(`<label\\b[^>]*\\bfor\\s*=\\s*\\{${escapedId}\\}[^>]*>`, 'i').test(content)
+  );
+}
+
+function headingLevels(sections: SEOSection[]): number[] {
+  return sections
+    .filter((section) => section.type === 'title')
+    .map((section) => Number('level' in section ? section.level : 0))
+    .filter((level) => Number.isInteger(level) && level > 0);
+}
+
+function findHeadingLevelJumps(levels: number[]): string[] {
+  const failures: string[] = [];
+  levels.forEach((level, index) => {
+    const previous = index === 0 ? 1 : levels[index - 1];
+    if (previous && level > previous + 1) {
+      failures.push(`h${previous} -> h${level}`);
+    }
+  });
+  return failures;
+}
+
+function hasDomWriteBeforeGeometryRead(content: string): boolean {
+  const normalized = content.replace(/\s+/g, ' ');
+  return domWrites.some((write) => {
+    const writeIndex = normalized.indexOf(write);
+    if (writeIndex === -1) return false;
+    return geometryReads.some((read) => normalized.indexOf(read, writeIndex + write.length) !== -1);
+  });
+}
+
+describe('PageSpeed best-practice guards', () => {
+  const astroToolFiles = findFiles(toolDir, ['.astro']);
+  const scriptFiles = findFiles(toolDir, ['.astro', '.ts', '.js']);
+
+  astroToolFiles.forEach((file) => {
+    const displayPath = relativePath(file);
+
+    it(`${displayPath} labels every input with an explicit label`, () => {
+      const content = readFileSync(file, 'utf-8');
+      const failures = controlFailures(content, 'input');
+
+      expect(failures, explicitLabelMessage('Input', displayPath, failures)).toEqual([]);
+    });
+
+    it(`${displayPath} labels every select with an explicit label`, () => {
+      const content = readFileSync(file, 'utf-8');
+      const failures = controlFailures(content, 'select');
+
+      expect(failures, explicitLabelMessage('Select', displayPath, failures)).toEqual([]);
+    });
+  });
+
+  ALL_TOOLS.forEach((tool) => {
+    Object.entries(tool.entry.i18n).forEach(([locale, loader]) => {
+      it(`${tool.entry.id}/${locale} keeps SEO headings sequential`, async () => {
+        if (!loader) return;
+        const content = (await loader()) as ToolLocaleContent;
+        const levels = headingLevels(content.seo);
+        const failures = findHeadingLevelJumps(levels);
+
+        expect(
+          failures,
+          `SEO headings in ${tool.entry.id}/${locale} skip levels: ${failures.join(', ')}`,
+        ).toEqual([]);
+      });
+    });
+  });
+
+  scriptFiles.forEach((file) => {
+    const displayPath = relativePath(file);
+
+    it(`${displayPath} avoids static forced-reflow patterns`, () => {
+      const content = readFileSync(file, 'utf-8');
+      expect(
+        hasDomWriteBeforeGeometryRead(content),
+        `${displayPath} appears to read layout geometry after DOM/style mutations. Split writes and reads across frames or measure before mutating.`,
+      ).toBe(false);
+    });
+  });
+});

package/src/tests/tool_validation.test.ts

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

package/src/tool/baseballScoreKeeper/component.astro

@@ -17,14 +17,14 @@ const t = (ui ?? {}) as BaseballScoreKeeperUI;
 
     <div class="bb-strip">
       <div class="bb-team">
-        <input type="text" class="bb-name" id="bb-name-away" value={t.away} />
+        <input type="text" class="bb-name" id="bb-name-away" value={t.away} aria-label={t.away} />
         <div class="bb-score" id="bb-score-away">0</div>
       </div>
       <div class="bb-divider">
         <span class="bb-inning-badge" id="bb-inning-label">Top 1</span>
       </div>
       <div class="bb-team">
-        <input type="text" class="bb-name" id="bb-name-home" value={t.home} />
+        <input type="text" class="bb-name" id="bb-name-home" value={t.home} aria-label={t.home} />
         <div class="bb-score" id="bb-score-home">0</div>
       </div>
     </div>

package/src/tool/basketScoreKeeper/component.astro

@@ -33,7 +33,7 @@ const t = (ui ?? {}) as BasketScoreKeeperUI;
 
   <div class="bk-team" id="bk-team-a">
     <div class="bk-team-top">
-      <input type="text" value={t.playerA} class="bk-name" />
+      <input type="text" value={t.playerA} class="bk-name" aria-label={t.playerA} />
       <div id="bk-fire-a" class="bk-fire"></div>
       <div id="bk-streak-a" class="bk-streak"><span id="bk-streak-val-a" class="bk-streak-val"></span></div>
     </div>
@@ -59,7 +59,7 @@ const t = (ui ?? {}) as BasketScoreKeeperUI;
     <div class="bk-team-top bk-team-top-right">
       <div id="bk-streak-b" class="bk-streak"><span id="bk-streak-val-b" class="bk-streak-val"></span></div>
       <div id="bk-fire-b" class="bk-fire"></div>
-      <input type="text" value={t.playerB} class="bk-name bk-name-right" />
+      <input type="text" value={t.playerB} class="bk-name bk-name-right" aria-label={t.playerB} />
     </div>
     <div id="bk-particles-b" class="bk-particles"></div>
     <div class="bk-score-stack" id="bk-stack-b">

package/src/tool/basketScoreKeeper/logic.ts

@@ -1,5 +1,6 @@
 import type { BasketScoreKeeperUI } from './ui';
 const g = (id: string) => document.getElementById(id);
+const _bcr = (el: Element) => el.getBoundingClientRect();
 const COLORS: Record<number, string> = { 1: '#22c55e', 2: '#f97316', 3: '#ef4444' };
 const MIX = ['#facc15', '#a78bfa', '#22d3ee', '#f472b6'];
 const ANIMS = ['split', 'boom', 'spin', 'stretch', 'drop'];
@@ -25,10 +26,8 @@ function addDot(container: HTMLElement, cx: number, cy: number, color: string) {
   container.appendChild(d); setTimeout(() => d.remove(), 1200);
 }
 
-function burst(container: HTMLElement | null, val: number, e?: PointerEvent) {
+function burst(container: HTMLElement | null, val: number, cx: number, cy: number) {
   if (!container) return;
-  let cx = 50, cy = 50;
-  if (e) { const r = container.getBoundingClientRect(); cx = ((e.clientX - r.left) / r.width) * 100; cy = ((e.clientY - r.top) / r.height) * 100; }
   const color = COLORS[val] ?? '#fff';
   const count = 6 + val * 2;
   for (let i = 0; i < count; i++) {
@@ -72,7 +71,7 @@ class BasketGame {
   private setText(el: HTMLElement | null, v: string) { if (el) el.innerText = v; }
 
   private re(el: HTMLElement | null, cls: string) {
-    if (!el) return; el.classList.remove(cls); void el.offsetWidth; el.classList.add(cls);
+    if (!el) return; el.classList.remove(cls); requestAnimationFrame(() => el.classList.add(cls));
   }
 
   private bind() {
@@ -116,10 +115,17 @@ class BasketGame {
   }
 
   addScore(team: 'A' | 'B', val: number, e?: Event) {
-    this.score(team, val); this.streak(team, val);
     const isA = team === 'A';
-    this.flip(isA ? this.u.sA : this.u.sB, isA ? this.u.stA : this.u.stB, String(this.sVal(team)));
-    burst(isA ? this.u.pA : this.u.pB, val, e as PointerEvent);
+    const particlesContainer = isA ? this.u.pA : this.u.pB;
+    let cx = 50, cy = 50;
+    if (e && particlesContainer) {
+      const r = _bcr(particlesContainer);
+      cx = ((e.clientX - r.left) / r.width) * 100;
+      cy = ((e.clientY - r.top) / r.height) * 100;
+    }
+    this.score(team, val); this.streak(team, val);
+    this.flip(isA ? this.u.sA : this.u.stA, isA ? this.u.stA : this.u.stB, String(this.sVal(team)));
+    burst(particlesContainer, val, cx, cy);
     if (val >= 3) { this.re(isA ? this.u.tA : this.u.tB, 'bk-shake-card'); }
     this.screenFlash(val); this.vibe(val); this.render();
   }

package/src/tool/beachVolleyballScoreKeeper/component.astro

@@ -130,13 +130,13 @@ const t = (ui ?? {}) as BeachVolleyballUI;
         <div class="tn-lineup-grid">
           <div class="tn-lineup-team-section">
             <span class="tn-team-name-hdr">{t.teamA}</span>
-            <input type="text" class="tn-beach-input" id="tn-name-a1" placeholder={t.player1} />
-            <input type="text" class="tn-beach-input" id="tn-name-a2" placeholder={t.player2} />
+            <input type="text" class="tn-beach-input" id="tn-name-a1" placeholder={t.player1} aria-label={`${t.teamA} ${t.player1}`} />
+            <input type="text" class="tn-beach-input" id="tn-name-a2" placeholder={t.player2} aria-label={`${t.teamA} ${t.player2}`} />
           </div>
           <div class="tn-lineup-team-section">
             <span class="tn-team-name-hdr">{t.teamB}</span>
-            <input type="text" class="tn-beach-input" id="tn-name-b1" placeholder={t.player1} />
-            <input type="text" class="tn-beach-input" id="tn-name-b2" placeholder={t.player2} />
+            <input type="text" class="tn-beach-input" id="tn-name-b1" placeholder={t.player1} aria-label={`${t.teamB} ${t.player1}`} />
+            <input type="text" class="tn-beach-input" id="tn-name-b2" placeholder={t.player2} aria-label={`${t.teamB} ${t.player2}`} />
           </div>
         </div>
         <button class="tn-btn-control" id="tn-close-lineup-btn">Done</button>

package/src/tool/beachVolleyballScoreKeeper/logic.ts

@@ -48,8 +48,7 @@ function triggerUndoAnimation(): void {
   const card = el('tn-card');
   if (card) {
     card.classList.remove('tn-undo-anim');
-    void card.offsetWidth;
-    card.classList.add('tn-undo-anim');
+    requestAnimationFrame(() => card.classList.add('tn-undo-anim'));
     setTimeout(() => card.classList.remove('tn-undo-anim'), 300);
   }
 }
@@ -138,11 +137,9 @@ function handleBaseClicks(e: MouseEvent, ctrl: BeachController): void {
   const courtHalfB = target.closest('#tn-court-half-b');
 
   if (courtHalfA) {
-    const team = ctrl.ctx.state.swappedCourt ? 'b' : 'a';
-    ctrl.addPoint(team, e.clientX, e.clientY);
+    ctrl.addPoint('a', e.clientX, e.clientY);
   } else if (courtHalfB) {
-    const team = ctrl.ctx.state.swappedCourt ? 'a' : 'b';
-    ctrl.addPoint(team, e.clientX, e.clientY);
+    ctrl.addPoint('b', e.clientX, e.clientY);
   }
 }
 
@@ -161,6 +158,7 @@ function bindInteractions(ctrl: BeachController): void {
   document.addEventListener('click', (e) => {
     const target = e.target as HTMLElement;
     handleBaseClicks(e, ctrl);
+    if (target.closest('#tn-court-half-a') || target.closest('#tn-court-half-b')) return;
     handleActionClicks(target, ctrl);
   });
 }

package/src/tool/beachVolleyballScoreKeeper/render.ts

@@ -25,41 +25,42 @@ export function releaseWakeLock(): void {
   }
 }
 
+export function spawnSandSplash(x: number, y: number): void {
+  const container = el('tn-particle-container');
+  if (!container) return;
+  requestAnimationFrame(() => {
+    const rect = container.getBoundingClientRect();
+    const relX = x - rect.left;
+    const relY = y - rect.top;
+
+    const colors = ['#f4d06f', '#f7d684', '#e9c46a', '#e0b54d', '#f8dd95'];
+    for (let i = 0; i < 12; i++) {
+      const dot = document.createElement('div');
+      dot.className = 'tn-sand-particle';
+      dot.style.left = `${relX}px`;
+      dot.style.top = `${relY}px`;
+      dot.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
+      const angle = Math.random() * Math.PI * 2;
+      const distance = 20 + Math.random() * 40;
+      const tx = Math.cos(angle) * distance;
+      const ty = -30 - Math.random() * 50;
+      dot.style.setProperty('--tx', `${tx}px`);
+      dot.style.setProperty('--ty', `${ty}px`);
+      container.appendChild(dot);
+      setTimeout(() => dot.remove(), 800);
+    }
+  });
+}
+
 export function triggerScreenShake(): void {
   const card = el('tn-card');
   if (card) {
     card.classList.remove('tn-shaking');
-    void card.offsetWidth;
-    card.classList.add('tn-shaking');
+    requestAnimationFrame(() => card.classList.add('tn-shaking'));
     setTimeout(() => card.classList.remove('tn-shaking'), 300);
   }
 }
 
-export function spawnSandSplash(x: number, y: number): void {
-  const container = el('tn-particle-container');
-  if (!container) return;
-  const rect = container.getBoundingClientRect();
-  const relX = x - rect.left;
-  const relY = y - rect.top;
-
-  const colors = ['#f4d06f', '#f7d684', '#e9c46a', '#e0b54d', '#f8dd95'];
-  for (let i = 0; i < 12; i++) {
-    const dot = document.createElement('div');
-    dot.className = 'tn-sand-particle';
-    dot.style.left = `${relX}px`;
-    dot.style.top = `${relY}px`;
-    dot.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
-    const angle = Math.random() * Math.PI * 2;
-    const distance = 20 + Math.random() * 40;
-    const tx = Math.cos(angle) * distance;
-    const ty = -30 - Math.random() * 50;
-    dot.style.setProperty('--tx', `${tx}px`);
-    dot.style.setProperty('--ty', `${ty}px`);
-    container.appendChild(dot);
-    setTimeout(() => dot.remove(), 800);
-  }
-}
-
 function updateSingleTeamServer(isA: boolean, team: 'a' | 'b', server: number): void {
   const activeTeam = isA === (team === 'a');
   const s1 = el(`tn-serve-${team}1`);
@@ -104,8 +105,7 @@ function renderScores(state: BeachVolleyballState): void {
     scoreA.textContent = state.teamA.score.toString();
     if (state.teamA.score !== lastScoreA) {
       scoreA.classList.remove('tn-pop-anim');
-      void scoreA.offsetWidth;
-      scoreA.classList.add('tn-pop-anim');
+      requestAnimationFrame(() => scoreA.classList.add('tn-pop-anim'));
       setTimeout(() => scoreA.classList.remove('tn-pop-anim'), 300);
       triggerScreenShake();
     }
@@ -114,8 +114,7 @@ function renderScores(state: BeachVolleyballState): void {
     scoreB.textContent = state.teamB.score.toString();
     if (state.teamB.score !== lastScoreB) {
       scoreB.classList.remove('tn-pop-anim');
-      void scoreB.offsetWidth;
-      scoreB.classList.add('tn-pop-anim');
+      requestAnimationFrame(() => scoreB.classList.add('tn-pop-anim'));
       setTimeout(() => scoreB.classList.remove('tn-pop-anim'), 300);
       triggerScreenShake();
     }

package/src/tool/dartsScoreKeeper/component.astro

@@ -39,7 +39,7 @@ const t = (ui ?? {}) as DartsScoreKeeperUI;
   <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" />
+        <input type="text" value={t.playerA} class="tn-player-input" id="tn-name-a" aria-label={t.playerA} />
       </div>
       <div class="tn-big-score" id="tn-score-a">501</div>
       <div class="tn-player-stats">
@@ -54,7 +54,7 @@ const t = (ui ?? {}) as DartsScoreKeeperUI;
 
     <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" />
+        <input type="text" value={t.playerB} class="tn-player-input" id="tn-name-b" aria-label={t.playerB} />
       </div>
       <div class="tn-big-score" id="tn-score-b">501</div>
       <div class="tn-player-stats">

package/src/tool/eloRatingCalculator/bibliography.astro

@@ -0,0 +1,6 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { bibliography } from './bibliography';
+---
+
+<SharedBibliography links={bibliography} />

package/src/tool/eloRatingCalculator/bibliography.ts

@@ -0,0 +1,16 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'The Elo Rating System and its Applications',
+    url: 'https://www.researchgate.net/publication/338235833_The_Elo_Rating_System_and_its_Applications',
+  },
+  {
+    name: 'US Chess Ratings and the K Factor',
+    url: 'https://new.uschess.org/news/rating-system',
+  },
+  {
+    name: 'FIDE Rating Regulations',
+    url: 'https://handbook.fide.com/chapter/B022024',
+  },
+];