@jjlmoya/utils-health 1.1.0

package/src/tool/breathingVisualizer/component.astro

@@ -0,0 +1,636 @@
+---
+import { Icon } from 'astro-icon/components';
+import type { KnownLocale } from '../../types';
+import type { BreathingVisualizerUI } from './ui';
+
+interface Props {
+  locale?: KnownLocale;
+  ui?: Record<string, unknown>;
+}
+
+const t = (Astro.props.ui ?? {}) as BreathingVisualizerUI;
+---
+
+<section class="bv">
+  <div class="bv__container" id="bv-container" data-ui={JSON.stringify(t)}>
+    <div class="bv__gradient"></div>
+    <div id="bv-glow" class="bv__glow"></div>
+
+    <div class="bv__visual">
+      <div id="bv-round-indicator" class="bv__round-indicator bv__hidden">
+        {t.roundPrefix} <span id="bv-round">1</span>
+      </div>
+      <div class="bv__orb-area">
+        <div id="bv-ring-1" class="bv__ring"></div>
+        <div id="bv-ring-2" class="bv__ring bv__ring--delay"></div>
+        <div id="bv-orb" class="bv__orb">
+          <div class="bv__orb-inner"></div>
+          <div id="bv-orb-text" class="bv__orb-text">{t.orbIdle}</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="bv__info">
+      <div id="bv-phase-label" class="bv__phase-label">{t.idlePhase}</div>
+      <div id="bv-timer" class="bv__timer">00</div>
+      <div id="bv-breath-count" class="bv__breath-count bv__hidden">
+        {t.breathPrefix} <span id="bv-breath">1</span> / 30
+      </div>
+    </div>
+
+    <div class="bv__controls">
+      <div class="bv__tabs">
+        <button id="bv-btn-box" class="bv__tab bv__tab--active">{t.btnBox}</button>
+        <button id="bv-btn-relax" class="bv__tab">{t.btnRelax}</button>
+        <button id="bv-btn-wimhof" class="bv__tab">{t.btnWimhof}</button>
+      </div>
+      <div class="bv__actions">
+        <button id="bv-start" class="bv__start">
+          <span class="bv__start-content">
+            <span id="bv-icon-play"><Icon name="mdi:play" class="bv__icon" /></span>
+            <span id="bv-icon-stop" class="bv__hidden"><Icon name="mdi:stop" class="bv__icon" /></span>
+            <span id="bv-start-text">{t.startLabel}</span>
+          </span>
+        </button>
+        <div class="bv__toggles">
+          <button id="bv-loop" class="bv__toggle" title={t.loopTitle}>
+            <Icon name="mdi:repeat" class="bv__icon" />
+          </button>
+          <button id="bv-vib" class="bv__toggle bv__toggle--vib-active" title={t.vibTitle}>
+            <Icon name="mdi:vibrate" class="bv__icon" />
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<style>
+  @keyframes bv-pulse-ring {
+    0% { transform: scale(0.8); opacity: 0.5; }
+    100% { transform: scale(2); opacity: 0; }
+  }
+
+  @keyframes bv-pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+  }
+
+  .bv {
+    --bv-bg: #fff;
+    --bv-border: #e2e8f0;
+    --bv-phase: #94a3b8;
+    --bv-timer: #0f172a;
+    --bv-round-text: #059669;
+    --bv-round-bg: rgba(5, 150, 105, 0.1);
+    --bv-round-border: rgba(5, 150, 105, 0.2);
+    --bv-tab-bg: #f1f5f9;
+    --bv-tab-border: #e2e8f0;
+    --bv-btn-active-bg: #fff;
+    --bv-btn-active-text: #0f172a;
+    --bv-btn-text: #64748b;
+    --bv-start-bg: #0f172a;
+    --bv-start-text: #fff;
+    --bv-toggle-bg: #f1f5f9;
+    --bv-toggle-border: #e2e8f0;
+    --bv-toggle-text: #94a3b8;
+
+    max-width: 56rem;
+    margin: 0 auto;
+    padding: 3rem 1rem;
+  }
+
+  :global(.theme-dark) .bv {
+    --bv-bg: #09090b;
+    --bv-border: #27272a;
+    --bv-phase: #71717a;
+    --bv-timer: #fff;
+    --bv-round-text: #34d399;
+    --bv-round-bg: rgba(52, 211, 153, 0.1);
+    --bv-round-border: rgba(52, 211, 153, 0.2);
+    --bv-tab-bg: #18181b;
+    --bv-tab-border: #27272a;
+    --bv-btn-active-bg: #27272a;
+    --bv-btn-active-text: #fff;
+    --bv-btn-text: #71717a;
+    --bv-start-bg: #fff;
+    --bv-start-text: #0f172a;
+    --bv-toggle-bg: #18181b;
+    --bv-toggle-border: #27272a;
+    --bv-toggle-text: #94a3b8;
+  }
+
+  .bv__container {
+    background: var(--bv-bg);
+    border: 1px solid var(--bv-border);
+    border-radius: 3rem;
+    padding: 4rem 2rem;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-height: 650px;
+    position: relative;
+    overflow: hidden;
+    gap: 3rem;
+    transition: all 0.5s;
+  }
+
+  .bv__gradient {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, transparent 50%, rgba(16, 185, 129, 0.05) 100%);
+    pointer-events: none;
+  }
+
+  .bv__glow {
+    position: absolute;
+    inset: 0;
+    background-color: transparent;
+    transition: background-color 1s;
+    filter: blur(120px);
+    pointer-events: none;
+  }
+
+  .bv__visual {
+    position: relative;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2rem;
+  }
+
+  .bv__round-indicator {
+    padding: 0.25rem 1rem;
+    border-radius: 9999px;
+    background: var(--bv-round-bg);
+    border: 1px solid var(--bv-round-border);
+    color: var(--bv-round-text);
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+  }
+
+  .bv__orb-area {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 16rem;
+    height: 16rem;
+  }
+
+  .bv__ring {
+    position: absolute;
+    width: 16rem;
+    height: 16rem;
+    border: 2px solid rgba(59, 130, 246, 0.2);
+    border-radius: 50%;
+  }
+
+  .bv__ring--delay { border-color: rgba(16, 185, 129, 0.1); animation-delay: 75ms; }
+  .bv__ring--active { animation: bv-pulse-ring 4s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
+
+  .bv__orb {
+    width: 12rem;
+    height: 12rem;
+    border-radius: 50%;
+    background: linear-gradient(135deg, rgba(59, 130, 246, 0.8) 0%, rgba(16, 185, 129, 0.8) 100%);
+    box-shadow: 0 0 50px rgba(59, 130, 246, 0.3);
+    backdrop-filter: blur(4px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    transition-property: transform;
+    transition-timing-function: linear;
+    transition-duration: 4s;
+  }
+
+  .bv__orb-inner {
+    position: absolute;
+    inset: 0.5rem;
+    border: 2px solid rgba(255, 255, 255, 0.2);
+    border-radius: 50%;
+  }
+
+  .bv__orb-text {
+    color: #fff;
+    font-weight: 700;
+    font-size: 1.25rem;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    text-align: center;
+    padding: 0 1rem;
+    user-select: none;
+    animation: bv-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+
+  .bv__info {
+    text-align: center;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .bv__phase-label {
+    color: var(--bv-phase);
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    letter-spacing: 0.3em;
+  }
+
+  .bv__timer {
+    font-size: 3rem;
+    font-weight: 900;
+    color: var(--bv-timer);
+    font-variant-numeric: tabular-nums;
+    line-height: 1;
+  }
+
+  .bv__breath-count {
+    font-size: 0.75rem;
+    font-weight: 700;
+    color: #3b82f6;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+  }
+
+  .bv__controls {
+    z-index: 10;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.5rem;
+  }
+
+  .bv__tabs {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 0.25rem;
+    padding: 0.5rem;
+    background: var(--bv-tab-bg);
+    border: 1px solid var(--bv-tab-border);
+    border-radius: 1.5rem;
+    width: 100%;
+    max-width: 36rem;
+  }
+
+  .bv__tab {
+    flex: 1;
+    padding: 0.75rem 1rem;
+    border-radius: 1rem;
+    font-size: 0.75rem;
+    font-weight: 700;
+    transition: all 0.2s;
+    cursor: pointer;
+    color: var(--bv-btn-text);
+    background: transparent;
+    border: none;
+  }
+
+  .bv__tab--active {
+    background: var(--bv-btn-active-bg);
+    color: var(--bv-btn-active-text);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  }
+
+  .bv__actions {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  @media (min-width: 640px) {
+    .bv__actions { flex-direction: row; }
+  }
+
+  .bv__start {
+    padding: 1.25rem 3rem;
+    background: var(--bv-start-bg);
+    color: var(--bv-start-text);
+    font-weight: 900;
+    font-size: 1.125rem;
+    border-radius: 1rem;
+    border: none;
+    cursor: pointer;
+    box-shadow: 0 20px 25px -5px rgba(59, 130, 246, 0.2);
+    transition: transform 0.2s;
+  }
+
+  .bv__start:hover { transform: scale(1.05); }
+  .bv__start:active { transform: scale(0.95); }
+
+  .bv__start-content {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+  }
+
+  .bv__toggles {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  .bv__toggle {
+    padding: 1rem;
+    background: var(--bv-toggle-bg);
+    border: 1px solid var(--bv-toggle-border);
+    border-radius: 1rem;
+    color: var(--bv-toggle-text);
+    cursor: pointer;
+    transition: all 0.2s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .bv__toggle:hover { color: #3b82f6; }
+
+  .bv__toggle--loop-active {
+    color: #3b82f6;
+    background-color: rgba(59, 130, 246, 0.1);
+    border-color: rgba(59, 130, 246, 0.2);
+  }
+
+  .bv__toggle--vib-active {
+    color: #10b981;
+    background-color: rgba(16, 185, 129, 0.1);
+    border-color: rgba(16, 185, 129, 0.2);
+  }
+
+  .bv__icon { width: 1.25rem; height: 1.25rem; }
+
+  .bv__hidden { display: none; }
+
+  @media (max-width: 640px) {
+    .bv__container { padding: 2rem 1rem; border-radius: 2rem; }
+    .bv__timer { font-size: 2.5rem; }
+  }
+</style>
+
+<script>
+  interface PhaseConfig {
+    name: string;
+    duration: number;
+    label: string;
+    color: string;
+    scale: number;
+  }
+
+  interface WimhofConfig {
+    breaths: number;
+    inhaleTime: number;
+    exhaleTime: number;
+    retentionTime: number;
+    recoveryTime: number;
+  }
+
+  interface BVui {
+    startLabel: string; stopLabel: string; sessionEnded: string; orbIdle: string;
+    phaseInhale: string; phaseHold: string; phaseExhale: string; phaseEmpty: string;
+    phaseRelease: string; phaseRecover: string;
+    labelBoxInhale: string; labelBoxHold: string; labelBoxExhale: string; labelBoxEmpty: string;
+    labelRelaxInhale: string; labelRelaxHold: string; labelRelaxExhale: string;
+    labelWimInhale: string; labelWimRelease: string; labelWimHold: string; labelWimRecover: string;
+  }
+
+  const container = document.getElementById('bv-container') as HTMLElement;
+  const ui = JSON.parse(container.dataset.ui ?? '{}') as BVui;
+
+  const box: PhaseConfig[] = [
+    { name: ui.phaseInhale, duration: 4, label: ui.labelBoxInhale, color: 'blue', scale: 1.5 },
+    { name: ui.phaseHold, duration: 4, label: ui.labelBoxHold, color: 'indigo', scale: 1.5 },
+    { name: ui.phaseExhale, duration: 4, label: ui.labelBoxExhale, color: 'emerald', scale: 0.8 },
+    { name: ui.phaseEmpty, duration: 4, label: ui.labelBoxEmpty, color: 'slate', scale: 0.8 },
+  ];
+
+  const relax: PhaseConfig[] = [
+    { name: ui.phaseInhale, duration: 4, label: ui.labelRelaxInhale, color: 'blue', scale: 1.5 },
+    { name: ui.phaseHold, duration: 7, label: ui.labelRelaxHold, color: 'indigo', scale: 1.5 },
+    { name: ui.phaseExhale, duration: 8, label: ui.labelRelaxExhale, color: 'emerald', scale: 0.8 },
+  ];
+
+  const wh: WimhofConfig = { breaths: 30, inhaleTime: 1.5, exhaleTime: 1.5, retentionTime: 60, recoveryTime: 15 };
+
+  const orb = document.getElementById('bv-orb');
+  const orbText = document.getElementById('bv-orb-text');
+  const phaseLabel = document.getElementById('bv-phase-label');
+  const timerDisplay = document.getElementById('bv-timer');
+  const glow = document.getElementById('bv-glow');
+  const ring1 = document.getElementById('bv-ring-1');
+  const ring2 = document.getElementById('bv-ring-2');
+  const roundIndicator = document.getElementById('bv-round-indicator');
+  const currentRoundEl = document.getElementById('bv-round');
+  const breathCount = document.getElementById('bv-breath-count');
+  const currentBreathEl = document.getElementById('bv-breath');
+  const startBtn = document.getElementById('bv-start');
+  const startText = document.getElementById('bv-start-text');
+  const playIcon = document.getElementById('bv-icon-play');
+  const stopIcon = document.getElementById('bv-icon-stop');
+  const btnBox = document.getElementById('bv-btn-box');
+  const btnRelax = document.getElementById('bv-btn-relax');
+  const btnWimhof = document.getElementById('bv-btn-wimhof');
+  const loopBtn = document.getElementById('bv-loop');
+  const vibBtn = document.getElementById('bv-vib');
+
+  let isRunning = false;
+  let currentPhase = 0;
+  let timer = 0;
+  let currentRound = 1;
+  let currentBreath = 1;
+  let isLooping = false;
+  let vibrationEnabled = true;
+  let technique: 'box' | 'relax' | 'wimhof' = 'box';
+  let interval: ReturnType<typeof setInterval> | undefined;
+
+  function getWimhofConfig(phase: number, t: number, w: WimhofConfig): PhaseConfig {
+    if (phase === 0) {
+      if (t >= w.inhaleTime / 2) {
+        return { name: ui.phaseInhale, duration: w.inhaleTime, label: ui.labelWimInhale, color: 'blue', scale: 1.6 };
+      }
+      return { name: ui.phaseRelease, duration: w.exhaleTime, label: ui.labelWimRelease, color: 'emerald', scale: 1.1 };
+    }
+    if (phase === 1) {
+      return { name: ui.phaseHold, duration: w.retentionTime, label: ui.labelWimHold, color: 'indigo', scale: 0.7 };
+    }
+    return { name: ui.phaseRecover, duration: w.recoveryTime, label: ui.labelWimRecover, color: 'blue', scale: 1.3 };
+  }
+
+  function getConfig(): PhaseConfig {
+    if (technique === 'wimhof') return getWimhofConfig(currentPhase, timer, wh);
+    const phases = technique === 'box' ? box : relax;
+    return phases[currentPhase];
+  }
+
+  function applyGlow(color: string): void {
+    if (!glow) return;
+    const map: Record<string, string> = {
+      blue: 'rgba(59,130,246,0.15)', indigo: 'rgba(99,102,241,0.15)',
+      emerald: 'rgba(16,185,129,0.15)', slate: 'rgba(107,114,128,0.1)',
+    };
+    glow.style.backgroundColor = map[color] ?? 'transparent';
+  }
+
+  function applyOrbScale(cfg: PhaseConfig): void {
+    if (!orb) return;
+    const isWimhofBreath = technique === 'wimhof' && currentPhase === 0;
+    const dur = isWimhofBreath ? 0.7 : cfg.duration;
+    orb.style.transitionDuration = `${dur}s`;
+    orb.style.transform = `scale(${cfg.scale})`;
+  }
+
+  function triggerVibration(duration: number): void {
+    if (!vibrationEnabled) return;
+    const atBoundary = timer === duration || timer === 1;
+    if (atBoundary) window.navigator.vibrate?.(100);
+  }
+
+  function updateUI(): void {
+    const cfg = getConfig();
+    if (orbText) orbText.textContent = cfg.name;
+    if (phaseLabel) phaseLabel.textContent = cfg.label;
+    if (timerDisplay) timerDisplay.textContent = Math.ceil(timer).toString().padStart(2, '0');
+    applyOrbScale(cfg);
+    applyGlow(cfg.color);
+    triggerVibration(cfg.duration);
+  }
+
+  function setRunning(running: boolean): void {
+    if (startText) startText.textContent = running ? ui.stopLabel : ui.startLabel;
+    playIcon?.classList.toggle('bv__hidden', running);
+    stopIcon?.classList.toggle('bv__hidden', !running);
+  }
+
+  function resetRings(): void {
+    ring1?.classList.remove('bv__ring--active');
+    ring2?.classList.remove('bv__ring--active');
+  }
+
+  function resetIndicators(): void {
+    roundIndicator?.classList.add('bv__hidden');
+    breathCount?.classList.add('bv__hidden');
+  }
+
+  function stopSession(): void {
+    isRunning = false;
+    clearInterval(interval);
+    setRunning(false);
+    if (phaseLabel) phaseLabel.textContent = ui.sessionEnded;
+    if (orbText) orbText.textContent = ui.orbIdle;
+    resetRings();
+    resetIndicators();
+    if (orb) { orb.style.transitionDuration = '1s'; orb.style.transform = 'scale(1)'; }
+    if (glow) glow.style.backgroundColor = 'transparent';
+  }
+
+  function handleWimhofBreathing(): void {
+    if (orbText?.textContent === ui.phaseInhale) { timer = wh.exhaleTime; return; }
+    currentBreath++;
+    if (currentBreath > wh.breaths) {
+      currentPhase = 1;
+      timer = wh.retentionTime;
+      breathCount?.classList.add('bv__hidden');
+      return;
+    }
+    timer = wh.inhaleTime;
+    if (currentBreathEl) currentBreathEl.textContent = currentBreath.toString();
+  }
+
+  function handleWimhofTick(): void {
+    timer -= 0.1;
+    if (timer > 0) return;
+    if (currentPhase === 0) { handleWimhofBreathing(); return; }
+    if (currentPhase === 1) { currentPhase = 2; timer = wh.recoveryTime; return; }
+    if (!isLooping) { stopSession(); return; }
+    currentRound++;
+    if (currentRoundEl) currentRoundEl.textContent = currentRound.toString();
+    currentPhase = 0;
+    currentBreath = 1;
+    timer = wh.inhaleTime;
+    breathCount?.classList.remove('bv__hidden');
+    if (currentBreathEl) currentBreathEl.textContent = '1';
+  }
+
+  function handleRegularTick(): void {
+    timer--;
+    if (timer >= 1) return;
+    currentPhase++;
+    const phases = technique === 'box' ? box : relax;
+    if (currentPhase < phases.length) { timer = phases[currentPhase].duration; return; }
+    if (!isLooping) { stopSession(); return; }
+    currentRound++;
+    if (currentRoundEl) currentRoundEl.textContent = currentRound.toString();
+    currentPhase = 0;
+    roundIndicator?.classList.remove('bv__hidden');
+    timer = phases[0].duration;
+  }
+
+  function tick(): void {
+    if (technique === 'wimhof') handleWimhofTick(); else handleRegularTick();
+    updateUI();
+  }
+
+  function initWimhofSession(): void {
+    timer = wh.inhaleTime;
+    breathCount?.classList.remove('bv__hidden');
+    roundIndicator?.classList.remove('bv__hidden');
+  }
+
+  function initRegularSession(): void {
+    const phases = technique === 'box' ? box : relax;
+    timer = phases[0].duration;
+    breathCount?.classList.add('bv__hidden');
+    roundIndicator?.classList.toggle('bv__hidden', !isLooping);
+  }
+
+  function activateRings(): void {
+    ring1?.classList.add('bv__ring--active');
+    ring2?.classList.add('bv__ring--active');
+  }
+
+  function startSession(): void {
+    isRunning = true;
+    currentPhase = 0;
+    currentRound = 1;
+    currentBreath = 1;
+    if (technique === 'wimhof') initWimhofSession(); else initRegularSession();
+    setRunning(true);
+    activateRings();
+    updateUI();
+    const ms = technique === 'wimhof' ? 100 : 1000;
+    interval = setInterval(tick, ms);
+  }
+
+  function updateTabs(): void {
+    const active = 'bv__tab--active';
+    btnBox?.classList.toggle(active, technique === 'box');
+    btnRelax?.classList.toggle(active, technique === 'relax');
+    btnWimhof?.classList.toggle(active, technique === 'wimhof');
+  }
+
+  startBtn?.addEventListener('click', () => { if (isRunning) stopSession(); else startSession(); });
+  btnBox?.addEventListener('click', () => { if (!isRunning) { technique = 'box'; updateTabs(); } });
+  btnRelax?.addEventListener('click', () => { if (!isRunning) { technique = 'relax'; updateTabs(); } });
+  btnWimhof?.addEventListener('click', () => { if (!isRunning) { technique = 'wimhof'; updateTabs(); } });
+
+  if (loopBtn) loopBtn.addEventListener('click', () => {
+    isLooping = !isLooping;
+    loopBtn.classList.toggle('bv__toggle--loop-active', isLooping);
+  });
+
+  if (vibBtn) vibBtn.addEventListener('click', () => {
+    vibrationEnabled = !vibrationEnabled;
+    vibBtn.classList.toggle('bv__toggle--vib-active', vibrationEnabled);
+  });
+
+  document.addEventListener('astro:before-preparation', () => clearInterval(interval));
+</script>