Tell us what’s happening:
I’m stuck on test #4
Before submit: the form is rendered.
After submit: setHasStarted(true) is called and the game view is rendered.
Your code so far
<!-- file: index.html -->
/* file: styles.css */
/* file: index.tsx */
const { useState, useEffect } = React;
enum Action {
EAT = "EAT",
PLAY = "PLAY",
SLEEP = "SLEEP",
}
export enum PetMood {
HAPPY = "Happy",
EXCITED = "Excited",
CONTENT = "Content",
SAD = "Sad",
TIRED = "Tired",
SICK = "Sick",
HUNGRY = "Hungry",
}
const petMoodEmoji: Record<PetMood, string> = {
[PetMood.HAPPY]: "😊",
[PetMood.EXCITED]: "🤩",
[PetMood.CONTENT]: "😌",
[PetMood.SAD]: "😢",
[PetMood.TIRED]: "😴",
[PetMood.SICK]: "🤒",
[PetMood.HUNGRY]: "🍖",
};
export const PetGame = () => {
const [petName, setPetName] = useState("");
const [hasStarted, setHasStarted] = useState(false);
const [hunger, setHunger] = useState(0);
const [energy, setEnergy] = useState(100);
const [happiness, setHappiness] = useState(100);
const getPetMood = (): PetMood => {
if (hunger > 90 && energy < 20) {
return PetMood.SICK;
}
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 handleEat = () => {
setHunger((prev) => (prev > 0 ? prev - 10 : prev));
setEnergy((prev) => (prev < 100 ? prev + 10 : prev));
};
const handlePlay = () => {
setEnergy((prev) => (prev > 0 ? prev - 10 : prev));
setHappiness((prev) => (prev < 100 ? prev + 10 : prev));
};
const handleSleep = () => {
setHunger((prev) => (prev < 100 ? prev + 10 : prev));
setEnergy((prev) => (prev < 100 ? prev + 10 : prev));
};
const handleAction = (action: Action) => {
switch (action) {
case Action.EAT:
handleEat();
break;
case Action.PLAY:
handlePlay();
break;
case Action.SLEEP:
handleSleep();
break;
}
};
const currentMood = getPetMood();
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
if (!petName.trim()) return;
setHasStarted(true);
};
useEffect(() => {
if (!hasStarted) return;
const timer = setInterval(() => {
setHunger((prev) => Math.min(prev + 10, 100));
setEnergy((prev) => Math.min(prev + 10, 100));
setHappiness((prev) => Math.max(prev - 10, 0));
}, 1000);
return () => clearInterval(timer);
}, [hasStarted]);
return (
<main>
{!hasStarted && (
<form className="base-container" id="pet-form" onSubmit={handleSubmit}>
<label htmlFor="pet-name">What is your pet's name?</label>
<input
id="pet-name"
name="pet-name"
type="text"
value={petName}
onChange={(e) => setPetName(e.target.value)}
/>
<button type="submit" id="start-game">
Start Game
</button>
</form>
)}
{hasStarted && (
<section className="game-container">
<div className="pet-mood">
{petMoodEmoji[currentMood]}
<p className="mood-text">{currentMood}</p>
</div>
<h2 className="pet-name">{petName}</h2>
<div className="pet-buttons">
<button
type="button"
className="pet-button"
id="eat-action"
onClick={() => handleAction(Action.EAT)}
>
EAT
</button>
<button
type="button"
className="pet-button"
id="play-action"
onClick={() => handleAction(Action.PLAY)}
>
PLAY
</button>
<button
type="button"
className="pet-button"
id="sleep-action"
onClick={() => handleAction(Action.SLEEP)}
>
SLEEP
</button>
</div>
<div className="stats-grid">
<div className="stat">
Hunger
<span className="stat-value">{hunger}</span>
</div>
<div className="stat">
Energy
<span className="stat-value">{energy}</span>
</div>
<div className="stat">
Happiness
<span className="stat-value">{happiness}</span>
</div>
</div>
</section>
)}
</main>
);
};
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/149.0.0.0 Safari/537.36
Challenge Information:
Build a Digital Pet Game - Build a Digital Pet Game