/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useEffect } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; function RunningGame() { const [targetDistance, setTargetDistance] = useState(Math.floor(Math.random() * 5) + 1); // 1-5 km const [currentDistance, setCurrentDistance] = useState(0); const [message, setMessage] = useState('Start running! Reach your target distance.'); const [isGameOver, setIsGameOver] = useState(false); const [runCount, setRunCount] = useState(0); const handleRun = () => { const runDistance = Math.random() * 0.5; // Random run between 0-0.5 km const newDistance = Math.min(currentDistance + runDistance, targetDistance); setCurrentDistance(newDistance); setRunCount(runCount + 1); if (newDistance >= targetDistance) { setMessage(`🏆 Congratulations! You reached ${targetDistance.toFixed(2)} km in ${runCount + 1} runs!`); setIsGameOver(true); } else { setMessage(`You've run ${newDistance.toFixed(2)} km. Keep going! Target: ${targetDistance.toFixed(2)} km`); } }; const resetGame = () => { setTargetDistance(Math.floor(Math.random() * 5) + 1); setCurrentDistance(0); setMessage('Start running! Reach your target distance.'); setIsGameOver(false); setRunCount(0); }; return (

🏃‍♂️ Running Challenge

{message}

Target: {targetDistance.toFixed(2)} km

Current: {currentDistance.toFixed(2)} km

Runs: {runCount}

View Source

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

`, { headers: { "content-type": "text/html", }, }); }

responsiveMagentaBear