@jjlmoya/utils-health 1.1.0

package/src/tool/epworthSleepinessScale/component.astro

@@ -0,0 +1,528 @@
+---
+import type { EpworthSleepinessScaleUI } from './ui';
+
+interface Props {
+  ui?: Partial<EpworthSleepinessScaleUI>;
+}
+
+const ui = (Astro.props.ui ?? {}) as EpworthSleepinessScaleUI;
+const STEPS = 8;
+---
+
+<div class="ess" data-ui={JSON.stringify(ui)}>
+  
+  <div class="ess__quiz" id="ess-quiz">
+    <div class="ess__progress">
+      <div class="ess__progress-fill" id="ess-progress"></div>
+    </div>
+
+    <div class="ess__cards" id="ess-cards">
+      {Array.from({ length: STEPS }).map((_, idx) => (
+        <div class={`ess__card${idx === 0 ? ' ess__card--active' : ''}`} data-step={idx}>
+          <div class="ess__question-header">
+            <span class="ess__question-number">
+              <span data-key="situationPrefix">Situación</span>
+              {' '}{idx + 1}{' '}
+              <span data-key="situationOf">de</span>
+              {' '}{STEPS}
+            </span>
+            <h3 class="ess__question-text" data-key={`sit${idx}`}></h3>
+          </div>
+
+          <div class="ess__options">
+            {[0, 1, 2, 3].map((val) => (
+              <button class="ess__option" data-value={val}>
+                <span class="ess__option-label" data-key={`opt${val}`}></span>
+              </button>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+
+    <div class="ess__nav">
+      <button class="ess__nav-btn" id="ess-prev" disabled>
+        ← <span data-key="btnPrev">Anterior</span>
+      </button>
+      <span class="ess__step-indicator" id="ess-indicator">1 / {STEPS}</span>
+    </div>
+  </div>
+
+  
+  <div class="ess__results" id="ess-results">
+    <div class="ess__score-circle">
+      <span class="ess__score-num" id="ess-final">0</span>
+      <span class="ess__score-of" data-key="scoreOf">de 24</span>
+    </div>
+
+    <div class="ess__badge" id="ess-badge">Normal</div>
+    <p class="ess__result-desc" id="ess-desc"></p>
+
+    <button class="ess__reset-btn" id="ess-reset" data-key="btnReset">
+      Reiniciar Evaluación
+    </button>
+  </div>
+</div>
+
+<style>
+  .ess {
+    --ess-primary: #3b82f6;
+    --ess-accent: #f59e0b;
+    --ess-success: #10b981;
+    --ess-danger: #ef4444;
+    --ess-warning: #f97316;
+    --ess-bg: #f8fafc;
+    --ess-surface: #fff;
+    --ess-border: rgba(59, 130, 246, 0.2);
+    --ess-text: #0f172a;
+    --ess-muted: #475569;
+    --ess-option-bg: #f1f5f9;
+    --ess-option-border: rgba(0, 0, 0, 0.06);
+    --ess-nav-bg: #f1f5f9;
+    --ess-nav-border: #cbd5e1;
+    --ess-nav-text: #1e293b;
+    --ess-progress-track: rgba(0, 0, 0, 0.06);
+
+    max-width: 860px;
+    margin: 0 auto;
+    padding: 1rem;
+  }
+
+  
+  .ess__quiz,
+  .ess__results {
+    background: var(--ess-surface);
+    border: 2px solid var(--ess-border);
+    border-radius: 2.5rem;
+    padding: 4rem;
+    position: relative;
+    overflow: hidden;
+  }
+
+  
+  .ess__progress {
+    height: 8px;
+    background: var(--ess-progress-track);
+    border-radius: 10px;
+    overflow: hidden;
+    margin-bottom: 3rem;
+    border: 1px solid var(--ess-option-border);
+  }
+
+  .ess__progress-fill {
+    height: 100%;
+    background: linear-gradient(90deg, var(--ess-primary), var(--ess-success));
+    width: 0%;
+    transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
+    box-shadow: 0 0 12px rgba(59, 130, 246, 0.4);
+  }
+
+  
+  .ess__card {
+    display: none;
+    animation: ess-slide-in 0.5s cubic-bezier(0.23, 1, 0.32, 1);
+  }
+
+  .ess__card--active {
+    display: block;
+  }
+
+  @keyframes ess-slide-in {
+    from { opacity: 0; transform: scale(0.97) translateY(16px); }
+    to { opacity: 1; transform: scale(1) translateY(0); }
+  }
+
+  .ess__question-header {
+    margin-bottom: 3rem;
+    text-align: center;
+  }
+
+  .ess__question-number {
+    font-size: 0.8rem;
+    text-transform: uppercase;
+    letter-spacing: 3px;
+    color: var(--ess-accent);
+    font-weight: 900;
+    margin-bottom: 1rem;
+    display: block;
+  }
+
+  .ess__question-text {
+    font-size: 2.2rem;
+    font-weight: 800;
+    line-height: 1.2;
+    color: var(--ess-text);
+    text-wrap: balance;
+    margin: 0;
+  }
+
+  
+  .ess__options {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1.5rem;
+  }
+
+  .ess__option {
+    background: var(--ess-option-bg);
+    border: 1px solid var(--ess-option-border);
+    border-radius: 1.5rem;
+    padding: 1.75rem 1.5rem;
+    cursor: pointer;
+    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .ess__option:hover {
+    background: rgba(59, 130, 246, 0.08);
+    border-color: var(--ess-primary);
+    transform: translateY(-4px);
+    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.12);
+  }
+
+  .ess :global(.ess__option--selected) {
+    background: var(--ess-primary);
+    border-color: var(--ess-primary);
+    color: #fff;
+    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.35);
+  }
+
+  .ess :global(.ess__option--selected) .ess__option-label {
+    color: #fff;
+  }
+
+  .ess__option-label {
+    font-size: 1.2rem;
+    font-weight: 700;
+    color: var(--ess-text);
+  }
+
+  
+  .ess__nav {
+    margin-top: 3.5rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-top: 1px solid var(--ess-option-border);
+    padding-top: 2rem;
+  }
+
+  .ess__nav-btn {
+    background: var(--ess-nav-bg);
+    border: 1px solid var(--ess-nav-border);
+    color: var(--ess-nav-text);
+    padding: 0.875rem 1.75rem;
+    border-radius: 1rem;
+    cursor: pointer;
+    font-weight: 700;
+    font-size: 1rem;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .ess__nav-btn:hover:not(:disabled) {
+    background: var(--ess-primary);
+    border-color: var(--ess-primary);
+    color: #fff;
+    transform: scale(1.05);
+  }
+
+  .ess__nav-btn:disabled {
+    opacity: 0.25;
+    cursor: not-allowed;
+  }
+
+  .ess__step-indicator {
+    font-weight: 700;
+    opacity: 0.45;
+    color: var(--ess-text);
+  }
+
+  
+  .ess__results {
+    display: none;
+    text-align: center;
+    animation: ess-result-reveal 0.7s cubic-bezier(0.19, 1, 0.22, 1);
+  }
+
+  .ess__results--visible {
+    display: block;
+  }
+
+  @keyframes ess-result-reveal {
+    from { opacity: 0; transform: translateY(24px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  .ess__score-circle {
+    width: 220px;
+    height: 220px;
+    border-radius: 50%;
+    border: 10px solid var(--ess-border);
+    background: var(--ess-option-bg);
+    margin: 0 auto 2.5rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    box-shadow: inset 0 0 30px rgba(59, 130, 246, 0.08);
+  }
+
+  .ess__score-num {
+    font-size: 5rem;
+    font-weight: 950;
+    line-height: 1;
+    background: linear-gradient(135deg, var(--ess-text) 0%, var(--ess-primary) 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+
+  .ess__score-of {
+    font-size: 1.1rem;
+    color: var(--ess-muted);
+    font-weight: 700;
+    margin-top: 0.25rem;
+  }
+
+  .ess__badge {
+    display: inline-block;
+    padding: 0.625rem 2.5rem;
+    border-radius: 3rem;
+    font-weight: 900;
+    font-size: 1.15rem;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    margin-bottom: 1.5rem;
+  }
+
+  :global(.ess__badge--normal) { background: rgba(16, 185, 129, 0.12); color: #10b981; border: 2px solid #10b981; }
+  :global(.ess__badge--mild) { background: rgba(245, 158, 11, 0.12); color: #f59e0b; border: 2px solid #f59e0b; }
+  :global(.ess__badge--mod) { background: rgba(249, 115, 22, 0.12); color: #f97316; border: 2px solid #f97316; }
+  :global(.ess__badge--severe) { background: rgba(239, 68, 68, 0.12); color: #ef4444; border: 2px solid #ef4444; }
+
+  .ess__result-desc {
+    font-size: 1.2rem;
+    line-height: 1.7;
+    color: var(--ess-muted);
+    max-width: 620px;
+    margin: 0 auto 2.5rem;
+  }
+
+  .ess__reset-btn {
+    background: linear-gradient(135deg, var(--ess-primary) 0%, #1e40af 100%);
+    color: #fff;
+    border: none;
+    padding: 1.1rem 3rem;
+    border-radius: 1.5rem;
+    font-weight: 800;
+    font-size: 1.15rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.25);
+  }
+
+  .ess__reset-btn:hover {
+    transform: translateY(-3px) scale(1.02);
+    box-shadow: 0 20px 45px rgba(30, 64, 175, 0.4);
+    filter: brightness(1.1);
+  }
+
+  
+  :global(.theme-dark) .ess {
+    --ess-bg: #0f172a;
+    --ess-surface: rgba(15, 23, 42, 0.85);
+    --ess-border: rgba(59, 130, 246, 0.3);
+    --ess-text: #f8fafc;
+    --ess-muted: #94a3b8;
+    --ess-option-bg: rgba(255, 255, 255, 0.04);
+    --ess-option-border: rgba(255, 255, 255, 0.08);
+    --ess-nav-bg: rgba(15, 23, 42, 0.5);
+    --ess-nav-border: rgba(59, 130, 246, 0.3);
+    --ess-nav-text: #f8fafc;
+    --ess-progress-track: rgba(255, 255, 255, 0.05);
+  }
+
+  :global(.theme-dark) .ess__quiz,
+  :global(.theme-dark) .ess__results {
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+  }
+
+  :global(.theme-dark) .ess__score-circle {
+    background: rgba(15, 23, 42, 0.5);
+  }
+
+  :global(.theme-dark) .ess__score-num {
+    background: linear-gradient(135deg, #fff 0%, var(--ess-primary) 100%);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+
+  :global(.theme-dark) .ess__option:hover {
+    background: rgba(59, 130, 246, 0.1);
+  }
+
+  
+  @media (max-width: 768px) {
+    .ess__quiz,
+    .ess__results {
+      padding: 2rem 1.5rem;
+      border-radius: 1.75rem;
+    }
+
+    .ess__question-text {
+      font-size: 1.6rem;
+    }
+
+    .ess__options {
+      grid-template-columns: 1fr;
+      gap: 0.875rem;
+    }
+
+    .ess__option {
+      padding: 1.25rem;
+    }
+
+    .ess__score-circle {
+      width: 170px;
+      height: 170px;
+      border-width: 6px;
+    }
+
+    .ess__score-num {
+      font-size: 3.5rem;
+    }
+  }
+</style>
+
+<script>
+  interface EssUI {
+    sit0?: string; sit1?: string; sit2?: string; sit3?: string;
+    sit4?: string; sit5?: string; sit6?: string; sit7?: string;
+    opt0?: string; opt1?: string; opt2?: string; opt3?: string;
+    situationPrefix?: string; situationOf?: string;
+    btnPrev?: string;
+    scoreOf?: string;
+    badgeNormal?: string; descNormal?: string;
+    badgeMild?: string; descMild?: string;
+    badgeMod?: string; descMod?: string;
+    badgeSevere?: string; descSevere?: string;
+    btnReset?: string;
+  }
+
+  interface BadgeTier { badge: string; cls: string; desc: string; }
+
+  function applyUI(container: Element, ui: EssUI): void {
+    container.querySelectorAll<HTMLElement>('[data-key]').forEach((el) => {
+      const key = el.dataset.key as keyof EssUI;
+      const val = ui[key];
+      if (val) el.textContent = val;
+    });
+  }
+
+  // eslint-disable-next-line complexity
+  function getBadgeTier(total: number, ui: EssUI): BadgeTier {
+    const tiers: Array<[number, BadgeTier]> = [
+      [15, { badge: ui.badgeSevere ?? 'Grave', cls: 'ess__badge--severe', desc: ui.descSevere ?? '' }],
+      [12, { badge: ui.badgeMod ?? 'Moderada', cls: 'ess__badge--mod', desc: ui.descMod ?? '' }],
+      [10, { badge: ui.badgeMild ?? 'Leve', cls: 'ess__badge--mild', desc: ui.descMild ?? '' }],
+    ];
+    const tier = tiers.find(([threshold]) => total > threshold);
+    return tier?.[1] ?? { badge: ui.badgeNormal ?? 'Normal', cls: 'ess__badge--normal', desc: ui.descNormal ?? '' };
+  }
+
+  // eslint-disable-next-line max-lines-per-function
+  function initEss(container: Element): void {
+    const ui: EssUI = JSON.parse((container as HTMLElement).dataset.ui ?? '{}');
+    applyUI(container, ui);
+
+    const quizEl = container.querySelector<HTMLElement>('#ess-quiz');
+    const resultsEl = container.querySelector<HTMLElement>('#ess-results');
+    const progressEl = container.querySelector<HTMLElement>('#ess-progress');
+    const indicatorEl = container.querySelector<HTMLElement>('#ess-indicator');
+    const prevBtn = container.querySelector<HTMLButtonElement>('#ess-prev');
+    const finalEl = container.querySelector<HTMLElement>('#ess-final');
+    const badgeEl = container.querySelector<HTMLElement>('#ess-badge');
+    const descEl = container.querySelector<HTMLElement>('#ess-desc');
+    const cards = container.querySelectorAll<HTMLElement>('.ess__card');
+
+    const TOTAL = cards.length;
+    let currentStep = 0;
+    const scores: number[] = new Array(TOTAL).fill(-1);
+
+    function updateUI(): void {
+      cards.forEach((card, idx) => card.classList.toggle('ess__card--active', idx === currentStep));
+      const pct = (currentStep / TOTAL) * 100;
+      if (progressEl) progressEl.style.width = `${pct}%`;
+      if (indicatorEl) indicatorEl.textContent = `${currentStep + 1} / ${TOTAL}`;
+      if (prevBtn) prevBtn.disabled = currentStep === 0;
+
+      const card = cards[currentStep];
+      card?.querySelectorAll<HTMLElement>('.ess__option').forEach((btn) => {
+        const val = parseInt(btn.dataset.value ?? '0');
+        btn.classList.toggle('ess__option--selected', scores[currentStep] === val);
+      });
+    }
+
+    function handleOption(value: number): void {
+      scores[currentStep] = value;
+      if (currentStep < TOTAL - 1) {
+        currentStep++;
+        setTimeout(updateUI, 180);
+      } else {
+        showResults();
+      }
+    }
+
+    function showResults(): void {
+      const total = scores.reduce((a, b) => a + (b >= 0 ? b : 0), 0);
+      if (quizEl) quizEl.style.display = 'none';
+      if (resultsEl) {
+        resultsEl.style.display = 'block';
+        resultsEl.classList.add('ess__results--visible');
+      }
+      if (finalEl) finalEl.textContent = total.toString();
+      if (badgeEl && descEl) {
+        const tier = getBadgeTier(total, ui);
+        badgeEl.textContent = tier.badge;
+        badgeEl.className = `ess__badge ${tier.cls}`;
+        descEl.textContent = tier.desc;
+      }
+    }
+
+    function reset(): void {
+      currentStep = 0;
+      scores.fill(-1);
+      if (quizEl) quizEl.style.display = 'block';
+      if (resultsEl) {
+        resultsEl.style.display = 'none';
+        resultsEl.classList.remove('ess__results--visible');
+      }
+      updateUI();
+    }
+
+    container.querySelectorAll<HTMLElement>('.ess__option').forEach((btn) => {
+      btn.addEventListener('click', () => {
+        const val = parseInt(btn.dataset.value ?? '0');
+        handleOption(val);
+      });
+    });
+
+    prevBtn?.addEventListener('click', () => {
+      if (currentStep > 0) { currentStep--; updateUI(); }
+    });
+
+    container.querySelector('#ess-reset')?.addEventListener('click', reset);
+
+    updateUI();
+  }
+
+  document.querySelectorAll<HTMLElement>('.ess').forEach(initEss);
+</script>