tic-tac-toe-ws/client.mts

import { Request, Response, Message, Hello } from "common.mjs";

const ws = new WebSocket("ws://localhost:1234");
const grid = [0, 0, 0, 0, 0, 0, 0, 0, 0]
const canvas = document.getElementById("game") as HTMLCanvasElement | null;
const ctx = canvas?.getContext("2d") as CanvasRenderingContext2D | null;

ws.onopen = (e) => {
    console.log("connected to server");

    if (canvas) {
        if (ctx) {
            drawGrid(ctx, grid);
            canvas.addEventListener("click", (evt: any) => {
                const {clientX, clientY} = evt;
                const x = Math.floor(clientX / 90);
                const y = Math.floor(clientY / 90);
                if (x < 3 && y < 3) {
                    const msg: Request = { x, y };
                    ws.send(JSON.stringify(msg));
                }
            });
        }
    }
};

ws.onmessage = (evt) => {
    const msg: Message = JSON.parse(evt.data);
    switch (msg.kind) {
        case "hello": {
            const h1 = document.getElementById("title") as HTMLHeadingElement | null;
            if (h1) {
                h1.innerText = `connected to server with id ${(msg.data as Hello).id}`
            }
        }
        case "update": {
            if (ctx) {
                drawGrid(ctx, (msg.data as Response).grid);
            }
        }
        default: {
            console.log(msg);
        }
    }
};


function drawGrid(ctx: CanvasRenderingContext2D, grid: number[]){
    for (let y = 0; y < 3; ++y) {
        for (let x = 0; x < 3; ++x) {
            if (grid[y*3+x] == 0) {
                ctx.fillStyle = "black";
                const rx = x + x * 100;
                const ry = y + y * 100;
                ctx.fillRect(rx, ry, 90, 90);
            } else if (grid[y*3+x] == 1) {
                ctx.fillStyle = "green";
                const rx = x + x * 100;
                const ry = y + y * 100;
                ctx.fillRect(rx, ry, 90, 90);
            } else if (grid[y*3+x] == 2) {
                ctx.fillStyle = "blue";
                const rx = x + x * 100;
                const ry = y + y * 100;
                ctx.fillRect(rx, ry, 90, 90);
            }
        }
    }
}