☰

CPS & Clicks Panel

Adds a part of the keyboard to your screen. And your CPS

  1. // ==UserScript==
  2. // @name       CPS & Clicks Panel
  3. // @namespace    -
  4. // @version    1.0
  5. // @description  Adds a part of the keyboard to your screen. And your CPS
  6. // @author       not me
  7. // @match        *://sandbox.moomoo.io/*
  8. // @match        *://dev.moomoo.io/*
  9. // @match        *://moomoo.io/*
  10. // @match        *://*.moomoo.io/*
  11. // @grant        none
  12. // @require https://greasyfork.org/scripts/368273-msgpack/code/msgpack.js?version=598723
  13. // @require http://code.jquery.com/jquery-3.3.1.min.js
  14. // @require https://code.jquery.com/ui/1.12.0/jquery-ui.min.js
  15. // @require https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.js
  16.  
  17. // ==/UserScript==
  18. var FPS;
  19. (function() {
  20.     var UPDATE_DELAY = 700;
  21.  
  22.     var lastUpdate = 0;
  23.     var frames = 0;
  24.  
  25.     function updateCounter() {
  26.         var now = Date.now();
  27.         var elapsed = now - lastUpdate;
  28.         if (elapsed < UPDATE_DELAY) {
  29.             ++frames;
  30.         } else {
  31.             FPS = Math.round(frames / (elapsed / 1000));
  32.             frames = 0;
  33.             lastUpdate = now;
  34.         }
  35.  
  36.         requestAnimationFrame(updateCounter);
  37.     }
  38.  
  39.     lastUpdate = Date.now();
  40.     requestAnimationFrame(updateCounter);
  41. })();
  42. var Day,Month,Year
  43. setInterval(() => {
  44.     var Date2=new Date()
  45.     Month = Date2.getUTCMonth() + 1; //months from 1-12
  46.     Day = Date2.getUTCDate();
  47.     Year = Date2.getUTCFullYear();
  48.     fpsdiv.innerHTML = "FPS:" + FPS + ""
  49.         +"<br>Clock: "+KFC+":"+MLC+":"+RLC
  50. }, 0);
  51.  
  52. let fpsdiv = document.createElement("div");
  53. fpsdiv.id = "test"
  54. document.body.prepend(fpsdiv);
  55. document.getElementById('test').style.color='red'
  56. document.getElementById('test').style.fontSize='20px'
  57. document.getElementById('test').style.position='absolute'
  58. document.getElementById('test').style.textAlign='center'
  59. document.getElementById('test').style.width='auto'
  60. document.getElementById('test').style.height='auto'
  61. document.getElementById('test').style.backgroundColor='rgba(0, 0, 0, 0.4)'
  62. document.getElementById('test').style.padding='2px'
  63. setTimeout(() => {
  64.     document.getElementById('ot-sdk-btn-floating').remove();
  65.     document.getElementById('pre-content-container').remove()
  66. }, 5000)
  67.  
  68. var counter = 0;
  69. window.addKey = async function () {
  70.     let key = document.getElementById('newKey').value;
  71.     if (document.getElementById(key)) return;
  72.     let html = `<div id="${counter}" style="display: flex; position:
  73. absolute;"><div id="${key.toLowerCase()}" class="keyDisplay"
  74. style="width 80px; pointer-events: all; top: 0; left:
  75. 0;">${key.toUpperCase()}</div></div>`
  76.   await document.getElementById('controlPanel').insertAdjacentHTML('afterend',
  77. html)
  78.     const thisDiv = document.getElementById(counter.toString());
  79.     thisDiv.addEventListener('mousedown', function (e) {
  80.  
  81.         var prevX = e.clientX;
  82.         var prevY = e.clientY;
  83.  
  84.         window.addEventListener('mousemove', mousemove);
  85.         window.addEventListener('mouseup', mouseup);
  86.         function mousemove(e) {
  87.             let newX = prevX - e.clientX;
  88.             let newY = prevY - e.clientY;
  89.  
  90.  
  91.             const rect = thisDiv.getBoundingClientRect();
  92.  
  93.             thisDiv.style.left = rect.left - newX + 'px';
  94.             thisDiv.style.top = rect.top - newY + 'px';
  95.  
  96.             prevX = e.clientX;
  97.             prevY = e.clientY;
  98.         }
  99.         function mouseup() {
  100.             window.removeEventListener('mousemove', mousemove);
  101.             window.removeEventListener('mouseup', mouseup);
  102.         }
  103.     });
  104.     counter++;
  105. }
  106. window.removeKey = function () {
  107.     let key = document.getElementById('newKey').value;
  108.     if (!document.getElementById(key)) return;
  109.     document.getElementById(key).remove();
  110. }
  111.  
  112.  
  113. let DivHTML = `
  114. <div id="controlPanel">
  115.    <span style="margin: 15px; font-size: 18px; padding: 5px;
  116. margin-top: 15px;">Toggle control pannel with...</span> <input
  117. id='toggleKey' type='text' value="\\" maxlength="1" style="width:
  118. 40px; height: 15px; background: none; border: 2px solid white;
  119. text-align: center; color: white;">
  120.    </br>
  121.    <input id="numsdisp" type="checkbox" name="nums" checked>
  122.    <label for="nums">Display Numbers</label>
  123.    </br>
  124.    <input id="wasd" type="checkbox" name="wasd" checked>
  125.    <label for="wasd">Display Movement Keys</label>
  126.    </br>
  127.    <input id="cpss" type="checkbox" name="cpss" checked>
  128.    <label for="nums">Display CPS/Max CPS</label>
  129.    </br>
  130.    <input id="clickss" type="checkbox" name="clickss" checked>
  131.    <label for="nums">Display Mouse Clicks</label>
  132.    </br>
  133.    <input id="newKey" maxlength="1" type="text" style="margin: 15px;
  134. color: white; background: none; border: 2px solid white; height: 20px;
  135. width: 40px; text-align: center;">
  136.    &nbsp
  137.    <button id="create" style="width: 100px; text-align: center; color:
  138. white; background: none; border: 2px solid white; height: 25px;"
  139. onclick="addKey()">Create New</button>
  140.    &nbsp
  141.    <button id="remove" style="width: 100px; text-align: center; color:
  142. white; background: none; border: 2px solid white; height: 25px;"
  143. onclick="removeKey()">Remove Key</button>
  144. </div>
  145. <div id="keys">
  146.   <div class="keyDisplay" id="w">W</div>
  147.   <div class="keyDisplay" id="a">A</div>
  148.   <div class="keyDisplay" id="s">S</div>
  149.   <div class="keyDisplay" id="d">D</div>
  150. </div>
  151. <div id="nums">
  152.   <div class="keyDisplay" id="1">1</div>
  153.   <div class="keyDisplay" id="2">2</div>
  154.   <div class="keyDisplay" id="3">3</div>
  155.   <div class="keyDisplay" id="4">4</div>
  156.   <div class="keyDisplay" id="5">5</div>
  157.   <div class="keyDisplay" id="6">6</div>
  158.   <div class="keyDisplay" id="7">7</div>
  159.   <div class="keyDisplay" id="8">8</div>
  160.   <div class="keyDisplay" id="9">9</div>
  161. </div>
  162. <div id="cps">
  163.   <div class="keyDisplay" id="Space" styles="margin-top: 40px;">________</div>
  164.   &nbsp
  165.   <div id="clicker">
  166.     <div id="clickLeft"></div>
  167.     <div id="clickRight"><div id="clickBottom"></div></div>
  168.   </div>
  169. </div>
  170. <div id="cpsDisplay">
  171.       <div id="cpsDivDisp" class="keyDisplay">CPS: 0</div>
  172.       <div id="MaxCPS" class="keyDisplay">Max CPS: 0</div>
  173. </div>
  174. `
  175.  
  176. let styles = document.createTextNode(`
  177. #controlPanel {
  178. display: none;
  179. color: white;
  180. position: absolute;
  181. width: 400px;
  182. height: 275px;
  183. background-color: rgba(0, 0, 0, 0.25);
  184. top: 50%;
  185. left: 50%;
  186. transform: translate(-50%, -50%);
  187. border-radius: 3px;
  188. pointer-events: all;
  189. }
  190. #nums {
  191. display: flex;
  192. flex-wrap: wrap;
  193. align-content: start;
  194. width: 400px;
  195. position: absolute;
  196. z-index: 15;
  197. left: 237.391px;
  198. top: 7.58%;
  199. pointer-events: all;
  200. }
  201. #keys {
  202. display: flex;
  203. position: absolute;
  204. z-index: 15;
  205. pointer-events: all;
  206. }
  207. #cps {
  208. position: absolute;
  209. display: flex;
  210. z-index: 15;
  211. pointer-events: all;
  212. top: 8%;
  213. }
  214. #cpsDisplay {
  215. position: absolute;
  216. z-index: 15;
  217. pointer-events: all;
  218. top: 15%;
  219. }
  220. .keyDisplay {
  221. margin: 10px;
  222. padding: 2px;
  223. border: 2px solid white;
  224. color: white;
  225. height: 45px;
  226. min-width: 80px;
  227. max-width: 200px;
  228. text-align: center;
  229. font-size: 25px;
  230. top: 50%;
  231. line-height: 45px;
  232. }
  233. .keyDisplay.active {
  234. color: black;
  235. background: white;
  236. }
  237. #clicker {
  238. display: flex;
  239. }
  240. #clickLeft {
  241. width: 25px;
  242. height: 50px;
  243. border-top-left-radius: 100px;
  244. border-top-right-radius: 5px;
  245. border-bottom-left-radius: 5px;
  246. border-bottom-right-radius: 5px;
  247. border: 2px solid white;
  248. margin-right: 10px;
  249. }
  250. #clickRight {
  251. width: 25px;
  252. height: 50px;
  253. border-top-right-radius: 100px;
  254. border-top-left-radius: 5px;
  255. border-bottom-left-radius: 5px;
  256. border-bottom-right-radius: 5px;
  257. border: 2px solid white;
  258. }
  259. #clickBottom {
  260. margin-top: 60px;
  261. margin-left: -40px;
  262. width: 62px;
  263. height: 35px;
  264. border-top-radius: 5px;
  265. border-bottom-left-radius: 100px;
  266. border-bottom-right-radius: 100px;
  267. border: 2px solid white;
  268. }
  269. .active2 {
  270. background: white;
  271. }
  272. `);
  273. let css = document.createElement("style");
  274. css.type = "text/css";
  275. css.appendChild(styles);
  276. document.body.appendChild(css);
  277.  
  278. document.getElementById("storeMenu").insertAdjacentHTML("beforebegin", DivHTML);
  279.  
  280. const cps = document.getElementById('cps');
  281. const keys = document.getElementById('keys');
  282. const cpsDisp = document.getElementById('cpsDisplay');
  283. const nums = document.getElementById('nums');
  284. const cvs = document.getElementById('gameCanvas');
  285. const cpsDiv = document.getElementById('cpsDivDisp');
  286. const maxCpsDiv = document.getElementById('MaxCPS');
  287. const ctrlKey = document.getElementById('toggleKey');
  288. const pannel = document.getElementById("controlPanel");
  289. const numCheck = document.getElementById("numsdisp");
  290. const wasd = document.getElementById("wasd");
  291. const cpss = document.getElementById("cpss");
  292. const clicks = document.getElementById("clicks");
  293.  
  294. var theCps = 0;
  295. var maxCps = 0;
  296. var keyDownLeft = false;
  297. var keyDownRight = false;
  298. var keyDownSpace = false;
  299.  
  300. function toggelPannel() {
  301.     if (pannel.style.display == "" || pannel.style.display == "none") {
  302.         pannel.style.display = "block";
  303.     } else if (pannel.style.display == "block") {
  304.         pannel.style.display = "none";
  305.     }
  306. }
  307.  
  308. document.addEventListener('keydown', function(e){
  309.     let keyDiv;
  310.     let key = ctrlKey.value.toLowerCase();
  311.     if (ctrlKey.value == "") key = '//'
  312.     if (e.key == key) toggelPannel();
  313.     if (e.key == ' ') {
  314.         keyDiv = document.getElementById("Space");
  315.         if (!keyDownSpace) {
  316.             theCps++
  317.             setTimeout(function(){theCps--}, 1000);
  318.             keyDownSpace = true;
  319.         }
  320.     } else {
  321.         keyDiv = document.getElementById(e.key);
  322.     }
  323.     if (!keyDiv) return;
  324.     keyDiv.classList.add('active');
  325. });
  326. document.addEventListener('keyup', function(e){
  327.     let keyDiv;
  328.     if (e.key == ' ') {
  329.         keyDiv = document.getElementById("Space");
  330.         keyDownSpace = false;
  331.     } else {
  332.         keyDiv = document.getElementById(e.key);
  333.     }
  334.     if (!keyDiv) return;
  335.     keyDiv.classList.remove('active');
  336. });
  337.  
  338. document.addEventListener('mousedown', function(e){
  339.     let rightClick = false;
  340.     if (e.button == 2) rightClick = true;
  341.     if (!rightClick) {
  342.         let click = document.getElementById('clickLeft');/*left click*/
  343.         click.classList.add('active2');
  344.         if (!keyDownLeft) {
  345.             theCps++
  346.             setTimeout(function(){theCps--}, 1000);
  347.             keyDownLeft = true;
  348.         }
  349.     } else {
  350.         let click = document.getElementById('clickRight'); /*right click*/
  351.         click.classList.add('active2');
  352.         if (!keyDownRight) {
  353.             theCps++
  354.             setTimeout(function(){theCps--}, 1000);
  355.             keyDownRight = true;
  356.         }
  357.     }
  358. })
  359. document.addEventListener('mouseup', function(e){
  360.     let rightClick = false;
  361.     if (e.button == 2) rightClick = true;
  362.     if (!rightClick) {
  363.         let click = document.getElementById('clickLeft');
  364.         click.classList.remove('active2');
  365.         keyDownLeft = false;
  366.     } else {
  367.         let click = document.getElementById('clickRight');
  368.         click.classList.remove('active2');
  369.         keyDownRight = false;
  370.     }
  371. })
  372. keys.addEventListener('mousedown', function (e) {
  373.  
  374.     let prevX = e.clientX;
  375.     let prevY = e.clientY;
  376.  
  377.     window.addEventListener('mousemove', mousemove);
  378.     window.addEventListener('mouseup', mouseup);
  379.     function mousemove(e) {
  380.         let newX = prevX - e.clientX;
  381.         let newY = prevY - e.clientY;
  382.  
  383.  
  384.         const rect = keys.getBoundingClientRect();
  385.  
  386.         keys.style.left = rect.left - newX + 'px';
  387.         keys.style.top = rect.top - newY + 'px';
  388.  
  389.         prevX = e.clientX;
  390.         prevY = e.clientY;
  391.     }
  392.     function mouseup() {
  393.         window.removeEventListener('mousemove', mousemove);
  394.         window.removeEventListener('mouseup', mouseup);
  395.     }
  396. });
  397. cps.addEventListener('mousedown', function (e) {
  398.  
  399.     let prevX = e.clientX;
  400.     let prevY = e.clientY;
  401.  
  402.     window.addEventListener('mousemove', mousemove);
  403.     window.addEventListener('mouseup', mouseup);
  404.     function mousemove(e) {
  405.         let newX = prevX - e.clientX;
  406.         let newY = prevY - e.clientY;
  407.  
  408.  
  409.         const rect = cps.getBoundingClientRect();
  410.  
  411.         cps.style.left = rect.left - newX + 'px';
  412.         cps.style.top = rect.top - newY + 'px';
  413.  
  414.         prevX = e.clientX;
  415.         prevY = e.clientY;
  416.     }
  417.     function mouseup() {
  418.         window.removeEventListener('mousemove', mousemove);
  419.         window.removeEventListener('mouseup', mouseup);
  420.     }
  421. });
  422. cpsDisp.addEventListener('mousedown', function (e) {
  423.  
  424.     let prevX = e.clientX;
  425.     let prevY = e.clientY;
  426.  
  427.     window.addEventListener('mousemove', mousemove);
  428.     window.addEventListener('mouseup', mouseup);
  429.     function mousemove(e) {
  430.         let newX = prevX - e.clientX;
  431.         let newY = prevY - e.clientY;
  432.  
  433.  
  434.         const rect = cpsDisp.getBoundingClientRect();
  435.  
  436.         cpsDisp.style.left = rect.left - newX + 'px';
  437.         cpsDisp.style.top = rect.top - newY + 'px';
  438.  
  439.         prevX = e.clientX;
  440.         prevY = e.clientY;
  441.     }
  442.     function mouseup() {
  443.         window.removeEventListener('mousemove', mousemove);
  444.         window.removeEventListener('mouseup', mouseup);
  445.     }
  446. });
  447. nums.addEventListener('mousedown', function (e) {
  448.  
  449.     let prevX = e.clientX;
  450.     let prevY = e.clientY;
  451.  
  452.     window.addEventListener('mousemove', mousemove);
  453.     window.addEventListener('mouseup', mouseup);
  454.     function mousemove(e) {
  455.         let newX = prevX - e.clientX;
  456.         let newY = prevY - e.clientY;
  457.  
  458.  
  459.         const rect = nums.getBoundingClientRect();
  460.  
  461.         nums.style.left = rect.left - newX + 'px';
  462.         nums.style.top = rect.top - newY + 'px';
  463.  
  464.         prevX = e.clientX;
  465.         prevY = e.clientY;
  466.     }
  467.     function mouseup() {
  468.         window.removeEventListener('mousemove', mousemove);
  469.         window.removeEventListener('mouseup', mouseup);
  470.     }
  471. });
  472.  
  473. setInterval(() => {
  474.     if (theCps > maxCps) maxCps = theCps;
  475.     maxCpsDiv.innerText = `Max CPS: ${maxCps}`;
  476.     cpsDiv.innerText = `CPS: ${theCps}`
  477.     if (!numCheck.checked && nums.style.display == "flex") {
  478.         nums.style.display = "none"
  479.     } else if (numCheck.checked && nums.style.display != "flex") {
  480.         nums.style.display = "flex"
  481.     }
  482.     if (!wasd.checked && keys.style.display == "flex") {
  483.         keys.style.display = "none"
  484.     } else if (wasd.checked && keys.style.display != "flex") {
  485.         keys.style.display = "flex"
  486.     }
  487.     if (!cpss.checked && cpsDisp.style.display == "block") {
  488.         cpsDisp.style.display = "none"
  489.     } else if (cpss.checked && cpsDisp.style.display != "block") {
  490.         cpsDisp.style.display = "block"
  491.     }
  492.     if (!clickss.checked && cps.style.display == "flex") {
  493.         cps.style.display = "none"
  494.     } else if (clickss.checked && cps.style.display != "flex") {
  495.         cps.style.display = "flex"
  496.     }
  497. }, 0)