☰

Agar.io Custom Skin Border

Agrega bordes personalizables a las skins en Agar.io

// ==UserScript==
// @name         Agar.io Custom Skin Border
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Agrega bordes personalizables a las skins en Agar.io
// @author       Tú
// @match        https://agar.io/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Esperar a que la página cargue completamente
    window.addEventListener('load', function() {
        setTimeout(() => {
            // Crear los botones
            const uploadButton = document.createElement('button');
            uploadButton.innerText = 'Subir imagen';
            uploadButton.style.margin = '10px';
            uploadButton.style.padding = '10px';

            const whiteBorderButton = document.createElement('button');
            whiteBorderButton.innerText = 'Borde Blanco';
            whiteBorderButton.style.margin = '10px';
            whiteBorderButton.style.padding = '10px';

            const blackBorderButton = document.createElement('button');
            blackBorderButton.innerText = 'Borde Negro';
            blackBorderButton.style.margin = '10px';
            blackBorderButton.style.padding = '10px';

            // Estilo para los botones
            const buttonContainer = document.createElement('div');
            buttonContainer.style.position = 'absolute';
            buttonContainer.style.top = '10px';
            buttonContainer.style.left = '50%';
            buttonContainer.style.transform = 'translateX(-50%)';
            buttonContainer.style.zIndex = 9999;
            buttonContainer.style.display = 'flex';
            buttonContainer.style.flexDirection = 'row';
            buttonContainer.style.alignItems = 'center';
            buttonContainer.style.justifyContent = 'center';

            // Insertar los botones en el contenedor
            buttonContainer.appendChild(uploadButton);
            buttonContainer.appendChild(whiteBorderButton);
            buttonContainer.appendChild(blackBorderButton);
            document.body.appendChild(buttonContainer);

            // Función para subir la imagen
            uploadButton.addEventListener('click', () => {
                const input = document.createElement('input');
                input.type = 'file';
                input.accept = 'image/*';

                input.addEventListener('change', (event) => {
                    const file = event.target.files[0];
                    if (file) {
                        const reader = new FileReader();
                        reader.onload = function(e) {
                            const imgUrl = e.target.result;
                            // Subir la imagen y aplicarla como skin
                            applyCustomSkin(imgUrl);
                        };
                        reader.readAsDataURL(file);
                    }
                });

                input.click();
            });

            // Función para aplicar la skin personalizada
            function applyCustomSkin(imgUrl) {
                window.localStorage.setItem('customSkin', imgUrl);
                document.querySelector('canvas').style.backgroundImage = `url(${imgUrl})`;
            }

            // Función para aplicar borde blanco
            whiteBorderButton.addEventListener('click', () => {
                applyBorder('white');
            });

            // Función para aplicar borde negro
            blackBorderButton.addEventListener('click', () => {
                applyBorder('black');
            });

            // Función para aplicar el borde a la skin
            function applyBorder(color) {
                const canvas = document.querySelector('canvas');
                if (!canvas) return;

                const ctx = canvas.getContext('2d');
                const img = new Image();
                img.src = window.localStorage.getItem('customSkin');

                img.onload = function() {
                    ctx.clearRect(0, 0, canvas.width, canvas.height);
                    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

                    // Aplicar borde
                    ctx.strokeStyle = color;
                    ctx.lineWidth = 10;
                    ctx.strokeRect(0, 0, canvas.width, canvas.height);
                };
            }
        }, 1000);  // Espera de 1 segundo antes de ejecutar, para asegurar que los elementos de la página estén cargados
    });
})();