MooMoo.io Keys+

Keys + mod moomoo.io Menu on \ Or /

// ==UserScript==
// @name         MooMoo.io Keys+
// @namespace    By a youtuber named gg gamer br
// @version      0.1
// @description  Keys + mod moomoo.io Menu on \ Or /
// @author       GG Gamer Br
// @match        *://*.moomoo.io/*
// @grant        none
// @run-at       document-end
// ==/UserScript==

setTimeout(() => {
    document.getElementById('ot-sdk-btn-floating').remove();
    document.getElementById('pre-content-container').remove()
}, 5000)

var counter = 0;
window.addKey = async function () {
  let key = document.getElementById('newKey').value;
  if (document.getElementById(key)) return;
  let html = `<div id="${counter}" style="display: flex; position: absolute;"><div id="${key.toLowerCase()}" class="keyDisplay" style="width 80px; pointer-events: all; top: 0; left: 0;">${key.toUpperCase()}</div></div>`
  await document.getElementById('controlPanel').insertAdjacentHTML('afterend', html)
  const thisDiv = document.getElementById(counter.toString());
  thisDiv.addEventListener('mousedown', function (e) {

    var prevX = e.clientX;
    var prevY = e.clientY;

    window.addEventListener('mousemove', mousemove);
    window.addEventListener('mouseup', mouseup);
    function mousemove(e) {
        let newX = prevX - e.clientX;
        let newY = prevY - e.clientY;


        const rect = thisDiv.getBoundingClientRect();

        thisDiv.style.left = rect.left - newX + 'px';
        thisDiv.style.top = rect.top - newY + 'px';

        prevX = e.clientX;
        prevY = e.clientY;
    }
    function mouseup() {
        window.removeEventListener('mousemove', mousemove);
        window.removeEventListener('mouseup', mouseup);
    }
});
  counter++;
}
window.removeKey = function () {
  let key = document.getElementById('newKey').value;
  if (!document.getElementById(key)) return;
  document.getElementById(key).remove();
}


let DivHTML = `
<div id="controlPanel">
   <span style="margin: 15px; font-size: 18px; padding: 5px; margin-top: 15px;">Toggle control pannel with...</span> <input id='toggleKey' type='text' value="\\" maxlength="1" style="width: 40px; height: 15px; background: none; border: 2px solid white; text-align: center; color: white;">
   </br>
   <input id="numsdisp" type="checkbox" name="nums" checked>
   <label for="nums">Display Numbers</label>
   </br>
   <input id="wasd" type="checkbox" name="wasd" checked>
   <label for="wasd">Display Movement Keys</label>
   </br>
   <input id="cpss" type="checkbox" name="cpss" checked>
   <label for="nums">Display CPS/Max CPS</label>
   </br>
   <input id="clickss" type="checkbox" name="clickss" checked>
   <label for="nums">Display Mouse Clicks</label>
   </br>
   <input id="newKey" maxlength="1" type="text" style="margin: 15px; color: white; background: none; border: 2px solid white; height: 20px; width: 40px; text-align: center;">
   &nbsp
   <button id="create" style="width: 100px; text-align: center; color: white; background: none; border: 2px solid white; height: 25px;" onclick="addKey()">Create New</button>
   &nbsp
   <button id="remove" style="width: 100px; text-align: center; color: white; background: none; border: 2px solid white; height: 25px;" onclick="removeKey()">Remove Key</button>
</div>
<div id="keys">
  <div class="keyDisplay" id="w">W</div>
  <div class="keyDisplay" id="a">A</div>
  <div class="keyDisplay" id="s">S</div>
  <div class="keyDisplay" id="d">D</div>
</div>
<div id="nums">
  <div class="keyDisplay" id="1">1</div>
  <div class="keyDisplay" id="2">2</div>
  <div class="keyDisplay" id="3">3</div>
  <div class="keyDisplay" id="4">4</div>
  <div class="keyDisplay" id="5">5</div>
  <div class="keyDisplay" id="6">6</div>
  <div class="keyDisplay" id="7">7</div>
  <div class="keyDisplay" id="8">8</div>
  <div class="keyDisplay" id="9">9</div>
</div>
<div id="cps">
  <div class="keyDisplay" id="Space" styles="margin-top: 40px;">________</div>
  &nbsp
  <div id="clicker">
    <div id="clickLeft"></div>
    <div id="clickRight"><div id="clickBottom"></div></div>
  </div>
</div>
<div id="cpsDisplay">
      <div id="cpsDivDisp" class="keyDisplay">CPS: 0</div>
      <div id="MaxCPS" class="keyDisplay">Max CPS: 0</div>
</div>
`

let styles = document.createTextNode(`
#controlPanel {
display: none;
color: white;
position: absolute;
width: 400px;
height: 275px;
background-color: rgba(0, 0, 0, 0.25);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 3px;
pointer-events: all;
}
#nums {
display: flex;
flex-wrap: wrap;
align-content: start;
width: 400px;
position: absolute;
z-index: 15;
left: 237.391px;
top: 7.58%;
pointer-events: all;
}
#keys {
display: flex;
position: absolute;
z-index: 15;
pointer-events: all;
}
#cps {
position: absolute;
display: flex;
z-index: 15;
pointer-events: all;
top: 8%;
}
#cpsDisplay {
position: absolute;
z-index: 15;
pointer-events: all;
top: 15%;
}
.keyDisplay {
margin: 10px;
padding: 2px;
border: 2px solid white;
color: white;
height: 45px;
min-width: 80px;
max-width: 200px;
text-align: center;
font-size: 25px;
top: 50%;
line-height: 45px;
}
.keyDisplay.active {
color: black;
background: white;
}
#clicker {
display: flex;
}
#clickLeft {
width: 25px;
height: 50px;
border-top-left-radius: 100px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border: 2px solid white;
margin-right: 10px;
}
#clickRight {
width: 25px;
height: 50px;
border-top-right-radius: 100px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border: 2px solid white;
}
#clickBottom {
margin-top: 60px;
margin-left: -40px;
width: 62px;
height: 35px;
border-top-radius: 5px;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
border: 2px solid white;
}
.active2 {
background: white;
}
`);
let css = document.createElement("style");
css.type = "text/css";
css.appendChild(styles);
document.body.appendChild(css);

document.getElementById("storeMenu").insertAdjacentHTML("beforebegin", DivHTML);

const cps = document.getElementById('cps');
const keys = document.getElementById('keys');
const cpsDisp = document.getElementById('cpsDisplay');
const nums = document.getElementById('nums');
const cvs = document.getElementById('gameCanvas');
const cpsDiv = document.getElementById('cpsDivDisp');
const maxCpsDiv = document.getElementById('MaxCPS');
const ctrlKey = document.getElementById('toggleKey');
const pannel = document.getElementById("controlPanel");
const numCheck = document.getElementById("numsdisp");
const wasd = document.getElementById("wasd");
const cpss = document.getElementById("cpss");
const clicks = document.getElementById("clicks");

var theCps = 0;
var maxCps = 0;
var keyDownLeft = false;
var keyDownRight = false;
var keyDownSpace = false;

function toggelPannel() {
  if (pannel.style.display == "" || pannel.style.display == "none") {
    pannel.style.display = "block";
  } else if (pannel.style.display == "block") {
    pannel.style.display = "none";
  }
}

document.addEventListener('keydown', function(e){
    let keyDiv;
  	let key = ctrlKey.value.toLowerCase();
    if (ctrlKey.value == "") key = '//'
  	if (e.key == key) toggelPannel();
    if (e.key == ' ') {
        keyDiv = document.getElementById("Space");
      if (!keyDownSpace) {
          theCps++
   			  setTimeout(function(){theCps--}, 1000);
          keyDownSpace = true;
        }
    } else {
        keyDiv = document.getElementById(e.key);
    }
    if (!keyDiv) return;
    keyDiv.classList.add('active');
});
document.addEventListener('keyup', function(e){
    let keyDiv;
    if (e.key == ' ') {
        keyDiv = document.getElementById("Space");
        keyDownSpace = false;
    } else {
        keyDiv = document.getElementById(e.key);
    }
    if (!keyDiv) return;
    keyDiv.classList.remove('active');
});

document.addEventListener('mousedown', function(e){
    let rightClick = false;
    if (e.button == 2) rightClick = true;
    if (!rightClick) {
        let click = document.getElementById('clickLeft');
        click.classList.add('active2');
      	if (!keyDownLeft) {
          theCps++
   			  setTimeout(function(){theCps--}, 1000);
          keyDownLeft = true;
        }
    } else {
        let click = document.getElementById('clickRight');
        click.classList.add('active2');
      if (!keyDownRight) {
          theCps++
   			  setTimeout(function(){theCps--}, 1000);
          keyDownRight = true;
        }
    }
})
document.addEventListener('mouseup', function(e){
    let rightClick = false;
    if (e.button == 2) rightClick = true;
    if (!rightClick) {
        let click = document.getElementById('clickLeft');
        click.classList.remove('active2');
        keyDownLeft = false;
    } else {
        let click = document.getElementById('clickRight');
        click.classList.remove('active2');
      keyDownRight = false;
    }
})
keys.addEventListener('mousedown', function (e) {

    let prevX = e.clientX;
    let prevY = e.clientY;

    window.addEventListener('mousemove', mousemove);
    window.addEventListener('mouseup', mouseup);
    function mousemove(e) {
        let newX = prevX - e.clientX;
        let newY = prevY - e.clientY;


        const rect = keys.getBoundingClientRect();

        keys.style.left = rect.left - newX + 'px';
        keys.style.top = rect.top - newY + 'px';

        prevX = e.clientX;
        prevY = e.clientY;
    }
    function mouseup() {
        window.removeEventListener('mousemove', mousemove);
        window.removeEventListener('mouseup', mouseup);
    }
});
cps.addEventListener('mousedown', function (e) {

    let prevX = e.clientX;
    let prevY = e.clientY;

    window.addEventListener('mousemove', mousemove);
    window.addEventListener('mouseup', mouseup);
    function mousemove(e) {
        let newX = prevX - e.clientX;
        let newY = prevY - e.clientY;


        const rect = cps.getBoundingClientRect();

        cps.style.left = rect.left - newX + 'px';
        cps.style.top = rect.top - newY + 'px';

        prevX = e.clientX;
        prevY = e.clientY;
    }
    function mouseup() {
        window.removeEventListener('mousemove', mousemove);
        window.removeEventListener('mouseup', mouseup);
    }
});
cpsDisp.addEventListener('mousedown', function (e) {

    let prevX = e.clientX;
    let prevY = e.clientY;

    window.addEventListener('mousemove', mousemove);
    window.addEventListener('mouseup', mouseup);
    function mousemove(e) {
        let newX = prevX - e.clientX;
        let newY = prevY - e.clientY;


        const rect = cpsDisp.getBoundingClientRect();

        cpsDisp.style.left = rect.left - newX + 'px';
        cpsDisp.style.top = rect.top - newY + 'px';

        prevX = e.clientX;
        prevY = e.clientY;
    }
    function mouseup() {
        window.removeEventListener('mousemove', mousemove);
        window.removeEventListener('mouseup', mouseup);
    }
});
nums.addEventListener('mousedown', function (e) {

    let prevX = e.clientX;
    let prevY = e.clientY;

    window.addEventListener('mousemove', mousemove);
    window.addEventListener('mouseup', mouseup);
    function mousemove(e) {
        let newX = prevX - e.clientX;
        let newY = prevY - e.clientY;


        const rect = nums.getBoundingClientRect();

        nums.style.left = rect.left - newX + 'px';
        nums.style.top = rect.top - newY + 'px';

        prevX = e.clientX;
        prevY = e.clientY;
    }
    function mouseup() {
        window.removeEventListener('mousemove', mousemove);
        window.removeEventListener('mouseup', mouseup);
    }
});

setInterval(() => {
    if (theCps > maxCps) maxCps = theCps;
    maxCpsDiv.innerText = `Max CPS: ${maxCps}`;
    cpsDiv.innerText = `CPS: ${theCps}`
    if (!numCheck.checked && nums.style.display == "flex") {
      nums.style.display = "none"
    } else if (numCheck.checked && nums.style.display != "flex") {
      nums.style.display = "flex"
    }
  	if (!wasd.checked && keys.style.display == "flex") {
      keys.style.display = "none"
    } else if (wasd.checked && keys.style.display != "flex") {
      keys.style.display = "flex"
    }
  	if (!cpss.checked && cpsDisp.style.display == "block") {
      cpsDisp.style.display = "none"
    } else if (cpss.checked && cpsDisp.style.display != "block") {
      cpsDisp.style.display = "block"
    }
  	if (!clickss.checked && cps.style.display == "flex") {
      cps.style.display = "none"
    } else if (clickss.checked && cps.style.display != "flex") {
      cps.style.display = "flex"
    }
}, 0)