From 9f4af91d47ef399d6a17efcfaf925d5c9182a616 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Sat, 19 Jul 2025 13:19:51 +0000
Subject: [PATCH] Refactor Binary Number Game

Implement start button and hide target sum initially.
---
 src/components/BinaryNumberGame.tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/BinaryNumberGame.tsx b/src/components/BinaryNumberGame.tsx
index dba01f9..961b658 100644
--- a/src/components/BinaryNumberGame.tsx
+++ b/src/components/BinaryNumberGame.tsx
@@ -12,6 +12,7 @@ const BinaryNumberGame = () => {
   const [timer, setTimer] = useState<number>(0);
   const [isGameActive, setIsGameActive] = useState<boolean>(false);
   const [isGameWon, setIsGameWon] = useState<boolean>(false);
+  const [hasGameStarted, setHasGameStarted] = useState<boolean>(false);
   const [highScore, setHighScore] = useState<number | null>(null);
 
   // Load high score from localStorage on component mount
@@ -31,12 +32,13 @@ const BinaryNumberGame = () => {
     setTimer(0);
     setIsGameActive(true);
     setIsGameWon(false);
+    setHasGameStarted(true);
   }, []);
 
-  // Initialize game on mount
-  useEffect(() => {
+  // Start game for the first time
+  const startGame = () => {
     startNewGame();
-  }, [startNewGame]);
+  };
 
   // Timer effect
   useEffect(() => {
@@ -132,7 +134,9 @@ const BinaryNumberGame = () => {
         <Card className="bg-primary/10 border-primary/20">
           <CardContent className="p-6 text-center">
             <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>
         </Card>
       </div>
@@ -157,8 +161,8 @@ const BinaryNumberGame = () => {
           </div>
         )}
         
-        <Button onClick={startNewGame} size="lg" className="px-8">
-          {isGameWon ? 'Play Again' : 'New Game'}
+        <Button onClick={hasGameStarted ? startNewGame : startGame} size="lg" className="px-8">
+          {!hasGameStarted ? 'Start Game' : isGameWon ? 'Play Again' : 'New Game'}
         </Button>
       </div>
     </div>