Added Winning Squares Highlighting in in Tic-Tac-Toe Game

Project-11-Tic-Tac-Toe/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "i": "^0.3.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

Project-11-Tic-Tac-Toe/src/App.jsx

@@ -42,6 +42,7 @@ function deriveGameBoard(gameTurns) {
 
 function deriveWinner(gameBoard, players) {
   let winner;
+  let winningCombination = null; // Added this line
   for (const combination of WINNING_COMBINATIONS) {
     const firstSquareSymbol = gameBoard[combination[0].row][combination[0].col];
     const secondSquareSymbol =
@@ -54,10 +55,12 @@ function deriveWinner(gameBoard, players) {
       firstSquareSymbol === thirdSquareSymbol
     ) {
       winner = players[firstSquareSymbol];
+      winningCombination = combination; // Added this line
+      break;
     }
   }
 
-  return winner;
+  return { winner, winningCombination }; // Changed this line to return both winner and winningCombination
 }
 
 function App() {
@@ -66,7 +69,7 @@ function App() {
 
   const activePlayer = deriveActivePlayer(gameTurns);
   const gameBoard = deriveGameBoard(gameTurns);
-  const winner = deriveWinner(gameBoard, players);
+  const { winner, winningCombination } = deriveWinner(gameBoard, players); // Changed this line
   const hasDraw = gameTurns.length === 9 && !winner;
 
   const handleSelectSquare = (rowIndex, colIndex) => {
@@ -118,7 +121,11 @@ function App() {
         {(winner || hasDraw) && (
           <GameOver winner={winner} onRestart={handleRestart} />
         )}
-        <GameBoard onSelectSquare={handleSelectSquare} board={gameBoard} />
+        <GameBoard 
+        onSelectSquare={handleSelectSquare} 
+        board={gameBoard} 
+        winningCombination={winningCombination} // Added this line to pass the winning combination
+        />
       </div>
       <Log turns={gameTurns} />
     </main>

Project-11-Tic-Tac-Toe/src/components/GameBoard.jsx

@@ -1,6 +1,13 @@
 import React, { useState } from "react";
 
-function GameBoard({ onSelectSquare, board }) {
+function GameBoard({ onSelectSquare, board , winningCombination}) { // Added winningCombination as a parameter
+  // Function to check if a square is part of the winning combination
+  const isWinningSquare = (row, col) => {
+    return winningCombination?.some(
+      (comb) => comb.row === row && comb.col === col
+    );
+  };
+
   return (
     <ol id="game-board">
       {board.map((row, rowIndex) => (
@@ -11,14 +18,26 @@ function GameBoard({ onSelectSquare, board }) {
                 <button
                   onClick={() => onSelectSquare(rowIndex, colIndex)}
                   disabled={playerSymbol ?? false}
+                  style={{
+                    width: '8rem',
+                    height: '8rem',
+                    border: 'none',
+                    background: isWinningSquare(rowIndex, colIndex) ? 'green' : '#aca788', // Change background color for winning square
+                    color: '#3f3b00',
+                    fontSize: '5rem',
+                    cursor: 'pointer',
+                    fontFamily: '"Caprasimo", cursive',
+                    padding: '1rem',
+                  }} 
                 >
                   {playerSymbol}
                 </button>
               </li>
             ))}
           </ol>
         </li>
-      ))}
+      )
+      )}
     </ol>
   );
 }

Project-11-Tic-Tac-Toe/src/index.css

@@ -162,7 +162,9 @@ ol {
   padding: 0;
   flex-direction: column;
 }
-
+#game-board button:hover {
+  background-color: #f8ca31; /* Change background on hover */
+}
 #game-board ol {
   display: flex;
   flex-wrap: wrap;
@@ -343,3 +345,7 @@ ol {
     transform: scale(1);
   }
 }
+
+
+
+