/** @jsxImportSource https://esm.sh/react */ import React, { useEffect, useMemo, useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; interface ScheduleItem { start: string; end: string; label: string; color: string; } interface TaskItem { id: string; name: string; completed: boolean; } interface ComponentProps { schedule?: ScheduleItem[]; todoList?: TaskItem[]; todoListHeading?: string; legendHeading?: string; initialTime?: Date; isLoading?: boolean; selectedDate?: Date; } const defaultSchedule: ScheduleItem[] = [ { label: "💤", start: "19:00", end: "06:00", color: "#fca5a5" }, { label: "🍳", start: "06:00", end: "07:15", color: "#93c5fd" }, { label: "🚗", start: "07:15", end: "07:30", color: "#d1d5db" }, { label: "🏫", start: "07:30", end: "12:45", color: "#fdba74" }, { label: "🚗", start: "12:45", end: "13:00", color: "#d1d5db" }, { label: "📺", start: "13:00", end: "14:00", color: "#86efac" }, { label: "📚", start: "14:00", end: "16:00", color: "#fdba74" }, { label: "🎮", start: "16:00", end: "17:00", color: "#86efac" }, { label: "🍽️", start: "17:00", end: "18:00", color: "#93c5fd" }, { label: "🛁", start: "18:00", end: "19:00", color: "#d8b4fe" }, ]; const defaultTodoList: TaskItem[] = [ { id: "1", name: "Make bed", completed: false }, { id: "2", name: "Clean room", completed: false }, { id: "3", name: "Do homework", completed: false }, { id: "4", name: "Feed pet", completed: false }, { id: "5", name: "Set table", completed: false }, ]; const timeToMinutes = (time: string): number => { if (time.includes("T")) { // If it's a full date-time string const date = new Date(time); return date.getHours() * 60 + date.getMinutes(); } else { // If it's just a time string const [hours, minutes] = time.split(":").map(Number); return hours * 60 + minutes; } }; const minutesToAngle = (minutes: number): number => { return (minutes / 2) % 360; }; const ScheduleSegment: React.FC<{ startMinutes: number; endMinutes: number; color: string; }> = ({ startMinutes, endMinutes, color }) => { const startAngle = minutesToAngle(startMinutes); let endAngle = minutesToAngle(endMinutes); if (endAngle <= startAngle) { endAngle += 360; } const largeArcFlag = endAngle - startAngle <= 180 ? 0 : 1; const startX = 150 + 140 * Math.cos((startAngle - 90) * Math.PI / 180); const startY = 150 + 140 * Math.sin((startAngle - 90) * Math.PI / 180); const endX = 150 + 140 * Math.cos((endAngle - 90) * Math.PI / 180); const endY = 150 + 140 * Math.sin((endAngle - 90) * Math.PI / 180); return ( ); }; const ClockHand: React.FC<{ angle: number; length: number; width: number; color: string }> = ( { angle, length, width, color }, ) => ( ); const formatTime = (timeString: string): string => { if (timeString.includes("T")) { // If it's a full date-time string const date = new Date(timeString); return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }); } else { // If it's just a time string return timeString; } }; const Legend: React.FC<{ schedule: ScheduleItem[]; currentTime: Date; heading: string }> = ( { schedule, currentTime, heading }, ) => { const currentMinutes = currentTime.getHours() * 60 + currentTime.getMinutes(); const isAM = currentTime.getHours() < 12; return (

{heading}

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

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

); })}

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

{heading}

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

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

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

{formattedDate}

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

); } function App() { return ; } function client() { const rootElement = document.getElementById("root"); if (rootElement) { createRoot(rootElement).render(); } else { console.error("Root element not found"); } } if (typeof document !== "undefined") { client(); } export default async function server(request: Request): Promise { return new Response( ` Analogue Schedule Clock

`, { headers: { "content-type": "text/html", }, }, ); } const css = ` body { margin: 0; font-family: system-ui, sans-serif; } `;

dailyScheduleTracker