{step.label}
{currentIdx + 1} / {total}
{isAnnounce && step.mystery && (
第 {["一","二","三","四","五"][step.decade]} 端
{step.mystery.title}
{step.mystery.subtitle}
{step.mystery.scripture}
默想此端，求得 {step.mystery.fruit} 之恩
)}
{prayer && (
{prayer.title}
{prayerBody.split("\n").map((line, i) => (
{line}
))}
)}
);
}
// ---------- MYSTERY PICKER ----------
function MysteryPicker({ current, onPick, suggested }) {
const keys = ["joyful","luminous","sorrowful","glorious"];
return (
{keys.map(k => {
const m = window.MYSTERIES[k];
const isCur = current === k;
const isSug = suggested === k;
return (
);
})}
);
}
function toneForStep(step) {
if (!step) return "ave";
if (step.bead === "crucifix") return "cross";
if (step.bead === "pater" || step.kind === "of" || step.kind === "announce") return "pater";
if (step.bead === "medal") return "medal";
return "ave";
}
// ---------- MAIN APP ----------
function App() {
const [tweaks, setTweaks] = useTweaks({
beadStyle: "sandalwood",
autoAdvance: false,
autoSeconds: 12,
audioBeads: true,
audioDrone: true,
background: "candlelight",
language: "modern",
});
const suggested = useMemo(() => suggestMysteryForToday(), []);
const persisted = useMemo(() => loadState(), []);
const [mysteryKey, setMysteryKey] = useState(persisted.mysteryKey || suggested);
const [currentIdx, setCurrentIdx] = useState(persisted.currentIdx || 0);
const [completed, setCompleted] = useState(() => new Set(persisted.completed || []));
const [history, setHistory] = useState(persisted.history || []); // array of ISO dates
const [streak, setStreak] = useState(persisted.streak || 0);
const [showCompleted, setShowCompleted] = useState(false);
const [paused, setPaused] = useState(true);
const seq = useMemo(() => window.buildBeadSequence(mysteryKey), [mysteryKey]);
const mystery = window.MYSTERIES[mysteryKey];
const geom = useMemo(() => {
if (typeof document === "undefined") return null;
return window.computeRosaryGeometry(seq, { width: 1100, height: 1300, cy: 440, rx: 380, ry: 380 });
}, [seq]);
// Reset progress only when user actively switches mystery (not on initial mount,
// so persisted currentIdx survives a reload).
const isFirstMount = useRef(true);
useEffect(() => {
if (isFirstMount.current) {
isFirstMount.current = false;
return;
}
setCurrentIdx(0);
setCompleted(new Set());
}, [mysteryKey]);
// persist
useEffect(() => {
saveState({ mysteryKey, currentIdx, completed: [...completed], history, streak });
}, [mysteryKey, currentIdx, completed, history, streak]);
// Audio drone
useEffect(() => {
if (tweaks.audioDrone && !paused) startDrone();
else stopDrone();
return () => stopDrone();
}, [tweaks.audioDrone, paused]);
// Auto advance
useEffect(() => {
if (paused || !tweaks.autoAdvance) return;
if (currentIdx >= seq.length - 1) return;
const t = setTimeout(() => advance(), tweaks.autoSeconds * 1000);
return () => clearTimeout(t);
}, [paused, tweaks.autoAdvance, tweaks.autoSeconds, currentIdx, seq.length]);
const advance = useCallback(() => {
setCompleted(prev => {
const next = new Set(prev); next.add(currentIdx); return next;
});
if (currentIdx >= seq.length - 1) {
// finished
finishRosary();
return;
}
const nextIdx = currentIdx + 1;
setCurrentIdx(nextIdx);
if (tweaks.audioBeads) {
playBeadTone(toneForStep(seq[nextIdx]));
}
}, [currentIdx, seq, tweaks.audioBeads]);
const finishRosary = useCallback(() => {
setCompleted(prev => { const n = new Set(prev); n.add(seq.length - 1); return n; });
if (tweaks.audioBeads) chimeBell();
setShowCompleted(true);
// Update history + streak
const today = new Date().toISOString().slice(0,10);
setHistory(prev => {
if (prev.includes(today)) return prev;
const next = [...prev, today].sort();
// streak calc
let st = 1; const dates = next.slice().reverse();
for (let i = 1; i < dates.length; i++) {
const a = new Date(dates[i-1]); const b = new Date(dates[i]);
const diff = (a - b) / (1000*60*60*24);
if (Math.round(diff) === 1) st++; else break;
}
setStreak(st);
return next;
});
}, [seq.length, tweaks.audioBeads]);
const goBack = () => {
if (currentIdx === 0) return;
setCompleted(prev => { const n = new Set(prev); n.delete(currentIdx - 1); return n; });
setCurrentIdx(currentIdx - 1);
};
const handleBeadClick = (idx) => {
if (idx < 0 || idx >= seq.length) return;
setCurrentIdx(idx);
setPaused(false);
if (tweaks.audioBeads) {
playBeadTone(toneForStep(seq[idx]));
}
};
const handleStart = () => {
setPaused(false);
if (currentIdx === 0 && completed.size === 0) {
// first tap
if (tweaks.audioBeads) playBeadTone("cross");
}
};
const reset = () => {
setCurrentIdx(0); setCompleted(new Set()); setShowCompleted(false); setPaused(true);
};
// Keyboard
useEffect(() => {
const onKey = (e) => {
if (e.key === " " || e.key === "Enter" || e.key === "ArrowRight") { e.preventDefault(); advance(); setPaused(false); }
else if (e.key === "ArrowLeft") { e.preventDefault(); goBack(); }
else if (e.key.toLowerCase() === "p") setPaused(p => !p);
};
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, [advance, currentIdx]);
const step = seq[currentIdx];
return (