\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;","label","children",[70],"contentHash","5aacad8495673095dc944699e52a02d8e4785d24c003e594f484633ed8cf84c1","README.md",{"_32":93,"_13":91,"_75":94,"_77":-5,"_78":55,"_79":20,"_80":26,"_34":95,"_40":57,"_82":96,"_84":97,"_63":47,"_86":-5,"_87":-7,"_69":98,"_89":99},"0ed20a58-2785-11f0-b46e-569c3dd06744","0ed20ad0-2785-11f0-b46e-569c3dd06744",["D",1728657323214],"file","# 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",[91],"af4a93e45964b02a4f59f636167bd76682601fdecd154d38d573c67058853769",["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,"_137":133},"org",{"_11":12,"_131":-5,"_132":133,"_105":106,"_134":135,"_136":47},"branch","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJObXhWblpaQkdIdW1qbHZZT3JmeldaODFYdSIsImluaXRpYWxzIjoiQ0QifQ","tier","free","canRestrictVals","profileImageUrl","","adoptOrgId",{"_32":56,"_13":14,"_34":187,"_45":-5,"_101":47,"_48":49,"_102":49,"_103":-5,"_104":-5,"_105":106,"_107":76,"_108":26,"_109":-5,"_110":-5,"_111":57,"_52":112,"_113":-5,"_114":-5,"_115":-5,"_116":-5,"_117":118,"_119":118,"_120":121,"_122":121,"_123":121,"_124":118,"_125":118,"_126":188,"_128":189,"_130":190,"_46":47},"tree",[181,182],"files",[181,182],"counts",{"_171":57,"_172":20,"_173":57,"_174":175,"_176":177},"contents",[165,166],"upstreamProject",{"_32":39,"_13":14,"_103":-5,"_104":-5,"_48":49,"_126":163},"upstreamBranch",{"_32":33,"_34":161,"_36":162,"_13":16,"_38":39,"_40":22,"_41":-5,"_42":-5,"_43":44,"_45":-5,"_46":47,"_48":49,"_50":51,"_52":53,"_54":14},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1746211357241],["D",1771236571302],{"_11":51,"_137":164},"https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yaG5kR0hRRTM0S1BSeXlIR2hCdjFqb1dTS3AifQ",{"_32":93,"_13":91,"_75":94,"_77":-5,"_78":55,"_79":20,"_80":26,"_34":169,"_40":57,"_82":96,"_84":97,"_63":47,"_86":-5,"_69":170},{"_32":74,"_13":70,"_75":76,"_77":-5,"_78":55,"_79":20,"_80":26,"_34":167,"_40":57,"_82":83,"_84":85,"_63":47,"_86":-5,"_69":168},["D",1728657323214],[70],["D",1728657323214],[91],"pulls","branches","forks","envVars",{"_178":57,"_180":57},"connections",{"_178":57,"_179":57},"count","unfilledCount","emptyCount",{"_32":93,"_13":91,"_75":94,"_77":-5,"_78":55,"_79":20,"_80":26,"_34":95,"_40":57,"_82":96,"_84":97,"_63":47,"_86":-5,"_87":185,"_69":186},{"_32":74,"_13":70,"_75":76,"_77":-5,"_78":55,"_79":20,"_80":26,"_34":81,"_40":57,"_82":83,"_84":85,"_63":47,"_86":-5,"_87":183,"_69":184},[],[70],[],[91],["D",1746211288095],{"_11":12,"_137":133},{"_11":12,"_131":-5,"_132":133,"_105":106,"_134":135,"_136":47},{"_40":20,"_13":16,"_32":55,"_38":56,"_41":33,"_42":57,"_58":49,"_59":39,"_60":53,"_54":14,"_50":12},"ctx",{"_126":-5,"_158":224,"_225":226,"_227":228,"_229":47,"_230":47,"_231":47,"_232":26,"_233":-5,"_234":-7,"_235":-7,"_236":57,"_237":47,"_238":47,"_239":-5,"_240":47,"_241":47,"_242":47,"_243":-5},"ENV",{"_195":196,"_197":198,"_199":16,"_200":201,"_202":203,"_204":205,"_206":207,"_208":209,"_210":211,"_212":213,"_214":215,"_216":217,"_218":219,"_220":221,"_222":223},"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"]

Compare

Mergecpdis/mainintoashryanio/main

README.md+25-0

Hmain.tsx+402-0