Agar.io Custom Skin Uploader with Border Fix

Subir imagen como skin personalizada con bordes blancos o negros según color elegido (1=blanco, 2=negro)
换行
// ==UserScript==
// @name         Agar.io Custom Skin Uploader with Border Fix
// @namespace    http://tampermonkey.net/
// @version      1.2
// @description  Subir imagen como skin personalizada con bordes blancos o negros según color elegido (1=blanco, 2=negro)
// @author       Adaptado por ChatGPT
// @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);
    };

    function createUploadButton() {
        const saveBtn = document.querySelector('.btn.btn-info.btn-save');
        if (!saveBtn || document.getElementById('custom-skin-upload')) return;

        const uploadInput = document.createElement('input');
        uploadInput.type = 'file';
        uploadInput.accept = 'image/*';
        uploadInput.style.display = 'none';
        uploadInput.id = 'custom-skin-upload';

        const uploadBtn = document.createElement('button');
        uploadBtn.textContent = 'Subir imagen';
        uploadBtn.className = 'btn btn-primary';
        uploadBtn.style.marginLeft = '10px';
        uploadBtn.onclick = () => uploadInput.click();

        uploadInput.addEventListener('change', async (event) => {
            const file = event.target.files[0];
            if (!file) return;

            const reader = new FileReader();
            reader.onload = async function (e) {
                const img = new Image();
                img.onload = function () {
                    const canvas = document.createElement('canvas');
                    const size = 256;
                    canvas.width = size;
                    canvas.height = size;
                    const ctx = canvas.getContext('2d');

                    // Obtener color seleccionado
                    const selectedColorIndex = getSelectedColorIndex();
                    const borderColor = selectedColorIndex === 1 ? '#FFFFFF' : selectedColorIndex === 2 ? '#000000' : null;

                    // Dibujar borde si corresponde
                    if (borderColor) {
                        const borderWidth = 16;
                        ctx.beginPath();
                        ctx.arc(size / 2, size / 2, size / 2 - borderWidth / 2, 0, Math.PI * 2);
                        ctx.strokeStyle = borderColor;
                        ctx.lineWidth = borderWidth;
                        ctx.stroke();
                        ctx.closePath();
                    }

                    // Recortar imagen en círculo
                    ctx.save();
                    ctx.beginPath();
                    ctx.arc(size / 2, size / 2, size / 2 - 16, 0, Math.PI * 2);
                    ctx.closePath();
                    ctx.clip();
                    ctx.drawImage(img, 0, 0, size, size);
                    ctx.restore();

                    // Subir como skin personalizada
                    const dataUrl = canvas.toDataURL('image/png');
                    const localStorageKey = 'customSkinData';
                    localStorage.setItem(localStorageKey, dataUrl);

                    // Aplicar al juego automáticamente
                    const skinInput = document.querySelector('input[placeholder="URL de skin personalizada"], input[placeholder="Custom skin URL"]');
                    if (skinInput) {
                        skinInput.value = dataUrl;
                        skinInput.dispatchEvent(new Event('input', { bubbles: true }));
                    }
                };
                img.src = e.target.result;
            };
            reader.readAsDataURL(file);
        });

        saveBtn.parentNode.insertBefore(uploadBtn, saveBtn.nextSibling);
        saveBtn.parentNode.insertBefore(uploadInput, uploadBtn.nextSibling);
    }

    function getSelectedColorIndex() {
        const selected = document.querySelector('.skin-color.selected');
        if (!selected) return 0;
        const index = Array.from(document.querySelectorAll('.skin-color')).indexOf(selected);
        return index + 1;
    }

    waitForElement('.btn.btn-info.btn-save', createUploadButton);
})();
欢迎访问Greasy Fork镜像
