Websites/interactives
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor Binary Number Game

Browse source 
Implement start button and hide target sum initially.
This commit is contained in:
gpt-engineer-app[bot] 2025-07-19 13:19:51 +00:00
parent 435f7a3d43
commit 9f4af91d47
1 changed files with 10 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/components/BinaryNumberGame.tsx
View file

@ -12,6 +12,7 @@ const BinaryNumberGame = () => {
const [timer, setTimer] = useState<number>(0); const [timer, setTimer] = useState<number>(0);
const [isGameActive, setIsGameActive] = useState<boolean>(false); const [isGameActive, setIsGameActive] = useState<boolean>(false);
const [isGameWon, setIsGameWon] = useState<boolean>(false); const [isGameWon, setIsGameWon] = useState<boolean>(false);
const [hasGameStarted, setHasGameStarted] = useState<boolean>(false);
const [highScore, setHighScore] = useState<number | null>(null); const [highScore, setHighScore] = useState<number | null>(null);
// Load high score from localStorage on component mount // Load high score from localStorage on component mount
@ -31,12 +32,13 @@ const BinaryNumberGame = () => {
setTimer(0); setTimer(0);
setIsGameActive(true); setIsGameActive(true);
setIsGameWon(false); setIsGameWon(false);
setHasGameStarted(true);
}, []); }, []);
// Initialize game on mount // Start game for the first time
useEffect(() => { const startGame = () => {
startNewGame(); startNewGame();
}, [startNewGame]); };
// Timer effect // Timer effect
useEffect(() => { useEffect(() => {
@ -132,7 +134,9 @@ const BinaryNumberGame = () => {
<Card className="bg-primary/10 border-primary/20"> <Card className="bg-primary/10 border-primary/20">
<CardContent className="p-6 text-center"> <CardContent className="p-6 text-center">
<h3 className="text-lg font-semibold text-muted-foreground mb-2">Target Sum</h3> <h3 className="text-lg font-semibold text-muted-foreground mb-2">Target Sum</h3>
<div className="text-4xl font-bold text-primary">{targetNumber}</div> <div className="text-4xl font-bold text-primary">
{hasGameStarted ? targetNumber : "🎯"}
</div>
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
@ -157,8 +161,8 @@ const BinaryNumberGame = () => {
</div> </div>
)} )}
<Button onClick={startNewGame} size="lg" className="px-8"> <Button onClick={hasGameStarted ? startNewGame : startGame} size="lg" className="px-8">
{isGameWon ? 'Play Again' : 'New Game'} {!hasGameStarted ? 'Start Game' : isGameWon ? 'Play Again' : 'New Game'}
</Button> </Button>
</div> </div>
</div> </div>