Untitled

mail@pastecode.io avatar
unknown
plain_text
7 months ago
14 kB
2
Indexable
Never
<!DOCTYPE html>
<html>
    <head>
        <title>WebSocket LauKataKati</title>
    </head>
    <body>
        <canvas id="board" width="800" height="800" style=
                "border:1px solid #000000;
                padding: 0;
                margin: auto;
                display: block;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;"></canvas>
        <p id="gameID"></p>
        <p id="turn"></p>
        <p id="gameOver"></p>
        <script>
            let session = window.sessionStorage;
            let client_id = null
            let turnText = document.getElementById("turn");
            let gameOverText = document.getElementById("gameOver");
            let positions = {
                1: [133, 100],
                2: [400, 100],
                3: [666, 100],
                4: [222, 200],
                5: [400, 200],
                6: [578, 200],
                7: [310, 300],
                8: [400, 300],
                9: [490, 300],
                10: [400, 400],
                11: [310, 500],
                12: [400, 500],
                13: [490, 500],
                14: [222, 600],
                15: [400, 600],
                16: [578, 600],
                17: [133, 700],
                18: [400, 700],
                19: [666, 700]
            }
            function drawBoard() {
                let canvas = document.getElementById('board');
                let ctx = canvas.getContext('2d');

                ctx.fillStyle = "#F0D2B4"
                ctx.fillRect(0, 0, canvas.width, canvas.height);

                ctx.strokeStyle = "gray";
                ctx.lineWidth = 10;
                ctx.beginPath();
                ctx.moveTo(133, 100);
                ctx.lineTo(666, 100);
                ctx.closePath();
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(222, 200);
                ctx.lineTo(578, 200);
                ctx.closePath();
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(310, 300);
                ctx.lineTo(490, 300);
                ctx.closePath();
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(310, 500);
                ctx.lineTo(490, 500);
                ctx.closePath();
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(222, 600);
                ctx.lineTo(578, 600);
                ctx.closePath();
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(133, 700);
                ctx.lineTo(666, 700);
                ctx.closePath();
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(133, 100);
                ctx.lineTo(666, 700);
                ctx.closePath();
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(666, 100);
                ctx.lineTo(133, 700);
                ctx.closePath();
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(400, 100);
                ctx.lineTo(400, 700);
                ctx.closePath();
                ctx.stroke();

                ctx.fillStyle = "black";
                ctx.beginPath();
                ctx.arc(133, 100, 20, 0, 360);
                ctx.fill();
                ctx.beginPath();
                ctx.arc(400, 100, 20, 0, 360);
                ctx.fill();
                ctx.beginPath();
                ctx.arc(666, 100, 20, 0, 360);
                ctx.fill();

                ctx.beginPath();
                ctx.arc(222, 200, 20, 0, 360);
                ctx.fill();
                ctx.beginPath();
                ctx.arc(400, 200, 20, 0, 360);
                ctx.fill();
                ctx.beginPath();
                ctx.arc(578, 200, 20, 0, 360);
                ctx.fill();

                ctx.beginPath();
                ctx.arc(310, 300, 20, 0, 360);
                ctx.fill();
                ctx.beginPath();
                ctx.arc(400, 300, 20, 0, 360);
                ctx.fill();
                ctx.beginPath();
                ctx.arc(490, 300, 20, 0, 360);
                ctx.fill();

                ctx.fillStyle = "gray";
                ctx.beginPath();
                ctx.arc(400, 400, 20, 0, 360);
                ctx.fill();

                ctx.fillStyle = "white";
                ctx.beginPath();
                ctx.arc(310, 500, 20, 0, 360);
                ctx.fill();
                ctx.beginPath();
                ctx.arc(400, 500, 20, 0, 360);
                ctx.fill();
                ctx.beginPath();
                ctx.arc(490, 500, 20, 0, 360);
                ctx.fill();

                ctx.beginPath();
                ctx.arc(222, 600, 20, 0, 360);
                ctx.fill();
                ctx.beginPath();
                ctx.arc(400, 600, 20, 0, 360);
                ctx.fill();
                ctx.beginPath();
                ctx.arc(578, 600, 20, 0, 360);
                ctx.fill();

                ctx.beginPath();
                ctx.arc(133, 700, 20, 0, 360);
                ctx.fill();
                ctx.beginPath();
                ctx.arc(400, 700, 20, 0, 360);
                ctx.fill();
                ctx.beginPath();
                ctx.arc(666, 700, 20, 0, 360);
                ctx.fill();
            }
            function drawMove(x, y, turn) {
                let canvas = document.getElementById('board');
                let ctx = canvas.getContext('2d');

                ctx.fillStyle = "gray";
                ctx.beginPath();
                ctx.arc(positions[x][0], positions[x][1], 20, 0, 360);
                ctx.fill();

                if(turn === 1)
                    ctx.fillStyle = "white";
                else
                    ctx.fillStyle = "black";

                ctx.beginPath();
                ctx.arc(positions[y][0], positions[y][1], 20, 0, 360);
                ctx.fill();
            }
            function drawCapture(x, y, z, turn) {
                let canvas = document.getElementById('board');
                let ctx = canvas.getContext('2d');

                ctx.fillStyle = "gray";
                ctx.beginPath();
                ctx.arc(positions[x][0], positions[x][1], 20, 0, 360);
                ctx.fill();

                ctx.beginPath();
                ctx.arc(positions[z][0], positions[z][1], 20, 0, 360);
                ctx.fill();

                if(turn === 1)
                    ctx.fillStyle = "white";
                else
                    ctx.fillStyle = "black";

                ctx.beginPath();
                ctx.arc(positions[y][0], positions[y][1], 20, 0, 360);
                ctx.fill();
            }
            function drawCurrentGame(board) {
                let canvas = document.getElementById('board');
                let ctx = canvas.getContext('2d');

                ctx.fillStyle = "#F0D2B4"
                ctx.fillRect(0, 0, canvas.width, canvas.height);

                ctx.strokeStyle = "gray";
                ctx.lineWidth = 10;
                ctx.beginPath();
                ctx.moveTo(133, 100);
                ctx.lineTo(666, 100);
                ctx.closePath();
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(222, 200);
                ctx.lineTo(578, 200);
                ctx.closePath();
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(310, 300);
                ctx.lineTo(490, 300);
                ctx.closePath();
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(310, 500);
                ctx.lineTo(490, 500);
                ctx.closePath();
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(222, 600);
                ctx.lineTo(578, 600);
                ctx.closePath();
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(133, 700);
                ctx.lineTo(666, 700);
                ctx.closePath();
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(133, 100);
                ctx.lineTo(666, 700);
                ctx.closePath();
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(666, 100);
                ctx.lineTo(133, 700);
                ctx.closePath();
                ctx.stroke();

                ctx.beginPath();
                ctx.moveTo(400, 100);
                ctx.lineTo(400, 700);
                ctx.closePath();
                ctx.stroke();

                let pieces = []
                for(let i = 0; i < 38; i+=2) {
                    if (board.getInt16(i, false) === 0)
                        pieces.push(0);
                    else if (board.getInt16(i, false) === 1)
                        pieces.push(1);
                    else if (board.getInt16(i, false) === 2)
                        pieces.push(2);
                }

                for(let i = 0; i < 19; i++) {
                    if(pieces[i] === 0)
                        ctx.fillStyle = "white";
                    else if(pieces[i] === 1)
                        ctx.fillStyle = "black";
                    else
                        ctx.fillStyle = "gray";

                    ctx.beginPath();
                    ctx.arc(positions[i+1][0], positions[i+1][1], 20, 0, 360);
                    ctx.fill();
                }
            }

            if(session.getItem("session") == null) {
                client_id = '_' + Math.random().toString(36).substr(2, 9);
                session.setItem("session", client_id);
                drawBoard();
            }
            else
                client_id = session.getItem("session");

            let turn = false;
            let game = null;
            const lobby = new WebSocket("ws://localhost:8000/lobby");
            lobby.binaryType = "arraybuffer";

            lobby.onopen = function() {
                let buffer = new ArrayBuffer(20);
                let bv = new Uint16Array(buffer);
                for (let i = 0, strLen = client_id.length; i < strLen; i++)
                    bv[i] = client_id.charCodeAt(i);
                lobby.send(buffer);
            }

            lobby.onmessage = function(event) {
                if(event.data.byteLength === 22) {
                    let gameId = String.fromCharCode.apply(null, new Uint16Array(event.data));
                    gameId = gameId.substr(1);
                    document.getElementById("gameID").innerText = "game: " + gameId;
                    game = new WebSocket("ws://localhost:8000/" + gameId);
                    game.binaryType = "arraybuffer";
                    game.onopen = function () {
                        if(turn)
                            turnText.innerText = "your turn"
                        else
                            turnText.innerText = "opponent's turn"
                    }
                    game.onmessage = function (event) {
                        let dv = new DataView(event.data, 0);
                        if(event.data.byteLength === 2) {
                            turn = true;
                            turnText.innerText = "your turn"
                        }
                        if(event.data.byteLength === 4) {
                            if(dv.getInt16(2, false) === 0) {
                                gameOverText.innerText = "game over: black wins!";
                                turnText.style.display = "none";
                            }
                            else {
                                gameOverText.innerText = "game over: white wins!"
                                turnText.style.display = "none";
                            }
                        }
                        if(event.data.byteLength === 6)
                            drawMove(dv.getInt16(0, false), dv.getInt16(2, false), dv.getInt16(4, false));
                        else
                            drawCapture(dv.getInt16(0, false), dv.getInt16(2, false), dv.getInt16(4, false), dv.getInt16(6, false));
                    }

                    let canvas = document.getElementById('board');
                    canvas.addEventListener("click", function (event) {
                        if (turn) {
                            let buffer = new ArrayBuffer(4);
                            let dv = new DataView(buffer, 0);
                            dv.setInt16(0, (event.pageX - 559), false);
                            dv.setInt16(2, (event.pageY - 94), false);
                            game.send(buffer);
                            turn = false;
                            turnText.innerText = "opponent's turn"
                            event.preventDefault();
                        }
                    }, false);
                    game.onclose = function () {
                        canvas = null;
                    }
                }
                else {
                    let dv = new DataView(event.data, 0);
                    drawCurrentGame(dv)
                }
            }
        </script>
    </body>
</html>