diff --git a/src/App.jsx b/src/App.jsx index 58f9621a7dd559dc7becde819e188aa23ff8a2f8..c13a2c326b26e6907250011afce4c7366e459c95 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -9,8 +9,15 @@ function App() { const [turns, setTurns] = useState([]); const [winner, setWinner] = useState(null); const [draw, setDraw] = useState(false); + const [resetTime, setResetTime] = useState(0); const [playerName, setPlayerName] = useState({ X: "player1", O: "player2" }); + function reset() { + setResetTime((prev) => { + return prev + 1; + }); + } + function handelSelectField(row, col) { setTurns((prevTurns) => { let symbol = "X"; @@ -51,6 +58,7 @@ function App() { ></ListItem> </ol> <GameBoard + key={resetTime} turns={turns} handelSelectField={(row, col) => { handelSelectField(row, col); @@ -60,11 +68,12 @@ function App() { ></GameBoard> {(winner || draw) && ( <GameOver + reset={reset} winner={playerName[winner]} resetBoard={setTurns} resetWinner={setWinner} - draw ={draw} - setDraw = {setDraw} + draw={draw} + setDraw={setDraw} ></GameOver> )} </div> diff --git a/src/components/GameOver.jsx b/src/components/GameOver.jsx index 1bdeb9030352d35b9d9b7c89eba3222ff007a9fb..53115339d318f3c2f4455ee12a77d360c12839ba 100644 --- a/src/components/GameOver.jsx +++ b/src/components/GameOver.jsx @@ -1,4 +1,4 @@ -export default function GameOver ({winner, resetBoard ,resetWinner,draw,setDraw}) { +export default function GameOver ({winner, resetBoard ,resetWinner,draw,setDraw,reset}) { function handelClick(){ resetBoard((turns)=>{ return [] ; @@ -9,6 +9,7 @@ export default function GameOver ({winner, resetBoard ,resetWinner,draw,setDraw} setDraw ((oldValue)=>{ return false ; }) + reset() ; } let gameResult = draw ? <p>it's draw </p> : <p> the winner is {winner}</p> return ( diff --git a/src/components/SymbolFeld.jsx b/src/components/SymbolFeld.jsx index 33f9986e02b5a65df83954c0c0e60204faeed72a..993a77dac890a9b9b14724665dd025b57677f440 100644 --- a/src/components/SymbolFeld.jsx +++ b/src/components/SymbolFeld.jsx @@ -2,12 +2,7 @@ export default function SymbolFeld({ row, col, handelSelectField ,symbol,gameBoard}) { function handelClick(event) { handelSelectField(row, col); - if (gameBoard[row][col]){ - event.target.disabled = true; - }else { - event.target.disabled = false; - } - + event.target.disabled = true; } return <button onClick={handelClick}>{symbol}</button>;