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;

let myId: number | null = 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);
    console.log(msg);
    switch (msg.kind) {
        case "hello": {
            myId = (msg.data as Hello).id;
            const h1 = document.getElementById("title") as HTMLHeadingElement | null;
            if (h1) {
                h1.innerText = `connected to server with id ${myId}`
            }
            break;
        }
        case "update": {
            if (ctx) {
                drawGrid(ctx, (msg.data as Response).grid);
            }
            break;
        }
        default: {
            console.log(msg);
            break;
        }
    }
};


function drawGrid(ctx: CanvasRenderingContext2D, grid: number[]){
    for (let y = 0; y < 3; ++y) {
        for (let x = 0; x < 3; ++x) {
            switch (grid[y*3+x]) {
                case 0: ctx.fillStyle = "black"; break;
                case myId: ctx.fillStyle = "green"; break;
                default: ctx.fillStyle = "blue"; break;
            }

            const rx = x + x * 100;
            const ry = y + y * 100;
            ctx.fillRect(rx, ry, 90, 90);
        }
    }
}