/** @jsxImportSource https://esm.sh/react */ import confetti from "https://esm.sh/canvas-confetti@1.6.0"; import React, { useEffect, 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 }) => { const [timeLeft, setTimeLeft] = useState(duration); const [isRunning, setIsRunning] = useState(false); useEffect(() => { let timer; if (isRunning && timeLeft > 0) { timer = setInterval(() => { setTimeLeft((prevTime) => { if (prevTime <= 1) { clearInterval(timer); setIsRunning(false); onComplete(); return 0; } return prevTime - 1; }); }, 1000); } return () => clearInterval(timer); }, [isRunning, timeLeft, onComplete]); const toggleTimer = () => setIsRunning(!isRunning); const resetTimer = () => { setIsRunning(false); setTimeLeft(duration); }; const minutes = Math.floor(timeLeft / 60); const seconds = timeLeft % 60; return (

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

); }; function App() { const [completedTasks, setCompletedTasks] = useState([]); const [timerStates, setTimerStates] = useState(routineTasks.map(task => ({ isComplete: false, timeLeft: task.timed ? task.duration : 0, }))); 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) { return; // Can't complete a timed task until the timer is done } if (task.requiresParent) { setCurrentTaskIndex(index); setShowPasswordPrompt(true); return; } setCompletedTasks(prev => prev.includes(index) ? prev.filter(taskIndex => taskIndex !== index) : [...prev, index] ); }; const handlePasswordSubmit = (e) => { e.preventDefault(); if (simpleHash(parentPassword) === PARENT_PASSWORD_HASH) { setCompletedTasks(prev => prev.includes(currentTaskIndex) ? prev.filter(taskIndex => taskIndex !== currentTaskIndex) : [...prev, currentTaskIndex] ); setShowPasswordPrompt(false); setParentPassword(""); setPasswordError(false); } else { setPasswordError(true); } }; const onTimerComplete = (index) => { setTimerStates(prev => { const newStates = [...prev]; newStates[index].isComplete = true; return newStates; }); }; const resetTasks = () => { setCompletedTasks([]); setTimerStates(routineTasks.map(task => ({ isComplete: false, timeLeft: task.timed ? task.duration : 0, }))); }; return (

Kaya's After School Routine

toggleTask(index)} > {completedTasks.includes(index) ? ✅ : task.requiresParent ? 🔒 : ( ⚪ )} {task.name}
{task.timed && ( onTimerComplete(index)} /> )}

{showPasswordPrompt && (

Parent Check Required

{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