new alert messages

pages/games/TicTacToe.js

@@ -7,22 +7,38 @@ 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(
       Array.from({ length: boardSize }, () => Array(boardSize).fill(""))
     );
     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 (
     <Layout>
@@ -146,7 +197,13 @@ const TicTacToe = () => {
           <div id="options" className={styles.options}>
             <div className="mt-1">
               <label>Input board size:</label>
-              <input className="form-control" type="number" min={3} value={boardSize} onChange={handelBoardSizeChange} />
+              <input
+                className="form-control"
+                type="number"
+                min={3}
+                value={boardSize}
+                onChange={handelBoardSizeChange}
+              />
             </div>
 
             <div className="mt-2">
@@ -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]) => (
                   <option key={value} value={value}>
@@ -165,8 +222,17 @@ const TicTacToe = () => {
               </select>
             </div>
             <div className="mt-2">
-              <label className="mt-2">Select number of consecutive cells to win</label>
-              <input className="form-control" type="number" max={boardSize} min={3} value={winLimit} onChange={(e) => setWinLimit(e.target.value)} />
+              <label className="mt-2">
+                Select number of consecutive cells to win
+              </label>
+              <input
+                className="form-control"
+                type="number"
+                max={boardSize}
+                min={3}
+                value={winLimit}
+                onChange={(e) => setWinLimit(e.target.value)}
+              />
             </div>
             <button className="btn btn-success mt-3" onClick={init}>
               Start Game