@jjlmoya/utils-health 1.1.0

package/src/tool/hydrationCalculator/ui.ts

@@ -0,0 +1,28 @@
+export interface HydrationCalculatorUI extends Record<string, string> {
+  sectionWeight: string;
+  sectionClimate: string;
+  sectionActivity: string;
+  labelWeight: string;
+  labelTemp: string;
+  labelHum: string;
+  labelDuration: string;
+  weatherBtnTitle: string;
+  intensitySedentary: string;
+  intensityActive: string;
+  intensityAthlete: string;
+  resultUnit: string;
+  statRefill: string;
+  statRefillHelp: string;
+  statMix: string;
+  statUrine: string;
+  alertElectrolytes: string;
+  freqLow: string;
+  freqMed: string;
+  freqHigh: string;
+  mixWater: string;
+  mixWaterSalt: string;
+  mixWaterElectrolytes: string;
+  mixDetailLow: string;
+  mixDetailMed: string;
+  mixDetailHigh: string;
+}

package/src/tool/pelliRobsonTest/bibliography.astro

@@ -0,0 +1,14 @@
+---
+import { Bibliography } from '@jjlmoya/utils-shared';
+import { pelliRobsonTest } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await pelliRobsonTest.i18n[locale]?.();
+---
+
+{content && <Bibliography items={content.bibliography} title={content.bibliographyTitle} />}

package/src/tool/pelliRobsonTest/component.astro

@@ -0,0 +1,653 @@
+---
+import type { PelliRobsonTestUI } from './ui';
+
+interface Props {
+  ui?: Partial<PelliRobsonTestUI>;
+}
+
+const ui = (Astro.props.ui ?? {}) as PelliRobsonTestUI;
+---
+
+<div class="pr" data-ui={JSON.stringify(ui)}>
+  
+  <div class="pr__view pr__view--intro" id="pr-intro">
+    <div class="pr__score-circle">
+      <span class="pr__stat-label" data-key="introSensLabel">Sensibilidad</span>
+      <span class="pr__score-title" data-key="introTestLabel">Test</span>
+    </div>
+    <h3 class="pr__intro-title" data-key="introTitle">¿Qué letra ves?</h3>
+    <p class="pr__intro-desc" data-key="introDescription">
+      Escribe la letra que aparezca en pantalla. Cuanto más tenue sea, mayor será tu sensibilidad al contraste.
+    </p>
+    <button class="pr__btn pr__btn--primary pr__btn--wide" id="pr-start" data-key="introBtnStart">
+      Comenzar Desafío
+    </button>
+  </div>
+
+  
+  <div class="pr__view pr__view--test pr__view--hidden" id="pr-test">
+    <div class="pr__hud">
+      <div class="pr__stat-box">
+        <span class="pr__stat-label" data-key="hudLevelLabel">Nivel Actual</span>
+        <span class="pr__stat-number" id="pr-level">1 / 16</span>
+      </div>
+      <div class="pr__progress-track">
+        <div class="pr__progress-fill" id="pr-progress"></div>
+      </div>
+      <div class="pr__stat-box">
+        <span class="pr__stat-label" data-key="hudScoreLabel">LogCS Detectado</span>
+        <span class="pr__stat-number" id="pr-live-score">0.00</span>
+      </div>
+    </div>
+
+    <div class="pr__screen">
+      <div class="pr__optotype" id="pr-optotype">D</div>
+    </div>
+
+    <div class="pr__input-group">
+      <input
+        type="text"
+        id="pr-input"
+        class="pr__letter-input"
+        maxlength="1"
+        autocomplete="off"
+        autofocus
+        data-key="inputPlaceholder"
+        placeholder="Escribe la letra..."
+      />
+      <button class="pr__btn pr__btn--ghost" id="pr-cant-see" data-key="btnCantSee">
+        Ya no distingo ninguna letra
+      </button>
+    </div>
+  </div>
+
+  
+  <div class="pr__view pr__view--result pr__view--hidden" id="pr-result">
+    <div class="pr__score-circle">
+      <span class="pr__stat-label" data-key="resultScoreLabel">PUNTUACIÓN</span>
+      <span class="pr__score-title" id="pr-final-score">2.10</span>
+    </div>
+    <h3 class="pr__result-title" id="pr-result-title">¡Visión de Élite!</h3>
+    <p class="pr__result-text" id="pr-result-text">Tu visión es excelente.</p>
+    <button class="pr__btn pr__btn--primary pr__btn--wide" id="pr-restart" data-key="btnRestart">
+      Reiniciar Test
+    </button>
+  </div>
+</div>
+
+<style>
+  .pr {
+    --pr-bg: #f8fafc;
+    --pr-card-bg: #fff;
+    --pr-primary: #0ea5e9;
+    --pr-success: #10b981;
+    --pr-danger: #ef4444;
+    --pr-text: #0f172a;
+    --pr-muted: #94a3b8;
+    --pr-surface: #f1f5f9;
+    --pr-border: #e2e8f0;
+    --pr-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.1);
+    --pr-glow-primary: rgba(14, 165, 233, 0.3);
+
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    padding: 1rem;
+    max-width: 1200px;
+    margin: 0 auto;
+    background: var(--pr-bg);
+    border-radius: 48px;
+    box-shadow: var(--pr-shadow);
+    position: relative;
+    overflow: hidden;
+    text-align: center;
+  }
+
+  .pr::before {
+    content: "A";
+    position: absolute;
+    top: -20px;
+    right: 10px;
+    font-size: 15rem;
+    font-weight: 900;
+    color: var(--pr-surface);
+    opacity: 0.5;
+    z-index: 0;
+    pointer-events: none;
+  }
+
+  
+  .pr__view {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.5rem;
+    padding: 3rem 2rem;
+    position: relative;
+    z-index: 1;
+  }
+
+  .pr__view--hidden {
+    display: none;
+  }
+
+  .pr__view--test {
+    gap: 2rem;
+  }
+
+  .pr__view--result {
+    animation: pr-slide-in 0.8s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  @keyframes pr-slide-in {
+    from { opacity: 0; transform: translateY(30px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  
+  .pr__score-circle {
+    width: 200px;
+    height: 200px;
+    border-radius: 50%;
+    border: 10px solid var(--pr-primary);
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background: var(--pr-card-bg);
+    box-shadow: 0 0 50px var(--pr-glow-primary);
+  }
+
+  .pr__score-title {
+    font-size: 2.5rem;
+    font-weight: 950;
+    color: var(--pr-text);
+    line-height: 1.1;
+  }
+
+  .pr__stat-label {
+    font-size: 0.7rem;
+    font-weight: 800;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    color: var(--pr-muted);
+  }
+
+  
+  .pr__intro-title {
+    font-size: 2.2rem;
+    font-weight: 950;
+    color: var(--pr-text);
+    margin: 0;
+  }
+
+  .pr__intro-desc {
+    max-width: 520px;
+    margin: 0 auto;
+    font-size: 1.1rem;
+    line-height: 1.6;
+    color: var(--pr-muted);
+  }
+
+  
+  .pr__hud {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    padding: 0 1rem;
+    gap: 1rem;
+  }
+
+  .pr__stat-box {
+    background: var(--pr-surface);
+    padding: 1rem 2rem;
+    border-radius: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.25rem;
+    min-width: 120px;
+  }
+
+  .pr__stat-number {
+    font-size: 1.8rem;
+    font-weight: 900;
+    color: var(--pr-text);
+    line-height: 1;
+  }
+
+  .pr__progress-track {
+    flex: 1;
+    height: 12px;
+    background: var(--pr-surface);
+    border-radius: 100px;
+    overflow: hidden;
+  }
+
+  .pr__progress-fill {
+    height: 100%;
+    background: var(--pr-primary);
+    width: 0%;
+    transition: width 0.5s ease;
+    box-shadow: 0 0 15px var(--pr-glow-primary);
+  }
+
+  
+  .pr__screen {
+    width: 100%;
+    background: #fff;
+    border-radius: 32px;
+    height: 400px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: 1px solid var(--pr-border);
+    box-shadow: inset 0 4px 20px rgba(0, 0, 0, 0.02);
+    position: relative;
+    z-index: 1;
+  }
+
+  .pr__optotype {
+    font-size: clamp(6rem, 20vw, 12rem);
+    font-weight: 800;
+    color: #000;
+    line-height: 1;
+    transition: opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.3s ease;
+    user-select: none;
+    letter-spacing: -0.05em;
+  }
+
+  
+  .pr__input-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    width: 100%;
+    max-width: 400px;
+  }
+
+  .pr__letter-input {
+    width: 100%;
+    box-sizing: border-box;
+    background: var(--pr-surface);
+    border: 4px solid transparent;
+    border-radius: 30px;
+    padding: 1.5rem 2rem;
+    font-size: 3rem;
+    font-weight: 900;
+    color: var(--pr-text);
+    text-align: center;
+    text-transform: uppercase;
+    transition: all 0.3s ease;
+    outline: none;
+  }
+
+  .pr__letter-input:focus {
+    background: var(--pr-card-bg);
+    border-color: var(--pr-primary);
+    box-shadow: 0 0 40px rgba(14, 165, 233, 0.15);
+  }
+
+  .pr__letter-input::placeholder {
+    color: var(--pr-muted);
+    font-size: 1.1rem;
+    text-transform: none;
+    font-weight: 600;
+  }
+
+  .pr__letter-input--correct {
+    animation: pr-flash-correct 0.6s ease-out;
+    border-color: var(--pr-success);
+  }
+
+  .pr__letter-input--error {
+    animation: pr-flash-error 0.4s ease-in-out;
+    border-color: var(--pr-danger);
+  }
+
+  @keyframes pr-flash-correct {
+    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
+    100% { box-shadow: 0 0 0 30px rgba(16, 185, 129, 0); }
+  }
+
+  @keyframes pr-flash-error {
+    0% { transform: translateX(0); }
+    25% { transform: translateX(-10px); }
+    50% { transform: translateX(10px); }
+    75% { transform: translateX(-10px); }
+    100% { transform: translateX(0); }
+  }
+
+  
+  .pr__btn {
+    border: none;
+    border-radius: 30px;
+    padding: 1.25rem 2.5rem;
+    font-size: 1.1rem;
+    font-weight: 800;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .pr__btn--primary {
+    background: var(--pr-primary);
+    color: #fff;
+    box-shadow: 0 15px 30px var(--pr-glow-primary);
+  }
+
+  .pr__btn--primary:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 25px 40px var(--pr-glow-primary);
+  }
+
+  .pr__btn--wide {
+    max-width: 300px;
+    width: 100%;
+  }
+
+  .pr__btn--ghost {
+    background: transparent;
+    color: var(--pr-muted);
+    width: 100%;
+    margin-top: 0.25rem;
+  }
+
+  .pr__btn--ghost:hover {
+    color: var(--pr-danger);
+  }
+
+  
+  .pr__result-title {
+    font-size: 2.8rem;
+    font-weight: 950;
+    color: var(--pr-text);
+    margin: 0;
+  }
+
+  .pr__result-text {
+    max-width: 580px;
+    margin: 0 auto;
+    font-size: 1.15rem;
+    line-height: 1.65;
+    color: var(--pr-muted);
+  }
+
+  
+  :global(.theme-dark) .pr {
+    --pr-bg: #0c1120;
+    --pr-card-bg: #111827;
+    --pr-primary: #38bdf8;
+    --pr-success: #34d399;
+    --pr-danger: #f87171;
+    --pr-text: #f0f9ff;
+    --pr-muted: #94a3b8;
+    --pr-surface: #1e293b;
+    --pr-border: #334155;
+    --pr-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.6);
+    --pr-glow-primary: rgba(56, 189, 248, 0.25);
+  }
+
+  :global(.theme-dark) .pr::before {
+    color: #1e293b;
+    opacity: 0.4;
+  }
+
+  
+
+  
+  @media (max-width: 768px) {
+    .pr {
+      padding: 0.5rem;
+      border-radius: 1.25rem;
+    }
+
+    .pr::before {
+      font-size: 5rem;
+      top: -5px;
+      opacity: 0.3;
+    }
+
+    .pr__view {
+      padding: 1.25rem 0.75rem;
+      gap: 1rem;
+    }
+
+    .pr__score-circle {
+      width: 120px;
+      height: 120px;
+      border-width: 5px;
+    }
+
+    .pr__score-title {
+      font-size: 1.5rem;
+    }
+
+    .pr__intro-title {
+      font-size: 1.5rem;
+    }
+
+    .pr__hud {
+      flex-wrap: wrap;
+      padding: 0;
+      justify-content: center;
+      gap: 0.5rem;
+    }
+
+    .pr__progress-track {
+      order: -1;
+      width: 100%;
+      height: 8px;
+    }
+
+    .pr__stat-box {
+      flex: 1 1 auto;
+      padding: 0.5rem 1rem;
+      border-radius: 12px;
+    }
+
+    .pr__stat-number {
+      font-size: 1.1rem;
+    }
+
+    .pr__stat-label {
+      font-size: 0.6rem;
+    }
+
+    .pr__screen {
+      height: 180px;
+      border-radius: 1rem;
+    }
+
+    .pr__optotype {
+      font-size: clamp(3rem, 15vw, 6rem);
+    }
+
+    .pr__input-group {
+      max-width: 100%;
+      width: 100%;
+    }
+
+    .pr__letter-input {
+      padding: 0.75rem;
+      font-size: 1.5rem;
+      border-radius: 1rem;
+      border-width: 2px;
+    }
+
+    .pr__letter-input::placeholder {
+      font-size: 0.85rem;
+    }
+
+    .pr__btn {
+      width: 100%;
+      padding: 0.75rem;
+      font-size: 0.95rem;
+      border-radius: 1rem;
+    }
+
+    .pr__btn--wide {
+      max-width: 100%;
+    }
+
+    .pr__result-title {
+      font-size: 1.75rem;
+    }
+
+    .pr__result-text {
+      font-size: 0.95rem;
+    }
+  }
+</style>
+
+<script>
+  const LETTERS = 'CDHKNORSVZ';
+  const CS_STEPS = [0.00, 0.15, 0.30, 0.45, 0.60, 0.75, 0.90, 1.05, 1.20, 1.35, 1.50, 1.65, 1.80, 1.95, 2.10, 2.25];
+
+  interface PelliUI {
+    introSensLabel?: string;
+    introTestLabel?: string;
+    introTitle?: string;
+    introDescription?: string;
+    introBtnStart?: string;
+    hudLevelLabel?: string;
+    hudScoreLabel?: string;
+    inputPlaceholder?: string;
+    btnCantSee?: string;
+    resultScoreLabel?: string;
+    result4Title?: string;
+    result4Text?: string;
+    result3Title?: string;
+    result3Text?: string;
+    result2Title?: string;
+    result2Text?: string;
+    result1Title?: string;
+    result1Text?: string;
+    btnRestart?: string;
+  }
+
+  function applyUI(container: Element, ui: PelliUI): void {
+    container.querySelectorAll<HTMLElement>('[data-key]').forEach((el) => {
+      const key = el.dataset.key as keyof PelliUI;
+      const val = ui[key];
+      if (!val) return;
+      if (el instanceof HTMLInputElement) {
+        el.placeholder = val;
+      } else {
+        el.textContent = val;
+      }
+    });
+  }
+
+  // eslint-disable-next-line complexity
+  function getResultTier(score: number, ui: PelliUI): { title: string; text: string } {
+    const tiers: Array<[number, { title: string; text: string }]> = [
+      [2.0, { title: ui.result4Title ?? '', text: ui.result4Text ?? '' }],
+      [1.65, { title: ui.result3Title ?? '', text: ui.result3Text ?? '' }],
+      [1.20, { title: ui.result2Title ?? '', text: ui.result2Text ?? '' }],
+    ];
+    const tier = tiers.find(([threshold]) => score >= threshold);
+    return tier?.[1] ?? { title: ui.result1Title ?? '', text: ui.result1Text ?? '' };
+  }
+
+  // eslint-disable-next-line max-lines-per-function
+  function initTest(container: Element): void {
+    const ui: PelliUI = JSON.parse((container as HTMLElement).dataset.ui ?? '{}');
+    applyUI(container, ui);
+
+    const introView = container.querySelector<HTMLElement>('#pr-intro');
+    const testView = container.querySelector<HTMLElement>('#pr-test');
+    const resultView = container.querySelector<HTMLElement>('#pr-result');
+    const optotype = container.querySelector<HTMLElement>('#pr-optotype');
+    const liveScore = container.querySelector<HTMLElement>('#pr-live-score');
+    const levelEl = container.querySelector<HTMLElement>('#pr-level');
+    const progressFill = container.querySelector<HTMLElement>('#pr-progress');
+    const letterInput = container.querySelector<HTMLInputElement>('#pr-input');
+    const finalScore = container.querySelector<HTMLElement>('#pr-final-score');
+    const resultTitle = container.querySelector<HTMLElement>('#pr-result-title');
+    const resultText = container.querySelector<HTMLElement>('#pr-result-text');
+    const startBtn = container.querySelector<HTMLElement>('#pr-start');
+    const cantSeeBtn = container.querySelector<HTMLElement>('#pr-cant-see');
+    const restartBtn = container.querySelector<HTMLElement>('#pr-restart');
+
+    let currentStepIndex = 0;
+    let score = 0;
+    let currentTargetLetter = '';
+
+    function updateOptotype(): void {
+      if (!optotype || !liveScore || !levelEl || !progressFill || !letterInput) return;
+      const logCS = CS_STEPS[currentStepIndex] ?? 0;
+      const opacity = Math.pow(10, -logCS);
+      currentTargetLetter = LETTERS[Math.floor(Math.random() * LETTERS.length)] ?? 'C';
+
+      optotype.style.opacity = '0';
+      optotype.style.transform = 'scale(0.9)';
+
+      setTimeout(() => {
+        optotype.textContent = currentTargetLetter;
+        optotype.style.opacity = opacity.toString();
+        optotype.style.transform = 'scale(1)';
+        liveScore.textContent = logCS.toFixed(2);
+        levelEl.textContent = `${currentStepIndex + 1} / ${CS_STEPS.length}`;
+        progressFill.style.width = `${((currentStepIndex + 1) / CS_STEPS.length) * 100}%`;
+        letterInput.value = '';
+        letterInput.className = 'pr__letter-input';
+      }, 150);
+    }
+
+    function startTest(): void {
+      currentStepIndex = 0;
+      score = 0;
+      introView?.classList.add('pr__view--hidden');
+      resultView?.classList.add('pr__view--hidden');
+      testView?.classList.remove('pr__view--hidden');
+      setTimeout(() => letterInput?.focus(), 100);
+      updateOptotype();
+    }
+
+    function showResults(): void {
+      testView?.classList.add('pr__view--hidden');
+      resultView?.classList.remove('pr__view--hidden');
+      if (finalScore) finalScore.textContent = score.toFixed(2);
+      if (resultTitle && resultText) {
+        const tier = getResultTier(score, ui);
+        resultTitle.textContent = tier.title;
+        resultText.textContent = tier.text;
+      }
+    }
+
+    function validateInput(): void {
+      if (!letterInput) return;
+      const inputVal = letterInput.value.trim().toUpperCase();
+      if (inputVal === '') return;
+
+      if (inputVal === currentTargetLetter) {
+        score = CS_STEPS[currentStepIndex] ?? 0;
+        currentStepIndex++;
+        letterInput.classList.add('pr__letter-input--correct');
+        if (currentStepIndex >= CS_STEPS.length) {
+          setTimeout(showResults, 400);
+        } else {
+          setTimeout(updateOptotype, 400);
+        }
+      } else {
+        letterInput.classList.add('pr__letter-input--error');
+        setTimeout(showResults, 600);
+      }
+    }
+
+    letterInput?.addEventListener('input', validateInput);
+    startBtn?.addEventListener('click', startTest);
+    restartBtn?.addEventListener('click', startTest);
+    cantSeeBtn?.addEventListener('click', showResults);
+    container.addEventListener('click', () => {
+      if (!testView?.classList.contains('pr__view--hidden')) letterInput?.focus();
+    });
+  }
+
+  document.querySelectorAll<HTMLElement>('.pr').forEach(initTest);
+</script>