Sploop Lunar Client

Enhanced Sploop.io client with legal mods including custom crosshair

目前为 2025-04-18 提交的版本。查看 最新版本

// ==UserScript==
    // @name         Sploop Lunar Client
    // @namespace    http://tampermonkey.net/
    // @version      4
    // @description  Enhanced Sploop.io client with legal mods including custom crosshair
    // @author       hooder
    // @match        https://sploop.io/*
    // @grant        none
    // @require      https://update.gf.qytechs.cn/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 pulseSpeed = 1.5;
        let spinSpeed = 3.1;

        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);
            }
            .keystrokes-ui, .pulse-effect-ui, .crosshair-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); }
            }
            @keyframes hitFade {
                0% { opacity: 1; transform: rotate(45deg) scale(1); }
                100% { opacity: 0; transform: rotate(45deg) scale(1.2); }
            }
            @keyframes swingFade {
                0% { opacity: 1; transform: scale(1); }
                100% { opacity: 0; transform: scale(2); }
            }
            .crosshair {
                position: fixed;
                z-index: 99999;
                pointer-events: none;
                display: none;
                transform: translate(-50%, -50%);
                will-change: transform;
            }
            .crosshair.dot {
                width: 12px;
                height: 12px;
                border-radius: 50%;
            }
            .crosshair.cross {
                width: 20px;
                height: 20px;
            }
            .crosshair.cross::before, .crosshair.cross::after {
                content: '';
                position: absolute;
                background-color: currentColor;
            }
            .crosshair.cross::before {
                top: 50%;
                left: 0;
                width: 100%;
                height: 2px;
                transform: translateY(-50%);
            }
            .crosshair.cross::after {
                top: 0;
                left: 50%;
                width: 2px;
                height: 100%;
                transform: translateX(-50%);
            }
            .crosshair.spike {
                width: 48px;
                height: 48px;
                background-image: url("https://sploop.io/img/entity/hard_spike.png");
                background-size: cover;
                background-repeat: no-repeat;
                background-position: center;
            }
            .crosshair.square {
                width: 14px;
                height: 14px;
                border: 2px solid;
            }
            .crosshair.triangle {
                width: 0;
                height: 0;
                border-left: 10px solid transparent;
                border-right: 10px solid transparent;
                border-bottom: 18px solid currentColor;
            }
            .crosshair.xcross {
                width: 20px;
                height: 20px;
            }
            .crosshair.xcross::before, .crosshair.xcross::after {
                content: '';
                position: absolute;
                width: 2px;
                height: 100%;
                background-color: currentColor;
                left: 50%;
                top: 0;
                transform-origin: center;
            }
            .crosshair.xcross::before {
                transform: rotate(45deg);
            }
            .crosshair.xcross::after {
                transform: rotate(-45deg);
            }
            body.hide-cursor * {
                cursor: none !important;
            }
            .crosshair-select, .crosshair-color {
                margin-top: 10px;
                width: 100%;
                padding: 5px;
                background: #111;
                color: white;
                border: 1px solid #333;
                border-radius: 5px;
            }
        `);

        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="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"> Spike Spin Mod</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="crosshairMod"> Custom Crosshair</div>
                <div class="mod-toggle"><input type="checkbox" id="swingAnimationMod"> Swing Animation</div>
            </div>
            <div id="players-tab" class="tab-content">
                <p>Toggle участие 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 ? 'flex' : 'none';
            }
        });

        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');
        }

        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();
        });

        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 with Adjustable Speed
        const spinningSpikesUI = document.createElement('div');
        spinningSpikesUI.className = 'mod-ui';
        spinningSpikesUI.style.top = '10px';
        spinningSpikesUI.style.left = '150px';
        spinningSpikesUI.innerHTML = `
            <label>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);
        });

        function initSpinningSpikes() {
            const gameCanvas = document.getElementById('game-canvas');
            if (!gameCanvas) {
                console.log('Waiting for game canvas...');
                setTimeout(initSpinningSpikes, 500);
                return;
            }

            const ctx2D = gameCanvas.getContext('2d');
            const ctxWebGL = gameCanvas.getContext('webgl') || gameCanvas.getContext('experimental-webgl');
            console.log('Canvas context - 2D:', !!ctx2D, 'WebGL:', !!ctxWebGL);

            if (!ctx2D && ctxWebGL) {
                console.log('WebGL detected; 2D spinning spikes mod may not work. Attempting overlay fallback.');
                initOverlayFallback(gameCanvas);
                return;
            }

            if (!ctx2D) {
                console.log('No rendering context found; spikes mod cannot initialize.');
                return;
            }

            console.log('Spinning Spikes initialized on canvas (2D):', gameCanvas.id);

            const spikeUrls = new Set([
                "https://sploop.io/img/entity/spike.png?v=1923912",
                "https://sploop.io/img/entity/hard_spike.png?v=1923912",
                "https://sploop.io/img/entity/big_spike.png?v=1923912"
            ]);

            const spikeUpdate = (ctx, img, x, y, width, height, rotation) => {
                ctx.save();
                ctx.translate(x + width / 2, y + height / 2);
                ctx.rotate(rotation);
                ogdraw.call(ctx, img, -width / 2, -height / 2, width, height);
                ctx.restore();
            };

            const ogdraw = CanvasRenderingContext2D.prototype.drawImage;
            CanvasRenderingContext2D.prototype.drawImage = function(img, ...args) {
                const isSpinningEnabled = document.getElementById('spinningSpikesMod')?.checked || false;
                if (this.canvas && this.canvas.id === "game-canvas" && img instanceof HTMLImageElement && spikeUrls.has(img.src) && isSpinningEnabled) {
                    console.log('Spike detected:', img.src, 'Args:', args);
                    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 {
                        console.log('Unsupported drawImage call:', args);
                        return ogdraw.apply(this, [img, ...args]);
                    }
                    this.globalAlpha = 0;
                    ogdraw.apply(this, [img, ...args]);
                    this.globalAlpha = 1;
                    const rotation = (performance.now() / 1000 * spinSpeed) % (2 * Math.PI);
                    spikeUpdate(this, img, x, y, width, height, rotation);
                } else {
                    return ogdraw.apply(this, [img, ...args]);
                }
            };
        }

        function initOverlayFallback(canvas) {
            console.log('Overlay fallback not implemented yet; spikes will not spin.');
        }

        setTimeout(() => {
            initSpinningSpikes();
            console.log('Spike Spin Mod initialization attempted');
        }, 4000);

        const pulseEffectUI = document.createElement('div');
        pulseEffectUI.className = 'mod-ui pulse-effect-ui';
        pulseEffectUI.style.top = '60px';
        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);
            updateCanvasEffects();
        });

        // Crosshair Mod
        const crosshairUI = document.createElement('div');
        crosshairUI.className = 'mod-ui crosshair-ui';
        crosshairUI.style.top = '460px';
        crosshairUI.style.left = '10px';
        crosshairUI.innerHTML = `
            <label><input type="checkbox" id="toggleCrosshair"> Enable Crosshair</label>
            <select id="crosshairStyle" class="crosshair-select">
                <option value="dot">Dot</option>
                <option value="cross">Cross</option>
                <option value="spike">Spike</option>
                <option value="square">Square</option>
                <option value="triangle">Triangle</option>
                <option value="xcross">X Cross</option>
            </select>
            <input type="color" id="crosshairColor" class="crosshair-color" value="#ff0000">
        `;
        document.body.appendChild(crosshairUI);
        makeDraggable(crosshairUI);
        applyTheme(crosshairUI, currentTheme);

        let crosshair = document.createElement('div');
        crosshair.className = 'crosshair dot';
        document.body.appendChild(crosshair);

        const toggleCrosshair = crosshairUI.querySelector('#toggleCrosshair');
        const crosshairStyleSelect = crosshairUI.querySelector('#crosshairStyle');
        const crosshairColorPicker = crosshairUI.querySelector('#crosshairColor');

        function throttle(fn, wait) {
            let lastCall = 0;
            return function (...args) {
                const now = performance.now();
                if (now - lastCall >= wait) {
                    lastCall = now;
                    fn(...args);
                }
            };
        }

        function debounce(fn, wait) {
            let timeout;
            return function (...args) {
                clearTimeout(timeout);
                timeout = setTimeout(() => fn(...args), wait);
            };
        }

        function setCrosshairStyle(styleName) {
            const newCrosshair = document.createElement('div');
            newCrosshair.className = 'crosshair ' + styleName;
            document.body.replaceChild(newCrosshair, crosshair);
            crosshair = newCrosshair;
            updateCrosshairColor();
            if (toggleCrosshair.checked) {
                crosshair.style.display = 'block';
            }
        }

        toggleCrosshair.addEventListener('change', () => {
            if (toggleCrosshair.checked) {
                crosshair.style.display = 'block';
                document.body.classList.add('hide-cursor');
                document.addEventListener('mousemove', throttledMoveCrosshair);
            } else {
                crosshair.style.display = 'none';
                document.body.classList.remove('hide-cursor');
                document.removeEventListener('mousemove', throttledMoveCrosshair);
            }
        });

        crosshairStyleSelect.addEventListener('change', () => {
            setCrosshairStyle(crosshairStyleSelect.value);
        });

        const debouncedUpdateColor = debounce(updateCrosshairColor, 100);
        crosshairColorPicker.addEventListener('input', debouncedUpdateColor);

        function updateCrosshairColor() {
            const color = crosshairColorPicker.value;
            crosshair.style.backgroundColor = '';
            crosshair.style.borderColor = '';
            crosshair.style.color = color;
            if (crosshair.classList.contains('dot')) {
                crosshair.style.backgroundColor = color;
            } else if (crosshair.classList.contains('cross') || crosshair.classList.contains('xcross')) {
                crosshair.style.background = 'transparent';
            } else if (crosshair.classList.contains('square')) {
                crosshair.style.borderColor = color;
                crosshair.style.background = 'transparent';
            }
        }

        const throttledMoveCrosshair = throttle((e) => {
            crosshair.style.transform = `translate(${e.clientX}px, ${e.clientY}px) translate(-50%, -50%)`;
        }, 16);

        function updateCanvasEffects() {
            const canvas = document.getElementById('game-canvas');
            if (!canvas) return;

            const zoomLevel = document.getElementById('zoomLevel')?.value || 1;
            canvas.style.transform = `scale(${zoomLevel})`;
            canvas.style.transformOrigin = 'center center';

            const isPulseEnabled = document.getElementById('pulseEffectMod')?.checked;
            canvas.style.animation = isPulseEnabled ? `screenPulse ${pulseSpeed}s infinite ease-in-out` : 'none';

            const isFpsBoostEnabled = document.getElementById('fpsBoosterMod')?.checked;
            const isNightVisionEnabled = document.getElementById('nightVisionMod')?.checked;
            let filter = '';
            if (isNightVisionEnabled) filter += ' brightness(1.5)';
            canvas.style.filter = filter.trim();
        }

        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.getElementById('game-canvas');
            if (on) {
                canvas.style.imageRendering = 'pixelated';
                document.body.style.background = '#000';
                fpsBoosterUI.textContent = 'FPS Booster: ON';
            } else {
                canvas.style.imageRendering = 'auto';
                document.body.style.background = '#1a1a1a';
                fpsBoosterUI.textContent = 'FPS Booster: OFF';
            }
            updateCanvasEffects();
        }

        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 = '10px';
        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 themeSelectMenu = menuThemeUI.querySelector('#themeSelect');
        themeSelectMenu.addEventListener('change', (e) => {
            currentTheme = e.target.value;
            applyTheme(menu, currentTheme);
            tabButtons.forEach(btn => applyTheme(btn, currentTheme));
            applyTheme(moveModsBtn, currentTheme);
            applyTheme(fpsUI, currentTheme);
            applyTheme(cpsUI, currentTheme);
            applyTheme(menuThemeUI, currentTheme);
            applyTheme(arrayListUI, currentTheme);
            applyTheme(hitMarkersUI, currentTheme);
            applyTheme(rangeIndicatorUI, currentTheme);
            applyTheme(crosshairUI, 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(pulseEffectUI, currentTheme);
            applyTheme(spinningSpikesUI, 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 (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 (crosshairMod.checked) activeMods.push('Custom 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('Spike Spin Mod');
            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);
        });

        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 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);
        });

        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', () => updateCanvasEffects());

        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) {
            nightVisionUI.textContent = `Night Vision: ${on ? 'ON' : 'OFF'}`;
            updateCanvasEffects();
        }

        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 menuThemeMod = menu.querySelector('#menuThemeMod');
        const arrayListMod = menu.querySelector('#arrayListMod');
        const hitMarkersMod = menu.querySelector('#hitMarkersMod');
        const rangeIndicatorMod = menu.querySelector('#rangeIndicatorMod');
        const crosshairMod = menu.querySelector('#crosshairMod');
        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,
            menuTheme: menuThemeUI,
            arrayList: arrayListUI,
            hitMarkers: hitMarkersUI,
            rangeIndicator: rangeIndicatorUI,
            crosshair: crosshairUI,
            fpsBooster: fpsBoosterUI,
            swingAnimation: swingAnimationUI,
            ping: pingUI,
            keystrokes: keystrokesUI,
            zoom: zoomUI,
            nightVision: nightVisionUI,
            coordinates: coordinatesUI,
            timer: timerUI,
            spinningSpikes: spinningSpikesUI,
            pulseEffect: pulseEffectUI
        };

        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 === 'crosshair' && checkbox.checked) toggleCrosshair.checked = true;
                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();
            });
            updateCanvasEffects();
            updateArrayList();
        }

        function forceCanvasRedraw() {
            const canvas = document.getElementById('game-canvas');
            if (canvas) {
                console.log('Forcing canvas redraw');
                canvas.style.opacity = '0.99';
                requestAnimationFrame(() => {
                    canvas.style.opacity = '1';
                });
            }
        }

        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();
        });
        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();
        });
        crosshairMod.addEventListener('change', () => {
            modUIs.crosshair.style.display = crosshairMod.checked ? 'block' : 'none';
            toggleCrosshair.checked = crosshairMod.checked;
            toggleCrosshair.dispatchEvent(new Event('change'));
            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';
            if (!zoomMod.checked) zoomLevel.value = 1;
            updateCanvasEffects();
            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();
            forceCanvasRedraw();
        });
        pulseEffectMod.addEventListener('change', () => {
            modUIs.pulseEffect.style.display = pulseEffectMod.checked ? 'block' : 'none';
            updateCanvasEffects();
            updateArrayList();
        });

        initializeModUIs();
    })();

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址