\n {digitMaps[digit].map((row, i) => (\n

\n {row.split('').map((char, j) => (\n \n ))}\n

\n ))}\n

\n );\n};\n\nconst PixelArrow = ({ direction }) => {\n const arrowMaps = {\n 'left': [\n ' #',\n ' ##',\n ' ###',\n '####',\n ' ###',\n ' ##',\n ' #'\n ],\n 'right': [\n '# ',\n '## ',\n '### ',\n '####',\n '### ',\n '## ',\n '# '\n ]\n };\n\n return (\n

\n {arrowMaps[direction].map((row, i) => (\n

\n {row.split('').map((char, j) => (\n \n ))}\n

\n ))}\n

\n );\n};\n\nconst PixelTimer = ({ time, isActive }) => {\n const formatTime = (totalSeconds) => {\n const hours = Math.floor(totalSeconds / 3600);\n const minutes = Math.floor((totalSeconds % 3600) / 60);\n const seconds = totalSeconds % 60;\n return [\n hours.toString().padStart(2, '0'),\n minutes.toString().padStart(2, '0'),\n seconds.toString().padStart(2, '0')\n ];\n };\n\n const [hours, minutes, seconds] = formatTime(time);\n\n return (\n

\n \n \n :\n \n \n :\n \n \n

\n );\n};\n\nfunction App() {\n const [player1Time, setPlayer1Time] = useState(14400); // Default 4 hours\n const [player2Time, setPlayer2Time] = useState(14400);\n const [activePlayer, setActivePlayer] = useState(1);\n const [isRunning, setIsRunning] = useState(false);\n const timerRef = useRef(null);\n\n useEffect(() => {\n if (isRunning) {\n timerRef.current = setInterval(() => {\n if (activePlayer === 1) {\n setPlayer1Time(prev => {\n if (prev <= 1) {\n clearInterval(timerRef.current);\n alert(\"Player 2 wins!\");\n return 0;\n }\n return prev - 1;\n });\n } else {\n setPlayer2Time(prev => {\n if (prev <= 1) {\n clearInterval(timerRef.current);\n alert(\"Player 1 wins!\");\n return 0;\n }\n return prev - 1;\n });\n }\n }, 1000);\n }\n return () => clearInterval(timerRef.current);\n }, [isRunning, activePlayer]);\n\n const pauseTimer = () => {\n setIsRunning(false);\n };\n\n const startTimer = () => {\n setIsRunning(true);\n };\n\n const switchPlayerLeft = () => {\n setActivePlayer(1);\n };\n\n const switchPlayerRight = () => {\n setActivePlayer(2);\n };\n\n const resetTimer = () => {\n clearInterval(timerRef.current);\n setPlayer1Time(14400);\n setPlayer2Time(14400);\n setActivePlayer(1);\n setIsRunning(false);\n };\n\n const handleTimeInput = (player, value) => {\n const [hours, minutes] = value.split(':').map(Number);\n const totalSeconds = (hours * 3600) + (minutes * 60);\n if (player === 1) setPlayer1Time(totalSeconds);\n if (player === 2) setPlayer2Time(totalSeconds);\n };\n\n return (\n

⏱️ Productivity Timer

\n inspired by \n @waitbutwhy\n \n

\n handleTimeInput(1, e.target.value)}\n defaultValue=\"4:00\"\n />\n handleTimeInput(2, e.target.value)}\n defaultValue=\"4:00\"\n />\n

\n \n \n

\n {!isRunning ? (\n \n ) : (\n \n )}\n \n

\n \n View Source\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n return new Response(`\n \n \n Productivity Timer\n \n \n \n

\n \n \n \n \n `, {\n headers: { \"content-type\": \"text/html\" }\n });\n}\n\nconst css = `\nbody {\n background-color: #222;\n color: #0f0;\n font-family: monospace;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n margin: 0;\n text-align: center;\n}\n\n.productivity-timer {\n background-color: #333;\n padding: 20px;\n border-radius: 10px;\n}\n\n.subtitle {\n margin-bottom: 30px; /* Increased vertical space */\n margin-top: -10px; /* Tightened space with title */\n color: #fff;\n}\n\n.subtitle a {\n color: white !important;\n text-decoration: none;\n font-weight: bold;\n}\n\n.subtitle a:hover {\n text-decoration: underline;\n}\n\n.timer-inputs {\n display: flex;\n justify-content: space-around;\n margin-bottom: 20px;\n}\n\n.timer-inputs input {\n background-color: #444;\n color: #0f0;\n border: none;\n padding: 5px;\n text-align: center;\n}\n\n.timers-container {\n display: flex;\n justify-content: space-between;\n gap: 40px; /* Added separation between timers */\n}\n\n.pixel-timer {\n background-color: #111;\n padding: 10px;\n border-radius: 5px;\n flex: 1;\n opacity: 0.5;\n transition: opacity 0.3s;\n}\n\n.pixel-timer.active {\n opacity: 1;\n box-shadow: 0 0 15px #0f0;\n}\n\n.timer-display {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.pixel-digit, .pixel-arrow {\n display: flex;\n flex-direction: column;\n margin: 0 2px;\n}\n\n.pixel-row {\n display: flex;\n}\n\n.pixel {\n width: 10px;\n height: 10px;\n margin: 1px;\n}\n\n.pixel.on {\n background-color: #0f0;\n}\n\n.pixel.off {\n background-color: #060;\n}\n\n.pixel-colon {\n color: #0f0;\n font-size: 30px;\n margin: 0 5px;\n}\n\n.player-switch-container {\n display: flex;\n justify-content: center;\n margin: 20px 0;\n gap: 20px;\n}\n\n.player-switch-left,\n.player-switch-right {\n background-color: transparent;\n border: none;\n cursor: pointer;\n transition: opacity 0.3s;\n}\n\n.player-switch-left:hover,\n.player-switch-right:hover {\n opacity: 0.7;\n}\n\n.global-controls {\n display: flex;\n justify-content: center;\n margin-top: 20px;\n}\n\n.global-controls button {\n background-color: #444;\n color: #0f0;\n border: none;\n padding: 10px 20px;\n margin: 0 10px;\n cursor: pointer;\n font-size: 16px;\n}\n`;","deleted","label",[99],"permalink","https://www.val.town/x/kaz/comicalGreenAnaconda/code/main.tsx","extension","actionData","errors"]