import React, { useState, useEffect, useRef, useCallback } from "react"; // Utility to get today in YYYY-MM-DD function getToday() { return new Date().toISOString().slice(0, 10); } const CUP_VOLUME = 250; // ml per cup const MAX_GOAL = 20; const CUP_SVG_BG = ( ); function Cup({ filled, onClick, number }) { return ( ); } export default function App() { // Persistent user settings (goal per day) const [goal, setGoal] = useAppStorage("water_goal", 8); // default: 8 cups // Persistent log: map of YYYY-MM-DD -> number const [log, setLog] = useSharedStorage("water_log", {}); // UI state const [editingGoal, setEditingGoal] = useState(false); const [inputGoal, setInputGoal] = useState(goal.toString()); const today = getToday(); const todayCount = log[today] || 0; // Streak logic // Calculate max streak and current streak up to today const streakData = React.useMemo(() => { // Only look at days <= today const allDays = Object.keys(log) .filter(date => date <= today) .sort(); let streak = 0; let maxStreak = 0; let prev = null; for (let d of allDays) { if (log[d] >= goal) { // Streak advances if (prev) { const diff = (new Date(d) - new Date(prev)) / 86400000; streak = (diff === 1) ? streak + 1 : 1; } else { streak = 1; } maxStreak = Math.max(maxStreak, streak); prev = d; } else { // Missed day streak = 0; prev = null; } } // Current streak let currentStreak = 0; // Go backwards, count from today const sortedDays = Array.from({length: 60}, (_, i) => { const d = new Date(); d.setDate(d.getDate() - i); return d.toISOString().slice(0, 10); }); for (let d of sortedDays) { if (log[d] && log[d] >= goal) { currentStreak++; } else { break; } } return { currentStreak, maxStreak }; }, [log, goal, today]); // Reminder gentle effect const [showReminder, setShowReminder] = useState(false); useEffect(() => { // Show gentle reminder at 3 points: 1/3, 2/3, not done by evening (lite version, no notifications) if (todayCount < goal) { // Quick time check const now = new Date(); const hour = now.getHours(); // Encourage if 2/3 time has passed but less than 2/3 cups drunk let threshold = Math.floor((hour / 24) * goal); if (threshold < 2) threshold = 2; if ( (todayCount < threshold && hour >= (17)) || // evening but not on track (todayCount < Math.ceil(goal / 3) && hour > 12 && hour <= 15) || (todayCount < Math.ceil((2 * goal) / 3) && hour > 15 && hour <= 18) ) { setShowReminder(true); } else { setShowReminder(false); } } else { setShowReminder(false); } }, [todayCount, goal]); // For subtle confetti on completing daily goal const confettiShown = useRef(false); useEffect(() => { if (typeof window !== "undefined" && todayCount === goal && !confettiShown.current) { import("canvas-confetti").then((mod) => { mod.default({ particleCount: 88, spread: 90, origin: { y: 0.65 } }); }); confettiShown.current = true; } if (todayCount < goal) { confettiShown.current = false; } }, [todayCount, goal]); // Handle tap on cup const handleCupClick = (idx) => { if (todayCount <= idx) { // Fill (increment to idx + 1 cups) const newCount = idx + 1; setLog((prev) => ({ ...prev, [today]: newCount })); } else { // Unfill (decrement to idx cups) const newCount = idx; setLog((prev) => ({ ...prev, [today]: newCount })); } }; // Reset today's log const handleResetToday = () => { setLog((prev) => ({ ...prev, [today]: 0 })); }; // Handle goal change const saveGoal = () => { let val = parseInt(inputGoal, 10); if (isNaN(val) || val < 1) val = 1; if (val > MAX_GOAL) val = MAX_GOAL; setGoal(val); setEditingGoal(false); setInputGoal(val.toString()); }; // Gradient background for calmness return (

💧 Water Tracker

Goal: {editingGoal ? ( <> setInputGoal(e.target.value.replace(/[^0-9]/g, ''))} className="border px-2 py-0.5 w-12 rounded outline-none focus:border-[var(--ds-primary)] text-center" autoFocus onKeyDown={e => { if (e.key === 'Enter') saveGoal(); if (e.key === 'Escape') setEditingGoal(false); }} aria-label="Daily cup goal" /> ) : ( <> {goal} cups )}

Streak: {streakData.currentStreak} 🔥 Best: {streakData.maxStreak} ⭐️

{/* Cups area */}

{Array.from({ length: goal }, (_, idx) => ( handleCupClick(idx)} /> ))}

{/* Progress and motivational text */}

{todayCount} / {goal} cups

{todayCount * CUP_VOLUME}ml / {goal * CUP_VOLUME}ml

{showReminder && todayCount < goal && (

💧 Time for a water break! Stay hydrated ✨

)} {todayCount === goal && (

🎉 Goal reached! Well done!

)}

{/* Reset button and info */}

{todayCount > 0 && ( )}

); }