☰

Agar.io---Chat, Minimap, Bar Remover, Custom Skins, Skin Maker

Adds a draggable chat interface with sound notifications, disappearing messages, ad bar remover, game ip, custom skin upload, use skin urls and minimap.

// ==UserScript==
// @name         Agar.io---Chat, Minimap, Bar Remover, Custom Skins, Skin Maker
// @namespace    All in one mod, doesnt add cheats.
// @version      0.5
// @description  Adds a draggable chat interface with sound notifications, disappearing messages, ad bar remover, game ip, custom skin upload, use skin urls and minimap.
// @author       𝓝𝑒ⓦ 𝓙ⓐ¢𝓀🕹️
// @match        https://agar.io/*
// @grant        none
// @run-at       document-idle
// @license MIT
// ==/UserScript==
(function() {
    'use strict';

    // Utility functions
    function createAudioElement(audioUrl) {
        const audio = new Audio(audioUrl);
        return audio;
    }

    const messageSound = createAudioElement('https://jimboy3100.github.io/notification_01.mp3');
    const openSound = createAudioElement('https://jimboy3100.github.io/sounds/notification-open.mp3');
    let musicOn = true; // Variable to track music state

    // Append styles
    const style = document.createElement('style');
    document.head.appendChild(style);
    style.textContent = `
        .send-button, .resize-handle, .toggle-button, .info-box, .status-indicator, .toast, .styled-button {
            flex-shrink: 0;
            background-color: #54c800;
            color: white;
            padding: 8px 16px;
            border: none;
            width: 25%;
            cursor: pointer;
            border-radius: 4px;
        }
        .send-button:hover, .toggle-button:hover, .styled-button:hover, .gameIPBox:hover {
            background-color: #3d8b00;
        }
        .send-button:active, .send-button.active, .toggle-button.active, .styled-button:active {
            background-color: #296600;
        }
        .draggable, .toast {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 25%;
            height: 400px;
            background-color: rgba(0,0,0,.2);
            display: flex;
            flex-direction: column;
            cursor: move;
            overflow: hidden;
        }
        .resize-handle {
            position: absolute;
            bottom: 0;
            right: 0;
            width: 10px;
            height: 10px;
            background-color: #ccc;
            cursor: nwse-resize;
        }
        .close-button, .status-indicator {
            position: absolute;
            right: 0;
            padding: 2px 5px;
            cursor: pointer;
            color: white;
        }
        .close-button {
            top: 0;
            background-color: red;
        }
        .status-indicator {
            bottom: 0;
            left: 1px;
            width: 25%;
            text-align: center;
        }
        .info-box {
            background-color: #0077ff;
        }
        #settingsContainer {
            display: flex;
            justify-content: space-around;
            padding: 10px;
            background: rgba(0,0,0,.2);
            color: white;
        }
        .toast {
            bottom: 10%;
            left: 50%;
            transform: translateX(-50%);
            background-color: #333;
            color: white;
            padding: 10px;
            border-radius: 5px;
            text-align: center;
            z-index: 1000;
            display: none;
        }
        .toaster {
    visibility: hidden;
    min-width: 250px;
    margin-left: -125px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 2px;
    padding: 16px;
    position: fixed;
    z-index: 1;
    left: 50%;
    bottom: 30px;
    font-size: 17px;
    transition: visibility 0.5s, opacity 0.5s ease-out;
}
.toaster.show {
    visibility: visible;
    opacity: 1;
}
        .icon-container {
            position: absolute;
            bottom: 10px;
            left: 10px;
            display: flex;
            color: white;
        }
        #funStuffPopup {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80%;
            height: 80%;
            background-color: white;
            border: 2px solid #54c800;
            z-index: 1000;
        }
        #funStuffPopup iframe {
            width: 100%;
            height: 100%;
        }
        #funStuffPopupClose {
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: red;
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
        }
    `;

    const getUsernameFromStorage = () => {
        const settingsJson = localStorage.getItem("settings");
        if (settingsJson) {
            try {
                const settings = JSON.parse(settingsJson);
                return settings.lastNick || ''; // Ensure default if undefined
            } catch (e) {
                console.error("Error parsing settings from local storage:", e);
                return ''; // Default to empty if error occurs
            }
        }
        return ''; // Default to empty if no settings
    };

    function getAvatarURL() {
        return localStorage.getItem('avatarURL') || '';
    }

    function setAvatarURL(url) {
        localStorage.setItem('avatarURL', url);
    }

    function showToast(htmlMessage, duration) {
        const toast = document.createElement('div');
        toast.className = 'toast';
        toast.innerHTML = htmlMessage;
        document.body.appendChild(toast);

        toast.style.display = 'block';

        setTimeout(() => {
            if (document.body.contains(toast)) {
                document.body.removeChild(toast);
            }
        }, duration);
    }

    // Main chat container
    const chatDiv = document.createElement('div');
    chatDiv.className = 'draggable';
    document.body.appendChild(chatDiv);

    // Status indicator
    const statusIndicator = document.createElement('div');
    statusIndicator.className = 'status-indicator';
    statusIndicator.textContent = 'Connecting...';
    chatDiv.appendChild(statusIndicator);

    // Create the message container
    const messageContainer = document.createElement("div");
    messageContainer.id = "messageContainer";

    // Create an input for the avatar URL
    const avatarInputContainer = document.createElement("div");
    avatarInputContainer.style.cssText = "padding: 10px; background: rgba(0,0,0,.3);";

    const avatarInputLabel = document.createElement("label");
    avatarInputLabel.textContent = "Avatar URL: ";
     avatarInputLabel.style.color ="white";
    avatarInputLabel.style.background ="transparent";
    avatarInputLabel.title = "Enter the URL of your avatar here, can be a gif, png, jpg, webp whatever, just make sure it ends with the dot img, this is just for chatting";
    avatarInputContainer.appendChild(avatarInputLabel);

    const avatarInput = document.createElement("input");
    avatarInput.type = "text";
    avatarInput.style.color ="white";
    avatarInput.style.width = "90%";
    avatarInput.placeholder = "Enter Image URL";
    avatarInput.style.background ="transparent";
    avatarInput.value = getAvatarURL(); // Set the input value to the stored avatar URL
    avatarInputContainer.appendChild(avatarInput);

    messageContainer.appendChild(avatarInputContainer);

    // Create the input area for messages
    const inputArea = document.createElement("input");
    inputArea.id = "inputArea";
    inputArea.placeholder = "Enter your message";
    inputArea.style.cssText = "width: 75%; flex-grow: 1; padding: 8px; border-radius: 4px; background: rgba(0,0,0,.1); color: white;";
    messageContainer.appendChild(inputArea);

    // Send button
    const sendButton = document.createElement("button");
    sendButton.textContent = "Send";
    sendButton.className = "send-button";
    messageContainer.appendChild(sendButton);

    chatDiv.appendChild(messageContainer);

    const messageArea = document.createElement("div");
    messageArea.style.cssText = "flex-grow: 1; overflow: auto; margin: 5px; padding: 5px; background: rgba(0,0,0,.1); color: white;";
    chatDiv.appendChild(messageArea);

    // Function to handle sending messages
    function sendMessage() {
        const avatarURL = avatarInput.value.trim() || getAvatarURL();
        setAvatarURL(avatarURL); // Store the avatar URL in localStorage
        const message = {
            name: getUsernameFromStorage().trim() || "Anonymous",
            text: inputArea.value.trim(),
            avatar: avatarURL // Use the avatar URL from the input
        };

        if (message.text) {
            socket.send(JSON.stringify(message));
            inputArea.value = ""; // Clear input after sending
            simulateButtonClick(); // Visual feedback for button press
        }
    }

    function simulateButtonClick() {
        sendButton.classList.add("active");
        setTimeout(() => {
            sendButton.classList.remove("active");
        }, 100);
    }

    sendButton.addEventListener("click", sendMessage);
    inputArea.addEventListener("keypress", function (event) {
        if (event.key === "Enter" && !event.shiftKey) {
            event.preventDefault();
            sendMessage();
        }
    });

    inputArea.addEventListener("keydown", function (event) {
        if (event.key === " ") {
            event.stopPropagation(); // Prevent spacebar from affecting gameplay
        }
    });

    // WebSocket setup with reconnection
    let socket;

    function connectWebSocket() {
        socket = new WebSocket("wss://newjackchat2.glitch.me");

        socket.onopen = function() {
            console.log("Connected to the chat server.");
            statusIndicator.textContent = 'Connected';
            statusIndicator.style.backgroundColor = '#00C851';
        };

        socket.onmessage = function(event) {
            const data = JSON.parse(event.data);
            displayMessage(data.name, data.text, data.avatar || '');
            messageSound.play();
        };

        socket.onclose = function(event) {
            console.log("WebSocket closed. Attempting to reconnect...");
            statusIndicator.textContent = 'Disconnected - Reconnecting...';
            statusIndicator.style.backgroundColor = '#ffbb33';
            setTimeout(connectWebSocket, 5000);
        };

        socket.onerror = function(error) {
            console.error("WebSocket Error:", error);
            statusIndicator.textContent = 'Connection Error';
            statusIndicator.style.backgroundColor = '#ff4444';
        };
    }

    connectWebSocket();

    // Settings container
    const settingsContainer = document.createElement('div');
    settingsContainer.id = 'settingsContainer';
    chatDiv.appendChild(settingsContainer);

    // Music toggle button
    const musicToggleButton = document.createElement('button');
    musicToggleButton.className = 'toggle-button';
    musicToggleButton.textContent = 'Toggle Sound';
    musicToggleButton.onclick = () => {
        musicOn = !musicOn;
        musicToggleButton.textContent = musicOn ? 'Sounds: ON' : 'Sounds: OFF';
        if (musicOn) {
            openSound.play();
        }
    };
    settingsContainer.appendChild(musicToggleButton);



// Function to show toaster notification
function showToaster(message) {
    const toaster = document.createElement('div');
    toaster.className = 'toaster';
    toaster.textContent = message;
    document.body.appendChild(toaster);
    setTimeout(() => {
        toaster.classList.add('show');
        setTimeout(() => {
            toaster.classList.remove('show');
            setTimeout(() => {
                document.body.removeChild(toaster);
            }, 500);
        }, 2000);
    }, 10);
}

// Info box to display the game IP
const gameIPBox = document.createElement('div');
gameIPBox.className = 'info-box';
gameIPBox.style.flexBasis = '100px';
gameIPBox.style.textAlign = 'center';
gameIPBox.style.cursor = 'pointer'; // Change cursor to pointer to indicate it is clickable
gameIPBox.style.borderradius= "4px";
settingsContainer.appendChild(gameIPBox);

// Function to update game IP in the box
function updateGameIP() {
    if (typeof MC === "object" && typeof MC.getHost === "function") {
        const fullHost = MC.getHost() || 'live-arena-undefined.agar.io';
        const gameIP = fullHost.replace(/^live-arena-/, '').replace(/\.agar\.io$/, '');
        gameIPBox.textContent = `Your game IP: ${gameIP}`;
    } else {
        gameIPBox.textContent = 'Your game IP: Not available';
    }
}

// Add click event listener to copy game IP to clipboard
gameIPBox.addEventListener('click', () => {
    if (gameIPBox.textContent.includes('Your game IP:')) {
        const gameIP = gameIPBox.textContent.replace('Your game IP: ', '');
        navigator.clipboard.writeText(gameIP).then(() => {
            showToaster('Game IP copied to clipboard!');
        }).catch(err => {
            console.error('Failed to copy text: ', err);
        });
    }
});

setInterval(updateGameIP, 3000);



    // Minimap toggle button
    const minimapToggleButton = document.createElement('button');
    minimapToggleButton.className = 'toggle-button';
    minimapToggleButton.textContent = 'Toggle Minimap';
    let minimapOn = true;
    minimapToggleButton.onclick = () => {
        minimapOn = !minimapOn;
        minimapToggleButton.textContent = minimapOn ? 'Minimap: ON' : 'Minimap: OFF';
        minimapOn ? core.setMinimap(1) : core.setMinimap(0);
    };
    settingsContainer.appendChild(minimapToggleButton);

    // Add button to open fun stuff popup
    const funStuffButton = document.createElement('button');
    funStuffButton.id = 'funStuffButton';
    funStuffButton.className = 'styled-button';
    funStuffButton.textContent = 'Agar.io Fun Stuff';
    settingsContainer.appendChild(funStuffButton);

    funStuffButton.addEventListener('click', () => {
        document.getElementById('funStuffPopup').style.display = 'block';
    });

// Create and append the popup div
const popupDiv = document.createElement('div');
popupDiv.id = 'funStuffPopup';
popupDiv.innerHTML = `
    <button id="funStuffPopupClose">Close🕹️</button>
    <iframe src="https://newjackchat2.glitch.me/emojis.html"></iframe>
`;
popupDiv.style.position = 'absolute';

popupDiv.style.width = '200px'; // Initial size
popupDiv.style.height = '200px'; // Initial size
popupDiv.style.resize = 'both';
popupDiv.style.overflow = 'auto';
popupDiv.style.border = '1px solid #000';
document.body.appendChild(popupDiv);


// Add event listener to the close button to hide the popup
document.getElementById('funStuffPopupClose').addEventListener('click', () => {
    document.getElementById('funStuffPopup').style.display = 'none';
});

// Add event listener to the close button to hide the popup
document.getElementById('funStuffPopupClose').addEventListener('click', () => {
    document.getElementById('funStuffPopup').style.display = 'none';
})
    // Resize handle
    const resizeHandle = document.createElement("div");
    resizeHandle.className = "resize-handle";
    resizeHandle.textContent = "↗️";
    resizeHandle.style.color = "white";
    resizeHandle.style.backgroundColor = "#00d3ff";
    resizeHandle.style.display = "inline-block";
    resizeHandle.style.padding = "5px";
    resizeHandle.style.fontSize = "12px";
    resizeHandle.style.borderRadius = "50%";
    resizeHandle.style.cursor = "ns-resize";
    chatDiv.appendChild(resizeHandle);

    let startX, startY, startWidth, startHeight;
    resizeHandle.addEventListener("mousedown", function (e) {
        e.preventDefault();
        startX = e.clientX;
        startY = e.clientY;
        startWidth = parseInt(window.getComputedStyle(chatDiv).width, 10);
        startHeight = parseInt(window.getComputedStyle(chatDiv).height, 10);
        document.documentElement.addEventListener("mousemove", doDrag, false);
        document.documentElement.addEventListener("mouseup", stopDrag, false);
    });

    function doDrag(e) {
        chatDiv.style.width = `${startWidth + e.clientX - startX}px`;
        chatDiv.style.height = `${startHeight + e.clientY - startY}px`;
    }

    function stopDrag() {
        document.documentElement.removeEventListener("mousemove", doDrag, false);
        document.documentElement.removeEventListener("mouseup", stopDrag, false);
    }

    const closeButton = document.createElement('div');
    closeButton.textContent = 'x';
    closeButton.className = 'close-button';
    closeButton.onclick = () => {
        chatDiv.style.display = 'none';
        showToast(`
            <center>
                Special thanks to<br>
                <a href="https://imsolo.pro/" target="_blank"><img src="https://i.imgur.com/K361z2W.png"></a>
                ImSolo.Pro & LegendsMod
                <a href="https://jimboy3100.github.io/" target="_blank"><img src="https://jimboy3100.github.io/banners/icon32croped.ico.gif" class="icon-link"></a><br><br>
                Double click middle mouse button to bring chat back up
            </center>
        `, 2000);
    };
    chatDiv.appendChild(closeButton);

    function displayMessage(name, text, avatar) {
        const messageElement = document.createElement("div");
        messageElement.style.cssText = "padding: 5px; border-bottom: 1px solid #ccc; display: flex; align-items: center;";

        const avatarImg = document.createElement("img");
        avatarImg.src = avatar || getAvatarURL(); // Use stored avatar if none provided
        avatarImg.style.width = "30px";
        avatarImg.style.height = "30px";
        avatarImg.style.marginRight = "10px";
        avatarImg.style.verticalAlign = "middle";
        avatarImg.onerror = function() {
            avatarImg.src = getAvatarURL(); // Fallback to stored avatar if image fails to load
        };

        const now = new Date();
        const hours = now.getHours().toString().padStart(2, "0");
        const minutes = now.getMinutes().toString().padStart(2, "0");
        const formattedTime = `${hours}:${minutes}`;

        const timestampSpan = document.createElement("span");
        timestampSpan.style.cssText = "color: #888; margin-right: 10px;";
        timestampSpan.textContent = formattedTime;

        const usernameSpan = document.createElement("span");
        usernameSpan.style.cssText = "font-weight: bold; margin-right: 5px;";
        usernameSpan.textContent = name + ":";

        messageElement.appendChild(avatarImg);
        messageElement.appendChild(timestampSpan);
        messageElement.appendChild(usernameSpan);

        if (/\.(jpeg|jpg|gif|png|svg)$/i.test(text)) {
            const image = document.createElement("img");
            image.src = text;
            image.style.maxWidth = "75px";
            image.style.maxHeight = "75px";
            image.alt = "Sent image";
            image.onerror = function () {
                image.parentNode.removeChild(image);
                const errorText = document.createElement("span");
                errorText.textContent = " [Invalid image URL]";
                messageElement.appendChild(errorText);
            };
            messageElement.appendChild(image);
        } else {
            const messageText = document.createElement("span");
            messageText.textContent = text;
            messageElement.appendChild(messageText);
        }

        messageArea.appendChild(messageElement);
        setTimeout(() => {
            if (messageArea.contains(messageElement)) {
                messageArea.removeChild(messageElement);
            }
        }, 60000);
    }

    document.addEventListener("auxclick", function (e) {
        if (e.button === 1 && e.detail === 2) {
            chatDiv.style.display = "flex";
        }
    });

    function makeDraggable(element) {
        let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
        element.onmousedown = function (e) {
            if (e.target === closeButton || e.target.tagName === "INPUT" || e.target === sendButton) {
                return;
            }
            e.preventDefault();
            pos3 = e.clientX;
            pos4 = e.clientY;
            document.onmouseup = closeDragElement;
            document.onmousemove = elementDrag;
        };

        function elementDrag(e) {
            e.preventDefault();
            pos1 = pos3 - e.clientX;
            pos2 = pos4 - e.clientY;
            pos3 = e.clientX;
            pos4 = e.clientY;
            element.style.top = element.offsetTop - pos2 + "px";
            element.style.left = element.offsetLeft - pos1 + "px";
        }

        function closeDragElement() {
            document.onmouseup = null;
            document.onmousemove = null;
        }
    }

    makeDraggable(chatDiv);

  // Play open sound on load
  window.onload = function () {
    setTimeout(playOpenSound, 1000);
  };

  function playOpenSound() {
    openSound.play();
  }
  window.addEventListener("load", function () {
    // Set a timeout to run 5 seconds after the page loads
    setTimeout(function () {
      // Activate the minimap
      core.setMinimap(1);
      console.log("Minimap activated.");

      // Set another timeout to activate player indicators 5 seconds after the minimap is activated
      setTimeout(function () {
        core.playersMinimap(1);
        console.log("Player indicators on minimap activated.");
      }, 5000);
    }, 5000); // 5 seconds delay to start the first action
  });


    // Additional initialization for specific elements or features
    document.documentElement.style.setProperty('--bottom-banner-height', '0px');

    let targetDiv = document.getElementById('agar-io_970x90');
    if (targetDiv) {
        targetDiv.style.width = '970px';
        targetDiv.style.height = '1px';
    }

    function addCustomSkinField() {
        const mainPanel = document.querySelector('#mainPanel');

        if (mainPanel) {
            const container = document.createElement('div');
            container.style.marginBottom = '10px';

            const urlInput = document.createElement('input');
            urlInput.placeholder = 'Enter skin URL or leave blank for default...';
            urlInput.style.marginRight = '5px';

            const loadButton = createButton('Turn Skin on', '#54c800', '#347f01', () => {
                let skinURL = urlInput.value;
                if (!skinURL) {
                    skinURL = 'default_skin_url'; // Placeholder for default skin URL
                    console.log('No URL provided. Using default skin.');
                }
                console.log(`Setting skin to ${skinURL}`);
                try {
                    core.registerSkin(null, "%SubscribeToBeeChasnyAgario", skinURL, 2, null);
                    core.loadSkin("%SubscribeToBeeChasnyAgario");
                } catch (e) {
                    console.error("Error loading the skin:", e);
                }
            });

            const unloadButton = createButton('Turn Skin off', '#c85400', '#7f3401', () => {
                try {
                    if (typeof core.unregisterSkin === "function") {
                        core.unregisterSkin("%SubscribeToBeeChasnyAgario");
                    } else {
                        console.error("unregisterSkin function is not available. Resetting manually...");
                    }
                    urlInput.value = '';
                    console.log("Skin reset or unloaded.");
                } catch (e) {
                    console.error("Error attempting to unload the skin:", e);
                }
            });

            container.appendChild(urlInput);
            container.appendChild(loadButton);
            container.appendChild(unloadButton);

            mainPanel.insertBefore(container, mainPanel.firstChild);
        } else {
            console.warn('Main panel not found. Cannot insert skin loader.');
        }
    }

    function createButton(text, bgColor, hoverColor, action) {
    const button = document.createElement('button');
    button.style.backgroundColor = bgColor;
    button.style.color = "#FFFFFF";
    button.style.border = "none";
    button.style.padding = "5px 10px";
    button.style.cursor = "pointer";
    button.innerText = text;
    button.onmouseover = function() {
        this.style.backgroundColor = hoverColor;
    };
    button.onmouseout = function() {
        this.style.backgroundColor = bgColor;
    };
    button.addEventListener('click', action);
    return button;
}

function createImageButton() {
    const container = document.createElement("div");
    container.style.position = "relative";
    container.style.display = "inline-block";

    const input = document.createElement("input");
    input.type = "file";
    input.accept = "image/*";
    input.id = "customImageUpload";
    input.style.width = "100%";
    input.style.height = "100%";
    input.style.opacity = "0";
    input.style.position = "absolute";
    input.style.left = "0";
    input.style.top = "0";
    input.style.zIndex = "1";

    const button = document.createElement("button");
    button.textContent = "Upload Image";
    button.style.color = "#fff";
    button.style.backgroundColor = "#54c800";
    button.style.border = "1px solid black";
    button.style.padding = "5px 10px";
    button.style.cursor = "pointer";

    container.appendChild(input);
    container.appendChild(button);

    return container;
}

function insertImageButton(container, target) {
    if (target) {
        const newDiv = document.createElement("div");
        newDiv.style.marginTop = "50px";
        newDiv.appendChild(container);
        target.querySelector(".save").appendChild(newDiv);
    }
}

function convertImageToBase64(event) {
    const file = event.target.files[0];
    const reader = new FileReader();

    reader.onloadend = function () {
        const base64 = reader.result;
        drawImage(base64);
    };

    reader.readAsDataURL(file);
}

function drawImage(base64) {
    const canvas = document.getElementById("skin-editor-canvas");
    const context = canvas.getContext("2d");
    const image = new Image();

    image.onload = function () {
        canvas.width = 512;
        canvas.height = 512;
        context.drawImage(image, 0, 0, 512, 512);
        context.save();
    };

    image.src = base64;
}

function observeTargetContainer() {
    const observer = new MutationObserver((mutationsList) => {
        for (let mutation of mutationsList) {
            if (mutation.type === 'childList') {
                const target = document.querySelector(".right-tools");
                if (target) {
                    // Check if the button already exists
                    if (!target.querySelector("#customImageUpload")) {
                        const button = createImageButton();
                        insertImageButton(button, target);
                        button.querySelector('input').addEventListener("change", convertImageToBase64);
                    }
                }
            }
        }
    });

    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
}

// Start observing for the target element
observeTargetContainer();

})();

(function () {
    'use strict';

    // Function to replace the text
    function replaceText() {
        // Select all option elements with value "RU-Russia"
        const options = document.querySelectorAll('option[value="RU-Russia"]');

        // Iterate through the options and change the text
        options.forEach(option => {
            const text = option.textContent;

            // Check if the text includes "Russia" and replace it
            if (text.includes("Russia")) {
                option.textContent = text.replace("Russia", "Ukraine");
            }
        });
    }

    // Run the function initially
    replaceText();

    // Create a MutationObserver to watch for changes in the DOM
    const observer = new MutationObserver(replaceText);

    // Start observing the document with the configured parameters
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
})();
(function() {
    'use strict';

    // Function to add Acid Mode checkbox
    function addAcidModeCheckbox() {
        // Check if the Acid Mode checkbox already exists
        if (document.querySelector('#acidMode')) return;

        // Find the parent element where the checkboxes are located
        const optionsDiv = document.querySelector('.options');

        if (!optionsDiv) return;

        // Create the container div for the checkbox
        const acidModeDiv = document.createElement('div');
        acidModeDiv.className = 'checkbox checkbox-info checkbox-circle option';

        // Create the checkbox input
        const acidModeCheckbox = document.createElement('input');
        acidModeCheckbox.type = 'checkbox';
        acidModeCheckbox.id = 'acidMode';
        acidModeCheckbox.className = 'styled';

        // Create the label for the checkbox
        const acidModeLabel = document.createElement('label');
        acidModeLabel.setAttribute('for', 'acidMode');
        acidModeLabel.textContent = 'Acid Mode';

        // Append the checkbox and label to the container div
        acidModeDiv.appendChild(acidModeCheckbox);
        acidModeDiv.appendChild(acidModeLabel);

        // Append the new Acid Mode checkbox to the options div
        optionsDiv.appendChild(acidModeDiv);

        // Function to apply shading
        function applyShading(isChecked) {
            if (isChecked) {
                acidModeLabel.style.backgroundColor = '#4CAF50'; // Green shade for active
                acidModeLabel.style.color = '#FFFFFF'; // White text
            } else {
                acidModeLabel.style.backgroundColor = ''; // Reset to default
                acidModeLabel.style.color = ''; // Reset to default
            }
        }

        // Load the initial state from localStorage
        const savedState = localStorage.getItem('acidModeEnabled') === 'true';
        acidModeCheckbox.checked = savedState;
        applyShading(savedState);

        // Add event listener to the checkbox
        acidModeCheckbox.addEventListener('change', function() {
            const isChecked = acidModeCheckbox.checked;
            localStorage.setItem('acidModeEnabled', isChecked); // Save state to localStorage

            if (typeof window.core !== 'undefined' && typeof window.core.setAcid === 'function') {
                window.core.setAcid(isChecked);
                console.log('Acid mode set to:', isChecked);
            } else {
                console.log('Agar.io core not loaded yet');
            }

            applyShading(isChecked);
        });
    }

    // Use MutationObserver to monitor changes in the DOM
    const observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if (mutation.type === 'childList' || mutation.type === 'subtree') {
                addAcidModeCheckbox();
            }
        });
    });

    // Start observing the document body for changes
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });

    // Initial call to add the checkbox in case it's already loaded
    addAcidModeCheckbox();

})();