sleepScheduleReactComponent = (initialBedTime, initialWakeTime) => render( // Claude Artifact Code goes below () => { const [bedTime, setBedTime] = useState(initialBedTime); const [wakeTime, setWakeTime] = useState(initialWakeTime); const [isDragging, setIsDragging] = useState(false); const [activeHandle, setActiveHandle] = useState(null); const [duration, setDuration] = useState(0); const [overall, setOverall] = useObservableState({ initialBedTime, initialWakeTime, duration: 0 }); const calculateSleepDuration = () => { let hours = wakeTime.hours - bedTime.hours; let minutes = wakeTime.minutes - bedTime.minutes; if (hours < 0) hours += 24; if (minutes < 0) { minutes += 60; hours -= 1; } return minutes > 0 ? `${hours} hr ${minutes} min` : `${hours} hr`; }; const formatTime = (time) => { return `${String(time.hours).padStart(2, "0")}:${String( time.minutes ).padStart(2, "0")}`; }; const calculateArcPath = (startAngle, endAngle) => { const radius = 140; const innerRadius = 100; let adjustedEndAngle = endAngle; let adjustedStartAngle = startAngle; // Handle angle wrapping if (endAngle < startAngle) { adjustedEndAngle += 360; } const startRad = ((adjustedStartAngle - 90) * Math.PI) / 180; const endRad = ((adjustedEndAngle - 90) * Math.PI) / 180; const x1 = 150 + radius * Math.cos(startRad); const y1 = 150 + radius * Math.sin(startRad); const x2 = 150 + radius * Math.cos(endRad); const y2 = 150 + radius * Math.sin(endRad); const x3 = 150 + innerRadius * Math.cos(endRad); const y3 = 150 + innerRadius * Math.sin(endRad); const x4 = 150 + innerRadius * Math.cos(startRad); const y4 = 150 + innerRadius * Math.sin(startRad); const largeArcFlag = adjustedEndAngle - adjustedStartAngle <= 180 ? "0" : "1"; return ` M ${x1} ${y1} A ${radius} ${radius} 0 ${largeArcFlag} 1 ${x2} ${y2} L ${x3} ${y3} A ${innerRadius} ${innerRadius} 0 ${largeArcFlag} 0 ${x4} ${y4} Z `; }; useEffect(() => { const calcDuration = () => { let hrs = wakeTime.hours - bedTime.hours; let mins = wakeTime.minutes - bedTime.minutes; if (hrs < 0) hrs += 24; if (mins < 0) { mins += 60; hrs -= 1; } return hrs * 60 + mins; }; const durationValue = calcDuration(); setDuration(durationValue); setOverall({ bedTime, wakeTime, duration: durationValue }); }, [bedTime, wakeTime]); const handleMouseMove = (e) => { if (!isDragging) return; const updateTimes = (newBedAngle) => { // Round to nearest 30 minutes (7.5 degrees) const snapAngle = (Math.round(newBedAngle * 2) / 2) * 15; const bedMinutes = Math.round(snapAngle * 4); const bedHrs = Math.floor(bedMinutes / 60) % 24; const bedMins = Math.round((bedMinutes % 60) / 30) * 30; const totalMinutes = bedMinutes + duration; const wakeHrs = Math.floor(totalMinutes / 60) % 24; const wakeMins = totalMinutes % 60; setBedTime({ hours: bedHrs, minutes: bedMins }); setWakeTime({ hours: wakeHrs, minutes: wakeMins }); }; const svg = e.currentTarget; const rect = svg.getBoundingClientRect(); const centerX = rect.width / 2; const centerY = rect.height / 2; const x = e.clientX - rect.left - centerX; const y = e.clientY - rect.top - centerY; let angle = Math.atan2(y, x) * (180 / Math.PI) + 90; if (angle < 0) angle += 360; if (activeHandle === "rotate") { updateTimes(angle / 15); } else { const hours = Math.floor(angle / 15); const minutes = Math.round((angle % 15) * 4); if (activeHandle === "bed") { setBedTime({ hours, minutes }); } else if (activeHandle === "wake") { setWakeTime({ hours, minutes }); } } }; const bedAngle = (bedTime.hours * 60 + bedTime.minutes) * 0.25; const wakeAngle = (wakeTime.hours * 60 + wakeTime.minutes) * 0.25; return jsx`

<${lucideReact.Moon} size="16"/> BEDTIME

${formatTime(bedTime)}

Tonight

<${lucideReact.Sun} size=${16} /> WAKE UP - NO ALARM

${formatTime(wakeTime)}

Tomorrow

${calculateSleepDuration()}

sleep goal.

`; } )