/// <reference lib="dom" />

let ctx: CanvasRenderingContext2D;
let canvas: HTMLCanvasElement;
let ws: WebSocket
document.addEventListener("DOMContentLoaded", () => {
    ws = new WebSocket(`${window.location.protocol.endsWith("s:") ? "wss" : "ws"}://${window.location.hostname}:27032/`)
    ws.onerror = console.error
    ws.onmessage = m => {
        console.log(JSON.parse(m.data));
    }
    ws.onclose = () => console.warn("close")
    ws.onopen = () => console.warn("open")

    canvas = document.createElement("canvas");
    document.body.append(canvas)
    ctx = canvas.getContext("2d")!
    resize()
    globalThis.addEventListener("resize", resize)
    draw()
})

function resize() {
    canvas.width = globalThis.innerWidth
    canvas.height = globalThis.innerHeight
}

function draw() {
    ctx.fillStyle = "black"
    ctx.fillRect(0, 0, canvas.width, canvas.height)

    requestAnimationFrame(draw)
}