Tell us what’s happening:
I feel like I’ve done everything right in the final certification project in Front End Development Libraries section, for some reason I just can’t get the test case with enum PetMood to work, i.e., test cases 31-37, I can’t really move on to get the certification unless I finish this, any help would be appreciated.
Your code so far
const { useState, useEffect } = React;
export 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'
}
export const moodEmojis: Record<PetMood, string> = {
[PetMood.HAPPY]: '😺',
[PetMood.EXCITED]: '😻',
[PetMood.CONTENT]: '😸',
[PetMood.SAD]: '😿',
[PetMood.TIRED]: '😽',
[PetMood.SICK]: '😾',
[PetMood.HUNGRY]: '🙀'
};
export const PetGame = () => {
const [name, setName] = useState("");
const [isSubmitted, setIsSubmitted] = useState(false);
const [hunger, setHunger] = useState(0);
const [happiness, setHappiness] = useState(100);
const [energy, setEnergy] = useState(100);
useEffect(() => {
if (!isSubmitted) return;
const timer = setInterval(() => {
setHunger(prevHunger => clamp(prevHunger + 5));
setHappiness(prevHappiness => clamp(prevHappiness - 5));
}, 10000);
return () => clearInterval(timer);
}, [isSubmitted]);
const clamp = (val: number) => Math.max(0, Math.min(100, val));
const getProgressClass = (value: number, reverse: boolean = false) => {
if (!reverse) {
if (value > 70) return "high";
if (value > 30) return "medium";
return "low";
} else {
if (value > 70) return "low";
if (value > 30) return "medium";
return "high";
}
};
const getCurrentMood = (): 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;
};
return (
<>
<header>
<h1>Digital Pet Game</h1>
<p>Take care of your virtual companion!</p>
</header>
{isSubmitted ? (
<div className="game-container">
<main className="base-container" style={{ marginBottom: '1.5rem' }}>
<div className="pet-sprite">{moodEmojis[getCurrentMood()]}</div>
<h2 className="pet-name">{name}</h2>
<div className="pet-buttons">
<button id="eat-action" className="pet-button" onClick={() => {
setHunger(prevHunger => clamp(prevHunger - 10));
setEnergy(prevEnergy => clamp(prevEnergy + 5));
}}>{Action.Eat}</button>
<button id="play-action" className="pet-button" onClick={() => {
setEnergy(prevEnergy => clamp(prevEnergy - 5));
setHappiness(prevHappiness => clamp(prevHappiness + 5));
}}>{Action.Play}</button>
<button id="sleep-action" className="pet-button" onClick={() => {
setHunger(prevHunger => clamp(prevHunger + 10));
setEnergy(prevEnergy => clamp(prevEnergy + 5));
}}>{Action.Sleep}</button>
</div>
</main>
<div 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 ${getProgressClass(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 ${getProgressClass(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 ${getProgressClass(energy)}`} style={{ width: `${energy}%` }}></div>
</div>
</div>
</div>
<div className="base-container info-panel">
<p>Species: Cat</p>
<p id="pet-fact">
<strong>Pet Fact:</strong> One of Muhammad's companions was nicknamed Abu Hurairah, or Father of the Kitten, because he loved cats
</p>
</div>
</div>
) : (
<main className="base-container">
<div className="info-panel">
<form className="start-questions" onSubmit={(event) => {
event.preventDefault();
const inputEl = document.getElementById("pet-name") as HTMLInputElement;
if (inputEl) {
setName(inputEl.value);
}
setIsSubmitted(true);
}}>
<label htmlFor="pet-name">What is your pet's name?</label>
<input
type="text"
id="pet-name"
name="pet-name"
required
/>
<button type="submit" id="set-name-btn">
Start Game
</button>
</form>
</div>
</main>
)}
</>
);
};
Lesson URL (copy - paste from your browser’s address bar): https://www.freecodecamp.org/learn/front-end-development-libraries-v9/lab-digital-pet-game/lab-digital-pet-game