☰

MooMoo.io Show Keys & Mouse

Display your keyboard keys, mouse, and CPS

安裝腳本?
作者推薦腳本

您可能也會喜歡 MooMoo.io Key Rebinder

安裝腳本 
  1. // ==UserScript==
  2. // @name         MooMoo.io Show Keys & Mouse
  3. // @description  Display your keyboard keys, mouse, and CPS
  4. // @author       KOOKY WARRIOR
  5. // @match        *://*.moomoo.io/*
  6. // @icon         https://moomoo.io/img/favicon.png?v=1
  7. // @run-at       document-start
  8. // @grant        unsafeWindow
  9. // @license      MIT
  10. // @version      0.5.2
  11. // @namespace    https://greasyfork.org/users/999838
  12. // ==/UserScript==
  13.  
  14. // Press "\" to open menu
  15.  
  16. // This script was originally made by GG Gamer Br
  17. // https://greasyfork.org/en/scripts/424547-moomoo-io-keys
  18.  
  19. ;(() => {
  20. 	unsafeWindow.showKeys = true
  21.  
  22. 	let storage = JSON.parse(localStorage.getItem("showKeys&Mouse"))
  23. 	if (storage == null) {
  24. 		storage = {
  25. 			keys: ["Q", "F", "V", "1", "2", "3"],
  26. 			cps: true,
  27. 			maxCps: true,
  28. 			mouse: 100,
  29. 			space: 7,
  30. 			container: 270
  31. 		}
  32. 		localStorage.setItem("showKeys&Mouse", JSON.stringify(storage))
  33. 	}
  34. 	unsafeWindow.addEventListener("DOMContentLoaded", () => {
  35. 		const DIV = `
  36.             <style>
  37. 				#show_key_menu {
  38. 					background-color: rgba(0, 0, 0, 0.25);
  39. 					width: fit-content;
  40. 					height: fit-content;
  41. 					pointer-events: all;
  42. 					color: white;
  43. 					padding: 20px;
  44. 					position: absolute;
  45. 					top: 50%;
  46. 					left: 50%;
  47. 					transform: translate(-50%, -50%);
  48. 				}
  49. 				.show_key_inputs {
  50. 					width: 100%;
  51. 					display: flex;
  52. 					flex-direction: row;
  53. 					align-items: flex-end;
  54. 					margin-bottom: 10px;
  55. 				}
  56. 				.show_key_inputs > * {
  57. 					font-size: 24px;
  58. 				}
  59. 				.show_key_inputs > input[type="number"], .show_key_inputs > input[type="text"] {
  60. 					width: 100px;
  61. 					padding: 6px;
  62. 					border: none;
  63. 					outline: none;
  64. 					box-sizing: border-box;
  65. 					color: #4A4A4A;
  66. 					background-color: #e5e3e3;
  67. 					-webkit-border-radius: 4px;
  68. 					-moz-border-radius: 4px;
  69. 					border-radius: 4px;
  70. 					text-transform: uppercase;
  71. 				}
  72. 				.show_key_inputs > input[type="checkbox"] {
  73. 					align-self: center;
  74. 				}
  75. 				.show_key_inputs > label {
  76. 					margin-left: 10px;
  77. 				}
  78. 				.show_key_inputs > div {
  79. 					margin-left: 10px;
  80. 					text-align: center;
  81. 					padding: 6px 10px;
  82. 					box-sizing: border-box;
  83. 					width: fit-content;
  84. 					-webkit-border-radius: 4px;
  85. 					-moz-border-radius: 4px;
  86. 					border-radius: 4px;
  87. 					cursor: pointer;
  88. 				}
  89. 				#add_key {
  90. 					background-color: #8ecc51;
  91. 				}
  92. 				#remove_key {
  93. 					background-color: #cc5151;
  94. 				}
  95. 				#add_key:hover {
  96. 					background-color: #6a983f;
  97. 				}
  98. 				#remove_key:hover {
  99. 					background-color: #983f3f;
  100. 				}
  101. 				#show_key_container {
  102. 					position: absolute;
  103. 					left: 15px;
  104. 					bottom: 210px;
  105. 				}
  106.     			.keys {
  107. 					width: 50px;
  108.     				height: 45px;
  109.     				margin: 5px;
  110.     				padding: 2px 10px;
  111.     				border: 2px solid white;
  112.     				color: white;
  113.     				text-align: center;
  114.     				font-size: 25px;
  115.     				top: 50%;
  116.     				line-height: 45px;
  117.     			}
  118.     			.keys.active {
  119.     				color: black;
  120.     				background: white;
  121.     			}
  122.     			#keys {
  123.     				display: flex;
  124.     				flex-wrap: wrap;
  125.     				align-content: start;
  126.     				width: 300px;
  127.     			}
  128.     			#fast {
  129.     				display: flex;
  130. 					margin-bottom: 10px;
  131. 					margin-left: 5px;
  132. 					align-items: center;
  133.     			}
  134. 				#mouseContainer {
  135. 					width: 65px;
  136. 					height: 94px;
  137. 				}
  138.     			#mouse {
  139.     				display: flex;
  140. 					width: 65px;
  141. 					justify-content: space-between;
  142. 					flex-wrap: wrap;
  143. 					transform-origin: 0 0;
  144.     			}
  145.     			#mouse_0 {
  146.     				flex-basis: 24px;
  147.     				height: 50px;
  148. 					border-radius: 100px 10px 10px 10px;
  149.     				border: 2px solid white;
  150.     			}
  151.     			#mouse_1 {	
  152.     				flex-basis: 4px;
  153.     				height: 50px;
  154. 					border-radius: 10px;
  155.     				border: 2px solid white;
  156.     			}
  157.     			#mouse_2 {
  158.     				flex-basis: 24px;
  159.     				height: 50px;
  160. 					border-radius: 10px 100px 10px 10px;
  161.     				border: 2px solid white;
  162.     			}
  163.     			#mouse_bottom {
  164.     				margin-top: 1px;
  165. 					flex-basis: 100%;
  166.     				height: 34px;
  167. 					border-radius: 10px 10px 100px 100px;
  168.     				border: 2px solid white;
  169.     			}
  170. 				.active2 {
  171. 					background: white;
  172. 				}
  173. 				#cpsDisplay, #maxCpsDisplay {
  174. 					position: initial;
  175. 					padding-right: 10px;
  176. 					width: fit-content;
  177. 					height: fit-content;
  178. 					text-align: left;
  179. 					margin-bottom: 10px;
  180. 					margin-left: 5px;
  181. 				}
  182.     		</style>
  183. 			<div id="show_key_menu" style="display: none">
  184. 				<div class="show_key_inputs">
  185. 					<input id="mouse_size" type="number" value="${storage.mouse}" min="0" onchange="changeShowKeyMouseProperty('mouse', parseFloat(this.value))">
  186. 					<label for="mouse_size">Mouse Size</label>
  187. 				</div>
  188. 				<div class="show_key_inputs">
  189. 					<input id="spacebar_size" type="number" value="${
  190. 			storage.space
  191. 		}" oninput="this.value = Math.round(this.value)" onchange="changeShowKeyMouseProperty('space', parseInt(this.value))" max="20" min="0">
  192. 					<label for="spacebar_size">Spacebar Size</label>
  193. 				</div>
  194. 				<div class="show_key_inputs">
  195. 					<input id="container_size" type="number" value="${
  196. 			storage.container
  197. 		}" min="0" onchange="changeShowKeyMouseProperty('container', parseFloat(this.value))">
  198. 					<label for="container_size">Container Size</label>
  199. 				</div>
  200. 				<div class="show_key_inputs">
  201. 					<input id="show_cps" type="checkbox" ${storage.cps ? "checked" : ""} onchange="changeShowKeyMouseProperty('cps', this.checked)">
  202. 					<label for="show_cps">CPS</label>
  203. 				</div>
  204. 				<div class="show_key_inputs">
  205. 					<input id="show_maxcps" type="checkbox" ${storage.maxCps ? "checked" : ""} onchange="changeShowKeyMouseProperty('maxCps', this.checked)">
  206. 					<label for="show_maxcps">MAX CPS</label>
  207. 				</div>
  208. 				<div class="show_key_inputs">
  209. 					<input id="enter_key" type="text" maxlength="1" placeholder="Enter Key" style="width: 200px; text-align: center;">
  210. 					<div id="add_key" onclick="addKey_ShowKeyMouse()"><span>Add</span></div>
  211. 					<div id="remove_key" onclick="removeKey_ShowKeyMouse()"><span>Remove</span></div>
  212. 				</div>
  213. 			</div>
  214.             <div id="show_key_container">
  215.     			<div id="fast">
  216. 					<div id="mouseContainer" style="display: ${storage.mouse > 0 ? "block" : "none"}; width: ${65 * (storage.mouse / 100)}px; height: ${
  217. 			94 * (storage.mouse / 100)
  218. 		}px">
  219.     					<div id="mouse" style="transform: scale(${storage.mouse}%)">
  220.     						<div id="mouse_0"></div>
  221.     						<div id="mouse_1"></div>
  222.     						<div id="mouse_2"></div>
  223. 							<div id="mouse_bottom"></div>
  224.     					</div>
  225. 					</div>
  226.     				<div class="keys" id="key_Space" style="margin-left: ${storage.mouse > 0 ? 10 : 0}px; width: fit-content; display: ${
  227. 			storage.space > 0 ? "block" : "none"
  228. 		}">_______</div>
  229.     			</div>
  230. 				<div id="cpsDisplay" class="resourceDisplay" style="display: ${storage.cps ? "block" : "none"}">CPS: 0</div>
  231. 				<div id="maxCpsDisplay" class="resourceDisplay" style="display: ${storage.maxCps ? "block" : "none"}">MAX CPS: 0</div>
  232. 				<div id="keys" style="display: ${storage.container <= 0 || storage.keys.length == 0 ? "none" : "flex"}; width: ${storage.container}px"></div>
  233.     		</div>
  234.         `
  235. 		const container = document.createElement("div")
  236. 		container.innerHTML = DIV
  237. 		document.getElementById("gameUI").appendChild(container)
  238. 		storage.keys.forEach((key) => {
  239. 			const element = document.createElement("div")
  240. 			element.id = `key_${key}`
  241. 			element.className = "keys"
  242. 			element.textContent = key
  243. 			document.getElementById("keys").appendChild(element)
  244. 		})
  245. 		document.getElementById("keys").style.display = storage.container <= 0 || storage.keys.length == 0 ? "none" : "flex"
  246.  
  247. 		unsafeWindow.changeShowKeyMouseProperty = (id, value) => {
  248. 			storage[id] = value
  249. 			localStorage.setItem("showKeys&Mouse", JSON.stringify(storage))
  250. 			document.getElementById("mouseContainer").style.width = `${65 * (storage.mouse / 100)}px`
  251. 			document.getElementById("mouseContainer").style.height = `${94 * (storage.mouse / 100)}px`
  252. 			document.getElementById("mouseContainer").style.display = storage.mouse > 0 ? "block" : "none"
  253. 			document.getElementById("key_Space").style.marginLeft = `${storage.mouse > 0 ? 10 : 0}px`
  254. 			document.getElementById("mouse").style.transform = `scale(${storage.mouse}%)`
  255. 			document.getElementById("key_Space").textContent = "_".repeat(storage.space)
  256. 			document.getElementById("key_Space").style.display = storage.space > 0 ? "block" : "none"
  257. 			document.getElementById("cpsDisplay").style.display = storage.cps ? "block" : "none"
  258. 			document.getElementById("maxCpsDisplay").style.display = storage.maxCps ? "block" : "none"
  259. 			document.getElementById("keys").style.display = storage.container <= 0 || storage.keys.length == 0 ? "none" : "flex"
  260. 			document.getElementById("keys").style.width = `${storage.container}px`
  261. 		}
  262.  
  263. 		unsafeWindow.addKey_ShowKeyMouse = () => {
  264. 			const key = document.getElementById("enter_key").value.toUpperCase()
  265. 			let element = document.getElementById(`key_${key}`)
  266. 			if (element == null) {
  267. 				element = document.createElement("div")
  268. 				element.id = `key_${key}`
  269. 				element.className = "keys"
  270. 				element.textContent = key
  271. 				document.getElementById("keys").appendChild(element)
  272. 				storage.keys.push(key)
  273. 				localStorage.setItem("showKeys&Mouse", JSON.stringify(storage))
  274. 			}
  275. 		}
  276.  
  277. 		unsafeWindow.removeKey_ShowKeyMouse = async () => {
  278. 			const key = document.getElementById("enter_key").value.toUpperCase()
  279. 			const element = document.getElementById(`key_${key}`)
  280. 			if (element != null) {
  281. 				element.remove()
  282. 				const index = storage.keys.indexOf(key)
  283. 				if (index > -1) {
  284. 					await storage.keys.splice(index, 1)
  285. 					localStorage.setItem("showKeys&Mouse", JSON.stringify(storage))
  286. 				}
  287. 				document.getElementById("keys").style.display = storage.container <= 0 || storage.keys.length == 0 ? "none" : "flex"
  288. 			}
  289. 		}
  290.  
  291. 		var currentCps = 0
  292. 		var maxCps = 0
  293. 		var spaceDown = false
  294.  
  295. 		function addCPS() {
  296. 			currentCps++
  297. 			document.getElementById("cpsDisplay").innerText = `CPS: ${currentCps}`
  298. 			if (currentCps > maxCps) {
  299. 				maxCps = currentCps
  300. 				document.getElementById("maxCpsDisplay").innerText = `MAX CPS: ${maxCps}`
  301. 			}
  302. 			setTimeout(() => {
  303. 				currentCps--
  304. 				document.getElementById("cpsDisplay").innerText = `CPS: ${currentCps}`
  305. 			}, 1000)
  306. 		}
  307.  
  308. 		function keysActive() {
  309. 			let returnValue
  310. 			returnValue = document.getElementById("allianceMenu").style.display != "block" && document.getElementById("chatHolder").style.display != "block"
  311. 			return returnValue
  312. 		}
  313.  
  314. 		unsafeWindow.addEventListener("keydown", (event) => {
  315. 			if (keysActive()) {
  316. 				if (event.code == "Backslash") {
  317. 					document.getElementById("show_key_menu").style.display = document.getElementById("show_key_menu").style.display == "block" ? "none" : "block"
  318. 				} else if (event.code == "Space") {
  319. 					if (!spaceDown) {
  320. 						spaceDown = true
  321. 						const keyDiv = document.getElementById(`key_Space`)
  322. 						if (keyDiv && !keyDiv.classList.contains("active")) {
  323. 							keyDiv.classList.add("active")
  324. 						}
  325. 						addCPS()
  326. 					}
  327. 				} else {
  328. 					const keyDiv = document.getElementById(`key_${event.key.toUpperCase()}`)
  329. 					if (keyDiv && !keyDiv.classList.contains("active")) {
  330. 						keyDiv.classList.add("active")
  331. 					}
  332. 				}
  333. 			}
  334. 		})
  335.  
  336. 		unsafeWindow.addEventListener("keyup", (event) => {
  337. 			if (event.code == "Space") {
  338. 				spaceDown = false
  339. 				const keyDiv = document.getElementById(`key_Space`)
  340. 				if (keyDiv && keyDiv.classList.contains("active")) {
  341. 					keyDiv.classList.remove("active")
  342. 				}
  343. 			} else {
  344. 				const keyDiv = document.getElementById(`key_${event.key.toUpperCase()}`)
  345. 				if (keyDiv && keyDiv.classList.contains("active")) {
  346. 					keyDiv.classList.remove("active")
  347. 				}
  348. 			}
  349. 		})
  350.  
  351. 		document.getElementById("touch-controls-fullscreen").addEventListener("mousedown", (event) => {
  352. 			if ([0, 1, 2].includes(event.button)) {
  353. 				addCPS()
  354. 			}
  355. 			let mouseDiv = document.getElementById(`mouse_${event.button}`)
  356. 			if (mouseDiv && !mouseDiv.classList.contains("active2")) {
  357. 				mouseDiv.classList.add("active2")
  358. 			}
  359. 		})
  360.  
  361. 		document.getElementById("touch-controls-fullscreen").addEventListener("mouseup", (event) => {
  362. 			let mouseDiv = document.getElementById(`mouse_${event.button}`)
  363. 			if (mouseDiv && mouseDiv.classList.contains("active2")) {
  364. 				mouseDiv.classList.remove("active2")
  365. 			}
  366. 		})
  367. 	})
  368. })()