const socket = new WebSocket("ws://localhost:8000/echo")

socket.addEventListener("message", event => {
    console.debug(event.data)
})

let grid_size = 10;
const map = new Map();

document.addEventListener("click", event => {
    let x = Math.floor(event.pageX / grid_size)
    let y = Math.floor(event.pageY / grid_size)

    let key = `x${x}y${y}`

    let val = 0;
    let element = undefined;

    if (map.get(key) == undefined) {
        val = 1
        let d = document.createElement("div")
        document.getElementsByTagName("body")[0].appendChild(d)
        element = d
        map.set(key, [val, d]); 
    } else {
        let index = map.get(key);
        val = index[0]+1;
        element = index[1];
        map.set(key, [val, index[1]]); 
    }

    socket.send(key)

    let hue = ((1 - (val/60)) * 100);
    element.style = `width:${grid_size}px;height:${grid_size}px;background-color:hsl(${hue},100%,50%);position:absolute;left:${x*grid_size}px;top:${y*grid_size}px;z-index:1000`

});