\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({ tasks }) {\n const [completedTasks, setCompletedTasks] = useState([]);\n const [timerStates, setTimerStates] = useState(tasks.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 === tasks.length) {\n shootConfetti();\n }\n }, [completedTasks]);\n\n const toggleTask = (index) => {\n const task = tasks[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 = tasks[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(tasks.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 \n Reset All Tasks\n \n window.location.reload()}\n className=\"flex-none ml-2 px-4 py-2 bg-gray-100 rounded\"\n >\n 🔁\n \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 );\n}\n\nfunction client() {\n // Detect which user from query param in the script URL\n const url = new URL(import.meta.url);\n const userParam = (url.searchParams.get(\"user\") || \"kaya\").toLowerCase();\n const tasks = routineTasks[userParam] || routineTasks.kaya;\n\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") {\n client();\n}\n\nasync function server(request: Request): Promise {\n console.log(import.meta.url);\n\n const requestUrl = new URL(request.url);\n const userParam = requestUrl.searchParams.get(\"user\") || \"kaya\";\n\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;","createdAt",["D",1736616111017],"version",84,"currentUserHasLiked","likeCount",4,"forkCount","referenceCount","dependencyCount","commentCount",3,"prCount","mergedPr",{"_131":132,"_133":134},"handle","ashryanio","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yaG5kR0hRRTM0S1BSeXlIR2hCdjFqb1dTS3AifQ","forkedVal","interval","slug","ashryanio/routineTrackerApp","description","Routine Tracker This 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. To change the items in the list, modify the routineTasks array of objects: [\n {name: \"item\", timed: false},\n {name: \"item 2\", timed: true, duration: 2 * 60 }\n {name: \"item 3\", timed: false, requiresParent: true}\n] You can set the parent password on this line: const PARENT_PASSWORD_HASH = simpleHash(\"1234\"); Todos Make the parent password modal touch friendly Track dates/times of list completions Show a tracker of how many completions this week","versions",[143,146,150,154,158,162,166,170,174,178,182,186,190,194,198,202,206,210,214,218,222,226,230,234,238,242,246,250,254,258,262,266,270,274,278,282,286,290,294,298,302,306,310,314,318,322,326,330,334,338,342,346,350,354,358,362,366,370,374,378,382,386,390,394,398,402,406,410,414,418,422,426,430,434,438,442,446,450,454,458,462,465,468,471,475],{"_118":119,"_144":-5,"_116":145,"_113":111},"prId",["D",1736616111017],{"_118":147,"_144":-5,"_116":148,"_113":149},83,["D",1736615744497],"b1231394-d03f-11ef-9d30-e6cdfca9ef9f",{"_118":151,"_144":-5,"_116":152,"_113":153},82,["D",1736615727548],"a7139e46-d03f-11ef-be7c-e6cdfca9ef9f",{"_118":155,"_144":-5,"_116":156,"_113":157},81,["D",1736615467429],"0bff0cd8-d03f-11ef-b618-e6cdfca9ef9f",{"_118":159,"_144":-5,"_116":160,"_113":161},80,["D",1736615419660],"ef84bf3a-d03e-11ef-a3b7-e6cdfca9ef9f",{"_118":163,"_144":-5,"_116":164,"_113":165},79,["D",1736615364780],"cecf73a2-d03e-11ef-b2ad-e6cdfca9ef9f",{"_118":167,"_144":-5,"_116":168,"_113":169},78,["D",1736615009057],"fac7ad90-d03d-11ef-8aef-e6cdfca9ef9f",{"_118":171,"_144":-5,"_116":172,"_113":173},77,["D",1736614987889],"ee29b63c-d03d-11ef-bd37-e6cdfca9ef9f",{"_118":175,"_144":-5,"_116":176,"_113":177},76,["D",1736614937449],"d0182f2a-d03d-11ef-9cc6-e6cdfca9ef9f",{"_118":179,"_144":-5,"_116":180,"_113":181},75,["D",1736614902767],"bb6c223e-d03d-11ef-9b36-e6cdfca9ef9f",{"_118":183,"_144":-5,"_116":184,"_113":185},74,["D",1736614516610],"d5426066-d03c-11ef-926f-e6cdfca9ef9f",{"_118":187,"_144":-5,"_116":188,"_113":189},73,["D",1736614494257],"c7ef51a8-d03c-11ef-a32c-e6cdfca9ef9f",{"_118":191,"_144":-5,"_116":192,"_113":193},72,["D",1736614471617],"ba7027dc-d03c-11ef-a0d9-e6cdfca9ef9f",{"_118":195,"_144":-5,"_116":196,"_113":197},71,["D",1736614403330],"91bee760-d03c-11ef-a32c-e6cdfca9ef9f",{"_118":199,"_144":-5,"_116":200,"_113":201},70,["D",1736614335028],"6906de22-d03c-11ef-851e-e6cdfca9ef9f",{"_118":203,"_144":-5,"_116":204,"_113":205},69,["D",1736614331363],"66d837f4-d03c-11ef-b0d6-e6cdfca9ef9f",{"_118":207,"_144":-5,"_116":208,"_113":209},68,["D",1736614308265],"59142704-d03c-11ef-b277-e6cdfca9ef9f",{"_118":211,"_144":-5,"_116":212,"_113":213},67,["D",1736614265320],"3f7af480-d03c-11ef-8c91-e6cdfca9ef9f",{"_118":215,"_144":-5,"_116":216,"_113":217},66,["D",1736614232208],"2bc41066-d03c-11ef-8b63-e6cdfca9ef9f",{"_118":219,"_144":-5,"_116":220,"_113":221},65,["D",1736614210507],"1ecf779c-d03c-11ef-9337-e6cdfca9ef9f",{"_118":223,"_144":-5,"_116":224,"_113":225},64,["D",1736613904605],"6878a860-d03b-11ef-8b2d-e6cdfca9ef9f",{"_118":227,"_144":-5,"_116":228,"_113":229},63,["D",1736613860793],"4e5da3f4-d03b-11ef-bd77-e6cdfca9ef9f",{"_118":231,"_144":-5,"_116":232,"_113":233},62,["D",1736613792298],"258a4aa4-d03b-11ef-8224-e6cdfca9ef9f",{"_118":235,"_144":-5,"_116":236,"_113":237},61,["D",1736613771248],"1900085a-d03b-11ef-ab7a-e6cdfca9ef9f",{"_118":239,"_144":-5,"_116":240,"_113":241},60,["D",1736613505011],"7a4c304e-d03a-11ef-9289-e6cdfca9ef9f",{"_118":243,"_144":-5,"_116":244,"_113":245},59,["D",1736613485578],"6eb78a3a-d03a-11ef-8247-e6cdfca9ef9f",{"_118":247,"_144":-5,"_116":248,"_113":249},58,["D",1736611303941],"5a5ea398-d035-11ef-83af-e6cdfca9ef9f",{"_118":251,"_144":-5,"_116":252,"_113":253},57,["D",1736611166700],"08955d40-d035-11ef-bc89-e6cdfca9ef9f",{"_118":255,"_144":-5,"_116":256,"_113":257},56,["D",1736610704754],"f53617ea-d033-11ef-8434-e6cdfca9ef9f",{"_118":259,"_144":-5,"_116":260,"_113":261},55,["D",1736610644912],"d18bfb66-d033-11ef-9eeb-e6cdfca9ef9f",{"_118":263,"_144":-5,"_116":264,"_113":265},54,["D",1736610593723],"b308f7fc-d033-11ef-bb2e-e6cdfca9ef9f",{"_118":267,"_144":-5,"_116":268,"_113":269},53,["D",1736610571683],"a5e5a26e-d033-11ef-8188-e6cdfca9ef9f",{"_118":271,"_144":-5,"_116":272,"_113":273},52,["D",1736610478975],"6ea315d4-d033-11ef-be73-e6cdfca9ef9f",{"_118":275,"_144":-5,"_116":276,"_113":277},51,["D",1736610430296],"51a6090a-d033-11ef-8208-e6cdfca9ef9f",{"_118":279,"_144":-5,"_116":280,"_113":281},50,["D",1736610000676],"518cb938-d032-11ef-a755-e6cdfca9ef9f",{"_118":283,"_144":-5,"_116":284,"_113":285},49,["D",1734987575819],"d0fa4940-c170-11ef-b1fe-e6cdfca9ef9f",{"_118":287,"_144":-5,"_116":288,"_113":289},48,["D",1734987558057],"c6634784-c170-11ef-8d11-e6cdfca9ef9f",{"_118":291,"_144":-5,"_116":292,"_113":293},47,["D",1734987546320],"bf652fd8-c170-11ef-a82f-e6cdfca9ef9f",{"_118":295,"_144":-5,"_116":296,"_113":297},46,["D",1734987473659],"94161036-c170-11ef-8c7b-e6cdfca9ef9f",{"_118":299,"_144":-5,"_116":300,"_113":301},45,["D",1734987116393],"bf2375d0-c16f-11ef-9333-e6cdfca9ef9f",{"_118":303,"_144":-5,"_116":304,"_113":305},44,["D",1734987082027],"aaae34b4-c16f-11ef-9f3b-e6cdfca9ef9f",{"_118":307,"_144":-5,"_116":308,"_113":309},43,["D",1734987073953],"a5d750c4-c16f-11ef-8ab5-e6cdfca9ef9f",{"_118":311,"_144":-5,"_116":312,"_113":313},42,["D",1734987008033],"7e8ce0ce-c16f-11ef-8cd2-e6cdfca9ef9f",{"_118":315,"_144":-5,"_116":316,"_113":317},41,["D",1734986999953],"79bbe31a-c16f-11ef-8ab5-e6cdfca9ef9f",{"_118":319,"_144":-5,"_116":320,"_113":321},40,["D",1734986984232],"705de368-c16f-11ef-8a3b-e6cdfca9ef9f",{"_118":323,"_144":-5,"_116":324,"_113":325},39,["D",1734986911456],"44fbb40c-c16f-11ef-bb93-e6cdfca9ef9f",{"_118":327,"_144":-5,"_116":328,"_113":329},38,["D",1734986875312],"2f717d56-c16f-11ef-8e79-e6cdfca9ef9f",{"_118":331,"_144":-5,"_116":332,"_113":333},37,["D",1734986846123],"1e0abb72-c16f-11ef-8e79-e6cdfca9ef9f",{"_118":335,"_144":-5,"_116":336,"_113":337},36,["D",1734986749840],"e4a77b86-c16e-11ef-93d3-e6cdfca9ef9f",{"_118":339,"_144":-5,"_116":340,"_113":341},35,["D",1734986629710],"9d0ce5ae-c16e-11ef-880b-e6cdfca9ef9f",{"_118":343,"_144":-5,"_116":344,"_113":345},34,["D",1734986602603],"8ce60336-c16e-11ef-8c1c-e6cdfca9ef9f",{"_118":347,"_144":-5,"_116":348,"_113":349},33,["D",1734986543854],"69e0c1aa-c16e-11ef-9fae-e6cdfca9ef9f",{"_118":351,"_144":-5,"_116":352,"_113":353},32,["D",1734986446355],"2fc40a0e-c16e-11ef-9195-e6cdfca9ef9f",{"_118":355,"_144":-5,"_116":356,"_113":357},31,["D",1734986381769],"09440cee-c16e-11ef-81cc-e6cdfca9ef9f",{"_118":359,"_144":-5,"_116":360,"_113":361},30,["D",1734985903886],"ec6cc698-c16c-11ef-8d6e-e6cdfca9ef9f",{"_118":363,"_144":-5,"_116":364,"_113":365},29,["D",1728234415260],"639bcf02-8405-11ef-ac95-de64eea55b61",{"_118":367,"_144":-5,"_116":368,"_113":369},28,["D",1728234044289],"867e1b98-8404-11ef-9bb5-de64eea55b61",{"_118":371,"_144":-5,"_116":372,"_113":373},27,["D",1727701232502],"f9eb68f2-7f2b-11ef-9c83-de64eea55b61",{"_118":375,"_144":-5,"_116":376,"_113":377},26,["D",1727701029416],"80dee2b8-7f2b-11ef-95c6-de64eea55b61",{"_118":379,"_144":-5,"_116":380,"_113":381},25,["D",1727700834869],"0ce9edbc-7f2b-11ef-945b-de64eea55b61",{"_118":383,"_144":-5,"_116":384,"_113":385},24,["D",1727543946816],"c45868c6-7dbd-11ef-9291-de64eea55b61",{"_118":387,"_144":-5,"_116":388,"_113":389},23,["D",1727543597362],"f40e1846-7dbc-11ef-b6d3-de64eea55b61",{"_118":391,"_144":-5,"_116":392,"_113":393},22,["D",1726425441364],"8b24b716-7391-11ef-a99c-de64eea55b61",{"_118":395,"_144":-5,"_116":396,"_113":397},21,["D",1726425154988],"e073587c-7390-11ef-b2b1-de64eea55b61",{"_118":399,"_144":-5,"_116":400,"_113":401},20,["D",1726424991156],"7ecc7a9a-7390-11ef-bd9c-de64eea55b61",{"_118":403,"_144":-5,"_116":404,"_113":405},19,["D",1726424970001],"72305b58-7390-11ef-ab2b-de64eea55b61",{"_118":407,"_144":-5,"_116":408,"_113":409},18,["D",1726424861601],"3194034c-7390-11ef-afe6-de64eea55b61",{"_118":411,"_144":-5,"_116":412,"_113":413},17,["D",1726424783222],"02dc2e12-7390-11ef-b8fc-de64eea55b61",{"_118":415,"_144":-5,"_116":416,"_113":417},16,["D",1726424781419],"01c90f2c-7390-11ef-8eec-de64eea55b61",{"_118":419,"_144":-5,"_116":420,"_113":421},15,["D",1726424734438],"e5c86e62-738f-11ef-b539-de64eea55b61",{"_118":423,"_144":-5,"_116":424,"_113":425},14,["D",1726424016910],"3a1a22f0-738e-11ef-9c95-de64eea55b61",{"_118":427,"_144":-5,"_116":428,"_113":429},13,["D",1726423946480],"101f8170-738e-11ef-9367-de64eea55b61",{"_118":431,"_144":-5,"_116":432,"_113":433},12,["D",1726423804633],"bb936a54-738d-11ef-a17b-de64eea55b61",{"_118":435,"_144":-5,"_116":436,"_113":437},11,["D",1726423729168],"8e9857da-738d-11ef-bd26-de64eea55b61",{"_118":439,"_144":-5,"_116":440,"_113":441},10,["D",1726423673342],"6d51e62c-738d-11ef-bdf1-de64eea55b61",{"_118":443,"_144":-5,"_116":444,"_113":445},9,["D",1726423495710],"0371961c-738d-11ef-a3b5-de64eea55b61",{"_118":447,"_144":-5,"_116":448,"_113":449},8,["D",1726423400474],"caad8a8e-738c-11ef-b9d8-de64eea55b61",{"_118":451,"_144":-5,"_116":452,"_113":453},7,["D",1726423380844],"befa5c3a-738c-11ef-b543-de64eea55b61",{"_118":455,"_144":-5,"_116":456,"_113":457},6,["D",1726423310524],"95104664-738c-11ef-870d-de64eea55b61",{"_118":459,"_144":-5,"_116":460,"_113":461},5,["D",1726423294453],"8b7c1dda-738c-11ef-b9d8-de64eea55b61",{"_118":122,"_144":-5,"_116":463,"_113":464},["D",1726423240696],"6b713fde-738c-11ef-9088-de64eea55b61",{"_118":127,"_144":-5,"_116":466,"_113":467},["D",1726423226992],"63465808-738c-11ef-9b19-de64eea55b61",{"_118":90,"_144":-5,"_116":469,"_113":470},["D",1726423210397],"59623cda-738c-11ef-9fb5-de64eea55b61",{"_118":472,"_144":-5,"_116":473,"_113":474},1,["D",1726422441733],"8f394652-738a-11ef-bfdb-de64eea55b61",{"_118":31,"_144":-5,"_116":476,"_113":477},["D",1726422347124],"56d514e4-738a-11ef-b715-de64eea55b61","recentThread","breadcrumbs","comments",[482,494,499],{"_113":483,"_484":485,"_116":486,"_487":488,"_489":26,"_490":26,"_20":491},"b0cd4482-87f6-11ef-a5fe-de64eea55b61","body","I really like what you've done with the routine tracker app for Kaya! Very practical and thoughtful. I’ve been working on something similar for my 8yo and thought you might find it useful: https://www.val.town/v/vandermerwed/dailyScheduleTracker. Hope it adds some value to your setup! Sending good vibes from one parent to another. 🚀👨‍👧‍👦",["D",1728667906971],"updatedAt",["D",1729073888942],"canDelete","canEdit",{"_131":492,"_133":493},"vandermerwed","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ybUpxUTZTSEpVWlNoVkJBRkhtem9yYVc1N2kifQ",{"_113":495,"_484":496,"_116":497,"_487":-5,"_489":26,"_490":26,"_20":498},"af76cdb6-88e5-11ef-87cc-de64eea55b61","@vandermerwed Thanks for checking it out! I'll have a look at yours. I've been slowly chipping away at it as I get feedback from my wife and daughter :) ",["D",1728770554445],{"_131":132,"_133":134},{"_113":500,"_484":501,"_116":502,"_487":-5,"_489":26,"_490":26,"_20":503},"881ddfd2-8ba8-11ef-af61-de64eea55b61","@ashryanio Appreciate it! Gotta admit, my 8yo is my toughest QA tester. Brutal, but honest! 😅",["D",1729074142619],{"_131":492,"_133":493},"isOwner","routes/_app.v.$handle.$name.versions.$(version)",{"_93":507,"_508":509,"_94":510},"single","redirect","/v/ashryanio/routineTrackerApp/versions",{"_113":477,"_114":511,"_118":31,"_116":512,"_513":99,"_100":101,"_108":109,"_131":132,"_11":96,"_514":-5,"_515":-5,"_516":-5,"_504":26,"_137":138},"/** @jsxImportSource https://esm.sh/react */\nimport React, { useState, useEffect } from \"https://esm.sh/react\";\nimport { createRoot } from \"https://esm.sh/react-dom/client\";\n\nconst routineTasks = [\n { name: \"Feed fish\", timed: false },\n { name: \"Unpack bags\", timed: false },\n { name: \"Do homework\", timed: false },\n { name: \"Get mom or dad to check homework\", timed: false, requiresParent: true },\n { name: \"Return homework folder to backpack\", timed: false },\n { name: \"Clean table of homework items\", timed: false },\n { name: \"Move your stuff from living room to bedroom\", timed: false },\n { name: \"Take a shower\", timed: false },\n { name: \"Clean up shower\", timed: false },\n { name: \"Clean room\", timed: true, duration: 5 * 60 }, // 5 minutes in seconds\n { name: \"Eat dinner\", timed: false },\n { name: \"Take a shower\", timed: false },\n { name: \"Brush teeth\", timed: false },\n { name: \"Get clothes ready for tomorrow\", timed: false },\n { name: \"Get mom or dad to check my list\", timed: false, requiresParent: true }\n];\n\n// Simple hash function for the password\nconst simpleHash = (str) => {\n let hash = 0;\n for (let i = 0; i < str.length; i++) {\n const char = str.charCodeAt(i);\n hash = ((hash << 5) - hash) + char;\n hash = hash & hash; // Convert to 32-bit integer\n }\n return hash;\n};\n\n// You would set this to a hashed version of your actual password\nconst PARENT_PASSWORD_HASH = simpleHash(\"1234\"); // Example password\n\nconst TimerComponent = ({ duration, onComplete }) => {\n const [timeLeft, setTimeLeft] = useState(duration);\n const [isRunning, setIsRunning] = useState(false);\n\n useEffect(() => {\n let timer;\n if (isRunning && timeLeft > 0) {\n timer = setInterval(() => {\n setTimeLeft((prevTime) => {\n if (prevTime <= 1) {\n clearInterval(timer);\n setIsRunning(false);\n onComplete();\n return 0;\n }\n return prevTime - 1;\n });\n }, 1000);\n }\n return () => clearInterval(timer);\n }, [isRunning, timeLeft, onComplete]);\n\n const toggleTimer = () => setIsRunning(!isRunning);\n const resetTimer = () => {\n setIsRunning(false);\n setTimeLeft(duration);\n };\n\n const minutes = Math.floor(timeLeft / 60);\n const seconds = timeLeft % 60;\n\n return (\n

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

\n );\n};\n\nconst Confetti = ({ pieces }) => (\n

\n {[...Array(pieces)].map((_, i) => (\n \n ))}\n

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

\n {showConfetti && }\n

Kaya's After School Routine

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

\n \n\n {showPasswordPrompt && (\n

Parent Check Required

\n \n {passwordError && (\n

\n Incorrect password. Please try again.\n

\n )}\n

\n )}\n View Source\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 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\nconst css = `\n@keyframes confetti-fall {\n 0% { transform: translateY(-100vh) rotate(0deg); }\n 100% { transform: translateY(100vh) rotate(720deg); }\n}\n\n.animate-confetti {\n animation: confetti-fall 5s linear infinite;\n}\n\nbody {\n font-family: system-ui, sans-serif;\n background-color: #f0f0f0;\n}\n`;\n\nexport default server;",["D",1726422347124],"valName","deletedAt","messageId","threadId","routes/_app","actionData","errors"]

routineTrackerApp

Version 0