added Clear Box and clear board button (#60)

* check that all number used are different

* once all the square is filled it will validate automatically whether the square is correct or not.

* made the error text smaller

* conflict resolve

* conflict

* added the clear box and clear board button

Author: ChetanPatil12

src/pages/games/MagicSquares.js

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState} from "react";
 import "../../styles/pages/games/MagicSquares.css";
 
 export const MagicSquares = () => {
@@ -38,6 +38,28 @@ export const MagicSquares = () => {
         }, 3000);
     };
 
+    const isNumberPresent = (number) => {
+        for (let i = 0; i < board.length; i++) {
+            if (board[i].value === number) {
+                return true;
+            }
+        }
+        return false;
+    };
+
+    const autocheck = () =>{
+        let allCellsFilled = true;
+        for (let i = 0; i < 9; i++) {
+            if (board[i].value === "") {
+                    allCellsFilled = false;
+                    break;
+                }
+            }
+            if (allCellsFilled) {
+                checkFn();
+            }
+    }
+
     const checkFn = () => {
         console.log("in check function");
         let flag_empty = 0;
@@ -163,15 +185,27 @@ export const MagicSquares = () => {
                             );
                         })}
                     </div>
-                    <div
-                        className="button"
-                        onClick={() => {
-                            if (!winFlag) {
-                                checkFn();
-                            }
-                        }}
-                    >
-                        Check
+                    <div className="flex-button">
+                        <div
+                            className="button"
+                            onClick={() => {
+                                if (!winFlag) {
+                                    checkFn();
+                                }
+                            }}
+                        >
+                            Check
+                        </div>
+                        <div className="button" onClick={()=>{
+                            
+                                let tempBoard = [...board];
+                                        for(let i=0; i<9; i++){
+                                            tempBoard[i].value = "";
+                                        }
+                                    setBoard(tempBoard);  
+                            }}>
+                                Clear Board
+                        </div>
                     </div>
                 </div>
                 <div className="each-col">
@@ -184,26 +218,45 @@ export const MagicSquares = () => {
                         value={cellInputValue}
                         onChange={(e) => setCellInputValue(e.target.value)}
                     />
-                    <div
-                        className="button"
-                        onClick={() => {
-                            if (!winFlag) {
-                                if (focusCell === "") {
-                                    callError("No cell selected!");
-                                } else if (cellInputValue === "") {
-                                    callError("Nothing to insert!");
-                                } else {
-                                    let tempBoard = board;
-                                    if (focusCell !== "")
-                                        tempBoard[focusCell].value = cellInputValue;
-                                    // console.log("focus on", focusCell, tempBoard);
-                                    setBoard(tempBoard);
-                                    setFocusCell("");
+                    <div className="flex-button">
+                        <div
+                            className="button"
+                            onClick={() => {
+                                        if (!winFlag) {
+                                        if (focusCell === "") {
+                                            callError("No cell selected!");
+                                        } else if (cellInputValue === "") {
+                                            callError("Nothing to insert!");
+                                        }else if (isNumberPresent(cellInputValue)){
+                                            callError("Number already exists in the board!!");
+                                        } else {
+                                            let tempBoard = board;
+                                            if (focusCell !== "")
+                                                tempBoard[focusCell].value = cellInputValue;
+                                            // console.log("focus on", focusCell, tempBoard);
+                                            setBoard(tempBoard);
+                                            setFocusCell("");
+                                            autocheck();
+                                        }                                
                                 }
+                            }}
+                        >
+                            Insert
+                        </div>
+                        <div className="button" onClick={()=>{
+                            if(focusCell === ""){
+                                callError("No cell selected!");
+                            }else{
+                                let tempBoard = board;
+                                if (focusCell !== "")
+                                    tempBoard[focusCell].value = cellInputValue;
+                                setBoard(tempBoard);
+                                setFocusCell("");
+                                autocheck();
                             }
-                        }}
-                    >
-                        Insert
+                        }}>
+                            clear
+                        </div>
                     </div>
                     <hr />
                     <div className="rules">

src/styles/pages/games/MagicSquares.css

@@ -92,7 +92,7 @@ input::-webkit-inner-spin-button {
 .each-col {
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
+    gap: 10px;
 
 }
 
@@ -121,11 +121,17 @@ hr {
 
 .game-error {
     color: crimson;
-    font-size: 50px;
+    font-size: 30px;
 }
 
 
 .game-outcome {
     color: indigo;
     font-size: 60px;
+}
+
+
+.flex-button{
+    display: flex;
+    
 }