// ==UserScript==
// @name         /=|- B34R -|=\ /=\ Legit Script for Legit Players /=\
// @namespace    none
// @version      v3
// @description  ArrowUp Key = Modification Menu | ArrowLeft Key = Settings | ArrowRight Key = MainMenu | ArrowDown Key = InfoBox | Anti Ads | features that don't work will have a [WIP] next to it | to get Settings Working you must click on the Setting Button first/=\
// @author       Bear
// @match        *://sploop.io/*
// @require      http://code.jquery.com/jquery-3.3.1.min.js
// @require      https://code.jquery.com/ui/1.12.0/jquery-ui.min.js
// @grant        none
// @icon         https://media.discordapp.net/attachments/1077687137455046718/1122722360420728913/DaB34R.png
// @downloadURL none
// ==/UserScript==
(function() {
    'use strict';

    let credit = "- Danger Bear aka B34R"
    let discord = "- B34R#5400"
    let support1 = "- Comment that it works great"
    let support2 = "- Ask what i should add or if you encounterd a problem with the Script report it to me on my Discord"
    let support3 = "- Tell your friends about this Script and to download it on Greasyfork"
    let spl = document.getElementById("lostworld-io_300x250_2")

 // /=\ Menu toggler /=\
 document.addEventListener('keydown', e => {
     if (e.code == $("#bearOpenkey").val()) {
         if ($('.bearMenu').css('display') == 'none') $('.bearMenu').animate({
             top: 'show'
         }, 100);
         else $('.bearMenu').animate({
             top: 'hide'
         }, 100);
     }
 })

 // /=\ Info toggler /=\
 document.addEventListener('keydown', e => {
     if (e.code == $("#infoOpenKey").val()) {
         if ($('.infoElement').css('display') == 'none') $('.infoElement').animate({
             top: 'show'
         }, 100);
         else $('.infoElement').animate({
             top: 'hide'
         }, 100);
     }
 })

let modB = `
<div class="bearMenu" id="bearModMenu" style="display: none;">
    <div id="block-bind">
        <div id="side-bar-menu">
            <buttonbear onclick="switchPage('keybinds')">Keybinds</buttonbear>
            <buttonbear onclick="switchPage('styler')">Elements</buttonbear>
            <buttonbear onclick="switchPage('auto')">Auto</buttonbear>
            <buttonbear onclick="switchPage('mod')">Mod</buttonbear>
        </div>
        </div>
        <div id="block-bind-b">
        <div id="keybinds-page" class="page">
            <fieldset>
                <legend align="center">Keys</legend>
                <SettingText> Mod Menu Key:
                    <input style="width: 100px;" id="bearOpenkey" class="inputTxt" onKeyPress=SupressInput(event); oncontextmenu="return false" placeholder="Bind..." value="ArrowUp" type="text">
                    <br> Info Key:
                    <input style="width: 100px" id="infoOpenKey" class="inputTxt" onKeyPress=SupressInput(event); oncontextmenu="return false" placeholder="Bind..." value="ArrowDown" type="text"> </SettingText>
            </fieldset>
        </div>
        <div id="styler-page" class="page">
            <fieldset>
                <legend align="center">Opacity Elements</legend>
                <fieldset>
                    <legend align="center">Hat Store</legend>
                    <SettingText>Transparent Hat Store
                    <div class="toggle-container"> <input type="checkbox" id="hatStore"> <label for="hatStore"></label> </div>
                    </SettingText>
                </fieldset>
                <fieldset>
                    <legend align="center">Clan Menu</legend>
                    <SettingText> Transparent Clan Menu
                    <div class="toggle-container"> <input type="checkbox" id="clanMenu"> <label for="clanMenu"></label> </div>
                    </SettingText>
                </fieldset>
                <fieldset>
                <legend align="center">Homepage</legend>
                <SettingText>Transparent Home Page
                <div class="toggle-container"> <input type="checkbox" id="homeDisplay"> <label for="homeDisplay"></label> </div>
                </SettingText>
                </fieldset>
            </fieldset>
            <br>
            <fieldset>
                <legend align="center">Change Element</legend>
                <fieldset>
                    <legend align="center">Hat Store</legend>
                    <SettingText>Anti-Scroll [WIP]
                    <div class="toggle-container"> <input type="checkbox" id="AntiStoreSpaceBar"> <label for="AntiStoreSpaceBar"></label> </div>
                    </SettingText>
                    </fieldset>
                    <br>
                    <fieldset>
                    <SettingText>Click Through[WIP]
                    <div class="toggle-container"> <input type="checkbox" id="clickThruHatMenu"> <label for="clickThruHatMenu"></label> </div>
                    </SettingText>
                    </fieldset>
                    <br>
                    <fieldset>
                    <SettingText>Bigger Hat Store
                    <div class="toggle-container"> <input type="checkbox" id="biggerHat"> <label for="biggerHat"></label> </div>
                    </SettingText>
                    </fieldset>
                </fieldset>
            </fieldset>
        </div>
        <div id="auto-page" class="page">
                <legend align="center">Auto Do</legend>
                <fieldset>
                <SettingText>Auto Spawn [WIP]
                <div class="toggle-container"> <input type="checkbox" id="autoSpawn"> <label for="autoSpawn"></label> </div>
                </SettingText>
                </fieldset>
                <br>
                <fieldset>
                <legend align="center">Server/GameMode</legend>
                <SettingText>Auto Select [WIP]
                <div class="toggle-container"> <input type="checkbox" id="autoServer"> <label for="autoServer"></label> </div>
                </SettingText>
                <br>
                <SettingText>GameMode: <select id="gameList" class="select-css">
                    <option value="Classsic" id="ClassicO">Classic</option>
                    <option value="Sandbbox" id="SandboxO">Sandbox</option>
                    <option value="BattleRoyalee" id="BtllRyal">BattleRoyale</option>
                </select>
                </SettingText>
                <SettingText>Server: <select id="serverList" class="select-css">
                    <option value="californa1" id="Sandbox1">Sandbox-Cali-#1</option>
                    <option value="californa2" id="Sandbox2">Sandbox-Cali-#2</option>
                    <option value="frank1" id="Sandbox3">Sandbox-Frank-#1</option>
                    <option value="frank2" id="Sandbox4">Sandbox-Frank-#2</option>
                    <option value="singapore1" id="Sandbox5">Sandbox-Singa-#1</option>
                    <option value="singapore2" id="Sandbox6">Sandbox-Singa-#2</option>
                    <option value="singapore3" id="Sandbox7">Sandbox-Singa-#3</option>
                </select>
                </SettingText>
                </fieldset>
        </div>
        <div id="mod-page" class="page">
            <fieldset>
                <legend align="center">Infobox</legend>
                <SettingText>Transparent
                <div class="toggle-container"> <input type="checkbox" id="opacityDisplay"> <label for="opacityDisplay"></label> </div>
                <br>
                </SettingText>
                <SettingText>Hide CPS
                <div class="toggle-container"> <input type="checkbox" id="cpsDisplay"> <label for="cpsDisplay"></label> </div>
                    <br>
                </SettingText>
                <SettingText>Hide FPS
                <div class="toggle-container"> <input type="checkbox" id="fpsDisplay"> <label for="fpsDisplay"></label> </div>
                </SettingText>
                    <br>
                <SettingText>Hide Server
                <div class="toggle-container"> <input type="checkbox" id="serverDisplay"> <label for="serverDisplay"></label> </div>
                    <br>
                </SettingText>
                <SettingText>Hide GameMode
                <div class="toggle-container"> <input type="checkbox" id="gameDisplay"> <label for="gameDisplay"></label> </div>
                </SettingText>
            </fieldset>
            <fieldset>
                <legend align="center">Modmenu</legend>
                <SettingText>Transparent
                <div class="toggle-container"> <input type="checkbox" id="modDisplay"> <label for="modDisplay"></label> </div>
                </SettingText>
            </fieldset>
            <fieldset>
            <legend align="center">Credits Box</legend>
            <SettingText>Hide Box
            <div class="toggle-container"> <input type="checkbox" id="infoDisplay"> <label for="infoDisplay"></label </div>
            </SettingText>
            </fieldset>
        </div>
    </div>
    <script>
        function switchPage(pageName) {
                var pages = document.getElementsByClassName('page');
                for (var i = 0; i < pages.length; i++) {
                    var page = pages[i];
                    if (page.id === pageName + '-page') {
                        page.style.display = 'block';
                    } else {
                        page.style.display = 'none';
                    }
                }
            }
            // Initialize the content on page load (optional) window.addEventListener('DOMContentLoaded', function() { var defaultPage = 'styler'; // Set the default page to display switchPage(defaultPage); }); document.getElementById("bearOpenkey").addEventListener("mousedown", e => { if (e.button == 0) { $("#bearOpenkey").val("Select") use3 = true } if (e.button == 2) { $("#bearOpenkey").val("...") use3 = false } }) document.getElementById("bearOpenkey").addEventListener('keydown', e => { if ($("#bearOpenkey").focus()) { if (use3) { use3 = false codeKey3 = (e.code).toString() $("#bearOpenkey").val(codeKey3) } } }) document.getElementById("homeOpenKey").addEventListener("mousedown", e => { if (e.button == 0) { $("#homeOpenKey").val("Select") use3 = true } if (e.button == 2) { $("#homeOpenKey").val("...") use3 = false } }) document.getElementById("homeOpenKey").addEventListener('keydown', e => { if ($("#homeOpenKey").focus()) { if (use3) { use3 = false codeKey3 = (e.code).toString() $("#homeOpenKey").val(codeKey3) } } })
            </script>
    <style>
    .inputTxt1 {
    width: 270px;
    border-radius: 10px;
    color: #dda725;
    background: black;
    text-align: center;
    outline: 0;
    }
/* Styles for toggle container */
.toggle-container {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
}

/* Styles for checkboxes */
input[type="checkbox"] {
  display: none;
}

/* Styles for labels */
label {
  display: block;
  width: 100%;
  height: 100%;
  background-color: black;
  border-radius: 20px;
  position: relative;
  cursor: pointer;
}

label::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background-color: #fff;
  border-radius: 50%;
  transition: transform 0.3s ease-in-out;
}

input[type="checkbox"]:checked + label::before {
  transform: translateX(100%);
}

/* Styles for indicator */
label::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  background-color: red;
  border-radius: 50%;
}

input[type="checkbox"]:checked + label::after {
  background-color: #36c746;
}

        buttonbear:hover {
            background: rgb(137, 171, 57);
            box-shadow: rgb(110, 137, 47) 0px 5px 0px inset;
        }

        buttonbear {
        padding: 5px;
    height: 80px;
    cursor: url(img/ui/cursor-default.png) 6 0, default;
    color: rgb(255, 255, 255);
    text-align: center;
    box-shadow: rgb(110, 137, 47) 0px 5px 0px inset;
    border-width: 5px;
    border-style: solid;
    border-color: rgb(20, 20, 20);
    border-image: initial;
    border-radius: 13px;
    background: rgb(129, 170, 74);
    }

        fieldset {
    border: 3px solid black;
    background: rgba(20, 20, 20, 0.3);
    border-radius: 10px;
    box-shadow: rgba(20, 20, 20, 0.4) 0px 5px 0px inset;
    text-align: left;
    padding-bottom: 8px
        }

        legend {
            color: white;
            font-size: 20px;
        }

        .page {
            display: none;
        }

        SettingText {
            color: #dda725;
            font-size: 20px;
            margin-left: 13px;
        }

        #block-bind {
    width: 100%;
    height: 14%;
    padding: 8px;
    background: rgba(20, 20, 20, 0.3);
    box-shadow: rgb(78, 86, 69) 0px 4px 0px inset, rgb(56, 72, 37) 0px -4px 0px inset, rgba(20, 20, 20, 0.3) 0px 5px 0px;
    border-radius: 15px;
    border: 5px solid #141414;
    margin-bottom: 30px;
}

        #side-bar-menu {
    z-index: 9999;
    padding: 14px;
    margin: auto;
    background: rgb(40, 45, 34);
    border-radius: 15px;
    text-align: center;
}

        .bearMenu {
            opacity: 1;
            position: absolute;
            font-size: 20px;
            z-index: 9999;
            padding: 20px;
            margin: auto;
            display: none;
            background: rgb(40, 45, 34);
            box-shadow: rgb(78, 86, 69) 0px 4px 0px inset, rgb(56, 72, 37) 0px -4px 0px inset, rgba(20, 20, 20, 0.3) 0px 2px 0px 5px, rgba(20, 20, 20, 0.1) 0px 0px 0px 15px;
            top: 10%;
            left: 25%;
            border-radius: 15px;
            width: 650px;
            height: 600px;
            border: 5px solid #141414;
        }

        select {
            outline: 0;
            transition: 1s all;
            vertical-align: middle;
            user-select: none;
            box-sizing: border-box;
            background: #fff;
            color: #4A4A4A;
            border-radius: 10px;
        }

        .inputTxt {
            text-shadow: rgb(20 20 20) 4px 0px 0px, rgb(20 20 20) 3.87565px 0.989616px 0px, rgb(20 20 20) 3.51033px 1.9177px 0px, rgb(20 20 20) 2.92676px 2.72656px 0px, rgb(20 20 20) 2.16121px 3.36588px 0px, rgb(20 20 20) 1.26129px 3.79594px 0px, rgb(20 20 20) 0.282949px 3.98998px 0px, rgb(20 20 20) -0.712984px 3.93594px 0px, rgb(20 20 20) -1.66459px 3.63719px 0px, rgb(20 20 20) -2.51269px 3.11229px 0px, rgb(20 20 20) -3.20457px 2.39389px 0px, rgb(20 20 20) -3.69721px 1.52664px 0px, rgb(20 20 20) -3.95997px 0.56448px 0px, rgb(20 20 20) -3.97652px -0.432781px 0px, rgb(20 20 20) -3.74583px -1.40313px 0px, rgb(20 20 20) -3.28224px -2.28625px 0px, rgb(20 20 20) -2.61457px -3.02721px 0px, rgb(20 20 20) -1.78435px -3.57996px 0px, rgb(20 20 20) -0.843183px -3.91012px 0px, rgb(20 20 20) 0.150409px -3.99717px 0px, rgb(20 20 20) 1.13465px -3.8357px 0px, rgb(20 20 20) 2.04834px -3.43574px 0px, rgb(20 20 20) 2.83468px -2.82216px 0px, rgb(20 20 20) 3.44477px -2.03312px 0px, rgb(20 20 20) 3.84068px -1.11766px 0px, rgb(20 20 20) 3.9978px -0.132717px 0px;
            cursor: text;
            color: #fff;
            vertical-align: middle;
            user-select: none;
            box-sizing: border-box;
            text-align: center;
            outline: 0;
            display: inline-block;
            margin-left: 20px;
            border: none;
            border: 5px solid rgba(0, 0, 0, 0);
            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08), 0 2px 10px 0 rgba(0, 0, 0, 0.06);
            border-radius: 10px;
            transition: all 1s;
        }
        #block-bind-b {
    width: 100%;
    height: 70%;
    padding: 8px;
    overflow-y: scroll;
    overflow-x: hidden;
    background: rgba(20, 20, 20, 0.3);
    border-radius: 15px;
    border: 5px solid #141414;
}
        </style>`;
$("body").append(modB)
let cfB = `
<div class="infoElement" id="infoBox" style="display: block;">
    <div class="infoElementBox" id="cps" style="display: block;"></div>
    <div class="infoElementBox" id="fps" style="display: block;"></div>
    <div class="infoElementBox" id="server-label" style="display: block;"></div>
    <div class="infoElementBox" id="game-mode-label" style="display: block;"></div>
</div>
<script>
    document.getElementById("infoOpenKey").addEventListener("mousedown", e => {
        if (e.button == 0) {
            $("#infoOpenKey").val("Select") use3 = true
        }
        if (e.button == 2) {
            $("#infoOpenKey").val("...") use3 = false
        }
    }) document.getElementById("infoOpenKey").addEventListener('keydown', e => {
        if ($("#infoOpenKey").focus()) {
            if (use3) {
                use3 = false codeKey3 = (e.code).toString() $("#infoOpenKey").val(codeKey3)
            }
        }
    })
    </script>
<style>
    #infoBox {}

    .infoElement {
        z-index: 8888;
        pointer-events: none;
        position: absolute;
        top: 5px;
        left: 5px;
        background-color: #282d22;
        width: auto;
        height: auto;
        border-width: 5px;
        border-style: solid;
        border-color: rgb(20, 20, 20);
        border-image: initial;
        padding: 7px;
        border-radius: 10px;
    }

    .infoElementBox {
        pointer-events: none;
        background: rgb(30, 32, 27);
        margin-bottom: 5px;
        border-width: 5px;
        border-style: solid;
        border-image: initial;
        padding: 10px;
        border: 5px solid #141414;
        border-radius: 10px;
        color: #dda725;
    }
</style>
`;
$("body").append(cfB)


    spl.outerHTML = `
                    <div class="creditsElement" id="creditb" stlye="display: block;">
    <div class="creditsInfo">
    <li class="subcontent-subtitle">Author:</li>
    ${credit}
    </div>
    <div class="creditsInfo">
    <li class="subcontent-subtitle">Discord:</li>
    ${discord}
    </div>
    <div class="creditsInfo">
    <li class="subcontent-subtitle">Support:</li>
        ${support1}
        <br>
        ${support2}
        <br>
        ${support3}
        <br>
        </div>
</div>
<style>
 .creditsElement {
     padding: 20px;
     width: 375px;
     height: 290px;
     overflow-y: scroll;
     overflow-x: hidden;
     background: rgb(40, 45, 34);
     color: white;
     border-radius: 15px;
     border: 5px solid black;
     z-index: 8888;
 }
 .creditsInfo {
     border: 3px solid black;
     background: rgba(20, 20, 20, 0.3);
     border-radius: 10px;
     margin: 20px 0px 30px;
     box-shadow: rgba(20, 20, 20, 0.4) 0px 5px 0px inset;
     padding-left: 8px;
 }
 #lostworld-io_300x250_2 {
 width: 375px;
 height: 290px;
 }
 .side-main {
 width: 375px;
 height: 290px;
 }
 #game-content {
 width: 75%;
 }
 #main-content {
 width: auto;
 }
 </style>
    `

        // /=\ Change Chat Box Inner Text /=\
    setInterval(() => {
        setTimeout(() => {
            document.getElementById('chat').placeholder = "MESSAGE";
            setTimeout(() => {
                document.getElementById('chat').placeholder = "_M_E_S_S_A_G_E_";
                setTimeout(() => {
                    document.getElementById('chat').placeholder = "-M-E-S-S-A-G-E-";
                    setTimeout(() => {
                        document.getElementById('chat').placeholder = ".M.E.S.S.A.G.E.";
                        setTimeout(() => {
                            document.getElementById('chat').placeholder = "=M=E=S=S=A=G=E=";
                        }, 100);
                    }, 100);
                }, 100);
            }, 100);
        }, 100);
    }, 600)

    document.getElementById('play-text').innerHTML = "PLAY"
    // /=\ Remove Elements /=\
    const elementsToRemove = [
        'game-left-content-main',
        'game-bottom-content',
        'right-content',
        'left-content',
        'skin-message',
        'shop-message',
        'cross-promo',
        'google_play',
        'landscape',
        'waiting',
        'policy',
        'logo',
    ];

    elementsToRemove.forEach(function(elementId) {
        const element = document.getElementById(elementId);
        if (element) {
            element.remove();
        }
    });
    // /=\ Transparent Elements /=\
    const checkboxes = {
        hatStore: document.getElementById("hatStore"),
        clanMenu: document.getElementById("clanMenu"),
        infoMenu: document.getElementById("opacityDisplay"),
        modMenu: document.getElementById("modDisplay"),
        homeMenu: document.getElementById("homeDisplay")
    };


    // /=\ Elements ID /=\
    const elements = {
        hat: document.getElementById("hat-menu"),
        clan: document.getElementById("clan-menu"),
        info: document.getElementById("infoBox"),
        mod: document.getElementById("bearModMenu"),
        home: document.getElementById("game-middle-main")
    };

    // /=\ Change the Opacity /=\
    function handleCheckboxChange(checkbox, element, ) {
        checkbox.addEventListener("change", function() {
            if (checkbox.checked) {
                element.style.opacity = "0.4"; // Change the 4 to whatever fits your needs
            } else {
                element.style.opacity = "1";
            }
        });
    }
    handleCheckboxChange(checkboxes.hatStore, elements.hat);
    handleCheckboxChange(checkboxes.clanMenu, elements.clan);
    handleCheckboxChange(checkboxes.infoMenu, elements.info);
    handleCheckboxChange(checkboxes.modMenu, elements.mod);
    handleCheckboxChange(checkboxes.homeMenu, elements.home);


    const bearCheckbox = {
        cpscheck: document.getElementById("cpsDisplay"),
        fpscheck: document.getElementById("fpsDisplay"),
        servercheck: document.getElementById("serverDisplay"),
        gamecheck: document.getElementById("gameDisplay"),
        infocheck: document.getElementById("infoDisplay")
    };


    // /=\ Elements ID /=\
    const bearElements = {
        cps: document.getElementById("cps"),
        fps: document.getElementById("fps"),
        server: document.getElementById("server-label"),
        game: document.getElementById("game-mode-label"),
        infoO: document.getElementById("game-right-content-main")
    };

    // /=\ Change the Opacity /=\
    function handleCheckboxChangeb(checkboxb, elementb, ) {
        checkboxb.addEventListener("change", function() {
            if (checkboxb.checked) {
                elementb.style.display = "none";
            } else {
                elementb.style.display = "block";
            }
        });
    }
    handleCheckboxChangeb(bearCheckbox.cpscheck, bearElements.cps);
    handleCheckboxChangeb(bearCheckbox.fpscheck, bearElements.fps);
    handleCheckboxChangeb(bearCheckbox.servercheck, bearElements.server);
    handleCheckboxChangeb(bearCheckbox.gamecheck, bearElements.game);
    handleCheckboxChangeb(bearCheckbox.infocheck, bearElements.infoO);


    // /=\ Auto Respawn /=\
    const autoRespawnCheckbox = document.getElementById('autoSpawn');
    const homepage = document.getElementById('homepage');
    const playButton = document.getElementById('play');

    autoRespawnCheckbox.addEventListener('change', function() {
        if (autoRespawnCheckbox.checked) {
            homepage.style.display = 'flex';
            playButton.click();
        } else {
            homepage.style.display = 'none';
        }
        100;
    });



    // /=\ Bigger Hat Store /=\
    var bigcheckbox = document.getElementById("biggerHat") // Useless?

    bigcheckbox.addEventListener('change', function() {
            if (this.checked) {
                document.getElementById("hat-menu").style.height = "700px";
            } else {
                document.getElementById("hat-menu").style.height = "367px";
            }
        })
        // /=\ Sploop.io Tab title /=\
    document.title = 'Sploop.io (B34R Script Active!!)';

    // /=\ Access Settings /=\
    function handleArrowLeftKeyPress(event) {
        if (event.keyCode === 37) {
            var popUi = document.getElementById("pop-ui");
            var popSettings = document.getElementById("pop-settings");

            if (popUi && popSettings) {
                if (popUi.style.display === "flex") {
                    popUi.style.display = "none";
                    popSettings.style.display = "none";
                } else {
                    popUi.style.display = "flex";
                    popSettings.style.display = "flex";
                }
            }

            event.stopPropagation();
            event.preventDefault();
        }
    }

    document.addEventListener("keydown", handleArrowLeftKeyPress);

    // /=\ Access homepage /=\
        function handleArrowRightKeyPress(event) {
        if (event.keyCode === 39) {
            var homeScreen = document.getElementById("homepage");
            if (homeScreen) {
                if (homeScreen.style.display === "flex") {
                    homeScreen.style.display = "none";
                } else {
                    homeScreen.style.display = "flex";
                }
            }

            event.stopPropagation();
            event.preventDefault();
        }
    }

    document.addEventListener("keydown", handleArrowRightKeyPress);

    // /=\ grid Off /=\

    var grid = document.querySelector('#grid-toggle');
    grid.click();

    // /=\ Server and mode Label /=\
    var serverLabel = document.getElementById("server-label");
    var gameModeLabel = document.getElementById("game-mode-label");

    serverLabel.textContent = "Server: Unknown";
    gameModeLabel.textContent = "Game Mode: Unknown";

    function updateLabels() {
        var serverSelect = document.getElementById("server-select");
        var serverName = "";

        for (var i = 0; i < serverSelect.options.length; i++) {
            var option = serverSelect.options[i];
            if (option.selected) {
                serverName = option.textContent;
                break;
            }
        }

        if (serverName !== "") {
            serverLabel.textContent = "Server: " + serverName;
        } else {
            serverLabel.textContent = "Server: Connecting";
        }


        var ffaMode = document.getElementById("ffa-mode");
        var sandboxMode = document.getElementById("sandbox-mode");
        var battleRoyaleMode = document.getElementById("battleroyale-mode");
        var smallWaiting = document.getElementById("small-waiting");

        if (smallWaiting.style.display === "flex") {
            gameModeLabel.textContent = "Game Mode: Connecting";
        } else if (ffaMode.classList.contains("dark-blue-button-3-active")) {
            gameModeLabel.textContent = "Game Mode: Classic";
        } else if (sandboxMode.classList.contains("dark-blue-button-3-active")) {
            gameModeLabel.textContent = "Game Mode: SandBox";
        } else if (battleRoyaleMode.classList.contains("dark-blue-button-3-active")) {
            gameModeLabel.textContent = "Game Mode: BattleRoyale";
        } else {
            gameModeLabel.textContent = "Game Mode: Unknown";
        }
    }

    updateLabels();
    setInterval(updateLabels, 500);

    var frameCount = 0;
    var fpsStartTime = 0;
    var fpsDisplay = document.getElementById("fps");

    // Function to update CPS and FPS display
    function updateDisplay() {
            // Update FPS display
            var currentTime = new Date().getTime();
            var fpsElapsedTime = (currentTime - fpsStartTime) / 1000;
            var fps = frameCount / fpsElapsedTime;
            fpsDisplay.innerHTML = "FPS: " + fps.toFixed(0);
            frameCount = 0;
            fpsStartTime = currentTime;
        }
        // Function to handle requestAnimationFrame callback
    function updateFrame() {
        frameCount++;
        requestAnimationFrame(updateFrame);
    }

    // Start updating display and frame
    setInterval(updateDisplay, 1000); // Update display every second
    updateFrame(); // Start frame update loop

    // Event listeners for clicks
    var cps = 0;

    document.addEventListener("keydown", function(event) {
        if (event.keyCode === 32) { // Space key
            cps++
        }
    });

    document.addEventListener("mousedown", function(event) {
        if (event.button === 0 || event.button === 2) { // Left click or right click
            cps++
        }
    });

    var cpsElement = document.getElementById("cps");

    function updateCPS() {
        cpsElement.innerHTML = "CPS: " + cps;
        cps = 0;
    }

    // Update CPS every second
    setInterval(updateCPS, 700);
})();
    const hatmenuContent = document.getElementById("hat_menu_content");
    const checkBox = document.getElementById("AntiStoreSpaceBar");

    function handleKeyPress(event) {
        if (event.code === "Space" && event.target === document.body && checkBox.checked) {
            event.preventDefault();
        }
    }

    document.addEventListener("keydown", handleKeyPress);

    function cleanup() {
        document.removeEventListener("keydown", handleKeyPress);
    }

    function revertChanges() {
        cleanup();
        hatmenuContent.style.overflowY = "auto";
    }

    function applyChanges() {
        if (checkBox.checked) {
            hatmenuContent.style.overflowY = "scroll";
        } else {
            hatmenuContent.style.overflowY = "auto";
        }
    }

    checkBox.addEventListener("change", function() {
        if (checkBox.checked) {
            applyChanges();
        } else {
            revertChanges();
        }
    });

    applyChanges();