C25K

\n \n\n\n",[],[154,187],"7c3ecc56-42fb-11f1-bd72-42b51c65c3df","App.tsx","1bc2a470-42f5-11f1-b3b6-42b51c65c3df",12,["D",1777378331329],5,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { useState, useEffect, useRef, useCallback } from \"https://esm.sh/react@18.2.0\";\n\n// ── Types ─────────────────────────────────────────────────────────────────────\ntype SegType = \"warmup\" | \"run\" | \"walk\" | \"cooldown\";\ntype Seg = { type: SegType; secs: number };\ntype SessionPlan = { segments: Seg[] };\ntype LoggedSession = {\n id: number; week: number; session: number;\n completed_at: string; effort: number | null; notes: string | null;\n};\ntype View = \"home\" | \"timer\" | \"log\";\n\n// ── Palette ───────────────────────────────────────────────────────────────────\nconst P = {\n bg: \"#1f2233\", // deep navy — noticeably lighter than before\n surface: \"#272b3e\",\n surfaceHi: \"#2f3450\",\n border: \"#383d54\",\n borderHi: \"#464d68\",\n text: \"#ffffff\",\n textSub: \"#a0a8c0\",\n textMut: \"#6b7490\",\n run: \"#ff6535\",\n walk: \"#00c8e0\",\n neutral: \"#7a84a0\",\n done: \"#34d399\",\n doneBg: \"#0f2820\",\n doneBdr: \"#1e4a38\",\n cta: \"#ff6535\",\n ctaText: \"#ffffff\",\n};\n\n// ── Plan data ─────────────────────────────────────────────────────────────────\nconst R = (s: number): Seg => ({ type: \"run\", secs: s });\nconst W = (s: number): Seg => ({ type: \"walk\", secs: s });\nconst WU: Seg = { type: \"warmup\", secs: 300 };\nconst CD: Seg = { type: \"cooldown\", secs: 300 };\nconst rep = (segs: Seg[], n: number): Seg[] => Array.from({ length: n }, () => segs).flat();\nconst mk = (segs: Seg[]): SessionPlan => ({ segments: [WU, ...segs, CD] });\nconst x3 = (s: SessionPlan): SessionPlan[] => [s, s, s];\n\nconst PLAN: SessionPlan[][] = [\n x3(mk(rep([R(60), W(90)], 8))),\n x3(mk(rep([R(90), W(120)], 6))),\n x3(mk(rep([R(90), W(90), R(180), W(180)], 2))),\n x3(mk([R(180), W(90), R(300), W(150), R(180), W(90), R(300)])),\n [\n mk([R(300), W(180), R(300), W(180), R(300)]),\n mk([R(480), W(300), R(480)]),\n mk([R(1200)]),\n ],\n [\n mk([R(300), W(180), R(480), W(180), R(300)]),\n mk([R(600), W(180), R(600)]),\n mk([R(1500)]),\n ],\n x3(mk([R(1500)])),\n x3(mk([R(1800)])),\n];\n\n// ── Helpers ───────────────────────────────────────────────────────────────────\nconst fmt = (s: number) => `${Math.floor(s / 60)}:${(s % 60).toString().padStart(2, \"0\")}`;\nconst totalSecs = (p: SessionPlan) => p.segments.reduce((a, s) => a + s.secs, 0);\nconst totalRunSecs = (p: SessionPlan) => p.segments.filter(s => s.type === \"run\").reduce((a, s) => a + s.secs, 0);\n\nconst SEG_COLOR: Record = {\n run: P.run, walk: P.walk, warmup: P.neutral, cooldown: P.neutral,\n};\nconst SEG_LABEL: Record = {\n run: \"RUN\", walk: \"WALK\", warmup: \"WARM UP\", cooldown: \"COOL DOWN\",\n};\nconst EFFORT_ICONS = [\"😴\", \"😐\", \"🙂\", \"💪\", \"🔥\"];\n\n// ── Audio engine ──────────────────────────────────────────────────────────────\nfunction createAudioEngine() {\n let ctx: AudioContext | null = null;\n\n function getCtx(): AudioContext {\n if (!ctx || ctx.state === \"closed\") ctx = new AudioContext();\n if (ctx.state === \"suspended\") ctx.resume();\n return ctx;\n }\n\n function beep(freqs: number[], duration: number, type: OscillatorType = \"sine\", volume = 0.25) {\n const ac = getCtx();\n const now = ac.currentTime;\n freqs.forEach((freq, i) => {\n const osc = ac.createOscillator();\n const gain = ac.createGain();\n osc.connect(gain); gain.connect(ac.destination);\n osc.type = type; osc.frequency.value = freq;\n const t = now + i * (duration / 1000);\n const end = t + duration / 1000 - 0.02;\n gain.gain.setValueAtTime(0, t);\n gain.gain.linearRampToValueAtTime(volume, t + 0.01);\n gain.gain.setValueAtTime(volume, end - 0.05);\n gain.gain.linearRampToValueAtTime(0, end);\n osc.start(t); osc.stop(end);\n });\n }\n\n return {\n init() { getCtx(); },\n playRun() { beep([523, 659, 784], 180, \"triangle\", 0.3); },\n playWalk() { beep([523, 392], 200, \"triangle\", 0.25); },\n playNeutral() { beep([440], 200, \"sine\", 0.2); },\n playWarning() { beep([880, 880, 880], 120, \"sine\", 0.2); },\n playDone() { beep([523, 659, 784, 1047], 220, \"triangle\", 0.3); },\n };\n}\n\nconst audio = createAudioEngine();\n\nfunction triggerCue(type: SegType) {\n if (type === \"run\") audio.playRun();\n else if (type === \"walk\") audio.playWalk();\n else audio.playNeutral();\n if (\"vibrate\" in navigator)\n navigator.vibrate(type === \"run\" ? [80, 60, 80] : [120]);\n}\n\n// ── Wake Lock ─────────────────────────────────────────────────────────────────\nfunction useWakeLock(active: boolean) {\n const lockRef = useRef(null);\n\n const acquire = useCallback(async () => {\n if (!(\"wakeLock\" in navigator)) return;\n try { lockRef.current = await (navigator as any).wakeLock.request(\"screen\"); }\n catch (_) {}\n }, []);\n\n const release = useCallback(() => {\n lockRef.current?.release(); lockRef.current = null;\n }, []);\n\n useEffect(() => {\n if (active) {\n acquire();\n const onVis = () => { if (document.visibilityState === \"visible\") acquire(); };\n document.addEventListener(\"visibilitychange\", onVis);\n return () => { release(); document.removeEventListener(\"visibilitychange\", onVis); };\n } else {\n release();\n }\n }, [active]);\n}\n\n// ── App ───────────────────────────────────────────────────────────────────────\nfunction App() {\n const [view, setView] = useState(\"home\");\n const [week, setWeek] = useState(1);\n const [sessionIdx, setSessionIdx] = useState(0);\n const [logs, setLogs] = useState([]);\n\n const [segIdx, setSegIdx] = useState(0);\n const [secsLeft, setSecsLeft] = useState(0);\n const [paused, setPaused] = useState(false);\n const [muted, setMuted] = useState(false);\n const intervalRef = useRef(null);\n const mutedRef = useRef(false);\n\n const [effort, setEffort] = useState(3);\n const [notes, setNotes] = useState(\"\");\n\n useEffect(() => { mutedRef.current = muted; }, [muted]);\n useEffect(() => { fetchLogs(); }, []);\n\n async function fetchLogs() {\n const r = await fetch(\"/api/sessions\");\n setLogs(await r.json());\n }\n\n const isDone = (w: number, s: number) => logs.some(l => l.week === w && l.session === s);\n const getLog = (w: number, s: number) => logs.find(l => l.week === w && l.session === s);\n\n function startSession(w: number, si: number) {\n audio.init();\n const plan = PLAN[w - 1][si];\n setWeek(w); setSessionIdx(si);\n setSegIdx(0); setSecsLeft(plan.segments[0].secs);\n setPaused(false);\n setView(\"timer\");\n if (!mutedRef.current) triggerCue(plan.segments[0].type);\n }\n\n // advance to a specific segment index (used by skip)\n function goToSeg(plan: SessionPlan, next: number) {\n if (next >= plan.segments.length) {\n if (!mutedRef.current) audio.playDone();\n if (\"vibrate\" in navigator) navigator.vibrate([100, 80, 100, 80, 200]);\n setView(\"log\");\n } else {\n setSegIdx(next);\n setSecsLeft(plan.segments[next].secs);\n if (!mutedRef.current) triggerCue(plan.segments[next].type);\n }\n }\n\n function handleSkip() {\n const plan = PLAN[week - 1][sessionIdx];\n goToSeg(plan, segIdx + 1);\n }\n\n // Timer tick\n useEffect(() => {\n if (view !== \"timer\" || paused) {\n if (intervalRef.current) clearInterval(intervalRef.current);\n return;\n }\n intervalRef.current = window.setInterval(() => {\n setSecsLeft(p => (p <= 1 ? 0 : p - 1));\n }, 1000);\n return () => { if (intervalRef.current) clearInterval(intervalRef.current); };\n }, [view, paused, segIdx]);\n\n // 10-second warning\n useEffect(() => {\n if (view !== \"timer\" || paused || mutedRef.current) return;\n if (secsLeft === 10) audio.playWarning();\n }, [secsLeft]);\n\n // Segment advance\n useEffect(() => {\n if (view !== \"timer\" || secsLeft !== 0) return;\n goToSeg(PLAN[week - 1][sessionIdx], segIdx + 1);\n }, [secsLeft]);\n\n async function saveLog() {\n await fetch(\"/api/sessions\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ week, session: sessionIdx + 1, effort, notes }),\n });\n await fetchLogs();\n setNotes(\"\"); setEffort(3);\n setView(\"home\");\n }\n\n if (view === \"timer\") return (\n setPaused(p => !p)}\n onMute={() => setMuted(m => !m)}\n onStop={() => { setPaused(true); setView(\"home\"); }}\n onSkip={handleSkip}\n />\n );\n\n if (view === \"log\") return (\n setView(\"home\")}\n />\n );\n\n const weekLogs = logs.filter(l => l.week === week).length;\n\n return (\n

\n\n {/* Header */}\n

C25K

GTN · 8 WEEKS · 3×/WEEK

\n source\n

\n\n \n\n {/* Week grid */}\n

\n SELECT WEEK\n

\n {Array.from({ length: 8 }, (_, i) => {\n const w = i + 1;\n const done = logs.filter(l => l.week === w).length >= 3;\n const active = w === week;\n return (\n \n );\n })}\n

\n\n {/* Session cards */}\n

\n WEEK {week} · {weekLogs}/3 DONE\n

\n {PLAN[week - 1].map((plan, si) => (\n startSession(week, si)}\n />\n ))}\n

\n );\n}\n\n// ── Session Card ──────────────────────────────────────────────────────────────\nfunction SessionCard({ plan, idx, done, log, onStart }: {\n plan: SessionPlan; idx: number; done: boolean;\n log: LoggedSession | undefined; onStart: () => void;\n}) {\n return (\n

\n {done ? \"✓\" : idx + 1}\n

\n Session {idx + 1}\n

\n {fmt(totalSecs(plan))}\n {fmt(totalRunSecs(plan))} run\n

\n {plan.segments.map((s, i) => (\n

\n ))}\n

\n {log && (\n

\n {new Date(log.completed_at).toLocaleDateString(\"en-IN\", { day: \"numeric\", month: \"short\" })}\n {log.effort ? ` · ${EFFORT_ICONS[log.effort - 1]}` : \"\"}\n {log.notes ? ` · ${log.notes.slice(0, 38)}` : \"\"}\n

\n )}\n

\n \n

\n );\n}\n\n// ── Progress Bar ──────────────────────────────────────────────────────────────\nfunction ProgressBar({ logs }: { logs: LoggedSession[] }) {\n if (logs.length === 0) return null;\n return (\n

\n {PLAN.map((_, wi) =>\n [0, 1, 2].map(si => {\n const done = logs.some(l => l.week === wi + 1 && l.session === si + 1);\n return

;\n })\n )}\n

\n {logs.length}/24 SESSIONS · {Math.round((logs.length / 24) * 100)}% COMPLETE\n

\n );\n}\n\n// ── Timer View ────────────────────────────────────────────────────────────────\nfunction TimerView({ week, sessionIdx, segIdx, secsLeft, paused, muted, onPause, onMute, onStop, onSkip }: {\n week: number; sessionIdx: number; segIdx: number; secsLeft: number;\n paused: boolean; muted: boolean;\n onPause: () => void; onMute: () => void; onStop: () => void; onSkip: () => void;\n}) {\n useWakeLock(!paused);\n\n const plan = PLAN[week - 1][sessionIdx];\n const seg = plan.segments[segIdx];\n const nextSeg = plan.segments[segIdx + 1];\n const progress = seg ? 1 - secsLeft / seg.secs : 1;\n const elapsed = plan.segments.slice(0, segIdx).reduce((a, s) => a + s.secs, 0) + (seg ? seg.secs - secsLeft : 0);\n const overallPct = elapsed / totalSecs(plan);\n const C = SEG_COLOR[seg?.type ?? \"run\"];\n const R_C = 84;\n const circ = 2 * Math.PI * R_C;\n const warning = secsLeft <= 10 && secsLeft > 0 && !paused;\n const skippable = seg?.type === \"warmup\" || seg?.type === \"cooldown\";\n\n return (\n

\n {/* Top bar */}\n

\n \n

\n W{week} · S{sessionIdx + 1} | {segIdx + 1}/{plan.segments.length}\n

\n \n

\n\n {/* Overall progress */}\n

\n\n

\n\n {/* Segment label */}\n

\n {SEG_LABEL[seg?.type ?? \"run\"]}\n

\n\n {/* Ring */}\n

\n \n

\n {fmt(secsLeft)}\n

\n {paused &&

PAUSED

}\n

\n\n {/* Segment dots */}\n

\n {plan.segments.map((s, i) => (\n

\n ))}\n

\n\n {/* Next segment */}\n {nextSeg ? (\n

\n NEXT\n

\n \n {SEG_LABEL[nextSeg.type]}\n \n {fmt(nextSeg.secs)}\n

\n ) :

}\n\n {/* Skip (warmup / cooldown only) */}\n {skippable && (\n \n )}\n\n {/* Pause */}\n \n

\n );\n}\n\n// ── Log View ──────────────────────────────────────────────────────────────────\nfunction LogView({ week, sessionIdx, effort, notes, onEffort, onNotes, onSave, onSkip }: {\n week: number; sessionIdx: number; effort: number; notes: string;\n onEffort: (n: number) => void; onNotes: (s: string) => void;\n onSave: () => void; onSkip: () => void;\n}) {\n return (\n

DONE!

\n WEEK {week} · SESSION {sessionIdx + 1}\n

\n HOW DID IT FEEL?\n

\n {EFFORT_ICONS.map((icon, i) => (\n \n ))}\n

\n NOTES\n

onNotes(e.target.value)}\n          placeholder=\"How did the run feel? Any pain? Weather?\"\n          rows={3}\n          style={{\n            width: \"100%\", background: P.surface, border: `1px solid ${P.border}`,\n            borderRadius: 8, padding: \"12px 14px\", color: P.text,\n            fontSize: 14, resize: \"vertical\", outline: \"none\", lineHeight: 1.6,\n          }}\n        />\n      </div>\n      <div style={{ display: \"flex\", gap: 10 }}>\n        <button onClick={onSkip} style={{\n          padding: \"15px 18px\", borderRadius: 10, cursor: \"pointer\",\n          border: `1px solid ${P.border}`, background: \"transparent\",\n          color: P.textMut, fontSize: 12, letterSpacing: \"0.08em\",\n        }}>SKIP</button>\n        <button onClick={onSave} style={{\n          flex: 1, padding: \"15px\", borderRadius: 10, cursor: \"pointer\",\n          border: \"none\", background: P.cta, color: P.ctaText,\n          fontSize: 18, fontWeight: 700, letterSpacing: \"0.06em\",\n        }}>SAVE RUN</button>\n      </div>\n    </div>\n  );\n}\n\n// ── Label ─────────────────────────────────────────────────────────────────────\nfunction Label({ children }: { children: React.ReactNode }) {\n  return (\n    <div className=\"tf\" style={{ fontSize: 10, color: P.textMut, letterSpacing: \"0.12em\", marginBottom: 12 }}>\n      {children}\n    </div>\n  );\n}\n\n// ── Mount ─────────────────────────────────────────────────────────────────────\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render(<App />);\n",[],[154,195],["D",1777375507659],[170,171],[154],["D",1777375487900],["D",1789494036282],{"_105":104,"_113":109},{"_105":104,"_106":107,"_108":109,"_18":60,"_110":111,"_112":25},{"_13":94,"_32":95,"_48":42,"_96":49,"_97":-5,"_98":-5,"_99":-5,"_100":-5,"_101":-5,"_102":50,"_103":104},"ctx",{"_87":-5,"_133":244,"_245":246,"_247":248,"_249":25,"_250":25,"_251":25,"_252":64,"_253":-5,"_254":-7,"_255":-7,"_256":68,"_257":25,"_258":25,"_259":-5,"_260":25,"_261":25,"_262":25,"_263":-5},"ENV",{"_215":216,"_217":218,"_219":95,"_220":221,"_222":223,"_224":225,"_226":227,"_228":229,"_230":231,"_232":233,"_234":235,"_236":237,"_238":239,"_240":241,"_242":243},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]
</article></body></html>

Diff · v13