import React from "https://esm.sh/react@19"; import ReactDOMClient from "https://esm.sh/react-dom@19/client"; function App() { const [hunger, setHunger] = React.useState(0); // 0 is full, 100 is starving const [happiness, setHappiness] = React.useState(50); // 0 unhappy, 100 happy const [energy, setEnergy] = React.useState(70); // 0 exhausted, 100 full of energy const [lastUpdate, setLastUpdate] = React.useState(Date.now()); const [statusMessage, setStatusMessage] = React.useState("Tamagocchi is happy and well-fed!"); // Game loop effect React.useEffect(() => { const updateState = () => { const now = Date.now(); const timeElapsed = now - lastUpdate; // milliseconds setLastUpdate(now); const hungerIncrease = Math.floor(timeElapsed / (1000 * 60 * 5)); // Increase hunger every 5 minutes const happinessDecrease = Math.floor(timeElapsed / (1000 * 60 * 10)); // Decrease happiness every 10 minutes const energyDecrease = Math.floor(timeElapsed / (1000 * 60 * 15)); // Decrease energy every 15 minutes setHunger((prev) => Math.min(100, prev + hungerIncrease)); setHappiness((prev) => Math.max(0, prev - happinessDecrease)); setEnergy((prev) => Math.max(0, prev - energyDecrease)); }; const gameInterval = setInterval(updateState, 1000 * 30); // Update game state every 30 seconds // Initial state update and message based on state if (hunger > 80 || happiness < 20 || energy < 20) { if (hunger > 80) setStatusMessage("Tamagocchi is very hungry! Feed them!"); else if (happiness < 20) setStatusMessage("Tamagocchi is unhappy. Play with them!"); else setStatusMessage("Tamagocchi is tired! Let them rest."); } else { setStatusMessage("Tamagocchi is happy and well-fed!"); } return () => clearInterval(gameInterval); }, [hunger, happiness, energy, lastUpdate, statusMessage]); // Re-run effect when stats change const handleFeed = () => { setHunger((prev) => Math.max(0, prev - 25)); // Feed reduces hunger by 25 setHappiness((prev) => Math.min(100, prev + 5)); // Slightly increases happiness setStatusMessage("You fed your Tamagocchi!"); }; const handlePlay = () => { setHappiness((prev) => Math.min(100, prev + 20)); // Playing increases happiness by 20 setHunger((prev) => Math.min(100, prev + 10)); // Playing slightly increases hunger setEnergy((prev) => Math.max(0, prev - 10)); // Playing uses energy setStatusMessage("You played with your Tamagocchi!"); }; const handleRest = () => { setEnergy((prev) => Math.min(100, prev + 30)); // Resting increases energy by 30 setHunger((prev) => Math.min(100, prev + 5)); // Resting slightly increases hunger setStatusMessage("Your Tamagocchi is resting."); }; // Progress bar component const ProgressBar = ({ value, color }) => { const clampedValue = Math.max(0, Math.min(100, value)); return (

); }; return (

Tamagocchi

{/* Dummy character representation */} {hunger > 80 || happiness < 20 || energy < 20 ? "🥺" : "😊"}

Hunger: {hunger}/100

Happiness: {happiness}/100

Energy: {energy}/100

{statusMessage}

); } ReactDOMClient.createRoot(document.getElementById('root')).render();