import React, { useState, useEffect, useRef, useMemo } from "react"; import Chart from "chart.js"; const GLASS_VOLUME_ML = 250; const DEFAULT_GOAL_ML = 2000; function getTodayKey() { const today = new Date(); return `hydration_${today.getFullYear()}-${today.getMonth()+1}-${today.getDate()}`; } export default function App() { const [settings, setSettings] = useAppStorage("hydration_settings", { dailyGoal: DEFAULT_GOAL_ML, reminders: true, lastReminder: 0, }); const [log, setLog] = useSharedStorage(getTodayKey(), []); const [showSettings, setShowSettings] = useState(false); const [goalInput, setGoalInput] = useState(settings.dailyGoal); const [now, setNow] = useState(Date.now()); const chartRef = useRef(null); const canvasRef = useRef(null); const totalMl = log.length * GLASS_VOLUME_ML; const percent = Math.min(1, totalMl / settings.dailyGoal); // Reminder timer useEffect(() => { if (!settings.reminders) return; const id = setInterval(() => setNow(Date.now()), 60000); return () => clearInterval(id); }, [settings.reminders]); // Notification reminder useEffect(() => { if (!settings.reminders) return; const elapsed = Date.now() - (settings.lastReminder || 0); if (elapsed < 90 * 60 * 1000) return; if (totalMl >= settings.dailyGoal) return; const lastLog = log[log.length - 1]; const sinceLast = lastLog ? Date.now() - lastLog : Infinity; if (sinceLast >= 90 * 60 * 1000) { try { if (typeof Notification !== "undefined" && Notification.permission === "granted") { new Notification("Hydration Reminder", { body: "Time to drink some water!" }); } } catch (e) {} setSettings(s => ({ ...s, lastReminder: Date.now() })); } else { try { if (typeof Notification !== "undefined" && Notification.permission !== "denied") { Notification.requestPermission(); } } catch (e) {} } }, [now, settings, log, totalMl]); const handleLogGlass = () => setLog(list => [...list, Date.now()]); const handleUndo = () => setLog(list => list.slice(0, -1)); // Hourly counts const hourlyCounts = useMemo(() => { const counts = Array(24).fill(0); log.forEach(ts => counts[new Date(ts).getHours()]++); return counts; }, [log]); const maxCount = Math.max(1, ...hourlyCounts); const currentHour = new Date().getHours(); // Chart.js visualization (with fallback) const [chartLoaded, setChartLoaded] = useState(false); useEffect(() => { if (typeof Chart === "undefined" || !canvasRef.current) return; try { if (chartRef.current) chartRef.current.destroy(); chartRef.current = new Chart(canvasRef.current, { type: "bar", data: { labels: Array.from({ length: 24 }, (_, i) => i), datasets: [{ label: "Glasses by Hour", data: hourlyCounts, backgroundColor: "rgba(139,182,237,0.7)", borderRadius: 6, }], }, options: { plugins: { legend: { display: false } }, scales: { x: { ticks: { color: "#888", font: { size: 11 } } }, y: { beginAtZero: true, max: Math.max(2, maxCount + 1), ticks: { stepSize: 1, color: "#888", font: { size: 11 } } }, }, responsive: true, animation: { duration: 400 }, }, }); setChartLoaded(true); } catch (e) { setChartLoaded(false); } return () => { try { chartRef.current && chartRef.current.destroy(); } catch(e) {} }; }, [hourlyCounts, maxCount]); useEffect(() => { setGoalInput(settings.dailyGoal); }, [showSettings]); // Daily reset useEffect(() => { if (log.length > 0 && new Date(log[0]).toDateString() !== new Date().toDateString()) { setLog([]); } }, [log]); function motivationalText() { if (percent === 1) return "Goal achieved! Amazing!"; if (percent >= 0.75) return "Almost there! Keep sipping!"; if (percent >= 0.5) return "Halfway to your goal!"; if (percent > 0) return "Awesome, keep hydrating!"; return "Ready to start? Log your first glass!"; } function formatTime(ts) { return new Date(ts).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }); } const mascot = percent === 1 ? "\uD83D\uDCA6" : percent >= 0.75 ? "\uD83D\uDEB0" : percent >= 0.5 ? "\uD83E\uDDCA" : "\uD83E\uDD64"; return (

{mascot}

Hydration Tracker

{Math.round(percent * 100)}% {totalMl} / {settings.dailyGoal} ml

{motivationalText()}

Glasses today: {log.length} {log.length > 0 && Last drink: {formatTime(log[log.length - 1])}}

Hourly Intake

{typeof Chart !== "undefined" ? (

); }