// AppShell — top nav (functional routing), gem tray, page outlet, transitions // Tracks the mobile breakpoint (<680px) with a resize listener. Matches the // isMobile checks scattered through the section components. function useIsMobile(bp = 680) { const [m, setM] = React.useState(() => typeof window !== 'undefined' && window.innerWidth < bp); React.useEffect(() => { const onResize = () => setM(window.innerWidth < bp); window.addEventListener('resize', onResize); onResize(); return () => window.removeEventListener('resize', onResize); }, [bp]); return m; } // ─── Rest timer (timestamp-based, background-proof) ────────────────── // The countdown is derived from wall-clock timestamps, NOT from decrementing a // counter on every setInterval tick. When the tab is backgrounded the browser // freezes setInterval, but Date.now() keeps advancing — so on return we compute // the true remaining time and, if the rest already elapsed, fire completion. // // rem = ceil((endAt - Date.now()) / 1000) // // The interval only repaints the UI (and drives warning/done checks while the // tab is visible); it never *is* the clock. A `visibilitychange → visible` // listener recomputes immediately so a frozen crono self-corrects on return. // // opts.persist → mirror the active rest into localStorage so it survives a // reload / accidental app-close (coherent with session persist). // opts.onDone → called once when a rest completes (e.g. flash "next set"). const REST_KEY = 'atlas.resttimer.v1'; function useRestTimer(soundEnabled, opts = {}) { const { persist = false, onDone } = opts; // Active rest: { endAt (ms epoch), total (secs), key }. null = idle. const [timer, setTimer] = React.useState(null); const [, forceTick] = React.useState(0); const timerRef = React.useRef(null); // latest timer, for listeners/intervals const soundRef = React.useRef(soundEnabled); const onDoneRef = React.useRef(onDone); const warnedRef = React.useRef(null); // key we've already sounded the 10s warning for React.useEffect(() => { soundRef.current = soundEnabled; }, [soundEnabled]); React.useEffect(() => { onDoneRef.current = onDone; }, [onDone]); React.useEffect(() => { timerRef.current = timer; }, [timer]); const remOf = (t) => (t ? Math.max(0, Math.ceil((t.endAt - Date.now()) / 1000)) : 0); const clearActive = React.useCallback(() => { warnedRef.current = null; setTimer(null); if (persist) { try { localStorage.removeItem(REST_KEY); } catch (_) {} } }, [persist]); // Complete the current rest: sound + onDone + clear. Fired both by the normal // interval reaching 0 and by returning to a foreground where it already elapsed. const fireDone = React.useCallback((t) => { if (!t) return; if (typeof AtlasTimer !== 'undefined') AtlasTimer.restDone(soundRef.current); if (onDoneRef.current) onDoneRef.current(); clearActive(); }, [clearActive]); // Evaluate the current timer against the wall clock: warn at 10s, done at 0. const evaluate = React.useCallback(() => { const t = timerRef.current; if (!t) return; const rem = remOf(t); if (rem <= 0) { fireDone(t); return; } if (rem <= 10 && warnedRef.current !== t.key) { warnedRef.current = t.key; if (typeof AtlasTimer !== 'undefined') AtlasTimer.restWarning(soundRef.current); } forceTick(n => n + 1); // repaint }, [fireDone]); // Restore a persisted rest on mount — but only if it's still meaningfully // running (>0.5s left). A stale/expired one is discarded silently (no sound // on a cold reload minutes later). React.useEffect(() => { if (!persist) return; let saved = null; try { saved = JSON.parse(localStorage.getItem(REST_KEY) || 'null'); } catch (_) {} if (saved && typeof saved.endAt === 'number' && (saved.endAt - Date.now()) > 500) { setTimer(saved); } else if (saved) { try { localStorage.removeItem(REST_KEY); } catch (_) {} } }, [persist]); // Repaint interval + visibilitychange recompute. Re-armed whenever the active // rest changes (keyed on timer?.key). React.useEffect(() => { if (!timer) return; const id = setInterval(evaluate, 500); const onVis = () => { if (document.visibilityState === 'visible') evaluate(); }; document.addEventListener('visibilitychange', onVis); window.addEventListener('focus', onVis); evaluate(); // sync immediately on (re)arm return () => { clearInterval(id); document.removeEventListener('visibilitychange', onVis); window.removeEventListener('focus', onVis); }; }, [timer?.key, evaluate]); // eslint-disable-line react-hooks/exhaustive-deps const persistTimer = React.useCallback((t) => { if (!persist) return; try { if (t) localStorage.setItem(REST_KEY, JSON.stringify(t)); else localStorage.removeItem(REST_KEY); } catch (_) {} }, [persist]); const start = React.useCallback((secs) => { const s = Math.max(1, Math.round(secs || 0)); const t = { endAt: Date.now() + s * 1000, total: s, key: Date.now() }; warnedRef.current = null; setTimer(t); persistTimer(t); }, [persistTimer]); const adjust = React.useCallback((delta) => { setTimer(prev => { if (!prev) return prev; const rem = Math.max(0, Math.ceil((prev.endAt - Date.now()) / 1000)); const nextRem = Math.max(1, rem + delta); const t = { endAt: Date.now() + nextRem * 1000, total: Math.max(prev.total, nextRem), key: prev.key }; // Re-open the warning window if we bumped back above 10s if (nextRem > 10) warnedRef.current = null; persistTimer(t); return t; }); }, [persistTimer]); const skip = React.useCallback(() => { clearActive(); }, [clearActive]); const restTimer = timer ? { rem: remOf(timer), total: timer.total, key: timer.key } : null; return { restTimer, start, adjust, skip }; } // Anchored dropdown menu rendered in a portal on with position:fixed, so // it's never clipped by an ancestor's overflow (e.g. a card's overflow:hidden or // the global overflow-x:clip) and always sits above the tab bar. Positioned from // the trigger's getBoundingClientRect; flips upward near the bottom of the screen. function AtlasMenu({ open, anchorRef, onClose, width = 184, children }) { const [, force] = React.useState(0); React.useEffect(() => { if (!open) return; const rerender = () => force(n => n + 1); const close = () => onClose && onClose(); window.addEventListener('resize', rerender); // Close on scroll so the fixed menu can't detach from its trigger window.addEventListener('scroll', close, true); return () => { window.removeEventListener('resize', rerender); window.removeEventListener('scroll', close, true); }; }, [open, onClose]); if (!open || !anchorRef?.current || typeof ReactDOM === 'undefined' || !ReactDOM.createPortal) return null; const r = anchorRef.current.getBoundingClientRect(); const vw = window.innerWidth, vh = window.innerHeight; const left = Math.max(8, Math.min(r.right - width, vw - width - 8)); const openUp = (vh - r.bottom) < 200; const pos = openUp ? { bottom: Math.round(vh - r.top + 6) } : { top: Math.round(r.bottom + 6) }; return ReactDOM.createPortal( React.createElement(React.Fragment, null, React.createElement('div', { onClick: onClose, style: { position: 'fixed', inset: 0, zIndex: 3000 } }), React.createElement('div', { style: { position: 'fixed', left: Math.round(left), ...pos, width, zIndex: 3001, background: '#0E1A2C', border: '1px solid rgba(255,255,255,0.10)', borderRadius: 12, boxShadow: '0 16px 44px rgba(0,0,0,0.55)', overflow: 'hidden', animation: 'fadeIn .12s ease', }, }, children) ), document.body ); } // Minimal stroke icons for the mobile tab bar function NavIcon({ name, color }) { const p = { width: 22, height: 22, viewBox: '0 0 24 24', fill: 'none', stroke: color, strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round' }; if (name === 'home') return ; if (name === 'coach') return ; if (name === 'builder') return ; if (name === 'play') return ; if (name === 'rutinas') return ; if (name === 'aula') return ; if (name === 'user') return ; return null; } // Fixed bottom tab bar for mobile — native-app style navigation function AppMobileTabBar() { const { route, navigate } = useRoute(); const tabs = [ { path: '/', label: 'Inicio', icon: 'home' }, { path: '/coach', label: 'Coach', icon: 'coach' }, { path: '/builder', label: 'Builder', icon: 'builder' }, { path: '/rutinas', label: 'Rutinas', icon: 'rutinas' }, { path: '/aula', label: 'Aula', icon: 'aula' }, ]; const ACTIVE = '#3B82F6'; const IDLE = 'rgba(250,250,247,0.5)'; return ( ); } // Slim mobile top header — logo + gems + profile avatar (Perfil lives here now // that the bottom tab bar is Inicio·Coach·Builder·Rutinas·Aula) function AppMobileHeader() { const { route, navigate } = useRoute(); const { state } = useStore(); const perfilActive = route === '/perfil'; return ( ); } function AppNav() { const { route, navigate } = useRoute(); const { state } = useStore(); const isMobile = useIsMobile(); const items = [ { path: '/', label: 'Inicio' }, { path: '/aula', label: 'Aula' }, { path: '/builder', label: 'Builder' }, { path: '/rutinas', label: 'Mis rutinas' }, { path: '/coach', label: 'Atlas Coach' }, { path: '/progreso', label: 'Progreso' }, { path: '/perfil', label: 'Perfil' }, ]; // Mobile: slim top header + fixed bottom tab bar (native-app navigation) if (isMobile) { return ( <> ); } return ( ); } // ─── Gem tray ──────────────────────────────────────── function GemTray() { const { state } = useStore(); const { navigate } = useRoute(); const [pulse, setPulse] = React.useState(false); const lastBalance = React.useRef(state.gems.balance); React.useEffect(() => { if (state.gems.balance > lastBalance.current) { setPulse(true); const t = setTimeout(() => setPulse(false), 800); lastBalance.current = state.gems.balance; return () => clearTimeout(t); } lastBalance.current = state.gems.balance; }, [state.gems.balance]); const balanceTxt = state.gems.balance.toLocaleString('es-ES'); // The gem counter is a shortcut into the store's redeemable items. return ( ); } function Gem({ size = 16 }) { return ( ); } // ─── Page transition wrapper ──────────────────────── function PageTransition({ routeKey, children }) { const [displayed, setDisplayed] = React.useState({ key: routeKey, content: children }); const [phase, setPhase] = React.useState('in'); React.useEffect(() => { if (routeKey !== displayed.key) { setPhase('out'); const t = setTimeout(() => { setDisplayed({ key: routeKey, content: children }); setPhase('in'); }, 180); return () => clearTimeout(t); } else { setDisplayed({ key: routeKey, content: children }); } }, [routeKey, children]); return (
{displayed.content}
); } // ── Shared navigation helpers ───────────────────────────────────────────────── function atlasReducedMotion() { try { return !!(window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches); } catch { return false; } } function atlasScrollToTop() { try { window.scrollTo({ top: 0, behavior: atlasReducedMotion() ? 'auto' : 'smooth' }); } catch { window.scrollTo(0, 0); } } // Tapping the active nav tab: scroll up if the page is scrolled; once at the top, // ask the current section to return to its root (e.g. close an open Aula article). function atlasHandleTabTap(route, path, navigate) { if (route !== path) { navigate(path); return; } if ((window.scrollY || window.pageYOffset || 0) > 4) { atlasScrollToTop(); return; } try { window.dispatchEvent(new CustomEvent('atlas:navreset', { detail: { route: path } })); } catch {} } // Horizontal swipe between internal tabs (no library). Returns touch handlers to // spread on the content container. Honors: >60px horizontal and clearly more // horizontal than vertical; ignores the iOS edge-back zone (<24px from a side), // inputs/sliders, [data-swipe-ignore], and any ancestor that scrolls horizontally // (carousels, the category strip, the muscle map, etc.). function useSwipeNav({ index, count, onChange }) { const start = React.useRef(null); function hasHScrollAncestor(el, root) { let n = el; while (n && n !== root && n !== document.body) { try { const s = window.getComputedStyle(n); if ((s.overflowX === 'auto' || s.overflowX === 'scroll') && n.scrollWidth > n.clientWidth + 2) return true; } catch {} n = n.parentElement; } return false; } const onTouchStart = (e) => { if (!e.touches || e.touches.length !== 1) { start.current = null; return; } const t = e.touches[0]; const W = window.innerWidth || document.documentElement.clientWidth; if (t.clientX < 24 || t.clientX > W - 24) { start.current = null; return; } // iOS back-gesture zone const tgt = e.target; if (tgt && tgt.closest && tgt.closest('input,textarea,select,[role="slider"],[data-swipe-ignore]')) { start.current = null; return; } if (hasHScrollAncestor(tgt, e.currentTarget)) { start.current = null; return; } start.current = { x: t.clientX, y: t.clientY }; }; const onTouchEnd = (e) => { const s = start.current; start.current = null; if (!s || !e.changedTouches || !e.changedTouches.length) return; const c = e.changedTouches[0]; const dx = c.clientX - s.x, dy = c.clientY - s.y; if (Math.abs(dx) < 60) return; // not far enough if (Math.abs(dx) <= Math.abs(dy) * 1.3) return; // not clearly horizontal const dir = dx < 0 ? 1 : -1; // swipe left → next tab const next = index + dir; if (next < 0 || next >= count) return; onChange(next, dir); }; return { onTouchStart, onTouchEnd }; } // Floating "back to top" button. Fades in past ~600px; hidden in the player and // the Coach chat (there the scroll goes downward). Sits above the mobile tab bar. function ScrollTopButton() { const { route } = useRoute(); const isMobile = useIsMobile(); const [visible, setVisible] = React.useState(false); const hidden = route === '/player' || route === '/coach'; React.useEffect(() => { if (hidden) { setVisible(false); return; } let ticking = false; const onScroll = () => { if (ticking) return; ticking = true; window.requestAnimationFrame(() => { setVisible((window.scrollY || window.pageYOffset || 0) > 600); ticking = false; }); }; onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, [hidden]); if (hidden) return null; return ( ); } Object.assign(window, { AppNav, PageTransition, Gem, GemTray, AtlasMenu, useIsMobile, useRestTimer, ScrollTopButton, useSwipeNav, atlasReducedMotion, atlasScrollToTop });