Allows uploading a custom skin and choosing border color in Agar.io with correct layout
// ==UserScript==
// @name Agar.io Custom Skin with Border Color (Corrected Layout)
// @namespace http://tampermonkey.net/
// @version 0.3
// @description Allows uploading a custom skin and choosing border color in Agar.io with correct layout
// @author You
// @match https://agar.io/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
// Wait for the page to fully load
window.addEventListener('load', function() {
// Wait until the game's skin settings appear in the UI
const interval = setInterval(() => {
const controls = document.querySelector('.control-panel');
if (controls) {
clearInterval(interval);
// Create an input for uploading the image
const uploadButton = document.createElement('input');
uploadButton.type = 'file';
uploadButton.accept = 'image/*';
uploadButton.id = 'uploadImageButton';
uploadButton.style.marginLeft = '10px';
uploadButton.style.marginRight = '10px';
// Create a select dropdown for choosing the border color
const colorSelector = document.createElement('select');
colorSelector.innerHTML = `
<option value="1">White Border</option>
<option value="2">Black Border</option>
<option value="3">Red Border</option>
`;
// Create a div to contain the upload button and color selector
const skinControlDiv = document.createElement('div');
skinControlDiv.style.display = 'flex';
skinControlDiv.style.alignItems = 'center';
skinControlDiv.appendChild(uploadButton);
skinControlDiv.appendChild(colorSelector);
// Insert the skin control div into the control panel
controls.appendChild(skinControlDiv);
// Function to handle the image upload and convert it to dataURL
uploadButton.addEventListener('change', function(e) {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(event) {
const imageDataURL = event.target.result;
// Set the skin with the uploaded image
const skin = document.getElementById('skin');
if (skin) {
skin.src = imageDataURL;
}
};
reader.readAsDataURL(file);
}
});
// Function to handle applying the border color in the game
colorSelector.addEventListener('change', function(e) {
const selectedColor = e.target.value;
let borderColor = '';
// Map the selected color to the corresponding color code
switch (selectedColor) {
case '1':
borderColor = 'white';
break;
case '2':
borderColor = 'black';
break;
case '3':
borderColor = 'red';
break;
default:
borderColor = 'white';
}
// Apply the border color to the skin (this is handled by Agar.io in the game)
if (window.player) {
window.player.setSkinBorderColor(borderColor);
}
});
}
}, 100); // Check every 100ms for the control panel
});
})();