☰

Sploop.io Advanced Keystrokes.

Customize key/mouse bindings, track CPS, view mini map, and manage X-buttons for better gameplay.

  1. // ==UserScript==
  2. // @name         Sploop.io Advanced Keystrokes.
  3. // @version      3
  4. // @description  Customize key/mouse bindings, track CPS, view mini map, and manage X-buttons for better gameplay.
  5. // @author       DETIX
  6. // @match        *://sploop.io/*
  7. // @icon         https://sploop.io/img/ui/favicon.png
  8. // @license      MIT
  9. // @namespace https://greatest.deepsurf.us/users/1311498
  10. // ==/UserScript==
  11.  
  12. const DATA = {
  13.     CPS: 0,
  14.     MAXCPS: 0,
  15.     //if you don't have XButtons, make this false.
  16.     ShowXBUTTONS: true //<---------- this.
  17. };
  18.  
  19. let SHOP, FOOD, SPIKE, TRAP;
  20.  
  21. const OBJECT = {
  22.     KEYS: {
  23.         PRIMARY: { KEY: "Digit1", KEY2: "Numpad1", PRESSED: false },
  24.         SECONDARY: { KEY: "Digit2", KEY2: "Numpad2", PRESSED: false },
  25.         FOOD: { KEY: "KeyQ", KEY2: "Digit3", PRESSED: false },
  26.         SPIKE: { KEY: "KeyR", KEY2: "Digit5", PRESSED: false },
  27.         TRAP: { KEY: "KeyF", KEY2: "Digit7", PRESSED: false },
  28.         SPACE: { KEY: "Space", PRESSED: false },
  29.         LOCK: { KEY: "KeyX", PRESSED: false },
  30.         AUTOHIT: { KEY: "KeyE", PRESSED: false },
  31.         SHOP: { KEY: "KeyN", PRESSED: false }
  32.     },
  33.     BUTTONS: {
  34.         LEFT: { BUTTON: 0, PRESSED: false },
  35.         MIDDLE: { BUTTON: 1, PRESSED: false },
  36.         RIGHT: { BUTTON: 2, PRESSED: false },
  37.         XBUTTON1: { BUTTON: 3, PRESSED: false },
  38.         XBUTTON2: { BUTTON: 4, PRESSED: false }
  39.     },
  40.     CURSOR: {
  41.         x: 0,
  42.         y: 0
  43.     }
  44. };
  45.  
  46. const isInGame = () => {
  47.     const homepage = document.getElementById("homepage");
  48.     return homepage && homepage.style.display !== "flex";
  49. };
  50.  
  51. const isAVAILABLE = () => {
  52.     if (!isInGame()) return false;
  53.     const chatWrapper = document.getElementById("chat-wrapper");
  54.     const clanMenu = document.getElementById("clan-menu");
  55.     return chatWrapper && clanMenu && chatWrapper.style.display !== "block" && clanMenu.style.display !== "block";
  56. };
  57.  
  58. const UPDATE = {
  59.     KEYS: {
  60.         DOWN(e) {
  61.             if (e.code === OBJECT.KEYS.PRIMARY.KEY || e.code === OBJECT.KEYS.PRIMARY.KEY2) OBJECT.KEYS.PRIMARY.PRESSED = true;
  62.             if (e.code === OBJECT.KEYS.SECONDARY.KEY || e.code === OBJECT.KEYS.SECONDARY.KEY2) OBJECT.KEYS.SECONDARY.PRESSED = true;
  63.             if (e.code === OBJECT.KEYS.FOOD.KEY || e.code === OBJECT.KEYS.FOOD.KEY2) OBJECT.KEYS.FOOD.PRESSED = true;
  64.             if (e.code === OBJECT.KEYS.SPIKE.KEY || e.code === OBJECT.KEYS.SPIKE.KEY2) OBJECT.KEYS.SPIKE.PRESSED = true;
  65.             if (e.code === OBJECT.KEYS.TRAP.KEY || e.code === OBJECT.KEYS.TRAP.KEY2) OBJECT.KEYS.TRAP.PRESSED = true;
  66.             if (e.code === OBJECT.KEYS.SPACE.KEY && !e.repeat) {
  67.                 OBJECT.KEYS.SPACE.PRESSED = true;
  68.                 UPDATE.CPS();
  69.             }
  70.  
  71.             if (e.code === OBJECT.KEYS.SHOP.KEY && isAVAILABLE()) OBJECT.KEYS.SHOP.PRESSED = true;
  72.  
  73.             if (e.code === OBJECT.KEYS.LOCK.KEY && isAVAILABLE() && !e.repeat) OBJECT.KEYS.LOCK.PRESSED = !OBJECT.KEYS.LOCK.PRESSED;
  74.  
  75.             if (e.code === OBJECT.KEYS.AUTOHIT.KEY && isAVAILABLE() && !e.repeat) OBJECT.KEYS.AUTOHIT.PRESSED = !OBJECT.KEYS.AUTOHIT.PRESSED;
  76.  
  77.             const play = document.getElementById("play");
  78.             play.onclick = () =>{
  79.                 OBJECT.KEYS.AUTOHIT.PRESSED = false;
  80.             }
  81.         },
  82.         UP(e) {
  83.             if (e.code === OBJECT.KEYS.PRIMARY.KEY || e.code === OBJECT.KEYS.PRIMARY.KEY2) OBJECT.KEYS.PRIMARY.PRESSED = false;
  84.             if (e.code === OBJECT.KEYS.SECONDARY.KEY || e.code === OBJECT.KEYS.SECONDARY.KEY2) OBJECT.KEYS.SECONDARY.PRESSED = false;
  85.             if (e.code === OBJECT.KEYS.FOOD.KEY || e.code === OBJECT.KEYS.FOOD.KEY2) OBJECT.KEYS.FOOD.PRESSED = false;
  86.             if (e.code === OBJECT.KEYS.SPIKE.KEY || e.code === OBJECT.KEYS.SPIKE.KEY2) OBJECT.KEYS.SPIKE.PRESSED = false;
  87.             if (e.code === OBJECT.KEYS.TRAP.KEY || e.code === OBJECT.KEYS.TRAP.KEY2) OBJECT.KEYS.TRAP.PRESSED = false;
  88.             if (e.code === OBJECT.KEYS.SPACE.KEY) OBJECT.KEYS.SPACE.PRESSED = false;
  89.             if (e.code === OBJECT.KEYS.SHOP.KEY) OBJECT.KEYS.SHOP.PRESSED = false;
  90.         }
  91.     },
  92.     BUTTONS: {
  93.         DOWN(e) {
  94.             if (e.button === OBJECT.BUTTONS.LEFT.BUTTON) OBJECT.BUTTONS.LEFT.PRESSED = true;
  95.             if (e.button === OBJECT.BUTTONS.MIDDLE.BUTTON) OBJECT.BUTTONS.MIDDLE.PRESSED = true;
  96.             if (e.button === OBJECT.BUTTONS.RIGHT.BUTTON) OBJECT.BUTTONS.RIGHT.PRESSED = true;
  97.             if (e.button === OBJECT.BUTTONS.XBUTTON1.BUTTON) OBJECT.BUTTONS.XBUTTON1.PRESSED = true;
  98.             if (e.button === OBJECT.BUTTONS.XBUTTON2.BUTTON) OBJECT.BUTTONS.XBUTTON2.PRESSED = true;
  99.             UPDATE.CPS();
  100.         },
  101.         UP(e) {
  102.             if (e.button === OBJECT.BUTTONS.LEFT.BUTTON) OBJECT.BUTTONS.LEFT.PRESSED = false;
  103.             if (e.button === OBJECT.BUTTONS.MIDDLE.BUTTON) OBJECT.BUTTONS.MIDDLE.PRESSED = false;
  104.             if (e.button === OBJECT.BUTTONS.RIGHT.BUTTON) OBJECT.BUTTONS.RIGHT.PRESSED = false;
  105.             if (e.button === OBJECT.BUTTONS.XBUTTON1.BUTTON) OBJECT.BUTTONS.XBUTTON1.PRESSED = false;
  106.             if (e.button === OBJECT.BUTTONS.XBUTTON2.BUTTON) OBJECT.BUTTONS.XBUTTON2.PRESSED = false;
  107.         }
  108.     },
  109.     CPS() {
  110.         DATA.CPS++;
  111.         if (DATA.CPS > DATA.MAXCPS) DATA.MAXCPS = DATA.CPS;
  112.         setTimeout(() => DATA.CPS--, 1000);
  113.     },
  114.     VISUALS() {
  115.         const COLOR = "#D0D0D0";
  116.         document.getElementById("primary").style.backgroundColor = OBJECT.KEYS.PRIMARY.PRESSED ? COLOR : "";
  117.         document.getElementById("secondary").style.backgroundColor = OBJECT.KEYS.SECONDARY.PRESSED ? COLOR : "";
  118.         document.getElementById("food").style.backgroundColor = OBJECT.KEYS.FOOD.PRESSED ? COLOR : "";
  119.         document.getElementById("spike").style.backgroundColor = OBJECT.KEYS.SPIKE.PRESSED ? COLOR : "";
  120.         document.getElementById("trap").style.backgroundColor = OBJECT.KEYS.TRAP.PRESSED ? COLOR : "";
  121.         document.getElementById("autohit").style.backgroundColor = OBJECT.KEYS.AUTOHIT.PRESSED ? COLOR : "";
  122.         document.getElementById("lockdir").style.backgroundColor = OBJECT.KEYS.LOCK.PRESSED ? COLOR : "";
  123.         document.getElementById("shop_").style.backgroundColor = OBJECT.KEYS.SHOP.PRESSED ? COLOR : "";
  124.         document.getElementById("spacebar").style.backgroundColor = OBJECT.KEYS.SPACE.PRESSED ? COLOR : "";
  125.         document.getElementById("left-click").style.backgroundColor = OBJECT.BUTTONS.LEFT.PRESSED ? COLOR : "";
  126.         document.getElementById("right-click").style.backgroundColor = OBJECT.BUTTONS.RIGHT.PRESSED ? COLOR : "";
  127.         if (DATA.ShowXBUTTONS) {
  128.             document.getElementById("xbutton1").style.backgroundColor = OBJECT.BUTTONS.XBUTTON1.PRESSED ? COLOR : "";
  129.             document.getElementById("xbutton2").style.backgroundColor = OBJECT.BUTTONS.XBUTTON2.PRESSED ? COLOR : "";
  130.         } else {
  131.             const X1 = document.getElementById("xbutton1");
  132.             const X2 = document.getElementById("xbutton2");
  133.             if (X1) X1.style.display = "none";
  134.             if (X2) X2.style.display = "none";
  135.         }
  136.  
  137.         document.getElementById("cps").textContent = `CPS: ${DATA.CPS}`;
  138.         document.getElementById("maxcps").textContent = `MCPS: ${DATA.MAXCPS}`;
  139.         requestAnimationFrame(UPDATE.VISUALS);
  140.     },
  141.     CURSOR(e) {
  142.         const canvas = document.querySelector("canvas");
  143.         const map = document.getElementById("cursormap");
  144.         const cursorDot = document.getElementById("cursorDot");
  145.         const hatMenu = document.getElementById("hat-menu");
  146.  
  147.         if (!canvas || !map || !cursorDot) return;
  148.  
  149.         const { clientX, clientY } = e;
  150.         const canvasRect = canvas.getBoundingClientRect();
  151.         const MAP_WIDTH = map.clientWidth;
  152.         const MAP_HEIGHT = map.clientHeight;
  153.  
  154.         const InCANVAS = (
  155.             clientX >= canvasRect.left &&
  156.             clientX <= canvasRect.right &&
  157.             clientY >= canvasRect.top &&
  158.             clientY <= canvasRect.bottom
  159.         );
  160.  
  161.         if (InCANVAS) {
  162.             const CURSOR_X = (clientX - canvasRect.left) / canvasRect.width;
  163.             const CURSOR_Y = (clientY - canvasRect.top) / canvasRect.height;
  164.  
  165.             OBJECT.CURSOR.x = CURSOR_X;
  166.             OBJECT.CURSOR.y = CURSOR_Y;
  167.  
  168.             cursorDot.style.left = `${CURSOR_X * MAP_WIDTH - 3}px`;
  169.             cursorDot.style.top = `${CURSOR_Y * MAP_HEIGHT - 3}px`;
  170.             cursorDot.style.display = "block";
  171.         } else {
  172.             cursorDot.style.display = "none";
  173.         }
  174.  
  175.         if (hatMenu) {
  176.             const hatRect = hatMenu.getBoundingClientRect();
  177.             const overHatMenu = (
  178.                 clientX >= hatRect.left &&
  179.                 clientX <= hatRect.right &&
  180.                 clientY >= hatRect.top &&
  181.                 clientY <= hatRect.bottom
  182.             );
  183.  
  184.             cursorDot.style.backgroundColor = overHatMenu ? "red" : "lime";
  185.         }
  186.  
  187.     },
  188.     KEYBINDS() {
  189.         SHOP = document.getElementById('for-shop')?.textContent || "KeyN";
  190.         FOOD = document.getElementById('for-food')?.textContent || "KeyQ";
  191.         SPIKE = document.getElementById('for-spike')?.textContent || "KeyR";
  192.         TRAP = document.getElementById('for-trap')?.textContent || "KeyF";
  193.         OBJECT.KEYS.SHOP.KEY = SHOP;
  194.         OBJECT.KEYS.FOOD.KEY = FOOD;
  195.         OBJECT.KEYS.SPIKE.KEY = SPIKE;
  196.         OBJECT.KEYS.TRAP.KEY = TRAP;
  197.     },
  198.     SUBMIT() {
  199.         UPDATE.KEYBINDS();
  200.         setInterval(UPDATE.KEYBINDS, 100);
  201.     }
  202. };
  203.  
  204. const MENU = () => {
  205.     const menuHTML = `
  206.     <div id="menu">
  207.     <div class="menurow">
  208.     <div class="menuitem" id="primary">Primary</div>
  209.     <div class="menuitem" id="secondary">Secondary</div>
  210.     </div>
  211.     <div class="menurow">
  212.     <div class="menuitem" id="food">Food</div>
  213.     <div class="menuitem" id="spike">Spike</div>
  214.     <div class="menuitem" id="trap">Trap</div>
  215.     </div>
  216.     <div class="menurow">
  217.     <div class="menuitem" id="autohit">Auto Hit</div>
  218.     <div class="menuitem" id="shop_">Shop</div>
  219.     <div class="menuitem" id="lockdir">Lock Dir</div>
  220.     </div>
  221.     <div class="menurow">
  222.     <div class="menuitem mouse-button" id="left-click">LEFT</div>
  223.     <div class="menuitem mouse-button" id="right-click">RIGHT</div>
  224.     </div>
  225.     <div class="menurow">
  226.     <div class="menuitem mouse-button" id="xbutton1">XBUTTON 1</div>
  227.     <div class="menuitem mouse-button" id="xbutton2">XBUTTON 2</div>
  228.     </div>
  229.     <div class="menurow">
  230.     <div class="menuitem spacebar" id="spacebar">Spacebar</div>
  231.     </div>
  232.     <div class="menurow">
  233.     <div class="menuitem cps" id="cps">CPS: 0</div>
  234.     <div class="menuitem maxcps" id="maxcps">MCPS: 0</div>
  235.     </div>
  236.     <div id="cursormap">
  237.     <div id="cursorDot"></div>
  238.     </div>
  239.     </div>
  240.     `;
  241.  
  242.     const menuStyle =`
  243.     #menu {
  244.     position: fixed;
  245.     top: 20px;
  246.     left: 20px;
  247.     color: #fff;
  248.     padding: 10px 15px;
  249.     border-radius: 8px;
  250.     z-index: 1000;
  251.     font-family: Arial, sans-serif;
  252.     font-size: 14px;
  253.     pointer-events: none;
  254.     width: 220px;
  255.     }
  256.     .menurow {
  257.     display: flex;
  258.     justify-content: space-between;
  259.     margin-bottom: 8px;
  260.     }
  261.     .menuitem {
  262.     flex: 1;
  263.     text-align: center;
  264.     padding: 8px;
  265.     background-color: rgba(255, 255, 255, 0.05); /* lighter transparent background */
  266.     border-radius: 5px;
  267.     margin: 0 4px;
  268.     }
  269.     .spacebar {
  270.     width: 100%;
  271.     background-color: rgba(255, 255, 255, 0.05);
  272.     }
  273.     .cps, .maxcps {
  274.     width: 50%;
  275.     margin: 0 4px;
  276.     }
  277.     .mouse-button {
  278.     width: 48%;
  279.     margin: 0 4px;
  280.     }
  281.     #cursormap {
  282.     margin: 10px auto 0 auto;
  283.     width: 180px;
  284.     height: 180px;
  285.     border: 2px solid rgba(255, 255, 255, 0.3);
  286.     background-color: rgba(255, 255, 255, 0.03);
  287.     border-radius: 8px;
  288.     position: relative;
  289.     pointer-events: none;
  290.     }
  291.     #cursorDot {
  292.     position: absolute;
  293.     width: 8px;
  294.     height: 8px;
  295.     background-color: lime;
  296.     border-radius: 50%;
  297.     display: none;
  298.     pointer-events: none;
  299.     transform: translate(-50%, -50%);
  300.     }`;
  301.  
  302.     document.body.insertAdjacentHTML('beforeend', menuHTML);
  303.     const style = document.createElement('style');
  304.     style.textContent = menuStyle;
  305.     document.head.appendChild(style);
  306.     UPDATE.VISUALS();
  307.     UPDATE.SUBMIT();
  308. };
  309.  
  310. document.addEventListener("keydown", UPDATE.KEYS.DOWN);
  311. document.addEventListener("keyup", UPDATE.KEYS.UP);
  312. document.addEventListener("mousedown", UPDATE.BUTTONS.DOWN);
  313. document.addEventListener("mouseup", UPDATE.BUTTONS.UP);
  314. document.addEventListener("mousemove", UPDATE.CURSOR);
  315.  
  316. MENU();