Sploop Lunar Client

Enhanced Sploop.io client with themed mods, visual effects, combat utilities, and expanded texture packs

2025-03-27 يوللانغان نەشرى. ئەڭ يېڭى نەشرىنى كۆرۈش.

// ==UserScript==
// @name         Sploop Lunar Client
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Enhanced Sploop.io client with themed mods, visual effects, combat utilities, and expanded texture packs
// @author       hooder
// @match        https://sploop.io/*
// @grant        none
// @license       MIT
// ==/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';

    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;
        }
        .mod-toggle input {
            margin-right: 10px;
        }
        .move-mods-btn {
            background: #9400d3;
            border: none;
            padding: 10px 20px;
            color: white;
            cursor: pointer;
            border-radius: 8px;
            margin-top: 15px;
            width: 150px;
            align-self: center;
            transition: all 0.3s;
        }
        .move-mods-btn:hover {
            background: #d8bfd8;
            color: #1a1a1a;
        }
        .mod-ui {
            position: fixed;
            padding: 10px;
            color: white;
            z-index: 1000;
            display: none;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            background: rgba(0, 0, 0, 0.8);
        }
        .texture-ui, .keystrokes-ui {
            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;
        }
        .rgb-border {
            animation: rgbGlow 3s infinite;
        }
        @keyframes rgbGlow {
            0% { border-color: #ff0000; }
            33% { border-color: #00ff00; }
            66% { border-color: #0000ff; }
            100% { border-color: #ff0000; }
        }
        .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);
        }
    `);

    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 === 'move-mods-btn' || element.className === 'tab-button') {
            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>
        </div>
        <div id="visual-tab" class="tab-content">
            <div class="mod-toggle"><input type="checkbox" id="texturePacksMod"> Texture Packs</div>
            <div class="mod-toggle"><input type="checkbox" id="menuThemeMod"> Menu Theme</div>
            <div class="mod-toggle"><input type="checkbox" id="arrayListMod"> ArrayList</div>
            <div class="mod-toggle"><input type="checkbox" id="rgbMod"> RGB Borders</div>
            <div class="mod-toggle"><input type="checkbox" id="particleEffectsMod"> Particle Effects</div>
            <div class="mod-toggle"><input type="checkbox" id="glowEffectMod"> Glow Effect</div>
            <div class="mod-toggle"><input type="checkbox" id="pulseEffectMod"> Pulse Effect</div>
            <div class="mod-toggle"><input type="checkbox" id="colorShiftMod"> Color Shift</div>
            <div class="mod-toggle"><input type="checkbox" id="sparkleEffectMod"> Sparkle Effect</div>
            <div class="mod-toggle"><input type="checkbox" id="blockOverlayMod"> Block Overlay</div>
            <div class="mod-toggle"><input type="checkbox" id="rainbowCursorMod"> Rainbow Cursor</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="coordsMod"> Coordinates</div>
            <div class="mod-toggle"><input type="checkbox" id="keystrokesMod"> Keystrokes</div>
        </div>
        <div id="combat-tab" class="tab-content">
            <div class="mod-toggle"><input type="checkbox" id="hitMarkersMod"> Hit Markers</div>
            <div class="mod-toggle"><input type="checkbox" id="rangeIndicatorMod"> Range Indicator</div>
            <div class="mod-toggle"><input type="checkbox" id="smoothCrosshairMod"> Smooth Crosshair</div>
            <div class="mod-toggle"><input type="checkbox" id="swingAnimationMod"> Swing Animation</div>
        </div>
        <button class="move-mods-btn">Move Mods</button>
    `;
    document.body.appendChild(menu);
    makeDraggable(menu);
    applyTheme(menu, currentTheme);

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

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

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

    const texturePacks = {
        "default": { filter: `canvas { filter: none; } body { background-color: #fff; }`, textures: {} },
        "darkSploop": { filter: `canvas { filter: brightness(0.8) contrast(1.2); } body { background-color: #1a1a1a; }`, textures: {} },
        "vibrantHack": { filter: `canvas { filter: brightness(1.2) saturate(1.5); } body { background-color: #f0f0f0; }`, textures: {} },
        "cosmicNebula": {
            filter: `canvas { filter: brightness(1.1) saturate(1.3) hue-rotate(270deg); } body { background-color: #0a0a2a; }`,
            textures: {
                "/img/entity/hammer.png": "https://cdn.pixabay.com/photo/2023/10/10/15/45/hammer-8306725_1280.png",
                "/img/entity/katana.png": "https://cdn.pixabay.com/photo/2023/08/15/12/30/sword-8192049_1280.png",
                "/img/entity/shield.png": "https://cdn.pixabay.com/photo/2023/09/20/14/45/shield-8265142_1280.png",
                "/img/entity/hat_1.png": "https://cdn.pixabay.com/photo/2023/07/25/14/30/helmet-8149148_1280.png",
                "/img/entity/hat_2.png": "https://cdn.pixabay.com/photo/2023/06/10/14/45/hat-8054086_1280.png",
                "/img/entity/hat_3.png": "https://cdn.pixabay.com/photo/2023/05/15/12/30/helmet-7994518_1280.png",
                "/img/items/pearl.png": "https://cdn.pixabay.com/photo/2023/04/25/14/45/gem-7950780_1280.png",
                "/img/entity/teleporter.png": "https://cdn.pixabay.com/photo/2023/03/10/14/45/portal-7842623_1280.png",
                "/img/entity/bed.png": "https://cdn.pixabay.com/photo/2023/02/15/14/45/bed-7791845_1280.png",
                "/img/entity/lootbox.png": "https://cdn.pixabay.com/photo/2023/01/20/14/45/chest-7731642_1280.png"
            }
        },
        "lunarEclipse": {
            filter: `canvas { filter: brightness(0.9) contrast(1.1) sepia(0.3); } body { background-color: #2a1a3a; }`,
            textures: {
                "/img/entity/hammer.png": "https://cdn.pixabay.com/photo/2023/11/15/14/45/hammer-8390150_1280.png",
                "/img/entity/katana.png": "https://cdn.pixabay.com/photo/2023/09/10/14/45/sword-8245262_1280.png",
                "/img/entity/shield.png": "https://cdn.pixabay.com/photo/2023/08/20/14/45/shield-8202658_1280.png",
                "/img/items/pearl.png": "https://cdn.pixabay.com/photo/2023/05/20/14/45/gem-8006828_1280.png"
            }
        },
        "stellarVoid": {
            filter: `canvas { filter: brightness(1.0) saturate(0.8) invert(0.1); } body { background-color: #1a1a2a; }`,
            textures: {
                "/img/entity/hammer.png": "https://cdn.pixabay.com/photo/2023/12/10/14/45/hammer-8442038_1280.png",
                "/img/entity/katana.png": "https://cdn.pixabay.com/photo/2023/10/20/14/45/sword-8329256_1280.png",
                "/img/entity/shield.png": "https://cdn.pixabay.com/photo/2023/07/15/14/45/shield-8129348_1280.png",
                "/img/entity/teleporter.png": "https://cdn.pixabay.com/photo/2023/06/25/14/45/portal-8087142_1280.png"
            }
        },
        "astralGlow": {
            filter: `canvas { filter: brightness(1.3) saturate(1.4) hue-rotate(90deg); } body { background-color: #2a3a1a; }`,
            textures: {
                "/img/entity/hammer.png": "https://cdn.pixabay.com/photo/2023/09/25/14/45/hammer-8275126_1280.png",
                "/img/entity/katana.png": "https://cdn.pixabay.com/photo/2023/11/25/14/45/sword-8412038_1280.png",
                "/img/entity/shield.png": "https://cdn.pixabay.com/photo/2023/10/25/14/45/shield-8340620_1280.png",
                "/img/entity/bed.png": "https://cdn.pixabay.com/photo/2023/08/05/14/45/bed-8171530_1280.png"
            }
        },
        "crystallV2": {
            filter: `canvas { filter: brightness(1.1) contrast(1.2) saturate(1.3); } body { background-color: #1e1e2f; }`,
            textures: {
                "/img/entity/hat_1.png": "https://media.discordapp.net/attachments/880690143575564339/948131805012312064/bull.io.png",
                "/img/entity/hat_3.png": "https://media.discordapp.net/attachments/880690143575564339/948131805205254164/cyrstal.io.png",
                "/img/entity/hat_4.png": "https://media.discordapp.net/attachments/880690143575564339/948131805603717140/spike.io.png",
                "/img/entity/hat_5.png": "https://media.discordapp.net/attachments/880690143575564339/948131805402398740/immunity.io.png",
                "/img/entity/hat_6.png": "https://media.discordapp.net/attachments/880690143575564339/948131804739690566/boost.io.png",
                "/img/items/c_katana.png": "https://media.discordapp.net/attachments/880690143575564339/948131805805035560/unknown.png",
                "/img/skins/body6.png": "https://media.discordapp.net/attachments/934750704604684338/943879698067386388/ping_wings_tester.png",
                "/img/entity/windmill_top.png": "https://media.discordapp.net/attachments/906185437389922355/943872973784350830/windmill_topyes.png",
                "/img/entity/inv_c_katana.png": "https://media.discordapp.net/attachments/906185437389922355/950275458811957248/inv_c_katana.png",
                "/img/entity/map.png": "https://media.discordapp.net/attachments/880690143575564339/949261797028945930/mapheheboi.png"
            }
        },
        "crystallV3": {
            filter: `canvas { filter: brightness(1.1) contrast(1.2); } body { background-color: #1e1e2f; }`,
            textures: {
                "/img/entity/hat_1.png": "https://media.discordapp.net/attachments/951523489809072198/963088950182948884/bull.io.png",
                "/img/entity/hat_2.png": "https://media.discordapp.net/attachments/951523489809072198/961002006456197140/Medicinehat.webp",
                "/img/entity/hat_3.png": "https://media.discordapp.net/attachments/951523489809072198/960992157076955226/cyrstal.io.png",
                "/img/entity/teleporter.png": "https://cdn.discordapp.com/attachments/970942496672743444/1000002663267717190/unknown.png"
            }
        },
        "darkCrystall": {
            filter: `canvas { filter: brightness(0.9) saturate(1.2) hue-rotate(180deg); } body { background-color: #121212; }`,
            textures: {
                "/img/entity/hat_1.png": "https://cdn.pixabay.com/photo/2023/07/25/14/30/helmet-8149148_1280.png",
                "/img/entity/hat_2.png": "https://cdn.pixabay.com/photo/2023/06/10/14/45/hat-8054086_1280.png",
                "/img/entity/hat_3.png": "https://cdn.pixabay.com/photo/2023/05/15/12/30/helmet-7994518_1280.png",
                "/img/entity/teleporter.png": "https://cdn.pixabay.com/photo/2023/03/10/14/45/portal-7842623_1280.png"
            }
        }
    };

    const remaps = new Map();
    function applyTexturePack(packName) {
        const pack = texturePacks[packName];
        textureStyleElement.textContent = pack.filter;
        Object.entries(pack.textures).forEach(([fromUrl, toUrl]) => {
            remaps.set(`https://sploop.io${fromUrl}`, { src: toUrl, scale: 1 });
        });
    }

    const origImage = Image;
    window.Image = class extends origImage {
        set onload(fn) {
            this._onloadFn = fn;
            super.onload = function() {
                this.width = this.width * this._scale;
                this.height = this.height * this._scale;
                return fn.apply(this, arguments);
            };
        }

        set src(_src) {
            const [path] = _src.split("?v=");
            if (remaps.has(path)) {
                const { src, scale } = remaps.get(path);
                _src = src;
                this._scale = scale;
            } else {
                this._scale = 1;
            }
            super.src = _src;
        }
    };

    const textureUI = document.createElement('div');
    textureUI.className = 'mod-ui texture-ui';
    textureUI.style.top = '10px';
    textureUI.style.left = '150px';
    textureUI.style.display = 'none';
    textureUI.innerHTML = `
        <label>Texture Pack:</label>
        <select id="textureSelect">
            <option value="default">Default (Built-in)</option>
            <option value="darkSploop">DarkSploop (Greasy Fork)</option>
            <option value="vibrantHack">VibrantHack (Tampermonkey)</option>
            <option value="cosmicNebula">Cosmic Nebula (Lunar)</option>
            <option value="lunarEclipse">Lunar Eclipse</option>
            <option value="stellarVoid">Stellar Void</option>
            <option value="astralGlow">Astral Glow</option>
            <option value="crystallV2">Crystall v2</option>
            <option value="crystallV3">Crystall v3.1 (Greasy Fork)</option>
            <option value="darkCrystall">Dark Crystall</option>
        </select>
    `;
    document.body.appendChild(textureUI);
    makeDraggable(textureUI);
    applyTheme(textureUI, currentTheme);

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

    const fpsUI = document.createElement('div');
    fpsUI.className = 'mod-ui';
    fpsUI.style.top = '60px';
    fpsUI.style.left = '10px';
    fpsUI.style.display = 'none';
    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';
    cpsUI.style.display = 'none';
    document.body.appendChild(cpsUI);
    makeDraggable(cpsUI);
    applyTheme(cpsUI, currentTheme);
    let clicks = 0;
    document.addEventListener('mousedown', () => clicks++);
    setInterval(() => {
        cpsUI.textContent = `CPS: ${clicks}`;
        clicks = 0;
    }, 1000);

    const fpsBoosterUI = document.createElement('div');
    fpsBoosterUI.className = 'mod-ui';
    fpsBoosterUI.style.top = '160px';
    fpsBoosterUI.style.left = '10px';
    fpsBoosterUI.style.display = 'none';
    document.body.appendChild(fpsBoosterUI);
    makeDraggable(fpsBoosterUI);
    applyTheme(fpsBoosterUI, currentTheme);
    function toggleFPSBooster(on) {
        const canvas = document.querySelector('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 = texturePacks[textureSelect.value].filter.split('body {')[1].split('}')[0].trim();
            fpsBoosterUI.textContent = 'FPS Booster: OFF';
        }
    }

    const pingUI = document.createElement('div');
    pingUI.className = 'mod-ui';
    pingUI.style.top = '210px';
    pingUI.style.left = '10px';
    pingUI.style.display = 'none';
    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 coordsUI = document.createElement('div');
    coordsUI.className = 'mod-ui';
    coordsUI.style.top = '260px';
    coordsUI.style.left = '10px';
    coordsUI.style.display = 'none';
    coordsUI.innerHTML = 'Coords: X:0 Y:0';
    document.body.appendChild(coordsUI);
    makeDraggable(coordsUI);
    applyTheme(coordsUI, currentTheme);
    document.addEventListener('mousemove', (e) => {
        if (coordsMod.checked) {
            coordsUI.textContent = `Coords: X:${e.clientX} Y:${e.clientY}`;
        }
    });

    const keystrokesUI = document.createElement('div');
    keystrokesUI.className = 'mod-ui keystrokes-ui';
    keystrokesUI.style.top = '310px';
    keystrokesUI.style.left = '10px';
    keystrokesUI.style.display = 'none';
    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>
    `;
    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')
    };
    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;
        }
    });

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

    const themeSelect = menuThemeUI.querySelector('#themeSelect');
    themeSelect.addEventListener('change', (e) => {
        currentTheme = e.target.value;
        applyTheme(menu, currentTheme);
        tabButtons.forEach(btn => applyTheme(btn, currentTheme));
        applyTheme(moveModsBtn, currentTheme);
        applyTheme(textureUI, currentTheme);
        applyTheme(fpsUI, currentTheme);
        applyTheme(cpsUI, currentTheme);
        applyTheme(menuThemeUI, currentTheme);
        applyTheme(arrayListUI, currentTheme);
        applyTheme(particleEffectsUI, currentTheme);
        applyTheme(hitMarkersUI, currentTheme);
        applyTheme(rangeIndicatorUI, currentTheme);
        applyTheme(smoothCrosshairUI, currentTheme);
        applyTheme(fpsBoosterUI, currentTheme);
        applyTheme(glowEffectUI, currentTheme);
        applyTheme(pulseEffectUI, currentTheme);
        applyTheme(colorShiftUI, currentTheme);
        applyTheme(sparkleEffectUI, currentTheme);
        applyTheme(swingAnimationUI, currentTheme);
        applyTheme(pingUI, currentTheme);
        applyTheme(coordsUI, currentTheme);
        applyTheme(blockOverlayUI, currentTheme);
        applyTheme(keystrokesUI, currentTheme);
        applyTheme(rainbowCursorUI, currentTheme);
    });

    const arrayListUI = document.createElement('div');
    arrayListUI.className = 'mod-ui arraylist-container';
    arrayListUI.style.top = '10px';
    arrayListUI.style.right = '10px';
    arrayListUI.style.display = 'none';
    document.body.appendChild(arrayListUI);
    makeDraggable(arrayListUI);
    applyTheme(arrayListUI, currentTheme);
    function updateArrayList() {
        const activeMods = [];
        if (fpsMod.checked) activeMods.push('FPS');
        if (cpsMod.checked) activeMods.push('CPS');
        if (texturePacksMod.checked) activeMods.push('Texture Packs');
        if (menuThemeMod.checked) activeMods.push('Menu Theme');
        if (arrayListMod.checked) activeMods.push('ArrayList');
        if (rgbMod.checked) activeMods.push('RGB Borders');
        if (particleEffectsMod.checked) activeMods.push('Particle Effects');
        if (glowEffectMod.checked) activeMods.push('Glow Effect');
        if (pulseEffectMod.checked) activeMods.push('Pulse Effect');
        if (colorShiftMod.checked) activeMods.push('Color Shift');
        if (sparkleEffectMod.checked) activeMods.push('Sparkle Effect');
        if (hitMarkersMod.checked) activeMods.push('Hit Markers');
        if (rangeIndicatorMod.checked) activeMods.push('Range Indicator');
        if (smoothCrosshairMod.checked) activeMods.push('Smooth Crosshair');
        if (fpsBoosterMod.checked) activeMods.push('FPS Booster');
        if (swingAnimationMod.checked) activeMods.push('Swing Animation');
        if (pingMod.checked) activeMods.push('Ping');
        if (coordsMod.checked) activeMods.push('Coordinates');
        if (blockOverlayMod.checked) activeMods.push('Block Overlay');
        if (keystrokesMod.checked) activeMods.push('Keystrokes');
        if (rainbowCursorMod.checked) activeMods.push('Rainbow Cursor');
        arrayListUI.innerHTML = activeMods.map(mod => `<div class="arraylist-item">${mod}</div>`).join('');
    }

    const particleEffectsUI = document.createElement('div');
    particleEffectsUI.className = 'mod-ui';
    particleEffectsUI.style.top = '110px';
    particleEffectsUI.style.left = '150px';
    particleEffectsUI.style.display = 'none';
    particleEffectsUI.innerHTML = `
        <label>Particle Density: </label>
        <input type="range" id="particleDensity" min="1" max="10" value="5">
    `;
    document.body.appendChild(particleEffectsUI);
    makeDraggable(particleEffectsUI);
    applyTheme(particleEffectsUI, currentTheme);
    function spawnParticles(density) {
        const canvas = document.querySelector('canvas');
        if (!canvas) return;
        const rect = canvas.getBoundingClientRect();
        for (let i = 0; i < density; i++) {
            const particle = document.createElement('div');
            particle.style = `
                position: absolute;
                width: 5px;
                height: 5px;
                background: ${['#ff0', '#0ff', '#f0f'][Math.floor(Math.random() * 3)]};
                border-radius: 50%;
                z-index: 999;
                top: ${rect.top + Math.random() * rect.height}px;
                left: ${rect.left + Math.random() * rect.width}px;
                animation: particleFade 1s ease-out forwards;
                pointer-events: none;
            `;
            document.body.appendChild(particle);
            setTimeout(() => particle.remove(), 1000);
        }
    }
    addStyle(`
        @keyframes particleFade {
            0% { opacity: 1; transform: scale(1); }
            100% { opacity: 0; transform: scale(0.5) translate(${Math.random() * 20 - 10}px, ${Math.random() * 20 - 10}px); }
        }
    `);

    const glowEffectUI = document.createElement('div');
    glowEffectUI.className = 'mod-ui';
    glowEffectUI.style.top = '160px';
    glowEffectUI.style.left = '150px';
    glowEffectUI.style.display = 'none';
    document.body.appendChild(glowEffectUI);
    makeDraggable(glowEffectUI);
    applyTheme(glowEffectUI, currentTheme);
    function toggleGlowEffect(on) {
        const canvas = document.querySelector('canvas');
        if (on) {
            canvas.style.filter = `${texturePacks[textureSelect.value].filter.split('canvas { filter: ')[1].split(';')[0]} drop-shadow(0 0 10px #fff)`;
            glowEffectUI.textContent = 'Glow Effect: ON';
        } else {
            canvas.style.filter = texturePacks[textureSelect.value].filter.split('canvas { filter: ')[1].split(';')[0];
            glowEffectUI.textContent = 'Glow Effect: OFF';
        }
    }

    const pulseEffectUI = document.createElement('div');
    pulseEffectUI.className = 'mod-ui';
    pulseEffectUI.style.top = '210px';
    pulseEffectUI.style.left = '150px';
    pulseEffectUI.style.display = 'none';
    document.body.appendChild(pulseEffectUI);
    makeDraggable(pulseEffectUI);
    applyTheme(pulseEffectUI, currentTheme);
    function togglePulseEffect(on) {
        const canvas = document.querySelector('canvas');
        if (on) {
            canvas.style.animation = 'pulse 2s infinite';
            pulseEffectUI.textContent = 'Pulse Effect: ON';
        } else {
            canvas.style.animation = 'none';
            pulseEffectUI.textContent = 'Pulse Effect: OFF';
        }
    }
    addStyle(`
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.02); }
            100% { transform: scale(1); }
        }
    `);

    const colorShiftUI = document.createElement('div');
    colorShiftUI.className = 'mod-ui';
    colorShiftUI.style.top = '260px';
    colorShiftUI.style.left = '150px';
    colorShiftUI.style.display = 'none';
    document.body.appendChild(colorShiftUI);
    makeDraggable(colorShiftUI);
    applyTheme(colorShiftUI, currentTheme);
    function toggleColorShift(on) {
        const canvas = document.querySelector('canvas');
        if (on) {
            canvas.style.animation = 'colorShift 5s infinite';
            colorShiftUI.textContent = 'Color Shift: ON';
        } else {
            canvas.style.animation = 'none';
            colorShiftUI.textContent = 'Color Shift: OFF';
        }
    }
    addStyle(`
        @keyframes colorShift {
            0% { filter: hue-rotate(0deg); }
            50% { filter: hue-rotate(180deg); }
            100% { filter: hue-rotate(360deg); }
        }
    `);

    const sparkleEffectUI = document.createElement('div');
    sparkleEffectUI.className = 'mod-ui';
    sparkleEffectUI.style.top = '310px';
    sparkleEffectUI.style.left = '150px';
    sparkleEffectUI.style.display = 'none';
    document.body.appendChild(sparkleEffectUI);
    makeDraggable(sparkleEffectUI);
    applyTheme(sparkleEffectUI, currentTheme);
    function spawnSparkles() {
        const canvas = document.querySelector('canvas');
        if (!canvas) return;
        const rect = canvas.getBoundingClientRect();
        const sparkle = document.createElement('div');
        sparkle.style = `
            position: absolute;
            width: 8px;
            height: 8px;
            background: #fff;
            border-radius: 50%;
            z-index: 999;
            top: ${rect.top + Math.random() * rect.height}px;
            left: ${rect.left + Math.random() * rect.width}px;
            animation: sparkleFade 0.8s ease-out forwards;
            pointer-events: none;
        `;
        document.body.appendChild(sparkle);
        setTimeout(() => sparkle.remove(), 800);
    }
    addStyle(`
        @keyframes sparkleFade {
            0% { opacity: 1; transform: scale(1); }
            100% { opacity: 0; transform: scale(2); }
        }
    `);

    const blockOverlayUI = document.createElement('div');
    blockOverlayUI.className = 'mod-ui';
    blockOverlayUI.style.top = '360px';
    blockOverlayUI.style.left = '150px';
    blockOverlayUI.style.display = 'none';
    document.body.appendChild(blockOverlayUI);
    makeDraggable(blockOverlayUI);
    applyTheme(blockOverlayUI, currentTheme);
    function toggleBlockOverlay(on) {
        const canvas = document.querySelector('canvas');
        if (on) {
            canvas.style.border = '2px solid rgba(255, 255, 255, 0.5)';
            blockOverlayUI.textContent = 'Block Overlay: ON';
        } else {
            canvas.style.border = 'none';
            blockOverlayUI.textContent = 'Block Overlay: OFF';
        }
    }

    const hitMarkersUI = document.createElement('div');
    hitMarkersUI.className = 'mod-ui';
    hitMarkersUI.style.top = '360px';
    hitMarkersUI.style.left = '10px';
    hitMarkersUI.style.display = 'none';
    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 - 10}px;
            left: ${e.clientX - 10}px;
            width: 20px;
            height: 20px;
            background: rgba(255, 0, 0, 0.7);
            border-radius: 50%;
            z-index: 1000;
            animation: hitFade 0.3s ease-out forwards;
            pointer-events: none;
        `;
        document.body.appendChild(marker);
        setTimeout(() => marker.remove(), 300);
    });
    addStyle(`
        @keyframes hitFade {
            0% { opacity: 1; transform: scale(1); }
            100% { opacity: 0; transform: scale(1.5); }
        }
    `);

    const rangeIndicatorUI = document.createElement('div');
    rangeIndicatorUI.className = 'mod-ui';
    rangeIndicatorUI.style.top = '410px';
    rangeIndicatorUI.style.left = '10px';
    rangeIndicatorUI.style.display = 'none';
    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 dashed #fff;
        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`;
    });

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

    const swingAnimationUI = document.createElement('div');
    swingAnimationUI.className = 'mod-ui';
    swingAnimationUI.style.top = '510px';
    swingAnimationUI.style.left = '10px';
    swingAnimationUI.style.display = 'none';
    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 - 20}px;
            left: ${e.clientX - 20}px;
            width: 40px;
            height: 40px;
            border: 2px solid blue;
            border-radius: 50%;
            z-index: 1000;
            animation: swingFade 0.5s ease-out forwards;
            pointer-events: none;
        `;
        document.body.appendChild(swing);
        setTimeout(() => swing.remove(), 500);
    });
    addStyle(`
        @keyframes swingFade {
            0% { opacity: 1; transform: scale(1) rotate(0deg); }
            100% { opacity: 0; transform: scale(1.5) rotate(45deg); }
        }
    `);

    const rainbowCursorUI = document.createElement('div');
    rainbowCursorUI.className = 'mod-ui';
    rainbowCursorUI.style.top = '410px';
    rainbowCursorUI.style.left = '150px';
    rainbowCursorUI.style.display = 'none';
    document.body.appendChild(rainbowCursorUI);
    makeDraggable(rainbowCursorUI);
    applyTheme(rainbowCursorUI, currentTheme);
    const rainbowCursor = document.createElement('div');
    rainbowCursor.style = `
        position: fixed;
        width: 15px;
        height: 15px;
        background: transparent;
        border: 2px solid;
        border-radius: 50%;
        z-index: 1000;
        pointer-events: none;
        display: none;
        animation: rainbowBorder 2s infinite;
    `;
    document.body.appendChild(rainbowCursor);
    addStyle(`
        @keyframes rainbowBorder {
            0% { border-color: #ff0000; }
            20% { border-color: #ff00ff; }
            40% { border-color: #0000ff; }
            60% { border-color: #00ffff; }
            80% { border-color: #00ff00; }
            100% { border-color: #ff0000; }
        }
    `);
    document.addEventListener('mousemove', (e) => {
        if (!rainbowCursorMod.checked) return;
        rainbowCursor.style.top = `${e.clientY - 7.5}px`;
        rainbowCursor.style.left = `${e.clientX - 7.5}px`;
    });

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

    const fpsMod = menu.querySelector('#fpsMod');
    const cpsMod = menu.querySelector('#cpsMod');
    const texturePacksMod = menu.querySelector('#texturePacksMod');
    const menuThemeMod = menu.querySelector('#menuThemeMod');
    const arrayListMod = menu.querySelector('#arrayListMod');
    const rgbMod = menu.querySelector('#rgbMod');
    const particleEffectsMod = menu.querySelector('#particleEffectsMod');
    const glowEffectMod = menu.querySelector('#glowEffectMod');
    const pulseEffectMod = menu.querySelector('#pulseEffectMod');
    const colorShiftMod = menu.querySelector('#colorShiftMod');
    const sparkleEffectMod = menu.querySelector('#sparkleEffectMod');
    const hitMarkersMod = menu.querySelector('#hitMarkersMod');
    const rangeIndicatorMod = menu.querySelector('#rangeIndicatorMod');
    const smoothCrosshairMod = menu.querySelector('#smoothCrosshairMod');
    const fpsBoosterMod = menu.querySelector('#fpsBoosterMod');
    const swingAnimationMod = menu.querySelector('#swingAnimationMod');
    const pingMod = menu.querySelector('#pingMod');
    const coordsMod = menu.querySelector('#coordsMod');
    const blockOverlayMod = menu.querySelector('#blockOverlayMod');
    const keystrokesMod = menu.querySelector('#keystrokesMod');
    const rainbowCursorMod = menu.querySelector('#rainbowCursorMod');

    const modUIs = {
        fps: fpsUI,
        cps: cpsUI,
        texturePacks: textureUI,
        menuTheme: menuThemeUI,
        arrayList: arrayListUI,
        rgb: null,
        particleEffects: particleEffectsUI,
        glowEffect: glowEffectUI,
        pulseEffect: pulseEffectUI,
        colorShift: colorShiftUI,
        sparkleEffect: sparkleEffectUI,
        hitMarkers: hitMarkersUI,
        rangeIndicator: rangeIndicatorUI,
        smoothCrosshair: smoothCrosshairUI,
        fpsBooster: fpsBoosterUI,
        swingAnimation: swingAnimationUI,
        ping: pingUI,
        coords: coordsUI,
        blockOverlay: blockOverlayUI,
        keystrokes: keystrokesUI,
        rainbowCursor: rainbowCursorUI
    };

    fpsMod.addEventListener('change', () => {
        modUIs.fps.style.display = fpsMod.checked ? 'block' : 'none';
        if (fpsMod.checked) requestAnimationFrame(updateFPS);
        updateArrayList();
    });
    cpsMod.addEventListener('change', () => {
        modUIs.cps.style.display = cpsMod.checked ? 'block' : 'none';
        updateArrayList();
    });
    texturePacksMod.addEventListener('change', () => {
        modUIs.texturePacks.style.display = texturePacksMod.checked ? 'block' : 'none';
        updateArrayList();
    });
    menuThemeMod.addEventListener('change', () => {
        modUIs.menuTheme.style.display = menuThemeMod.checked ? 'block' : 'none';
        updateArrayList();
    });
    arrayListMod.addEventListener('change', () => {
        modUIs.arrayList.style.display = arrayListMod.checked ? 'block' : 'none';
        updateArrayList();
    });
    rgbMod.addEventListener('change', () => {
        toggleRGB(rgbMod.checked);
        updateArrayList();
    });
    particleEffectsMod.addEventListener('change', () => {
        modUIs.particleEffects.style.display = particleEffectsMod.checked ? 'block' : 'none';
        if (particleEffectsMod.checked) {
            setInterval(() => spawnParticles(particleEffectsUI.querySelector('#particleDensity').value), 200);
        }
        updateArrayList();
    });
    glowEffectMod.addEventListener('change', () => {
        modUIs.glowEffect.style.display = glowEffectMod.checked ? 'block' : 'none';
        toggleGlowEffect(glowEffectMod.checked);
        updateArrayList();
    });
    pulseEffectMod.addEventListener('change', () => {
        modUIs.pulseEffect.style.display = pulseEffectMod.checked ? 'block' : 'none';
        togglePulseEffect(pulseEffectMod.checked);
        updateArrayList();
    });
    colorShiftMod.addEventListener('change', () => {
        modUIs.colorShift.style.display = colorShiftMod.checked ? 'block' : 'none';
        toggleColorShift(colorShiftMod.checked);
        updateArrayList();
    });
    sparkleEffectMod.addEventListener('change', () => {
        modUIs.sparkleEffect.style.display = sparkleEffectMod.checked ? 'block' : 'none';
        if (sparkleEffectMod.checked) setInterval(spawnSparkles, 300);
        updateArrayList();
    });
    hitMarkersMod.addEventListener('change', () => {
        modUIs.hitMarkers.style.display = hitMarkersMod.checked ? 'block' : 'none';
        updateArrayList();
    });
    rangeIndicatorMod.addEventListener('change', () => {
        modUIs.rangeIndicator.style.display = rangeIndicatorMod.checked ? 'block' : 'none';
        rangeCircle.style.display = rangeIndicatorMod.checked ? 'block' : 'none';
        updateArrayList();
    });
    smoothCrosshairMod.addEventListener('change', () => {
        modUIs.smoothCrosshair.style.display = smoothCrosshairMod.checked ? 'block' : 'none';
        crosshair.style.display = smoothCrosshairMod.checked ? 'block' : 'none';
        updateArrayList();
    });
    fpsBoosterMod.addEventListener('change', () => {
        modUIs.fpsBooster.style.display = fpsBoosterMod.checked ? 'block' : 'none';
        toggleFPSBooster(fpsBoosterMod.checked);
        updateArrayList();
    });
    swingAnimationMod.addEventListener('change', () => {
        modUIs.swingAnimation.style.display = swingAnimationMod.checked ? 'block' : 'none';
        updateArrayList();
    });
    pingMod.addEventListener('change', () => {
        modUIs.ping.style.display = pingMod.checked ? 'block' : 'none';
        if (pingMod.checked) setInterval(updatePing, 5000);
        updateArrayList();
    });
    coordsMod.addEventListener('change', () => {
        modUIs.coords.style.display = coordsMod.checked ? 'block' : 'none';
        updateArrayList();
    });
    blockOverlayMod.addEventListener('change', () => {
        modUIs.blockOverlay.style.display = blockOverlayMod.checked ? 'block' : 'none';
        toggleBlockOverlay(blockOverlayMod.checked);
        updateArrayList();
    });
    keystrokesMod.addEventListener('change', () => {
        modUIs.keystrokes.style.display = keystrokesMod.checked ? 'block' : 'none';
        updateArrayList();
    });
    rainbowCursorMod.addEventListener('change', () => {
        modUIs.rainbowCursor.style.display = rainbowCursorMod.checked ? 'block' : 'none';
        rainbowCursor.style.display = rainbowCursorMod.checked ? 'block' : 'none';
        updateArrayList();
    });

    const rgbModElements = [menu, textureUI, fpsUI, cpsUI, menuThemeUI, arrayListUI, particleEffectsUI, hitMarkersUI, rangeIndicatorUI, smoothCrosshairUI, fpsBoosterUI, glowEffectUI, pulseEffectUI, colorShiftUI, sparkleEffectUI, swingAnimationUI, pingUI, coordsUI, blockOverlayUI, keystrokesUI, rainbowCursorUI];
    function toggleRGB(on) {
        rgbModElements.forEach(el => {
            if (on) el.classList.add('rgb-border');
            else el.classList.remove('rgb-border');
        });
    }

    const textElement = document.createElement('span');
    const data = atob('YnkgZml6eml4d3c=');
    textElement.textContent = data;
    textElement.style.position = 'absolute';
    textElement.style.top = '0';
    textElement.style.left = '80px';
    textElement.style.zIndex = '9999';
    textElement.style.color = 'rgba(0, 0, 0, 0.05)';
    document.body.appendChild(textElement);
})();