{heading}

\n {schedule.map((item, index) => {\n const startMinutes = timeToMinutes(item.start);\n const endMinutes = timeToMinutes(item.end);\n const isActive = (startMinutes < endMinutes && currentMinutes >= startMinutes && currentMinutes < endMinutes)\n || (startMinutes > endMinutes && (currentMinutes >= startMinutes || currentMinutes < endMinutes));\n const itemIsAM = startMinutes < 12 * 60;\n\n return (\n \n

\n {item.label}\n \n {formatTime(item.start)} - {formatTime(item.end)}\n \n

\n );\n })}\n

\n \n );\n};\n\nconst TodoList: React.FC<{ todos: TaskItem[]; heading: string }> = ({ todos, heading }) => {\n const [todoItems, setTodoItems] = useState(todos);\n\n useEffect(() => {\n setTodoItems(todos);\n }, [todos]);\n\n const toggleTodo = (id: string) => {\n setTodoItems(prevItems => prevItems.map(todo => todo.id === id ? { ...todo, completed: !todo.completed } : todo));\n };\n\n return (\n

{heading}

\n toggleTodo(todo.id)}\n className=\"mr-2\"\n aria-checked={todo.completed}\n />\n \n {todo.name}\n \n

\n );\n};\n\nconst processSchedule = (schedule: ScheduleItem[], isAM: boolean) => {\n return schedule\n .flatMap(item => {\n const startMinutes = timeToMinutes(item.start);\n let endMinutes = timeToMinutes(item.end);\n\n if (endMinutes <= startMinutes) {\n endMinutes += 24 * 60;\n }\n\n if (endMinutes > 24 * 60) {\n return [\n {\n ...item,\n startMinutes,\n endMinutes: 24 * 60,\n },\n {\n ...item,\n startMinutes: 0,\n endMinutes: endMinutes - 24 * 60,\n },\n ];\n } else {\n return {\n ...item,\n startMinutes,\n endMinutes,\n };\n }\n })\n .filter(item => {\n if (isAM) {\n return item.startMinutes < 12 * 60;\n } else {\n return item.startMinutes >= 12 * 60 || (item.startMinutes < 12 * 60 && item.endMinutes > 12 * 60);\n }\n })\n .map(item => {\n if (!isAM) {\n if (item.startMinutes >= 12 * 60) {\n item.startMinutes -= 12 * 60;\n }\n if (item.endMinutes > 12 * 60) {\n item.endMinutes -= 12 * 60;\n }\n }\n return item;\n });\n};\n\nfunction AnalogueScheduleClock({\n schedule = defaultSchedule,\n todoList = defaultTodoList,\n todoListHeading = \"Kid's Chores\",\n legendHeading = \"Daily Schedule\",\n initialTime,\n isLoading = false,\n}: ComponentProps) {\n const [currentTime, setCurrentTime] = useState(initialTime || new Date());\n const [isMounted, setIsMounted] = useState(false);\n\n useEffect(() => {\n setIsMounted(true);\n if (!initialTime) {\n const timer = setInterval(() => {\n setCurrentTime(new Date());\n }, 1000);\n return () => clearInterval(timer);\n }\n }, [initialTime]);\n\n const sortedSchedule = useMemo(() => {\n return [...schedule].sort((a, b) => timeToMinutes(a.start) - timeToMinutes(b.start));\n }, [schedule]);\n\n const hours = currentTime.getHours();\n const minutes = currentTime.getMinutes();\n const seconds = currentTime.getSeconds();\n const isAM = hours < 12;\n\n const hourAngle = ((hours % 12) + minutes / 60) * 30;\n const minuteAngle = (minutes + seconds / 60) * 6;\n const secondAngle = seconds * 6;\n\n const filteredSchedule = processSchedule(sortedSchedule, isAM);\n\n if (isLoading) {\n return

;\n }\n\n const formattedDate = currentTime.toLocaleDateString(\"en-US\", {\n weekday: \"long\",\n year: \"numeric\",\n month: \"long\",\n day: \"numeric\",\n });\n\n return (\n

{formattedDate}

\n \n

\n {isMounted ? currentTime.toLocaleTimeString() : \"Loading...\"}\n

\n \n

\n );\n}\n\nfunction App() {\n return ;\n}\n\nfunction client() {\n const rootElement = document.getElementById(\"root\");\n if (rootElement) {\n createRoot(rootElement).render();\n } else {\n console.error(\"Root element not found\");\n }\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n return new Response(\n `\n \n \n \n \n \n Analogue Schedule Clock\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 = `\nbody {\n margin: 0;\n font-family: system-ui, sans-serif;\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/mrt/dailyScheduleTracker/code/main.tsx","extension","actionData","errors"]