☰

Skin Border Mejorado

Aplica automáticamente un borde circular a la skin en Agar.io y permite descargarla.

// ==UserScript==
// @name         Skin Border Mejorado
// @namespace    http://tampermonkey.net/
// @version      0.3
// @description  Aplica automáticamente un borde circular a la skin en Agar.io y permite descargarla.
// @author       Tu nombre
// @match        *://agar.io/*
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    const waitForElement = (selector, callback) => {
        const interval = setInterval(() => {
            const el = document.querySelector(selector);
            if (el) {
                clearInterval(interval);
                callback(el);
            }
        }, 500);
    };

    waitForElement('.skinColors', (colorContainer) => {
        const borderColorInput = document.createElement('input');
        borderColorInput.type = 'color';
        borderColorInput.value = '#000000';
        borderColorInput.title = 'Color del borde';
        borderColorInput.style.marginLeft = '10px';

        const borderWidthInput = document.createElement('input');
        borderWidthInput.type = 'number';
        borderWidthInput.value = '2';
        borderWidthInput.min = '1';
        borderWidthInput.max = '10';
        borderWidthInput.style.width = '50px';
        borderWidthInput.style.marginLeft = '10px';
        borderWidthInput.title = 'Grosor del borde';

        const downloadButton = document.createElement('button');
        downloadButton.textContent = 'Descargar skin';
        downloadButton.style.marginLeft = '10px';

        colorContainer.appendChild(borderColorInput);
        colorContainer.appendChild(borderWidthInput);
        colorContainer.appendChild(downloadButton);

        // Función para aplicar borde a la imagen
        const applyBorder = () => {
            const skinImg = document.querySelector('.skinPreview img');
            if (skinImg) {
                skinImg.style.border = `${borderWidthInput.value}px solid ${borderColorInput.value}`;
                skinImg.style.borderRadius = '50%';
            }
        };

        // Aplicar automáticamente el borde al cambiar los valores
        borderColorInput.addEventListener('input', applyBorder);
        borderWidthInput.addEventListener('input', applyBorder);

        // Observar cambios en la imagen (por si se sube una nueva)
        const observer = new MutationObserver(applyBorder);
        const targetNode = document.querySelector('.skinPreview');
        if (targetNode) {
            observer.observe(targetNode, { childList: true, subtree: true });
        }

        // Descargar la skin con borde como PNG
        downloadButton.addEventListener('click', () => {
            const skinImg = document.querySelector('.skinPreview img');
            if (!skinImg) return;

            const canvas = document.createElement('canvas');
            const size = 256;
            canvas.width = size;
            canvas.height = size;
            const ctx = canvas.getContext('2d');

            const image = new Image();
            image.crossOrigin = 'anonymous';
            image.src = skinImg.src;
            image.onload = () => {
                ctx.beginPath();
                ctx.arc(size / 2, size / 2, size / 2 - parseInt(borderWidthInput.value), 0, Math.PI * 2);
                ctx.closePath();
                ctx.clip();
                ctx.drawImage(image, 0, 0, size, size);

                ctx.lineWidth = parseInt(borderWidthInput.value);
                ctx.strokeStyle = borderColorInput.value;
                ctx.beginPath();
                ctx.arc(size / 2, size / 2, size / 2 - parseInt(borderWidthInput.value) / 2, 0, Math.PI * 2);
                ctx.stroke();

                const link = document.createElement('a');
                link.download = 'skin_con_borde.png';
                link.href = canvas.toDataURL();
                link.click();
            };
        });

        // Aplicar el borde una vez al cargar
        applyBorder();
    });
})();