Multiplayer-Websocket/index.html at main · coderSomya/Multiplayer-Websocket · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multiplayer</title>
</head>
<body>
    <h1>Multiplayer game app</h1>
    <button id="btnCreate">New Game</button>
    <div>
        <input type="text" id="gameid"/>
        <button id="btnJoin">Join Game</button>
    </div>
    <div id="players"></div>
    <div id="board"></div>
</body>

<script>
    //players
    let clientId = null;
    let playerColor = "white";
    let ws = new WebSocket("ws://localhost:3000");
    let gameId = null;

     //html elements
    const btnCreate = document.getElementById("btnCreate");
    const btnJoin = document.getElementById("btnJoin");
    const gameid = document.getElementById("gameid");
    const players = document.getElementById("players");
    const board = document.getElementById("board");

    //events
    btnCreate.addEventListener("click", (e)=>{
        const payload = {
            "method": "create",
            "clientId": clientId
        }
        ws.send(JSON.stringify(payload));
    })

    btnJoin.addEventListener("click", (e)=>{
        if(gameId===null){
            gameId = gameid.value;
        }
        const payload = {
            "method": "join",
            "clientId": clientId,
            "gameId": gameid.value
        }

        ws.send(JSON.stringify(payload));
    })


    ws.onmessage = (message)=>{
        const response = JSON.parse(message.data);
        console.log("--------", response);

        switch (response.method) {
            case "connect":
                clientId = response.client;
                console.log("client connected with id ", clientId);
                break;

            case "create":
                console.log("game create with id ", response.game.id);
                gameid.value  = response.game.id;
                break;
            case "update":
                if(!response.game.state){
                    return;
                }
                for (const b of Object.keys(response.game.state)){
                   const color = response.game.state[b];
                   const ballObject = document.getElementById("ball"+b);
                   ballObject.style.background = color;
                }
                break;
            case "join":

                const game = response.game;
                while(players.firstChild){
                        players.removeChild(players.firstChild)
                }
                game.clients.forEach((c)=>{

                    const div = document.createElement("div");
                    div.innerText = c.clientId;
                    div.style.backgroundColor= c.color
                    players.appendChild(div);

                    if(c.clientId === clientId){
                        playerColor = c.color;
                    }
                })
                while(board.firstChild){
                        board.removeChild(board.firstChild)
                }

                for(let i=0; i<game.balls; i++){
                    const b = document.createElement("button");
                    b.id = "ball"+(i+1);
                    b.tag = i+1;
                    b.style.width = "150px";
                    b.style.height = "150px";
                    b.addEventListener("click", ()=>{
                        b.style.backgroundColor = playerColor;

                        const payload = {
                            "method": "play",
                            "clientId": clientId,
                            "gameId": gameId,
                            "ballId": b.tag,
                            "color": playerColor
                        }

                        ws.send(JSON.stringify(payload));
                    })
                    board.appendChild(b);
                }
                break;

        }
    }
</script>
</html>