@jjlmoya/utils-sports 1.50.0 → 1.51.0

package/package.json

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

package/src/category/index.ts

@@ -13,6 +13,7 @@ import { penaltyShootout } from '../tool/penaltyShootout/entry';
 import { swimCssCalculator } from '../tool/swimCssCalculator/entry';
 import { vo2MaxCalculator } from '../tool/vo2MaxCalculator/entry';
 import { roundRobinLeagueManager } from '../tool/roundRobinLeagueManager/entry';
+import { caloriesBurnedCalculator } from '../tool/caloriesBurnedCalculator/entry';
 
 export const sportsCategory: SportsCategoryEntry = {
   icon: 'mdi:soccer',
@@ -31,6 +32,7 @@ export const sportsCategory: SportsCategoryEntry = {
     swimCssCalculator,
     vo2MaxCalculator,
     roundRobinLeagueManager,
+    caloriesBurnedCalculator,
   ] as unknown as SportsToolEntry<Record<string, string>>[],
   i18n: {
     es: () => import('./i18n/es').then((m) => m.content),

package/src/entries.ts

@@ -67,6 +67,7 @@ import { swimCssCalculator } from './tool/swimCssCalculator/entry';
 import { volleyballScoreKeeper } from './tool/volleyballScoreKeeper/entry';
 import { vo2MaxCalculator } from './tool/vo2MaxCalculator/entry';
 import { roundRobinLeagueManager } from './tool/roundRobinLeagueManager/entry';
+import { caloriesBurnedCalculator } from './tool/caloriesBurnedCalculator/entry';
 
 export const ALL_ENTRIES = [
   basketScoreKeeper,
@@ -91,4 +92,5 @@ export const ALL_ENTRIES = [
   volleyballScoreKeeper,
   vo2MaxCalculator,
   roundRobinLeagueManager,
+  caloriesBurnedCalculator,
 ];

package/src/tool/caloriesBurnedCalculator/bibliography.astro

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

package/src/tool/caloriesBurnedCalculator/bibliography.ts

@@ -0,0 +1,18 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliographyEntries: BibliographyEntry[] = [
+  {
+    name: '2024 Adult Compendium of Physical Activities: A third update of the energy costs of human activities',
+    url: 'https://pmc.ncbi.nlm.nih.gov/articles/PMC10818145/',
+  },
+  {
+    name: 'The Compendium of Physical Activities 2024 Adult Compendium',
+    url: 'https://pacompendium.com/adult-compendium/',
+  },
+  {
+    name: 'Metabolic equivalents in exercise testing and exercise prescription',
+    url: 'https://pubmed.ncbi.nlm.nih.gov/2204507/',
+  },
+];
+
+export const bibliography = bibliographyEntries;

package/src/tool/caloriesBurnedCalculator/calories-burned-by-exercise-calculator.css

@@ -0,0 +1,458 @@
+:root {
+  --n-ink: #18221e;
+  --n-muted: #66756e;
+  --n-paper: #f7f6f0;
+  --n-surface: #fff;
+  --n-surface-soft: #eef1e9;
+  --n-line: #d6ded5;
+  --n-accent: #d85e31;
+  --n-accent-strong: #a84321;
+  --n-accent-soft: #f4d4c7;
+  --n-teal: #27736d;
+  --n-teal-soft: #cbe3dc;
+  --n-shadow: 0 18px 50px rgba(25, 43, 33, 0.1);
+}
+
+.theme-dark {
+  --n-ink: #f7f3ea;
+  --n-muted: #b9b3ad;
+  --n-paper: #18191f;
+  --n-surface: #23242b;
+  --n-surface-soft: #2b2a33;
+  --n-line: #474650;
+  --n-accent: #ff8a5c;
+  --n-accent-strong: #ffc0a3;
+  --n-accent-soft: #4a2d2a;
+  --n-teal: #7ec7d0;
+  --n-teal-soft: #293f47;
+  --n-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
+  --n-orbit-label-shadow: 0 1px 3px rgba(0, 0, 0, 0.62);
+}
+
+.theme-dark .calories-burned-calculator {
+  --n-ink: #f7f3ea;
+  --n-muted: #b9b3ad;
+  --n-paper: #18191f;
+  --n-surface: #23242b;
+  --n-surface-soft: #2b2a33;
+  --n-line: #474650;
+  --n-accent: #ff8a5c;
+  --n-accent-strong: #ffc0a3;
+  --n-accent-soft: #4a2d2a;
+  --n-teal: #7ec7d0;
+  --n-teal-soft: #293f47;
+  --n-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
+  --n-orbit-label-shadow: 0 1px 3px rgba(0, 0, 0, 0.62);
+}
+
+.calories-burned-calculator {
+  color: var(--n-ink);
+  background: var(--n-paper);
+  border: 1px solid var(--n-line);
+  box-shadow: var(--n-shadow);
+  overflow: hidden;
+}
+
+.calories-tool-grid {
+  display: grid;
+  grid-template-columns: minmax(280px, 0.78fr) minmax(360px, 1.22fr);
+  min-height: 650px;
+}
+
+.calories-control-panel {
+  display: grid;
+  align-content: start;
+  gap: 1.25rem;
+  padding: clamp(1.5rem, 4vw, 3rem);
+  background: var(--n-surface-soft);
+  border-right: 1px solid var(--n-line);
+}
+
+.calories-panel-heading,
+.calories-result-heading {
+  display: grid;
+  gap: 0.45rem;
+}
+
+.calories-kicker {
+  margin: 0;
+  color: var(--n-accent-strong);
+  font-size: 0.7rem;
+  font-weight: 800;
+  letter-spacing: 0.13em;
+  text-transform: uppercase;
+}
+
+.calories-flow {
+  max-width: 33rem;
+  margin: 0;
+  color: var(--n-muted);
+  font-size: 0.9rem;
+  line-height: 1.55;
+}
+
+.calories-field,
+.calories-unit-block {
+  display: grid;
+  gap: 0.55rem;
+}
+
+.calories-field-wide {
+  grid-column: 1 / -1;
+}
+
+.calories-label {
+  color: var(--n-ink);
+  font-size: 0.78rem;
+  font-weight: 800;
+  letter-spacing: 0.02em;
+}
+
+.calories-select {
+  position: relative;
+}
+
+.calories-select-trigger,
+.calories-number,
+.calories-intensity-button,
+.calories-unit-toggle button,
+.calories-reset {
+  font: inherit;
+}
+
+.calories-select-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-height: 3.1rem;
+  padding: 0.8rem 1rem;
+  color: var(--n-ink);
+  background: var(--n-surface);
+  border: 1px solid var(--n-line);
+  cursor: pointer;
+  text-align: left;
+}
+
+.calories-select-mark {
+  width: 0.55rem;
+  height: 0.55rem;
+  border-right: 2px solid var(--n-accent-strong);
+  border-bottom: 2px solid var(--n-accent-strong);
+  transform: rotate(45deg) translateY(-2px);
+}
+
+.calories-select-menu {
+  position: absolute;
+  z-index: 5;
+  top: calc(100% + 0.35rem);
+  width: 100%;
+  padding: 0.35rem;
+  background: var(--n-surface);
+  border: 1px solid var(--n-line);
+  box-shadow: var(--n-shadow);
+}
+
+.calories-select-options {
+  display: grid;
+  max-height: 17rem;
+  overflow: auto;
+}
+
+.calories-activity-option {
+  padding: 0.75rem 0.8rem;
+  color: var(--n-ink);
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  text-align: left;
+}
+
+.calories-activity-option:hover,
+.calories-activity-option.is-selected {
+  color: var(--n-accent-strong);
+  background: var(--n-accent-soft);
+}
+
+.calories-intensity-row,
+.calories-unit-toggle {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.4rem;
+}
+
+.calories-intensity-button,
+.calories-unit-toggle button {
+  min-height: 2.65rem;
+  padding: 0.55rem 0.4rem;
+  color: var(--n-muted);
+  background: var(--n-surface);
+  border: 1px solid var(--n-line);
+  cursor: pointer;
+  font-size: 0.76rem;
+  font-weight: 700;
+}
+
+.calories-intensity-button.is-active,
+.calories-unit-toggle button.is-active {
+  color: var(--n-surface);
+  background: var(--n-teal);
+  border-color: var(--n-teal);
+}
+
+.calories-number-wrap {
+  position: relative;
+}
+
+.calories-number {
+  width: 100%;
+  min-height: 3rem;
+  padding: 0.65rem 3.25rem 0.65rem 0.9rem;
+  color: var(--n-ink);
+  background: var(--n-surface);
+  border: 1px solid var(--n-line);
+  font-size: 1rem;
+  font-weight: 750;
+}
+
+.calories-number-unit {
+  position: absolute;
+  top: 50%;
+  right: 0.9rem;
+  color: var(--n-muted);
+  font-size: 0.78rem;
+  font-weight: 800;
+  transform: translateY(-50%);
+}
+
+.calories-range {
+  width: 100%;
+  accent-color: var(--n-accent);
+  cursor: pointer;
+}
+
+.calories-hint,
+.calories-method-note,
+.calories-estimate-notice {
+  margin: 0;
+  color: var(--n-muted);
+  font-size: 0.75rem;
+  line-height: 1.5;
+}
+
+.calories-unit-block {
+  padding-top: 0.55rem;
+}
+
+.calories-unit-toggle {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.calories-reset {
+  justify-self: start;
+  padding: 0.3rem 0;
+  color: var(--n-accent-strong);
+  background: transparent;
+  border: 0;
+  border-bottom: 1px solid currentcolor;
+  cursor: pointer;
+  font-size: 0.78rem;
+  font-weight: 800;
+}
+
+.calories-result-panel {
+  display: grid;
+  align-content: start;
+  gap: 1.25rem;
+  padding: clamp(1.5rem, 5vw, 4rem);
+  background: var(--n-surface);
+}
+
+.calories-result-heading h2 {
+  max-width: 17rem;
+  margin: 0;
+  font-size: clamp(1.65rem, 4vw, 2.7rem);
+  line-height: 0.98;
+}
+
+.calories-orbit {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: min(100%, 300px);
+  aspect-ratio: 1;
+  margin: 0 auto;
+}
+
+.calories-orbit svg {
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+
+.calories-orbit-track,
+.calories-orbit-arc {
+  fill: none;
+  stroke-width: 7;
+}
+
+.calories-orbit-track {
+  stroke: var(--n-surface-soft);
+}
+
+.calories-orbit-arc {
+  stroke: var(--n-accent);
+  stroke-dasharray: 628;
+  stroke-dashoffset: 280;
+  transform: rotate(-90deg);
+  transform-origin: center;
+  transition: stroke-dashoffset 350ms ease;
+}
+
+.calories-orbit-core {
+  fill: var(--n-accent-soft);
+}
+
+.calories-energy-flame {
+  fill: var(--n-accent);
+  transform-origin: 120px 120px;
+  transition: transform 350ms ease;
+}
+
+.calories-orbit-dot {
+  fill: var(--n-teal);
+}
+
+.calories-orbit-dot-alt {
+  fill: var(--n-accent-strong);
+}
+
+.calories-orbit-copy {
+  position: absolute;
+  display: grid;
+  place-items: center;
+  line-height: 1;
+}
+
+.calories-orbit-copy strong {
+  font-size: clamp(2.8rem, 7vw, 4.5rem);
+  letter-spacing: -0.08em;
+}
+
+.calories-orbit-copy span {
+  margin-top: 0.45rem;
+  color: var(--n-muted);
+  font-size: 0.78rem;
+  font-weight: 800;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+}
+
+.theme-dark .calories-orbit-copy span {
+  color: var(--n-ink);
+  text-shadow: var(--n-orbit-label-shadow);
+}
+
+.calories-result-stats,
+.calories-metric-strip {
+  display: grid;
+  grid-template-columns: 1.25fr 1fr 1fr;
+  gap: 0.7rem;
+}
+
+.calories-stat,
+.calories-metric-strip > div {
+  display: grid;
+  gap: 0.3rem;
+  min-width: 0;
+  padding-top: 0.8rem;
+  border-top: 2px solid var(--n-line);
+}
+
+.calories-stat-primary {
+  border-color: var(--n-accent);
+}
+
+.calories-stat span,
+.calories-metric-strip span {
+  color: var(--n-muted);
+  font-size: 0.7rem;
+  line-height: 1.35;
+}
+
+.calories-stat strong,
+.calories-metric-strip strong {
+  font-size: 1rem;
+  line-height: 1.2;
+}
+
+.calories-metric-strip {
+  grid-template-columns: repeat(3, 1fr);
+  padding: 1rem 0;
+  border-block: 1px solid var(--n-line);
+}
+
+.calories-metric-strip > div {
+  padding: 0 0.7rem;
+  border-top: 0;
+  border-left: 1px solid var(--n-line);
+}
+
+.calories-metric-strip > div:first-child {
+  padding-left: 0;
+  border-left: 0;
+}
+
+.calories-method-note {
+  max-width: 42rem;
+}
+
+.calories-estimate-notice {
+  padding: 0.85rem 1rem;
+  color: var(--n-accent-strong);
+  background: var(--n-accent-soft);
+  border-left: 3px solid var(--n-accent);
+}
+
+[data-calories-tool] button:focus-visible,
+[data-calories-tool] input:focus-visible {
+  outline: 3px solid var(--n-accent);
+  outline-offset: 3px;
+}
+
+@media (max-width: 800px) {
+  .calories-tool-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .calories-control-panel {
+    border-right: 0;
+    border-bottom: 1px solid var(--n-line);
+  }
+}
+
+@media (max-width: 520px) {
+  .calories-control-panel,
+  .calories-result-panel {
+    padding: 1.25rem;
+  }
+
+  .calories-result-stats {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .calories-stat-primary {
+    grid-column: 1 / -1;
+  }
+
+  .calories-metric-strip {
+    grid-template-columns: 1fr;
+    gap: 0.8rem;
+  }
+
+  .calories-metric-strip > div,
+  .calories-metric-strip > div:first-child {
+    padding: 0;
+    border-left: 0;
+  }
+}

package/src/tool/caloriesBurnedCalculator/component.astro

@@ -0,0 +1,139 @@
+---
+import { calculateCalories } from './logic';
+import type { CaloriesBurnedCalculatorUI } from './ui';
+
+interface Props {
+  ui: CaloriesBurnedCalculatorUI;
+}
+
+const { ui } = Astro.props;
+const initialState = {
+  activityId: 'walking',
+  intensity: 'moderate',
+  weightKg: 70,
+  durationMinutes: 30,
+  unit: 'metric',
+};
+const initialResult = calculateCalories(initialState);
+const initialGross = Math.round(initialResult?.grossKcal ?? 0);
+const initialNet = Math.round(initialResult?.netKcal ?? 0);
+const initialPerMinute = initialResult?.grossKcalPerMinute.toFixed(1) ?? '0.0';
+---
+
+<div class="calories-burned-calculator" data-calories-tool>
+  <script is:inline type="application/json" data-calories-config set:html={JSON.stringify({ ui, initialState })}></script>
+
+  <div class="calories-tool-grid">
+    <section class="calories-control-panel" aria-label={ui.activityHint}>
+      <div class="calories-panel-heading">
+        <p class="calories-kicker">{ui.activityHint}</p>
+        <p class="calories-flow">Choose an activity, tune the effort, then make the result yours with body weight and time.</p>
+      </div>
+
+      <div class="calories-field calories-field-wide">
+        <label class="calories-label" for="calories-activity-trigger">{ui.activityLabel}</label>
+        <div class="calories-select" data-activity-menu-wrapper>
+          <button id="calories-activity-trigger" class="calories-select-trigger" type="button" data-activity-trigger aria-haspopup="listbox" aria-expanded="false">
+            <span data-activity-value>{ui.activityWalking}</span>
+            <span class="calories-select-mark" aria-hidden="true"></span>
+          </button>
+          <div class="calories-select-menu" data-activity-menu hidden>
+            <div class="calories-select-options" data-activity-options role="listbox" aria-label={ui.activityMenuLabel}></div>
+          </div>
+        </div>
+      </div>
+
+      <fieldset class="calories-field calories-field-wide">
+        <legend class="calories-label">{ui.intensityLabel}</legend>
+        <div class="calories-intensity-row">
+          <button type="button" class="calories-intensity-button" data-intensity="light" aria-pressed="false">{ui.intensityLight}</button>
+          <button type="button" class="calories-intensity-button is-active" data-intensity="moderate" aria-pressed="true">{ui.intensityModerate}</button>
+          <button type="button" class="calories-intensity-button" data-intensity="vigorous" aria-pressed="false">{ui.intensityVigorous}</button>
+        </div>
+      </fieldset>
+
+      <div class="calories-field">
+        <label class="calories-label" for="calories-weight-number">{ui.weightLabel} <span data-weight-unit>kg</span></label>
+        <div class="calories-number-wrap">
+          <input id="calories-weight-number" class="calories-number" type="number" min="25" max="300" step="0.5" value="70" data-weight-number inputmode="decimal" />
+          <span class="calories-number-unit" data-weight-unit>kg</span>
+        </div>
+        <input class="calories-range" type="range" min="25" max="300" step="0.5" value="70" data-weight-range aria-label={ui.weightLabel} />
+        <p class="calories-hint">{ui.weightHint}</p>
+      </div>
+
+      <div class="calories-field">
+        <label class="calories-label" for="calories-duration-number">{ui.durationLabel}</label>
+        <div class="calories-number-wrap">
+          <input id="calories-duration-number" class="calories-number" type="number" min="1" max="600" step="1" value="30" data-duration-number inputmode="numeric" />
+          <span class="calories-number-unit">min</span>
+        </div>
+        <input class="calories-range" type="range" min="1" max="600" step="1" value="30" data-duration-range aria-label={ui.durationLabel} />
+        <p class="calories-hint">{ui.durationHint}</p>
+      </div>
+
+      <div class="calories-unit-block">
+        <span class="calories-label">{ui.unitsLabel}</span>
+        <div class="calories-unit-toggle" role="group" aria-label={ui.unitsLabel}>
+          <button type="button" data-unit="metric" aria-pressed="true" class="is-active">{ui.metricUnit}</button>
+          <button type="button" data-unit="imperial" aria-pressed="false">{ui.imperialUnit}</button>
+        </div>
+      </div>
+
+      <button class="calories-reset" type="button" data-reset>{ui.resetButton}</button>
+    </section>
+
+    <section class="calories-result-panel" data-result-panel data-intensity="moderate" aria-live="polite">
+      <div class="calories-result-heading">
+        <p class="calories-kicker">{ui.resultEyebrow}</p>
+        <h2>{ui.resultTitle}</h2>
+      </div>
+      <div class="calories-orbit" data-energy-scene role="img" aria-label={ui.energySceneLabel}>
+        <svg viewBox="0 0 240 240" aria-hidden="true">
+          <circle class="calories-orbit-track" cx="120" cy="120" r="100"></circle>
+          <circle class="calories-orbit-arc" data-energy-arc cx="120" cy="120" r="100"></circle>
+          <circle class="calories-orbit-core" cx="120" cy="120" r="58"></circle>
+          <g class="calories-energy-flame" data-energy-flame>
+            <path d="M120 78c14 17 27 29 27 48a27 27 0 0 1-54 0c0-10 5-21 15-31 0 12 4 17 9 21 4-10 5-22 3-38Z"></path>
+          </g>
+          <circle class="calories-orbit-dot" cx="120" cy="20" r="6"></circle>
+          <circle class="calories-orbit-dot calories-orbit-dot-alt" cx="220" cy="120" r="4"></circle>
+        </svg>
+        <div class="calories-orbit-copy">
+          <strong data-output="gross">{initialGross}</strong>
+          <span>kcal</span>
+        </div>
+      </div>
+
+      <div class="calories-result-stats">
+        <div class="calories-stat calories-stat-primary">
+          <span>{ui.grossCaloriesLabel}</span>
+          <strong><span data-output="gross">{initialGross}</span> kcal</strong>
+        </div>
+        <div class="calories-stat">
+          <span>{ui.netCaloriesLabel}</span>
+          <strong><span data-output="net">{initialNet}</span> kcal</strong>
+        </div>
+        <div class="calories-stat">
+          <span>{ui.perMinuteLabel}</span>
+          <strong data-output="per-minute">{initialPerMinute} kcal/min</strong>
+        </div>
+      </div>
+
+      <div class="calories-metric-strip">
+        <div><span>{ui.metLabel}</span><strong data-output="met">3.8 MET</strong></div>
+        <div><span>{ui.intensityBandLabel}</span><strong data-output="band">{ui.intensityModerate}</strong></div>
+        <div><span>{ui.weightLabel}</span><strong data-output="weight">70 kg</strong></div>
+      </div>
+
+      <p class="calories-method-note">{ui.methodNote}</p>
+      <p class="calories-estimate-notice" data-empty-result>{ui.estimateNotice}</p>
+    </section>
+  </div>
+</div>
+
+<script>
+  import { mountCaloriesBurnedCalculator } from './controller';
+
+  mountCaloriesBurnedCalculator();
+</script>