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

\n );\n};\n\nconst NumberPad = ({ onNumberClick, onSubmit, onClear }) => {\n return (\n

\n {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((num) => (\n onNumberClick(num)}\n className=\"bg-gray-200 hover:bg-gray-300 rounded p-2 text-xl\"\n >\n {num}\n \n ))}\n \n \n \n

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

Kaya's After School Routine

\n toggleTask(index)}\n >\n {completedTasks.includes(index)\n ? ✅\n : (task.requiresParent || (task.timed && !timerStates[index].isComplete))\n ? 🔒\n : (\n \n ⚪\n \n )}\n \n {task.name}\n \n

\n {task.timed && (\n onTimerComplete(index)}\n isRunning={timerStates[index].isRunning}\n toggleTimer={() => toggleTimer(index)}\n />\n )}\n \n ))}\n \n \n Reset All Tasks\n \n\n {showPasswordPrompt && (\n \n

e.stopPropagation()}>\n \n ✕\n \n

Parent Check Required

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

\n \n {passwordError && (\n

\n Incorrect password. Please try again.\n

\n )}\n

\n \n )}\n \n View Source\n \n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nasync function server(request: Request): Promise {\n return new Response(\n `\n \n \n Kaya's After School Routine\n \n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}\n\nconst css = `\n body {\n font-family: system-ui, sans-serif;\n background-color: #f0f0f0;\n }\n`;\n\nexport default server;","deleted","label",[60],"0ed20a58-2785-11f0-b46e-569c3dd06744","README.md","0ed20ad0-2785-11f0-b46e-569c3dd06744",["D",1728657323214],"# Routine Tracker\n\nThis is a little React component to make our 7yo's after school routine self-serve so she can be a bit more independent after school.\n\nTo change the items in the list, modify the `routineTasks` array of objects:\n\n```javascript\n[\n {name: \"item\", timed: false},\n {name: \"item 2\", timed: true, duration: 2 * 60 }\n {name: \"item 3\", timed: false, requiresParent: true}\n]\n```\n\nYou can set the parent password on this line:\n\n```javascript\nconst PARENT_PASSWORD_HASH = simpleHash(\"1234\");\n```\n\n# Todos\n\n- Make the parent password modal touch friendly\n- Track dates/times of list completions\n- Show a tracker of how many completions this week",[79],{"_35":78,"_13":79,"_61":80,"_63":-5,"_64":65,"_66":31,"_67":68,"_37":90,"_17":70,"_71":24,"_73":82,"_75":49,"_76":-5,"_87":91,"_18":92},{"_35":59,"_13":60,"_61":62,"_63":-5,"_64":65,"_66":31,"_67":68,"_37":86,"_17":70,"_71":72,"_73":74,"_75":49,"_76":-5,"_87":88,"_18":89},["D",1728657323214],"children",[],[60],["D",1728657323214],[],[79],"0ecd9ee6-2785-11f0-b46e-569c3dd06744",["D",1746211288095],"legacyEnvVars","httpPrivacy","description","imageUrl","userId","97150980-d5d8-4e55-96c8-3601f0b1db3b","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","4d64cd1c-7315-427c-a1ac-6ceb702865da","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_135":131},"org",{"_11":12,"_129":-5,"_130":131,"_99":100,"_132":133,"_134":49},"branch",{"_17":31,"_13":16,"_35":65,"_41":93,"_43":36,"_44":70,"_126":51,"_127":42,"_128":55,"_56":14,"_52":12},"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJObXhWblpaQkdIdW1qbHZZT3JmeldaODFYdSIsImluaXRpYWxzIjoiQ0QifQ","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_35":93,"_13":14,"_37":179,"_47":-5,"_95":49,"_50":51,"_96":51,"_97":-5,"_98":-5,"_99":100,"_101":62,"_102":68,"_103":-5,"_104":-5,"_105":70,"_54":106,"_107":-5,"_108":-5,"_109":-5,"_110":-5,"_111":112,"_113":112,"_114":115,"_116":115,"_117":115,"_118":112,"_119":112,"_120":180,"_122":181,"_124":182,"_48":49},[173,174],"files",[173,174],"counts",{"_164":70,"_165":31,"_166":70,"_34":167,"_168":169},[160,161],"upstreamProject",{"_35":42,"_13":14,"_97":-5,"_98":-5,"_50":51,"_120":158},"upstreamBranch",{"_35":36,"_37":156,"_39":157,"_13":16,"_41":42,"_17":33,"_43":-5,"_44":-5,"_45":46,"_47":-5,"_48":49,"_50":51,"_52":53,"_54":55,"_56":14},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1746211357241],["D",1771236571302],{"_11":53,"_135":159},"https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yaG5kR0hRRTM0S1BSeXlIR2hCdjFqb1dTS3AifQ",{"_35":78,"_13":79,"_61":80,"_63":-5,"_64":65,"_66":31,"_67":68,"_37":81,"_17":70,"_71":24,"_73":82,"_75":49,"_76":-5,"_18":163},{"_35":59,"_13":60,"_61":62,"_63":-5,"_64":65,"_66":31,"_67":68,"_37":69,"_17":70,"_71":72,"_73":74,"_75":49,"_76":-5,"_18":162},[60],[79],"pulls","branches","forks",{"_170":70,"_172":70},"connections",{"_170":70,"_171":70},"count","unfilledCount","emptyCount",{"_35":78,"_13":79,"_61":80,"_63":-5,"_64":65,"_66":31,"_67":68,"_37":90,"_17":70,"_71":24,"_73":82,"_75":49,"_76":-5,"_87":177,"_18":178},{"_35":59,"_13":60,"_61":62,"_63":-5,"_64":65,"_66":31,"_67":68,"_37":86,"_17":70,"_71":72,"_73":74,"_75":49,"_76":-5,"_87":175,"_18":176},[],[60],[],[79],["D",1746211288095],{"_11":12,"_135":131},{"_11":12,"_129":-5,"_130":131,"_99":100,"_132":133,"_134":49},{"_17":31,"_13":16,"_35":65,"_41":93,"_43":36,"_44":70,"_126":51,"_127":42,"_128":55,"_56":14,"_52":12},"ctx",{"_120":-5,"_153":216,"_217":218,"_219":220,"_221":49,"_222":49,"_223":49,"_224":68,"_225":-5,"_226":-7,"_227":-7,"_228":70,"_229":49,"_230":49,"_231":-5,"_232":49,"_233":49,"_234":49,"_235":-5},"ENV",{"_187":188,"_189":190,"_191":16,"_192":193,"_194":195,"_196":197,"_198":199,"_200":201,"_202":203,"_204":205,"_206":207,"_208":209,"_210":211,"_212":213,"_214":215},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Code