Tell us what’s happening:
App works as intended but these tests still fail:
4. When the input is given a value and the button is pressed, the form should no longer be visible.
6. The second view should contain the provided pet name.
7. The second view should contain three buttons.
24. The Hunger stat should be 100 after an excessive period of idle time.
26. The Happiness stat should be 0 after an excessive period of idle time.
Your code so far
<!-- file: index.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Digital Pet Game</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Tektur:wght@400..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.development.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.development.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.26.5/babel.min.js"></script>
<script
data-plugins="transform-modules-umd"
type="text/babel"
src="index.tsx"
></script>
</head>
<body>
<div id="root"></div>
<script
data-plugins="transform-modules-umd"
type="text/babel"
data-presets="react"
data-type="module"
>
import { PetGame } from './index.tsx';
ReactDOM.createRoot(document.getElementById('root')).render(<PetGame />);
</script>
</body>
</html>
/* file: index.tsx */
const { useState, useEffect } = React;
export enum PetAction {
EAT,
PLAY,
SLEEP
}
export enum PetMood {
HAPPY,
EXCITED,
CONTENT,
SAD,
TIRED,
SICK,
HUNGRY
}
const moodEmojis: Record<PetMood, string> = {
[PetMood.HAPPY]: '😺',
[PetMood.EXCITED]: '🤩',
[PetMood.CONTENT]: '🐱',
[PetMood.SAD]: '😿',
[PetMood.TIRED]: '😴',
[PetMood.SICK]: '🤒',
[PetMood.HUNGRY]: '🦁'
};
const moodDisplayNames: Record<PetMood, string> = {
[PetMood.HAPPY]: 'Happy',
[PetMood.EXCITED]: 'Excited',
[PetMood.CONTENT]: 'Content',
[PetMood.SAD]: 'Sad',
[PetMood.TIRED]: 'Tired',
[PetMood.SICK]: 'Sick',
[PetMood.HUNGRY]: 'Hungry'
};
export const PetGame: React.FC = () => {
const [petName, setPetName] = useState<string>('');
const [isGameStarted, setIsGameStarted] = useState<boolean>(false);
const [inputValue, setInputValue] = useState<string>('');
const [hunger, setHunger] = useState<number>(0);
const [energy, setEnergy] = useState<number>(100);
const [happiness, setHappiness] = useState<number>(100);
useEffect(() => {
if (!isGameStarted) return;
const timer = setInterval(() => {
setHunger((prev) => Math.min(100, prev + 5));
setEnergy((prev) => Math.min(100, prev + 5));
setHappiness((prev) => Math.max(0, prev - 5));
}, 1000);
return () => clearInterval(timer);
}, [isGameStarted]);
const getPetMood = (): 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 currentMood = getPetMood();
const handleStartGame = (e: React.FormEvent) => {
e.preventDefault();
if (!inputValue.trim()) return;
setPetName(inputValue);
setIsGameStarted(true);
};
const handleAction = (action: PetAction) => {
switch (action) {
case PetAction.EAT:
if (hunger === 0 && energy === 100) return;
setHunger((prev) => (prev === 0 ? 0 : Math.max(0, prev - 10)));
setEnergy((prev) => (prev === 100 ? 100 : Math.min(100, prev + 10)));
break;
case PetAction.PLAY:
if (energy === 0 && happiness === 100) return;
setEnergy((prev) => (prev === 0 ? 0 : Math.max(0, prev - 10)));
setHappiness((prev) => (prev === 100 ? 100 : Math.min(100, prev + 10)));
break;
case PetAction.SLEEP:
if (hunger === 100 && energy === 100) return;
setHunger((prev) => (prev === 100 ? 100 : Math.min(100, prev + 10)));
setEnergy((prev) => (prev === 100 ? 100 : Math.min(100, prev + 10)));
break;
}
};
return (
<div id="game-container">
<form
id="name-form"
onSubmit={handleStartGame}
style={{ display: isGameStarted ? 'none' : 'block' }}
>
<h1>Name Your Pet</h1>
<input
type="text"
id="pet-name"
placeholder="Enter pet name..."
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
required
/>
<button type="submit">Start Game</button>
</form>
<div
id="view-two"
style={{ display: isGameStarted ? 'block' : 'none' }}
>
<h2 className="pet-name">{petName}</h2>
<div id="pet-avatar">{moodEmojis[currentMood]}</div>
<div id="mood-display">{moodDisplayNames[currentMood]}</div>
<div className="stats-container">
<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>
<div className="actions-container">
<button id="eat-action" onClick={() => handleAction(PetAction.EAT)}>
Eat
</button>
<button id="play-action" onClick={() => handleAction(PetAction.PLAY)}>
Play
</button>
<button id="sleep-action" onClick={() => handleAction(PetAction.SLEEP)}>
Sleep
</button>
</div>
</div>
</div>
);
};
export default PetGame;
/* file: styles.css */
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/151.0.0.0 Safari/537.36
Challenge Information:
Build a Digital Pet Game - Build a Digital Pet Game