Tile investigator by haster

const edits = new Map();

function name(id) {
    const cursor = w.cursors.get(id);

    if (cursor) {
        const username = cursor.n || cursor.id || "Anonymous";
        return `${username} (${id})`;
    }

     return `${id})`;
}

w.socket.addEventListener("message", (e) => {
    const edit = network.text(e.data);
    if (edit && edit.e) {
        const edits_list = edit.e.e;
        const client_id = edit.e.clientId;

        for (let i = 0; i < edits_list.length; i++) {
            const chunk = edits_list[i];
            const chunk_x = chunk[0];
            const chunk_y = chunk[1];

            for (let j = 0; j < Math.floor((chunk.length - 2) / 3); j++) {
                const char_code = chunk[j * 3 + 2];
                let index = chunk[j * 3 + 3];
                const color = chunk[j * 3 + 4];

                const char = String.fromCodePoint(char_code);

                index = ((index % 200) + 200) % 200;

                const local_row = Math.floor(index / 20);
                const local_col = index % 20;

                const global_x = (chunk_x * 20) + local_col;
                const global_y = (chunk_y * 10) + local_row;
                const cell_key = `${global_x},${global_y}`;

                edits.set(cell_key, {
                    char: char,
                    color: color,
                    id: client_id,
                    name: name(client_id),
                    timestamp: new Date().toLocaleTimeString()
                });
            }
        }
    }
});

function who_wrote_char(x, y) {
    const cell_key = `${x},${y}`;
    const data = edits.get(cell_key);

    if (!data) {
        w.showToast(`No edits recorded for (${x}, ${y})`, 3000);
        return null;
    }

    data.name = name(data.id);

    w.showToast(`(${x}, ${y}): "${data.char}" by ${data.name}`, 4000);

    return data;
}

function start_investigation() {
    w.showToast("Click an edit that has been recently updated.", 3000);

    const target_element = document.body;
    const original_cursor = target_element.style.cursor;
    target_element.style.cursor = "cell";

    const handle_canvas_click = (e) => {
        e.preventDefault();
        e.stopPropagation();

        const coords = getXYCoordsFromMouseCoords({ pageX: e.pageX, pageY: e.pageY });
        who_wrote_char(coords.x, coords.y);

        target_element.style.cursor = original_cursor;
        document.querySelector("canvas").removeEventListener("click", handle_canvas_click, true);
    };

    document.querySelector("canvas").addEventListener("click", handle_canvas_click, true);
}

function ui() {
    const bubbles_container = document.getElementById("bubbles");
    if (!bubbles_container) return;

    if (document.getElementById("Investigate")) return;

    const bubble = document.createElement("div");
    bubble.title = "Investigate";
    bubble.className = "bubble clickable";
    bubble.id = "Investigate";
    bubble.style = "background-color: rgba(100.0.0.0.8);border: 2px solid rgba(139.0.0.0.6);"

    const img = document.createElement("img");
    img.id = "investigatebtn";
    img.alt = "investigate";
    img.src = "https://uxwing.com/wp-content/themes/uxwing/download/user-interface/search-magnifying-glass-white-icon.png";
    img.style = "width: 22px;height: 202x";
    img.className = "nohover";

    bubble.appendChild(img);
    bubbles_container.appendChild(bubble);

    bubble.addEventListener("click", () => {
        start_investigation();
    });
}

ui();