Arras.io Chat

Use Right Shift button to enable/disable chat
目前為 2023-01-12 提交的版本，檢視最新版本。
安裝腳本 ?
換行
// ==UserScript==
// @name        Arras.io Chat
// @match	    *://arras.io/*
// @match       *://arras.netlify.app/*
// @match       *://arrax.io/*
// @match       *://arras.cx/*
// @author      Inellok
// @description Use Right Shift button to enable/disable chat
// @namespace   Inellok Labs.
// @version     1.5
// @run-at      document-start
// @license     MIT
// ==/UserScript==


(function() {
	let canvas = document.getElementById("canvas");
	canvas.style.zIndex = 1;
	canvas.style.position = "absolute";

	let name = "unnamed";
    let nameInput = document.getElementById("optName");
	let lockhash = "";


	let info_container = document.createElement("div");
	info_container.innerText = "Arras.io Chat (by Inellok)";
	info_container.style.marginLeft = "40%";
	info_container.style.color = "white";
	info_container.style.opacity = "1";


	let chat_container = document.createElement("div");
	chat_container.style.marginLeft = "2%";
	chat_container.style.color = "red";
	chat_container.style.opacity = "1";
	chat_container.style.height = "88%";
	chat_container.fontSize = "100%";

	let msg_container = document.createElement("input");

	msg_container.placeholder = "message";
	msg_container.style.marginLeft = "2%";
	msg_container.style.color = "black";
	msg_container.style.opacity = "1";
	msg_container.style.height = "5%";
	msg_container.style.width = "70%";
	msg_container.style.fontSize = "110%";


	let send_container = document.createElement("button");

	send_container.innerText = "SEND / UPDATE";
	send_container.style.marginLeft = "2%";
	send_container.style.color = "black";
	send_container.style.opacity = "1";
	send_container.style.height = "5%";
	send_container.style.width = "25%";
	send_container.style.fontSize = "60%";

	send_container.onclick = function() {
		sendEverything();

		return false;
	}

	let mainContainer = document.createElement("div");
	mainContainer.style = `
    width:50%;
    height:85%;
    background:#000000;
    opacity: 90%;
    margin: auto;
    font-size: 150%;
    visibility:hidden;
    z-index:2;
    position:absolute;
    margin-left: 20%`;

	msg_container.addEventListener("keydown", (e) => {
		e.stopPropagation();
		if (e.code === "Enter" && document.activeElement === msg_container) {
			sendEverything();
			msg_container.value = "";
		}

		if (e.code === "ShiftRight") {
			if (mainContainer.style.visibility === "hidden") {
				mainContainer.style.visibility = "visible";
			} else {
				mainContainer.style.visibility = "hidden";
			}
		}
	});

	mainContainer.appendChild(info_container);
	mainContainer.appendChild(chat_container);
	mainContainer.appendChild(msg_container);
	mainContainer.appendChild(send_container);
	document.body.appendChild(mainContainer);

	window.addEventListener("keydown", (e) => {
		if (e.code === "ShiftRight") {
			if (mainContainer.style.visibility === "hidden") {
				mainContainer.style.visibility = "visible";
			} else {
				mainContainer.style.visibility = "hidden";
			}
		}


	});

	function sendEverything() {
		let xhr = new XMLHttpRequest();
		xhr.open("POST", "https://arrasio-chat.glitch.me/");
		xhr.setRequestHeader("Accept", "plain/text");
		xhr.setRequestHeader("Content-Type", "plain/text");
		xhr.onreadystatechange = function() {
			if (xhr.readyState === 4) {
				chat_container.innerText = "";
				let msgs = JSON.parse(xhr.responseText);
				for (let i = 0; i < msgs.length; ++i) {
					if (lockhash === msgs[i].srv) {
						let msg = msgs[i].nick + ": " + msgs[i].message;
						chat_container.innerText += (msg + '\n');
					}
				}
			}
		};

		lockhash = "";
		let started = false;
		for (let i = 0; i < location.hash.length; i++) {
			if (location.hash[i] === '#') {
				started = true;
				continue
			}
			if (started) {
				lockhash += location.hash[i];
			}
		}

        console.log(name, lockhash);
		let data = JSON.stringify({
			srv: lockhash,
			nick: nameInput.value,
			message: msg_container.value
		});
		xhr.send(data);
	}
})();