\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();",[],[179,237],"833b6d9c-3a7e-11f0-99f5-9e149126039e","index.html","9decbeb0-4450-4f2d-a912-f72b633f00eb",["D",1748297549008],"\n\n \n \n \n Third Time - Productivity Timer\n \n \n \n \n \n

\n \n \n",[],[179,245],["D",1748297549008],[200,201,202],[179],"833b62a2-3a7e-11f0-99f5-9e149126039e","index.ts",["D",1748297549008],"http","import { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Serve the main app\napp.get(\"/\", async c => {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\n// Health check endpoint\napp.get(\"/health\", c => {\n return c.json({ status: \"ok\", timestamp: new Date().toISOString() });\n});\n\nexport default app.fetch;",[],[184,255],["D",1748297549008],[198],[184],["D",1748297549008],{"_11":12,"_36":105},{"_11":12,"_57":-5,"_59":105,"_41":68,"_61":62,"_63":20},{"_90":91,"_13":92,"_27":93,"_94":64,"_95":96,"_97":98,"_99":32,"_100":28,"_101":102,"_103":14,"_104":12},"ctx",{"_33":-5,"_129":301,"_302":303,"_304":305,"_306":20,"_307":20,"_308":20,"_309":52,"_310":-5,"_311":-7,"_312":-7,"_313":22,"_314":20,"_315":20,"_316":-5,"_317":20,"_318":20,"_319":20,"_320":-5},"ENV",{"_272":273,"_274":275,"_276":92,"_277":278,"_279":280,"_281":282,"_283":284,"_285":286,"_287":288,"_289":290,"_291":292,"_293":294,"_295":296,"_297":298,"_299":300},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Remixes1

Remixes
1