CLN PixelRadar

CL.NET PixelRadar
换行
// ==UserScript==
// @name         CLN PixelRadar
// @namespace    https://tampermonkey.net/
// @version      0.1
// @description  CL.NET PixelRadar
// @author       mftkwww
// @grant        none
// @connect      githubusercontent.com
// @connect      github.com
// @connect      canvasland.net
// @match        *://canvasland.net/*
// ==/UserScript==

let notificationRadius = 300;
const NOTIFICATION_TIME = 2000;

let pixelList = [];
let canvas;
let notifCircles = [];
let mapPointer;

const args = window.location.href.split(',');
let globalScale = 1;
let viewX = parseInt(args[args.length - 3]);
let viewY = parseInt(args[args.length - 2]);


let mapPoints = []
let shablonHash = '';

const PING_OP = 0xB0;
const REG_MCHUNKS_OP = 0xA3;
const PIXEL_UPDATE_OP = 0xC1;
const REG_CANVAS_OP = 0xA0;

if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", init);
} else {
    init();
}

function init() {
    setTimeout(shablonMain);
    setTimeout(radarMain);
}

async function shablonMain() {
    addModal();
    addButton();
    await updateInfo(false);
    setInterval(updateInfo, 60000);
}

async function updateInfo(show = true) {
    const info = await loadInfo(src_info);

    const modal_text = document.querySelector('#modal_text');
    if (info.text.length === 0) {
        modal_text.innerHTML = 'Z'
    } else if (info.text !== modal_text.innerHTML) {
        modal_text.innerHTML = info.text;
        if (show) showModal();
    }

    mapPoints = info.points;

    if (info.pic_hash !== shablonHash) {
        shablonHash = info.pic_hash;
        const file = await loadFile(src_picture);
        if (isTemplateExists(templateName)) {
            updateTemplate(file, info, templateName);
        } else {
            addTemplate(file, info, templateName);
        }
    }
}


function closeModal() {
    const modal = document.querySelector('#my_modal');
    if (modal) modal.style.display = 'none';
}

function showModal() {
    const modal = document.querySelector('#my_modal');
    if (modal) modal.style.display = 'block';
}

function addTemplate(file, coords, name) {
    templateLoader.addFile(
        file,
        name,
        "0",
        coords.x,
        coords.y
    );
}

function isTemplateExists(name) {
    return findTemplate(name) !== undefined;
}

function findTemplate(name) {
    const list = getNativeTemplates();
    return list.find(t => name === t.title);
}


function getNativeTemplates() {
    return JSON.parse(JSON.parse(localStorage['persist:tem']).list);
}

function updateTemplate(file, coords, name) {
    templateLoader.deleteTemplate(name);
    addTemplate(file, coords, name);
}

async function loadFile(src) {
    const resp = await fetch(src);
    const blob = await resp.blob();
    return new File([blob], 'result.png', {
        type: 'image/png',
    });
}

async function loadInfo(src) {
    const resp = await fetch(src);
    return await resp.json();
}

async function loadColors() {
    const resp = await fetch('/api/me');
    const data = await resp.json();
    for (const [key, canvas] of Object.entries(data['canvases'])) {
        if (canvas['ident'] === window.location.hash.substring(1, 2))
            return canvas['colors'];
    }
    return [
        [202, 227, 255],
        [255, 255, 255],
        [255, 255, 255],
        [228, 228, 228],
        [196, 196, 196],
        [136, 136, 136],
        [78, 78, 78],
        [0, 0, 0],
        [244, 179, 174],
        [255, 167, 209],
        [255, 84, 178],
        [255, 101, 101],
        [229, 0, 0],
        [154, 0, 0],
        [254, 164, 96],
        [229, 149, 0],
        [160, 106, 66],
        [96, 64, 40],
        [245, 223, 176],
        [255, 248, 137],
        [229, 217, 0],
        [148, 224, 68],
        [2, 190, 1],
        [104, 131, 56],
        [0, 101, 19],
        [202, 227, 255],
        [0, 211, 221],
        [0, 131, 199],
        [0, 0, 234],
        [25, 25, 115],
        [207, 110, 228],
        [130, 0, 128],
        [83, 39, 68],
        [125, 46, 78],
        [193, 55, 71],
        [214, 113, 55],
        [252, 154, 41],
        [68, 33, 57],
        [131, 51, 33],
        [163, 61, 24],
        [223, 96, 22],
        [31, 37, 127],
        [10, 79, 175],
        [10, 126, 230],
        [88, 237, 240],
        [37, 20, 51],
        [53, 33, 67],
        [66, 21, 100],
        [74, 27, 144],
        [110, 75, 237],
        [16, 58, 47],
        [16, 74, 31],
        [16, 142, 47],
        [16, 180, 47],
        [117, 215, 87]
    ];
}

function worldToScreen(x, y) {
    return [
        ((x - viewX) * globalScale) + (canvas.width / 2),
        ((y - viewY) * globalScale) + (canvas.height / 2),
    ];
}

function render() {
    try {
        const ctx = canvas.getContext('2d');
        ctx.clearRect(0, 0, canvas.width, canvas.height)
        if (globalScale < 0.8) {
            for (let index = 0; index < mapPoints.length; index++) {
                const point = mapPoints[index];
                if (point.site !== window.location.host || point.canvas !== window.location.hash.substring(1, 2))
                    continue;
                const [sx, sy] = worldToScreen(point.x, point.y)
                    .map((z) => z + globalScale / 2);
                const circleScale = notificationRadius / 100;
                ctx.save();
                ctx.scale(circleScale, circleScale);
                ctx.drawImage(
                    mapPointer,
                    Math.round(sx / circleScale - 150),
                    Math.round(sy / circleScale - 150),
                );
                ctx.restore();
            }
            const curTime = Date.now();
            for (let index = pixelList.length - 1; index >= 0; index--) {
                let [setTime, x, y, i, j, color] = pixelList[index];
                const timePassed = curTime - setTime;
                if (timePassed > NOTIFICATION_TIME) {
                    pixelList.splice(index, 1);
                    continue;
                }
                const [sx, sy] = worldToScreen(x, y)
                    .map((z) => z + globalScale / 2);
                const notRadius = timePassed / NOTIFICATION_TIME * notificationRadius;
                const circleScale = notRadius / 100;
                ctx.save();
                ctx.scale(circleScale, circleScale);
                ctx.drawImage(
                    notifCircles[color],
                    Math.round(sx / circleScale - 105),
                    Math.round(sy / circleScale - 105),
                );
                ctx.restore();
            }
        }
    } catch (err) {
        console.error(`Render error`, err,);
    }
    setTimeout(render, 10);
}

function addPixel(x, y, i, j, color) {
    for (let k = 0; k < pixelList.length; k++) {
        if (pixelList[k][3] === i && pixelList[k][4] === j) {
            pixelList[k][1] = x;
            pixelList[k][2] = y;
            pixelList[k][5] = color;
            return;
        }
    }
    pixelList.unshift([Date.now(), x, y, i, j, color]);
}

function getPixelFromChunkOffset(i, j, offset, canvasSize) {
    const tileSize = 256;
    const x = i * tileSize - canvasSize / 2 + offset % tileSize;
    const y = j * tileSize - canvasSize / 2 + Math.trunc(offset / tileSize);
    //const x = i * tileSize - canvasSize / 2 + 128;
    //const y = j * tileSize - canvasSize / 2 + 128;
    return [x, y];
}

function renderPixel(i, j, offset, color) {
    const canvasSize = 65536;
    const [x, y] = getPixelFromChunkOffset(i, j, offset, canvasSize);
    addPixel(x, y, i, j, color);
}

function renderPixels({i, j, pixels}) {
    const pxl = pixels[pixels.length - 1];
    const [offset, color] = pxl;
    renderPixel(i, j, offset, color);
}

function clamp(n, min, max) {
    return Math.max(min, Math.min(n, max));
}

function updateScale(viewscale) {
    globalScale = viewscale;
    notificationRadius = clamp(viewscale * 10, 20, 400);
}

function updateView(val) {
    viewX = val[0];
    viewY = val[1];
}

function onWindowResize() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}

function dehydratePing() {
    return new Uint8Array([PING_OP]).buffer;
}

function dehydrateRegMChunks(chunks) {
    const buffer = new ArrayBuffer(1 + 1 + chunks.length * 2);
    const view = new Uint16Array(buffer);
    // this will result into a double first byte, but still better than
    // shifting 16bit integers around later
    view[0] = REG_MCHUNKS_OP;
    for (let cnt = 0; cnt < chunks.length; cnt += 1) {
        view[cnt + 1] = chunks[cnt];
    }
    return buffer;
}

function hydratePixelUpdate(data) {
    const i = data.getUint8(1);
    const j = data.getUint8(2);
    /*
     * offset and color of every pixel
     * 3 bytes offset
     * 1 byte color
     */
    const pixels = [];
    let off = data.byteLength;
    while (off > 3) {
        const color = data.getUint8(off -= 1);
        const offsetL = data.getUint16(off -= 2);
        const offsetH = data.getUint8(off -= 1) << 16;
        pixels.push([offsetH | offsetL, color]);
    }
    return {
        i, j, pixels,
    };
}

function onBinaryMessage(buffer) {
    if (buffer.byteLength === 0) return;
    const data = new DataView(buffer);
    const opcode = data.getUint8(0);
    if (opcode === PIXEL_UPDATE_OP || opcode === 145) {
        renderPixels(hydratePixelUpdate(data));
    }
}

function dehydrateRegCanvas(canvasId) {
    const buffer = new ArrayBuffer(1 + 1);
    const view = new DataView(buffer);
    view.setInt8(0, REG_CANVAS_OP);
    view.setInt8(1, Number(canvasId));
    return buffer;
}

function onMessage({data: message}) {
    try {
        if (typeof message !== 'string') {
            onBinaryMessage(message);
        }
    } catch (err) {
        console.error(`An error occurred while parsing websocket message ${message}`, err,);
    }
}

function socketConnect(i, url, allChunks) {
    const ws = new WebSocket(url);
    ws.binaryType = 'arraybuffer';
    ws.onopen = () => {
        console.log(`Socket ${i} opened`);
        ws.send(dehydrateRegCanvas(0));
        const chunkids = [];
        for (let j = 17000 * i; j < 17000 * (i + 1) && j < allChunks.length; j++) {
            chunkids.push(allChunks[j]);
        }
        ws.send(dehydrateRegMChunks(chunkids));
    };
    ws.onmessage = onMessage;
    ws.onclose = () => {
        console.log(`Socket ${i} closed`);
        setTimeout(() => {
            socketConnect(i, url, allChunks)
        }, 1000);
    };
    ws.onerror = (err) => {
        console.error('Socket encountered error, closing socket', err);
    };
    setInterval(() => {
        if (ws.readyState !== WebSocket.CLOSED) {
            ws.send(dehydratePing());
        }
    }, 23000)
}

async function radarMain() {
    canvas = document.createElement('canvas');
    canvas.style.position = 'fixed';
    canvas.style.top = '0';
    canvas.style.left = '0';
    canvas.style.zIndex = '0';
    canvas.style.pointerEvents = 'none';
    onWindowResize();
    const ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    document.body.appendChild(canvas);

    window.addEventListener('resize', onWindowResize);

    const colors = await loadColors();
    colors.forEach(color => {
        const notifCircle = document.createElement('canvas');
        notifCircle.width = 210;
        notifCircle.height = 210;
        const notifcontext = notifCircle.getContext('2d');
        notifcontext.fillStyle = `rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.7)`;
        notifcontext.beginPath();
        notifcontext.arc(105, 105, 100, 0, 2 * Math.PI);
        notifcontext.closePath();
        notifcontext.fill();
        notifcontext.lineWidth = 5;
        notifcontext.strokeStyle = '#FF0000';
        notifcontext.stroke();
        notifCircles.push(notifCircle);
    })

    mapPointer = document.createElement('canvas');
    mapPointer.width = 300;
    mapPointer.height = 300;
    const pointercontext = mapPointer.getContext('2d');
    const img = document.createElement("img");
    img.addEventListener("load", () => {
        pointercontext.drawImage(img, 0, 0);
    });
    img.src = ".................";

    pixelPlanetEvents.on('setscale', updateScale);
    pixelPlanetEvents.on('setviewcoordinates', updateView);

    setTimeout(render, 10);

    const url = `${
        window.location.protocol === 'https:' ? 'wss:' : 'ws:'
    }//${
        window.location.host
    }/ws`;
    const allChunks = []
    for (let i = 0; i <= 255; i++) {
        for (let j = 0; j <= 255; j++) {
            allChunks.push((i << 8) | j);
        }
    }
    for (let i = 0; i < 4; i++) {
        setTimeout(() => {
            socketConnect(i, url, allChunks)
        });
    }
}
欢迎访问Greasy Fork镜像
