/** @jsxImportSource https://esm.sh/react */ import confetti from "https://esm.sh/canvas-confetti@1.6.0"; import React, { useEffect, useRef, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; const routineTasks = [ { name: "Feed fish", timed: false }, { name: "Unpack bags", timed: false }, { name: "Do homework", timed: false }, { name: "Get mom or dad to check homework", timed: false, requiresParent: true }, { name: "Return homework folder to backpack", timed: false }, { name: "Clean table of homework items", timed: false }, { name: "Move your stuff from living room to bedroom", timed: false }, { name: "Clean room", timed: true, duration: 10 * 60 }, { name: "Take a shower", timed: false }, { name: "Clean up shower", timed: false }, { name: "Eat dinner", timed: false }, { name: "Brush teeth", timed: true, duration: 2 * 60 }, { name: "Get clothes ready for tomorrow", timed: false }, { name: "Get mom or dad to check my list", timed: false, requiresParent: true }, ]; // Simple hash function for the password const simpleHash = (str) => { let hash = 0; for (let i = 0; i < str.length; i++) { const char = str.charCodeAt(i); hash = ((hash << 5) - hash) + char; hash = hash & hash; // Convert to 32-bit integer } return hash; }; // You would set this to a hashed version of your actual password const PARENT_PASSWORD_HASH = simpleHash("1234"); // Example password const TimerComponent = ({ duration, onComplete, isRunning, toggleTimer }) => { const [timeLeft, setTimeLeft] = useState(duration); const startTimeRef = useRef(null); const animationFrameRef = useRef(null); const updateTimer = (timestamp) => { if (isRunning) { const elapsedTime = (timestamp - startTimeRef.current) / 1000; const newTimeLeft = Math.max(duration - elapsedTime, 0); setTimeLeft(newTimeLeft); if (newTimeLeft <= 0) { onComplete(); } else { animationFrameRef.current = requestAnimationFrame(updateTimer); } } }; useEffect(() => { if (isRunning) { if (startTimeRef.current === null) { startTimeRef.current = performance.now(); } animationFrameRef.current = requestAnimationFrame(updateTimer); } else { cancelAnimationFrame(animationFrameRef.current); } return () => { cancelAnimationFrame(animationFrameRef.current); }; }, [isRunning, duration, onComplete]); useEffect(() => { const handleVisibilityChange = () => { if (document.hidden) { cancelAnimationFrame(animationFrameRef.current); } else if (isRunning) { // Adjust the start time based on how long the page was hidden const now = performance.now(); const elapsedHiddenTime = now - (startTimeRef.current + (duration - timeLeft) * 1000); startTimeRef.current = now - (duration - timeLeft) * 1000 - elapsedHiddenTime; animationFrameRef.current = requestAnimationFrame(updateTimer); } }; document.addEventListener("visibilitychange", handleVisibilityChange); return () => document.removeEventListener("visibilitychange", handleVisibilityChange); }, [isRunning, duration, timeLeft]); useEffect(() => { setTimeLeft(duration); startTimeRef.current = null; }, [duration]); const minutes = Math.floor(timeLeft / 60); const seconds = Math.floor(timeLeft % 60); return (

{`${minutes}:${seconds.toString().padStart(2, "0")}`}

); }; const NumberPad = ({ onNumberClick, onSubmit, onClear }) => { return (

{[1, 2, 3, 4, 5, 6, 7, 8, 9].map((num) => ( ))}

); }; function App() { const [completedTasks, setCompletedTasks] = useState([]); const [timerStates, setTimerStates] = useState(routineTasks.map(task => ({ isRunning: false, isComplete: false, }))); const [parentPassword, setParentPassword] = useState(""); const [showPasswordPrompt, setShowPasswordPrompt] = useState(false); const [currentTaskIndex, setCurrentTaskIndex] = useState(null); const [passwordError, setPasswordError] = useState(false); const shootConfetti = () => { const count = 500; const defaults = { origin: { y: 0.7 }, shapes: ["star"], ticks: 300, }; function fire(particleRatio, opts) { confetti({ ...defaults, ...opts, particleCount: Math.floor(count * particleRatio), }); } fire(0.25, { spread: 26, startVelocity: 55, }); fire(0.2, { spread: 60, }); fire(0.35, { spread: 100, decay: 0.91, scalar: 0.8, }); fire(0.1, { spread: 120, startVelocity: 25, decay: 0.92, scalar: 1.2, }); fire(0.1, { spread: 120, startVelocity: 45, }); }; useEffect(() => { if (completedTasks.length === routineTasks.length) { shootConfetti(); } }, [completedTasks]); const toggleTask = (index) => { const task = routineTasks[index]; const timerState = timerStates[index]; if (task.timed && !timerState.isComplete) { setCurrentTaskIndex(index); setShowPasswordPrompt(true); return; } if (task.requiresParent) { setCurrentTaskIndex(index); setShowPasswordPrompt(true); return; } setCompletedTasks(prev => prev.includes(index) ? prev.filter(taskIndex => taskIndex !== index) : [...prev, index] ); }; const handleNumberClick = (number) => { setParentPassword(prev => prev + number.toString()); }; const handlePasswordSubmit = () => { if (simpleHash(parentPassword) === PARENT_PASSWORD_HASH) { const task = routineTasks[currentTaskIndex]; if (task.timed) { setTimerStates(prev => { const newStates = [...prev]; newStates[currentTaskIndex].isComplete = true; newStates[currentTaskIndex].isRunning = false; return newStates; }); } setCompletedTasks(prev => prev.includes(currentTaskIndex) ? prev.filter(taskIndex => taskIndex !== currentTaskIndex) : [...prev, currentTaskIndex] ); closePasswordPrompt(); } else { setPasswordError(true); } }; const handlePasswordClear = () => { setParentPassword(""); }; const closePasswordPrompt = () => { setShowPasswordPrompt(false); setParentPassword(""); setPasswordError(false); setCurrentTaskIndex(null); }; const onTimerComplete = (index) => { setTimerStates(prev => { const newStates = [...prev]; newStates[index].isComplete = true; newStates[index].isRunning = false; return newStates; }); }; const toggleTimer = (index) => { setTimerStates(prev => { const newStates = [...prev]; newStates[index].isRunning = !newStates[index].isRunning; return newStates; }); }; const resetTasks = () => { setCompletedTasks([]); setTimerStates(routineTasks.map(task => ({ isRunning: false, isComplete: false, }))); }; return (

Kaya's After School Routine

toggleTask(index)} > {completedTasks.includes(index) ? ✅ : (task.requiresParent || (task.timed && !timerStates[index].isComplete)) ? 🔒 : ( ⚪ )} {task.name}
{task.timed && ( onTimerComplete(index)} isRunning={timerStates[index].isRunning} toggleTimer={() => toggleTimer(index)} /> )}

{showPasswordPrompt && (

e.stopPropagation()}>

Parent Check Required

{parentPassword.replace(/./g, "•") || "\u00A0"}

{passwordError && (

Incorrect password. Please try again.

)}

)} View Source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } async function server(request: Request): Promise { return new Response( ` Kaya's After School Routine

`, { headers: { "content-type": "text/html", }, }, ); } const css = ` body { font-family: system-ui, sans-serif; background-color: #f0f0f0; } `; export default server;

routineTrackerApp