MooMoo.io Private Chat Room

Chat with your friends privately
换行
// ==UserScript==
// @name         MooMoo.io Private Chat Room
// @description  Chat with your friends privately
// @author       KOOKY WARRIOR
// @match        *://*.moomoo.io/*
// @icon         https://moomoo.io/img/favicon.png?v=1
// @require      https://cdnjs.cloudflare.com/ajax/libs/peerjs/1.4.7/peerjs.min.js
// @require      https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js
// @require      https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js
// @license      MIT
// @version      0.1
// @namespace    https://gf.qytechs.cn/users/999838
// ==/UserScript==

/*
1) To get started, press "Shift" + "Enter"
2) Now you should be able to see 4 buttons:
- Join Room (Join a room via room ID)
- Create Room (Create a room)
- Show/Hide (Show or hide the chat container)
- Open/Close Editor (Edit the position of the chat container by dragging it around / Change the size of the chat container at the bottom right of the chat container)
3) After you have joined or created a room, press "Shift" + "Enter" to activate the private chat input message holder.
4) Once you have finished typing your message, press "Enter" to send the message to the chat room
5) If you want to clear the chat, type "/clear" and then press "Enter"
*/

;(() => {
	let myID = null
	let conn = null
	let peer = null
	let connected = false
	let editing = false

	const gameUI = document.getElementById("gameUI")
	const gameCanvas = document.getElementById("gameCanvas")

	const style = document.createElement("style")
	style.innerHTML = /*css*/ `
        #chatContainer {
			background-color: rgba(0, 0, 0, 0.1);
            position: absolute;
			padding: 10px;
			pointer-events: all;
			word-break: break-word;
			overflow-x: hidden;
        }
		#chatContainer::-webkit-scrollbar {
			width: 0.6em;
		}
		#chatContainer::-webkit-scrollbar-thumb {
			background-color: white;
		}
		#chatContainer::-webkit-scrollbar-track {
			background-color: none !important;
		}
        #roomChatSettingsContainer {
            width: 100%;
            position: fixed;
            text-align: center;
            top: 50%;
            transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            -o-transform: translateY(-50%);
        }
        .roomChatSettingButton {
            margin: 10px;
        }
        #roomChatBoxInput {
            padding: 6px;
            font-size: 20px;
            color: #fff;
            background-color: rgba(0, 0, 0, 0.25);
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            pointer-events: all;
            border: 0;
        }
        #roomChatBoxInput:focus {
            outline: none;
        }
		#popupContainer {
			width: 100%;
            position: fixed;
            text-align: center;
            top: 50%;
            transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
            -o-transform: translateY(-50%);
		}
		#popupContainerInput {
			padding: 10px;
            font-size: 26px;
            color: #fff;
            background-color: rgba(0, 0, 0, 0.25);
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            pointer-events: all;
            border: 0;
		}
		#popupContainerInput:focus {
			outline: none;
		}
		.chatmsgholder {
			width: 100%;
			color: white;
			font-size: 22px;
		}
		.systemmsgholder {
			width: 100%;
			color: #fadadc;
			font-size: 22px;
		}
    	`
	document.head.appendChild(style)
	const style2 = document.createElement("link")
	style2.rel = "stylesheet"
	style2.href = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/le-frog/jquery-ui.min.css"
	document.head.appendChild(style2)

	const chatContainer = document.createElement("div")
	chatContainer.id = "chatContainer"
	chatContainer.style.overflowY = "auto"
	chatContainer.style.width = localStorage.getItem("room_chat_width") ? localStorage.getItem("room_chat_width") : "15%"
	chatContainer.style.height = localStorage.getItem("room_chat_height") ? localStorage.getItem("room_chat_height") : "30%"
	chatContainer.style.top = localStorage.getItem("room_chat_top") ? localStorage.getItem("room_chat_top") : "0%"
	chatContainer.style.left = localStorage.getItem("room_chat_left") ? localStorage.getItem("room_chat_left") : "0%"
	chatContainer.style.display = "none"
	gameUI.appendChild(chatContainer)

	const roomChatSettingsContainer = document.createElement("div")
	roomChatSettingsContainer.style.display = "none"
	roomChatSettingsContainer.id = "roomChatSettingsContainer"

	const joinRoomButton = document.createElement("div")
	joinRoomButton.className = "roomChatSettingButton storeTab"
	joinRoomButton.textContent = "Join Room"
	roomChatSettingsContainer.appendChild(joinRoomButton)

	const createRoomButton = document.createElement("div")
	createRoomButton.className = "roomChatSettingButton storeTab"
	createRoomButton.textContent = "Create Room"
	roomChatSettingsContainer.appendChild(createRoomButton)

	const copyRoomIDButton = document.createElement("div")
	copyRoomIDButton.className = "roomChatSettingButton storeTab"
	copyRoomIDButton.textContent = "Copy Room ID"
	copyRoomIDButton.style.display = "none"
	roomChatSettingsContainer.appendChild(copyRoomIDButton)

	const leaveRoomButton = document.createElement("div")
	leaveRoomButton.className = "roomChatSettingButton storeTab"
	leaveRoomButton.textContent = "Leave Room"
	leaveRoomButton.style.display = "none"
	roomChatSettingsContainer.appendChild(leaveRoomButton)

	const deleteRoomButton = document.createElement("div")
	deleteRoomButton.className = "roomChatSettingButton storeTab"
	deleteRoomButton.textContent = "Delete Room"
	deleteRoomButton.style.display = "none"
	roomChatSettingsContainer.appendChild(deleteRoomButton)

	const toggleHideButton = document.createElement("div")
	toggleHideButton.className = "roomChatSettingButton storeTab"
	toggleHideButton.textContent = "Show"
	roomChatSettingsContainer.appendChild(toggleHideButton)

	const editStyleButton = document.createElement("div")
	editStyleButton.className = "roomChatSettingButton storeTab"
	editStyleButton.textContent = "Open Editor"
	roomChatSettingsContainer.appendChild(editStyleButton)

	function mousedown(event) {
		gameCanvas.dispatchEvent(
			new MouseEvent("mousedown", {
				button: event.button
			})
		)
	}
	function mouseup(event) {
		gameCanvas.dispatchEvent(
			new MouseEvent("mouseup", {
				button: event.button
			})
		)
	}
	function mousemove(event) {
		gameCanvas.dispatchEvent(
			new MouseEvent("mousemove", {
				clientX: event.clientX,
				clientY: event.clientY
			})
		)
	}
	chatContainer.onmousedown = mousedown
	chatContainer.onmouseup = mouseup
	chatContainer.onmousemove = mousemove
	editStyleButton.onclick = function () {
		if (editing) {
			editing = false
			editStyleButton.textContent = "Open Editor"
			chatContainer.style.overflowY = "auto"
			$("#chatContainer").resizable("destroy")
			$("#chatContainer").draggable("destroy")
			chatContainer.onmousedown = mousedown
			chatContainer.onmouseup = mouseup
			chatContainer.onmousemove = mousemove
			gameCanvas.style.pointerEvents = "auto"
		} else {
			editing = true
			editStyleButton.textContent = "Close Editor"
			chatContainer.style.overflowY = "hidden"
			if (chatContainer.style.display == "none") {
				chatContainer.style.display = "block"
				toggleHideButton.textContent = "Hide"
			}
			chatContainer.onmousedown = null
			chatContainer.onmouseup = null
			chatContainer.onmousemove = null
			gameCanvas.style.pointerEvents = "none"
			$("#chatContainer").resizable({
				containment: "#gameUI",
				stop: function (event, ui) {
					const width = (ui.size.width / window.innerWidth) * 100 + "%"
					const height = (ui.size.height / window.innerHeight) * 100 + "%"
					localStorage.setItem("room_chat_width", width)
					localStorage.setItem("room_chat_height", height)
					chatContainer.style.width = width
					chatContainer.style.height = height
				}
			})
			$("#chatContainer").draggable({
				containment: "#gameUI",
				stop: function (event, ui) {
					const top = (ui.position.top / window.innerHeight) * 100 + "%"
					const left = (ui.position.left / window.innerWidth) * 100 + "%"
					localStorage.setItem("room_chat_top", top)
					localStorage.setItem("room_chat_left", left)
					chatContainer.style.top = top
					chatContainer.style.left = left
				}
			})
		}
	}
	toggleHideButton.onclick = function () {
		if (chatContainer.style.display == "none") {
			chatContainer.style.display = "block"
			toggleHideButton.textContent = "Hide"
		} else {
			chatContainer.style.display = "none"
			toggleHideButton.textContent = "Show"
			if (editing) {
				editing = false
				editStyleButton.textContent = "Open Editor"
				chatContainer.style.overflowY = "auto"
				$("#chatContainer").resizable("destroy")
				$("#chatContainer").draggable("destroy")
				chatContainer.onmousedown = mousedown
				chatContainer.onmouseup = mouseup
				chatContainer.onmousemove = mousemove
				gameCanvas.style.pointerEvents = "auto"
			}
		}
	}
	document.getElementById("chatHolder").appendChild(roomChatSettingsContainer)

	const roomChatBoxInput = document.createElement("input")
	roomChatBoxInput.setAttribute("autocomplete", "off")
	roomChatBoxInput.setAttribute("aria-autocomplete", "none")
	roomChatBoxInput.id = "roomChatBoxInput"
	roomChatBoxInput.type = "text"
	roomChatBoxInput.placeholder = "Enter Private Message"
	roomChatBoxInput.maxLength = 50
	roomChatBoxInput.style.display = "none"
	document.getElementById("chatHolder").appendChild(roomChatBoxInput)

	const popupContainer = document.createElement("div")
	popupContainer.id = "popupContainer"
	popupContainer.style.display = "none"

	const popupContainerInput = document.createElement("input")
	popupContainerInput.setAttribute("autocomplete", "off")
	popupContainerInput.setAttribute("aria-autocomplete", "none")
	popupContainerInput.id = "popupContainerInput"
	popupContainerInput.className = "roomChatSettingButton"
	popupContainerInput.type = "text"
	popupContainerInput.placeholder = "Enter username"
	popupContainer.appendChild(popupContainerInput)

	const popupContainerokButton = document.createElement("div")
	popupContainerokButton.className = "roomChatSettingButton storeTab"
	popupContainerokButton.textContent = "OK"
	popupContainer.appendChild(popupContainerokButton)

	const popupContainercancelButton = document.createElement("div")
	popupContainercancelButton.className = "roomChatSettingButton storeTab"
	popupContainercancelButton.textContent = "Cancel"
	popupContainercancelButton.onclick = function () {
		popupContainer.style.display = "none"
		if (document.getElementById("chatHolder").style.display != "none") {
			roomChatSettingsContainer.style.display = "block"
		}
	}
	popupContainer.appendChild(popupContainercancelButton)
	document.getElementById("chatHolder").appendChild(popupContainer)

	new MutationObserver((mutations) => {
		mutations.forEach((mutationRecord) => {
			if (document.getElementById("chatHolder").style.display != "block") {
				popupContainer.style.display = "none"
				document.getElementById("chatBox").hidden = false
				roomChatBoxInput.style.display = "none"
				roomChatBoxInput.value = ""
				if (editing) {
					editing = false
					editStyleButton.textContent = "Open Editor"
					chatContainer.style.overflowY = "auto"
					$("#chatContainer").resizable("destroy")
					$("#chatContainer").draggable("destroy")
					chatContainer.onmousedown = mousedown
					chatContainer.onmouseup = mouseup
					chatContainer.onmousemove = mousemove
					gameCanvas.style.pointerEvents = "auto"
				}
			}
		})
	}).observe(document.getElementById("chatHolder"), {
		attributes: true,
		attributeFilter: ["style"]
	})

	let sendMessage = () => {}
	window.addEventListener("keydown", (event) => {
		if (event.code != "Enter") return

		if (event.shiftKey) {
			roomChatSettingsContainer.style.display = "block"
			document.getElementById("chatBox").hidden = true
			if (connected) {
				roomChatBoxInput.style.display = "inline-block"
				const interval = setInterval(() => {
					roomChatBoxInput.focus()
					if (document.activeElement == roomChatBoxInput) {
						clearInterval(interval)
					}
				}, 10)
			}
		} else {
			roomChatSettingsContainer.style.display = "none"
			if (document.getElementById("chatBox").hidden && roomChatBoxInput.value != "") {
				if (connected) {
					sendMessage(roomChatBoxInput.value)
				}
				roomChatBoxInput.value = ""
				document.getElementById("chatBox").hidden = false
				roomChatBoxInput.style.display = "none"
			}
		}
	})

	function copy(text) {
		var input = document.createElement("textarea")
		input.innerHTML = text
		document.body.appendChild(input)
		input.select()
		var result = document.execCommand("copy")
		document.body.removeChild(input)
		return result
	}

	function showSystemMessage(msg) {
		const needToScroll = chatContainer.scrollTop + chatContainer.clientHeight >= chatContainer.scrollHeight - 5
		const container = document.createElement("div")
		container.className = "systemmsgholder"
		const systemmsgholder = document.createElement("span")
		systemmsgholder.innerText = "* " + msg
		container.appendChild(systemmsgholder)
		chatContainer.appendChild(container)
		if (chatContainer.childElementCount > 250) {
			chatContainer.removeChild(chatContainer.firstChild)
		}
		if (needToScroll) {
			chatContainer.scrollTop = chatContainer.scrollHeight
		}
	}

	function showChatMessage(owner, msg) {
		const needToScroll = chatContainer.scrollTop + chatContainer.clientHeight >= chatContainer.scrollHeight - 5
		const container = document.createElement("div")
		container.className = "chatmsgholder"
		const nameholder = document.createElement("span")
		nameholder.innerText = owner + ": "
		container.appendChild(nameholder)
		const chatmsgholder = document.createElement("span")
		chatmsgholder.innerText = msg.substring(0, 50)
		chatmsgholder.style.color = "rgba(255, 255, 255, 0.6)"
		container.appendChild(chatmsgholder)
		chatContainer.appendChild(container)
		if (chatContainer.childElementCount > 250) {
			chatContainer.removeChild(chatContainer.firstChild)
		}
		if (needToScroll) {
			chatContainer.scrollTop = chatContainer.scrollHeight
		}
	}

	let myselfLeft = false
	joinRoomButton.addEventListener("click", () => {
		peer = new Peer()
		peer.on("open", async (id) => {
			myID = id
			if (myID == null) return

			popupContainerInput.value = ""
			popupContainerInput.placeholder = "Enter Room ID"
			popupContainer.style.display = "block"
			roomChatSettingsContainer.style.display = "none"
			popupContainerInput.focus()
			popupContainerokButton.onclick = function () {
				const roomID = popupContainerInput.value
				if (roomID == null || roomID == "") {
					document.getElementById("chatButton").click()
					return
				}

				popupContainerInput.value = ""
				popupContainerInput.placeholder = "Enter Username"
				popupContainer.style.display = "block"
				roomChatSettingsContainer.style.display = "none"
				popupContainerInput.focus()
				popupContainerokButton.onclick = function () {
					document.getElementById("chatButton").click()
					const name = popupContainerInput.value
					if (name == null || name == "") return

					conn = peer.connect(roomID)
					conn.on("open", () => {
						connected = true
						chatContainer.innerHTML = ""
						chatContainer.style.display = "block"
						toggleHideButton.textContent = "Hide"
						conn.on("data", (data) => {
							if (data.type === 0) {
								conn.send({
									name: name,
									peerID: myID,
									type: 0
								})
							} else if (data.type === 1) {
								// SYSTEM MESSAGE
								showSystemMessage(data.msg)
							} else if (data.type === 2) {
								// SOMEONE SEND MESSAGE
								showChatMessage(data.owner, data.msg)
							}
						})
					})

					myselfLeft = false
					conn.on("close", () => {
						document.getElementById("chatButton").click()
						connected = false
						joinRoomButton.style.display = "inline-block"
						createRoomButton.style.display = "inline-block"
						copyRoomIDButton.style.display = "none"
						leaveRoomButton.style.display = "none"
						if (!myselfLeft) {
							showSystemMessage("You left the chat room due to either a lost connection or the chat room being closed")
						}
					})

					sendMessage = (msg) => {
						if (msg == "/clear") {
							chatContainer.innerHTML = ""
							return
						}
						conn.send({
							type: 1,
							peerID: myID,
							msg: msg
						})
					}

					joinRoomButton.style.display = "none"
					createRoomButton.style.display = "none"
					copyRoomIDButton.onclick = function () {
						copy(roomID)
					}
					copyRoomIDButton.style.display = "inline-block"
					leaveRoomButton.style.display = "inline-block"
					leaveRoomButton.onclick = function () {
						document.getElementById("chatButton").click()
						myselfLeft = true
						conn.close()
						peer.destroy()
						connected = false
						joinRoomButton.style.display = "inline-block"
						createRoomButton.style.display = "inline-block"
						copyRoomIDButton.style.display = "none"
						leaveRoomButton.style.display = "none"
						showSystemMessage("You left the chat room")
					}
				}
			}
		})
	})

	createRoomButton.addEventListener("click", () => {
		peer = new Peer()
		peer.on("open", (id) => {
			myID = id
			if (myID == null) return

			popupContainerInput.value = ""
			popupContainerInput.placeholder = "Enter Username"
			popupContainer.style.display = "block"
			roomChatSettingsContainer.style.display = "none"
			popupContainerInput.focus()
			popupContainerokButton.onclick = function () {
				document.getElementById("chatButton").click()
				const name = popupContainerInput.value
				if (name == null || name == "") return

				connected = true
				chatContainer.innerHTML = ""
				chatContainer.style.display = "block"
				toggleHideButton.textContent = "Hide"
				let allConnections = [
					{
						name: name + "[1]",
						peerID: myID,
						conn: null
					}
				]
				let usernameCounter = 1
				showSystemMessage("Room created")
				copy(myID)
				showSystemMessage("Room ID copied")
				peer.on("connection", (connection) => {
					connection.on("open", () => {
						connection.on("data", (data) => {
							if (data.type === 0) {
								// RECEIVED JOIN DATA (peerID, name, type)
								usernameCounter++
								allConnections.push({
									name: `${data.name}[${usernameCounter}]`,
									peerID: data.peerID,
									conn: connection
								})
								allConnections.forEach((e) => {
									if (e.conn == null) return

									e.conn.send({
										type: 1,
										peerID: data.peerID,
										msg: `${data.name}[${usernameCounter}] has joined the chat room`
									})
								})
								showSystemMessage(`${data.name}[${usernameCounter}] has joined the chat room`)
							} else if (data.type === 1) {
								// RECEIVE SEND MESSAGE (peerID, type, msg)
								for (let index = 0; index < allConnections.length; index++) {
									if (allConnections[index].peerID == data.peerID) {
										allConnections.forEach((e) => {
											if (e.conn == null) return
											e.conn.send({
												type: 2,
												owner: allConnections[index].name,
												msg: data.msg
											})
										})
										showChatMessage(allConnections[index].name, data.msg)
										break
									}
								}
							}
						})
						connection.send({ type: 0 })
					})

					const otherpeerID = connection.peer
					connection.on("close", () => {
						for (let index = 0; index < allConnections.length; index++) {
							if (allConnections[index].peerID == otherpeerID) {
								const name = allConnections[index].name
								allConnections.splice(index, 1)
								allConnections.forEach((e) => {
									if (e.conn == null) return
									e.conn.send({
										type: 1,
										peerID: otherpeerID,
										msg: `${name} has left the chat room`
									})
								})
								showSystemMessage(`${name} has left the chat room`)
								break
							}
						}
					})
				})

				sendMessage = (msg) => {
					if (msg == "/clear") {
						chatContainer.innerHTML = ""
						return
					}
					allConnections.forEach((e) => {
						if (e.conn == null) return
						e.conn.send({
							type: 2,
							owner: name + "[1]",
							msg: msg
						})
					})
					showChatMessage(name + "[1]", msg)
				}

				joinRoomButton.style.display = "none"
				createRoomButton.style.display = "none"
				copyRoomIDButton.onclick = function () {
					copy(myID)
					showSystemMessage("Room ID copied")
				}
				copyRoomIDButton.style.display = "inline-block"
				deleteRoomButton.style.display = "inline-block"
				deleteRoomButton.onclick = function () {
					document.getElementById("chatButton").click()
					peer.destroy()
					connected = false
					joinRoomButton.style.display = "inline-block"
					createRoomButton.style.display = "inline-block"
					copyRoomIDButton.style.display = "none"
					deleteRoomButton.style.display = "none"
				}
			}
		})
	})
})()
欢迎访问Greasy Fork镜像
