I dont konw what’s probleme !
the probleme display in enum PetMood ?
but it should work
<!-- file: index.html -->
/* file: index.tsx */
/* file: styles.css */
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/153.0.0.0 Safari/537.36
Build a Digital Pet Game - Build a Digital Pet Game
Your code was too long to be automatically inserted by the help button.
Please update the message, or reply to this one, to include your code, formatted as follows:
There are two ways you can format your code to make it easier to read and test:
</>) button in the toolbar to automatically wrap your code in backticks. (You can click on the animated demo image below to enlarge it.)To see changes to your post as you make them, you can click the (M+) button on the toolbar to bring up the rich text editor:
const { useState, useEffect, useRef } = React;
enum PetMood {
HAPPY="HAPPY",
EXCITED = 'EXCITED',
CONTENT = 'CONTENT',
SAD = 'SAD',
TIRED = 'TIRED',
SICK = 'SICK',
HUNGRY = 'HUNGRY',
}
export enum PetAction {
EAT = 'EAT',
PLAY = 'PLAY',
SLEEP = 'SLEEP',
}
function getMood(hunger: number, energy: number, happiness: number): PetMood {
if (hunger > 70) return PetMood.HUNGRY;
if (energy < 30) return PetMood.TIRED;
if (happiness < 30) return PetMood.SAD;
if (happiness > 80 && energy > 70) return PetMood.EXCITED;
if (happiness > 60) return PetMood.HAPPY;
return PetMood.CONTENT;
}
const moodEmojis: Record<PetMood, string> = {
[PetMood.HAPPY]: '😊',
[PetMood.EXCITED]: '🤩',
[PetMood.CONTENT]: '😌',
[PetMood.SAD]: '😢',
[PetMood.TIRED]: '😴',
[PetMood.SICK]: '🤒',
[PetMood.HUNGRY]: '🍽️',
};
const clamp = (value: number, min = 0, max = 100) =>
Math.max(min, Math.min(max, value));
// Idle decay: adjust to taste
const TICK_MS = 15000;
const TICK_AMOUNT = 4;
export const PetGame = () => {
const [namePet, setNamePet] = useState('');
const [start, setStart] = useState(true);
const [hunger, setHunger] = useState(0);
const [energy, setEnergy] = useState(100);
const [happiness, setHappiness] = useState(100);
const nameRef = useRef<HTMLInputElement>(null);
function createGame(e: React.FormEvent<HTMLFormElement>) {
e.preventDefault();
const value = (nameRef.current?.value ?? '').trim();
if (value === '') return;
setNamePet(value);
setStart(false);
}
function handleAction(action: PetAction) {
switch (action) {
case PetAction.EAT:
setHunger(prev => clamp(prev - 10));
setEnergy(prev => clamp(prev + 5));
break;
case PetAction.PLAY:
setEnergy(prev => clamp(prev - 5));
setHappiness(prev => clamp(prev + 5));
break;
case PetAction.SLEEP:
setHunger(prev => clamp(prev + 10));
setEnergy(prev => clamp(prev + 5));
break;
}
}
// Only decay once the game has started
useEffect(() => {
if (start) return;
const interval = setInterval(() => {
setHunger(prev => clamp(prev + TICK_AMOUNT));
setHappiness(prev => clamp(prev - TICK_AMOUNT));
}, TICK_MS);
return () => clearInterval(interval);
}, [start]);
const currentMood = getMood(hunger, energy, happiness);
const fillClass = (value: number, inverted = false) => {
const v = inverted ? 100 - value : value;
return v < 35 ? 'low' : v < 65 ? 'medium' : 'high';
};
return (
<main>
<header>
<h1>Digital Pet Game</h1>
<p>Take care of your virtual companion!</p>
</header>
{start ? (
<section className="base-container info-panel">
<form className="start-questions" onSubmit={createGame}>
<label htmlFor="pet-name">What is your pet's name?</label>
<input type="text" id="pet-name" ref={nameRef} required />
<button id="set-name-btn" type="submit">Start Game</button>
</form>
</section>
) : (
<>
<section className="base-container game-container">
<div className="pet-screen">
<div className="pet-sprite">{moodEmojis[currentMood]}</div>
<h2 className="pet-name">{namePet}</h2>
</div>
<div className="pet-buttons">
<button className="pet-button pet-buttons-left" id="eat-action"
onClick={() => handleAction(PetAction.EAT)}>EAT</button>
<button className="pet-button pet-buttons-center" id="play-action"
onClick={() => handleAction(PetAction.PLAY)}>PLAY</button>
<button className="pet-button pet-buttons-right" id="sleep-action"
onClick={() => handleAction(PetAction.SLEEP)}>SLEEP</button>
</div>
</section>
<section className="stats-grid">
<div className="stat-bar stat">
<div className="stat-header">
<div className="stat-label">
<span className="stat-icon">🍽️</span>
<span className="stat-name">Hunger</span>
</div>
<span className="stat-value">{hunger}</span>
</div>
<div className="stat-progress">
<div className={`stat-fill ${fillClass(hunger, true)}`} style={{ width: `${hunger}%` }}></div>
</div>
</div>
<div className="stat-bar stat">
<div className="stat-header">
<div className="stat-label">
<span className="stat-icon">😊</span>
<span className="stat-name">Happiness</span>
</div>
<span className="stat-value">{happiness}</span>
</div>
<div className="stat-progress">
<div className={`stat-fill ${fillClass(happiness)}`} style={{ width: `${happiness}%` }}></div>
</div>
</div>
<div className="stat-bar stat">
<div className="stat-header">
<div className="stat-label">
<span className="stat-icon">⚡</span>
<span className="stat-name">Energy</span>
</div>
<span className="stat-value">{energy}</span>
</div>
<div className="stat-progress">
<div className={`stat-fill ${fillClass(energy)}`} style={{ width: `${energy}%` }}></div>
</div>
</div>
</section>
<section className="base-container info-panel">
<div id="hud">
<p id="pet-species">Species: Cat</p>
<p id="pet-fact"><b>Pet Fact:</b> Cats sleep 12 to 16 hours a day</p>
</div>
</section>
</>
)}
</main>
);
};
this is latest code