Greasy Fork is available in English.

CPS, keyboard panel and click panel

adds part of the keyboard to your screen. And your CPS

You will need to install an extension such as Tampermonkey, Greasemonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install an extension such as Tampermonkey or Violentmonkey to install this script.

You will need to install an extension such as Tampermonkey or Userscripts to install this script.

You will need to install an extension such as Tampermonkey to install this script.

You will need to install a user script manager extension to install this script.

(I already have a user script manager, let me install it!)

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install an extension such as Stylus to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

You will need to install a user style manager extension to install this style.

(I already have a user style manager, let me install it!)

// ==UserScript==
// @name       CPS, keyboard panel and click panel
// @namespace  https://greasyfork.org/es/users/805514
// @version    1.0
// @description  adds part of the keyboard to your screen. And your CPS
// @author       Zyenth
// @match        *://sandbox.moomoo.io/*
// @match        *://dev.moomoo.io/*
// @match        *://moomoo.io/*
// @match        *://*.moomoo.io/*
// @grant        none
// ==/UserScript==
/* jshint esversion:8 */
!(function () {
   var e = 0,
      t = 0;

   function i() {
      var s = Date.now(),
         d = s - e;
      d < 700 ? ++t : ((FPS = Math.round(t / (d / 1e3))), (t = 0), (e = s)),
         requestAnimationFrame(i);
   }
   (e = Date.now()), requestAnimationFrame(i);
})(),
setInterval(() => {
   var e = new Date();
   (Month = e.getUTCMonth() + 1),
   (Day = e.getUTCDate()),
   (Year = e.getUTCFullYear()),
   (fpsdiv.innerHTML =
      "FPS: " + FPS + "<br>Clock: " + KFC + ":" + MLC + ":" + RLC);
}, 0);
let fpsdiv = document.createElement("div");
(fpsdiv.id = "test"),
document.body.prepend(fpsdiv),
   (document.getElementById("test").style.color = "red"),
   (document.getElementById("test").style.fontSize = "20px"),
   (document.getElementById("test").style.position = "absolute"),
   (document.getElementById("test").style.textAlign = "center"),
   (document.getElementById("test").style.width = "auto"),
   (document.getElementById("test").style.height = "auto"),
   (document.getElementById("test").style.backgroundColor =
      "rgba(0, 0, 0, 0.4)"),
   (document.getElementById("test").style.padding = "2px"),
   setTimeout(() => {
      document.getElementById("ot-sdk-btn-floating").remove(),
         document.getElementById("pre-content-container").remove();
   }, 5e3);
var FPS,
   Day,
   Month,
   Year,
   counter = 0;
(window.addKey = async function () {
   let e = document.getElementById("newKey").value;
   if (document.getElementById(e)) return;
   await document.getElementById("controlPanel").insertAdjacentHTML(
      "afterend",
      `<div id="${counter}" style="display: flex; position: absolute;" ><div id="${e.toLowerCase()}" class="keyDisplay" style="width: 80px; pointer-events: all; top: 0; left: 0;" >${e.toUpperCase()}</div></div>`
   );
   let t = document.getElementById(counter.toString());
   t.addEventListener("mousedown", function (e) {
         var i = e.clientX,
            s = e.clientY;

         function d(e) {
            let d = i - e.clientX,
               l = s - e.clientY,
               n = t.getBoundingClientRect();
            (t.style.left = n.left - d + "px"),
            (t.style.top = n.top - l + "px"),
            (i = e.clientX),
            (s = e.clientY);
         }

         function l() {
            window.removeEventListener("mousemove", d),
               window.removeEventListener("mouseup", l);
         }
         window.addEventListener("mousemove", d),
            window.addEventListener("mouseup", l);
      }),
      counter++;
}),
(window.removeKey = function () {
   let e = document.getElementById("newKey").value;
   document.getElementById(e) && document.getElementById(e).remove();
});
let DivHTML = ` <div id="controlPanel"><span style="margin: 15px; font-size: 18px; padding: 5px; margin-top: 15px;">Toggle control panel 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="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;"><button id="create" style="width: 100px; text-align: center; color: white; background: none; border: 2px solid white; height: 25px;" onclick="addKey()">Create New</button><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="numberRow">
    <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 class="keyDisplay" id="0">0</div>
</div>
<div id="keys">
    <div class="keyDisplay" id="q">Q</div>
    <div class="keyDisplay" id="w">W</div>
    <div class="keyDisplay" id="e">E</div>
    <div class="keyDisplay" id="r">R</div>
    <div class="keyDisplay" id="t">T</div>
    <div class="keyDisplay" id="y">Y</div>
    <div class="keyDisplay" id="u">U</div>
    <div class="keyDisplay" id="i">I</div>
    <div class="keyDisplay" id="o">O</div>
    <div class="keyDisplay" id="p">P</div>
</div>
<div id="secondRow">
    <div class="keyDisplay" id="a">A</div>
    <div class="keyDisplay" id="s">S</div>
    <div class="keyDisplay" id="d">D</div>
    <div class="keyDisplay" id="f">F</div>
    <div class="keyDisplay" id="g">G</div>
    <div class="keyDisplay" id="h">H</div>
    <div class="keyDisplay" id="j">J</div>
    <div class="keyDisplay" id="k">K</div>
    <div class="keyDisplay" id="l">L</div>
</div>
<div id="thirdRow">
    <div class="keyDisplay" id="z">Z</div>
    <div class="keyDisplay" id="x">X</div>
    <div class="keyDisplay" id="c">C</div>
    <div class="keyDisplay" id="v">V</div>
    <div class="keyDisplay" id="b">B</div>
    <div class="keyDisplay" id="n">N</div>
    <div class="keyDisplay" id="m">M</div>
</div>
<div id="cps">
    <div class="keyDisplay" id="Space">_____</div>
    <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>`,
   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;
    }

    #numberRow {
        display: flex;
        flex-wrap: nowrap;
        align-content: start;
        width: 400px;
        position: absolute;
        z-index: 15;
        left: 10px;
        top: 10px;
        pointer-events: all;
    }

    #keys {
        display: flex;
        flex-wrap: nowrap;
        align-content: start;
        width: 400px;
        position: absolute;
        z-index: 15;
        left: 10px;
        top: 60px;
        pointer-events: all;
    }

    #secondRow {
        display: flex;
        flex-wrap: nowrap;
        align-content: start;
        width: 400px;
        position: absolute;
        z-index: 15;
        left: 10px;
        top: 110px;
        pointer-events: all;
    }

    #thirdRow {
        display: flex;
        flex-wrap: nowrap;
        align-content: start;
        width: 400px;
        position: absolute;
        z-index: 15;
        left: 35px;
        top: 160px;
        pointer-events: all;
    }

    #cps {
        position: absolute;
        display: flex;
        z-index: 15;
        pointer-events: all;
        top: 210px;
    }

    #cpsDisplay {
        position: absolute;
        z-index: 15;
        pointer-events: all;
        top: 40%;
    }

    .keyDisplay {
        margin: 5px;
        padding: 2px;
        border: 2px solid white;
        color: white;
        height: 40px;
        min-width: 50px;
        max-width: 100px;
        text-align: center;
        font-size: 17px;
        top: 50%;
        line-height: 40px;
    }

    .keyDisplay.active {
        color: black;
        background: white;
    }

    #clicker {
        display: flex;
    }

    #clickLeft {
        width: 20px;
        height: 40px;
        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: 20px;
        height: 40px;
        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: 48px;
        margin-left: -25px;
        width: 40px;
        height: 20px;
        border-top-radius: 5px;
        border-bottom-left-radius: 100px;
        border-bottom-right-radius: 100px;
        border: 2px solid white;
    }

    .active2 {
        background: white;
    }

    `),
   css = document.createElement("style");
(css.type = "text/css"),
css.appendChild(styles),
   document.body.appendChild(css),
   document
   .getElementById("storeMenu")
   .insertAdjacentHTML("beforebegin", DivHTML);
const keys = document.getElementById("keys"),
   secondRow = document.getElementById("secondRow"),
   thirdRow = document.getElementById("thirdRow"),
   numberRow = document.getElementById("numberRow"),
   cps = document.getElementById("cps"),
   cpsDisp = document.getElementById("cpsDisplay"),
   cpsDiv = document.getElementById("cpsDivDisp"),
   maxCpsDiv = document.getElementById("MaxCPS"),
   wasd = document.getElementById("wasd"),
   cpss = document.getElementById("cpss"),
   clicks = document.getElementById("clickss");
var theCps = 0,
   maxCps = 0,
   keyDownLeft = false,
   keyDownRight = false,
   keyDownSpace = false;

function displayControlPanel() {
   let e = document.getElementById("controlPanel");
   "none" === e.style.display ?
      (e.style.display = "block") :
      (e.style.display = "none");
}
document.addEventListener("keydown", function (e) {
      let t;
      " " === e.key ?
         ((t = document.getElementById("Space")),
            keyDownSpace ||
            (theCps++,
               setTimeout(function () {
                  theCps--;
               }, 1e3),
               (keyDownSpace = true))) :
         (t = document.getElementById(e.key.toLowerCase())),
         t && t.classList.add("active");
   }),
   document.addEventListener("keyup", function (e) {
      let t;
      " " === e.key ?
         ((t = document.getElementById("Space")), (keyDownSpace = false)) :
         (t = document.getElementById(e.key.toLowerCase())),
         t && t.classList.remove("active");
   }),
   document.addEventListener("mousedown", function (e) {
      let t = false;
      (2 === e.button && (t = true), t) ?
      (document.getElementById("clickRight").classList.add("active2"),
         keyDownRight ||
         (theCps++,
            setTimeout(function () {
               theCps--;
            }, 1e3),
            (keyDownRight = true))) :
      (document.getElementById("clickLeft").classList.add("active2"),
         keyDownLeft ||
         (theCps++,
            setTimeout(function () {
               theCps--;
            }, 1e3),
            (keyDownLeft = true)));
   }),
   document.addEventListener("mouseup", function (e) {
      let t = false;
      (2 === e.button && (t = true), t) ?
      (document.getElementById("clickRight").classList.remove("active2"),
         (keyDownRight = false)) :
      (document.getElementById("clickLeft").classList.remove("active2"),
         (keyDownLeft = false));
   }),
   setInterval(function () {
      (cpsDiv.innerHTML = "CPS: " + theCps),
      (maxCpsDiv.innerHTML = "Max CPS: " + maxCps),
      theCps > maxCps && (maxCps = theCps);
   }, 100),
   document
   .getElementById("toggleKey")
   .addEventListener("keydown", function (e) {
      "\\" === e.key && displayControlPanel();
   }),
   document.getElementById("toggleKey").addEventListener("keyup", function (e) {
      "\\" === e.key && displayControlPanel();
   }),
   false === wasd.checked &&
   ((keys.style.display = "none"),
      (secondRow.style.top = "10px"),
      (thirdRow.style.top = "60px"),
      (numberRow.style.top = "110px")),
   wasd.addEventListener("change", function () {
      false === wasd.checked ?
         ((keys.style.display = "none"),
            (secondRow.style.top = "10px"),
            (thirdRow.style.top = "60px"),
            (numberRow.style.top = "110px")) :
         ((keys.style.display = "flex"),
            (secondRow.style.top = "60px"),
            (thirdRow.style.top = "110px"),
            (numberRow.style.top = "10px"));
   }),
   false === cpss.checked &&
   ((cps.style.display = "none"), (cpsDisp.style.top = "15%")),
   cpss.addEventListener("change", function () {
      false === cpss.checked ?
         ((cps.style.display = "none"), (cpsDisp.style.top = "15%")) :
         ((cps.style.display = "flex"), (cpsDisp.style.top = "40%"));
   }),
   false === clickss.checked &&
   (document.getElementById("clicker").style.display = "none"),
   clickss.addEventListener("change", function () {
      false === clickss.checked ?
         (document.getElementById("clicker").style.display = "none") :
         (document.getElementById("clicker").style.display = "flex");
   });