rooms.html

<script>
    onload = function() {
    var drooms = true;
    const socket = new WebSocket("ws://localhost:9090");
    var reply = new Object();
    var stga, pid;
    function s(data) {
        return JSON.stringify(data);
    }
    function q(qu) {
        const searchParams = new URLSearchParams(window.location.search);
        const q = searchParams.get(qu);
        return q;
    }

    socket.onopen = e =>{
        let query = q("q");
        reply.data = "jroom";
        reply.room = query;
        console.log(e);
        console.log(q("q"));
        socket.send(s(reply));
    }

    socket.onmessage = message => {
        var msg = JSON.parse(message.data);
        function c(){
            let reply = new Object();
            reply.room = q("q");
            reply.type = "pi";
            reply.pid = pid;
        document.getElementById("b1").addEventListener("click", e => {
            reply.n = 1;1
        })
        document.getElementById("b2").addEventListener("click", e => {
            reply.n = 2;
        })
        document.getElementById("b3").addEventListener("click", e => {
            reply.n = 3;
        })
        document.getElementById("b4").addEventListener("click", e => {
            reply.n = 4;
        })
        document.getElementById("b5").addEventListener("click", e => {
            reply.n = 5;
        })
        document.getElementById("b6").addEventListener("click", e => {
            reply.n = 6;
        })
        document.getElementById("b7").addEventListener("click", e => {
            reply.n = 7;
        })
        document.getElementById("b8").addEventListener("click", e => {
            reply.n = 8;
        })
        document.getElementById("b9").addEventListener("click", e => {
            reply.n = 9;
        })
        document.getElementById("b10").addEventListener("click", e => {
            reply.n = 10;
        })
        if (reply.n){
            socket.send(s(reply));
        }
        
    }
    
        if(msg.rtype === "droomsrep"){
            console.log(s(msg))
            let welcmsg = `Welcome <br>
    You Are In Room : ${q("q")}; <br>
    And You Are Player : ${pid}; <br>
    Are Both Players Joined : ${msg.stga}; <br>
    Score : ${msg.score}; <br> 
    `
        document.getElementById("welcmsg").innerHTML = welcmsg;
        }else {
            
            console.log(s(msg)+"room");
            pid = msg.pid
            stga = true;
            let welcmsg = `Welcome <br>
    You Are In Room : ${q("q")}; <br>
    And You Are Player : ${msg.pid}; <br>
    Are Both Players Joined : ${msg.stga}; <br> 
    `
        document.getElementById("welcmsg").innerHTML = welcmsg;
        
        } 
         if(drooms == true){
            setInterval(() => {
                let rep = new Object();
                rep.type = "drooms";
                rep.pid = msg.pid;
                rep.room = q("q");
                socket.send(s(rep));
                drooms = false;
                console.log(drooms)
        },1500);
        }
    }
    

}

</script>
<h1 id="welcmsg">Welcome <br>
You Are In Room : Joining; <br>
And You Are Player : Joining; <br>
Are Both Players Joined : Loading; <br>
</h1>
<input type="button" value="1" id="b1"><br>
<input type="button" value="2" id="b2" ><br>
<input type="button" value="3" id="b3" ><br>
<input type="button" value="4" id="b4" ><br>
<input type="button" value="5" id="b5" ><br>
<input type="button" value="6" id="b6" ><br>
<input type="button" value="7" id="b7" ><br>
<input type="button" value="8" id="b8" ><br>
<input type="button" value="9" id="b9" ><br>
<input type="button" value="10" id="b10" ><br>
<input type="button" value="Submit" id="submit">