// ==UserScript==
// @name         MooMoo.io Show Keys & Mouse
// @description  Display your keyboard keys, mouse, and CPS
// @author       KOOKY WARRIOR
// @match        *://*.moomoo.io/*
// @icon         https://moomoo.io/img/favicon.png?v=1
// @run-at       document-start
// @grant        unsafeWindow
// @license      MIT
// @version      0.1.1
// @namespace    https://greasyfork.org/users/999838
// @downloadURL none
// ==/UserScript==

// This script was originally made by GG Gamer Br
// https://greasyfork.org/en/scripts/424547-moomoo-io-keys

;(() => {
	unsafeWindow.showKeys = true
	document.addEventListener("DOMContentLoaded", () => {
		const DIV = `
            <style>
    			.keys {
    				margin: 5px;
    				padding: 2px;
    				border: 2px solid white;
    				color: white;
    				height: 45px;
    				min-width: 60px;
    				max-width: 200px;
    				text-align: center;
    				font-size: 25px;
    				top: 50%;
    				line-height: 45px;
    			}
    			.keys.active {
    				color: black;
    				background: white;
    			}
    			#keys {
    				display: flex;
    				flex-wrap: wrap;
    				align-content: start;
    				width: 250px;
    				position: absolute;
    				left: 15px;
    				bottom: 210px;
    				z-index: 15;
    			}
    			#fast {
    				display: flex;
    				position: absolute;
    				left: 20px;
    				bottom: 390px;
    			}
    			#mouse {
    				display: flex;
					width: 70px;
					justify-content: space-between;
					flex-wrap: wrap;
    			}
    			#mouse_0 {
    				flex-basis: 35%;
    				height: 50px;
					border-radius: 100px 10px 10px 10px;
    				border: 2px solid white;
    			}
    			#mouse_1 {	
    				flex-basis: 5%;
    				height: 50px;
					border-radius: 10px;
    				border: 2px solid white;
    			}
    			#mouse_2 {
    				flex-basis: 35%;
    				height: 50px;
					border-radius: 10px 100px 10px 10px;
    				border: 2px solid white;
    			}
    			#mouse_bottom {
    				margin-top: 5px;
					flex-basis: 100%;
    				height: 35px;
					border-radius: 10px 10px 100px 100px;
    				border: 2px solid white;
    			}
				.active2 {
					background: white;
				}
				#maxCpsDisplay {
					right: inherit;
					padding-right: 10px;
					left: 20px;
					bottom: 280px;
				}
				#cpsDisplay {
					right: inherit;
					padding-right: 10px;
					left: 20px;
					bottom: 335px;
				}
    		</style>
            <div id="show_key_container">
    			<div id="keys">
    				<div class="keys" id="key_KeyQ">Q</div>
    				<div class="keys" id="key_KeyF">F</div>
    				<div class="keys" id="key_KeyV">V</div>
    			</div>

    			<div id="fast">
    				<div id="mouse">
    					<div id="mouse_0"></div>
    					<div id="mouse_1"></div>
    					<div id="mouse_2"></div>
						<div id="mouse_bottom"></div>
    				</div>
    				<div class="keys" id="key_Space" style="margin: 10px; width: 135px;">_______</div>
    			</div>

				<div id="cpsDisplay" class="resourceDisplay">CPS: 0</div>
				<div id="maxCpsDisplay" class="resourceDisplay">MAX CPS: 0</div>
    		</div>
        `
		const container = document.createElement("div")
		container.innerHTML = DIV
		document.getElementById("gameUI").appendChild(container)

		var currentCps = 0
		var maxCps = 0
		var spaceDown = false

		function addCPS() {
			currentCps++
			document.getElementById("cpsDisplay").innerText = `CPS: ${currentCps}`
			if (currentCps > maxCps) {
				maxCps = currentCps
				document.getElementById("maxCpsDisplay").innerText = `MAX CPS: ${maxCps}`
			}
			setTimeout(() => {
				currentCps--
				document.getElementById("cpsDisplay").innerText = `CPS: ${currentCps}`
			}, 1000)
		}

		function keysActive() {
			let returnValue
			returnValue =
				document.getElementById("allianceMenu").style.display != "block" &&
				document.getElementById("chatHolder").style.display != "block"
			return returnValue
		}

		document.addEventListener("keydown", (event) => {
			if (event.which == 111) {
				document.getElementById("show_key_container").style.display =
					document.getElementById("show_key_container").style.display == "block"
						? "none"
						: "block"
			} else {
				if (keysActive()) {
					if (event.code == "Space") {
						if (!spaceDown) {
							spaceDown = true
							addCPS()
						}
					}
					let keyDiv = document.getElementById(`key_${event.code}`)
					if (keyDiv && !keyDiv.classList.contains("active")) {
						keyDiv.classList.add("active")
					}
				}
			}
		})

		document.addEventListener("keyup", (event) => {
			if (event.code == "Space") {
				spaceDown = false
			}
			let keyDiv = document.getElementById(`key_${event.code}`)
			if (keyDiv && keyDiv.classList.contains("active")) {
				keyDiv.classList.remove("active")
			}
		})

		document.getElementById("gameCanvas").addEventListener("mousedown", (event) => {
			if ([0, 1, 2].includes(event.button)) {
				addCPS()
			}
			let mouseDiv = document.getElementById(`mouse_${event.button}`)
			if (mouseDiv && !mouseDiv.classList.contains("active2")) {
				mouseDiv.classList.add("active2")
			}
		})

		document.getElementById("gameCanvas").addEventListener("mouseup", (event) => {
			let mouseDiv = document.getElementById(`mouse_${event.button}`)
			if (mouseDiv && mouseDiv.classList.contains("active2")) {
				mouseDiv.classList.remove("active2")
			}
		})
	})
})()