From e6f60d6cbfb621e76c266c202e7448437ab7a8d7 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Mon, 21 Jul 2025 10:04:29 +0000
Subject: [PATCH] Hide first player and simplify background.

Hide the first player information before the game starts in the Northcott's game interactive. Also, simplify the background.
---
 src/components/NorthcottsGame.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/NorthcottsGame.tsx b/src/components/NorthcottsGame.tsx
index 583ddc2..eba81d2 100644
--- a/src/components/NorthcottsGame.tsx
+++ b/src/components/NorthcottsGame.tsx
@@ -307,8 +307,8 @@ const NorthcottsGame: React.FC<NorthcottsGameProps> = ({ showSocialShare = false
   };
 
   const currentPlayerColor = gameState.currentPlayer === 'L' ? 'blue' : 'red';
-  const bgClass = gameState.currentPlayer === 'L' ? 'bg-blue-50' : 'bg-red-50';
-  const borderClass = gameState.currentPlayer === 'L' ? 'border-blue-600' : 'border-red-900';
+  const bgClass = gameState.gameStarted ? (gameState.currentPlayer === 'L' ? 'bg-blue-50' : 'bg-red-50') : 'bg-background';
+  const borderClass = gameState.gameStarted ? (gameState.currentPlayer === 'L' ? 'border-blue-600' : 'border-red-900') : 'border-border';
 
   return (
     <div className="space-y-6">
@@ -398,7 +398,7 @@ const NorthcottsGame: React.FC<NorthcottsGameProps> = ({ showSocialShare = false
                   {gameState.misereMode ? 'Last to move loses (Misère)' : 'Last to move wins (Normal)'}
                 </p>
               </div>
-            ) : (
+            ) : gameState.gameStarted ? (
               <div className="space-y-2">
                 <Badge variant="secondary" className="text-lg py-1 px-4">
                   Current Player: {gameState.currentPlayer} ({gameState.currentPlayer === 'L' ? 'Blue' : 'Red'})
@@ -407,6 +407,12 @@ const NorthcottsGame: React.FC<NorthcottsGameProps> = ({ showSocialShare = false
                   {gameState.misereMode ? 'Misère Mode: Last to move loses' : 'Normal Mode: Last to move wins'}
                 </p>
               </div>
+            ) : (
+              <div className="space-y-2">
+                <p className="text-sm text-muted-foreground">
+                  {gameState.misereMode ? 'Misère Mode: Last to move loses' : 'Normal Mode: Last to move wins'}
+                </p>
+              </div>
             )}
           </div>