finished

src/components/Board.tsx

@@ -5,18 +5,13 @@ interface BoardProps {
   onSquareClick: (index: number) => void;
 }
 
-export default function Board(props: BoardProps) {
+const Board = ({ squares, onSquareClick }: BoardProps) => {
   return (
     <div className="board">
-      <Square value={props.squares[0]} onClick={() => props.onSquareClick(0)} />
-      <Square value={props.squares[1]} onClick={() => props.onSquareClick(1)} />
-      <Square value={props.squares[2]} onClick={() => props.onSquareClick(2)} />
-      <Square value={props.squares[3]} onClick={() => props.onSquareClick(3)} />
-      <Square value={props.squares[4]} onClick={() => props.onSquareClick(4)} />
-      <Square value={props.squares[5]} onClick={() => props.onSquareClick(5)} />
-      <Square value={props.squares[6]} onClick={() => props.onSquareClick(6)} />
-      <Square value={props.squares[7]} onClick={() => props.onSquareClick(7)} />
-      <Square value={props.squares[8]} onClick={() => props.onSquareClick(8)} />
+      {squares.map((item, index) => 
+        <Square value={item} onClick={() => onSquareClick(index)}/>
+      )}
     </div>
   );
-}
+};
+export default Board;

src/components/Game.tsx

@@ -1,23 +1,67 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import Board from "./Board";
 
 export default function Game() {
     const [squares, setSquares] = useState<(string | null)[]>(
         Array(9).fill(null)
     );
     const [isXNext, setIsXNext] = useState(true);
+    const [winner, setWinner] = useState<string | null>(null);
+    const [timeLeft, setTimeLeft] = useState<number>(10);
+
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setTimeLeft(prev => {
+                if (prev <= 1) {
+                    setIsXNext(prev => !prev);
+                    return 10;
+                }
+                return prev - 1;
+            });
+        }, 1000);
+
+        return () => clearInterval(interval);
+    }, []);
 
     function handleSquareClick(index: number) {
-        // Temporary: no gameplay logic yet
+        if (squares[index] !== null || winner) return;
+        setIsXNext(squares[index] === null ? prev => !prev : isXNext);
+        const newSquares = squares.map((value, arrIndex) => arrIndex !== index ? value : isXNext ? "X" : "O");
+        setSquares(newSquares);
+        calculateWinner(newSquares);
+        setTimeLeft(10);
         console.log("Clicked square:", index);
     }
-
+    const calculateWinner = (newSquares: (string | null)[]) => {
+        const lines = [
+            [0, 1, 2],
+            [3, 4, 5],
+            [6, 7, 8],
+            [0, 3, 6],
+            [1, 4, 7],
+            [2, 5, 8],
+            [0, 4, 8],
+            [2, 4, 6],
+        ];
+        const winnerLine = lines.find(line => line.every(i => newSquares[i] === newSquares[line[0]] && newSquares[i] !== null));
+        winnerLine ? setWinner(newSquares[winnerLine[0]]) : setWinner(winner);
+    }
+    const playAgain = () => {
+        setSquares(Array(9).fill(null));
+        setIsXNext(true);
+        setWinner(null);
+        setTimeLeft(10);
+    }
     return (
         <div className="game-container">
             <h1>Tic Tac Toe</h1>
 
             <Board squares={squares} onSquareClick={handleSquareClick} />
             <p>Next Player: {isXNext ? "X" : "O"}</p>
+            {(winner === null && !squares.every(i => i !== null)) && (<p>Time Left: {timeLeft}</p>)}
+            {winner !== null && <p>Winner: {winner}</p>}
+            {(winner !== null || squares.every(i => i !== null)) && <button onClick={playAgain}>Play Again</button>}
 
         </div>
     );