@jjlmoya/utils-health 1.1.0

package/src/tool/pelliRobsonTest/ui.ts

@@ -0,0 +1,21 @@
+export interface PelliRobsonTestUI extends Record<string, string> {
+  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;
+}

package/src/tool/peripheralVisionTrainer/bibliography.astro

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

package/src/tool/peripheralVisionTrainer/component.astro

@@ -0,0 +1,678 @@
+---
+import type { PeripheralVisionTrainerUI } from './ui';
+import { Icon } from 'astro-icon/components';
+
+interface Props {
+  ui?: Partial<PeripheralVisionTrainerUI>;
+}
+
+const ui = (Astro.props.ui ?? {}) as PeripheralVisionTrainerUI;
+---
+
+<div class="pvt" data-ui={JSON.stringify(ui)}>
+  
+  <div class="pvt__view pvt__view--intro" id="pvt-intro">
+    <h3 class="pvt__intro-title" data-key="introTitle">Visión Periférica</h3>
+    <p class="pvt__intro-desc" data-key="introDesc">
+      Entrena tu capacidad para procesar información fuera de tu foco directo.
+    </p>
+
+    <div class="pvt__benefits">
+      <div class="pvt__benefit pvt__benefit--blue">
+        <div class="pvt__benefit-icon"><Icon name="mdi:flash" /></div>
+        <span class="pvt__benefit-title" data-key="benefit1Title">Velocidad</span>
+        <p class="pvt__benefit-desc" data-key="benefit1Desc">Reduce el tiempo de reacción ante estímulos inesperados.</p>
+      </div>
+      <div class="pvt__benefit pvt__benefit--green">
+        <div class="pvt__benefit-icon"><Icon name="mdi:eye" /></div>
+        <span class="pvt__benefit-title" data-key="benefit2Title">Lectura Rápida</span>
+        <p class="pvt__benefit-desc" data-key="benefit2Desc">Amplía tu campo visual para captar frases enteras.</p>
+      </div>
+      <div class="pvt__benefit pvt__benefit--amber">
+        <div class="pvt__benefit-icon"><Icon name="mdi:target" /></div>
+        <span class="pvt__benefit-title" data-key="benefit3Title">Foco</span>
+        <p class="pvt__benefit-desc" data-key="benefit3Desc">Mejora la concentración manteniendo el centro fijo.</p>
+      </div>
+    </div>
+
+    <button class="pvt__btn" id="pvt-start" data-key="btnStart">Comenzar Entrenamiento</button>
+  </div>
+
+  
+  <div class="pvt__view pvt__view--game pvt__view--hidden" id="pvt-game">
+    <div class="pvt__hud">
+      <div class="pvt__hud-stat">
+        <span class="pvt__stat-val" id="pvt-score">0</span>
+        <span class="pvt__stat-lbl" data-key="hudPoints">Puntos</span>
+      </div>
+      <div class="pvt__hud-stat">
+        <span class="pvt__stat-val" id="pvt-level">1</span>
+        <span class="pvt__stat-lbl" data-key="hudLevel">Nivel</span>
+      </div>
+      <div class="pvt__hud-stat">
+        <span class="pvt__stat-val" id="pvt-time">60</span>
+        <span class="pvt__stat-lbl" data-key="hudTime">Tiempo</span>
+      </div>
+    </div>
+
+    <div class="pvt__viewport" id="pvt-viewport">
+      <div class="pvt__focus-ring"></div>
+      <div class="pvt__center-anchor"></div>
+      <div class="pvt__target pvt__view--hidden" id="pvt-target"></div>
+    </div>
+  </div>
+
+  
+  <div class="pvt__view pvt__view--result pvt__view--hidden" id="pvt-result">
+    <h3 class="pvt__rank-title" id="pvt-rank">EXPLORADOR</h3>
+    <div class="pvt__hud pvt__hud--result">
+      <div class="pvt__hud-stat">
+        <span class="pvt__stat-val" id="pvt-final">0</span>
+        <span class="pvt__stat-lbl" data-key="resultTotal">Total</span>
+      </div>
+    </div>
+    <p class="pvt__rank-text" id="pvt-rank-text">Sigue practicando.</p>
+    <button class="pvt__btn" id="pvt-restart" data-key="btnRestart">Reiniciar Protocolo</button>
+  </div>
+
+  
+  <div class="pvt__method" id="pvt-method" data-key="methodNote">
+    MÉTODO: Mantén la mirada fija en el punto naranja central.
+  </div>
+
+  
+  <div class="pvt__mobile" id="pvt-mobile">
+    <div class="pvt__mobile-icon"><Icon name="mdi:monitor" /></div>
+    <h3 class="pvt__mobile-title" data-key="mobileTitle">Pantalla Demasiado Pequeña</h3>
+    <p class="pvt__mobile-desc" data-key="mobileDesc">
+      El Entrenador de Visión Periférica requiere un teclado físico.
+    </p>
+    <div class="pvt__mobile-tip">
+      <span><Icon name="mdi:laptop" /></span>
+      <span data-key="mobileTip">Por favor, accede desde un ordenador con teclado físico.</span>
+    </div>
+  </div>
+</div>
+
+<style>
+  .pvt {
+    --pvt-bg: #f8fafc;
+    --pvt-surface: #fff;
+    --pvt-primary: #3b82f6;
+    --pvt-accent: #f59e0b;
+    --pvt-success: #10b981;
+    --pvt-danger: #ef4444;
+    --pvt-text: #0f172a;
+    --pvt-muted: #94a3b8;
+    --pvt-surface-2: #f1f5f9;
+    --pvt-border: rgba(0, 0, 0, 0.06);
+    --pvt-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.06);
+
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+    padding: 4rem;
+    max-width: 1200px;
+    margin: 0 auto;
+    background: var(--pvt-surface);
+    border-radius: 48px;
+    box-shadow: var(--pvt-shadow);
+    border: 1px solid var(--pvt-border);
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+    transition: background 0.3s ease, color 0.3s ease;
+  }
+
+  
+  .pvt__view {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.5rem;
+  }
+
+  .pvt__view--hidden {
+    display: none;
+  }
+
+  .pvt__view--game {
+    gap: 2rem;
+  }
+
+  .pvt__view--result {
+    animation: pvt-slide-in 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  @keyframes pvt-slide-in {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  
+  .pvt__intro-title {
+    font-size: 3rem;
+    font-weight: 950;
+    color: var(--pvt-text);
+    margin: 0;
+    line-height: 1.1;
+  }
+
+  .pvt__intro-desc {
+    color: var(--pvt-muted);
+    max-width: 600px;
+    margin: 0 auto;
+    line-height: 1.8;
+    font-size: 1.1rem;
+  }
+
+  
+  .pvt__benefits {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 1.5rem;
+    width: 100%;
+    margin: 1rem 0;
+  }
+
+  .pvt__benefit {
+    background: var(--pvt-surface-2);
+    padding: 2rem;
+    border-radius: 24px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.75rem;
+    border: 1px solid var(--pvt-border);
+    transition: transform 0.3s ease;
+  }
+
+  .pvt__benefit:hover {
+    transform: translateY(-4px);
+  }
+
+  .pvt__benefit-icon {
+    width: 52px;
+    height: 52px;
+    border-radius: 14px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.6rem;
+    line-height: 1;
+  }
+
+  .pvt__benefit--blue .pvt__benefit-icon {
+    background: rgba(59, 130, 246, 0.1);
+    color: var(--pvt-primary);
+  }
+
+  .pvt__benefit--green .pvt__benefit-icon {
+    background: rgba(16, 185, 129, 0.1);
+    color: var(--pvt-success);
+  }
+
+  .pvt__benefit--amber .pvt__benefit-icon {
+    background: rgba(245, 158, 11, 0.1);
+    color: var(--pvt-accent);
+  }
+
+  .pvt__benefit-title {
+    font-size: 1.05rem;
+    font-weight: 800;
+    color: var(--pvt-text);
+  }
+
+  .pvt__benefit-desc {
+    font-size: 0.9rem;
+    color: var(--pvt-muted);
+    line-height: 1.5;
+    margin: 0;
+  }
+
+  
+  .pvt__btn {
+    background: var(--pvt-primary);
+    color: #fff;
+    border: none;
+    padding: 1.5rem 3.5rem;
+    font-size: 1.3rem;
+    font-weight: 900;
+    border-radius: 24px;
+    cursor: pointer;
+    box-shadow: 0 20px 40px rgba(59, 130, 246, 0.2);
+    transition: all 0.2s ease;
+  }
+
+  .pvt__btn:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 30px 60px rgba(59, 130, 246, 0.3);
+  }
+
+  
+  .pvt__hud {
+    display: flex;
+    justify-content: space-around;
+    gap: 1.5rem;
+    width: 100%;
+  }
+
+  .pvt__hud--result {
+    justify-content: center;
+  }
+
+  .pvt__hud-stat {
+    background: var(--pvt-surface-2);
+    padding: 1.5rem;
+    border-radius: 24px;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  .pvt__stat-val {
+    font-size: 2.5rem;
+    font-weight: 950;
+    color: var(--pvt-text);
+    line-height: 1;
+  }
+
+  .pvt__stat-lbl {
+    font-size: 0.7rem;
+    font-weight: 800;
+    color: var(--pvt-muted);
+    text-transform: uppercase;
+    letter-spacing: 2px;
+  }
+
+  
+  .pvt__viewport {
+    position: relative;
+    width: 100%;
+    height: 580px;
+    background: var(--pvt-bg);
+    border-radius: 40px;
+    overflow: hidden;
+    cursor: none;
+    border: 4px solid var(--pvt-surface-2);
+    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.02);
+  }
+
+  .pvt__center-anchor {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 20px;
+    height: 20px;
+    background: var(--pvt-accent);
+    border-radius: 50%;
+    box-shadow: 0 0 30px rgba(245, 158, 11, 0.4);
+    z-index: 10;
+  }
+
+  .pvt__focus-ring {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 80px;
+    height: 80px;
+    border: 4px solid var(--pvt-accent);
+    opacity: 0.15;
+    border-radius: 50%;
+    animation: pvt-pulse 2s ease-out infinite;
+    pointer-events: none;
+  }
+
+  @keyframes pvt-pulse {
+    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
+    100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
+  }
+
+  .pvt__target {
+    position: absolute;
+    width: 45px;
+    height: 45px;
+    left: -9999px;
+    top: -9999px;
+    background: var(--pvt-text);
+    color: var(--pvt-surface);
+    border-radius: 12px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 1.5rem;
+    font-weight: 950;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
+    transform: translate(-50%, -50%);
+    transition: background 0.1s ease;
+  }
+
+  .pvt :global(.pvt__target--wrong) {
+    background: var(--pvt-danger);
+    color: #fff;
+    animation: pvt-shake 0.4s ease;
+  }
+
+  .pvt :global(.pvt__target--correct) {
+    background: var(--pvt-success);
+    color: #fff;
+    animation: pvt-pop 0.3s ease;
+  }
+
+  @keyframes pvt-shake {
+    0%, 100% { transform: translate(-50%, -50%) translateX(0); }
+    25% { transform: translate(-50%, -50%) translateX(-10px); }
+    75% { transform: translate(-50%, -50%) translateX(10px); }
+  }
+
+  @keyframes pvt-pop {
+    0% { transform: translate(-50%, -50%) scale(0.8); }
+    50% { transform: translate(-50%, -50%) scale(1.2); }
+    100% { transform: translate(-50%, -50%) scale(1); }
+  }
+
+  
+  .pvt__rank-title {
+    font-size: 3.5rem;
+    font-weight: 950;
+    color: var(--pvt-text);
+    margin: 0;
+  }
+
+  .pvt__rank-text {
+    color: var(--pvt-muted);
+    font-size: 1.2rem;
+    max-width: 500px;
+    margin: 0 auto;
+    line-height: 1.6;
+  }
+
+  
+  .pvt__method {
+    background: var(--pvt-surface-2);
+    border-radius: 16px;
+    padding: 1rem 1.5rem;
+    font-size: 0.85rem;
+    font-weight: 700;
+    color: var(--pvt-muted);
+    letter-spacing: 0.03em;
+    line-height: 1.5;
+  }
+
+  
+  .pvt__mobile {
+    display: none;
+  }
+
+  
+  :global(.theme-dark) .pvt {
+    --pvt-bg: #0f172a;
+    --pvt-surface: #1e293b;
+    --pvt-primary: #60a5fa;
+    --pvt-accent: #fbbf24;
+    --pvt-success: #34d399;
+    --pvt-danger: #f87171;
+    --pvt-text: #f8fafc;
+    --pvt-muted: #94a3b8;
+    --pvt-surface-2: #334155;
+    --pvt-border: rgba(255, 255, 255, 0.06);
+    --pvt-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.5);
+  }
+
+  
+  @media (max-width: 1024px) {
+    .pvt {
+      padding: 2rem 1.5rem;
+      gap: 1.5rem;
+    }
+
+    #pvt-intro,
+    #pvt-game,
+    #pvt-result,
+    .pvt__method {
+      display: none;
+    }
+
+    .pvt__mobile {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      gap: 1.5rem;
+      padding: 2rem 1rem;
+      background: var(--pvt-surface-2);
+      border-radius: 24px;
+      border: 1px dashed var(--pvt-border);
+    }
+
+    .pvt__mobile-icon {
+      font-size: 4rem;
+      background: rgba(245, 158, 11, 0.1);
+      width: 100px;
+      height: 100px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .pvt__mobile-title {
+      font-size: 1.75rem;
+      font-weight: 900;
+      color: var(--pvt-text);
+      margin: 0;
+    }
+
+    .pvt__mobile-desc {
+      font-size: 1rem;
+      line-height: 1.6;
+      color: var(--pvt-muted);
+      max-width: 320px;
+      margin: 0;
+    }
+
+    .pvt__mobile-tip {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 0.75rem;
+      background: var(--pvt-bg);
+      padding: 1.25rem 1.5rem;
+      border-radius: 16px;
+      font-size: 0.95rem;
+      color: var(--pvt-text);
+      font-weight: 600;
+      border: 1px solid var(--pvt-border);
+    }
+
+    .pvt__mobile-tip span:first-child {
+      font-size: 2.5rem;
+    }
+  }
+</style>
+
+<script>
+  interface PvtUI {
+    introTitle?: string;
+    introDesc?: string;
+    benefit1Title?: string;
+    benefit1Desc?: string;
+    benefit2Title?: string;
+    benefit2Desc?: string;
+    benefit3Title?: string;
+    benefit3Desc?: string;
+    btnStart?: string;
+    hudPoints?: string;
+    hudLevel?: string;
+    hudTime?: string;
+    methodNote?: string;
+    mobileTitle?: string;
+    mobileDesc?: string;
+    mobileTip?: string;
+    resultTotal?: string;
+    rank3Title?: string;
+    rank3Text?: string;
+    rank2Title?: string;
+    rank2Text?: string;
+    rank1Title?: string;
+    rank1Text?: string;
+    btnRestart?: string;
+  }
+
+  function applyUI(container: Element, ui: PvtUI): void {
+    container.querySelectorAll<HTMLElement>('[data-key]').forEach((el) => {
+      const key = el.dataset.key as keyof PvtUI;
+      const val = ui[key];
+      if (val) el.textContent = val;
+    });
+  }
+
+  // eslint-disable-next-line complexity
+  function getRank(score: number, ui: PvtUI): { title: string; text: string } {
+    const ranks: Array<[number, { title: string; text: string }]> = [
+      [1200, { title: ui.rank3Title ?? 'VISIÓN FRACTAL', text: ui.rank3Text ?? '' }],
+      [600, { title: ui.rank2Title ?? 'HALCÓN', text: ui.rank2Text ?? '' }],
+    ];
+    const rank = ranks.find(([threshold]) => score > threshold);
+    return rank?.[1] ?? { title: ui.rank1Title ?? 'EXPLORADOR', text: ui.rank1Text ?? '' };
+  }
+
+  // eslint-disable-next-line max-lines-per-function
+  function initGame(container: Element): void {
+    const ui: PvtUI = JSON.parse((container as HTMLElement).dataset.ui ?? '{}');
+    applyUI(container, ui);
+
+    const introEl = container.querySelector<HTMLElement>('#pvt-intro');
+    const gameEl = container.querySelector<HTMLElement>('#pvt-game');
+    const resultEl = container.querySelector<HTMLElement>('#pvt-result');
+    const targetEl = container.querySelector<HTMLElement>('#pvt-target');
+    const viewportEl = container.querySelector<HTMLElement>('#pvt-viewport');
+    const scoreEl = container.querySelector<HTMLElement>('#pvt-score');
+    const levelEl = container.querySelector<HTMLElement>('#pvt-level');
+    const timeEl = container.querySelector<HTMLElement>('#pvt-time');
+    const finalEl = container.querySelector<HTMLElement>('#pvt-final');
+    const rankEl = container.querySelector<HTMLElement>('#pvt-rank');
+    const rankTextEl = container.querySelector<HTMLElement>('#pvt-rank-text');
+
+    let score = 0;
+    let level = 1;
+    let timeLeft = 60;
+    let gameActive = false;
+    let currentKey = '';
+    let targetVisible = false;
+    let timerId: number | null = null;
+    let spawnId: number | null = null;
+
+    function updateHUD(): void {
+      if (scoreEl) scoreEl.textContent = score.toString();
+      if (levelEl) levelEl.textContent = level.toString();
+    }
+
+    function spawnTarget(): void {
+      if (!gameActive || !targetEl || !viewportEl) return;
+      const keys = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+      currentKey = keys[Math.floor(Math.random() * keys.length)] ?? 'ArrowUp';
+
+      const rect = viewportEl.getBoundingClientRect();
+      const margin = 80;
+      const arrowMap: Record<string, { x: number; y: number; icon: string }> = {
+        ArrowUp: { x: Math.random() * (rect.width - 200) + 100, y: margin, icon: '↑' },
+        ArrowDown: { x: Math.random() * (rect.width - 200) + 100, y: rect.height - margin, icon: '↓' },
+        ArrowLeft: { x: margin, y: Math.random() * (rect.height - 200) + 100, icon: '←' },
+        ArrowRight: { x: rect.width - margin, y: Math.random() * (rect.height - 200) + 100, icon: '→' },
+      };
+
+      const pos = arrowMap[currentKey];
+      if (!pos) return;
+
+      targetEl.style.left = `${pos.x}px`;
+      targetEl.style.top = `${pos.y}px`;
+      targetEl.textContent = pos.icon;
+      targetEl.classList.remove('pvt__view--hidden', 'pvt__target--correct', 'pvt__target--wrong');
+      targetVisible = true;
+
+      const visibilityTime = Math.max(400, 1500 - level * 100);
+      window.setTimeout(() => {
+        if (targetVisible) {
+          targetEl.classList.add('pvt__view--hidden');
+          targetVisible = false;
+          scheduleNextSpawn();
+        }
+      }, visibilityTime);
+    }
+
+    function scheduleNextSpawn(): void {
+      if (!gameActive) return;
+      const delay = Math.max(500, 2000 - level * 150);
+      spawnId = window.setTimeout(spawnTarget, delay);
+    }
+
+    function handleKey(key: string): void {
+      if (!gameActive || !targetVisible || !targetEl) return;
+      if (key === currentKey) {
+        score += 10 * level;
+        if (score > 0 && score % 100 === 0) level++;
+        targetEl.classList.add('pvt__target--correct');
+        targetVisible = false;
+        setTimeout(() => targetEl.classList.add('pvt__view--hidden'), 250);
+        updateHUD();
+        if (spawnId) clearTimeout(spawnId);
+        scheduleNextSpawn();
+      } else {
+        targetEl.classList.add('pvt__target--wrong');
+        score = Math.max(0, score - 5);
+        updateHUD();
+      }
+    }
+
+    function startGame(): void {
+      score = 0;
+      level = 1;
+      timeLeft = 60;
+      gameActive = true;
+      introEl?.classList.add('pvt__view--hidden');
+      resultEl?.classList.add('pvt__view--hidden');
+      gameEl?.classList.remove('pvt__view--hidden');
+      updateHUD();
+      if (timeEl) timeEl.textContent = '60';
+      timerId = window.setInterval(() => {
+        timeLeft--;
+        if (timeEl) timeEl.textContent = timeLeft.toString();
+        if (timeLeft <= 0) endGame();
+      }, 1000);
+      setTimeout(scheduleNextSpawn, 600);
+    }
+
+    function endGame(): void {
+      gameActive = false;
+      if (timerId) clearInterval(timerId);
+      if (spawnId) clearTimeout(spawnId);
+      gameEl?.classList.add('pvt__view--hidden');
+      resultEl?.classList.remove('pvt__view--hidden');
+      if (finalEl) finalEl.textContent = score.toString();
+      if (rankEl && rankTextEl) {
+        const rank = getRank(score, ui);
+        rankEl.textContent = rank.title;
+        rankTextEl.textContent = rank.text;
+      }
+    }
+
+    container.querySelector('#pvt-start')?.addEventListener('click', startGame);
+    container.querySelector('#pvt-restart')?.addEventListener('click', startGame);
+
+    document.addEventListener('keydown', (e) => {
+      const arrows = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
+      if (gameActive && arrows.includes(e.key)) {
+        e.preventDefault();
+        handleKey(e.key);
+      }
+    });
+  }
+
+  document.querySelectorAll<HTMLElement>('.pvt').forEach(initGame);
+</script>