import React, { useState, useEffect } from "react" import { useFireproof } from "use-fireproof" export default function App() { const { database, useLiveQuery } = useFireproof("game-wellness-tracker") const [activeSession, setActiveSession] = useState(null) const [elapsedSeconds, setElapsedSeconds] = useState(0) const [currentView, setCurrentView] = useState('home') const [editingReflectionId, setEditingReflectionId] = useState(null) const [reflectionForm, setReflectionForm] = useState(null) const today = new Date().toISOString().split('T')[0] // Settings state const [settings, setSettings] = useState({ customGoalMinutes: null, weekdayMinutes: 90, weekendMinutes: 120, selectedDays: { monday: false, tuesday: false, wednesday: false, thursday: false, friday: false, saturday: false, sunday: false }, reflectionDays: { monday: true, tuesday: true, wednesday: true, thursday: true, friday: true, saturday: true, sunday: true } }) const dayOfWeek = new Date().getDay() const isWeekend = dayOfWeek === 0 || dayOfWeek === 6 const defaultLimit = isWeekend ? settings.weekendMinutes * 60 : settings.weekdayMinutes * 60 const recommendedLimit = settings.customGoalMinutes ? settings.customGoalMinutes * 60 : defaultLimit const warningThreshold = recommendedLimit * 0.75 const excessiveThreshold = 18000 // Load settings on mount useEffect(() => { const loadSettings = async () => { try { const doc = await database.get("app-settings") setSettings(doc) } catch (e) { await database.put({ _id: "app-settings", type: "settings", ...settings }) } } loadSettings() }, []) // Save settings when they change const updateSettings = async (updates) => { const newSettings = { ...settings, ...updates } setSettings(newSettings) await database.put({ _id: "app-settings", type: "settings", ...newSettings }) } // Query today's sessions const { docs: todaySessions } = useLiveQuery( (doc) => doc.type === "session" ? [doc.date, doc.startTime] : null, { prefix: [today] } ) const totalSecondsToday = todaySessions.reduce((sum, session) => { return sum + (session.duration || 0) }, 0) + elapsedSeconds // Query last 7 days const sevenDaysAgo = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString().split('T')[0] const { docs: recentSessions } = useLiveQuery( (doc) => doc.type === "session" ? doc.date : null, { range: [sevenDaysAgo, today], descending: true } ) // Query reflections const { docs: reflections } = useLiveQuery("type", { key: "reflection" }) const sessionsByDate = recentSessions.reduce((acc, session) => { if (!acc[session.date]) acc[session.date] = [] acc[session.date].push(session) return acc }, {}) // Timer effect useEffect(() => { if (!activeSession) return const interval = setInterval(() => { setElapsedSeconds(Math.floor((Date.now() - activeSession) / 1000)) }, 1000) return () => clearInterval(interval) }, [activeSession]) const startSession = () => { setActiveSession(Date.now()) setElapsedSeconds(0) } const endSession = async () => { if (!activeSession) return const duration = Math.floor((Date.now() - activeSession) / 1000) if (duration > 0) { await database.put({ type: "session", date: today, startTime: activeSession, duration: duration, createdAt: Date.now() }) } setActiveSession(null) setElapsedSeconds(0) const dayNames = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'] const currentDayName = dayNames[new Date().getDay()] if (duration > 1800 && settings.reflectionDays[currentDayName]) { setCurrentView('reflections') createNewReflection() } } const createNewReflection = () => { setEditingReflectionId(`reflection-${today}`) setReflectionForm({ date: today, mood: "", gamesPlayed: "", feltGood: "", feltBad: "", tomorrowGoal: "", energy: 3, social: 3, productive: 3 }) } const editReflection = (reflection) => { setEditingReflectionId(reflection._id) setReflectionForm({ date: reflection.date, mood: reflection.mood || "", gamesPlayed: reflection.gamesPlayed || "", feltGood: reflection.feltGood || "", feltBad: reflection.feltBad || "", tomorrowGoal: reflection.tomorrowGoal || "", energy: reflection.energy || 3, social: reflection.social || 3, productive: reflection.productive || 3 }) } const updateReflectionForm = (updates) => { setReflectionForm(prev => ({ ...prev, ...updates })) } const saveReflection = async () => { const newId = `reflection-${reflectionForm.date}` if (editingReflectionId !== newId && editingReflectionId.startsWith('reflection-')) { try { await database.del(editingReflectionId) } catch (e) { // ignore } } await database.put({ _id: newId, type: "reflection", ...reflectionForm }) setEditingReflectionId(null) setReflectionForm(null) } const deleteReflection = async (reflectionId) => { if (confirm('Are you sure you want to delete this reflection?')) { await database.del(reflectionId) setEditingReflectionId(null) setReflectionForm(null) } } const cancelReflection = () => { setEditingReflectionId(null) setReflectionForm(null) } const getWellnessMessage = () => { if (totalSecondsToday >= excessiveThreshold) { return { title: "Let's take a break together! 🌟", message: "You've been gaming for quite a while today. Your mind and body would love some variety! How about a stretch, a snack, or a chat with friends?", color: "bg-[#ef4444]" } } else if (totalSecondsToday >= recommendedLimit) { return { title: "You're doing great! 💪", message: `You've hit today's goal. If you keep playing, remember to take breaks and stay hydrated!`, color: "bg-[#f59e0b]" } } else if (totalSecondsToday >= warningThreshold) { return { title: "Heads up, friend! ⏰", message: `You're getting close to ${Math.floor(recommendedLimit / 60)} minutes. Maybe plan to wrap up soon or take a quick break?`, color: "bg-[#3b82f6]" } } else { return { title: "Enjoy your gaming! 🎮", message: `You've got plenty of time to play. Remember to stay balanced and have fun!`, color: "bg-[#10b981]" } } } const formatTime = (seconds) => { const hours = Math.floor(seconds / 3600) const minutes = Math.floor((seconds % 3600) / 60) const secs = seconds % 60 if (hours > 0) { return `${hours}h ${minutes}m ${secs}s` } else if (minutes > 0) { return `${minutes}m ${secs}s` } else { return `${secs}s` } } const formatTimeCompact = (seconds) => { const hours = Math.floor(seconds / 3600) const minutes = Math.floor((seconds % 3600) / 60) if (hours > 0) { return `${hours}h ${minutes}m` } else { return `${minutes}m` } } const toggleDay = (day) => { updateSettings({ selectedDays: { ...settings.selectedDays, [day]: !settings.selectedDays[day] } }) } const toggleReflectionDay = (day) => { updateSettings({ reflectionDays: { ...settings.reflectionDays, [day]: !settings.reflectionDays[day] } }) } const dayNames = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'] const currentDayName = dayNames[dayOfWeek] const getMoodEmoji = (mood) => { const moods = { 'amazing': '🤩', 'great': '😊', 'good': '🙂', 'okay': '😐', 'tired': '😴', 'stressed': '😰', 'frustrated': '😤' } return moods[mood] || '💭' } const wellness = getWellnessMessage() // Sort reflections by date descending const sortedReflections = [...reflections].sort((a, b) => b.date.localeCompare(a.date)) const NavigationMenu = () => (

) const HomeView = () => ( <>

Today's Session

{currentDayName.charAt(0).toUpperCase() + currentDayName.slice(1)} {settings.selectedDays[currentDayName] && ' ✓'}

Goal: {formatTimeCompact(recommendedLimit)}

{formatTime(totalSecondsToday)}

total today

0m {formatTimeCompact(recommendedLimit)}

{!activeSession ? ( ) : (

{formatTime(elapsedSeconds)}

current session

)}

{wellness.title}

{wellness.message}

Last 7 Days

{Object.keys(sessionsByDate).length === 0 ? (

No sessions recorded yet. Start your first session above!

) : ( Object.keys(sessionsByDate) .sort((a, b) => b.localeCompare(a)) .map(date => { const sessions = sessionsByDate[date] const totalSecs = sessions.reduce((sum, s) => sum + s.duration, 0) const dateObj = new Date(date) const wasWeekend = dateObj.getDay() === 0 || dateObj.getDay() === 6 const limit = wasWeekend ? settings.weekendMinutes * 60 : settings.weekdayMinutes * 60 const percentage = (totalSecs / limit) * 100 const reflection = reflections.find(r => r.date === date) return (

{new Date(date + 'T12:00:00').toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' })}

{reflection && ( {getMoodEmoji(reflection.mood)} )}

{formatTime(totalSecs)}

{sessions.length} session{sessions.length !== 1 ? 's' : ''}

= 100 ? 'bg-[#f59e0b]' : 'bg-[#10b981]'} transition-all`} style={{ width: `${Math.min(percentage, 100)}%` }} />

) }) )}

) const ReflectionsView = () => ( <> {reflectionForm ? (

Reflection

{editingReflectionId && ( )}

Reflection Date updateReflectionForm({ date: e.target.value })} className="w-full border-4 border-[#0f172a] p-3 text-[#0f172a] font-bold text-lg" />

{new Date(reflectionForm.date + 'T12:00:00').toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' })}

How did you feel?

{['amazing', 'great', 'good', 'okay', 'tired', 'stressed', 'frustrated'].map(mood => ( ))}

Energy Level: {reflectionForm.energy}/5 updateReflectionForm({ energy: parseInt(e.target.value) })} className="w-full h-4 bg-[#cbd5e1] border-4 border-[#0f172a]" />

Social Connection: {reflectionForm.social}/5 updateReflectionForm({ social: parseInt(e.target.value) })} className="w-full h-4 bg-[#cbd5e1] border-4 border-[#0f172a]" />

Felt Productive: {reflectionForm.productive}/5 updateReflectionForm({ productive: parseInt(e.target.value) })} className="w-full h-4 bg-[#cbd5e1] border-4 border-[#0f172a]" />

What games did you play? updateReflectionForm({ gamesPlayed: e.target.value })} placeholder="e.g., Minecraft, Fortnite" className="w-full border-4 border-[#0f172a] p-3 text-[#0f172a] font-bold" />

What felt good about today's gaming?

updateReflectionForm({ feltGood: e.target.value })}
                  placeholder="Achievements, fun moments, friends..."
                  className="w-full border-4 border-[#0f172a] p-3 text-[#0f172a] font-bold h-24 resize-none"
                />
              </div>

<div>
                <label htmlFor="felt-bad" className="block text-[#0f172a] font-black mb-2">
                  What could be better?
                </label>
                <textarea
                  id="felt-bad"
                  value={reflectionForm.feltBad}
                  onChange={(e) => updateReflectionForm({ feltBad: e.target.value })}
                  placeholder="Frustrations, time management, balance..."
                  className="w-full border-4 border-[#0f172a] p-3 text-[#0f172a] font-bold h-24 resize-none"
                />
              </div>

<div>
                <label htmlFor="tomorrow-goal" className="block text-[#0f172a] font-black mb-2">
                  Tomorrow's intention
                </label>
                <textarea
                  id="tomorrow-goal"
                  value={reflectionForm.tomorrowGoal}
                  onChange={(e) => updateReflectionForm({ tomorrowGoal: e.target.value })}
                  placeholder="What's your plan for tomorrow?"
                  className="w-full border-4 border-[#0f172a] p-3 text-[#0f172a] font-bold h-24 resize-none"
                />
              </div>
            </div>

<div className="flex gap-3">
              <button
                type="button"
                onClick={saveReflection}
                className="flex-1 bg-[#10b981] text-[#ffffff] text-xl font-black py-4 px-6 border-4 border-[#0f172a] hover:translate-y-1 transition-transform"
                style={{
                  boxShadow: '6px 6px 0 #0f172a'
                }}
              >
                Save Reflection
              </button>
              <button
                type="button"
                onClick={cancelReflection}
                className="bg-[#64748b] text-[#ffffff] text-xl font-black py-4 px-6 border-4 border-[#0f172a] hover:translate-y-1 transition-transform"
                style={{
                  boxShadow: '6px 6px 0 #0f172a'
                }}
              >
                Cancel
              </button>
            </div>
          </div>
        </div>
      ) : (
        <div className="bg-[#ffffff] border-4 border-[#0f172a] mb-6" style={{
          boxShadow: '8px 8px 0 #0f172a'
        }}>
          <div className="p-6">
            <div className="flex items-center justify-between mb-4">
              <h2 className="text-2xl font-black text-[#0f172a]">Reflection Journal</h2>
              <button
                onClick={createNewReflection}
                className="bg-[#10b981] text-[#ffffff] font-black py-3 px-6 border-4 border-[#0f172a] hover:translate-y-1 transition-transform"
                style={{
                  boxShadow: '6px 6px 0 #0f172a'
                }}
              >
                + New
              </button>
            </div>
            <div className="space-y-3">
              {sortedReflections.length === 0 ? (
                <p className="text-[#94a3b8] font-bold">No reflections yet. Create your first one!</p>
              ) : (
                sortedReflections.map(reflection => (
                  <div
                    key={reflection._id}
                    className="border-2 border-[#cbd5e1] p-4"
                  >
                    <div className="flex items-start justify-between mb-3">
                      <div className="flex-1">
                        <div className="flex items-center gap-2 mb-2">
                          <div className="font-black text-[#0f172a]">
                            {new Date(reflection.date + 'T12:00:00').toLocaleDateString('en-US', { 
                              weekday: 'short', 
                              month: 'short', 
                              day: 'numeric',
                              year: 'numeric'
                            })}
                          </div>
                          <div className="text-2xl">
                            {getMoodEmoji(reflection.mood)}
                          </div>
                        </div>
                        {reflection.gamesPlayed && (
                          <div className="text-sm text-[#64748b] font-bold mb-2">
                            🎮 {reflection.gamesPlayed}
                          </div>
                        )}
                        <div className="flex gap-4 text-xs text-[#94a3b8] font-bold mb-2">
                          <span>⚡ {reflection.energy}/5</span>
                          <span>👥 {reflection.social}/5</span>
                          <span>✅ {reflection.productive}/5</span>
                        </div>
                        {reflection.feltGood && (
                          <div className="text-sm text-[#0f172a] mt-2">
                            <span className="font-black">Good:</span> {reflection.feltGood.substring(0, 100)}{reflection.feltGood.length > 100 ? '...' : ''}
                          </div>
                        )}
                      </div>
                      <button
                        onClick={() => editReflection(reflection)}
                        className="ml-4 bg-[#3b82f6] text-[#ffffff] font-black py-2 px-4 border-4 border-[#0f172a] hover:translate-y-1 transition-transform"
                        style={{
                          boxShadow: '4px 4px 0 #0f172a'
                        }}
                      >
                        Edit
                      </button>
                    </div>
                  </div>
                ))
              )}
            </div>
          </div>
        </div>
      )}
    </>
  )

const SettingsView = () => (
    <div className="bg-[#ffffff] border-4 border-[#0f172a]" style={{
      boxShadow: '8px 8px 0 #0f172a'
    }}>
      <div className="p-6">
        <h2 className="text-2xl font-black text-[#0f172a] mb-6">Settings</h2>
        
        <div className="mb-6">
          <label className="block text-[#0f172a] font-black mb-3">
            Today's Goal (minutes)
          </label>
          <input
            type="number"
            min="0"
            max="480"
            value={settings.customGoalMinutes || ''}
            onChange={(e) => updateSettings({ 
              customGoalMinutes: e.target.value ? parseInt(e.target.value) : null 
            })}
            placeholder={`Default: ${Math.floor(defaultLimit / 60)} min`}
            className="w-full border-4 border-[#0f172a] p-3 text-[#0f172a] font-bold text-lg"
          />
          <p className="text-[#64748b] text-sm mt-2 font-bold">
            Leave empty to use default ({isWeekend ? 'weekend' : 'weekday'} limit)
          </p>
        </div>

<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
          <div>
            <label className="block text-[#0f172a] font-black mb-3">
              Default Weekday Limit
            </label>
            <input
              type="number"
              min="0"
              max="480"
              value={settings.weekdayMinutes}
              onChange={(e) => updateSettings({ 
                weekdayMinutes: parseInt(e.target.value) || 90 
              })}
              className="w-full border-4 border-[#0f172a] p-3 text-[#0f172a] font-bold text-lg"
            />
            <p className="text-[#64748b] text-xs mt-1 font-bold">minutes</p>
          </div>
          <div>
            <label className="block text-[#0f172a] font-black mb-3">
              Default Weekend Limit
            </label>
            <input
              type="number"
              min="0"
              max="480"
              value={settings.weekendMinutes}
              onChange={(e) => updateSettings({ 
                weekendMinutes: parseInt(e.target.value) || 120 
              })}
              className="w-full border-4 border-[#0f172a] p-3 text-[#0f172a] font-bold text-lg"
            />
            <p className="text-[#64748b] text-xs mt-1 font-bold">minutes</p>
          </div>
        </div>

<div className="mb-6 pb-6 border-b-4 border-[#cbd5e1]">
          <label className="block text-[#0f172a] font-black mb-3">
            Days I Plan to Play
          </label>
          <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
            {['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'].map(day => (
              <button
                key={day}
                type="button"
                onClick={() => toggleDay(day)}
                className={`p-3 border-4 border-[#0f172a] font-black transition-all ${
                  settings.selectedDays[day]
                    ? 'bg-[#10b981] text-[#ffffff]'
                    : 'bg-[#ffffff] text-[#0f172a] hover:bg-[#f1f5f9]'
                } ${day === currentDayName ? 'ring-4 ring-[#3b82f6]' : ''}`}
                style={{
                  boxShadow: settings.selectedDays[day] ? '4px 4px 0 #0f172a' : '2px 2px 0 #0f172a'
                }}
              >
                {day.substring(0, 3).toUpperCase()}
              </button>
            ))}
          </div>
          <p className="text-[#64748b] text-sm mt-3 font-bold">
            Today is <span className="text-[#3b82f6]">{currentDayName}</span> (highlighted with blue ring)
          </p>
        </div>

<div className="mb-4">
          <label className="block text-[#0f172a] font-black mb-3">
            Days to Write Reflections
          </label>
          <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
            {['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday'].map(day => (
              <button
                key={day}
                type="button"
                onClick={() => toggleReflectionDay(day)}
                className={`p-3 border-4 border-[#0f172a] font-black transition-all ${
                  settings.reflectionDays[day]
                    ? 'bg-[#3b82f6] text-[#ffffff]'
                    : 'bg-[#ffffff] text-[#0f172a] hover:bg-[#f1f5f9]'
                } ${day === currentDayName ? 'ring-4 ring-[#f59e0b]' : ''}`}
                style={{
                  boxShadow: settings.reflectionDays[day] ? '4px 4px 0 #0f172a' : '2px 2px 0 #0f172a'
                }}
              >
                📝 {day.substring(0, 3).toUpperCase()}
              </button>
            ))}
          </div>
          <p className="text-[#64748b] text-sm mt-3 font-bold">
            Select which days you want to be prompted for reflections after gaming sessions
          </p>
        </div>

<div className="mt-6 p-4 bg-[#f1f5f9] border-2 border-[#cbd5e1]">
          <p className="text-[#0f172a] font-bold mb-2">
            Gaming {Object.keys(settings.selectedDays).filter(day => settings.selectedDays[day]).length} days/week
          </p>
          <p className="text-[#0f172a] font-bold">
            Reflecting {Object.keys(settings.reflectionDays).filter(day => settings.reflectionDays[day]).length} days/week
          </p>
        </div>
      </div>
    </div>
  )

return (
    <div className="min-h-screen bg-[#f1f5f9] p-4 sm:p-8">
      <div className="max-w-4xl mx-auto">
        <div className="mb-8">
          <h1 className="text-4xl font-black text-[#0f172a] mb-2">Game Time Wellness</h1>
          <p className="text-[#64748b] text-lg italic">Track your gaming, reflect on your experiences, and maintain healthy habits with a supportive wellness companion</p>
        </div>

{currentView === 'home' && <HomeView />}
        {currentView === 'reflections' && <ReflectionsView />}
        {currentView === 'settings' && <SettingsView />}
      </div>
    </div>
  )
}</article></body></html>