diff --git a/pages/games/TicTacToe.js b/pages/games/TicTacToe.js index ce0725e..c37cdff 100644 --- a/pages/games/TicTacToe.js +++ b/pages/games/TicTacToe.js @@ -7,15 +7,29 @@ const TicTacToe = () => { const [boardSize, setBoardSize] = useState(3); const [numPlayers, setNumPlayers] = useState(2); const [winLimit, setWinLimit] = useState(boardSize); - const [symbols, setSymbols] = useState(["X", "O", "Y", "Z", "A", "B", "C", "D", "E", "F"]); + const [symbols, setSymbols] = useState([ + "X", + "O", + "Y", + "Z", + "A", + "B", + "C", + "D", + "E", + "F", + ]); const [boardArray, setBoardArray] = useState( Array.from({ length: boardSize }, () => Array(boardSize).fill("")) ); const [turn, setTurn] = useState(0); const [gameOver, setGameOver] = useState(false); + const [changeNumberOfPlayer, setChangeNumberOfPlayer] = useState(true); // Create a JavaScript map to count to 10 - const numberMap = new Map([...Array(9).keys()].map((num) => [num + 2, num + 2])); + const numberMap = new Map( + [...Array(9).keys()].map((num) => [num + 2, num + 2]) + ); const init = () => { setBoardArray( @@ -23,6 +37,8 @@ const TicTacToe = () => { ); setTurn(0); setGameOver(false); + setChangeNumberOfPlayer(true); + }; const handleClick = (row, col) => { @@ -42,10 +58,20 @@ const TicTacToe = () => { const checkGameOver = (row, col, symbol) => { if (checkLine(row, col, symbol)) { - swal("Player " + symbol + " wins!"); + swal({ + title: "Good job!", + text: "Player " + symbol + " Wins!", + icon: "success", + button: "Ok", + }); setGameOver(true); } else if (checkFull()) { - swal("It's a draw!"); + swal({ + title: "It's a Draw!", + text: "Nobody Wins", + icon: "error", + button: "Ok", + }); setGameOver(true); } }; @@ -94,6 +120,7 @@ const TicTacToe = () => { for (var j = 0; j < boardSize; j++) { // Return false if any cell is empty if (boardArray[i][j] == "") { + setChangeNumberOfPlayer(false); return false; } } @@ -134,8 +161,32 @@ const TicTacToe = () => { }; const handelBoardSizeChange = (e) => { - setBoardSize(parseInt(e.target.value)) - } + setBoardSize(parseInt(e.target.value)); + }; + + const handleNumberOfPlayers = (e) => { + if (!changeNumberOfPlayer) { + swal({ + title: "Are you sure?", + text: "Do you want to restart the game", + icon: "warning", + buttons: true, + dangerMode: true, + }).then((willDelete) => { + if (willDelete) { + swal("Number of players is now set to " + e.target.value, { + icon: "success", + }); + setNumPlayers(parseInt(e.target.value)); + init(e) + } else { + swal("The game will continue as it is"); + } + }); + } else { + setNumPlayers(parseInt(e.target.value)); + } + }; return ( @@ -146,7 +197,13 @@ const TicTacToe = () => {
- +
@@ -155,7 +212,7 @@ const TicTacToe = () => { className="form-control" id="players" value={numPlayers} - onChange={(e) => setNumPlayers(parseInt(e.target.value))} + onChange={handleNumberOfPlayers} > {[...numberMap.entries()].map(([value, label]) => (
- - setWinLimit(e.target.value)} /> + + setWinLimit(e.target.value)} + />