☰

Deep Space Client

Deep Space Client for bloxd.io

  1. // ==UserScript==
  2. // @name         Deep Space Client
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.4.1
  5. // @description  Deep Space Client for bloxd.io
  6. // @author       GEORGECR
  7. // @match        https://bloxd.io/*
  8. // @match        https://bloxd.io/?utm_source=pwa
  9. // @match        https://staging.bloxd.io/
  10. // @icon         https://i.postimg.cc/NMG91FWH/space-BG-loco.jpg
  11. // @license      MIT
  12. // @grant        GM_setValue
  13. // @grant        GM_getValue
  14. // ==/UserScript==
  15.  
  16. (function() {
  17.     //copyright Deep Space Client
  18.     'use strict';
  19.     let crosshairvalue = GM_getValue("crosshair", "https://piskel-imgstore-b.appspot.com/img/7be1c5f3-9ad1-11ef-b170-45e28d82b1ad.gif");
  20.     let capesvalue = GM_getValue("capes", "none");
  21.     let CrossSize = '19';
  22.     let colorPicker1Value = GM_getValue("colorPicker1", "#000000");
  23.     let colorPicker2Value = GM_getValue("colorPicker2", "#FFFFFF");
  24.  
  25.     function modifyCape() {
  26.         try {
  27.             let hotbarContainer = document.querySelector(".HotBarContainer");
  28.             if (!hotbarContainer) {
  29.                 return;
  30.             }
  31.  
  32.             let values = Object.values(hotbarContainer);
  33.             if (values.length === 0) {
  34.                 return;
  35.             }
  36.  
  37.             let stateManager = values[0]?.return?.updateQueue?.lastEffect?.deps?.[2]?.noa?.ents;
  38.             if (!stateManager) {
  39.                 return;
  40.             }
  41.  
  42.             stateManager.getState(1, "cape").chooseCape(capesvalue);
  43.         } catch (error) {
  44.         }
  45.     }
  46.     setInterval(modifyCape, 1000);
  47.  
  48.     function fast_refresh() {
  49.         document.title = "Bloxd.io - Deep Space Client";
  50.         const maintext = document.querySelector('.Title.FullyFancyText');
  51.         if (maintext) {
  52.             maintext.style.webkitTextStroke = "0px";
  53.             maintext.textContent = "DEEP SPACE";
  54.             maintext.style.textShadow = "10px 5px 5px #000000";
  55.             maintext.style.fontSize = "60px";
  56.         }
  57.  
  58.         const background = document.querySelector(".SelectGameGridBackground");
  59.         if (background) {
  60.             background.style.backgroundImage = 'url(https://i.postimg.cc/v8rFjRWq/MAINBACKGROUND.jpg)';
  61.         }
  62.  
  63.         const crosshair = document.querySelector(".CrossHair");
  64.         if (crosshair) {
  65.             crosshair.textContent = "";
  66.             crosshair.style.backgroundImage = `url(${crosshairvalue})`;
  67.             crosshair.style.backgroundRepeat = "no-repeat";
  68.             crosshair.style.backgroundSize = "contain";
  69.             crosshair.style.width = CrossSize + "px";
  70.             crosshair.style.height = CrossSize + "px";
  71.         }
  72.  
  73.         document.querySelectorAll(".HotBarItem").forEach(hotbar => {
  74.             hotbar.style.borderRadius = "12px";
  75.             hotbar.style.borderColor = colorPicker1Value;
  76.             hotbar.style.backgroundColor = "transparent";
  77.             hotbar.style.boxShadow = "none";
  78.             hotbar.style.outline = "transparent";
  79.         });
  80.  
  81.         document.querySelectorAll(".SelectedItem").forEach(slot => {
  82.             slot.style.backgroundColor = "transparent";
  83.             slot.style.boxShadow = "none";
  84.             slot.style.borderRadius = "15px";
  85.             slot.style.borderColor = colorPicker2Value;
  86.             slot.style.outline = "transparent";
  87.         });
  88.  
  89.         document.querySelectorAll('.LoadingOverlayRight').forEach(EnterDiv => {
  90.             EnterDiv.style.transform = 'translate(-20% , 25%)';
  91.         });
  92.  
  93.         document.querySelectorAll('.Inventory').forEach(BloxdUIBoxes => {
  94.             BloxdUIBoxes.style.backgroundColor = 'transparent';
  95.             BloxdUIBoxes.style.border = "3px solid black";
  96.             BloxdUIBoxes.style.boxShadow = "none";
  97.             BloxdUIBoxes.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
  98.             BloxdUIBoxes.style.backdropFilter = `blur(${blur}px)`;
  99.         });
  100.  
  101.  
  102.         document.querySelectorAll('.TitleContainer').forEach(TOP => {
  103.             TOP.style.height = '70px';
  104.             TOP.style.width = '50%';
  105.         });
  106.         document.querySelectorAll('.HomeHeaderRight').forEach(optionsTR => {
  107.             optionsTR.style.backgroundColor = "rgba(136, 50, 64,0.45)";
  108.         });
  109.  
  110.         document.querySelectorAll('.CreativeItemSlotsSearch').forEach(searchbar => {
  111.             searchbar.style.color = 'white';
  112.             searchbar.style.textShadow = "none";
  113.             searchbar.style.backgroundColor = 'transparent';
  114.             searchbar.style.border = "2px solid black";
  115.             searchbar.style.boxShadow = "none";
  116.             searchbar.style.borderRadius = "0px";
  117.         });
  118.  
  119.     }
  120.     setInterval(fast_refresh, 70 );
  121.  
  122.     const UI_aesthetics = () => {
  123.  
  124.         ['LogoContainer', 'cube' , 'HomeScreenBottomLeft'].forEach(className => {
  125.             document.querySelectorAll('.' + className).forEach(el => el.remove());
  126.         });
  127.  
  128.         ['GameAdsBanner', 'HomeBannerInner' , 'ShopBannerDiv' , 'SettingsAdOuter' , 'InventoryAdInner' , 'RespawnLeaderboardBannerDivInner' , 'RespawnSideSquareBannerDiv' , 'LoadingOverlayLeft ' , 'LoadingOverlayRightAdBannerContainer' , 'LoadingOverlayDividerContainer '].forEach(className => {
  129.             document.querySelectorAll('.' + className).forEach(ads => {
  130.                 ads.style.opacity = '0';
  131.                 ads.style.transform = 'translateX(100%)';
  132.                 ads.style.height = '2px';
  133.                 ads.style.widght = '2px';
  134.             });
  135.         });
  136.  
  137.         document.querySelectorAll('.PlayerNamePreview').forEach(optionsTL => {
  138.             optionsTL.style.backgroundColor = "rgba(136, 50, 64 ,0.45)";
  139.             optionsTL.style.color = "white";
  140.             optionsTL.style.textShadow = "none";
  141.         });
  142.  
  143.  
  144.         document.querySelectorAll('.SocialBarInner').forEach(socialbox => {
  145.             socialbox.style.backgroundColor = "rgba(0,0,0,1)";
  146.             socialbox.style.opacity = '1';
  147.         });
  148.  
  149.         document.querySelectorAll('.InvenItem').forEach(invenItem => {
  150.             invenItem.style.backgroundColor = 'transparent';
  151.             invenItem.style.border ="3px solid black";
  152.             invenItem.style.borderRadius = "0px";
  153.         });
  154.         document.querySelectorAll('.InvenItem[data-inven-idx="46"], .InvenItem[data-inven-idx="47"], .InvenItem[data-inven-idx="48"], .InvenItem[data-inven-idx="49"], .InvenItem[data-inven-idx="50"]').forEach(ARMOR => {
  155.             ARMOR.style.backgroundColor = "transparent";
  156.             ARMOR.style.boxShadow = "none";
  157.             ARMOR.style.borderColor = "transparent";
  158.             ARMOR.style.outline = "transparent";
  159.         });
  160.         document.querySelectorAll('.InvenItem[data-inven-idx="46"] .InvenItemUnfilled').forEach(armor => {
  161.             armor.style.backgroundImage = 'url(https://piskel-imgstore-b.appspot.com/img/f7c20a66-3491-11ef-911f-9f3fc6109f85.gif)';
  162.         });
  163.         document.querySelectorAll('.InvenItem[data-inven-idx="47"] .InvenItemUnfilled').forEach(armor => {
  164.             armor.style.backgroundImage = 'url(https://piskel-imgstore-b.appspot.com/img/bb5b78a8-3498-11ef-bcaf-9f3fc6109f85.gif)';
  165.         });
  166.         document.querySelectorAll('.InvenItem[data-inven-idx="48"] .InvenItemUnfilled').forEach(armor => {
  167.             armor.style.backgroundImage = 'url(https://piskel-imgstore-b.appspot.com/img/ab8a4be8-3491-11ef-8f57-9f3fc6109f85.gif)';
  168.         });
  169.         document.querySelectorAll('.InvenItem[data-inven-idx="49"] .InvenItemUnfilled').forEach(armor => {
  170.             armor.style.backgroundImage = 'url(https://piskel-imgstore-b.appspot.com/img/f1d6cc85-3493-11ef-a098-9f3fc6109f85.gif)';
  171.         });
  172.         document.querySelectorAll('.InvenItem[data-inven-idx="50"] .InvenItemUnfilled').forEach(armor => {
  173.             armor.style.backgroundImage = 'url(https://piskel-imgstore-b.appspot.com/img/e3868a0c-d01f-11ef-b884-578249ac6cf7.gif)';
  174.         });
  175.  
  176.         document.querySelectorAll('.AvailableGame').forEach(item => {
  177.             item.style.border = "none";
  178.             item.style.borderRadius = "0px";
  179.             item.style.boxShadow = "0px 10px 20px rgba(0, 0, 0, 0.4)";
  180.         });
  181.  
  182.         document.querySelectorAll('.AvailableGameTextInner').forEach(name => {
  183.             name.style.textShadow = "none";
  184.         });
  185.         document.querySelectorAll('.AvailableGameTextWrapperBackground').forEach(removebox => {
  186.             removebox.style.opacity= "0";
  187.         });
  188.  
  189.  
  190.     };
  191.  
  192.     document.addEventListener('DOMContentLoaded', UI_aesthetics);
  193.     setInterval(UI_aesthetics, 1000);
  194.     const Mods = [
  195.         { id: 1, name: 'ARMOR VIEW', backgroundImage: 'url(https://i.postimg.cc/rpyVVM4G/Armor-View.png)' },
  196.         { id: 2, name: 'TOGGLE SPRINT', backgroundImage: 'url(https://i.postimg.cc/xd9GyxJj/Toggle-Sprint.png)' },
  197.         { id: 3, name: 'CROSSHAIR', backgroundImage: 'url(https://i.postimg.cc/FRy45KFV/Crosshairs.png)' },
  198.         { id: 4, name: 'HANDITEM VIEW', backgroundImage: 'url(https://i.postimg.cc/9fy0xC9y/Hand-Item-View.png)' },
  199.         { id: 5, name: 'CPS COUNTER', backgroundImage: 'url(https://i.postimg.cc/X7W8xYyk/Cps-Counter.png)' },
  200.         { id: 6, name: 'PING COUNTER', backgroundImage: 'url(https://i.postimg.cc/HnrV959k/Ping-Counter.png)' },
  201.         { id: 7, name: 'CINEMATIC MODE', backgroundImage: 'url(https://i.postimg.cc/g228xwfr/Cinematic-Mode.png)' },
  202.         { id: 8, name: 'KEYSTROKES', backgroundImage: 'url(https://i.postimg.cc/Fsh6zZGv/Keystrokes.png)' },
  203.         { id: 9, name: 'HOTBAR', backgroundImage: 'url(https://i.postimg.cc/c4VdPP0h/Hotbar.png)' },
  204.         { id: 10, name: 'RESOLUTION', backgroundImage: 'url(https://i.postimg.cc/cJ11cwsG/Resolution-Adjuster.png)' }
  205.     ];
  206.  
  207.     const createhud = (id, zIndex) => {
  208.         const hud = document.createElement('div');
  209.         hud.id = id;
  210.         hud.style.position = 'fixed';
  211.         hud.style.left = '0px';
  212.         hud.style.top = '0px';
  213.         hud.style.backgroundColor = 'transparent';
  214.         hud.style.width = '100%';
  215.         hud.style.height = '100%';
  216.         hud.style.display = 'block';
  217.         hud.style.zIndex = zIndex;
  218.  
  219.         hud.style.pointerEvents = 'none';
  220.  
  221.         hud.addEventListener('mouseover', (event) => {
  222.             if (event.target !== hud) {
  223.                 event.target.style.pointerEvents = 'auto';
  224.             }
  225.         });
  226.  
  227.         const observer = new MutationObserver((mutations) => {
  228.             mutations.forEach((mutation) => {
  229.                 mutation.addedNodes.forEach((node) => {
  230.                     if (node.nodeType === 1) {
  231.                         node.style.pointerEvents = 'auto';
  232.                     }
  233.                 });
  234.             });
  235.         });
  236.  
  237.         observer.observe(hud, { childList: true, subtree: true });
  238.  
  239.         document.body.appendChild(hud);
  240.         return hud;
  241.     };
  242.     const mainHud = createhud('toggleHud', '500');
  243.     const createBox = (id, zIndex) => {
  244.         const box = document.createElement('div');
  245.         box.id = id;
  246.         box.style.position = 'absolute';
  247.         box.style.top = '50%';
  248.         box.style.left = '50%';
  249.         box.style.transform = 'translate(-50%, -50%)';
  250.         box.style.width = '820px';
  251.         box.style.height = '600px';
  252.         box.style.backgroundColor = 'rgb(40, 40, 40)';
  253.         box.style.color = 'white';
  254.         box.style.borderRadius = '20px';
  255.         box.style.display = 'none';
  256.         box.style.padding = '20px';
  257.         box.style.overflowY = 'auto';
  258.         box.style.zIndex = zIndex;
  259.  
  260.         mainHud.appendChild(box);
  261.  
  262.         return box;
  263.     };
  264.     const createmenu = (id, zIndex) => {
  265.         const menu = document.createElement('div');
  266.         menu.id = id;
  267.         menu.style.position = 'fixed';
  268.         menu.style.top = '50%';
  269.         menu.style.left = '50%';
  270.         menu.style.transform = 'translate(-50%, -50%)';
  271.         menu.style.width = '500px';
  272.         menu.style.height = '295px';
  273.         menu.style.color = 'white';
  274.         menu.style.display = 'none';
  275.         menu.style.justifyContent = 'flex-end';
  276.         menu.style.flexDirection = 'column';
  277.         menu.style.padding = '20px';
  278.         menu.style.alignItems = 'center';
  279.         menu.style.backgroundImage = 'url(https://i.postimg.cc/K8kJ6jnq/DSLOLGO.png)';
  280.         menu.style.backgroundRepeat = "no-repeat";
  281.         menu.style.backgroundSize = "400px 230px";
  282.         menu.style.backgroundPosition = 'center calc(50% - 20px)';
  283.         menu.style.zIndex = zIndex;
  284.         mainHud.appendChild(menu);
  285.         return menu;
  286.     };
  287.     const mainMenu = createmenu('toggleMenu', '1000');
  288.  
  289.     const mainBox = createBox('toggleBox', '1001');
  290.  
  291.     const settingsModal = createBox('settingsModal', '1002');
  292.     settingsModal.style.backgroundColor = 'rgb(40, 40, 40)';
  293.  
  294.     const crosshairSettingsModal = createBox('crosshairSettingsModal', '1002');
  295.     crosshairSettingsModal.style.backgroundColor = 'rgb(40, 40, 40)';
  296.  
  297.     const capeModal = createBox('hotbarSettingsModal', '1002');
  298.     capeModal.style.backgroundColor = 'transparent';
  299.     capeModal.style.justifyContent = 'center';
  300.     capeModal.style.alignItems = 'center';
  301.  
  302.     const hotbarSettingsModal = createBox('hotbarSettingsModal', '1002');
  303.     hotbarSettingsModal.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
  304.     hotbarSettingsModal.style.backdropFilter = 'blur(5px)';
  305.     hotbarSettingsModal.style.justifyContent = 'center';
  306.     hotbarSettingsModal.style.alignItems = 'center';
  307.  
  308.     const toggleshiftSettingsModal = createBox('toggleshiftSettingsModal', '1002');
  309.     toggleshiftSettingsModal.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
  310.     toggleshiftSettingsModal.style.backdropFilter = 'blur(5px)';
  311.     toggleshiftSettingsModal.style.justifyContent = 'center';
  312.     toggleshiftSettingsModal.style.alignItems = 'center';
  313.  
  314.     const EditHud = createBox('EditHud', '1002');
  315.     EditHud.style.backgroundColor = 'transparent';
  316.     EditHud.style.justifyContent = 'space-between';
  317.     EditHud.style.flexDirection = 'column';
  318.     EditHud.style.alignItems = 'center';
  319.  
  320.     const resolutionSettingsModal = createBox('resolutionSettingsModal', '1002');
  321.     resolutionSettingsModal.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';
  322.     resolutionSettingsModal.style.backdropFilter = 'blur(5px)';
  323.     resolutionSettingsModal.style.justifyContent = 'center';
  324.     resolutionSettingsModal.style.alignItems = 'center';
  325.  
  326.     const menuButtonsCon = document.createElement('div');
  327.     menuButtonsCon.style.flexDirection = 'row';
  328.     menuButtonsCon.style.alignItems = 'center';
  329.     menuButtonsCon.style.display = 'flex';
  330.     mainMenu.appendChild(menuButtonsCon);
  331.  
  332.     const settingsButton = document.createElement('button');
  333.     settingsButton.style.fontSize = '20px';
  334.     settingsButton.style.fontWeight = 'bold';
  335.     settingsButton.style.width = '60px';
  336.     settingsButton.style.height = '60px';
  337.     settingsButton.style.backgroundColor = 'rgba(40, 40, 40, 0.97)';
  338.     settingsButton.style.borderRadius = '10px';
  339.     settingsButton.style.border = '2px solid rgba(50, 50, 50, 0.97)';
  340.     settingsButton.style.outline = '2px solid rgb(30,30,30)';
  341.     settingsButton.style.color = 'white';
  342.     settingsButton.style.cursor = 'pointer';
  343.     settingsButton.style.display = 'flex';
  344.     settingsButton.style.alignItems = 'center';
  345.     settingsButton.style.justifyContent = 'center';
  346.     settingsButton.style.position = 'relative';
  347.     settingsButton.style.justifyContent = 'center';
  348.     settingsButton.style.backgroundImage = 'url(https://i.postimg.cc/MGRs1QCR/settings-icon-1964x2048-8nigtrtt.png)';
  349.     settingsButton.style.position = 'relative';
  350.     settingsButton.style.backgroundRepeat = "no-repeat";
  351.     settingsButton.style.backgroundSize = "40px 40px";
  352.     settingsButton.style.backgroundPosition = 'center';
  353.     settingsButton.addEventListener('mouseover', function() {
  354.         settingsButton.style.outline = '2px solid rgb(255, 255, 255)';
  355.     });
  356.     settingsButton.addEventListener('mouseout', function() {
  357.         settingsButton.style.outline = '2px solid rgb(30, 30, 30)';
  358.     });
  359.     settingsButton.addEventListener('click', function() {
  360.         settingsModal.style.display = 'block';
  361.     });
  362.     menuButtonsCon.appendChild(settingsButton);
  363.  
  364.  
  365.     const ModsButton = document.createElement('button');
  366.     ModsButton.textContent = 'MODS';
  367.     ModsButton.style.marginBottom = '10px';
  368.     ModsButton.style.backgroundColor = 'rgba(40, 40, 40, 0.97)';
  369.     ModsButton.style.borderRadius = '10px';
  370.     ModsButton.style.outline = '2px solid rgb(30,30,30)';
  371.     ModsButton.style.border = '2px solid rgba(50, 50, 50, 0.97)';
  372.     ModsButton.style.color = 'white';
  373.     ModsButton.style.width = '180px';
  374.     ModsButton.style.height = '60px';
  375.     ModsButton.style.margin = '0px 10px 0px 10px';
  376.     ModsButton.style.fontSize = '20px';
  377.     ModsButton.style.fontWeight = '300';
  378.     ModsButton.style.cursor = 'pointer';
  379.     ModsButton.addEventListener('mouseover', function() {
  380.         ModsButton.style.outline = '2px solid rgb(255,255,255)';
  381.     });
  382.     ModsButton.addEventListener('mouseout', function() {
  383.         ModsButton.style.outline = '2px solid rgb(30, 30, 30)';
  384.     });
  385.     ModsButton.addEventListener('click', function() {
  386.         mainBox.style.display = 'block';
  387.     });
  388.     menuButtonsCon.appendChild(ModsButton);
  389.  
  390.  
  391.     const CosmeticsButton = document.createElement('button');
  392.     CosmeticsButton.style.backgroundColor = 'rgba(40, 40, 40, 0.97)';
  393.     CosmeticsButton.style.borderRadius = '10px';
  394.     CosmeticsButton.style.border = '2px solid rgba(50, 50, 50, 0.97)';
  395.     CosmeticsButton.style.outline = '2px solid rgb(30,30,30)';
  396.     CosmeticsButton.style.color = 'white';
  397.     CosmeticsButton.style.width = '60px';
  398.     CosmeticsButton.style.height = '60px';
  399.     CosmeticsButton.style.fontSize = '20px';
  400.     CosmeticsButton.style.fontWeight = 'bold';
  401.     CosmeticsButton.style.cursor = 'pointer';
  402.     CosmeticsButton.style.display = 'block';
  403.     CosmeticsButton.style.justifyContent = 'center';
  404.     CosmeticsButton.style.backgroundImage = 'url(https://i.postimg.cc/t4RkYc5K/yellow-t-shirt-icon-mds.png)';
  405.     CosmeticsButton.style.position = 'relative';
  406.     CosmeticsButton.style.backgroundRepeat = "no-repeat";
  407.     CosmeticsButton.style.backgroundSize = "45px 40px";
  408.     CosmeticsButton.style.backgroundPosition = 'center';
  409.     CosmeticsButton.addEventListener('mouseover', function() {
  410.         CosmeticsButton.style.outline = '2px solid rgb(255,255,255)';
  411.     });
  412.     CosmeticsButton.addEventListener('mouseout', function() {
  413.         CosmeticsButton.style.outline = '2px solid rgb(30,30,30)';
  414.     });
  415.     CosmeticsButton.addEventListener('click', function() {
  416.         capeModal.style.display = 'flex';
  417.         mainMenu.style.display = 'none'
  418.         mainHud.style.backgroundColor = 'rgba(0, 0, 0, 0.6)';;
  419.         mainHud.style.backdropFilter = 'blur(5px)';
  420.     });
  421.     menuButtonsCon.appendChild(CosmeticsButton);
  422.  
  423.     const topBar = document.createElement('div');
  424.     topBar.style.display = 'flex';
  425.     topBar.style.alignItems = 'center';
  426.     topBar.style.justifyContent = 'center';
  427.     topBar.style.flexDirection = 'row';
  428.     topBar.style.backgroundColor = 'transparent';
  429.     topBar.style.width = '100%';
  430.     topBar.style.height = '60px';
  431.     topBar.style.marginTop = '-15px';
  432.     topBar.style.borderBottom = '2px solid rgb(60, 60, 60)';
  433.     mainBox.appendChild(topBar);
  434.  
  435.     const modContainer = document.createElement('div');
  436.     modContainer.style.display = 'flex';
  437.     modContainer.style.flexWrap = 'wrap';
  438.     modContainer.style.gap = '15px';
  439.     modContainer.style.marginTop = '10px';
  440.     mainBox.appendChild(modContainer);
  441.  
  442.     const modBoxItems = [];
  443.     Mods.forEach((mod, index) => {
  444.         const modBoxItem = document.createElement('div');
  445.         modBoxItem.style.backgroundImage = mod.backgroundImage;
  446.         modBoxItem.style.backgroundSize = '75px 75px';
  447.         modBoxItem.style.backgroundRepeat = "no-repeat";
  448.         modBoxItem.style.backgroundPosition = 'center calc(50% - 10px)';
  449.         modBoxItem.style.height = '165px';
  450.         modBoxItem.style.width = '165px';
  451.         modBoxItem.style.padding = '10px';
  452.         modBoxItem.style.backgroundColor = 'rgb(50, 50, 50)';
  453.         modBoxItem.style.display = 'flex';
  454.         modBoxItem.style.border = '2px solid rgb(60, 60, 60)';
  455.         modBoxItem.style.borderRadius = '10px';
  456.         modBoxItem.style.flexDirection = 'column';
  457.         modBoxItem.style.justifyContent = 'space-between';
  458.         modBoxItem.style.alignItems = 'center';
  459.         modBoxItem.innerHTML = mod.name;
  460.         modBoxItem.dataset.name = mod.name.toLowerCase();
  461.         modBoxItem.dataset.id = index;
  462.  
  463.         modContainer.appendChild(modBoxItem);
  464.         modBoxItems.push(modBoxItem);
  465.     });
  466.  
  467.     mainBox.appendChild(modContainer);
  468.     mainHud.appendChild(mainBox);
  469.  
  470.     const buttonsContainer = document.createElement('div');
  471.     buttonsContainer.style.display = 'flex';
  472.     buttonsContainer.style.alignItems = 'center';
  473.     buttonsContainer.style.gap = '10px';
  474.     buttonsContainer.style.marginRight = 'auto';
  475.     buttonsContainer.style.marginTop = '10px';
  476.     buttonsContainer.style.marginLeft = '10px';
  477.  
  478.     const buttons = ['All', 'New', 'Hud'];
  479.     const buttonElements = {};
  480.     buttons.forEach((name) => {
  481.         const button = document.createElement('button');
  482.         button.textContent = name;
  483.         button.style.backgroundColor = name === 'All' ? '#A52D2D' : 'rgb(50, 50, 50)';
  484.         button.style.color = 'white';
  485.         button.style.border = 'none';
  486.         button.style.borderRadius = '10px';
  487.         button.style.height = "37px";
  488.         button.style.width = "80px";
  489.         button.style.fontWeight = '600';
  490.         button.style.cursor = 'pointer';
  491.         button.addEventListener('click', () => handleButtonClick(name));
  492.         buttonsContainer.appendChild(button);
  493.         buttonElements[name] = button;
  494.     });
  495.  
  496.     const EditHUDButton = document.createElement('button');
  497.     EditHUDButton.textContent = 'Edit Hud';
  498.     EditHUDButton.style.marginRight = '5px';
  499.     EditHUDButton.style.backgroundColor = 'rgb(50, 50, 50)';
  500.     EditHUDButton.style.borderRadius = '10px';
  501.     EditHUDButton.style.border = 'none';
  502.     EditHUDButton.style.color = 'white';
  503.     EditHUDButton.style.width = '100px';
  504.     EditHUDButton.style.height = '37px';
  505.     EditHUDButton.style.fontWeight = '600';
  506.     EditHUDButton.style.cursor = 'pointer';
  507.     EditHUDButton.addEventListener('click', function() {
  508.         EditHud.style.display = 'flex';
  509.         mainBox.style.display = 'none';
  510.         mainHud.style.backgroundColor = 'rgba(0, 0, 0, 0.6)';
  511.         mainMenu.style.display = 'none';
  512.     });
  513.     buttonsContainer.appendChild(EditHUDButton);
  514.  
  515.     const spacer = document.createElement('div');
  516.     spacer.style.flexGrow = '1';
  517.  
  518.  
  519.     const searchBar = document.createElement('input');
  520.     searchBar.type = 'text';
  521.     searchBar.placeholder = 'Search';
  522.     searchBar.style.width = '170px';
  523.     searchBar.style.height = '35px';
  524.     searchBar.style.position = 'absolute';
  525.     searchBar.style.top = '22px';
  526.     searchBar.style.right = '70px';
  527.     searchBar.style.borderRadius = '10px';
  528.     searchBar.style.color = 'white';
  529.     searchBar.style.fontWeight = '600';
  530.     searchBar.style.border = 'none';
  531.     searchBar.style.fontSize = "15px";
  532.     searchBar.style.backgroundColor = 'rgb(50, 50, 50)';
  533.     searchBar.style.paddingLeft = '20px';
  534.     searchBar.style.outline = "none";
  535.     searchBar.addEventListener('input', () => {
  536.         const query = searchBar.value.toLowerCase().trim();
  537.  
  538.         modBoxItems.forEach((modBoxItem) => {
  539.             if (modBoxItem.dataset.name.includes(query)) {
  540.                 modBoxItem.style.display = 'flex';
  541.             } else {
  542.                 modBoxItem.style.display = 'none';
  543.             }
  544.         });
  545.     });
  546.  
  547.     const closeIcon = document.createElement('button');
  548.     closeIcon.textContent = '✖';
  549.     closeIcon.style.position = 'absolute';
  550.     closeIcon.style.width = '37px';
  551.     closeIcon.style.height = '37px';
  552.     closeIcon.style.backgroundColor = 'rgb(50, 50, 50)';
  553.     closeIcon.style.borderRadius = '10px';
  554.     closeIcon.style.top = '22px';
  555.     closeIcon.style.right = '20px';
  556.     closeIcon.style.border = 'none';
  557.     closeIcon.style.fontSize = '16px';
  558.     closeIcon.style.color = 'white';
  559.     closeIcon.style.cursor = 'pointer';
  560.     closeIcon.addEventListener('click', function() {
  561.         mainBox.style.display = 'none';
  562.     });
  563.     topBar.appendChild(closeIcon);
  564.  
  565.     topBar.appendChild(searchBar);
  566.     topBar.appendChild(buttonsContainer);
  567.     topBar.appendChild(spacer);
  568.  
  569.  
  570.     function handleButtonClick(name) {
  571.         modBoxItems.forEach((modBoxItem) => {
  572.             modBoxItem.style.display = 'none';
  573.         });
  574.  
  575.         buttons.forEach((buttonName) => {
  576.             const button = buttonElements[buttonName];
  577.             button.style.backgroundColor = 'rgb(50, 50, 50)';
  578.         });
  579.  
  580.         const activeButton = buttonElements[name];
  581.         activeButton.style.backgroundColor = '#A52D2D';
  582.  
  583.         if (name === 'All') {
  584.             modBoxItems.forEach((modBoxItem) => {
  585.                 modBoxItem.style.display = 'flex';
  586.             });
  587.         } else if (name === 'New') {
  588.             const newModBoxItems = [9, 4];
  589.             newModBoxItems.forEach((id) => {
  590.                 const modBoxItem = modBoxItems[id];
  591.                 if (modBoxItem) {
  592.                     modBoxItem.style.display = 'flex';
  593.                 }
  594.             });
  595.         } else if (name === 'Hud') {
  596.             const hudItems = [0, 3, 4, 5, 7];
  597.             hudItems.forEach((id) => {
  598.                 const modBoxItem = modBoxItems[id];
  599.                 if (modBoxItem) {
  600.                     modBoxItem.style.display = 'flex';
  601.                 }
  602.             });
  603.         }
  604.  
  605.     }
  606.  
  607.     const ArmorViewButton = document.createElement('button');
  608.     ArmorViewButton.textContent = 'Enabled';
  609.     ArmorViewButton.style.backgroundColor = 'rgb(40, 40, 40)';
  610.     ArmorViewButton.style.borderRadius = '10px';
  611.     ArmorViewButton.style.border = 'none';
  612.     ArmorViewButton.style.color = 'white';
  613.     ArmorViewButton.style.width = '160px';
  614.     ArmorViewButton.style.height = '40px';
  615.     ArmorViewButton.style.fontSize = '18px';
  616.     ArmorViewButton.style.cursor = 'pointer';
  617.     modContainer.children[0].appendChild(ArmorViewButton);
  618.  
  619.     let selectedItemBoxInterval;
  620.     function createSelectedItemBox() {
  621.         const selectedItemBox = document.createElement('div');
  622.         selectedItemBox.id = 'selected-item-box';
  623.         selectedItemBox.style.position = 'fixed';
  624.         selectedItemBox.style.bottom = '100px';
  625.         selectedItemBox.style.left = '31%';
  626.         selectedItemBox.style.transformX = 'translateX(-28%)';
  627.         selectedItemBox.style.width = '400px';
  628.         selectedItemBox.style.height = '70px';
  629.         selectedItemBox.style.zIndex = '9999';
  630.         selectedItemBox.style.overflow = 'hidden';
  631.         selectedItemBox.style.display = 'flex';
  632.         selectedItemBox.style.alignItems = 'center';
  633.         selectedItemBox.style.justifyContent = 'center';
  634.         mainHud.appendChild(selectedItemBox);
  635.  
  636.         let isMoving = false;
  637.         let offsetAX = 0;
  638.         let offsetAY = 0;
  639.  
  640.         selectedItemBox.addEventListener('mousedown', (event) => {
  641.             if (ArmorViewButton.textContent === 'Enabled' && EditHud.style.display === 'flex' && event.target.nodeName !== 'INPUT') {
  642.                 isMoving = true;
  643.                 offsetAX = event.clientX;
  644.                 offsetAX = event.clientY;
  645.             }
  646.         });
  647.  
  648.         document.addEventListener('mousemove', (event) => {
  649.             if (ArmorViewButton.textContent === 'Enabled' && isMoving) {
  650.                 selectedItemBox.style.left = `${event.clientX}px`;
  651.                 selectedItemBox.style.top = `${event.clientY}px`;
  652.             }
  653.         });
  654.  
  655.         document.addEventListener('mouseup', () => isMoving = false);
  656.  
  657.         function updateSelectedItems() {
  658.             const indices = [46, 47, 48, 49, 50];
  659.             const selectedItemBox = document.getElementById('selected-item-box');
  660.             if (selectedItemBox) {
  661.                 selectedItemBox.innerHTML = '';
  662.  
  663.                 indices.forEach(idx => {
  664.                     const selectedItem = document.querySelector(`.InvenItem[data-inven-idx="${idx}"]`);
  665.                     if (selectedItem) {
  666.                         const clonedItem = selectedItem.cloneNode(true);
  667.                         clonedItem.removeAttribute('id');
  668.                         clonedItem.style.zIndex = '0';
  669.                         clonedItem.querySelectorAll('[id]').forEach(element => element.removeAttribute('id'));
  670.  
  671.                         const itemImage = clonedItem.querySelector('.BlockItemWrapper img');
  672.                         if (itemImage) {
  673.                             itemImage.style.maxWidth = '100%';
  674.                             itemImage.style.maxHeight = '100%';
  675.                             itemImage.style.display = 'block';
  676.                             itemImage.style.margin = 'auto';
  677.                             itemImage.style.zIndex = '0';
  678.                         }
  679.                         selectedItemBox.appendChild(clonedItem);
  680.                     }
  681.                 });
  682.             }
  683.         }
  684.         selectedItemBoxInterval = setInterval(updateSelectedItems, 1000);
  685.     }
  686.     function removeSelectedItemBox() {
  687.         clearInterval(selectedItemBoxInterval);
  688.         const selectedItemBox = document.getElementById('selected-item-box');
  689.         if (selectedItemBox) {
  690.             selectedItemBox.remove();
  691.         }
  692.     }
  693.     const armorViewState = GM_getValue('armorViewState', 'Enabled');
  694.  
  695.     if (armorViewState === 'Disabled') {
  696.         ArmorViewButton.textContent = 'Disabled';
  697.     } else {
  698.         createSelectedItemBox();
  699.     }
  700.     ArmorViewButton.addEventListener('click', function() {
  701.         if (ArmorViewButton.textContent === 'Enabled') {
  702.             ArmorViewButton.textContent = 'Disabled';
  703.             removeSelectedItemBox();
  704.             GM_setValue('armorViewState', 'Disabled');
  705.         } else {
  706.             ArmorViewButton.textContent = 'Enabled';
  707.             createSelectedItemBox();
  708.             GM_setValue('armorViewState', 'Enabled');
  709.         }
  710.     });
  711.  
  712.  
  713.     const CrosshairButton = document.createElement('button');
  714.     CrosshairButton.textContent = 'Customize'
  715.     CrosshairButton.style.backgroundColor = 'rgb(40, 40, 40)';
  716.     CrosshairButton.style.borderRadius = '10px';
  717.     CrosshairButton.style.border = 'none';
  718.     CrosshairButton.style.color = 'white';
  719.     CrosshairButton.style.fontSize = '18px';
  720.     CrosshairButton.style.width = '160px';
  721.     CrosshairButton.style.height = '40px';
  722.     CrosshairButton.style.cursor = 'pointer';
  723.     CrosshairButton.addEventListener('click', function() {
  724.         crosshairSettingsModal.style.display = 'block';
  725.     });
  726.     modContainer.children[2].appendChild(CrosshairButton);
  727.  
  728.     const CpsCounterButton = document.createElement('button');
  729.     CpsCounterButton.textContent = 'Enabled';
  730.     CpsCounterButton.style.backgroundColor = 'rgb(40, 40, 40)';
  731.     CpsCounterButton.style.borderRadius = '10px';
  732.     CpsCounterButton.style.border = 'none';
  733.     CpsCounterButton.style.color = 'white';
  734.     CpsCounterButton.style.width = '160px';
  735.     CpsCounterButton.style.height = '40px';
  736.     CpsCounterButton.style.fontSize = '18px';
  737.     CpsCounterButton.style.cursor = 'pointer';
  738.     modContainer.children[4].appendChild(CpsCounterButton);
  739.  
  740.     let cpsCounter;
  741.     let leftClickTimes = [];
  742.     let rightClickTimes = [];
  743.     let cpsInterval = null;
  744.     let clickListener = null;
  745.  
  746.     const CpsCounterState = GM_getValue('CpsCounterState', 'Enabled');
  747.     if (CpsCounterState === 'Enabled') {
  748.         CpsCounterButton.textContent = 'Enabled';
  749.         createCPSCounter();
  750.         startCPSCounter();
  751.     } else {
  752.         CpsCounterButton.textContent = 'Disabled';
  753.     }
  754.  
  755.     function createCPSCounter() {
  756.         cpsCounter = document.createElement('div');
  757.         cpsCounter.style.position = 'fixed';
  758.         cpsCounter.style.top = '96%';
  759.         cpsCounter.style.left = '94.5%';
  760.         cpsCounter.style.padding = '5px 10px';
  761.         cpsCounter.style.backgroundColor = '#00000066';
  762.         cpsCounter.style.color = 'white';
  763.         cpsCounter.style.fontSize = '16px';
  764.         cpsCounter.style.zIndex = '1000';
  765.         cpsCounter.innerText = 'CPS: 0 | 0';
  766.         cpsCounter.style.cursor = 'pointer';
  767.         mainHud.appendChild(cpsCounter);
  768.  
  769.  
  770.         let isMoving = false;
  771.         let offsetCX = 0;
  772.         let offsetCY = 0;
  773.  
  774.         cpsCounter.addEventListener('mousedown', (event) => {
  775.             if (CpsCounterButton.textContent === 'Enabled' && EditHud.style.display === 'flex' && event.target.nodeName !== 'INPUT') {
  776.                 isMoving = true;
  777.                 offsetCX = event.clientX;
  778.                 offsetCX = event.clientY;
  779.             }
  780.         });
  781.  
  782.         document.addEventListener('mousemove', (event) => {
  783.             if (CpsCounterButton.textContent === 'Enabled' && isMoving) {
  784.                 cpsCounter.style.left = `${event.clientX}px`;
  785.                 cpsCounter.style.top = `${event.clientY}px`;
  786.             }
  787.         });
  788.  
  789.         document.addEventListener('mouseup', () => isMoving = false);
  790.  
  791.     }
  792.  
  793.     function startCPSCounter() {
  794.         function countClick(event) {
  795.             const currentTime = new Date().getTime();
  796.             if (event.button === 0) {
  797.                 leftClickTimes.push(currentTime);
  798.             } else if (event.button === 2) {
  799.                 rightClickTimes.push(currentTime);
  800.             }
  801.             updateCPS();
  802.         }
  803.  
  804.         function updateCPS() {
  805.             const currentTime = new Date().getTime();
  806.             const oneSecondAgo = currentTime - 1000;
  807.             leftClickTimes = leftClickTimes.filter(time => time >= oneSecondAgo);
  808.             rightClickTimes = rightClickTimes.filter(time => time >= oneSecondAgo);
  809.             cpsCounter.innerText = `CPS: ${leftClickTimes.length} | ${rightClickTimes.length}`;
  810.         }
  811.         clickListener = function(event) {
  812.             if (event.button === 0 || event.button === 2) {
  813.                 countClick(event);
  814.             }
  815.         };
  816.         document.addEventListener('mousedown', clickListener);
  817.         cpsInterval = setInterval(updateCPS, 1000);
  818.     }
  819.  
  820.     CpsCounterButton.addEventListener('click', function() {
  821.         if (CpsCounterButton.textContent === 'Disabled') {
  822.             CpsCounterButton.textContent = 'Enabled';
  823.             createCPSCounter();
  824.             GM_setValue('CpsCounterState', 'Enabled');
  825.             startCPSCounter();
  826.         } else {
  827.             CpsCounterButton.textContent = 'Disabled';
  828.             GM_setValue('CpsCounterState', 'Disabled');
  829.  
  830.             if (cpsInterval) {
  831.                 clearInterval(cpsInterval);
  832.                 cpsInterval = null;
  833.             }
  834.             if (clickListener) {
  835.                 document.removeEventListener('mousedown', clickListener);
  836.                 clickListener = null;
  837.             }
  838.             if (cpsCounter) {
  839.                 cpsCounter.remove();
  840.                 cpsCounter = null;
  841.             }
  842.             leftClickTimes = [];
  843.             rightClickTimes = [];
  844.         }
  845.     });
  846.  
  847.     const PingCounterButton = document.createElement('button');
  848.     PingCounterButton.textContent = 'Disabled';
  849.     PingCounterButton.style.backgroundColor = 'rgb(40, 40, 40)';
  850.     PingCounterButton.style.borderRadius = '10px';
  851.     PingCounterButton.style.border = 'none';
  852.     PingCounterButton.style.color = 'white';
  853.     PingCounterButton.style.width = '160px';
  854.     PingCounterButton.style.height = '40px';
  855.     PingCounterButton.style.fontSize = '18px';
  856.     PingCounterButton.style.cursor = 'pointer';
  857.     modContainer.children[5].appendChild(PingCounterButton);
  858.  
  859.     class PingCounter {
  860.         constructor(url) {
  861.             this.pingCount = 0;
  862.             this.url = url;
  863.             this.pingInterval = null;
  864.             this.pingTimeDisplay = document.createElement('div');
  865.             this.pingTimeDisplay.id = 'pingTimeDisplay';
  866.             this.pingTimeDisplay.innerText = 'Ping : ';
  867.             this.pingTimeDisplay.style.display = 'none'; // Hide by default
  868.             this.pingTimeDisplay.style.cursor = 'pointer';
  869.             this.pingTimeDisplay.style.position = 'fixed';
  870.             this.pingTimeDisplay.style.top = '96%';
  871.             this.pingTimeDisplay.style.left = '87.3%';
  872.             this.pingTimeDisplay.style.padding = '5px 10px';
  873.             this.pingTimeDisplay.style.backgroundColor = '#00000066';
  874.             this.pingTimeDisplay.style.color = 'white';
  875.             this.pingTimeDisplay.style.fontSize = '16px';
  876.             this.pingTimeDisplay.style.zIndex = '1000';
  877.             mainHud.appendChild(this.pingTimeDisplay);
  878.  
  879.             let isMoving = false;
  880.             let offsetPX = 0;
  881.             let offsetPY = 0;
  882.  
  883.             this.pingTimeDisplay.addEventListener('mousedown', (event) => {
  884.                 if (PingCounterButton.textContent === 'Enabled' && EditHud.style.display === 'flex' && event.target.nodeName !== 'INPUT') {
  885.                     isMoving = true;
  886.                     offsetPX = event.clientX;
  887.                     offsetPX = event.clientY;
  888.                 }
  889.             });
  890.  
  891.             document.addEventListener('mousemove', (event) => {
  892.                 if (PingCounterButton.textContent === 'Enabled' && isMoving) {
  893.                     this.pingTimeDisplay.style.left = `${event.clientX}px`;
  894.                     this.pingTimeDisplay.style.top = `${event.clientY}px`;
  895.                 }
  896.             });
  897.  
  898.             document.addEventListener('mouseup', () => isMoving = false);
  899.  
  900.         }
  901.         ping() {
  902.             const start = new Date().getTime();
  903.             fetch(this.url, { method: 'HEAD', mode: 'no-cors' })
  904.                 .then(() => {
  905.                 const end = new Date().getTime();
  906.                 const pingTime = end - start;
  907.  
  908.                 this.pingTimeDisplay.innerText = `Ping : ${pingTime} ms`;
  909.                 this.pingCount++;
  910.             })
  911.                 .catch((error) => {
  912.                 console.error('Ping failed:', error);
  913.             });
  914.         }
  915.         startPinging(interval) {
  916.             this.ping();
  917.             this.pingInterval = setInterval(() => this.ping(), interval);
  918.         }
  919.         stopPinging() {
  920.             clearInterval(this.pingInterval);
  921.             this.pingTimeDisplay.style.display = 'none';
  922.         }
  923.     }
  924.     const pingCounter = new PingCounter('https://bloxd.io');
  925.     const PingCounterState = GM_getValue('PingCounterState', 'Disabled');
  926.     if (PingCounterState === 'Enabled') {
  927.         PingCounterButton.textContent = 'Enabled';
  928.         pingCounter.startPinging(1500);
  929.         pingCounter.pingTimeDisplay.style.display = 'block';
  930.     } else {
  931.         PingCounterButton.textContent = 'Disabled';
  932.     }
  933.     PingCounterButton.addEventListener('click', () => {
  934.         if (PingCounterButton.textContent === 'Disabled') {
  935.             PingCounterButton.textContent = 'Enabled';
  936.             GM_setValue('PingCounterState', 'Enabled');
  937.             pingCounter.startPinging(1500);
  938.             pingCounter.pingTimeDisplay.style.display = 'block';
  939.         } else {
  940.             PingCounterButton.textContent = 'Disabled';
  941.             GM_setValue('PingCounterState', 'Disabled');
  942.             pingCounter.stopPinging();
  943.         }
  944.     });
  945.  
  946.     const toggleshiftButtonContainer = document.createElement('div');
  947.     toggleshiftButtonContainer.style.display = 'flex';
  948.     toggleshiftButtonContainer.style.justifyContent = 'space-between';
  949.     toggleshiftButtonContainer.style.width = '100%';
  950.  
  951.     const toggleshiftToggleButton = document.createElement('button');
  952.     toggleshiftToggleButton.style.backgroundColor = 'rgb(40, 40, 40)';
  953.     toggleshiftToggleButton.style.borderRadius = '10px';
  954.     toggleshiftToggleButton.style.border = 'none';
  955.     toggleshiftToggleButton.style.color = 'white';
  956.     toggleshiftToggleButton.style.width = '100px';
  957.     toggleshiftToggleButton.style.height = '40px';
  958.     toggleshiftToggleButton.style.fontSize = '18px';
  959.     toggleshiftToggleButton.style.cursor = 'pointer';
  960.     toggleshiftButtonContainer.appendChild(toggleshiftToggleButton);
  961.  
  962.     const toggleshiftSettingsButton = document.createElement('button');
  963.     toggleshiftSettingsButton.innerHTML = '⚙';
  964.     toggleshiftSettingsButton.style.backgroundColor = 'rgb(40, 40, 40)';
  965.     toggleshiftSettingsButton.style.borderRadius = '10px';
  966.     toggleshiftSettingsButton.style.border = 'none';
  967.     toggleshiftSettingsButton.style.color = 'white';
  968.     toggleshiftSettingsButton.style.fontSize = '24px';
  969.     toggleshiftSettingsButton.style.width = '40px';
  970.     toggleshiftSettingsButton.style.height = '40px';
  971.     toggleshiftSettingsButton.style.cursor = 'pointer';
  972.     toggleshiftSettingsButton.addEventListener('click', function () {
  973.         toggleshiftSettingsModal.style.display = 'flex';
  974.     });
  975.     toggleshiftButtonContainer.appendChild(toggleshiftSettingsButton);
  976.     modContainer.children[1].appendChild(toggleshiftButtonContainer);
  977.  
  978.     let togglesprintKey = 'KeyF';
  979.     let isRunning = '';
  980.     let isKeepingRunning = false;
  981.     const shiftKeyData = {
  982.         key: 'Shift',
  983.         code: 'ShiftLeft',
  984.         keyCode: 16,
  985.         which: 16,
  986.         shiftKey: true,
  987.         ControlKey: false,
  988.         altKey: false,
  989.         metaKey: false,
  990.         repeat: false,
  991.         bubbles: true,
  992.         cancelable: true
  993.     };
  994.     const shiftDown = new KeyboardEvent('keydown', shiftKeyData);
  995.     const shiftUp = new KeyboardEvent('keyup', shiftKeyData);
  996.     const toggleSprintState = GM_getValue('toggleSprintState', 'Enabled');
  997.  
  998.     toggleshiftToggleButton.textContent = toggleSprintState;
  999.     document.addEventListener('keyup', e => {
  1000.         if (toggleshiftToggleButton.textContent === 'Enabled') {
  1001.             if (e.code === togglesprintKey) {
  1002.                 if (!isRunning) {
  1003.                     isRunning = 'Shift';
  1004.                     isKeepingRunning = true;
  1005.                     document.dispatchEvent(shiftDown);
  1006.                 } else {
  1007.                     isRunning = '';
  1008.                     isKeepingRunning = false;
  1009.                     document.dispatchEvent(shiftUp);
  1010.                 }
  1011.             } else if (e.code === 'ShiftLeft' && isRunning === 'Shift') {
  1012.                 if (isKeepingRunning) {
  1013.                     e.stopImmediatePropagation();
  1014.                     return;
  1015.                 }
  1016.                 isRunning = '';
  1017.             }
  1018.         }
  1019.     });
  1020.     document.addEventListener('keydown', e => {
  1021.         if (toggleshiftToggleButton.textContent === 'Enabled') {
  1022.             if (e.code === 'ShiftLeft' && !isRunning) {
  1023.                 isRunning = 'Shift';
  1024.             }
  1025.         }
  1026.     });
  1027.  
  1028.     setInterval(() => {
  1029.         if (isKeepingRunning && toggleshiftToggleButton.textContent === 'Enabled') {
  1030.             document.dispatchEvent(shiftDown);
  1031.         }
  1032.     }, 100);
  1033.     toggleshiftToggleButton.addEventListener('click', () => {
  1034.         if (toggleshiftToggleButton.textContent === 'Disabled') {
  1035.             toggleshiftToggleButton.textContent = 'Enabled';
  1036.             GM_setValue('toggleSprintState', 'Enabled');
  1037.         } else {
  1038.             toggleshiftToggleButton.textContent = 'Disabled';
  1039.             GM_setValue('toggleSprintState', 'Disabled');
  1040.             isRunning = '';
  1041.             isKeepingRunning = false;
  1042.             document.dispatchEvent(shiftUp);
  1043.         }
  1044.     });
  1045.  
  1046.  
  1047.     let messageSent = false;
  1048.     const sendMessageToChat = (msg) => {
  1049.         const chat = document.querySelector(".ChatMessages");
  1050.         if (chat) {
  1051.             const div = document.createElement("div");
  1052.             div.className = "MessageWrapper";
  1053.             div.innerHTML = `<div class="TextFromServer undefined"><div class="IndividualText undefined cyan-text">${msg}</div></div>`;
  1054.             chat.appendChild(div);
  1055.         }
  1056.     };
  1057.     const updateGameStatus = () => {
  1058.         const inMenu = document.querySelector('.Title.FullyFancyText');
  1059.         if (!inMenu && !messageSent) {
  1060.             sendMessageToChat("Welcome To Deep Space Client");
  1061.             messageSent = true;
  1062.         } else if (inMenu) {
  1063.             messageSent = false;
  1064.         }
  1065.     };
  1066.  
  1067.     const cinematicToggleButton = document.createElement('button');
  1068.     cinematicToggleButton.style.backgroundColor = 'rgb(40, 40, 40)';
  1069.     cinematicToggleButton.style.borderRadius = '10px';
  1070.     cinematicToggleButton.style.border = 'none';
  1071.     cinematicToggleButton.style.color = 'white';
  1072.     cinematicToggleButton.style.width = '160px';
  1073.     cinematicToggleButton.style.height = '40px';
  1074.     cinematicToggleButton.style.fontSize = '18px';
  1075.     cinematicToggleButton.style.cursor = 'pointer';
  1076.  
  1077.     const cinematicModeState = GM_getValue('cinematicModeState', 'Enabled');
  1078.  
  1079.     cinematicToggleButton.textContent = cinematicModeState;
  1080.  
  1081.     cinematicToggleButton.addEventListener('click', function () {
  1082.         if (cinematicToggleButton.textContent === 'Enabled') {
  1083.             cinematicToggleButton.textContent = 'Disabled';
  1084.             GM_setValue('cinematicModeState', 'Disabled');
  1085.         } else {
  1086.             cinematicToggleButton.textContent = 'Enabled';
  1087.             GM_setValue('cinematicModeState', 'Enabled');
  1088.         }
  1089.     });
  1090.  
  1091.     modContainer.children[6].appendChild(cinematicToggleButton);
  1092.  
  1093.     document.addEventListener('keydown', function (event) {
  1094.         const inMenu = document.querySelector('.Title.FullyFancyText');
  1095.         if (inMenu) return;
  1096.  
  1097.         const key = event.key;
  1098.         const wholeAppWrapper = document.querySelector('.WholeAppWrapper');
  1099.  
  1100.         if (cinematicToggleButton.textContent === 'Enabled' && (key === 'h' || key === 'H')) {
  1101.             wholeAppWrapper.style.visibility = wholeAppWrapper.style.visibility === 'hidden' ? 'visible' : 'hidden';
  1102.             mainHud.style.visibility = mainHud.style.visibility === 'hidden' ? 'visible' : 'hidden';
  1103.         }
  1104.     });
  1105.  
  1106.     setInterval(updateGameStatus, 2000);
  1107.     updateGameStatus();
  1108.  
  1109.     const style = document.createElement("style");
  1110.     style.textContent = `.cyan-text { color: rgb(0, 255, 255) !important; }`;
  1111.     document.head.appendChild(style);
  1112.  
  1113.     const hotbarSettingsButton = document.createElement('button');
  1114.     hotbarSettingsButton.textContent = 'Customize';
  1115.     hotbarSettingsButton.style.backgroundColor = 'rgb(40, 40, 40)';
  1116.     hotbarSettingsButton.style.borderRadius = '10px';
  1117.     hotbarSettingsButton.style.border = 'none';
  1118.     hotbarSettingsButton.style.color = 'white';
  1119.     hotbarSettingsButton.style.fontSize = '18px';
  1120.     hotbarSettingsButton.style.width = '160px';
  1121.     hotbarSettingsButton.style.height = '40px';
  1122.     hotbarSettingsButton.style.cursor = 'pointer';
  1123.     hotbarSettingsButton.addEventListener('click', function() {
  1124.         hotbarSettingsModal.style.display = 'flex';
  1125.     });
  1126.     modContainer.children[8].appendChild(hotbarSettingsButton);
  1127.  
  1128.     const keystrokeToggleButton = document.createElement('button');
  1129.     keystrokeToggleButton.style.backgroundColor = 'rgb(40, 40, 40)';
  1130.     keystrokeToggleButton.style.borderRadius = '10px';
  1131.     keystrokeToggleButton.style.border = 'none';
  1132.     keystrokeToggleButton.style.color = 'white';
  1133.     keystrokeToggleButton.style.width = '160px';
  1134.     keystrokeToggleButton.style.height = '40px';
  1135.     keystrokeToggleButton.style.fontSize = '18px';
  1136.     keystrokeToggleButton.style.cursor = 'pointer';
  1137.     modContainer.children[7].appendChild(keystrokeToggleButton);
  1138.  
  1139.     const keystrokeModeState = GM_getValue('keystrokeModeState', 'Enabled');
  1140.     keystrokeToggleButton.textContent = keystrokeModeState;
  1141.     keystrokeToggleButton.addEventListener('click', function () {
  1142.         if (keystrokeToggleButton.textContent === 'Enabled') {
  1143.             keystrokeToggleButton.textContent = 'Disabled';
  1144.             GM_setValue('keystrokeModeState', 'Disabled');
  1145.             resetKeyStyles();
  1146.             setKeysVisibility(false);
  1147.         } else {
  1148.             keystrokeToggleButton.textContent = 'Enabled';
  1149.             GM_setValue('keystrokeModeState', 'Enabled');
  1150.             setKeysVisibility(true);
  1151.         }
  1152.     });
  1153.     const keys = [
  1154.         { key: 'W', top: '5px', left: '50%' },
  1155.         { key: 'A', top: '60px', left: '31.5%' },
  1156.         { key: 'S', top: '60px', left: '50%' },
  1157.         { key: 'D', top: '60px', left: '68%' },
  1158.         { key: 'LMB', top: '115px', left: '35.5%', width: '77px' },
  1159.         { key: 'RMB', top: '115px', left: '64%', width: '77px' },
  1160.         { key: '―――', top: '170px', left: '50%', height: '25px', width: '160px', fontSize: '18px' }
  1161.     ];
  1162.     const container = document.createElement("div");
  1163.     Object.assign(container.style, {
  1164.         zIndex: "10000",
  1165.         width: "300px",
  1166.         height: "300px",
  1167.         transform: "translate(-50%, -50%)",
  1168.         top: "91%",
  1169.         left: "4.7%",
  1170.         position: "fixed",
  1171.         opacity: "70%",
  1172.         cursor: 'pointer'
  1173.     });
  1174.     mainHud.appendChild(container);
  1175.  
  1176.     let isMoving = false;
  1177.     let offsetX = 0;
  1178.     let offsetY = 0;
  1179.  
  1180.     container.addEventListener('mousedown', (event) => {
  1181.         if (keystrokeToggleButton.textContent === 'Enabled' && EditHud.style.display === 'flex' && event.target.nodeName !== 'INPUT') {
  1182.             isMoving = true;
  1183.             offsetX = event.clientX;
  1184.             offsetY = event.clientY;
  1185.         }
  1186.     });
  1187.  
  1188.     document.addEventListener('mousemove', (event) => {
  1189.         if (keystrokeToggleButton.textContent === 'Enabled' && isMoving) {
  1190.             container.style.left = `${event.clientX}px`;
  1191.             container.style.top = `${event.clientY}px`;
  1192.         }
  1193.     });
  1194.  
  1195.     document.addEventListener('mouseup', () => isMoving = false);
  1196.  
  1197.     const createKeyElement = ({ key, top, left, width = '50px', height = '50px', fontSize = '24px' }) => {
  1198.         const element = document.createElement('div');
  1199.         Object.assign(element.style, {
  1200.             position: 'fixed',
  1201.             color: 'white',
  1202.             top,
  1203.             left,
  1204.             transform: 'translateX(-50%)',
  1205.             zIndex: '10000',
  1206.             fontWeight: 'bold',
  1207.             backgroundColor: 'rgba(0, 0, 0, 0.6)',
  1208.             transition: 'all 0.15s ease-in-out',
  1209.             fontSize,
  1210.             height,
  1211.             width,
  1212.             boxShadow: '0 4px 6px rgba(0, 0, 0, 0.3)',
  1213.             textAlign: 'center',
  1214.             lineHeight: height
  1215.         });
  1216.         element.textContent = key;
  1217.         container.appendChild(element);
  1218.         return element;
  1219.     };
  1220.     const keyElements = keys.reduce((acc, keyConfig) => {
  1221.         acc[keyConfig.key] = createKeyElement(keyConfig);
  1222.         return acc;
  1223.     }, {});
  1224.     const updateKeyStyle = (key, active) => {
  1225.         if (keystrokeToggleButton.textContent === 'Enabled') {
  1226.             keyElements[key].style.backgroundColor = active ? "rgba(255, 255, 255, 0.6)" : "rgba(0, 0, 0, 0.6)";
  1227.             keyElements[key].style.color = active ? "black" : "white";
  1228.         }
  1229.     };
  1230.     const resetKeyStyles = () => {
  1231.         Object.keys(keyElements).forEach(key => {
  1232.             keyElements[key].style.backgroundColor = "rgba(0, 0, 0, 0.6)";
  1233.             keyElements[key].style.color = "white";
  1234.         });
  1235.     };
  1236.     const setKeysVisibility = (visible) => {
  1237.         Object.values(keyElements).forEach(element => {
  1238.             element.style.display = visible ? 'block' : 'none';
  1239.         });
  1240.     };
  1241.     if (keystrokeToggleButton.textContent === 'Disabled') {
  1242.         setKeysVisibility(false);
  1243.     }
  1244.     document.addEventListener('keydown', ({ key }) => {
  1245.         if (keystrokeToggleButton.textContent === 'Enabled') {
  1246.             const upperKey = key.toUpperCase();
  1247.             if (keyElements[upperKey]) updateKeyStyle(upperKey, true);
  1248.             if (key === ' ') updateKeyStyle('―――', true);
  1249.         }
  1250.     });
  1251.     document.addEventListener('keyup', ({ key }) => {
  1252.         if (keystrokeToggleButton.textContent === 'Enabled') {
  1253.             const upperKey = key.toUpperCase();
  1254.             if (keyElements[upperKey]) updateKeyStyle(upperKey, false);
  1255.             if (key === ' ') updateKeyStyle('―――', false);
  1256.         }
  1257.     });
  1258.     document.addEventListener('mousedown', ({ button }) => {
  1259.         if (keystrokeToggleButton.textContent === 'Enabled') {
  1260.             if (button === 0) updateKeyStyle('LMB', true);
  1261.             if (button === 2) updateKeyStyle('RMB', true);
  1262.         }
  1263.     });
  1264.     document.addEventListener('mouseup', ({ button }) => {
  1265.         if (keystrokeToggleButton.textContent === 'Enabled') {
  1266.             if (button === 0) updateKeyStyle('LMB', false);
  1267.             if (button === 2) updateKeyStyle('RMB', false);
  1268.         }
  1269.     });
  1270.  
  1271.     const HandItemToggleButton = document.createElement('button');
  1272.     HandItemToggleButton.style.backgroundColor = 'rgb(40, 40, 40)';
  1273.     HandItemToggleButton.style.borderRadius = '10px';
  1274.     HandItemToggleButton.style.border = 'none';
  1275.     HandItemToggleButton.style.color = 'white';
  1276.     HandItemToggleButton.style.width = '160px';
  1277.     HandItemToggleButton.style.height = '40px';
  1278.     HandItemToggleButton.style.fontSize = '18px';
  1279.     HandItemToggleButton.style.cursor = 'pointer';
  1280.     modContainer.children[3].appendChild(HandItemToggleButton);
  1281.  
  1282.     let isHandItemBoxEnabled = GM_getValue('HandItemBoxState', true);
  1283.  
  1284.  
  1285.     HandItemToggleButton.textContent = isHandItemBoxEnabled ? 'Enabled' : 'Disabled';
  1286.  
  1287.     function createHandItemBox() {
  1288.         const HandItemBox = document.createElement('div');
  1289.         HandItemBox.id = 'hand-item-box';
  1290.         HandItemBox.style.position = 'fixed';
  1291.         HandItemBox.style.bottom = '105px';
  1292.         HandItemBox.style.left = '28%';
  1293.         HandItemBox.style.width = '60px';
  1294.         HandItemBox.style.height = '60px';
  1295.         HandItemBox.style.zIndex = '9999';
  1296.         HandItemBox.style.overflow = 'hidden';
  1297.         HandItemBox.style.display = 'flex';
  1298.         HandItemBox.style.alignItems = 'center';
  1299.         HandItemBox.style.justifyContent = 'center';
  1300.         HandItemBox.style.cursor = 'pointer';
  1301.  
  1302.         mainHud.appendChild(HandItemBox);
  1303.  
  1304.         let isMoving = false;
  1305.         let OffsetHX = 0;
  1306.         let OffsetHY = 0;
  1307.  
  1308.         HandItemBox.addEventListener('mousedown', (e) => {
  1309.             if (HandItemToggleButton.textContent === 'Enabled' && EditHud.style.display === 'flex' && e.target.nodeName !== 'INPUT') {
  1310.                 isMoving = true;
  1311.                 OffsetHX = e.clientX;
  1312.                 OffsetHY = e.clientY;
  1313.             }
  1314.         });
  1315.  
  1316.         document.addEventListener('mousemove', (e) => {
  1317.             if (HandItemToggleButton.textContent === 'Enabled' && isMoving) {
  1318.                 HandItemBox.style.left = `${e.clientX}px`;
  1319.                 HandItemBox.style.top = `${e.clientY}px`;
  1320.             }
  1321.         });
  1322.  
  1323.         document.addEventListener('mouseup', () => isMoving = false);
  1324.     }
  1325.  
  1326.     function updateHandItems() {
  1327.         const HandItemBox = document.getElementById('hand-item-box');
  1328.         if (HandItemBox) {
  1329.             HandItemBox.innerHTML = '';
  1330.  
  1331.             const HandItems = document.querySelectorAll('.SelectedItem');
  1332.             HandItems.forEach(HandItem => {
  1333.                 const clonedHItem = HandItem.cloneNode(true);
  1334.                 clonedHItem.removeAttribute('id');
  1335.                 clonedHItem.querySelectorAll('[id]').forEach(element => element.removeAttribute('id'));
  1336.                 Object.assign(clonedHItem.style, {
  1337.                     position: 'static',
  1338.                     margin: '0',
  1339.                     padding: '0',
  1340.                     width: '100%',
  1341.                     height: '100%',
  1342.                     boxSizing: 'border-box'
  1343.                 });
  1344.  
  1345.                 HandItemBox.appendChild(clonedHItem);
  1346.             });
  1347.         }
  1348.     }
  1349.  
  1350.     HandItemToggleButton.addEventListener('click', function () {
  1351.         isHandItemBoxEnabled = !isHandItemBoxEnabled;
  1352.         GM_setValue('HandItemBoxState', isHandItemBoxEnabled); // Save state
  1353.  
  1354.         if (isHandItemBoxEnabled) {
  1355.             HandItemToggleButton.textContent = 'Enabled';
  1356.             createHandItemBox();
  1357.             setInterval(updateHandItems, 1000);
  1358.         } else {
  1359.             HandItemToggleButton.textContent = 'Disabled';
  1360.             const existingBox = document.getElementById('hand-item-box');
  1361.             if (existingBox) {
  1362.                 existingBox.remove();
  1363.             }
  1364.         }
  1365.     });
  1366.  
  1367.     if (isHandItemBoxEnabled) {
  1368.         createHandItemBox();
  1369.         setInterval(updateHandItems, 1000);
  1370.     }
  1371.  
  1372.  
  1373.     const resolution2Text = document.createElement('span');
  1374.     resolution2Text.textContent = 'ADJUSTER';
  1375.     resolution2Text.style.marginTop = '-93px';
  1376.     modContainer.children[9].appendChild(resolution2Text);
  1377.  
  1378.     const resolutionButtonContainer = document.createElement('div');
  1379.     resolutionButtonContainer.style.display = 'flex';
  1380.     resolutionButtonContainer.style.justifyContent = 'space-between';
  1381.     resolutionButtonContainer.style.width = '100%';
  1382.  
  1383.     const resolutionToggleButton = document.createElement('button');
  1384.     resolutionToggleButton.textContent = 'Enabled';
  1385.     resolutionToggleButton.style.backgroundColor = 'rgb(40, 40, 40)';
  1386.     resolutionToggleButton.style.borderRadius = '10px';
  1387.     resolutionToggleButton.style.border = 'none';
  1388.     resolutionToggleButton.style.color = 'white';
  1389.     resolutionToggleButton.style.width = '100px';
  1390.     resolutionToggleButton.style.height = '40px';
  1391.     resolutionToggleButton.style.fontSize = '18px';
  1392.     resolutionToggleButton.style.cursor = 'pointer';
  1393.     resolutionToggleButton.addEventListener('click', function() {
  1394.         if (resolutionToggleButton.textContent === 'Enabled') {
  1395.             resolutionToggleButton.textContent = 'Disabled';
  1396.         } else {
  1397.             resolutionToggleButton.textContent = 'Enabled';
  1398.         }
  1399.     });
  1400.     resolutionButtonContainer.appendChild(resolutionToggleButton);
  1401.  
  1402.     const resolutionSettingsButton = document.createElement('button');
  1403.     resolutionSettingsButton.innerHTML = '⚙';
  1404.     resolutionSettingsButton.style.backgroundColor = 'rgb(40, 40, 40)';
  1405.     resolutionSettingsButton.style.borderRadius = '10px';
  1406.     resolutionSettingsButton.style.border = 'none';
  1407.     resolutionSettingsButton.style.color = 'white';
  1408.     resolutionSettingsButton.style.fontSize = '24px';
  1409.     resolutionSettingsButton.style.width = '40px';
  1410.     resolutionSettingsButton.style.height = '40px';
  1411.     resolutionSettingsButton.style.cursor = 'pointer';
  1412.     resolutionSettingsButton.addEventListener('click', function() {
  1413.         resolutionSettingsModal.style.display = 'flex';
  1414.     });
  1415.     resolutionButtonContainer.appendChild(resolutionSettingsButton);
  1416.     modContainer.children[9].appendChild(resolutionButtonContainer);
  1417.  
  1418.     capeModal.innerHTML = `
  1419.           <div style=" width: 400px; height: 250px;">
  1420.     <label>CAPES</label>
  1421.     <button id="closeCapeSettings" style="float: right; background: transparent; border: none; color: white; cursor: pointer;">✖</button>
  1422. <div style="display: flex; flex-direction: column; align-items: center; width: 385px; height: 215px; background: rgb(50, 50, 50); border: 2px solid rgb(60, 60, 60); border-radius: 10px;">
  1423.   <label style="margin-bottom: 5px; font-weight: 700;">PICK YOUR CAPE</label>
  1424.   <div style="display: flex; flex-direction: row; align-items: center; width: 370px; height: 100px; gap:15px;">
  1425.     <button id="cape0" style="width: 80px; height: 80px; background: rgb(40, 40, 40); border: none; border-radius: 10px; color: white; font-size: 18px; cursor: pointer; background-image: url('https://i.postimg.cc/HWbRtYwF/ISO-7010-P001-svg.png'); background-size: 40px 40px; background-position: center; background-repeat: no-repeat;">
  1426.   </button>
  1427.   <button id="cape1" style="width: 80px; height: 80px; background: rgb(40, 40, 40); border: none; border-radius: 10px; color: white; font-size: 18px; cursor: pointer; background-image: url('https://i.postimg.cc/ht1dv3dn/Screenshot-2025-03-17-225100.png'); background-size: 40px 65px; background-position: center; background-repeat: no-repeat;">
  1428.   </button>
  1429.     <button id="cape2" style="width: 80px; height: 80px; background: rgb(40, 40, 40); border: none; border-radius: 10px; color: white; font-size: 18px; cursor: pointer; background-image: url('https://i.postimg.cc/hG9z6ZK6/Screenshot-2025-03-17-225109.png'); background-size: 40px 65px; background-position: center; background-repeat: no-repeat;">
  1430.   </button>
  1431.     <button id="cape3" style="width: 80px; height: 80px; background: rgb(40, 40, 40); border: none; border-radius: 10px; color: white; font-size: 18px; cursor: pointer; background-image: url('https://i.postimg.cc/yd0rtHG9/Screenshot-2025-03-17-225116.png'); background-size: 40px 65px; background-position: center; background-repeat: no-repeat;">
  1432.   </button>
  1433.       </div>
  1434.     <div style="display: flex; flex-direction: row; align-items: center; width: 370px; height: 100px; gap:15px; margin-top:15px; margin-bottom:15px;">
  1435.         <button id="cape4" style="width: 80px; height: 80px; background: rgb(40, 40, 40); border: none; border-radius: 10px; color: white; font-size: 18px; cursor: pointer; background-image: url('https://i.postimg.cc/Wz5xjJRr/Screenshot-2025-03-17-231835.png'); background-size: 40px 65px; background-position: center; background-repeat: no-repeat;">
  1436.   </button>
  1437.         <button id="cape5" style="width: 80px; height: 80px; background: rgb(40, 40, 40); border: none; border-radius: 10px; color: white; font-size: 18px; cursor: pointer; background-image: url('https://i.postimg.cc/4xStc25h/Screenshot-2025-03-17-225131.png'); background-size: 40px 65px; background-position: center; background-repeat: no-repeat;">
  1438.   </button>
  1439.           <button id="cape6" style="width: 80px; height: 80px; background: rgb(40, 40, 40); border: none; border-radius: 10px; color: white; font-size: 18px; cursor: pointer; background-image: url('https://i.postimg.cc/rs3gQyG5/Screenshot-2025-03-17-225123.png'); background-size: 40px 65px; background-position: center; background-repeat: no-repeat;">
  1440.   </button>
  1441.           <button id="cape7" style="width: 80px; height: 80px; background: rgb(40, 40, 40); border: none; border-radius: 10px; color: white; font-size: 18px; cursor: pointer;background-image: url('https://i.postimg.cc/g04vJc7m/Screenshot-2025-03-17-225145.png'); background-size: 40px 65px; background-position: center; background-repeat: no-repeat;">
  1442.   </button>
  1443.         </div>
  1444.     </div>
  1445.     </div>
  1446. `;
  1447.  
  1448.     resolutionSettingsModal.innerHTML = `
  1449. <div style="width: 400px; height: 200px;">
  1450.     <label>RESOLUTION ADJUSTER</label>
  1451.     <button id="closeResolutionSettings" style="float: right; background: transparent; border: none; color: white; cursor: pointer;">✖</button>
  1452.     <div style="display: flex; flex-direction: column; align-items: center; width: 385px; height: 185px; background: rgb(50, 50, 50); border: 2px solid rgb(60, 60, 60); border-radius: 10px;">
  1453.         <label style="margin-bottom: 5px; font-weight: 700;">ADJUST THE RESOLUTION</label>
  1454.         <label style="margin-bottom: 5px; font-size: 13px;">The lower the resolution, the higher the FPS.</label>
  1455.         <input type="range" id="resolutionSlider" min="0.05" max="1.0" step="0.05" value="1.0" style="width: 70%; appearance: none; height: 10px; background: linear-gradient(to right, #007bff 100%, #323232 0%); border-radius: 5px; outline: none; cursor: pointer; transition: background 0.3s ease;">
  1456.         <div>
  1457.             <label id="resolutionValueLabel">Resolution: 1.00x</label>
  1458.         </div>
  1459.     </div>
  1460. </div>
  1461. `;
  1462.     hotbarSettingsModal.innerHTML = `
  1463.           <div style=" width: 400px; height: 200px;">
  1464.     <label>HOTBAR</label>
  1465.     <button id="closeHotbarSettings" style="float: right; background: transparent; border: none; color: white; cursor: pointer;">✖</button>
  1466. <div style="display: flex; flex-direction: column; align-items: center; width: 385px; height: 185px; background: rgb(50, 50, 50); border: 2px solid rgb(60, 60, 60); border-radius: 10px;">
  1467.   <label style="margin-bottom: 5px; font-weight: 700;">CUSTOMIZE HOTBAR</label>
  1468.          <label style="margin-bottom: 5px;">Set hotbar and selected hotbar color</label>
  1469.         <label for="colorPicker1">Hotbar:</label>
  1470.         <input type="color" id="colorPicker1" name="colorPicker1" value="#0000000" style="background: rgb(50, 50, 50); cursor: pointer; border: none; height: 30px;">
  1471.         <label for="colorPicker2">Selected hotbar :</label>
  1472.   <input type="color" id="colorPicker2" name="colorPicker2" value="#ffffff" style="background: rgb(50, 50, 50); cursor: pointer; border: none; height: 30px;">
  1473.     </div>
  1474.     </div>
  1475. `;
  1476.     EditHud.innerHTML = `
  1477. <label style="font-size: 30px; font-weight: bolder; text-shadow: 0px 5px 5px black;">✎EDIT THE HUD✎</label>
  1478.     <button id="CommitChanges" style=" background: rgba(40, 40, 40, 0.97) ; width:300px; height :60px; border: 2px solid rgba(50, 50, 50, 0.97); outline :2px solid rgb(30,30,30); border-radius :10px; color: white; cursor: pointer; font-size :15px; font-weight:bolder;">COMMIT CHANGES</button>
  1479.     `;
  1480.     toggleshiftSettingsModal.innerHTML = `
  1481.       <div style=" width: 400px; height: 200px;">
  1482.     <label>TOGGLE SPRINT</label>
  1483.     <button id="closetoggleshiftSettings" style="float: right; background: transparent; border: none; color: white; cursor: pointer;">✖</button>
  1484.     <div style="display: flex; flex-direction: column; align-items: center; width: 385px; height: 185px; background: rgb(50, 50, 50); border: 2px solid rgb(60, 60, 60); border-radius: 10px;">
  1485.     <label style="margin-bottom: 5px; font-weight: 700;">TOGGLE KEY</label>
  1486.     <label style="margin-bottom: 5px;">Set toggle key for toggle Sprint</label>
  1487.         <input type="text" id="customSprintKey" value="SET KEY" style="height:30px; width: 100px; text-align: center; font-weight: bolder; margin-bottom: 10px; background: rgb(40, 40, 40); border:none; color:white; border-radius: 5px; cursor: pointer;" readonly>
  1488.     </div>
  1489.     </div>
  1490.         `;
  1491.     settingsModal.innerHTML = `
  1492.          <label">SETTINGS</label>
  1493.         <button id="closeSettings" style="float: right; background: transparent; border: none; color: white; cursor: pointer;">✖</button>
  1494.         <div style="display: flex; flex-direction: row; gap: 15px; margin-top : 5px; margin-bottom : 10px;">
  1495.         <div style="display: flex; flex-direction: column; align-items: center; width: 385px; height: 185px; background: rgb(50, 50, 50); border: 2px solid rgb(60, 60, 60); border-radius: 10px; margin-top: 5px;">
  1496. <label style="margin-bottom: 10px; font-weight: 700;">TOGGLE KEY</label>
  1497.         <label for="customKey" style="margin-bottom: 5px;">Set toggle key for the client menu:</label>
  1498.         <input type="text" id="customKey" value="SET KEY" style="height:30px; width: 100px; text-align: center; font-weight: bolder; margin-bottom: 10px; background: rgb(40, 40, 40); border:none; color:white; border-radius: 5px;" readonly>
  1499.         </div>
  1500.         <div style="display: flex; flex-direction: column; align-items: center; width: 385px; height: 185px; background: rgb(50, 50, 50); border: 2px solid rgb(60, 60, 60); border-radius: 10px; margin-top: 5px;">
  1501.         <label style=" font-size: 15px; margin-bottom: 10px; font-weight: 700;" >DEEP SPACE CONTROLS</label>
  1502.         <label>Client Menu : Right Shift</label>
  1503.         <label>Toggle Sprint : F</label>
  1504.         <label>Cinematic Mode : H</label>
  1505.         </div>
  1506.         </div>
  1507.          <div style="display: flex; flex-direction: row; gap: 15px; margin-top : 5px; margin-bottom : 10px;">
  1508.         <div style="display: flex; flex-direction: column; align-items: center; width: 185px; height: 185px; background: rgb(50, 50, 50); border: 2px solid rgb(60, 60, 60); border-radius: 10px; margin-top: 5px;">
  1509.         <label style=" font-size: 15px; margin-bottom: 10px; font-weight: 700;" >CURRENT VERSION</label>
  1510.         <label>Version : 1.4.1</label>
  1511.         <label style="color: cyan ; font-size: 14px;">Patch Update</label>
  1512.         <button id="UpdateButton" style="margin-top: 65px; width: 150px; height: 40px; background: rgb(40, 40, 40); border: none; border-radius: 10px; color: white; font-size: 18px; cursor: pointer;">Update</button>
  1513.         </div>
  1514.         </div>
  1515.     `;
  1516.     crosshairSettingsModal.innerHTML = `
  1517.     <label>CROSSHAIR</label>
  1518.     <button id="closeCrosshairSettings" style="float: right; background: transparent; border: none; color: white; cursor: pointer;">✖</button>
  1519. <div style="display: flex; flex-direction: row; gap: 15px; margin-top : 15px;">
  1520.     <div style="display: flex; flex-direction: column; align-items: center; width: 185px; height: 185px; background: rgb(50, 50, 50); border: 2px solid rgb(60, 60, 60); border-radius: 10px;">
  1521.         <label>CROSSHAIR</label>
  1522.         <img src="https://piskel-imgstore-b.appspot.com/img/7be1c5f3-9ad1-11ef-b170-45e28d82b1ad.gif" style="width: 115px; height: 115px;">
  1523.         <button id="option1Button" style="width: 150px; height: 40px; background: rgb(40, 40, 40); border: none; border-radius: 10px; color: white; font-size: 18px; cursor: pointer;">Enable</button>
  1524.     </div>
  1525.     <div style="display: flex; flex-direction: column; align-items: center; width: 185px; height: 185px; background: rgb(50, 50, 50); border: 2px solid rgb(60, 60, 60); border-radius: 10px;">
  1526.         <label>CROSSHAIR</label>
  1527.         <img src="https://piskel-imgstore-b.appspot.com/img/3a948891-4a8f-11ef-8140-5b4c5fd8c3dd.gif" style="width: 115px; height: 115px;">
  1528.         <button id="option5Button" style="width: 150px; height: 40px; background: rgb(40, 40, 40); border: none; border-radius: 10px; color: white; font-size: 18px; cursor: pointer;">Enable</button>
  1529.     </div>
  1530.     <div style="display: flex; flex-direction: column; align-items: center; width: 185px; height: 185px; background: rgb(50, 50, 50); border: 2px solid rgb(60, 60, 60); border-radius: 10px;">
  1531.         <label>CROSSHAIR</label>
  1532.         <img src="https://piskel-imgstore-b.appspot.com/img/354b6bd7-1cd8-11ef-8822-bbb60d940ece.gif" style="width: 115px; height: 115px;">
  1533.         <button id="option3Button" style="width: 150px; height: 40px; background: rgb(40, 40, 40); border: none; border-radius: 10px; color: white; font-size: 18px; cursor: pointer;">Enable</button>
  1534.     </div>
  1535.     <div style="display: flex; flex-direction: column; align-items: center; width: 185px; height: 185px; background: rgb(50, 50, 50); border: 2px solid rgb(60, 60, 60); border-radius: 10px;">
  1536.         <label>CROSSHAIR</label>
  1537.         <img src="https://piskel-imgstore-b.appspot.com/img/18315826-1cd8-11ef-a2e5-bbb60d940ece.gif" style="width: 115px; height: 115px;">
  1538.         <button id="option2Button" style="width: 150px; height: 40px; background: rgb(40, 40, 40); border: none; border-radius: 10px; color: white; font-size: 18px; cursor: pointer;">Enable</button>
  1539.     </div>
  1540. </div>
  1541. <div style="display: flex; flex-direction: row; gap: 15px; margin-top : 15px;">
  1542.   <div style="display: flex; flex-direction: column; align-items: center; width: 185px; height: 185px; background: rgb(50, 50, 50); border: 2px solid rgb(60, 60, 60); border-radius: 10px;">
  1543.         <label>CROSSHAIR</label>
  1544.         <img src="https://piskel-imgstore-b.appspot.com/img/1904aeee-9ad2-11ef-b197-45e28d82b1ad.gif" style="width: 115px; height: 115px;">
  1545.         <button id="option4Button" style="width: 150px; height: 40px; background: rgb(40, 40, 40); border: none; border-radius: 10px; color: white; font-size: 18px; cursor: pointer;">Enable</button>
  1546.     </div>
  1547.       <div style="display: flex; flex-direction: column; align-items: center; width: 385px; height: 185px; background: rgb(50, 50, 50); border: 2px solid rgb(60, 60, 60); border-radius: 10px;">
  1548.          <label>CROSSHAIR SETTINGS</label>
  1549.          <label style="font-size : 12px;">CROSSHAIR SIZE</label>
  1550.          <input type="range" id="crosshairSizeSlider" min="0" max="38" value="19">
  1551.                <div id="sliderValue">19</div>
  1552.     </div>
  1553.       <div style="display: flex; flex-direction: column; align-items: center; width: 185px; height: 185px; background: rgb(50, 50, 50); border: 2px solid rgb(60, 60, 60); border-radius: 10px;">
  1554.         <label>CROSSHAIR</label>
  1555.         <img src="https://piskel-imgstore-b.appspot.com/img/3f1093ca-4a8d-11ef-92cc-5b4c5fd8c3dd.gif" style="width: 115px; height: 115px;">
  1556.         <button id="option6Button" style="width: 150px; height: 40px; background: rgb(40, 40, 40); border: none; border-radius: 10px; color: white; font-size: 18px; cursor: pointer;">Enable</button>
  1557.     </div>
  1558.  </div>
  1559.  <div style="display: flex; flex-direction: row; gap: 15px; margin-top : 15px;">
  1560.        <div style="display: flex; flex-direction: column; align-items: center; width: 185px; height: 185px; background: rgb(50, 50, 50); border: 2px solid rgb(60, 60, 60); border-radius: 10px;">
  1561.         <label>CROSSHAIR</label>
  1562.         <img src="https://piskel-imgstore-b.appspot.com/img/0204821c-aa6a-11ef-84c4-2725c76428b0.gif" style="width: 115px; height: 115px;">
  1563.         <button id="option7Button" style="width: 150px; height: 40px; background: rgb(40, 40, 40); border: none; border-radius: 10px; color: white; font-size: 18px; cursor: pointer;">Enable</button>
  1564.     </div>
  1565.            <div style="display: flex; flex-direction: column; align-items: center; width: 185px; height: 185px; background: rgb(50, 50, 50); border: 2px solid rgb(60, 60, 60); border-radius: 10px;">
  1566.         <label>CROSSHAIR</label>
  1567.         <img src="https://piskel-imgstore-b.appspot.com/img/42579dc0-99cd-11ef-808f-0b01a4cf3689.gif" style="width: 115px; height: 115px;">
  1568.         <button id="option8Button" style="width: 150px; height: 40px; background: rgb(40, 40, 40); border: none; border-radius: 10px; color: white; font-size: 18px; cursor: pointer;">Enable</button>
  1569.     </div>
  1570.                <div style="display: flex; flex-direction: column; align-items: center; width: 185px; height: 185px; background: rgb(50, 50, 50); border: 2px solid rgb(60, 60, 60); border-radius: 10px;">
  1571.         <label>CROSSHAIR</label>
  1572.         <img src="https://piskel-imgstore-b.appspot.com/img/e0a03de8-c2b3-11ef-95f7-c14fa4ed6efb.gif" style="width: 115px; height: 115px;">
  1573.         <button id="option9Button" style="width: 150px; height: 40px; background: rgb(40, 40, 40); border: none; border-radius: 10px; color: white; font-size: 18px; cursor: pointer;">Enable</button>
  1574.     </div>
  1575.     </div>
  1576. `;
  1577.     document.getElementById('cape0').addEventListener('click', function() {
  1578.         capesvalue = 'none';
  1579.         GM_setValue("capes", capesvalue);
  1580.     });
  1581.     document.getElementById('cape1').addEventListener('click', function() {
  1582.         capesvalue = 'super';
  1583.         GM_setValue("capes", capesvalue);
  1584.     });
  1585.     document.getElementById('cape2').addEventListener('click', function() {
  1586.         capesvalue = 'super_inverted';
  1587.         GM_setValue("capes", capesvalue);
  1588.     });
  1589.     document.getElementById('cape3').addEventListener('click', function() {
  1590.         capesvalue = 'youtuber';
  1591.         GM_setValue("capes", capesvalue);
  1592.     });
  1593.     document.getElementById('cape4').addEventListener('click', function() {
  1594.         capesvalue = 'deep_space';
  1595.         GM_setValue("capes", capesvalue);
  1596.     });
  1597.     document.getElementById('cape5').addEventListener('click', function() {
  1598.         capesvalue = 'cow_normal';
  1599.         GM_setValue("capes", capesvalue);
  1600.     });
  1601.     document.getElementById('cape6').addEventListener('click', function() {
  1602.         capesvalue = 'pig';
  1603.         GM_setValue("capes", capesvalue);
  1604.     });
  1605.     document.getElementById('cape7').addEventListener('click', function() {
  1606.         capesvalue = 'sheep';
  1607.         GM_setValue("capes", capesvalue);
  1608.     });
  1609.  
  1610.     document.getElementById('option1Button').addEventListener('click', function() {
  1611.         crosshairvalue = 'https://piskel-imgstore-b.appspot.com/img/7be1c5f3-9ad1-11ef-b170-45e28d82b1ad.gif';
  1612.         GM_setValue("crosshair", crosshairvalue);
  1613.     });
  1614.     document.getElementById('option2Button').addEventListener('click', function() {
  1615.         crosshairvalue = 'https://piskel-imgstore-b.appspot.com/img/18315826-1cd8-11ef-a2e5-bbb60d940ece.gif';
  1616.         GM_setValue("crosshair", crosshairvalue);
  1617.     });
  1618.     document.getElementById('option3Button').addEventListener('click', function() {
  1619.         crosshairvalue = 'https://piskel-imgstore-b.appspot.com/img/354b6bd7-1cd8-11ef-8822-bbb60d940ece.gif';
  1620.         GM_setValue("crosshair", crosshairvalue);
  1621.     });
  1622.     document.getElementById('option4Button').addEventListener('click', function() {
  1623.         crosshairvalue = 'https://piskel-imgstore-b.appspot.com/img/1904aeee-9ad2-11ef-b197-45e28d82b1ad.gif';
  1624.         GM_setValue("crosshair", crosshairvalue);
  1625.     });
  1626.     document.getElementById('option5Button').addEventListener('click', function() {
  1627.         crosshairvalue = 'https://piskel-imgstore-b.appspot.com/img/3a948891-4a8f-11ef-8140-5b4c5fd8c3dd.gif';
  1628.         GM_setValue("crosshair", crosshairvalue);
  1629.     });
  1630.     document.getElementById('option6Button').addEventListener('click', function() {
  1631.         crosshairvalue = 'https://piskel-imgstore-b.appspot.com/img/3f1093ca-4a8d-11ef-92cc-5b4c5fd8c3dd.gif';
  1632.         GM_setValue("crosshair", crosshairvalue);
  1633.     });
  1634.     document.getElementById('option7Button').addEventListener('click', function() {
  1635.         crosshairvalue = 'https://piskel-imgstore-b.appspot.com/img/588a83cc-aa68-11ef-869b-2725c76428b0.gif';
  1636.         GM_setValue("crosshair", crosshairvalue);
  1637.     });
  1638.     document.getElementById('option8Button').addEventListener('click', function() {
  1639.         crosshairvalue = 'https://piskel-imgstore-b.appspot.com/img/e5874b87-99cc-11ef-a284-0b01a4cf3689.gif';
  1640.         GM_setValue("crosshair", crosshairvalue);
  1641.     });
  1642.     document.getElementById('option9Button').addEventListener('click', function() {
  1643.         crosshairvalue = 'https://piskel-imgstore-b.appspot.com/img/643da997-c382-11ef-a652-398c3ca0dc0d.gif';
  1644.         GM_setValue("crosshair", crosshairvalue);
  1645.     });
  1646.     document.getElementById('crosshairSizeSlider').addEventListener('input', function() {
  1647.         CrossSize = parseInt(this.value);
  1648.         document.getElementById('sliderValue').textContent = this.value;
  1649.     })
  1650.     document.getElementById('colorPicker1').addEventListener('input', function() {
  1651.         colorPicker1Value = this.value;
  1652.         GM_setValue("colorPicker1", colorPicker1Value);
  1653.  
  1654.         document.querySelectorAll(".item").forEach(hotbar => {
  1655.             hotbar.style.backgroundColor = colorPicker1Value;
  1656.         });
  1657.     });
  1658.  
  1659.     document.getElementById('colorPicker2').addEventListener('input', function() {
  1660.         colorPicker2Value = this.value;
  1661.         GM_setValue("colorPicker2", colorPicker2Value);
  1662.  
  1663.         document.querySelectorAll(".item").forEach(hotbar => {
  1664.             hotbar.style.borderColor = colorPicker2Value;
  1665.         });
  1666.     });
  1667.     document.getElementById('UpdateButton').addEventListener('click', function() {
  1668.         window.open('https://greasyfork.org/en/scripts/489428-deep-space-client', '_blank');
  1669.     })
  1670.  
  1671.     let canvasWidth, canvasHeight, isResolutionVisible = false, resolutionSliderContainer;
  1672.     function init() {
  1673.         const canvas = document.getElementById('noa-canvas');
  1674.         if (canvas) {
  1675.             canvasWidth = canvas.width;
  1676.             canvasHeight = canvas.height;
  1677.             const resolutionSlider = document.getElementById('resolutionSlider');
  1678.             const resolutionValueLabel = document.getElementById('resolutionValueLabel');
  1679.  
  1680.             resolutionSlider.addEventListener('input', function () {
  1681.                 const resolutionValue = (+this.value).toFixed(2);
  1682.                 resolutionValueLabel.textContent = `Resolution: ${resolutionValue}x`;
  1683.                 canvas.width = canvasWidth * this.value;
  1684.                 canvas.height = canvasHeight * this.value;
  1685.             });
  1686.  
  1687.             const originalRequestPointerLock = Element.prototype.requestPointerLock;
  1688.             Element.prototype.requestPointerLock = function () {
  1689.                 if (!isResolutionVisible) originalRequestPointerLock.call(this);
  1690.             };
  1691.         }
  1692.     }
  1693.     const interval = setInterval(() => {
  1694.         if (document.getElementById('noa-canvas')) {
  1695.             clearInterval(interval);
  1696.             init();
  1697.         }
  1698.     }, 100);
  1699.  
  1700.     let toggleKey = 'ShiftRight';
  1701.  
  1702.     let boxVisible = false;
  1703.     let isSettingKey = false;
  1704.     document.addEventListener('keydown', function(event) {
  1705.         if (isSettingKey) {
  1706.             if (document.pointerLockElement) document.exitPointerLock();
  1707.             toggleKey = event.code;
  1708.             document.getElementById('customKey').value = toggleKey;
  1709.             isSettingKey = false;
  1710.         } else if (event.code === toggleKey) {
  1711.             boxVisible = !boxVisible;
  1712.             mainBox.style.display = boxVisible ? 'none' : 'none';
  1713.             mainMenu.style.display = boxVisible ? 'flex' : 'none';
  1714.             settingsModal.style.display = boxVisible ? 'none' : 'none';
  1715.             crosshairSettingsModal.style.display = boxVisible ? 'none' : 'none';
  1716.             toggleshiftSettingsModal.style.display = boxVisible ? 'none' : 'none';
  1717.             resolutionSettingsModal.style.display = boxVisible ? 'none' : 'none';
  1718.             hotbarSettingsModal.style.display = boxVisible ? 'none' : 'none';
  1719.             capeModal.style.display = boxVisible ? 'none' : 'none';
  1720.             mainHud.style.backgroundColor = 'transparent';
  1721.             mainHud.style.backdropFilter = 'blur(0px)';
  1722.  
  1723.             if (boxVisible && document.pointerLockElement) {
  1724.                 document.exitPointerLock();
  1725.             }
  1726.         }
  1727.     });
  1728.  
  1729.     document.getElementById('CommitChanges').addEventListener('click', function() {
  1730.         EditHud.style.display = 'none';
  1731.         mainMenu.style.display = 'flex';
  1732.         mainBox.style.display = 'block';
  1733.         mainHud.style.backgroundColor = 'transparent';
  1734.     });
  1735.     document.getElementById('closetoggleshiftSettings').addEventListener('click', function() {
  1736.         toggleshiftSettingsModal.style.display = 'none';
  1737.     });
  1738.     const customSprintKeyInput = document.getElementById('customSprintKey');
  1739.     customSprintKeyInput.addEventListener('keydown', (e) => {
  1740.         e.preventDefault();
  1741.         togglesprintKey = e.code;
  1742.         customSprintKeyInput.value = e.code;
  1743.     });
  1744.     document.getElementById('customSprintKey').addEventListener('click', function() {
  1745.         this.value = 'PRESS A KEY';
  1746.     });
  1747.     settingsButton.addEventListener('click', function() {
  1748.         settingsModal.style.display = 'block';
  1749.     });
  1750.  
  1751.     closeIcon.addEventListener('click', function() {
  1752.         mainBox.style.display = 'none';
  1753.     });
  1754.     document.getElementById('closeResolutionSettings').addEventListener('click', function() {
  1755.         resolutionSettingsModal.style.display = 'none';
  1756.     });
  1757.     document.getElementById('closeCapeSettings').addEventListener('click', function() {
  1758.         capeModal.style.display = 'none';
  1759.         mainMenu.style.display = 'flex';
  1760.         mainHud.style.backgroundColor = 'transparent';
  1761.         mainHud.style.backdropFilter = 'blur(0px)';
  1762.     });
  1763.     document.getElementById('customKey').addEventListener('click', function() {
  1764.         isSettingKey = true;
  1765.         this.value = 'PRESS A KEY';
  1766.     });
  1767.     document.getElementById('closeHotbarSettings').addEventListener('click', function() {
  1768.         hotbarSettingsModal.style.display = 'none';
  1769.     });
  1770.     document.getElementById('closeSettings').addEventListener('click', function() {
  1771.         settingsModal.style.display = 'none';
  1772.     });
  1773.  
  1774.     document.getElementById('closeCrosshairSettings').addEventListener('click', function() {
  1775.         crosshairSettingsModal.style.display = 'none';
  1776.     });
  1777.  
  1778. })();