\n {label}\n {showValue && {formatMinutes(value)}}\n

\n \n

\n );\n}\n\ninterface CircularProgressProps {\n percentage: number;\n size: number;\n strokeWidth: number;\n color: string;\n backgroundColor?: string;\n children?: React.ReactNode;\n}\n\nfunction CircularProgress({ \n percentage, \n size, \n strokeWidth, \n color, \n backgroundColor = \"#e5e7eb\",\n children \n}: CircularProgressProps) {\n const radius = (size - strokeWidth) / 2;\n const circumference = radius * 2 * Math.PI;\n const strokeDasharray = circumference;\n const strokeDashoffset = circumference - (percentage / 100) * circumference;\n\n return (\n

\n \n

\n {children}\n

\n );\n}\n\ninterface TimeBankVisualizerProps {\n savedMinutes: number;\n maxDisplay?: number;\n}\n\nfunction TimeBankVisualizer({ savedMinutes, maxDisplay = 120 }: TimeBankVisualizerProps) {\n const coins = Math.min(Math.floor(savedMinutes / 5), 12); // Each coin represents 5 minutes, max 12 coins\n const remainder = savedMinutes % 5;\n \n return (\n

💰 Time Bank

\n {Array.from({ length: coins }).map((_, i) => (\n \n 💎\n

\n ))}\n {remainder > 0 && (\n \n ⏱️\n

\n )}\n {savedMinutes === 0 && (\n

No time banked yet

\n )}\n \n

\n {savedMinutes > 0 ? formatMinutes(savedMinutes) : \"Start working to earn break time!\"}\n

\n \n );\n}\n\ninterface NotificationProps {\n message: string;\n type: \"success\" | \"info\" | \"warning\";\n onClose: () => void;\n}\n\nfunction Notification({ message, type, onClose }: NotificationProps) {\n useEffect(() => {\n const timer = setTimeout(onClose, 4000);\n return () => clearTimeout(timer);\n }, [onClose]);\n\n const bgColor = type === \"success\" ? \"bg-green-500\" : type === \"warning\" ? \"bg-yellow-500\" : \"bg-blue-500\";\n\n return (\n

\n {message}\n \n

\n );\n}\n\nfunction ThirdTimeApp() {\n const [state, setState] = useState({\n mode: \"idle\",\n workStartTime: null,\n breakStartTime: null,\n savedBreakMinutes: 0,\n breakFraction: 1 / 3,\n totalWorkTime: 0,\n totalBreakTime: 0,\n });\n\n const [currentTime, setCurrentTime] = useState(Date.now());\n const [notification, setNotification] = useState<{ message: string; type: \"success\" | \"info\" | \"warning\" } | null>(\n null,\n );\n\n // Update current time every second\n useEffect(() => {\n const interval = setInterval(() => setCurrentTime(Date.now()), 1000);\n return () => clearInterval(interval);\n }, []);\n\n const showNotification = useCallback((message: string, type: \"success\" | \"info\" | \"warning\" = \"info\") => {\n setNotification({ message, type });\n }, []);\n\n const startWork = useCallback(() => {\n const now = Date.now();\n setState(prev => ({\n ...prev,\n mode: \"working\",\n workStartTime: now,\n breakStartTime: null,\n }));\n setCurrentTime(now); // Sync current time to prevent negative calculation\n showNotification(\"Work session started! Focus time 🎯\", \"success\");\n }, [showNotification]);\n\n const takeBreak = useCallback(() => {\n if (!state.workStartTime) return;\n\n const workDuration = (Date.now() - state.workStartTime) / 1000 / 60; // minutes\n const earnedBreakTime = workDuration * state.breakFraction;\n const totalAvailableBreak = state.savedBreakMinutes + earnedBreakTime;\n\n setState(prev => ({\n ...prev,\n mode: \"breaking\",\n breakStartTime: Date.now(),\n workStartTime: null,\n savedBreakMinutes: totalAvailableBreak,\n totalWorkTime: prev.totalWorkTime + workDuration,\n }));\n\n showNotification(`Break earned! You have ${formatMinutes(totalAvailableBreak)} available 🎉`, \"success\");\n }, [state.workStartTime, state.breakFraction, state.savedBreakMinutes, showNotification]);\n\n const resumeWork = useCallback(() => {\n if (!state.breakStartTime) return;\n\n const now = Date.now();\n const breakDuration = (now - state.breakStartTime) / 1000 / 60; // minutes\n const remainingBreakTime = Math.max(0, state.savedBreakMinutes - breakDuration);\n\n setState(prev => ({\n ...prev,\n mode: \"working\",\n workStartTime: now,\n breakStartTime: null,\n savedBreakMinutes: remainingBreakTime,\n totalBreakTime: prev.totalBreakTime + Math.min(breakDuration, prev.savedBreakMinutes),\n }));\n setCurrentTime(now); // Sync current time to prevent negative calculation\n\n if (remainingBreakTime > 0) {\n showNotification(`${formatMinutes(remainingBreakTime)} break time saved for later 💾`, \"info\");\n }\n showNotification(\"Back to work! Stay focused 💪\", \"success\");\n }, [state.breakStartTime, state.savedBreakMinutes, showNotification]);\n\n const handleInterruption = useCallback(() => {\n if (state.mode === \"working\" && state.workStartTime) {\n const workDuration = (Date.now() - state.workStartTime) / 1000 / 60;\n const earnedBreakTime = workDuration * state.breakFraction;\n\n setState(prev => ({\n ...prev,\n mode: \"breaking\",\n breakStartTime: Date.now(),\n workStartTime: null,\n savedBreakMinutes: prev.savedBreakMinutes + earnedBreakTime,\n totalWorkTime: prev.totalWorkTime + workDuration,\n }));\n\n showNotification(\"Interruption break started automatically ⏸️\", \"warning\");\n }\n }, [state.mode, state.workStartTime, state.breakFraction, showNotification]);\n\n const takeBigBreak = useCallback(() => {\n if (state.mode === \"working\" && state.workStartTime) {\n const workDuration = (Date.now() - state.workStartTime) / 1000 / 60;\n setState(prev => ({\n ...prev,\n totalWorkTime: prev.totalWorkTime + workDuration,\n }));\n }\n\n setState(prev => ({\n ...prev,\n mode: \"breaking\",\n breakStartTime: Date.now(),\n workStartTime: null,\n savedBreakMinutes: 0, // Big breaks consume all saved time\n }));\n\n showNotification(\"Big break started (meal time) 🍽️\", \"info\");\n }, [state.mode, state.workStartTime, showNotification]);\n\n const resetSession = useCallback(() => {\n setState({\n mode: \"idle\",\n workStartTime: null,\n breakStartTime: null,\n savedBreakMinutes: 0,\n breakFraction: state.breakFraction,\n totalWorkTime: 0,\n totalBreakTime: 0,\n });\n showNotification(\"Session reset 🔄\", \"info\");\n }, [state.breakFraction, showNotification]);\n\n // Calculate current session time\n const getCurrentSessionTime = () => {\n if (state.mode === \"working\" && state.workStartTime) {\n return Math.max(0, Math.floor((currentTime - state.workStartTime) / 1000));\n }\n if (state.mode === \"breaking\" && state.breakStartTime) {\n return Math.max(0, Math.floor((currentTime - state.breakStartTime) / 1000));\n }\n return 0;\n };\n\n // Calculate session stats\n const getSessionStats = (): SessionStats => {\n let workTime = state.totalWorkTime;\n let breakTime = state.totalBreakTime;\n\n if (state.mode === \"working\" && state.workStartTime) {\n workTime += (currentTime - state.workStartTime) / 1000 / 60;\n }\n if (state.mode === \"breaking\" && state.breakStartTime) {\n const currentBreakTime = (currentTime - state.breakStartTime) / 1000 / 60;\n breakTime += Math.min(currentBreakTime, state.savedBreakMinutes);\n }\n\n const totalTime = workTime + breakTime;\n const efficiency = totalTime > 0 ? (workTime / totalTime) * 100 : 0;\n\n return { workTime, breakTime, efficiency };\n };\n\n const stats = getSessionStats();\n const currentSessionTime = getCurrentSessionTime();\n\n return (\n

\n {notification && (\n setNotification(null)}\n />\n )}\n\n

Third Time

Work flexibly, break proportionally

\n\n {/* Main Timer Display */}\n

\n {state.mode === \"working\" ? (\n \n

\n {formatTime(currentSessionTime)}\n

🎯 Working

\n \n ) : state.mode === \"breaking\" ? (\n 0 ? Math.min(((currentSessionTime / 60) / state.savedBreakMinutes) * 100, 100) : 0}\n size={200}\n strokeWidth={8}\n color=\"#3b82f6\"\n >\n

\n {formatTime(currentSessionTime)}\n

☕ Breaking

\n \n ) : (\n

\n {formatTime(currentSessionTime)}\n

Ready to start

\n )}\n

\n\n {state.savedBreakMinutes > 0 && (\n

\n \n

\n )}\n\n {/* Action Buttons */}\n

\n {state.mode === \"idle\" && (\n \n Start Working\n \n )}\n\n {state.mode === \"working\" && (\n

\n \n Take Break\n \n

\n \n Interruption\n \n \n Big Break\n \n

\n )}\n\n {state.mode === \"breaking\" && (\n \n Resume Work\n \n )}\n

\n\n {/* Break Fraction Settings */}\n

Break Fraction Settings

\n \n {/* Visual representation of current fraction */}\n

Current ratio: Work vs Break time

\n Work\n

\n Break\n

\n For every hour worked, earn {Math.round(state.breakFraction * 60)} minutes of break time\n

\n\n

\n {BREAK_FRACTIONS.map((fraction) => (\n setState(prev => ({ ...prev, breakFraction: fraction.value }))}\n className={`p-3 rounded-lg text-sm font-medium transition-all duration-200 ${\n state.breakFraction === fraction.value\n ? \"bg-blue-500 text-white shadow-lg transform scale-105\"\n : \"bg-gray-100 hover:bg-gray-200 text-gray-700 hover:scale-102\"\n }`}\n title={fraction.description}\n >\n

{fraction.label}

{Math.round(fraction.value * 60)}min/h

\n \n ))}\n

\n \n {BREAK_FRACTIONS.find(f => f.value === state.breakFraction)?.description}\n \n

\n\n {/* Session Stats */}\n

Session Overview

\n \n {/* Visual Progress Bars */}\n

\n \n \n

\n\n {/* Efficiency Meter */}\n

\n = 75 ? \"#10b981\" : stats.efficiency >= 60 ? \"#f59e0b\" : \"#ef4444\"}\n >\n

{Math.round(stats.efficiency)}%

Efficiency

\n \n

\n\n {/* Stats Grid */}\n

{formatMinutes(stats.workTime)}

Work Time

\n {Math.round((stats.workTime / Math.max(stats.workTime + stats.breakTime, 1)) * 100)}% of session\n

{formatMinutes(stats.breakTime)}

Break Time

\n {Math.round((stats.breakTime / Math.max(stats.workTime + stats.breakTime, 1)) * 100)}% of session\n

{formatMinutes(stats.workTime + stats.breakTime)}

Total Time

\n {Math.round((stats.workTime + stats.breakTime) / 60 * 10) / 10}h session\n

\n\n {/* Work/Break Ratio Visualization */}\n {(stats.workTime > 0 || stats.breakTime > 0) && (\n

Work/Break Ratio

\n Work: {Math.round((stats.workTime / (stats.workTime + stats.breakTime)) * 100)}%\n Break: {Math.round((stats.breakTime / (stats.workTime + stats.breakTime)) * 100)}%\n

\n )}\n

\n\n {/* Reset Button */}\n

\n \n Reset Session\n \n

\n\n {/* Help Text */}\n

How it works:

\n\n

• Work for any duration you choose
• Earn break time equal to work time ÷ fraction
• Unused break time is saved for later
• Use \"Interruption\" for non-work interruptions
• Use \"Big Break\" for meals (consumes saved time)
\n • See{\" \"}\n \n this LessWrong article\n {\" \"}\n for more info!\n

\n );\n}\n\n// Mount the app\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();","deleted","label",[173,154],"frontend","permalink","https://www.val.town/x/neverstew/thirdTimer/code/frontend/index.tsx","extension","actionData","errors"]