// app/home.jsx — Home: day selector, daily plan, pain check-in, reminder
// Exports to window: HomeScreen
// ── Day selector ─────────────────────────────────────────────
function DaySelector({ days, selected, onSelect }) {
const t = useT();
const style = t.daySelector || "pills";
const railRef = React.useRef(null);
React.useEffect(() => {
const el = railRef.current; if (!el) return;
const active = el.querySelector("[data-today]");
if (active) el.scrollLeft = active.offsetLeft - 120;
}, []);
const statusDot = (s) => {
if (s === "done") return ;
if (s === "rest") return ;
return ;
};
return (
{days.map((d) => {
const isSel = d.key === selected;
const isToday = d.status === "today";
if (style === "circles") {
return (
);
}
if (style === "minimal") {
return (
);
}
// pills (default)
return (
);
})}
);
}
// ── Exercise card ────────────────────────────────────────────
function ExerciseCard({ ex, done, seriesDone, onAddSeries, onOpen, tour, onMarkDone, onUndo }) {
const t = useT();
const swipe = React.useRef({ x: 0, active: false, moved: false, dx: 0 });
const [offset, setOffset] = React.useState(0);
const onPtrDown = (e) => { swipe.current = { x: e.clientX, active: true, moved: false, dx: 0 }; e.currentTarget.setPointerCapture?.(e.pointerId); };
const onPtrMove = (e) => { if (!swipe.current.active) return; const dx = e.clientX - swipe.current.x; swipe.current.dx = dx; if (Math.abs(dx) > 6) swipe.current.moved = true; setOffset(Math.max(-80, Math.min(50, dx * 0.55))); };
const onPtrUp = () => { if (!swipe.current.active) return; swipe.current.active = false; const dx = swipe.current.dx; setOffset(0); if (!swipe.current.moved) { onOpen(); return; } if (dx < -60) { onMarkDone?.(); } else if (dx > 60 && done) { onUndo?.(); } };
const d = t.density || "regular";
const pad = d === "compact" ? 12 : d === "comfy" ? 18 : 15;
const thumbW = d === "compact" ? 48 : d === "comfy" ? 64 : 56;
const minH = d === "compact" ? 108 : d === "comfy" ? 144 : 126;
const partial = seriesDone > 0 && !done;
return (
{ex.variation && (
{ex.variation}
)}
{exMetrics(ex, { seriesDone, done, includeRest: false }).map((m) => {
const tone = m.key === "sets" ? (done ? "ok" : partial ? "accent" : "plain") : "plain";
return (
{m.value}
);
})}
);
}
// ── Pain check-in helpers ────────────────────────────────────
const painHue = (v) => `oklch(${(0.62 - v * 0.027).toFixed(3)} 0.11 258)`;
const painLabel = (v) => v == null ? "Vyberte úroveň" : v <= 2 ? "Žiadna alebo mierna" : v <= 5 ? "Mierna bolesť" : v <= 7 ? "Stredná bolesť" : "Silná bolesť";
// ── V1: čísla — numeric button grid ─────────────────────────
function PainNumbers({ value, onChange }) {
return (
{Array.from({ length: 11 }).map((_, n) => {
const sel = value === n;
return (
);
})}
);
}
// ── V2: slider — gradient track ──────────────────────────────
function PainSlider({ value, onChange }) {
const thumbCol = painHue(value ?? 5);
return (
onChange(Number(e.target.value))} />
{[0,1,2,3,4,5,6,7,8,9,10].map(n => (
{n}
))}
žiadna
najsilnejšia
);
}
// ── V3: zóny — four tappable color zones ─────────────────────
const PAIN_ZONES = [
{ min: 0, max: 2, mid: 1, label: "Žiadna", sub: "0 – 2", col: "oklch(0.62 0.08 258)" },
{ min: 3, max: 5, mid: 4, label: "Mierna", sub: "3 – 5", col: "oklch(0.52 0.10 258)" },
{ min: 6, max: 7, mid: 6, label: "Stredná", sub: "6 – 7", col: "oklch(0.43 0.11 258)" },
{ min: 8, max: 10, mid: 9, label: "Silná", sub: "8 – 10", col: "oklch(0.34 0.12 258)" },
];
function PainZones({ value, onChange }) {
const activeZone = value != null ? PAIN_ZONES.find(z => value >= z.min && value <= z.max) : null;
return (
{PAIN_ZONES.map((z) => {
const sel = activeZone === z;
return (
);
})}
{activeZone && (
{Array.from({ length: 11 }).map((_, n) => {
const inZone = n >= activeZone.min && n <= activeZone.max;
const sel = n === value;
return (
);
})}
)}
);
}
// ── Pain check-in ────────────────────────────────────────────
function PainCheckIn({ value, saved, onChange, onSave, bare }) {
const t = useT();
const style = t.painStyle || "čísla";
const body = (
0 znamená žiadnu bolesť, 10 najsilnejšiu.
{style === "čísla" && }
{style === "slider" && }
{style === "zóny" && }
{painLabel(value)}
{value != null && (
saved ? (
Uložené
) : (
)
)}
);
if (bare) return body;
return (
{body}
);
}
// ── Reminder card ────────────────────────────────────────────
function ReminderCard() {
const order = ["Po", "Ut", "St", "Št", "Pi", "So", "Ne"];
return (
TRÉNINGOVÉ DNI
4 dni v týždni
{FYZIO.reminderTime}
{order.map((d) => {
const on = FYZIO.activeDays[d];
return (
{d}
);
})}
Ďalšia pripomienka dnes o {FYZIO.reminderTime}
);
}
// ── Rest day state ───────────────────────────────────────────
function RestState() {
return (
);
}
// ── Completed (past) day state ───────────────────────────────
function CompletedState({ count }) {
return (
Hotovo
Dokončili ste všetky cviky ({count} z {count}).
);
}
// ── Focus hero (alt direction) ───────────────────────────────
function FocusHero({ exs, series, onOpenEx }) {
const isDone = (e) => (series[e.id] || 0) >= e.sets;
const doneCount = exs.filter(isDone).length;
const next = exs.find((e) => !isDone(e));
const allDone = doneCount === exs.length;
const remaining = exs.filter((e) => !isDone(e)).reduce((s, e) => s + e.mins, 0);
return (
{doneCount}/{exs.length}
DNEŠNÝ TRÉNING
{allDone ? "Hotovo na dnes" : `Ostáva ~${remaining} min`}
{!allDone && (
)}
);
}
// ── Compact exercise row (alt direction) ─────────────────────
function ExerciseRow({ ex, done, seriesDone, onAddSeries, onOpen }) {
const partial = seriesDone > 0 && !done;
return (
{ex.name}
{done && }
{done ? "Odcvičené" : `${seriesDone} z ${ex.sets} sérií`} · {ex.kind === "time" ? `${ex.hold} s` : `${ex.reps}×`}
);
}
// ── Daily pain prompt (top of Home, collapsible) ───────────
function DailyPainCard({ value, onOpen }) {
const has = value != null;
return (
);
}
// ── Pain picker (used in the slide-up sheet) ─────────────────
function PainPicker({ value, onChange }) {
return (
Žiadna bolesť
najväčšia bolesť na svete
{Array.from({ length: 11 }).map((_, n) => {
const sel = value === n;
return (
);
})}
{painLabel(value)}
);
}
// ── Compact metric pill (value over label) ───────────────────
function MiniStat({ big, label, tone }) {
const c = tone === "ok" ? { bg: "var(--ok-wash)", v: "var(--ok-ink)" }
: tone === "accent" ? { bg: "var(--accent-wash)", v: "var(--accent)" }
: { bg: "var(--chip)", v: "var(--ink)" };
return (
);
}
// ── Assessment due card (CSI) ──────────────────────────
function AssessmentCard({ onOpen }) {
return (
);
}
function HomeScreen({ selectedDay, onSelectDay, series, onAddSeries, onOpenEx, onMarkDone, onUndo, onOpenPain, onOpenCelebrate, program, onOpenPrograms, pain, painSaved, onPainChange, onPainSave, assessDone, onOpenAssessment }) {
const t = useT();
const layout = t.homeLayout || "karty";
const [showDone, setShowDone] = React.useState(false);
const day = FYZIO.days.find((d) => d.key === selectedDay) || FYZIO.days.find((d) => d.status === "today");
const isExerciseDay = day.status === "today" || day.status === "exercise";
const isRest = day.status === "rest";
const isDone = day.status === "done";
const isToday = day.status === "today";
const exs = FYZIO.exercises;
const seriesOf = (e) => series[e.id] || 0;
const isExDone = (e) => seriesOf(e) >= e.sets;
const activeExs = exs.filter((e) => !isExDone(e));
const doneExs = exs.filter(isExDone);
const doneCount = doneExs.length;
const allDone = doneCount === exs.length;
const renderCard = (ex, first) => layout === "zoznam"
? onAddSeries(ex.id)} onOpen={() => onOpenEx(ex.id)} />
: onAddSeries(ex.id)} onOpen={() => onOpenEx(ex.id)}
tour={first ? "card" : undefined}
onMarkDone={() => onMarkDone?.(ex.id)} onUndo={() => onUndo?.(ex.id)} />;
return (
{/* Header */}
{isExerciseDay ? `${doneCount}/${exs.length}` : isDone ? "✓" : "–"}
{/* Day selector */}
{/* Body */}
{isToday && !assessDone &&
}
{isExerciseDay && (
{layout === "fokus" && }
Dnešný plán
{allDone ? "Všetko hotové" : `${doneCount} z ${exs.length} cvikov`}
{allDone && (
Skvelá práca! Dnešné cviky máte za sebou.
)}
{/* Active exercises */}
{activeExs.map((ex, i) => renderCard(ex, i === 0))}
{/* Completed (vybavené) — collapsible */}
{doneExs.length > 0 && (
{showDone && doneExs.map(renderCard)}
)}
)}
{isRest && (
Dnešný plán
0 cvikov
)}
{isDone &&
}