Styling the game-status message

etnt · Oct 11, 2024 · 123772a · 123772a
1 parent 8d94584
commit 123772a
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git a/client/src/App.css b/client/src/App.css
@@ -166,6 +166,7 @@
 
 .welcome-message {
   font-size: 1.5em;
+  padding-left: 200px;
   margin: 0;
   margin-right: 20px;
   /* Add some space between the message and the button */
@@ -187,6 +188,11 @@
   /* Darker red on hover */
 }
 
+.game-status { 
+  font-size: 1.1em;
+  padding-left: 40px;
+}
+
 .challenge-user {
   font-size: 16px;
   font-weight: bold;

diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -158,6 +158,12 @@ const App: React.FC = () => {
           <div className="welcome-container">
             <h2 className="welcome-message">Welcome {user.username}!</h2>
             <button className="logout-button" onClick={handleLogout}>Logout</button>
+            <div className="game-status">
+              {gameStatus === 'active' && <p></p>}
+              {gameStatus === 'resigned' && <p>White resigned. Black wins!</p>}
+              {gameStatus === 'checkmate' && <p>Checkmate! {game.turn() === 'w' ? 'Black' : 'White'} wins!</p>}
+              {gameStatus === 'draw' && <p>Game ended in a draw</p>}
+          </div>
           </div>
           <div className="game-container">
             <div className="side-controls">
@@ -214,12 +220,6 @@ const App: React.FC = () => {
                 />
               </div>
             </div>
-            <div className="game-status">
-              {gameStatus === 'active' && <p>Game in progress</p>}
-              {gameStatus === 'resigned' && <p>White resigned. Black wins!</p>}
-              {gameStatus === 'checkmate' && <p>Checkmate! {game.turn() === 'w' ? 'Black' : 'White'} wins!</p>}
-              {gameStatus === 'draw' && <p>Game ended in a draw</p>}
-            </div>
             {opponent !== 'stockfish' && (
               <div className="online-players">
                 <h3>Online Players</h3>