☰

HookX Client

Enhanced Sploop.io client with legal mods including custom crosshair and account management

// ==UserScript==
    // @name         HookX Client
    // @namespace    http://tampermonkey.net/
    // @version      5.3
    // @description  Enhanced Sploop.io client with legal mods including custom crosshair and account management
    // @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 = 'green';
        let pulseSpeed = 1.5;
        let spinSpeed = 3.1;

        addStyle(`
            .hookx-menu {
                position: fixed;
                top: 50px;
                left: 50px;
                width: 480px;
                height: 500px;
                background: linear-gradient(135deg, #1a3c34, #1a1a1a);
                border: 2px solid #4caf50;
                border-radius: 15px;
                color: #e0e0e0;
                font-family: 'Segoe UI', 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;
            }
            .hookx-menu h2 {
                margin: 0 0 10px 0;
                text-align: center;
                color: #a5d6a7;
                cursor: move;
                font-size: 24px;
                font-weight: 600;
            }
            .tab-buttons {
                display: flex;
                justify-content: center;
                gap: 10px;
                margin-bottom: 15px;
            }
            .tab-button {
                background: #4caf50;
                border: none;
                padding: 8px 20px;
                color: #ffffff;
                cursor: pointer;
                border-radius: 8px;
                transition: all 0.3s;
                font-size: 14px;
            }
            .tab-button:hover {
                background: #a5d6a7;
                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;
                font-size: 14px;
            }
            .move-mods-btn {
                background: #4caf50;
                border: none;
                padding: 10px 20px;
                color: #ffffff;
                cursor: pointer;
                border-radius: 8px;
                margin-top: 15px;
                width: 150px;
                align-self: center;
                transition: all 0.3s;
                font-size: 14px;
            }
            .move-mods-btn:hover {
                background: #a5d6a7;
                color: #1a1a1a;
            }
            .mod-ui {
                position: fixed;
                padding: 10px;
                color: #e0e0e0;
                z-index: 1000;
                display: none;
                border-radius: 5px;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
                background: rgba(26, 26, 26, 0.8);
                font-size: 14px;
            }
            .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 #e0e0e0;
                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(26, 26, 26, 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;
                font-size: 12px;
            }
            .arraylist-item:hover {
                background: rgba(255, 255, 255, 0.2);
            }
            .player-list {
                position: fixed;
                top: 50px;
                left: 50px;
                width: 300px;
                max-height: 500px;
                background: linear-gradient(135deg, #1a3c34, #1a1a1a);
                border: 2px solid #4caf50;
                border-radius: 15px;
                padding: 15px;
                color: #e0e0e0;
                font-family: 'Segoe UI', 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: #4caf50;
                border-radius: 4px;
            }
            .player-name {
                margin: 5px 0;
                font-size: 16px;
                opacity: 0;
                transition: opacity 0.5s;
            }
            .join-notification {
                position: fixed;
                bottom: 20px;
                right: 20px;
                background: rgba(26, 26, 26, 0.7);
                color: #e0e0e0;
                padding: 6px 12px;
                border-radius: 6px;
                font-size: 12px;
                opacity: 0;
                transition: opacity 0.5s;
                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 #4caf50;
                transition: transform 0.3s;
            }
            .theme-button:hover {
                transform: scale(1.1);
            }
            .pink-button { background: linear-gradient(135deg, #f8bbd0, #ec407a); }
            .light-orange-button { background: linear-gradient(135deg, #ffcc80, #ff9800); }
            .skye-blue-button { background: linear-gradient(135deg, #81d4fa, #0288d1); }
            .green-button { background: linear-gradient(135deg, #a5d6a7, #4caf50); }
            .purple-button { background: linear-gradient(135deg, #d1c4e9, #7e57c2); }
            .neon-button { background: linear-gradient(135deg, #80deea, #26a69a); }
            .red-button { background: linear-gradient(135deg, #ef9a9a, #e53935); }
            .yellow-button { background: linear-gradient(135deg, #fff59d, #fbc02d); }
            .account-form {
                display: flex;
                flex-direction: column;
                gap: 10px;
                margin-bottom: 15px;
            }
            .account-form input {
                padding: 8px;
                background: #333;
                color: #e0e0e0;
                border: 1px solid #4caf50;
                border-radius: 5px;
                font-size: 14px;
            }
            .account-form button {
                background: #4caf50;
                border: none;
                padding: 8px;
                color: #ffffff;
                cursor: pointer;
                border-radius: 5px;
                font-size: 14px;
            }
            .account-form button:hover {
                background: #a5d6a7;
                color: #1a1a1a;
            }
            .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;
                font-size: 14px;
            }
            .account-buttons {
                display: flex;
                gap: 10px;
            }
            .acc-btn {
                padding: 5px 15px;
                border: none;
                border-radius: 5px;
                color: #ffffff;
                cursor: pointer;
                transition: all 0.3s;
                font-size: 12px;
            }
            .acc-btn-switch {
                background: #4caf50;
            }
            .acc-btn-switch:hover {
                background: #a5d6a7;
                color: #1a1a1a;
            }
            .acc-btn-remove {
                background: #d32f2f;
            }
            .acc-btn-remove:hover {
                background: #ef5350;
            }
            @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 {
                border-radius: 50%;
            }
            .crosshair.cross, .crosshair.xcross {
                width: 20px;
                height: 20px;
            }
            .crosshair.cross::before, .crosshair.cross::after,
            .crosshair.xcross::before, .crosshair.xcross::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.xcross::before {
                left: 50%;
                top: 0;
                width: 2px;
                height: 100%;
                transform: rotate(45deg);
            }
            .crosshair.xcross::after {
                left: 50%;
                top: 0;
                width: 2px;
                height: 100%;
                transform: rotate(-45deg);
            }
            .crosshair.spike {
                background-image: url("https://sploop.io/img/entity/hard_spike.png");
                background-size: cover;
            }
            .crosshair.square {
                border: 2px solid;
            }
            .crosshair.triangle {
                width: 0;
                height: 0;
                border-left: 10px solid transparent;
                border-right: 10px solid transparent;
                border-bottom: 18px solid currentColor;
            }
            body.hide-cursor * {
                cursor: none !important;
            }
            .crosshair-select, .crosshair-color, .hookx-select, .hookx-color, .hookx-range {
                margin: 5px 0;
                width: 100%;
                padding: 5px;
                background: #333;
                color: #e0e0e0;
                border: 1px solid #4caf50;
                border-radius: 4px;
                font-size: 12px;
            }
            .hookx-label {
                font-size: 12px;
                color: #4caf50;
                margin: 5px 0 2px;
            }
            .hookx-range {
                -webkit-appearance: none;
                appearance: none;
                height: 5px;
                background: #444;
                outline: none;
            }
            .hookx-range::-webkit-slider-thumb {
                -webkit-appearance: none;
                appearance: none;
                width: 15px;
                height: 15px;
                background: #4caf50;
                cursor: pointer;
                border-radius: 50%;
            }
            #watermark {
                position: fixed;
                top: 50%;
                left: 10px;
                transform: translateY(-50%);
                color: rgba(255, 255, 255, 0.1);
                font-size: 24px;
                font-family: 'Segoe UI', sans-serif;
                pointer-events: none;
                z-index: 100001;
                user-select: none;
            }
        `);

        const themes = {
            green: { background: `linear-gradient(135deg, #1a3c34, #1a1a1a)`, border: `#4caf50`, button: `#4caf50` },
            blue: { background: `linear-gradient(135deg, #0d47a1, #1a1a1a)`, border: `#2196f3`, button: `#2196f3` },
            red: { background: `linear-gradient(135deg, #b71c1c, #1a1a1a)`, border: `#d32f2f`, button: `#d32f2f` },
            purple: { background: `linear-gradient(135deg, #4a148c, #1a1a1a)`, border: `#7e57c2`, button: `#7e57c2` },
            orange: { background: `linear-gradient(135deg, #e65100, #1a1a1a)`, border: `#ff9800`, button: `#ff9800` },
            cyan: { background: `linear-gradient(135deg, #006064, #1a1a1a)`, border: `#26a69a`, button: `#26a69a` },
            pink: { background: `linear-gradient(135deg, #ad1457, #1a1a1a)`, border: `#ec407a`, button: `#ec407a` },
            yellow: { background: `linear-gradient(135deg, #f57f17, #1a1a1a)`, border: `#fbc02d`, button: `#fbc02d` },
            neon: { background: `linear-gradient(135deg, #00b8d4, #1a1a1a)`, border: `#00e5ff`, button: `#00e5ff` },
            dark: { background: `linear-gradient(135deg, #212121, #1a1a1a)`, border: `#424242`, button: `#424242` },
            forest: { background: `linear-gradient(135deg, #2e7d32, #1a1a1a)`, border: `#66bb6a`, button: `#66bb6a` },
            ocean: { background: `linear-gradient(135deg, #01579b, #1a1a1a)`, border: `#29b6f6`, button: `#29b6f6` }
        };

        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 = 'hookx-menu';
        menu.innerHTML = `
            <h2>HookX 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>
                <button class="tab-button" data-tab="accounts">Accounts</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>Player list is displayed here. Toggle with ; key.</p>
                <p>Made by blubby, edited by hooder</p>
            </div>
            <div id="accounts-tab" class="tab-content">
                <div class="account-form">
                    <input type="text" id="account-email" placeholder="Email">
                    <input type="password" id="account-password" placeholder="Password">
                    <button id="add-account-btn">Add Account</button>
                </div>
                <div class="account-list" id="account-list"></div>
            </div>
            <button class="move-mods-btn">Move Mods</button>
        `;
        document.body.appendChild(menu);
        makeDraggable(menu);
        applyTheme(menu, currentTheme);

        const watermark = document.createElement('div');
        watermark.id = 'watermark';
        watermark.textContent = 'hooder';
        document.body.appendChild(watermark);

        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!`;
            notification.className = 'join-notification';
            document.body.appendChild(notification);
            setTimeout(() => notification.style.opacity = '1', 100);
            setTimeout(() => {
                notification.style.opacity = '0';
                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('#f8bbd0', '#ec407a', '#ec407a'));
        const orangeButton = createThemeButton('light-orange-button', () => setTheme('#ffcc80', '#ff9800', '#ff9800'));
        const blueButton = createThemeButton('skye-blue-button', () => setTheme('#81d4fa', '#0288d1', '#0288d1'));
        const greenButton = createThemeButton('green-button', () => setTheme('#a5d6a7', '#4caf50', '#4caf50'));
        const purpleButton = createThemeButton('purple-button', () => setTheme('#d1c4e9', '#7e57c2', '#7e57c2'));
        const neonButton = createThemeButton('neon-button', () => setTheme('#80deea', '#26a69a', '#26a69a'));
        const redButton = createThemeButton('red-button', () => setTheme('#ef9a9a', '#e53935', '#e53935'));
        const yellowButton = createThemeButton('yellow-button', () => setTheme('#fff59d', '#fbc02d', '#fbc02d'));
        themeButtonsContainer.append(pinkButton, orangeButton, blueButton, greenButton, purpleButton, neonButton, redButton, yellowButton);
        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 = '#e0e0e0');
        }

        const accountList = menu.querySelector('#account-list');
        const addAccBtn = menu.querySelector('#add-account-btn');
        const emailInput = menu.querySelector('#account-email');
        const passInput = menu.querySelector('#account-password');

        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', () => {
                const loginBtn = document.getElementById('login');
                const logoutBtn = document.getElementById('logout');
                const gameEmailInput = document.getElementById('enter-mail');
                const gamePassInput = document.getElementById('enter-password');
                logoutBtn.click();
                gameEmailInput.value = data.email;
                gamePassInput.value = data.password;
                loginBtn.click();
            });
            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 = emailInput.value;
            const password = passInput.value;
            if (email && password) {
                fetch(`https://account.sploop.io:443/login?mail=${email}&hash=${hex_md5(password)}`)
                    .then(response => response.json())
                    .then(json => {
                        if (json.error) {
                            alert('Invalid Account');
                            return;
                        }
                        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));
                        emailInput.value = '';
                        passInput.value = '';
                    })
                    .catch(() => alert('Error adding account'));
            } else {
                alert('Please enter both email and password');
            }
        });

        const logo = document.createElement('div');
        logo.style = `
            position: fixed;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            color: #a5d6a7;
            font-family: 'Segoe UI', Arial, sans-serif;
            font-size: 20px;
            z-index: 1000;
            cursor: move;
        `;
        logo.textContent = 'HookX 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="hookx-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="hookx-color" value="#4caf50">
            <div class="hookx-label">Crosshair Size</div>
            <input type="range" id="crosshairSize" class="hookx-range" min="5" max="50" value="12">
            <div class="hookx-label">Opacity</div>
            <input type="range" id="crosshairOpacity" class="hookx-range" min="0.1" max="1" step="0.1" value="1">
            <div class="hookx-label">Offset</div>
            <input type="range" id="crosshairOffset" class="hookx-range" min="0" max="20" value="0">
        `;
        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');
        const sizeSlider = crosshairUI.querySelector('#crosshairSize');
        const opacitySlider = crosshairUI.querySelector('#crosshairOpacity');
        const offsetSlider = crosshairUI.querySelector('#crosshairOffset');

        function loadSettings() {
            const savedCrosshair = localStorage.getItem('crosshair') || 'dot';
            const savedColor = localStorage.getItem('crosshairColor') || '#4caf50';
            const savedSize = localStorage.getItem('crosshairSize') || 12;
            const savedOpacity = localStorage.getItem('crosshairOpacity') || 1;
            const savedOffset = localStorage.getItem('crosshairOffset') || 0;
            const savedToggle = JSON.parse(localStorage.getItem('toggleCrosshair')) || false;

            crosshairStyleSelect.value = savedCrosshair;
            crosshairColorPicker.value = savedColor;
            sizeSlider.value = savedSize;
            opacitySlider.value = savedOpacity;
            offsetSlider.value = savedOffset;
            toggleCrosshair.checked = savedToggle;

            setCrosshairStyle(savedCrosshair);
            crosshairColorPicker.dispatchEvent(new Event('input'));
            sizeSlider.dispatchEvent(new Event('input'));
            opacitySlider.dispatchEvent(new Event('input'));
            offsetSlider.dispatchEvent(new Event('input'));
            toggleCrosshair.dispatchEvent(new Event('change'));
        }

        function saveSettings() {
            localStorage.setItem('crosshair', crosshairStyleSelect.value);
            localStorage.setItem('crosshairColor', crosshairColorPicker.value);
            localStorage.setItem('crosshairSize', sizeSlider.value);
            localStorage.setItem('crosshairOpacity', opacitySlider.value);
            localStorage.setItem('crosshairOffset', offsetSlider.value);
            localStorage.setItem('toggleCrosshair', JSON.stringify(toggleCrosshair.checked));
        }

        function setCrosshairStyle(styleName) {
            const newCrosshair = document.createElement('div');
            newCrosshair.className = `crosshair ${styleName}`;
            const size = parseInt(sizeSlider.value);
            if (styleName === 'triangle') {
                newCrosshair.style.borderLeftWidth = `${size / 2}px`;
                newCrosshair.style.borderRightWidth = `${size / 2}px`;
                newCrosshair.style.borderBottomWidth = `${size * 0.9}px`;
                newCrosshair.style.borderLeftColor = 'transparent';
                newCrosshair.style.borderRightColor = 'transparent';
                newCrosshair.style.borderBottomColor = crosshairColorPicker.value;
            } else {
                newCrosshair.style.width = `${size}px`;
                newCrosshair.style.height = `${size}px`;
            }
            document.body.replaceChild(newCrosshair, crosshair);
            crosshair = newCrosshair;
            updateCrosshairColor();
            if (toggleCrosshair.checked) crosshair.style.display = 'block';
        }

        function updateCrosshairColor() {
            const color = crosshairColorPicker.value;
            crosshair.style.color = color;
            crosshair.style.opacity = parseFloat(opacitySlider.value);
            crosshair.style.backgroundColor = '';
            crosshair.style.borderColor = '';
            if (crosshair.classList.contains('dot')) {
                crosshair.style.backgroundColor = color;
            } else if (crosshair.classList.contains('square')) {
                crosshair.style.borderColor = color;
            } else if (crosshair.classList.contains('triangle')) {
                crosshair.style.borderBottomColor = color;
            }
        }

        function moveCrosshair(e) {
            const offset = parseInt(offsetSlider.value);
            crosshair.style.left = `${e.clientX + offset}px`;
            crosshair.style.top = `${e.clientY + offset}px`;
        }

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

        crosshairStyleSelect.addEventListener('change', () => {
            setCrosshairStyle(crosshairStyleSelect.value);
            saveSettings();
        });
        crosshairColorPicker.addEventListener('input', () => {
            updateCrosshairColor();
            saveSettings();
        });
        sizeSlider.addEventListener('input', () => {
            setCrosshairStyle(crosshairStyleSelect.value);
            saveSettings();
        });
        opacitySlider.addEventListener('input', () => {
            updateCrosshairColor();
            saveSettings();
        });
        offsetSlider.addEventListener('input', () => {
            moveCrosshair({ clientX: crosshair.offsetLeft, clientY: crosshair.offsetTop });
            saveSettings();
        });

        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="green">Green</option>
                <option value="blue">Blue</option>
                <option value="red">Red</option>
                <option value="purple">Purple</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>
                <option value="dark">Dark</option>
                <option value="forest">Forest</option>
                <option value="ocean">Ocean</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(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 #4caf50;
                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 #4caf50;
            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(76, 175, 80, 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();
            displayAccounts();
            loadSettings();
        }

        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或关注我们的公众号极客氢云获取最新地址