☰

Agar.io Custom Skin Border

Agrega bordes personalizables a las skins en Agar.io

  1. // ==UserScript==
  2. // @name         Agar.io Custom Skin Border
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  Agrega bordes personalizables a las skins en Agar.io
  6. // @author       Tú
  7. // @match        https://agar.io/*
  8. // @grant        none
  9. // ==/UserScript==
  10. (function() {
  11.     'use strict';
  12.  
  13.     // Esperar a que la página cargue completamente
  14.     window.addEventListener('load', function() {
  15.         setTimeout(() => {
  16.             // Esperar a que los controles de color de la skin estén disponibles
  17.             const colorSelectorContainer = document.querySelector('.skin-selector'); // Ajusta este selector si es necesario
  18.  
  19.             if (colorSelectorContainer) {
  20.                 // Crear los botones
  21.                 const uploadButton = document.createElement('button');
  22.                 uploadButton.innerText = 'Subir imagen';
  23.                 uploadButton.style.margin = '10px';
  24.                 uploadButton.style.padding = '10px';
  25.  
  26.                 const whiteBorderButton = document.createElement('button');
  27.                 whiteBorderButton.innerText = 'Borde Blanco';
  28.                 whiteBorderButton.style.margin = '10px';
  29.                 whiteBorderButton.style.padding = '10px';
  30.  
  31.                 const blackBorderButton = document.createElement('button');
  32.                 blackBorderButton.innerText = 'Borde Negro';
  33.                 blackBorderButton.style.margin = '10px';
  34.                 blackBorderButton.style.padding = '10px';
  35.  
  36.                 // Insertar los botones en el contenedor de los controles de color
  37.                 colorSelectorContainer.appendChild(uploadButton);
  38.                 colorSelectorContainer.appendChild(whiteBorderButton);
  39.                 colorSelectorContainer.appendChild(blackBorderButton);
  40.  
  41.                 // Función para subir la imagen
  42.                 uploadButton.addEventListener('click', () => {
  43.                     const input = document.createElement('input');
  44.                     input.type = 'file';
  45.                     input.accept = 'image/*';
  46.                     input.addEventListener('change', (event) => {
  47.                         const file = event.target.files[0];
  48.                         if (file) {
  49.                             const reader = new FileReader();
  50.                             reader.onload = function(e) {
  51.                                 const imgUrl = e.target.result;
  52.                                 // Subir la imagen y aplicarla como skin
  53.                                 applyCustomSkin(imgUrl);
  54.                             };
  55.                             reader.readAsDataURL(file);
  56.                         }
  57.                     });
  58.                     input.click();
  59.                 });
  60.  
  61.                 // Función para aplicar la skin personalizada
  62.                 function applyCustomSkin(imgUrl) {
  63.                     window.localStorage.setItem('customSkin', imgUrl);
  64.                     document.querySelector('canvas').style.backgroundImage = `url(${imgUrl})`;
  65.                 }
  66.  
  67.                 // Función para aplicar borde blanco
  68.                 whiteBorderButton.addEventListener('click', () => {
  69.                     applyBorder('white');
  70.                 });
  71.  
  72.                 // Función para aplicar borde negro
  73.                 blackBorderButton.addEventListener('click', () => {
  74.                     applyBorder('black');
  75.                 });
  76.  
  77.                 // Función para aplicar el borde a la skin
  78.                 function applyBorder(color) {
  79.                     const canvas = document.querySelector('canvas');
  80.                     if (!canvas) return;
  81.                     const ctx = canvas.getContext('2d');
  82.                     const img = new Image();
  83.                     img.src = window.localStorage.getItem('customSkin');
  84.                     img.onload = function() {
  85.                         ctx.clearRect(0, 0, canvas.width, canvas.height);
  86.                         ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
  87.                         // Aplicar borde
  88.                         ctx.strokeStyle = color;
  89.                         ctx.lineWidth = 10;
  90.                         ctx.strokeRect(0, 0, canvas.width, canvas.height);
  91.                     };
  92.                 }
  93.             }
  94.         }, 1000);  // Espera de 1 segundo antes de ejecutar, para asegurar que los elementos de la página estén cargados
  95.     });
  96. })();