Greasy Fork is available in English.

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)