Tiktac

 ///===============css============

.height-box{
    height: 100px;
}

import React, { useState,useEffect } from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import "./tictak.css";
let _row=null,_col=null;

export default function () {

    //User1 X=1
    //user2 O=0
    const [user,setUser]=useState(1);
    const [isWin, setIsWin] = useState(false);
    const [box,setBox]=useState([
        ["","",""],
        ["","",""],
        ["","",""]
    ]);

    useEffect(()=>{
       // alert(`_row=${_row} _col=${_col}`);
        if(_col!=null&&_row!=null){
         //   console.log("box Update");
           // alert(box[0][0]);
            CheckIsWin(_row,_col);
        }
    },[box]);


     function Setvalue(row ,col){
        if(box[row][col]==""){
            
            setBox((prev) => {
                const newBox = prev.map((innerArray) => [...innerArray]); 
                newBox[row][col] =user==1? "X":"O"; 
                return newBox; 
            });
            _col=col;
            _row=row;
        //===Change User=======
        setUser((prev)=>{
            return prev==1?0:1;
        });
        }

        
     }


     function CheckIsWin(row, col) {
      
       // alert(`Row =${row} Col=${col}`);
        if(row==0 && col==0 ||row==0&& col==1|| row==0&& col==2){
         //   alert("checking");
            if(box[0][0]==box[0][1]&&box[0][1]==box[0][2]){
                alert("User Win 1");
                setIsWin(true);
            }
        }
        if(row==0 && col==0||row==1 && col==0||row==2 && col==0){
            if(box[0][0]==box[1][0]&&box[1][0]==box[2][0]){
                alert("User Win 2");
                setIsWin(true);
            }
        }
     }

     

     
     
    return (
        <div className="d-flex justify-content-center align-items-center vh-100">
            <div className="col-12 col-lg-4 card">
                <div className="container">
                    {/* ======================row1==================== */}
                    <h1>Play {user==1?"User 1":"User 2"}</h1>
                    {
                        isWin&&<h1>User is Win</h1>
                    }
                    <div className="row mt-2">
                        <div className="col-4">
                            <button onClick={()=>Setvalue(0,0)}  className="btn btn-primary btn-block w-100 height-box">{ box[0][0]}</button>
                        </div>
                        <div className="col-4">
                            <button onClick={()=>Setvalue(0,1)} className="btn btn-primary btn-block w-100 height-box">{ box[0][1]}</button>
                        </div>
                        <div className="col-4">
                            <button onClick={()=>Setvalue(0,2)}  className="btn btn-primary btn-block w-100 height-box">{ box[0][2]}</button>
                        </div>
                    </div>

                    {/* ======================row2==================== */}


                    <div className="row mt-2">
                        <div className="col-4">
                            <button onClick={()=>Setvalue(1,0)}  className="btn btn-primary btn-block w-100 height-box">{ box[1][0]}</button>
                        </div>
                        <div className="col-4">
                            <button onClick={()=>Setvalue(1,1)}  className="btn btn-primary btn-block w-100 height-box">{ box[1][1]}</button>
                        </div>
                        <div className="col-4">
                            <button onClick={()=>Setvalue(1,2)}   className="btn btn-primary btn-block w-100 height-box">{ box[1][2]}</button>
                        </div>
                        
                    </div>
                    {/* ============================row2 end============= */}
                    
                    {/* ======================row3==================== */}

                    <div className="row mt-2">
                        <div className="col-4">
                            <button onClick={()=>Setvalue(2,0)}   className="btn btn-primary btn-block w-100 height-box">{ box[2][0]}</button>
                        </div>
                        <div className="col-4">
                            <button  onClick={()=>Setvalue(2,1)} className="btn btn-primary btn-block w-100 height-box">{ box[2][1]}</button>
                        </div>
                        <div className="col-4">
                            <button  onClick={()=>Setvalue(2,2)} className="btn btn-primary btn-block w-100 height-box">{ box[2][2]}</button>
                        </div>
                        
                    </div>
                    {/* ============================row3 end============= */}

                </div>
            </div>

        </div>
    )
}