const { useState, useEffect, useRef, useMemo } = React;
// ---------- tiny hand-drawn icon set (no external icon package needed) ----------
function makeIcon(children) {
return function IconComp({ size = 18, strokeWidth = 1.8 }) {
return (
{children}
);
};
}
const Check = makeIcon(
{status === "success" &&
);
}
function RuleToggle({ rule, checked, onToggle }) {
const Icon = rule.icon;
return (
{rule.label}
{checked ?
);
}
function DietControl({ value, onChange }) {
return (
Diet
onChange(value === "done" ? "" : "done")} title="On track">
onChange(value === "failed" ? "" : "failed")} title="Failed today">
);
}
function PhotoRuleRow({ dateKey, hasPhoto, onUploaded, onRemoved }) {
const inputRef = useRef(null);
const [busy, setBusy] = useState(false);
const [err, setErr] = useState("");
async function handleFile(e) {
const file = e.target.files && e.target.files[0];
e.target.value = "";
if (!file) return;
setErr(""); setBusy(true);
try {
const dataUrl = await compressImage(file);
await apiUploadPhoto(dateKey, dataUrl);
onUploaded();
} catch (e2) {
setErr("Couldn't save that photo. Try a smaller image.");
} finally {
setBusy(false);
}
}
async function handleRemove(ev) {
ev.stopPropagation();
setBusy(true);
try { await apiDeletePhoto(dateKey); } catch (e) { /* already gone */ }
setBusy(false);
onRemoved();
}
return (
<>
!busy && inputRef.current && inputRef.current.click()}
role="button"
tabIndex={0}
onKeyDown={(e) => { if ((e.key === "Enter" || e.key === " ") && !busy) inputRef.current && inputRef.current.click(); }}
>
{busy ? "Saving photo\u2026" : "Progress photo"}
{hasPhoto && !busy && Remove }
{hasPhoto ?
{err && {err}
}
);
}
// ---------- main app ----------
function App() {
const [state, setState] = useState(null);
const [loaded, setLoaded] = useState(false);
const [loadError, setLoadError] = useState("");
const [tab, setTab] = useState("dashboard");
const [selectedKey, setSelectedKey] = useState(todayKey());
const [calMonth, setCalMonth] = useState(() => { const t = new Date(); return { y: t.getFullYear(), m: t.getMonth() }; });
const [saveNote, setSaveNote] = useState("");
const saveTimer = useRef(null);
const firstLoad = useRef(true);
useEffect(() => {
(async () => {
try {
const s = await apiLoad();
setState(s);
} catch (e) {
setLoadError("Couldn't reach the local server. Make sure `node server.js` is running, then reload this page.");
setState({ config: { startDate: todayKey(), target: 75 }, days: {} });
}
setLoaded(true);
})();
}, []);
useEffect(() => {
if (!loaded || !state) return;
if (firstLoad.current) { firstLoad.current = false; return; }
setSaveNote("Saving\u2026");
if (saveTimer.current) clearTimeout(saveTimer.current);
saveTimer.current = setTimeout(async () => {
try {
await apiSave(state);
setSaveNote("Saved");
setTimeout(() => setSaveNote(""), 1200);
} catch (e) {
setSaveNote("Couldn't save \u2014 is the server still running?");
}
}, 500);
return () => clearTimeout(saveTimer.current);
}, [state, loaded]);
const stats = useMemo(() => (state ? computeAll(state) : null), [state]);
function updateDay(key, patch) {
setState((s) => {
const existing = s.days[key] || emptyDay();
return { ...s, days: { ...s.days, [key]: { ...existing, ...patch } } };
});
}
function addLcEntry(key) {
setState((s) => {
const existing = s.days[key] || emptyDay();
return { ...s, days: { ...s.days, [key]: { ...existing, lc: [...existing.lc, emptyLcEntry()] } } };
});
}
function updateLcEntry(key, idx, patch) {
setState((s) => {
const existing = s.days[key] || emptyDay();
const lc = existing.lc.map((item, i) => (i === idx ? { ...item, ...patch } : item));
return { ...s, days: { ...s.days, [key]: { ...existing, lc } } };
});
}
function removeLcEntry(key, idx) {
setState((s) => {
const existing = s.days[key] || emptyDay();
const lc = existing.lc.filter((_, i) => i !== idx);
return { ...s, days: { ...s.days, [key]: { ...existing, lc } } };
});
}
function updateConfig(patch) {
setState((s) => ({ ...s, config: { ...s.config, ...patch } }));
}
if (!loaded || !state || !stats) {
return (
Opening the log book\u2026
);
}
return (
Discipline log \u00b7 local
75 hard, custom rules
{saveNote}
{TABS.map((t) => {
const Icon = t.icon;
return (
setTab(t.key)}>
{t.label}
);
})}
{loadError && (
)}
{tab === "dashboard" && (
{ setSelectedKey(k); setTab("today"); }} />
)}
{tab === "today" && (
{ setSelectedKey(k); setTab("today"); }}
/>
)}
{tab === "leetcode" && { setSelectedKey(k); setTab("today"); }} />}
{tab === "rules" &&
);
}
// ---------- Dashboard ----------
function Dashboard({ state, stats, onJump }) {
const { counts, n } = ruleCounts(state, stats);
const chainDays = 21;
const chain = [];
let d = addDays(parseKey(stats.todayKey), -(chainDays - 1));
for (let i = 0; i < chainDays; i++) {
const key = dkey(d);
chain.push({ key, status: key < stats.startKey ? "none" : stats.statusMap[key] || "future" });
d = addDays(d, 1);
}
const todayEntry = state.days[stats.todayKey] || emptyDay();
const todayDone = RULES.filter((r) => ruleSatisfied(todayEntry, r)).length;
return (
{stats.currentStreak}
day streak
{stats.bestStreak}
best streak
{stats.totalSuccess}
successful days
{Math.min(100, Math.round((stats.currentStreak / stats.target) * 100))}%
toward {stats.target}
Don't break the chain \u2014 last {chainDays} days
{chain.map((c) => (
c.status !== "none" && c.status !== "future" && onJump(c.key)} label={fmtShort(parseKey(c.key))} />
))}
Today, {fmtShort(new Date())}
onJump(stats.todayKey)}>Open today's entry
{todayDone} of {RULES.length} rules done
{RULES.map((r) => {
const Icon = r.icon;
const on = ruleSatisfied(todayEntry, r);
const failed = r.type === "tristate" && todayEntry[r.key] === "failed";
return (
{r.label}
);
})}
Rule consistency since day one
{RULES.map((r) => {
const pct = Math.round((counts[r.key] / n) * 100);
return (
);
})}
A failed day resets the streak above to zero, but every successful day you've logged stays counted forever. The journey doesn't reset \u2014 only the count of consecutive days does.
);
}
// ---------- Daily log ----------
function DailyLog({ state, stats, selectedKey, setSelectedKey, updateDay, addLcEntry, updateLcEntry, removeLcEntry }) {
const entry = state.days[selectedKey] || emptyDay();
const d = parseKey(selectedKey);
const isFuture = selectedKey > stats.todayKey;
const isToday = selectedKey === stats.todayKey;
const status = stats.statusMap[selectedKey] || (selectedKey < stats.startKey ? "none" : "future");
const dayNum = stats.dayNumMap[selectedKey];
const statusText = status === "success" ? "Successful day" : status === "fail" ? "Failed day \u2014 streak reset" : status === "today" ? "In progress" : status === "future" ? "Not here yet" : "Before your start date";
const statusClass = status === "success" ? "status-success" : status === "fail" ? "status-fail" : status === "today" ? "status-today" : "status-muted";
return (
setSelectedKey(dkey(addDays(d, -1)))}>
{typeof dayNum === "number" ? `Day ${dayNum}` : "Outside challenge"}
{fmtLong(d)}
setSelectedKey(dkey(addDays(d, 1)))}>
{statusText}
{!isToday && setSelectedKey(stats.todayKey)}>Jump to today }
{isFuture ? (
You can log ahead, but rules only count toward your streak once their day arrives.
) : null}
The six rules
{RULES.map((r) => {
if (r.type === "tristate") {
return
updateDay(selectedKey, { diet: v })} />;
}
if (r.key === "photo") {
return (
updateDay(selectedKey, { photoStored: true, photo: true })}
onRemoved={() => updateDay(selectedKey, { photoStored: false, photo: false })}
/>
);
}
return updateDay(selectedKey, { [r.key]: !entry[r.key] })} />;
})}