Differentiate the turn of the current play through gray or white colo…

…r text(visually) (#15)
SusheelThapa · Oct 27, 2024 · 0e22d4e · 0e22d4e
1 parent 6dfb59b
commit 0e22d4e
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 6 deletions.
diff --git a/src/components/Score.tsx b/src/components/Score.tsx
@@ -1,4 +1,5 @@
 interface Props {
+  isPlayerOneTurn: boolean;
   playerOneName: string;
   playerTwoName: string;
   playerOneWins: number;
@@ -10,6 +11,7 @@ interface Props {
  * Score component that displays the score for Player One, Player Two (or Computer), and the number of ties.
  *
  * @component
+ * @param {boolean} isPlayerOneTurn - Whether Player One turns is or not.
  * @param {string} playerOneName - The name of Player One.
  * @param {string} playerTwoName - The name of Player Two or Computer.
  * @param {number} playerOneWins - The number of games won by Player One.
@@ -18,6 +20,7 @@ interface Props {
  * @returns {JSX.Element} - Returns the rendered score display component.
  */
 const Score = ({
+  isPlayerOneTurn,
   playerOneName,
   playerTwoName,
   playerOneWins,
@@ -28,10 +31,15 @@ const Score = ({
     <div className="w-full text-lg tracking-wider flex flex-col sm:flex-row justify-center items-center">
       <div
         id="game-score"
-        className="flex flex-col sm:flex-row justify-center items-center gap-4 sm:gap-20 w-full sm:w-8/12 lg:w-6/12"
+        className="flex flex-col sm:flex-row justify-center items-center gap-4 sm:gap-20 w-full sm:w-8/12 lg:w-6/12 text-gray-400"
       >
         {/* Player One Score */}
-        <div className="text-center" id="player-one-won-score">
+        <div
+          className={`text-center ${
+            isPlayerOneTurn ? "text-white font-semibold" : ""
+          }`}
+          id="player-one-won-score"
+        >
           <div>{playerOneName.toUpperCase()}(X)</div>
           <div className="text-3xl sm:text-5xl">{playerOneWins}</div>
         </div>
@@ -43,7 +51,12 @@ const Score = ({
         </div>
 
         {/* Player Two or Computer Score */}
-        <div className="text-center" id="player-two-won-score">
+        <div
+          className={`text-center ${
+            !isPlayerOneTurn ? "text-white font-semibold" : ""
+          }`}
+          id="player-two-won-score"
+        >
           <div>{playerTwoName.toUpperCase()}(O)</div>
           <div className="text-3xl sm:text-5xl">{playerTwoWins}</div>
         </div>

diff --git a/src/hooks/useTicTacToe.ts b/src/hooks/useTicTacToe.ts
@@ -40,7 +40,7 @@ export const useTicTacToe = (
     if (!isTwoPlayerMode && !isPlayerOneTurn && !gameOver) {
       const computerIndex = computerMove(board);
       if (computerIndex !== -1) {
-        setTimeout(() => handleCellClick(computerIndex), 500);
+        setTimeout(() => handleCellClick(computerIndex), 1000);
       }
     }
   }, [isPlayerOneTurn, gameOver, board, isTwoPlayerMode]);
@@ -101,5 +101,6 @@ export const useTicTacToe = (
     ties,
     resetGame,
     handleCellClick,
+    isPlayerOneTurn,
   };
 };
diff --git a/src/pages/Game.tsx b/src/pages/Game.tsx
@@ -10,13 +10,13 @@ import { playComputerMove } from "../utils/playComputerMove";
 /**
  * Game component that renders the Tic-Tac-Toe game UI and manages game state.
  * It supports both two-player mode and single-player mode against the computer.
- * 
+ *
  * @component
  */
 const Game = () => {
   const location = useLocation();
   const searchParams = new URLSearchParams(location.search);
-  
+
   // Determines if it's two-player mode based on the query parameter "mode"
   const isTwoPlayerMode = searchParams.get("mode") === "two-player";
 
@@ -39,6 +39,7 @@ const Game = () => {
     ties,
     resetGame,
     handleCellClick,
+    isPlayerOneTurn,
   } = useTicTacToe(false, isTwoPlayerMode, playComputerMove); // Pass game mode to the hook
 
   // Save player names to localStorage on mount
@@ -56,6 +57,7 @@ const Game = () => {
           animationTriggers={animationTriggers}
         />
         <Score
+          isPlayerOneTurn={isPlayerOneTurn}
           playerOneName={playerOneName}
           playerTwoName={playerTwoName}
           playerOneWins={playerOneWins}