From eab0dbf7eb2fe8470732c9fb156e6b369bf2a1f1 Mon Sep 17 00:00:00 2001 From: LirPes Date: Sun, 14 Dec 2025 21:13:39 +0200 Subject: [PATCH 01/11] handle square clicking --- src/components/Game.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/Game.tsx b/src/components/Game.tsx index 80be18b..9c5b25f 100644 --- a/src/components/Game.tsx +++ b/src/components/Game.tsx @@ -6,10 +6,11 @@ export default function Game() { Array(9).fill(null) ); const [isXNext, setIsXNext] = useState(true); + const currentPlayer = isXNext? "X":"O" function handleSquareClick(index: number) { - // Temporary: no gameplay logic yet - console.log("Clicked square:", index); + squares[index] = currentPlayer + setIsXNext(!isXNext) } return ( From 767d90fa5a8169ffe6d979c57136d13eaa512159 Mon Sep 17 00:00:00 2001 From: LirPes Date: Sun, 14 Dec 2025 21:17:50 +0200 Subject: [PATCH 02/11] prevent overwrite move --- src/components/Game.tsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/components/Game.tsx b/src/components/Game.tsx index 9c5b25f..bdb549d 100644 --- a/src/components/Game.tsx +++ b/src/components/Game.tsx @@ -8,9 +8,17 @@ export default function Game() { const [isXNext, setIsXNext] = useState(true); const currentPlayer = isXNext? "X":"O" + function checkSquareTaken(index: number): Boolean { + return squares[index] != null + } + function handleSquareClick(index: number) { - squares[index] = currentPlayer - setIsXNext(!isXNext) + if(checkSquareTaken(index)) { + alert("this square is taken...") + } else { + squares[index] = currentPlayer + setIsXNext(!isXNext) + } } return ( From 4521d9fc1994ff6c67ab1e8f697cfcfc5f967920 Mon Sep 17 00:00:00 2001 From: LirPes Date: Sun, 14 Dec 2025 21:44:30 +0200 Subject: [PATCH 03/11] check if there is a winner --- src/components/Game.tsx | 34 +++++++++++++++++++++++++++++++++- 1 file changed, 33 insertions(+), 1 deletion(-) diff --git a/src/components/Game.tsx b/src/components/Game.tsx index bdb549d..d6c3574 100644 --- a/src/components/Game.tsx +++ b/src/components/Game.tsx @@ -6,17 +6,49 @@ export default function Game() { Array(9).fill(null) ); const [isXNext, setIsXNext] = useState(true); + const [winner, setWinner] = useState("") + const currentPlayer = isXNext? "X":"O" function checkSquareTaken(index: number): Boolean { return squares[index] != null } + function isCombAWinner(comb: number[], currentPlayer: string): Boolean { + return squares[comb[0]] == currentPlayer && + squares[comb[1]] == currentPlayer && + squares[comb[2]] == currentPlayer + } + + function checkForWinner(currentPlayer: string): Boolean { + const winningCombinations: number[][] = [ + [0,1,2], + [3,4,5], + [6,7,8], + [0,3,6], + [1,4,7], + [2,5,8], + [0,4,8], + [2,4,6] + ]; + + return winningCombinations.some((combination) => isCombAWinner(combination,currentPlayer)) + } + function handleSquareClick(index: number) { if(checkSquareTaken(index)) { alert("this square is taken...") } else { - squares[index] = currentPlayer + setSquares(() => { + const copy: (string | null)[] = [...squares]; + copy[index] = currentPlayer; + return copy; + }) + + if(checkForWinner(currentPlayer)) { + alert(`${currentPlayer} is the winner!`) + setWinner(currentPlayer) + } setIsXNext(!isXNext) } } From e6044a437fdea3da8eacacd209b397621f5be5ae Mon Sep 17 00:00:00 2001 From: LirPes Date: Mon, 15 Dec 2025 01:49:32 +0200 Subject: [PATCH 04/11] check if a player won --- package-lock.json | 12 +++++++++ src/components/Game.tsx | 57 ++++++++++++++++++++++------------------- 2 files changed, 42 insertions(+), 27 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2fec462..88e255c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -57,6 +57,7 @@ "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.5", @@ -1389,6 +1390,7 @@ "integrity": "sha512-GNWcUTRBgIRJD5zj+Tq0fKOJ5XZajIiBroOF0yvj2bSU1WvNdYS/dn9UxwsujGW4JX06dnHyjV2y9rRaybH0iQ==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "undici-types": "~7.16.0" } @@ -1399,6 +1401,7 @@ "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "csstype": "^3.2.2" } @@ -1458,6 +1461,7 @@ "integrity": "sha512-N9lBGA9o9aqb1hVMc9hzySbhKibHmB+N3IpoShyV6HyQYRGIhlrO5rQgttypi+yEeKsKI4idxC8Jw6gXKD4THA==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "8.49.0", "@typescript-eslint/types": "8.49.0", @@ -1709,6 +1713,7 @@ "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "dev": true, "license": "MIT", + "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -1814,6 +1819,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "baseline-browser-mapping": "^2.9.0", "caniuse-lite": "^1.0.30001759", @@ -2035,6 +2041,7 @@ "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", @@ -2721,6 +2728,7 @@ "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, "license": "MIT", + "peer": true, "engines": { "node": ">=12" }, @@ -2782,6 +2790,7 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.2.1.tgz", "integrity": "sha512-DGrYcCWK7tvYMnWh79yrPHt+vdx9tY+1gPZa7nJQtO/p8bLTDaHp4dzwEhQB7pZ4Xe3ok4XKuEPrVuc+wlpkmw==", "license": "MIT", + "peer": true, "engines": { "node": ">=0.10.0" } @@ -2984,6 +2993,7 @@ "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", "dev": true, "license": "Apache-2.0", + "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -3070,6 +3080,7 @@ "integrity": "sha512-ITcnkFeR3+fI8P1wMgItjGrR10170d8auB4EpMLPqmx6uxElH3a/hHGQabSHKdqd4FXWO1nFIp9rRn7JQ34ACQ==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.5.0", @@ -3191,6 +3202,7 @@ "integrity": "sha512-AvvthqfqrAhNH9dnfmrfKzX5upOdjUVJYFqNSlkmGf64gRaTzlPwz99IHYnVs28qYAybvAlBV+H7pn0saFY4Ig==", "dev": true, "license": "MIT", + "peer": true, "funding": { "url": "https://github.com/sponsors/colinhacks" } diff --git a/src/components/Game.tsx b/src/components/Game.tsx index d6c3574..5d07c96 100644 --- a/src/components/Game.tsx +++ b/src/components/Game.tsx @@ -1,4 +1,4 @@ -import { useState } from "react"; +import { useEffect, useState } from "react"; import Board from "./Board"; export default function Game() { @@ -6,22 +6,9 @@ export default function Game() { Array(9).fill(null) ); const [isXNext, setIsXNext] = useState(true); - const [winner, setWinner] = useState("") - + const [winner, setWinner] = useState<(string | null)>(null) const currentPlayer = isXNext? "X":"O" - - function checkSquareTaken(index: number): Boolean { - return squares[index] != null - } - - function isCombAWinner(comb: number[], currentPlayer: string): Boolean { - return squares[comb[0]] == currentPlayer && - squares[comb[1]] == currentPlayer && - squares[comb[2]] == currentPlayer - } - - function checkForWinner(currentPlayer: string): Boolean { - const winningCombinations: number[][] = [ + const winningCombinations: number[][] = [ [0,1,2], [3,4,5], [6,7,8], @@ -32,25 +19,41 @@ export default function Game() { [2,4,6] ]; - return winningCombinations.some((combination) => isCombAWinner(combination,currentPlayer)) + function checkSquareTaken(index: number): Boolean { + return squares[index] != null + } + + function checkCombination(comb: number[], newSquares: (string | null)[]): Boolean { + return newSquares[comb[0]] == currentPlayer && + newSquares[comb[1]] == currentPlayer && + newSquares[comb[2]] == currentPlayer + } + + function checkForWinner(newSquares: (string | null)[]): Boolean { + winningCombinations.forEach((c) => console.log(checkCombination(c,newSquares))) + return winningCombinations.some((combination) => + checkCombination(combination,newSquares)) } function handleSquareClick(index: number) { if(checkSquareTaken(index)) { alert("this square is taken...") } else { - setSquares(() => { - const copy: (string | null)[] = [...squares]; - copy[index] = currentPlayer; - return copy; - }) + const newSquares: (string | null)[] = [...squares] + newSquares[index] = currentPlayer; + handleNextTurn(newSquares) + setSquares(newSquares); + } + } + + function handleNextTurn(newSquares: (string | null)[]) { + if(checkForWinner(newSquares)) { + setWinner(currentPlayer); + alert(`${currentPlayer} is the winner`); - if(checkForWinner(currentPlayer)) { - alert(`${currentPlayer} is the winner!`) - setWinner(currentPlayer) + } else { + setIsXNext(prev => !prev) } - setIsXNext(!isXNext) - } } return ( From 6ae8aa694cd5704927d179da26e229bd4af4e031 Mon Sep 17 00:00:00 2001 From: LirPes Date: Sun, 21 Dec 2025 11:34:01 +0200 Subject: [PATCH 05/11] fixed game logic --- src/components/Game.tsx | 40 ++++++++++++++++++++-------------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/src/components/Game.tsx b/src/components/Game.tsx index 5d07c96..f00c7e8 100644 --- a/src/components/Game.tsx +++ b/src/components/Game.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from "react"; +import { use, useEffect, useState } from "react"; import Board from "./Board"; export default function Game() { @@ -6,8 +6,8 @@ export default function Game() { Array(9).fill(null) ); const [isXNext, setIsXNext] = useState(true); - const [winner, setWinner] = useState<(string | null)>(null) const currentPlayer = isXNext? "X":"O" + const [winner, setWinner] = useState<(string | null)>(null) const winningCombinations: number[][] = [ [0,1,2], [3,4,5], @@ -17,22 +17,26 @@ export default function Game() { [2,5,8], [0,4,8], [2,4,6] - ]; + ]; function checkSquareTaken(index: number): Boolean { return squares[index] != null } function checkCombination(comb: number[], newSquares: (string | null)[]): Boolean { - return newSquares[comb[0]] == currentPlayer && - newSquares[comb[1]] == currentPlayer && - newSquares[comb[2]] == currentPlayer + return newSquares[comb[0]] !== null && + newSquares[comb[1]] === newSquares[comb[0]] && + newSquares[comb[2]] === newSquares[comb[1]] } - function checkForWinner(newSquares: (string | null)[]): Boolean { - winningCombinations.forEach((c) => console.log(checkCombination(c,newSquares))) - return winningCombinations.some((combination) => - checkCombination(combination,newSquares)) + function calculateWinner(newSquares: (string | null)[]): (string | null) { + for(const comb of winningCombinations) { + if(checkCombination(comb, newSquares)) { + return newSquares[comb[0]] + } + } + + return null; } function handleSquareClick(index: number) { @@ -41,20 +45,15 @@ export default function Game() { } else { const newSquares: (string | null)[] = [...squares] newSquares[index] = currentPlayer; - handleNextTurn(newSquares) - setSquares(newSquares); + const winner = calculateWinner(newSquares) + setIsXNext(prev => !prev) + setSquares(newSquares) + setWinner(winner) } } - function handleNextTurn(newSquares: (string | null)[]) { - if(checkForWinner(newSquares)) { - setWinner(currentPlayer); - alert(`${currentPlayer} is the winner`); - } else { - setIsXNext(prev => !prev) - } - } + return (
@@ -62,6 +61,7 @@ export default function Game() {

Next Player: {isXNext ? "X" : "O"}

+

{winner && `Winner is: ${winner}`}

); From c97e744e32752b0d46dee4388c84dadf06aff7b7 Mon Sep 17 00:00:00 2001 From: LirPes Date: Sun, 21 Dec 2025 12:02:41 +0200 Subject: [PATCH 06/11] disable buttons after press or game end --- src/components/Board.tsx | 19 ++++++++++--------- src/components/Game.tsx | 6 +----- src/components/Square.tsx | 3 ++- 3 files changed, 13 insertions(+), 15 deletions(-) diff --git a/src/components/Board.tsx b/src/components/Board.tsx index 3989a44..3527ca0 100644 --- a/src/components/Board.tsx +++ b/src/components/Board.tsx @@ -2,21 +2,22 @@ import Square from "./Square"; interface BoardProps { squares: (string | null)[]; + isThereAWinner: boolean; onSquareClick: (index: number) => void; } export default function Board(props: BoardProps) { return (
- props.onSquareClick(0)} /> - props.onSquareClick(1)} /> - props.onSquareClick(2)} /> - props.onSquareClick(3)} /> - props.onSquareClick(4)} /> - props.onSquareClick(5)} /> - props.onSquareClick(6)} /> - props.onSquareClick(7)} /> - props.onSquareClick(8)} /> + props.onSquareClick(0)} isDisabled={props.squares[0] != null || props.isThereAWinner} /> + props.onSquareClick(1)} isDisabled={props.squares[1] != null || props.isThereAWinner}/> + props.onSquareClick(2)} isDisabled={props.squares[2] != null || props.isThereAWinner}/> + props.onSquareClick(3)} isDisabled={props.squares[3] != null || props.isThereAWinner}/> + props.onSquareClick(4)} isDisabled={props.squares[4] != null || props.isThereAWinner}/> + props.onSquareClick(5)} isDisabled={props.squares[5] != null || props.isThereAWinner}/> + props.onSquareClick(6)} isDisabled={props.squares[6] != null || props.isThereAWinner}/> + props.onSquareClick(7)} isDisabled={props.squares[7] != null || props.isThereAWinner}/> + props.onSquareClick(8)} isDisabled={props.squares[8] != null || props.isThereAWinner}/>
); } diff --git a/src/components/Game.tsx b/src/components/Game.tsx index f00c7e8..c70d181 100644 --- a/src/components/Game.tsx +++ b/src/components/Game.tsx @@ -52,14 +52,10 @@ export default function Game() { } } - - - return (

Tic Tac Toe

- - +

Next Player: {isXNext ? "X" : "O"}

{winner && `Winner is: ${winner}`}

diff --git a/src/components/Square.tsx b/src/components/Square.tsx index 3e9f11a..9f0e609 100644 --- a/src/components/Square.tsx +++ b/src/components/Square.tsx @@ -1,11 +1,12 @@ interface SquareProps { value: string | null; + isDisabled: boolean; onClick: () => void; } export default function Square(props: SquareProps) { return ( - ); From a926eb0948a073866b989efc50463612913712a9 Mon Sep 17 00:00:00 2001 From: LirPes Date: Sun, 21 Dec 2025 12:06:06 +0200 Subject: [PATCH 07/11] delete function --- src/components/Game.tsx | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/src/components/Game.tsx b/src/components/Game.tsx index c70d181..6ed1397 100644 --- a/src/components/Game.tsx +++ b/src/components/Game.tsx @@ -19,10 +19,6 @@ export default function Game() { [2,4,6] ]; - function checkSquareTaken(index: number): Boolean { - return squares[index] != null - } - function checkCombination(comb: number[], newSquares: (string | null)[]): Boolean { return newSquares[comb[0]] !== null && newSquares[comb[1]] === newSquares[comb[0]] && @@ -40,16 +36,12 @@ export default function Game() { } function handleSquareClick(index: number) { - if(checkSquareTaken(index)) { - alert("this square is taken...") - } else { - const newSquares: (string | null)[] = [...squares] + const newSquares: (string | null)[] = [...squares] newSquares[index] = currentPlayer; const winner = calculateWinner(newSquares) setIsXNext(prev => !prev) setSquares(newSquares) setWinner(winner) - } } return ( From 0d9ec4353c46a320a5a6ee5879d5e4b820cc117d Mon Sep 17 00:00:00 2001 From: LirPes Date: Sun, 21 Dec 2025 12:11:03 +0200 Subject: [PATCH 08/11] play again button --- src/components/Game.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/components/Game.tsx b/src/components/Game.tsx index 6ed1397..060dec1 100644 --- a/src/components/Game.tsx +++ b/src/components/Game.tsx @@ -44,12 +44,19 @@ export default function Game() { setWinner(winner) } + function reset() { + setSquares(Array(9).fill(null)) + setWinner(null) + setIsXNext(true) + } + return (

Tic Tac Toe

Next Player: {isXNext ? "X" : "O"}

{winner && `Winner is: ${winner}`}

+ {winner && }
); From 83161c2da1e0accb1dd1b47c94083a75818b9e83 Mon Sep 17 00:00:00 2001 From: LirPes Date: Sun, 21 Dec 2025 12:23:47 +0200 Subject: [PATCH 09/11] changed prop name --- src/components/Board.tsx | 20 ++++++++++---------- src/components/Game.tsx | 10 ++++++---- 2 files changed, 16 insertions(+), 14 deletions(-) diff --git a/src/components/Board.tsx b/src/components/Board.tsx index 3527ca0..64b709b 100644 --- a/src/components/Board.tsx +++ b/src/components/Board.tsx @@ -2,22 +2,22 @@ import Square from "./Square"; interface BoardProps { squares: (string | null)[]; - isThereAWinner: boolean; + isGameOver: boolean; onSquareClick: (index: number) => void; } export default function Board(props: BoardProps) { return (
- props.onSquareClick(0)} isDisabled={props.squares[0] != null || props.isThereAWinner} /> - props.onSquareClick(1)} isDisabled={props.squares[1] != null || props.isThereAWinner}/> - props.onSquareClick(2)} isDisabled={props.squares[2] != null || props.isThereAWinner}/> - props.onSquareClick(3)} isDisabled={props.squares[3] != null || props.isThereAWinner}/> - props.onSquareClick(4)} isDisabled={props.squares[4] != null || props.isThereAWinner}/> - props.onSquareClick(5)} isDisabled={props.squares[5] != null || props.isThereAWinner}/> - props.onSquareClick(6)} isDisabled={props.squares[6] != null || props.isThereAWinner}/> - props.onSquareClick(7)} isDisabled={props.squares[7] != null || props.isThereAWinner}/> - props.onSquareClick(8)} isDisabled={props.squares[8] != null || props.isThereAWinner}/> + props.onSquareClick(0)} isDisabled={props.squares[0] != null || props.isGameOver} /> + props.onSquareClick(1)} isDisabled={props.squares[1] != null || props.isGameOver}/> + props.onSquareClick(2)} isDisabled={props.squares[2] != null || props.isGameOver}/> + props.onSquareClick(3)} isDisabled={props.squares[3] != null || props.isGameOver}/> + props.onSquareClick(4)} isDisabled={props.squares[4] != null || props.isGameOver}/> + props.onSquareClick(5)} isDisabled={props.squares[5] != null || props.isGameOver}/> + props.onSquareClick(6)} isDisabled={props.squares[6] != null || props.isGameOver}/> + props.onSquareClick(7)} isDisabled={props.squares[7] != null || props.isGameOver}/> + props.onSquareClick(8)} isDisabled={props.squares[8] != null || props.isGameOver}/>
); } diff --git a/src/components/Game.tsx b/src/components/Game.tsx index 060dec1..a8e7086 100644 --- a/src/components/Game.tsx +++ b/src/components/Game.tsx @@ -39,7 +39,10 @@ export default function Game() { const newSquares: (string | null)[] = [...squares] newSquares[index] = currentPlayer; const winner = calculateWinner(newSquares) - setIsXNext(prev => !prev) + if(!winner) { + setIsXNext(prev => !prev) + } + setSquares(newSquares) setWinner(winner) } @@ -53,9 +56,8 @@ export default function Game() { return (

Tic Tac Toe

- -

Next Player: {isXNext ? "X" : "O"}

-

{winner && `Winner is: ${winner}`}

+ +

{winner? `Winner is: ${winner}`: `Next Player: ${isXNext ? "X" : "O"}`}

{winner && }
From f39a6342aa0fac8df6cf195b25315f0a84c8ed57 Mon Sep 17 00:00:00 2001 From: LirPes Date: Sun, 21 Dec 2025 13:10:40 +0200 Subject: [PATCH 10/11] handle a tide situation --- src/components/Game.tsx | 32 +++++++++++++++++++++++++++++--- 1 file changed, 29 insertions(+), 3 deletions(-) diff --git a/src/components/Game.tsx b/src/components/Game.tsx index a8e7086..98999f0 100644 --- a/src/components/Game.tsx +++ b/src/components/Game.tsx @@ -6,8 +6,12 @@ export default function Game() { Array(9).fill(null) ); const [isXNext, setIsXNext] = useState(true); - const currentPlayer = isXNext? "X":"O" const [winner, setWinner] = useState<(string | null)>(null) + const turnTime = 10; + const X = "x" + const O = "O"; + const currentPlayer = isXNext? X:O + const[timeLeft, setTimeLeft] = useState(turnTime) const winningCombinations: number[][] = [ [0,1,2], [3,4,5], @@ -19,6 +23,26 @@ export default function Game() { [2,4,6] ]; + const tide = !winner && !squares.flat().includes(null) + const winnerText = tide? "It's A tide": winner? `winner is ${winner}`: "" + const nextTurnText = `Next Player: ${isXNext ? X : O}` + + useEffect(() => { + if(winner || tide) return + + if(timeLeft <= 0) { + setIsXNext(prev => !prev) + setTimeLeft(turnTime) + }; + + const timer = setTimeout(() => { + setTimeLeft(timeLeft - 1) + }, 1000) + + return () => clearTimeout(timer) + + },[timeLeft]) + function checkCombination(comb: number[], newSquares: (string | null)[]): Boolean { return newSquares[comb[0]] !== null && newSquares[comb[1]] === newSquares[comb[0]] && @@ -39,6 +63,7 @@ export default function Game() { const newSquares: (string | null)[] = [...squares] newSquares[index] = currentPlayer; const winner = calculateWinner(newSquares) + setTimeLeft(turnTime) if(!winner) { setIsXNext(prev => !prev) } @@ -57,8 +82,9 @@ export default function Game() {

Tic Tac Toe

-

{winner? `Winner is: ${winner}`: `Next Player: ${isXNext ? "X" : "O"}`}

- {winner && } +

{winnerText || nextTurnText}

+ {(winner || tide) && } +

{!(winner || tide) && `time: ${timeLeft}`}

); From b131511230cf910b094fb0cc2db9d21701ae6f80 Mon Sep 17 00:00:00 2001 From: LirPes Date: Sun, 21 Dec 2025 13:11:16 +0200 Subject: [PATCH 11/11] delete import --- src/components/Game.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Game.tsx b/src/components/Game.tsx index 98999f0..e0663a4 100644 --- a/src/components/Game.tsx +++ b/src/components/Game.tsx @@ -1,4 +1,4 @@ -import { use, useEffect, useState } from "react"; +import {useEffect, useState } from "react"; import Board from "./Board"; export default function Game() {