Subir imagen personalizada con borde blanco o negro (según color 1 o 2) y botón debajo de los colores.
// ==UserScript==
// @name Agar.io Custom Skin + Color Border
// @namespace agario-custom-skin
// @version 1.0
// @description Subir imagen personalizada con borde blanco o negro (según color 1 o 2) y botón debajo de los colores.
// @author 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);
};
waitForElement('.agario-profile-panel', (panel) => {
// Evitar múltiples inserciones
if (document.getElementById('customSkinUpload')) return;
// Crear input para subir imagen
const input = document.createElement('input');
input.type = 'file';
input.accept = 'image/*';
input.id = 'customSkinUpload';
input.style.marginTop = '10px';
input.style.display = 'block';
// Insertar debajo de los colores
const colorPickerContainer = document.querySelector('.agario-profile-panel .btn-group-justified');
if (colorPickerContainer) {
colorPickerContainer.parentNode.insertBefore(input, colorPickerContainer.nextSibling);
} else {
panel.appendChild(input);
}
input.addEventListener('change', function () {
const file = input.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = function (e) {
const imgData = e.target.result;
localStorage.setItem('customSkinImage', imgData);
alert('Imagen subida. ¡Ahora selecciona el color de borde!');
};
reader.readAsDataURL(file);
});
// Aplicar skin personalizada y borde correcto
const observer = new MutationObserver(() => {
const skinElement = document.querySelector('#canvas') || document.querySelector('.canvas');
if (!skinElement) return;
const imgData = localStorage.getItem('customSkinImage');
if (!imgData) return;
const ctx = skinElement.getContext?.('2d');
if (!ctx) return;
const img = new Image();
img.src = imgData;
img.onload = () => {
// Detectar color seleccionado (colorId = 1 blanco, 2 negro)
const selectedColor = parseInt(localStorage.getItem('cellColor') || "0", 10);
// Dibujar imagen en el centro
const centerX = skinElement.width / 2;
const centerY = skinElement.height / 2;
const radius = 80;
ctx.clearRect(centerX - radius - 10, centerY - radius - 10, radius * 2 + 20, radius * 2 + 20);
ctx.save();
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
ctx.clip();
ctx.drawImage(img, centerX - radius, centerY - radius, radius * 2, radius * 2);
ctx.restore();
// Aplicar borde blanco o negro
ctx.beginPath();
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
ctx.lineWidth = 8;
ctx.strokeStyle = (selectedColor === 1) ? '#FFFFFF' : (selectedColor === 2) ? '#000000' : 'transparent';
ctx.stroke();
};
});
const canvas = document.querySelector('#canvas') || document.querySelector('.canvas');
if (canvas) observer.observe(canvas, { attributes: true, childList: true, subtree: true });
});
})();