// This productivity app will create a forest as users maintain focus. // We'll use emojis to represent trees at different growth stages. // The app will use client-side storage to persist the forest state. /** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; const GROWTH_STAGES = ['🌱', '🌿', '🌳']; const FOCUS_THRESHOLD = 25 * 60 * 1000; // 25 minutes in milliseconds function App() { const [forest, setForest] = useState([]); const [focusStartTime, setFocusStartTime] = useState(null); const [currentTree, setCurrentTree] = useState(GROWTH_STAGES[0]); const [isFocusing, setIsFocusing] = useState(false); useEffect(() => { const savedForest = localStorage.getItem('forest'); if (savedForest) { setForest(JSON.parse(savedForest)); } }, []); useEffect(() => { let interval; if (isFocusing) { interval = setInterval(() => { const elapsedTime = Date.now() - focusStartTime; const stageIndex = Math.min( Math.floor(elapsedTime / FOCUS_THRESHOLD), GROWTH_STAGES.length - 1 ); setCurrentTree(GROWTH_STAGES[stageIndex]); if (elapsedTime >= FOCUS_THRESHOLD * (GROWTH_STAGES.length - 1)) { handleStopFocus(); } }, 1000); } return () => clearInterval(interval); }, [isFocusing, focusStartTime]); const handleStartFocus = () => { setIsFocusing(true); setFocusStartTime(Date.now()); setCurrentTree(GROWTH_STAGES[0]); }; const handleStopFocus = () => { setIsFocusing(false); const newForest = [...forest, currentTree]; setForest(newForest); localStorage.setItem('forest', JSON.stringify(newForest)); setCurrentTree(GROWTH_STAGES[0]); }; return (

🌲 Focus Forest 🌲

{forest.map((tree, index) => ( {tree} ))}

{isFocusing && {currentTree}}

{!isFocusing ? ( ) : ( )}

Focus for 25 minutes to grow a tree. The longer you focus, the bigger your tree grows!

View Source

); } function client() { createRoot(document.getElementById("root")).render(); } if (typeof document !== "undefined") { client(); } async function server(request: Request): Promise { return new Response(` Focus Forest

`, { headers: { "content-type": "text/html", }, }); } const css = ` body { font-family: system-ui, sans-serif; background-color: #f0f4f8; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .container { background-color: white; padding: 2rem; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); text-align: center; } h1 { color: #2d3748; } .forest { font-size: 2rem; margin: 1rem 0; min-height: 3rem; } .current-tree { font-size: 3rem; margin: 1rem 0; min-height: 4.5rem; } .tree { margin: 0 0.25rem; } .controls { margin: 1rem 0; } button { background-color: #4a5568; color: white; border: none; padding: 0.5rem 1rem; font-size: 1rem; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; } button:hover { background-color: #2d3748; } .info { font-size: 0.9rem; color: #4a5568; margin-top: 1rem; } a { color: #4a5568; text-decoration: none; font-size: 0.8rem; } a:hover { text-decoration: underline; } `; export default server;

focusForestApp

Versions

v0