Adds a part of the keyboard to your screen. And your CPS
// ==UserScript== // @name CPS & Clicks Panel // @namespace - // @version 1.0 // @description Adds a part of the keyboard to your screen. And your CPS // @author not me // @match *://sandbox.moomoo.io/* // @match *://dev.moomoo.io/* // @match *://moomoo.io/* // @match *://*.moomoo.io/* // @grant none // @require https://greasyfork.org/scripts/368273-msgpack/code/msgpack.js?version=598723 // @require http://code.jquery.com/jquery-3.3.1.min.js // @require https://code.jquery.com/ui/1.12.0/jquery-ui.min.js // @require https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.js // ==/UserScript== var FPS; (function() { var UPDATE_DELAY = 700; var lastUpdate = 0; var frames = 0; function updateCounter() { var now = Date.now(); var elapsed = now - lastUpdate; if (elapsed < UPDATE_DELAY) { ++frames; } else { FPS = Math.round(frames / (elapsed / 1000)); frames = 0; lastUpdate = now; } requestAnimationFrame(updateCounter); } lastUpdate = Date.now(); requestAnimationFrame(updateCounter); })(); var Day,Month,Year setInterval(() => { var Date2=new Date() Month = Date2.getUTCMonth() + 1; //months from 1-12 Day = Date2.getUTCDate(); Year = Date2.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() }, 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;">   <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="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>   <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');/*left click*/ click.classList.add('active2'); if (!keyDownLeft) { theCps++ setTimeout(function(){theCps--}, 1000); keyDownLeft = true; } } else { let click = document.getElementById('clickRight'); /*right click*/ 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)