@jjlmoya/utils-sports 1.36.0 → 1.41.0

package/package.json

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

package/src/category/index.ts

@@ -10,6 +10,7 @@ import { pingPongScoreKeeper } from '../tool/pingPongScoreKeeper/entry';
 import { rugbyScoreKeeper } from '../tool/rugbyScoreKeeper/entry';
 import { baseballScoreKeeper } from '../tool/baseballScoreKeeper/entry';
 import { penaltyShootout } from '../tool/penaltyShootout/entry';
+import { swimCssCalculator } from '../tool/swimCssCalculator/entry';
 
 export const sportsCategory: SportsCategoryEntry = {
   icon: 'mdi:soccer',
@@ -25,6 +26,7 @@ export const sportsCategory: SportsCategoryEntry = {
     rugbyScoreKeeper,
     baseballScoreKeeper,
     penaltyShootout,
+    swimCssCalculator,
   ] as unknown as SportsToolEntry<Record<string, string>>[],
   i18n: {
     es: () => import('./i18n/es').then((m) => m.content),

package/src/entries.ts

@@ -32,6 +32,10 @@ export { baseballScoreKeeper } from './tool/baseballScoreKeeper/entry';
 export type { BaseballScoreKeeperLocaleContent } from './tool/baseballScoreKeeper/entry';
 export { penaltyShootout } from './tool/penaltyShootout/entry';
 export type { PenaltyShootoutLocaleContent } from './tool/penaltyShootout/entry';
+export { runningPacePredictor } from './tool/runningPacePredictor/entry';
+export type { RunningPacePredictorLocaleContent } from './tool/runningPacePredictor/entry';
+export { swimCssCalculator } from './tool/swimCssCalculator/entry';
+export type { SwimCssCalculatorLocaleContent } from './tool/swimCssCalculator/entry';
 
 export { sportsCategory } from './category';
 
@@ -52,6 +56,8 @@ import { snookerScoreKeeper } from './tool/snookerScoreKeeper/entry';
 import { rugbyScoreKeeper } from './tool/rugbyScoreKeeper/entry';
 import { baseballScoreKeeper } from './tool/baseballScoreKeeper/entry';
 import { penaltyShootout } from './tool/penaltyShootout/entry';
+import { runningPacePredictor } from './tool/runningPacePredictor/entry';
+import { swimCssCalculator } from './tool/swimCssCalculator/entry';
 
 export const ALL_ENTRIES = [
   basketScoreKeeper,
@@ -71,4 +77,6 @@ export const ALL_ENTRIES = [
   rugbyScoreKeeper,
   baseballScoreKeeper,
   penaltyShootout,
+  runningPacePredictor,
+  swimCssCalculator,
 ];

package/src/tests/locale_completeness.test.ts

@@ -1,8 +1,29 @@
 import { describe, it, expect } from 'vitest';
 import { ALL_TOOLS } from '../tools';
+import type { ToolLocaleContent } from '../types';
 
-describe('Locale Completeness Validation', () => {
-  it('all tools registered', () => {
-    expect(ALL_TOOLS.length).toBe(17);
+describe('Locale Completeness and Slug Validation', () => {
+  it('all tools registered in ALL_TOOLS', () => {
+    expect(ALL_TOOLS.length).toBeGreaterThan(0);
+  });
+
+  ALL_TOOLS.forEach((tool) => {
+    describe(`Tool entry: ${tool.entry.id}`, () => {
+      it('every registered locale content must have a valid non-empty slug', async () => {
+        const locales = Object.keys(tool.entry.i18n);
+        expect(locales.length).toBeGreaterThan(0);
+
+        for (const locale of locales) {
+          const loader = tool.entry.i18n[locale as keyof typeof tool.entry.i18n];
+          expect(loader).toBeDefined();
+          const content = (await loader?.()) as ToolLocaleContent;
+          expect(content, `Locale "${locale}" for tool "${tool.entry.id}" failed to load content object`).toBeDefined();
+          expect(content.slug, `Locale "${locale}" for tool "${tool.entry.id}" has undefined or empty slug`).toBeDefined();
+          expect(typeof content.slug).toBe('string');
+          expect(content.slug.length).toBeGreaterThan(0);
+          expect(content.title, `Locale "${locale}" for tool "${tool.entry.id}" has undefined title`).toBeDefined();
+        }
+      });
+    });
   });
 });

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 17 tools in ALL_TOOLS', () => {
-      expect(ALL_TOOLS.length).toBe(17);
+    it('should have tools registered in ALL_TOOLS', () => {
+      expect(ALL_TOOLS.length).toBeGreaterThan(0);
     });
 
     it('sportsCategory should be defined', () => {

package/src/tool/runningPacePredictor/bibliography.astro

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

package/src/tool/runningPacePredictor/bibliography.ts

@@ -0,0 +1,14 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliographyEntries: BibliographyEntry[] = [
+  {
+    name: 'Peter Riegel Race Time Prediction Model',
+    url: 'https://en.wikipedia.org/wiki/Peter_Riegel',
+  },
+  {
+    name: 'World Athletics Official Competition Rules',
+    url: 'https://worldathletics.org',
+  },
+];
+
+export const bibliography = bibliographyEntries;

package/src/tool/runningPacePredictor/component.astro

@@ -0,0 +1,301 @@
+---
+import type { RunningPacePredictorUI } from './ui';
+import './running-pace-predictor.css';
+
+interface Props {
+  ui: RunningPacePredictorUI;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="rpp-container">
+  <div class="rpp-unit-switch-container">
+    <button class="rpp-btn-unit active" data-unit="km">{ui.unitKm}</button>
+    <button class="rpp-btn-unit" data-unit="mi">{ui.unitMiles}</button>
+  </div>
+
+  <div class="rpp-calculator-card">
+    <div class="rpp-card-header">
+      <h2 class="rpp-card-title">{ui.paceCalculatorTitle}</h2>
+    </div>
+
+    <div class="rpp-presets-bar">
+      <span class="rpp-presets-title">{ui.presetsTitle}:</span>
+      <button class="rpp-btn-preset" data-dist="5">5K</button>
+      <button class="rpp-btn-preset active" data-dist="10">10K</button>
+      <button class="rpp-btn-preset" data-dist="21.0975">Half Marathon</button>
+      <button class="rpp-btn-preset" data-dist="42.195">Marathon</button>
+    </div>
+
+    <div class="rpp-inputs-grid">
+      <div class="rpp-custom-dist-container">
+        <div style="flex:1;">
+          <div class="rpp-stepper-title">{ui.distanceLabel}</div>
+          <input type="number" id="rpp-distance" class="rpp-custom-dist-input" value="10" step="0.01" min="0.1" aria-label={ui.distanceLabel} />
+        </div>
+        <span class="rpp-custom-dist-unit" id="rpp-dist-unit-label">km</span>
+      </div>
+
+      <div class="rpp-stepper-card">
+        <div class="rpp-stepper-header">
+          <span class="rpp-stepper-title">{ui.timeLabel}</span>
+          <span class="rpp-stepper-value" id="rpp-time-display">00:50:00</span>
+        </div>
+
+        <input type="hidden" id="rpp-total-seconds" value="3000" />
+
+        <div class="rpp-stepper-controls">
+          <button class="rpp-btn-step" data-step="-300">-5m</button>
+          <button class="rpp-btn-step" data-step="-60">-1m</button>
+          <button class="rpp-btn-step" data-step="60">+1m</button>
+          <button class="rpp-btn-step" data-step="300">+5m</button>
+        </div>
+      </div>
+    </div>
+
+    <div class="rpp-hero-pace-card">
+      <div class="rpp-hero-pace-label">{ui.paceLabel}</div>
+      <div class="rpp-hero-pace-value" id="rpp-hero-pace-display">5:00 min/km</div>
+    </div>
+  </div>
+
+  <div class="rpp-predictions-section">
+    <h3 class="rpp-section-title">{ui.racePredictorTitle}</h3>
+    <p class="rpp-section-subtitle">{ui.riegelExplanation}</p>
+    <div class="rpp-pred-grid" id="rpp-predictions-cards"></div>
+  </div>
+
+  <div class="rpp-zones-section">
+    <h3 class="rpp-section-title">{ui.trainingZonesTitle}</h3>
+    <div class="rpp-zones-grid" id="rpp-zones-cards"></div>
+  </div>
+</div>
+
+<script>
+  import {
+    calculatePaceFromTimeAndDistance,
+    generateAllRacePredictions,
+    calculateTrainingZones,
+    formatPace,
+    formatTimeHMS,
+  } from './logic';
+
+  let currentUnit = 'km';
+
+  function renderPredictions(predictions: ReturnType<typeof generateAllRacePredictions>, isMiles: boolean, unitStr: string) {
+    const predCards = document.getElementById('rpp-predictions-cards');
+    if (!predCards) return;
+    const maxDist = 42.195;
+    predCards.innerHTML = predictions
+      .map((p) => {
+        const pDistStr = isMiles ? `${p.distanceMiles.toFixed(2)} mi` : `${p.distanceKm.toFixed(2)} km`;
+        const pPace = isMiles ? formatPace(p.paceSecPerMile) : formatPace(p.paceSecPerKm);
+        const percent = Math.min(100, Math.round((p.distanceKm / maxDist) * 100));
+        return `
+          <div class="rpp-pred-card">
+            <div class="rpp-pred-card-top">
+              <div>
+                <div class="rpp-pred-dist">${p.id.toUpperCase()} <span style="font-size:0.8rem; color:#94a3b8; font-weight:600;">(${pDistStr})</span></div>
+                <div style="font-size:0.85rem; color:#94a3b8; font-weight:700; margin-top:0.1rem;">${pPace} ${unitStr}</div>
+              </div>
+              <div class="rpp-pred-time">${formatTimeHMS(p.timeSeconds)}</div>
+            </div>
+            <div class="rpp-pred-bar-bg">
+              <div class="rpp-pred-bar-fill" style="width: ${percent}%;"></div>
+            </div>
+          </div>
+        `;
+      })
+      .join('');
+  }
+
+  function renderZones(fiveKPace: number, isMiles: boolean, unitStr: string) {
+    const zonesCards = document.getElementById('rpp-zones-cards');
+    if (!zonesCards) return;
+    const zones = calculateTrainingZones(fiveKPace);
+    zonesCards.innerHTML = zones
+      .map((z) => {
+        const minP = isMiles ? formatPace(z.minPaceSecPerMile) : formatPace(z.minPaceSecPerKm);
+        const maxP = isMiles ? formatPace(z.maxPaceSecPerMile) : formatPace(z.maxPaceSecPerKm);
+        return `
+          <div class="rpp-zone-card">
+            <div class="rpp-zone-header">
+              <span class="rpp-zone-pill rpp-zone-pill-${z.id}">${z.id.toUpperCase()}</span>
+              <span class="rpp-zone-range">${minP} - ${maxP} ${unitStr}</span>
+            </div>
+            <div class="rpp-zone-bar-bg">
+              <div class="rpp-zone-bar-${z.id}"></div>
+            </div>
+          </div>
+        `;
+      })
+      .join('');
+  }
+
+  function getRequiredElements() {
+    const distInput = document.getElementById('rpp-distance') as HTMLInputElement | null;
+    const secInput = document.getElementById('rpp-total-seconds') as HTMLInputElement | null;
+    const timeDisplay = document.getElementById('rpp-time-display');
+    const heroPaceDisplay = document.getElementById('rpp-hero-pace-display');
+    const distUnitLabel = document.getElementById('rpp-dist-unit-label');
+
+    const hasAll = Boolean(distInput && secInput && timeDisplay && heroPaceDisplay && distUnitLabel);
+    return hasAll ? { distInput: distInput!, secInput: secInput!, timeDisplay: timeDisplay!, heroPaceDisplay: heroPaceDisplay!, distUnitLabel: distUnitLabel! } : null;
+  }
+
+  function getCoreInputs() {
+    const els = getRequiredElements();
+    if (!els) return null;
+
+    const isMiles = currentUnit === 'mi';
+    const rawDist = parseFloat(els.distInput.value) || 0;
+    const totalSec = Math.max(0, parseInt(els.secInput.value) || 0);
+
+    return {
+      distKm: isMiles ? rawDist * 1.609344 : rawDist,
+      totalSec,
+      isMiles,
+      timeDisplay: els.timeDisplay,
+      heroPaceDisplay: els.heroPaceDisplay,
+      distUnitLabel: els.distUnitLabel,
+    };
+  }
+
+  function updateApp() {
+    const ctx = getCoreInputs();
+    if (!ctx) return;
+
+    ctx.distUnitLabel.textContent = ctx.isMiles ? 'miles' : 'km';
+    ctx.timeDisplay.textContent = formatTimeHMS(ctx.totalSec);
+
+    const pace = calculatePaceFromTimeAndDistance(ctx.totalSec, ctx.distKm);
+    const mainPaceFormatted = ctx.isMiles ? formatPace(pace.secPerMile) : formatPace(pace.secPerKm);
+    const unitStr = ctx.isMiles ? 'min/mile' : 'min/km';
+    ctx.heroPaceDisplay.textContent = `${mainPaceFormatted} ${unitStr}`;
+
+    const predictions = generateAllRacePredictions(ctx.distKm, ctx.totalSec);
+    renderPredictions(predictions, ctx.isMiles, unitStr);
+
+    const fiveKPred = predictions.find((p) => p.id === '5k');
+    renderZones(fiveKPred ? fiveKPred.paceSecPerKm : pace.secPerKm, ctx.isMiles, unitStr);
+  }
+
+  const STORAGE_KEY = 'rpp_user_state';
+
+  function saveState() {
+    try {
+      const distInput = document.getElementById('rpp-distance') as HTMLInputElement;
+      const secInput = document.getElementById('rpp-total-seconds') as HTMLInputElement;
+      const activePreset = document.querySelector('.rpp-btn-preset.active')?.getAttribute('data-dist') || null;
+
+      const state = {
+        unit: currentUnit,
+        distance: distInput ? distInput.value : '10',
+        totalSeconds: secInput ? secInput.value : '3000',
+        activePreset,
+      };
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
+    } catch {
+      return;
+    }
+  }
+
+  function applySavedInputs(state: { unit?: string; distance?: string; totalSeconds?: string; activePreset?: string }) {
+    if (state.unit) {
+      currentUnit = state.unit;
+      document.querySelectorAll('.rpp-btn-unit').forEach((b) => {
+        b.classList.toggle('active', b.getAttribute('data-unit') === currentUnit);
+      });
+    }
+    if (state.distance) {
+      const distIn = document.getElementById('rpp-distance') as HTMLInputElement;
+      if (distIn) distIn.value = state.distance;
+    }
+    if (state.totalSeconds) {
+      const secInput = document.getElementById('rpp-total-seconds') as HTMLInputElement;
+      if (secInput) secInput.value = state.totalSeconds;
+    }
+    if (state.activePreset) {
+      document.querySelectorAll('.rpp-btn-preset').forEach((b) => {
+        b.classList.toggle('active', b.getAttribute('data-dist') === state.activePreset);
+      });
+    }
+  }
+
+  function loadState() {
+    try {
+      const raw = localStorage.getItem(STORAGE_KEY);
+      if (raw) {
+        applySavedInputs(JSON.parse(raw));
+      }
+    } catch {
+      return;
+    }
+  }
+
+  function bindDistAndStepEvents(onDistChange: () => void) {
+    const distInput = document.getElementById('rpp-distance');
+    if (distInput) {
+      distInput.addEventListener('input', onDistChange);
+      distInput.addEventListener('change', onDistChange);
+    }
+    document.querySelectorAll('.rpp-btn-step').forEach((btn) => {
+      btn.addEventListener('click', (e) => {
+        const delta = parseInt((e.currentTarget as HTMLElement).getAttribute('data-step') || '0');
+        const secInput = document.getElementById('rpp-total-seconds') as HTMLInputElement;
+        if (secInput) {
+          secInput.value = Math.max(0, (parseInt(secInput.value) || 0) + delta).toString();
+          onDistChange();
+        }
+      });
+    });
+  }
+
+  function onUnitBtnClick(e: Event, onDistChange: () => void) {
+    const target = e.currentTarget as HTMLElement;
+    const selectedUnit = target.getAttribute('data-unit') || 'km';
+    if (selectedUnit === currentUnit) return;
+
+    document.querySelectorAll('.rpp-btn-unit').forEach((b) => b.classList.remove('active'));
+    target.classList.add('active');
+
+    const distIn = document.getElementById('rpp-distance') as HTMLInputElement;
+    if (distIn) {
+      const currentVal = parseFloat(distIn.value) || 0;
+      distIn.value = selectedUnit === 'mi' ? (currentVal / 1.609344).toFixed(2) : (currentVal * 1.609344).toFixed(2);
+    }
+
+    currentUnit = selectedUnit;
+    onDistChange();
+  }
+
+  function onPresetBtnClick(e: Event, onDistChange: () => void) {
+    const target = e.currentTarget as HTMLElement;
+    document.querySelectorAll('.rpp-btn-preset').forEach((b) => b.classList.remove('active'));
+    target.classList.add('active');
+
+    const distKm = parseFloat(target.getAttribute('data-dist') || '0');
+    const distIn = document.getElementById('rpp-distance') as HTMLInputElement;
+    if (distIn && distKm > 0) {
+      distIn.value = currentUnit === 'mi' ? (distKm / 1.609344).toFixed(2) : distKm.toString();
+      onDistChange();
+    }
+  }
+
+  function bindEventListeners() {
+    const onDistChange = () => {
+      updateApp();
+      saveState();
+    };
+    bindDistAndStepEvents(onDistChange);
+    document.querySelectorAll('.rpp-btn-unit').forEach((b) => b.addEventListener('click', (e) => onUnitBtnClick(e, onDistChange)));
+    document.querySelectorAll('.rpp-btn-preset').forEach((b) => b.addEventListener('click', (e) => onPresetBtnClick(e, onDistChange)));
+  }
+
+  document.addEventListener('DOMContentLoaded', () => {
+    loadState();
+    bindEventListeners();
+    updateApp();
+  });
+</script>

package/src/tool/runningPacePredictor/entry.ts

@@ -0,0 +1,30 @@
+import type { SportsToolEntry, ToolLocaleContent } from '../../types';
+import type { RunningPacePredictorUI } from './ui';
+
+export type { RunningPacePredictorUI };
+export type RunningPacePredictorLocaleContent = ToolLocaleContent<RunningPacePredictorUI>;
+
+export const runningPacePredictor: SportsToolEntry<RunningPacePredictorUI> = {
+  id: 'running-pace-predictor',
+  icons: {
+    bg: 'mdi:run-fast',
+    fg: 'mdi:timer-outline',
+  },
+  i18n: {
+    es: () => import('./i18n/es').then((m) => m.content),
+    en: () => import('./i18n/en').then((m) => m.content),
+    fr: () => import('./i18n/fr').then((m) => m.content),
+    de: () => import('./i18n/de').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),
+  },
+};