OWOT mouse cursors

/*
OWOT mouse cursors script by KKosty4ka
version 2
*/

!function() {
    if (window.hasOwnProperty("mouse_cursors_script")) return;

    w.broadcastReceive();

    let cursors = {};
    window.mouse_cursors_script = {
        cursors
    };

    let myX = null;
    let myY = null;

    function createCursor(id, username) {
        let cur = document.body.appendChild(document.createElement("div"));
        cur.style.pointerEvents = "none";
        cur.style.position = "fixed";
        cur.style.opacity = "0.7";

        let img = cur.appendChild(document.createElement("img"));
        img.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAATCAYAAACk9eypAAAAa0lEQVQoz52R4QoAIQiD3bj3f+XdnxOkTO2EiGTfymVmJrsofruuAEljyG8YQ4yHCcS10UHMmhXEk9MJYvXeDGKXygpxkn2EOP1hh55KBKBPKREhLiZiOFSm5OJuFgQH7HNqM+NB/Lu0zvAClMs1CjxcukEAAAAASUVORK5CYII=";

        if (username) {
            let nametag = cur.appendChild(document.createElement("div"));
            nametag.innerText = username;

            nametag.style.backgroundColor = "black";
            nametag.style.color = "white";
            nametag.style.padding = "3px";
            nametag.style.borderRadius = "3px";
        }

        cursors[id] = cur;
    }

    function redrawCursor(id) {
        let x = (cursors[id].owotX * cellW + positionX + owotWidth / 2) / zoomRatio;
        let y = (cursors[id].owotY * cellH + positionY + owotHeight / 2) / zoomRatio;

        cursors[id].style.left = `${x}px`;
        cursors[id].style.top = `${y}px`;
    }

    w.on("tilesRendered", () => {
        for (let id in cursors) {
            redrawCursor(id);
        }
    });

    w.on("cmd", e => {
        if (w.socketChannel === e.sender) return;
        if (!e.data.startsWith("mousecursors")) return;

        let msg;
        try {
            msg = JSON.parse(e.data.substring(12));
        } catch {
            return;
        }

        if (!msg.hasOwnProperty("kind")) return;

        if (msg.kind === "move") {
            if (!msg.hasOwnProperty("x")) return;
            if (typeof(msg.x) !== "number" || !Number.isFinite(msg.x)) return;
            if (!msg.hasOwnProperty("y")) return;
            if (typeof(msg.y) !== "number" || !Number.isFinite(msg.y)) return;

            if (!cursors.hasOwnProperty(e.sender)) {
                createCursor(e.sender, e.username);
            }

            cursors[e.sender].owotX = msg.x;
            cursors[e.sender].owotY = msg.y;

            redrawCursor(e.sender);
        } else if (msg.kind === "bye") {
            if (!cursors.hasOwnProperty(e.sender)) return;

            cursors[e.sender].remove();
            delete cursors[e.sender];
        }
    });

    function sendBye() {
        myX = null;
        myY = null;

        w.broadcastCommand("mousecursors" + JSON.stringify({
            kind: "bye"
        }));
    }

    function sendCoords() {
        if (myX === null || myY === null) return;

        w.broadcastCommand("mousecursors" + JSON.stringify({
            kind: "move",
            x: myX,
            y: myY
        }), true);
    }

    setInterval(sendCoords, 1000);

    function mouseEvent(e) {
        myX = (e.clientX * zoomRatio - owotWidth / 2 - positionX) / cellW;
        myY = (e.clientY * zoomRatio - owotHeight / 2 - positionY) / cellH;

        sendCoords();
    }

    document.addEventListener("mousemove", mouseEvent);
    document.addEventListener("wheel", mouseEvent);

    document.addEventListener("mouseout", sendBye);
    window.addEventListener("beforeunload", sendBye);
}();