☰

Agar.io image to custom skin + border colors

Upload image for custom skin WITHOUT drawing a border on the image. Uses game system to apply white/black border via color index.

// ==UserScript==
// @name         Agar.io image to custom skin + border colors
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Upload image for custom skin WITHOUT drawing a border on the image. Uses game system to apply white/black border via color index.
// @author       New Jack 🕹️ + mod by ChatGPT
// @match        agar.io/*
// @grant        none
// @license      MIT
// ==/UserScript==

(function () {
  'use strict';

  let selectedColorIndex = 0;

  function createButton() {
    const button = document.createElement("input");
    button.type = "file";
    button.accept = "image/*";
    button.id = "customImageUpload";
    return button;
  }

  function insertButton(button, target) {
    if (target && !document.getElementById("customImageUpload")) {
      const newDiv = document.createElement("div");
      newDiv.style.marginTop = "5px";
      newDiv.appendChild(button);
      target.querySelector(".clear").appendChild(newDiv);
    }
  }

  function convertImageToBase64(event) {
    const file = event.target.files[0];
    const reader = new FileReader();
    reader.onloadend = function () {
      const base64 = reader.result;
      localStorage.setItem("customSkinImage", base64);
      alert("✅ Imagen cargada correctamente. Presiona 'Save' para aplicar la skin.");
    };
    reader.readAsDataURL(file);
  }

  function hookColorSelector() {
    const observer = new MutationObserver(() => {
      const colorButtons = document.querySelectorAll(".skinColor");
      colorButtons.forEach((btn, idx) => {
        btn.addEventListener("click", () => {
          selectedColorIndex = idx + 1;
          localStorage.setItem("selectedColorIndex", selectedColorIndex);
        });
      });
    });
    observer.observe(document.body, { childList: true, subtree: true });
  }

  function applySkinOnSave() {
    document.addEventListener("click", function (e) {
      if (e.target && e.target.matches(".btn.btn-success")) {
        const img = localStorage.getItem("customSkinImage");
        if (img) {
          localStorage.setItem("customSkin", img);

          // Manipula color 1 y 2 como bordes blancos y negros
          const colorIndex = parseInt(localStorage.getItem("selectedColorIndex"));
          if (colorIndex === 1) {
            localStorage.setItem("selectedColor", "#FFFFFF");
          } else if (colorIndex === 2) {
            localStorage.setItem("selectedColor", "#000000");
          }
        }
      }
    });
  }

  function init() {
    const interval = setInterval(() => {
      const target = document.querySelector(".skin-custom");
      if (target) {
        clearInterval(interval);
        const button = createButton();
        button.addEventListener("change", convertImageToBase64);
        insertButton(button, target);
        hookColorSelector();
        applySkinOnSave();
      }
    }, 1000);
  }

  init();
})();