Sploop Lunar Client

Enhanced Sploop.io client with visual, utility mods, player list, account switcher, spinning spikes, and full-screen pulse effect

当前为 2025-03-29 提交的版本,查看 最新版本

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Greasemonkey 油猴子Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Violentmonkey 暴力猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴Userscripts ,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey 篡改猴,才能安装此脚本。

您需要先安装一款用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

// ==UserScript==
// @name         Sploop Lunar Client
// @namespace    http://tampermonkey.net/
// @version      1.9.2
// @description  Enhanced Sploop.io client with visual, utility mods, player list, account switcher, spinning spikes, and full-screen pulse effect
// @author       hooder
// @match        https://sploop.io/*
// @grant        none
// @require      https://update.greasyfork.org/scripts/130/10066/Portable%20MD5%20Function.js
// ==/UserScript==

(function() {
    'use strict';

    function addStyle(css) {
        const style = document.createElement('style');
        style.textContent = css;
        document.head.appendChild(style);
        return style;
    }

    function makeDraggable(element) {
        let posX = 0, posY = 0, mouseX = 0, mouseY = 0;
        element.onmousedown = dragMouseDown;

        function dragMouseDown(e) {
            if (!isDragging) return;
            e.preventDefault();
            mouseX = e.clientX;
            mouseY = e.clientY;
            document.onmouseup = closeDragElement;
            document.onmousemove = elementDrag;
        }

        function elementDrag(e) {
            e.preventDefault();
            posX = mouseX - e.clientX;
            posY = mouseY - e.clientY;
            mouseX = e.clientX;
            mouseY = e.clientY;
            const newTop = element.offsetTop - posY;
            const newLeft = element.offsetLeft - posX;
            element.style.top = Math.max(0, Math.min(newTop, window.innerHeight - element.offsetHeight)) + "px";
            element.style.left = Math.max(0, Math.min(newLeft, window.innerWidth - element.offsetWidth)) + "px";
        }

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

    let isDragging = false;
    let menuVisible = true;
    let currentTheme = 'purple';
    let spinSpeed = 3.1;
    let pulseSpeed = 1.5; // Default pulse speed in seconds

    addStyle(`
        .lunar-menu {
            position: fixed;
            top: 50px;
            left: 50px;
            width: 480px;
            height: 500px;
            background: linear-gradient(135deg, #4b0082, #1a1a1a);
            border: 2px solid #9400d3;
            border-radius: 15px;
            color: white;
            font-family: Arial, sans-serif;
            z-index: 10000;
            padding: 15px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
            overflow-y: auto;
            display: flex;
            flex-direction: column;
        }
        .lunar-menu h2 {
            margin: 0 0 10px 0;
            text-align: center;
            color: #d8bfd8;
            cursor: move;
            font-size: 24px;
        }
        .tab-buttons {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 15px;
        }
        .tab-button {
            background: #9400d3;
            border: none;
            padding: 8px 20px;
            color: white;
            cursor: pointer;
            border-radius: 8px;
            transition: all 0.3s;
        }
        .tab-button:hover {
            background: #d8bfd8;
            color: #1a1a1a;
        }
        .tab-content {
            display: none;
            flex-grow: 1;
        }
        .tab-content.active {
            display: block;
        }
        .mod-toggle {
            margin: 10px 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 5px 10px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 5px;
        }
        .move-mods-btn {
            background: #9400d3;
            border: none;
            padding: 10px 20px;
            color: white;
            cursor: pointer;
            border-radius: 8px;
            margin-top: 15px;
            width: 150px;
            align-self: center;
            transition: all 0.3s;
        }
        .move-mods-btn:hover {
            background: #d8bfd8;
            color: #1a1a1a;
        }
        .mod-ui {
            position: fixed;
            padding: 10px;
            color: white;
            z-index: 1000;
            display: none;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            background: rgba(0, 0, 0, 0.8);
        }
        .texture-ui, .keystrokes-ui, .spinning-spikes-ui, .pulse-effect-ui {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .keystrokes-ui div {
            display: flex;
            justify-content: center;
            gap: 5px;
        }
        .keystroke-key {
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid #fff;
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.1s;
        }
        .keystroke-key.active {
            background: rgba(255, 255, 255, 0.8);
            color: #000;
        }
        .arraylist-container {
            width: auto;
            max-width: 200px;
            background: rgba(0, 0, 0, 0.7);
            border-radius: 5px;
            padding: 5px;
        }
        .arraylist-item {
            padding: 3px 8px;
            background: rgba(255, 255, 255, 0.1);
            margin: 2px 0;
            border-radius: 3px;
            transition: all 0.2s;
        }
        .arraylist-item:hover {
            background: rgba(255, 255, 255, 0.2);
        }
        .player-list {
            position: fixed;
            top: 10%;
            left: 10%;
            width: 300px;
            max-height: 80%;
            background: linear-gradient(135deg, #4b0082, #1a1a1a);
            border: 2px solid #9400d3;
            border-radius: 15px;
            padding: 15px;
            color: white;
            font-family: Arial, sans-serif;
            overflow-y: auto;
            z-index: 9999;
            display: none;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
        }
        .player-list::-webkit-scrollbar {
            width: 8px;
        }
        .player-list::-webkit-scrollbar-thumb {
            background: #9400d3;
            border-radius: 4px;
        }
        .player-name {
            margin: 5px 0;
            font-size: 16px;
            opacity: 0;
            transition: opacity 0.5s;
        }
        .join-notification {
            position: fixed;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 8px 16px;
            border-radius: 8px;
            font-size: 14px;
            opacity: 0;
            transition: opacity 0.5s, top 0.3s;
            z-index: 10001;
        }
        .theme-buttons-container {
            position: fixed;
            top: 10%;
            left: 5%;
            display: none;
            flex-direction: column;
            gap: 10px;
        }
        .theme-button {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
            border: 2px solid #9400d3;
            transition: transform 0.3s;
        }
        .theme-button:hover {
            transform: scale(1.1);
        }
        .pink-button { background: linear-gradient(135deg, #FFC6D9, #FF9494); }
        .light-orange-button { background: linear-gradient(135deg, #FFD699, #FFB74D); }
        .skye-blue-button { background: linear-gradient(135deg, #A6DAFF, #77BDFE); }
        .green-button { background: linear-gradient(135deg, #7CCD7C, #3F7A3F); }
        .account-switcher {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 850px;
            height: 550px;
            background: linear-gradient(135deg, #4b0082, #1a1a1a);
            border: 2px solid #9400d3;
            border-radius: 15px;
            color: white;
            font-family: Arial, sans-serif;
            z-index: 10002;
            padding: 15px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
            display: none;
            flex-direction: column;
        }
        .account-switcher h3 {
            margin: 0 0 10px 0;
            text-align: center;
            color: #d8bfd8;
            font-size: 20px;
            position: relative;
        }
        .account-list {
            overflow-y: auto;
            flex-grow: 1;
            margin-top: 10px;
        }
        .account-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px;
            margin: 5px 0;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 5px;
        }
        .account-buttons {
            display: flex;
            gap: 10px;
        }
        .acc-btn {
            padding: 5px 15px;
            border: none;
            border-radius: 5px;
            color: white;
            cursor: pointer;
            transition: all 0.3s;
        }
        .acc-btn-switch {
            background: #9400d3;
        }
        .acc-btn-switch:hover {
            background: #d8bfd8;
            color: #1a1a1a;
        }
        .acc-btn-remove {
            background: #ff4040;
        }
        .acc-btn-remove:hover {
            background: #ff6666;
        }
        .add-acc-btn {
            background: #9400d3;
            margin-top: 10px;
            align-self: center;
        }
        .add-acc-btn:hover {
            background: #d8bfd8;
            color: #1a1a1a;
        }
        .close-btn {
            position: absolute;
            top: 5px;
            right: 5px;
            width: 20px;
            height: 20px;
            background: #ff4040;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s;
        }
        .close-btn:hover {
            background: #ff6666;
        }
        @keyframes screenPulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
    `);

    const themes = {
        purple: { background: `linear-gradient(135deg, #4b0082, #1a1a1a)`, border: `#9400d3`, button: `#9400d3` },
        blue: { background: `linear-gradient(135deg, #00008b, #1a1a1a)`, border: `#00b7eb`, button: `#00b7eb` },
        red: { background: `linear-gradient(135deg, #8b0000, #1a1a1a)`, border: `#ff4040`, button: `#ff4040` },
        green: { background: `linear-gradient(135deg, #006400, #1a1a1a)`, border: `#00ff00`, button: `#00ff00` },
        orange: { background: `linear-gradient(135deg, #ff4500, #1a1a1a)`, border: `#ffa500`, button: `#ffa500` },
        cyan: { background: `linear-gradient(135deg, #008b8b, #1a1a1a)`, border: `#00ffff`, button: `#00ffff` },
        pink: { background: `linear-gradient(135deg, #ff1493, #1a1a1a)`, border: `#ff69b4`, button: `#ff69b4` },
        yellow: { background: `linear-gradient(135deg, #ffd700, #1a1a1a)`, border: `#ffff00`, button: `#ffff00` },
        neon: { background: `linear-gradient(135deg, #00ffcc, #1a1a1a)`, border: `#39ff14`, button: `#39ff14` }
    };

    function applyTheme(element, theme) {
        element.style.background = themes[theme].background;
        element.style.border = `2px solid ${themes[theme].border}`;
        if (element.className.includes('tab-button') || element.className.includes('move-mods-btn') || element.className.includes('acc-btn')) {
            element.style.background = themes[theme].button;
        }
    }

    const menu = document.createElement('div');
    menu.className = 'lunar-menu';
    menu.innerHTML = `
        <h2>Sploop Lunar Client</h2>
        <div class="tab-buttons">
            <button class="tab-button" data-tab="visual">Visual</button>
            <button class="tab-button" data-tab="utility">Utility</button>
            <button class="tab-button" data-tab="combat">Combat</button>
            <button class="tab-button" data-tab="players">Players</button>
        </div>
        <div id="visual-tab" class="tab-content">
            <div class="mod-toggle"><input type="checkbox" id="texturePacksMod"> Texture Packs</div>
            <div class="mod-toggle"><input type="checkbox" id="menuThemeMod"> Menu Theme</div>
            <div class="mod-toggle"><input type="checkbox" id="arrayListMod"> ArrayList</div>
            <div class="mod-toggle"><input type="checkbox" id="zoomMod"> Zoom</div>
            <div class="mod-toggle"><input type="checkbox" id="nightVisionMod"> Night Vision</div>
            <div class="mod-toggle"><input type="checkbox" id="spinningSpikesMod"> Spinning Spikes</div>
            <div class="mod-toggle"><input type="checkbox" id="pulseEffectMod"> Pulse Effect</div>
        </div>
        <div id="utility-tab" class="tab-content">
            <div class="mod-toggle"><input type="checkbox" id="fpsMod"> FPS</div>
            <div class="mod-toggle"><input type="checkbox" id="cpsMod"> CPS</div>
            <div class="mod-toggle"><input type="checkbox" id="fpsBoosterMod"> FPS Booster</div>
            <div class="mod-toggle"><input type="checkbox" id="pingMod"> Ping</div>
            <div class="mod-toggle"><input type="checkbox" id="keystrokesMod"> Keystrokes</div>
            <div class="mod-toggle"><input type="checkbox" id="coordinatesMod"> Coordinates</div>
            <div class="mod-toggle"><input type="checkbox" id="timerMod"> Timer</div>
        </div>
        <div id="combat-tab" class="tab-content">
            <div class="mod-toggle"><input type="checkbox" id="hitMarkersMod"> Hit Markers</div>
            <div class="mod-toggle"><input type="checkbox" id="rangeIndicatorMod"> Range Indicator</div>
            <div class="mod-toggle"><input type="checkbox" id="smoothCrosshairMod"> Smooth Crosshair</div>
            <div class="mod-toggle"><input type="checkbox" id="swingAnimationMod"> Swing Animation</div>
        </div>
        <div id="players-tab" class="tab-content">
            <p>Toggle Player List with ; key</p>
            <p>Made by blubby, edited by hooder</p>
        </div>
        <button class="move-mods-btn">Move Mods</button>
    `;
    document.body.appendChild(menu);
    makeDraggable(menu);
    applyTheme(menu, currentTheme);

    const tabButtons = menu.querySelectorAll('.tab-button');
    const tabContents = menu.querySelectorAll('.tab-content');
    tabButtons.forEach(button => {
        button.addEventListener('click', () => {
            tabContents.forEach(content => content.classList.remove('active'));
            menu.querySelector(`#${button.dataset.tab}-tab`).classList.add('active');
        });
        applyTheme(button, currentTheme);
    });
    menu.querySelector('#visual-tab').classList.add('active');

    const moveModsBtn = menu.querySelector('.move-mods-btn');
    moveModsBtn.addEventListener('click', () => {
        isDragging = !isDragging;
        moveModsBtn.textContent = isDragging ? 'Stop Moving' : 'Move Mods';
    });
    applyTheme(moveModsBtn, currentTheme);

    document.addEventListener('keydown', (e) => {
        if (e.key === 'Shift' && e.location === KeyboardEvent.DOM_KEY_LOCATION_RIGHT) {
            menuVisible = !menuVisible;
            menu.style.display = menuVisible ? 'block' : 'none';
        }
    });

    // Player List
    const playerList = document.createElement('div');
    playerList.className = 'player-list';
    document.body.appendChild(playerList);
    const playerNames = new Set();

    function addPlayerName(name) {
        if (!playerNames.has(name)) {
            const playerNameElement = document.createElement('div');
            playerNameElement.textContent = name;
            playerNameElement.className = 'player-name';
            playerList.appendChild(playerNameElement);
            playerNames.add(name);
            setTimeout(() => playerNameElement.style.opacity = '1', 100);
            displayJoinNotification(name);
        }
    }

    function displayJoinNotification(name) {
        const notification = document.createElement('div');
        notification.textContent = `${name} has joined the server!`;
        notification.className = 'join-notification';
        document.body.appendChild(notification);
        const existingNotifications = document.querySelectorAll('.join-notification');
        const topPosition = 20 + existingNotifications.length * 50;
        notification.style.top = `${topPosition}px`;
        setTimeout(() => notification.style.opacity = '1', 100);
        setTimeout(() => {
            notification.style.opacity = '0';
            existingNotifications.forEach((n, i) => {
                n.style.transition = 'top 0.3s, opacity 0.5s';
                n.style.top = `${20 + i * 50}px`;
            });
            setTimeout(() => notification.remove(), 500);
        }, 3000);
    }

    WebSocket.prototype.realSend = WebSocket.prototype.send;
    WebSocket.prototype.send = function(data) {
        this.realSend(data);
        this.addEventListener('message', handleWebSocketMessages);
    };

    function handleWebSocketMessages(event) {
        try {
            const messageData = JSON.parse(event.data);
            if (messageData[0] === 33) {
                playerList.innerHTML = '';
                playerNames.clear();
                const players = messageData[3];
                if (players.length === 0) addPlayerName("Server Joined");
                else players.forEach(player => addPlayerName(player[1]));
            } else if (messageData[0] === 32 || messageData[0] === 35) {
                addPlayerName(messageData[2]);
            }
        } catch (error) {
            console.error('Error parsing WebSocket message:', error);
        }
    }

    let displayToggled = false;
    document.addEventListener('keydown', (e) => {
        if (e.key === ';') {
            displayToggled = !displayToggled;
            playerList.style.display = displayToggled ? 'block' : 'none';
            themeButtonsContainer.style.display = displayToggled ? 'flex' : 'none';
        }
    });

    const themeButtonsContainer = document.createElement('div');
    themeButtonsContainer.className = 'theme-buttons-container';
    const pinkButton = createThemeButton('pink-button', () => setTheme('#FFC6D9', '#FF9494', '#FF69B4'));
    const orangeButton = createThemeButton('light-orange-button', () => setTheme('#FFD699', '#FFB74D', '#FF9800'));
    const blueButton = createThemeButton('skye-blue-button', () => setTheme('#A6DAFF', '#77BDFE', '#4FC3F7'));
    const greenButton = createThemeButton('green-button', () => setTheme('#7CCD7C', '#3F7A3F', '#4CAF50'));
    themeButtonsContainer.append(pinkButton, orangeButton, blueButton, greenButton);
    document.body.appendChild(themeButtonsContainer);

    function createThemeButton(className, onClick) {
        const button = document.createElement('div');
        button.className = `theme-button ${className}`;
        button.onclick = onClick;
        return button;
    }

    function setTheme(start, end, border) {
        playerList.style.background = `linear-gradient(135deg, ${start}, ${end})`;
        playerList.style.borderColor = border;
        playerList.querySelectorAll('.player-name').forEach(name => name.style.color = '#ffffff');
    }

    // Account Switcher
    const accountSwitcher = document.createElement('div');
    accountSwitcher.className = 'account-switcher';
    accountSwitcher.innerHTML = `
        <h3>Account Switcher - Made by blubby, edited by hooder
            <div class="close-btn" id="close-account-switcher">X</div>
        </h3>
        <div class="account-list" id="account-list"></div>
        <button class="acc-btn add-acc-btn">Add Account</button>
    `;
    document.body.appendChild(accountSwitcher);
    applyTheme(accountSwitcher, currentTheme);

    const accountList = accountSwitcher.querySelector('#account-list');
    const addAccBtn = accountSwitcher.querySelector('.add-acc-btn');
    const closeBtn = accountSwitcher.querySelector('#close-account-switcher');
    applyTheme(addAccBtn, currentTheme);
    closeBtn.addEventListener('click', () => {
        accountSwitcher.style.display = 'none';
    });

    const emailInput = document.getElementById('enter-mail');
    const passInput = document.getElementById('enter-password');
    const loginBtn = document.getElementById('login');
    const logoutBtn = document.getElementById('logout');

    let userpass = [];
    function createAccountCard(data) {
        const card = document.createElement('div');
        card.className = 'account-card';
        card.id = data.randomString;
        card.innerHTML = `
            <span>${data.name} (Score: ${data.score})</span>
            <div class="account-buttons">
                <button class="acc-btn acc-btn-switch">Switch</button>
                <button class="acc-btn acc-btn-remove">Remove</button>
            </div>
        `;
        const switchBtn = card.querySelector('.acc-btn-switch');
        const removeBtn = card.querySelector('.acc-btn-remove');
        applyTheme(switchBtn, currentTheme);
        applyTheme(removeBtn, currentTheme);
        switchBtn.addEventListener('click', () => {
            logoutBtn.click();
            emailInput.value = data.email;
            passInput.value = data.password;
            loginBtn.click();
            accountSwitcher.style.display = 'none';
        });
        removeBtn.addEventListener('click', () => {
            const storedData = JSON.parse(localStorage.getItem('cards') || '[]');
            const index = storedData.findIndex(item => item.randomString === data.randomString);
            storedData.splice(index, 1);
            localStorage.setItem('cards', JSON.stringify(storedData));
            card.remove();
        });
        return card;
    }

    function displayAccounts() {
        accountList.innerHTML = '';
        const storedData = JSON.parse(localStorage.getItem('cards') || '[]');
        storedData.forEach(data => accountList.appendChild(createAccountCard(data)));
    }

    addAccBtn.addEventListener('click', () => {
        const email = prompt('Enter email:');
        const password = prompt('Enter password:');
        if (email && password) {
            fetch(`https://account.sploop.io:443/login?mail=${email}&hash=${hex_md5(password)}`)
                .then(response => response.json())
                .then(json => {
                    const storedData = JSON.parse(localStorage.getItem('cards') || '[]');
                    const randomString = Math.random().toString(36).substring(2, 12);
                    const newData = { name: json.nickname, email, password, score: json.score, randomString };
                    storedData.push(newData);
                    localStorage.setItem('cards', JSON.stringify(storedData));
                    accountList.appendChild(createAccountCard(newData));
                })
                .catch(() => alert('Invalid Account'));
        }
    });

    const switchBtn = document.createElement('div');
    switchBtn.className = 'acc-btn acc-btn-switch';
    switchBtn.textContent = 'Switch Accounts';
    switchBtn.style.position = 'fixed';
    switchBtn.style.top = '40px';
    switchBtn.style.left = '50%';
    switchBtn.style.transform = 'translateX(-50%)';
    document.body.appendChild(switchBtn);
    applyTheme(switchBtn, currentTheme);
    switchBtn.addEventListener('click', () => {
        accountSwitcher.style.display = 'block';
        displayAccounts();
    });

    // Logo
    const logo = document.createElement('div');
    logo.style = `
        position: fixed;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        color: #d8bfd8;
        font-family: Arial, sans-serif;
        font-size: 20px;
        z-index: 1000;
        cursor: move;
    `;
    logo.textContent = 'Lunar Client';
    document.body.appendChild(logo);
    makeDraggable(logo);

    // Spinning Spikes Mod
    const spinningSpikesUI = document.createElement('div');
    spinningSpikesUI.className = 'mod-ui spinning-spikes-ui';
    spinningSpikesUI.style.top = '210px';
    spinningSpikesUI.style.left = '150px';
    spinningSpikesUI.innerHTML = `
        <label>Spike Spin Speed: </label>
        <input type="range" id="spinSpeedSlider" min="0.5" max="10" step="0.1" value="${spinSpeed}">
    `;
    document.body.appendChild(spinningSpikesUI);
    makeDraggable(spinningSpikesUI);
    applyTheme(spinningSpikesUI, currentTheme);

    const spinSpeedSlider = spinningSpikesUI.querySelector('#spinSpeedSlider');
    spinSpeedSlider.addEventListener('input', (e) => {
        spinSpeed = parseFloat(e.target.value);
    });

    const origDrawImage = CanvasRenderingContext2D.prototype.drawImage;
    CanvasRenderingContext2D.prototype.drawImage = function(img, ...args) {
        try {
            if (img instanceof HTMLImageElement && img.src) {
                console.log('Image drawn:', img.src);
            }

            let x, y, width, height;
            if (args.length === 2) {
                [x, y] = args;
                width = img.width;
                height = img.height;
            } else if (args.length === 4) {
                [x, y, width, height] = args;
            } else if (args.length === 8) {
                [,,,, x, y, width, height] = args;
            } else {
                return origDrawImage.apply(this, [img, ...args]);
            }

            const isSpinningEnabled = document.getElementById('spinningSpikesMod')?.checked;
            const isSpike = img instanceof HTMLImageElement && img.src && (
                img.src.includes('spike') ||
                img.src.includes('hard_spike') ||
                img.src.includes('spikes')
            );

            if (isSpike && isSpinningEnabled) {
                console.log(`Spinning spike detected: ${img.src}, Rotation speed: ${spinSpeed}`);
                this.save();
                this.translate(x + width / 2, y + height / 2);
                const rotation = (performance.now() / 1000 * spinSpeed) % (2 * Math.PI);
                this.rotate(rotation);
                origDrawImage.call(this, img, -width / 2, -height / 2, width, height);
                this.restore();
                return;
            } else {
                if (typeof img.src === 'string' && (img.src.includes('skins') || (img.src.includes('entity') && !img.src.includes('inv_') && !img.src.includes('map') && !img.src.includes('resource')))) {
                    playerPos.x = x + width / 2;
                    playerPos.y = y + height / 2;
                }
                return origDrawImage.apply(this, [img, ...args]);
            }
        } catch (e) {
            console.error('Error in drawImage override:', e);
            return origDrawImage.apply(this, [img, ...args]);
        }
    };

    // Pulse Effect Mod (Full Screen)
    const pulseEffectUI = document.createElement('div');
    pulseEffectUI.className = 'mod-ui pulse-effect-ui';
    pulseEffectUI.style.top = '260px';
    pulseEffectUI.style.left = '150px';
    pulseEffectUI.innerHTML = `
        <label>Pulse Speed (seconds): </label>
        <input type="range" id="pulseSpeedSlider" min="0.5" max="3" step="0.1" value="${pulseSpeed}">
    `;
    document.body.appendChild(pulseEffectUI);
    makeDraggable(pulseEffectUI);
    applyTheme(pulseEffectUI, currentTheme);

    const pulseSpeedSlider = pulseEffectUI.querySelector('#pulseSpeedSlider');
    pulseSpeedSlider.addEventListener('input', (e) => {
        pulseSpeed = parseFloat(e.target.value);
        updatePulseEffect();
    });

    function updatePulseEffect() {
        const canvas = document.querySelector('canvas');
        if (!canvas) return;
        const isPulseEnabled = document.getElementById('pulseEffectMod')?.checked;
        if (isPulseEnabled) {
            canvas.style.animation = `screenPulse ${pulseSpeed}s infinite ease-in-out`;
        } else {
            canvas.style.animation = 'none';
        }
    }

    // Existing Mods
    const texturePacks = {
        "default": { filter: `canvas { filter: none; } body { background-color: #fff; }`, textures: {} },
        "darkSploop": { filter: `canvas { filter: brightness(0.8) contrast(1.2); } body { background-color: #1a1a1a; }`, textures: {} },
        "vibrantHack": { filter: `canvas { filter: brightness(1.2) saturate(1.5); } body { background-color: #f0f0f0; }`, textures: {} },
        "cosmicNebula": {
            filter: `canvas { filter: brightness(1.1) saturate(1.3) hue-rotate(270deg); } body { background-color: #0a0a2a; }`,
            textures: {
                "/img/entity/hammer.png": "https://cdn.pixabay.com/photo/2023/10/10/15/45/hammer-8306725_1280.png",
                "/img/entity/katana.png": "https://cdn.pixabay.com/photo/2023/08/15/12/30/sword-8192049_1280.png",
                "/img/entity/shield.png": "https://cdn.pixabay.com/photo/2023/09/20/14/45/shield-8265142_1280.png",
                "/img/entity/hat_1.png": "https://cdn.pixabay.com/photo/2023/07/25/14/30/helmet-8149148_1280.png",
                "/img/entity/hat_2.png": "https://cdn.pixabay.com/photo/2023/06/10/14/45/hat-8054086_1280.png",
                "/img/entity/hat_3.png": "https://cdn.pixabay.com/photo/2023/05/15/12/30/helmet-7994518_1280.png",
                "/img/items/pearl.png": "https://cdn.pixabay.com/photo/2023/04/25/14/45/gem-7950780_1280.png",
                "/img/entity/teleporter.png": "https://cdn.pixabay.com/photo/2023/03/10/14/45/portal-7842623_1280.png",
                "/img/entity/bed.png": "https://cdn.pixabay.com/photo/2023/02/15/14/45/bed-7791845_1280.png",
                "/img/entity/lootbox.png": "https://cdn.pixabay.com/photo/2023/01/20/14/45/chest-7731642_1280.png"
            }
        }
    };

    const remaps = new Map();
    function applyTexturePack(packName) {
        const pack = texturePacks[packName];
        textureStyleElement.textContent = pack.filter;
        remaps.clear();
        Object.entries(pack.textures).forEach(([fromUrl, toUrl]) => {
            remaps.set(`https://sploop.io${fromUrl}`, { src: toUrl, scale: 1 });
        });
        const canvas = document.querySelector('canvas');
        if (canvas) canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
    }

    const origImage = Image;
    window.Image = class extends origImage {
        constructor() {
            super();
            this._scale = 1;
        }
        set onload(fn) {
            this._onloadFn = fn;
            super.onload = () => {
                this.width = this.naturalWidth * this._scale;
                this.height = this.naturalHeight * this._scale;
                if (this._onloadFn) this._onloadFn.apply(this);
            };
        }
        set src(_src) {
            const [path] = _src.split("?v=");
            if (remaps.has(path)) {
                const { src, scale } = remaps.get(path);
                this._scale = scale;
                super.src = src;
            } else {
                this._scale = 1;
                super.src = _src;
            }
        }
    };

    const textureUI = document.createElement('div');
    textureUI.className = 'mod-ui texture-ui';
    textureUI.style.top = '10px';
    textureUI.style.left = '150px';
    textureUI.innerHTML = `
        <label>Texture Pack:</label>
        <select id="textureSelect">
            <option value="default">Default</option>
            <option value="darkSploop">DarkSploop</option>
            <option value="vibrantHack">VibrantHack</option>
            <option value="cosmicNebula">Cosmic Nebula</option>
        </select>
    `;
    document.body.appendChild(textureUI);
    makeDraggable(textureUI);
    applyTheme(textureUI, currentTheme);

    let textureStyleElement = addStyle(texturePacks['default'].filter);
    const textureSelect = textureUI.querySelector('#textureSelect');
    textureSelect.addEventListener('change', (e) => applyTexturePack(e.target.value));
    applyTexturePack('default');

    const fpsUI = document.createElement('div');
    fpsUI.className = 'mod-ui';
    fpsUI.style.top = '60px';
    fpsUI.style.left = '10px';
    document.body.appendChild(fpsUI);
    makeDraggable(fpsUI);
    applyTheme(fpsUI, currentTheme);
    let lastTime = performance.now();
    function updateFPS() {
        const now = performance.now();
        const fps = Math.round(1000 / (now - lastTime));
        fpsUI.textContent = `FPS: ${fps}`;
        lastTime = now;
        requestAnimationFrame(updateFPS);
    }

    const cpsUI = document.createElement('div');
    cpsUI.className = 'mod-ui';
    cpsUI.style.top = '110px';
    cpsUI.style.left = '10px';
    document.body.appendChild(cpsUI);
    makeDraggable(cpsUI);
    applyTheme(cpsUI, currentTheme);
    let clickTimes = [];
    document.addEventListener('mousedown', () => clickTimes.push(Date.now()));
    setInterval(() => {
        const now = Date.now();
        clickTimes = clickTimes.filter(time => now - time < 1000);
        cpsUI.textContent = `CPS: ${clickTimes.length}`;
    }, 500);

    const fpsBoosterUI = document.createElement('div');
    fpsBoosterUI.className = 'mod-ui';
    fpsBoosterUI.style.top = '160px';
    fpsBoosterUI.style.left = '10px';
    document.body.appendChild(fpsBoosterUI);
    makeDraggable(fpsBoosterUI);
    applyTheme(fpsBoosterUI, currentTheme);
    function toggleFPSBooster(on) {
        const canvas = document.querySelector('canvas');
        if (on) {
            canvas.style.imageRendering = 'pixelated';
            canvas.style.filter = 'none';
            document.body.style.background = '#000';
            fpsBoosterUI.textContent = 'FPS Booster: ON';
        } else {
            canvas.style.imageRendering = 'auto';
            canvas.style.filter = texturePacks[textureSelect.value].filter.split('canvas { filter: ')[1].split(';')[0];
            document.body.style.background = texturePacks[textureSelect.value].filter.split('body {')[1].split('}')[0].trim();
            fpsBoosterUI.textContent = 'FPS Booster: OFF';
        }
        updatePulseEffect(); // Ensure pulse effect persists after FPS Booster toggle
    }

    const pingUI = document.createElement('div');
    pingUI.className = 'mod-ui';
    pingUI.style.top = '210px';
    pingUI.style.left = '10px';
    document.body.appendChild(pingUI);
    makeDraggable(pingUI);
    applyTheme(pingUI, currentTheme);
    function updatePing() {
        const start = performance.now();
        fetch('https://sploop.io/').then(() => {
            pingUI.textContent = `Ping: ${Math.round(performance.now() - start)}ms`;
        }).catch(() => pingUI.textContent = 'Ping: N/A');
    }

    const keystrokesUI = document.createElement('div');
    keystrokesUI.className = 'mod-ui keystrokes-ui';
    keystrokesUI.style.top = '260px';
    keystrokesUI.style.left = '10px';
    keystrokesUI.innerHTML = `
        <div><div class="keystroke-key" id="keyW">W</div></div>
        <div>
            <div class="keystroke-key" id="keyA">A</div>
            <div class="keystroke-key" id="keyS">S</div>
            <div class="keystroke-key" id="keyD">D</div>
        </div>
        <div><div class="keystroke-key" id="keySpace"> </div></div>
        <div>
            <div class="keystroke-key" id="keyLMB">LMB</div>
            <div class="keystroke-key" id="keyRMB">RMB</div>
        </div>
    `;
    document.body.appendChild(keystrokesUI);
    makeDraggable(keystrokesUI);
    applyTheme(keystrokesUI, currentTheme);
    const keyElements = {
        w: keystrokesUI.querySelector('#keyW'),
        a: keystrokesUI.querySelector('#keyA'),
        s: keystrokesUI.querySelector('#keyS'),
        d: keystrokesUI.querySelector('#keyD'),
        space: keystrokesUI.querySelector('#keySpace'),
        lmb: keystrokesUI.querySelector('#keyLMB'),
        rmb: keystrokesUI.querySelector('#keyRMB')
    };
    document.addEventListener('keydown', (e) => {
        if (!keystrokesMod.checked) return;
        switch (e.key.toLowerCase()) {
            case 'w': keyElements.w.classList.add('active'); break;
            case 'a': keyElements.a.classList.add('active'); break;
            case 's': keyElements.s.classList.add('active'); break;
            case 'd': keyElements.d.classList.add('active'); break;
            case ' ': keyElements.space.classList.add('active'); break;
        }
    });
    document.addEventListener('keyup', (e) => {
        if (!keystrokesMod.checked) return;
        switch (e.key.toLowerCase()) {
            case 'w': keyElements.w.classList.remove('active'); break;
            case 'a': keyElements.a.classList.remove('active'); break;
            case 's': keyElements.s.classList.remove('active'); break;
            case 'd': keyElements.d.classList.remove('active'); break;
            case ' ': keyElements.space.classList.remove('active'); break;
        }
    });
    document.addEventListener('mousedown', (e) => {
        if (!keystrokesMod.checked) return;
        if (e.button === 0) keyElements.lmb.classList.add('active');
        if (e.button === 2) keyElements.rmb.classList.add('active');
    });
    document.addEventListener('mouseup', (e) => {
        if (!keystrokesMod.checked) return;
        if (e.button === 0) keyElements.lmb.classList.remove('active');
        if (e.button === 2) keyElements.rmb.classList.remove('active');
    });

    const menuThemeUI = document.createElement('div');
    menuThemeUI.className = 'mod-ui';
    menuThemeUI.style.top = '60px';
    menuThemeUI.style.left = '150px';
    menuThemeUI.innerHTML = `
        <label>Menu Theme: </label>
        <select id="themeSelect">
            <option value="purple">Purple</option>
            <option value="blue">Blue</option>
            <option value="red">Red</option>
            <option value="green">Green</option>
            <option value="orange">Orange</option>
            <option value="cyan">Cyan</option>
            <option value="pink">Pink</option>
            <option value="yellow">Yellow</option>
            <option value="neon">Neon</option>
        </select>
    `;
    document.body.appendChild(menuThemeUI);
    makeDraggable(menuThemeUI);
    applyTheme(menuThemeUI, currentTheme);

    const themeSelect = menuThemeUI.querySelector('#themeSelect');
    themeSelect.addEventListener('change', (e) => {
        currentTheme = e.target.value;
        applyTheme(menu, currentTheme);
        tabButtons.forEach(btn => applyTheme(btn, currentTheme));
        applyTheme(moveModsBtn, currentTheme);
        applyTheme(textureUI, currentTheme);
        applyTheme(fpsUI, currentTheme);
        applyTheme(cpsUI, currentTheme);
        applyTheme(menuThemeUI, currentTheme);
        applyTheme(arrayListUI, currentTheme);
        applyTheme(hitMarkersUI, currentTheme);
        applyTheme(rangeIndicatorUI, currentTheme);
        applyTheme(smoothCrosshairUI, currentTheme);
        applyTheme(fpsBoosterUI, currentTheme);
        applyTheme(swingAnimationUI, currentTheme);
        applyTheme(pingUI, currentTheme);
        applyTheme(keystrokesUI, currentTheme);
        applyTheme(zoomUI, currentTheme);
        applyTheme(nightVisionUI, currentTheme);
        applyTheme(coordinatesUI, currentTheme);
        applyTheme(timerUI, currentTheme);
        applyTheme(playerList, currentTheme);
        applyTheme(accountSwitcher, currentTheme);
        applyTheme(addAccBtn, currentTheme);
        applyTheme(switchBtn, currentTheme);
        applyTheme(spinningSpikesUI, currentTheme);
        applyTheme(pulseEffectUI, currentTheme);
        accountList.querySelectorAll('.acc-btn').forEach(btn => applyTheme(btn, currentTheme));
    });

    const arrayListUI = document.createElement('div');
    arrayListUI.className = 'mod-ui arraylist-container';
    arrayListUI.style.top = '10px';
    arrayListUI.style.right = '10px';
    document.body.appendChild(arrayListUI);
    makeDraggable(arrayListUI);
    applyTheme(arrayListUI, currentTheme);
    function updateArrayList() {
        const activeMods = [];
        if (fpsMod.checked) activeMods.push('FPS');
        if (cpsMod.checked) activeMods.push('CPS');
        if (texturePacksMod.checked) activeMods.push('Texture Packs');
        if (menuThemeMod.checked) activeMods.push('Menu Theme');
        if (arrayListMod.checked) activeMods.push('ArrayList');
        if (hitMarkersMod.checked) activeMods.push('Hit Markers');
        if (rangeIndicatorMod.checked) activeMods.push('Range Indicator');
        if (smoothCrosshairMod.checked) activeMods.push('Smooth Crosshair');
        if (fpsBoosterMod.checked) activeMods.push('FPS Booster');
        if (swingAnimationMod.checked) activeMods.push('Swing Animation');
        if (pingMod.checked) activeMods.push('Ping');
        if (keystrokesMod.checked) activeMods.push('Keystrokes');
        if (zoomMod.checked) activeMods.push('Zoom');
        if (nightVisionMod.checked) activeMods.push('Night Vision');
        if (coordinatesMod.checked) activeMods.push('Coordinates');
        if (timerMod.checked) activeMods.push('Timer');
        if (spinningSpikesMod.checked) activeMods.push('Spinning Spikes');
        if (pulseEffectMod.checked) activeMods.push('Pulse Effect');
        activeMods.sort();
        arrayListUI.innerHTML = activeMods.map(mod => `<div class="arraylist-item">${mod}</div>`).join('');
    }

    const hitMarkersUI = document.createElement('div');
    hitMarkersUI.className = 'mod-ui';
    hitMarkersUI.style.top = '360px';
    hitMarkersUI.style.left = '10px';
    document.body.appendChild(hitMarkersUI);
    makeDraggable(hitMarkersUI);
    applyTheme(hitMarkersUI, currentTheme);
    document.addEventListener('mousedown', (e) => {
        if (!hitMarkersMod.checked || e.button !== 0) return;
        const marker = document.createElement('div');
        marker.style = `
            position: fixed;
            top: ${e.clientY - 5}px;
            left: ${e.clientX - 5}px;
            width: 10px;
            height: 10px;
            background: transparent;
            border: 2px solid #ff0000;
            border-radius: 0;
            transform: rotate(45deg);
            z-index: 1000;
            animation: hitFade 0.5s ease-out forwards;
            pointer-events: none;
        `;
        document.body.appendChild(marker);
        setTimeout(() => marker.remove(), 500);
    });
    addStyle(`
        @keyframes hitFade {
            0% { opacity: 1; transform: rotate(45deg) scale(1); }
            100% { opacity: 0; transform: rotate(45deg) scale(1.2); }
        }
    `);

    const rangeIndicatorUI = document.createElement('div');
    rangeIndicatorUI.className = 'mod-ui';
    rangeIndicatorUI.style.top = '410px';
    rangeIndicatorUI.style.left = '10px';
    rangeIndicatorUI.innerHTML = `
        <label>Range: </label>
        <input type="range" id="rangeSize" min="50" max="200" value="100">
    `;
    document.body.appendChild(rangeIndicatorUI);
    makeDraggable(rangeIndicatorUI);
    applyTheme(rangeIndicatorUI, currentTheme);
    const rangeCircle = document.createElement('div');
    rangeCircle.style = `
        position: fixed;
        border: 2px solid #ff0000;
        border-radius: 50%;
        z-index: 999;
        pointer-events: none;
        display: none;
    `;
    document.body.appendChild(rangeCircle);
    document.addEventListener('mousemove', (e) => {
        if (!rangeIndicatorMod.checked) return;
        const size = rangeIndicatorUI.querySelector('#rangeSize').value;
        rangeCircle.style.width = `${size}px`;
        rangeCircle.style.height = `${size}px`;
        rangeCircle.style.top = `${e.clientY - size / 2}px`;
        rangeCircle.style.left = `${e.clientX - size / 2}px`;
        rangeCircle.style.display = 'block';
    });

    const smoothCrosshairUI = document.createElement('div');
    smoothCrosshairUI.className = 'mod-ui';
    smoothCrosshairUI.style.top = '460px';
    smoothCrosshairUI.style.left = '10px';
    document.body.appendChild(smoothCrosshairUI);
    makeDraggable(smoothCrosshairUI);
    applyTheme(smoothCrosshairUI, currentTheme);
    const crosshair = document.createElement('div');
    crosshair.style = `
        position: fixed;
        width: 20px;
        height: 20px;
        background: transparent;
        border: 2px solid #fff;
        border-radius: 50%;
        z-index: 1000;
        pointer-events: none;
        display: none;
    `;
    document.body.appendChild(crosshair);
    document.addEventListener('mousemove', (e) => {
        if (!smoothCrosshairMod.checked) return;
        crosshair.style.top = `${e.clientY - 10}px`;
        crosshair.style.left = `${e.clientX - 10}px`;
        crosshair.style.display = 'block';
    });

    const swingAnimationUI = document.createElement('div');
    swingAnimationUI.className = 'mod-ui';
    swingAnimationUI.style.top = '510px';
    swingAnimationUI.style.left = '10px';
    document.body.appendChild(swingAnimationUI);
    makeDraggable(swingAnimationUI);
    applyTheme(swingAnimationUI, currentTheme);
    document.addEventListener('mousedown', (e) => {
        if (!swingAnimationMod.checked || e.button !== 0) return;
        const swing = document.createElement('div');
        swing.style = `
            position: fixed;
            top: ${e.clientY - 30}px;
            left: ${e.clientX - 30}px;
            width: 60px;
            height: 60px;
            background: rgba(0, 0, 255, 0.3);
            border: none;
            border-radius: 50%;
            z-index: 1000;
            animation: swingFade 0.7s ease-out forwards;
            pointer-events: none;
        `;
        document.body.appendChild(swing);
        setTimeout(() => swing.remove(), 700);
    });
    addStyle(`
        @keyframes swingFade {
            0% { opacity: 1; transform: scale(1); }
            100% { opacity: 0; transform: scale(2); }
        }
    `);

    const zoomUI = document.createElement('div');
    zoomUI.className = 'mod-ui';
    zoomUI.style.top = '110px';
    zoomUI.style.left = '150px';
    zoomUI.innerHTML = `
        <label>Zoom: </label>
        <input type="range" id="zoomLevel" min="0.5" max="2" step="0.1" value="1">
    `;
    document.body.appendChild(zoomUI);
    makeDraggable(zoomUI);
    applyTheme(zoomUI, currentTheme);
    const zoomLevel = zoomUI.querySelector('#zoomLevel');
    zoomLevel.addEventListener('input', (e) => {
        const canvas = document.querySelector('canvas');
        if (canvas) {
            const scale = e.target.value;
            canvas.style.transform = `scale(${scale})`;
            canvas.style.transformOrigin = 'center center'; // Center the zoom
            updatePulseEffect(); // Reapply pulse after zoom change
        }
    });

    const nightVisionUI = document.createElement('div');
    nightVisionUI.className = 'mod-ui';
    nightVisionUI.style.top = '160px';
    nightVisionUI.style.left = '150px';
    nightVisionUI.textContent = 'Night Vision: OFF';
    document.body.appendChild(nightVisionUI);
    makeDraggable(nightVisionUI);
    applyTheme(nightVisionUI, currentTheme);
    function toggleNightVision(on) {
        const canvas = document.querySelector('canvas');
        if (on) {
            canvas.style.filter = 'brightness(1.5)';
            nightVisionUI.textContent = 'Night Vision: ON';
        } else {
            canvas.style.filter = texturePacks[textureSelect.value].filter.split('canvas { filter: ')[1].split(';')[0];
            nightVisionUI.textContent = 'Night Vision: OFF';
        }
        updatePulseEffect(); // Ensure pulse effect persists after filter change
    }

    let playerPos = { x: 0, y: 0 };

    const coordinatesUI = document.createElement('div');
    coordinatesUI.className = 'mod-ui';
    coordinatesUI.style.top = '310px';
    coordinatesUI.style.left = '10px';
    coordinatesUI.textContent = 'X: 0, Y: 0';
    document.body.appendChild(coordinatesUI);
    makeDraggable(coordinatesUI);
    applyTheme(coordinatesUI, currentTheme);
    function updateCoordinates() {
        if (!coordinatesMod.checked) return;
        coordinatesUI.textContent = `X: ${Math.round(playerPos.x)}, Y: ${Math.round(playerPos.y)}`;
    }
    setInterval(updateCoordinates, 100);

    const timerUI = document.createElement('div');
    timerUI.className = 'mod-ui';
    timerUI.style.top = '360px';
    timerUI.style.left = '10px';
    timerUI.textContent = 'Time: 00:00';
    document.body.appendChild(timerUI);
    makeDraggable(timerUI);
    applyTheme(timerUI, currentTheme);
    let startTime = Date.now();
    function updateTimer() {
        if (!timerMod.checked) return;
        const elapsed = Math.floor((Date.now() - startTime) / 1000);
        const minutes = String(Math.floor(elapsed / 60)).padStart(2, '0');
        const seconds = String(elapsed % 60).padStart(2, '0');
        timerUI.textContent = `Time: ${minutes}:${seconds}`;
    }
    setInterval(updateTimer, 1000);

    const fpsMod = menu.querySelector('#fpsMod');
    const cpsMod = menu.querySelector('#cpsMod');
    const texturePacksMod = menu.querySelector('#texturePacksMod');
    const menuThemeMod = menu.querySelector('#menuThemeMod');
    const arrayListMod = menu.querySelector('#arrayListMod');
    const hitMarkersMod = menu.querySelector('#hitMarkersMod');
    const rangeIndicatorMod = menu.querySelector('#rangeIndicatorMod');
    const smoothCrosshairMod = menu.querySelector('#smoothCrosshairMod');
    const fpsBoosterMod = menu.querySelector('#fpsBoosterMod');
    const swingAnimationMod = menu.querySelector('#swingAnimationMod');
    const pingMod = menu.querySelector('#pingMod');
    const keystrokesMod = menu.querySelector('#keystrokesMod');
    const zoomMod = menu.querySelector('#zoomMod');
    const nightVisionMod = menu.querySelector('#nightVisionMod');
    const coordinatesMod = menu.querySelector('#coordinatesMod');
    const timerMod = menu.querySelector('#timerMod');
    const spinningSpikesMod = menu.querySelector('#spinningSpikesMod');
    const pulseEffectMod = menu.querySelector('#pulseEffectMod');

    const modUIs = {
        fps: fpsUI,
        cps: cpsUI,
        texturePacks: textureUI,
        menuTheme: menuThemeUI,
        arrayList: arrayListUI,
        hitMarkers: hitMarkersUI,
        rangeIndicator: rangeIndicatorUI,
        smoothCrosshair: smoothCrosshairUI,
        fpsBooster: fpsBoosterUI,
        swingAnimation: swingAnimationUI,
        ping: pingUI,
        keystrokes: keystrokesUI,
        zoom: zoomUI,
        nightVision: nightVisionUI,
        coordinates: coordinatesUI,
        timer: timerUI,
        spinningSpikes: spinningSpikesUI,
        pulseEffect: pulseEffectUI
    };

    // Initialize mod UI visibility and pulse effect
    function initializeModUIs() {
        Object.keys(modUIs).forEach(mod => {
            const checkbox = menu.querySelector(`#${mod}Mod`);
            modUIs[mod].style.display = checkbox.checked ? 'block' : 'none';
            if (mod === 'rangeIndicator' && checkbox.checked) rangeCircle.style.display = 'block';
            if (mod === 'smoothCrosshair' && checkbox.checked) crosshair.style.display = 'block';
            if (mod === 'fps' && checkbox.checked) requestAnimationFrame(updateFPS);
            if (mod === 'ping' && checkbox.checked) setInterval(updatePing, 2000);
            if (mod === 'fpsBooster' && checkbox.checked) toggleFPSBooster(true);
            if (mod === 'nightVision' && checkbox.checked) toggleNightVision(true);
            if (mod === 'timer' && checkbox.checked) startTime = Date.now();
            if (mod === 'pulseEffect' && checkbox.checked) updatePulseEffect();
        });
        updateArrayList();
    }

    fpsMod.addEventListener('change', () => {
        modUIs.fps.style.display = fpsMod.checked ? 'block' : 'none';
        if (fpsMod.checked) requestAnimationFrame(updateFPS);
        updateArrayList();
    });
    cpsMod.addEventListener('change', () => {
        modUIs.cps.style.display = cpsMod.checked ? 'block' : 'none';
        updateArrayList();
    });
    texturePacksMod.addEventListener('change', () => {
        modUIs.texturePacks.style.display = texturePacksMod.checked ? 'block' : 'none';
        updateArrayList();
    });
    menuThemeMod.addEventListener('change', () => {
        modUIs.menuTheme.style.display = menuThemeMod.checked ? 'block' : 'none';
        updateArrayList();
    });
    arrayListMod.addEventListener('change', () => {
        modUIs.arrayList.style.display = arrayListMod.checked ? 'block' : 'none';
        updateArrayList();
    });
    hitMarkersMod.addEventListener('change', () => {
        modUIs.hitMarkers.style.display = hitMarkersMod.checked ? 'block' : 'none';
        updateArrayList();
    });
    rangeIndicatorMod.addEventListener('change', () => {
        modUIs.rangeIndicator.style.display = rangeIndicatorMod.checked ? 'block' : 'none';
        rangeCircle.style.display = rangeIndicatorMod.checked ? 'block' : 'none';
        updateArrayList();
    });
    smoothCrosshairMod.addEventListener('change', () => {
        modUIs.smoothCrosshair.style.display = smoothCrosshairMod.checked ? 'block' : 'none';
        crosshair.style.display = smoothCrosshairMod.checked ? 'block' : 'none';
        updateArrayList();
    });
    fpsBoosterMod.addEventListener('change', () => {
        modUIs.fpsBooster.style.display = fpsBoosterMod.checked ? 'block' : 'none';
        toggleFPSBooster(fpsBoosterMod.checked);
        updateArrayList();
    });
    swingAnimationMod.addEventListener('change', () => {
        modUIs.swingAnimation.style.display = swingAnimationMod.checked ? 'block' : 'none';
        updateArrayList();
    });
    pingMod.addEventListener('change', () => {
        modUIs.ping.style.display = pingMod.checked ? 'block' : 'none';
        if (pingMod.checked) setInterval(updatePing, 2000);
        updateArrayList();
    });
    keystrokesMod.addEventListener('change', () => {
        modUIs.keystrokes.style.display = keystrokesMod.checked ? 'block' : 'none';
        updateArrayList();
    });
    zoomMod.addEventListener('change', () => {
        modUIs.zoom.style.display = zoomMod.checked ? 'block' : 'none';
        const canvas = document.querySelector('canvas');
        if (!zoomMod.checked && canvas) {
            canvas.style.transform = 'scale(1)';
            updatePulseEffect();
        }
        updateArrayList();
    });
    nightVisionMod.addEventListener('change', () => {
        modUIs.nightVision.style.display = nightVisionMod.checked ? 'block' : 'none';
        toggleNightVision(nightVisionMod.checked);
        updateArrayList();
    });
    coordinatesMod.addEventListener('change', () => {
        modUIs.coordinates.style.display = coordinatesMod.checked ? 'block' : 'none';
        updateArrayList();
    });
    timerMod.addEventListener('change', () => {
        modUIs.timer.style.display = timerMod.checked ? 'block' : 'none';
        if (timerMod.checked) startTime = Date.now();
        updateArrayList();
    });
    spinningSpikesMod.addEventListener('change', () => {
        modUIs.spinningSpikes.style.display = spinningSpikesMod.checked ? 'block' : 'none';
        updateArrayList();
    });
    pulseEffectMod.addEventListener('change', () => {
        modUIs.pulseEffect.style.display = pulseEffectMod.checked ? 'block' : 'none';
        updatePulseEffect();
        updateArrayList();
    });

    // Call initialization after all mod UIs and event listeners are set up
    initializeModUIs();
})();