// ==UserScript==
// @name         CyberSoul Animes Overlay
// @namespace    https://discord.gg/7bYHWYgb
// @version      1.1.0
// @description  CyberSoul Animes Alliance Overlay
// @author       Víkish
// @match        https://wplace.live/*
// @icon         https://i.imgur.com/TBeJokm.jpeg
// @grant        none
// @license      MIT
// @downloadURL none
// ==/UserScript==

(function () {
    'use strict';

    const images = [
        {
            url: "https://i.imgur.com/jkHLyev.png",
            x: 731250,
            y: 1193250,
        },
        {
            url: "https://i.imgur.com/5pxoJYg.png",
            x: 732000,
            y: 1202280,
        }
    ];

    const toggleButton = document.createElement('button');
    toggleButton.textContent = '🖼️ Overlay';
    toggleButton.style.position = 'fixed';
    toggleButton.style.top = '10px';
    toggleButton.style.left = '10px';
    toggleButton.style.zIndex = 10000;
    toggleButton.style.padding = '5px 10px';
    toggleButton.style.backgroundColor = '#222';
    toggleButton.style.color = '#fff';
    toggleButton.style.border = '1px solid #555';
    toggleButton.style.cursor = 'pointer';

    let overlaysVisible = true;
    const overlayImages = [];

    toggleButton.onclick = () => {
        overlaysVisible = !overlaysVisible;
        overlayImages.forEach(img => {
            img.style.display = overlaysVisible ? 'block' : 'none';
        });
    };

    document.body.appendChild(toggleButton);

    const canvasObserver = new MutationObserver(() => {
        const canvas = document.querySelector('canvas');
        if (!canvas) return;

        const rect = canvas.getBoundingClientRect();
        const parent = canvas.parentElement;

        images.forEach(({ url, x, y }) => {
            const img = document.createElement('img');
            img.src = url;
            img.style.position = 'absolute';
            img.style.left = '0';
            img.style.top = '0';
            img.style.width = '4000px';
            img.style.height = '4000px';
            img.style.imageRendering = 'pixelated';
            img.style.pointerEvents = 'none';
            img.style.zIndex = 5;
            img.style.transform = `translate(${x}px, ${y}px)`;
            img.style.display = 'block';
            overlayImages.push(img);
            parent.appendChild(img);
        });

        canvasObserver.disconnect();
    });

    canvasObserver.observe(document.body, { childList: true, subtree: true });
})();