tgpholly/t00-multiuser
1
0
Fork 0
Code Issues Pull requests Activity Actions

Compare commits

base: tgpholly:cd170dc471262c9eacb2d3e13272950b4cd2ff89
Branches Tags
tgpholly:master
..
compare: tgpholly:e3fb9381179850ab4a9a9e27ea24674b502a48bd
Branches Tags
tgpholly:master

3 commits
cd170dc471 ... e3fb938117

Author SHA1 Message Date
Holly
e3fb938117
logging 2024-05-07 22:17:30 +01:00
Holly
bc7fb72800
prevent group names from overflowing 2024-05-07 21:52:46 +01:00
Holly
1f920c018c
styling fixes mainly for 001b hub 2024-05-07 21:46:52 +01:00
1 changed files with 50 additions and 14 deletions
Show stats Expand all files Collapse all files

64
client/Terminal-00-Multiuser.user.js
View file

@ -32,8 +32,11 @@ if (!window.TE_ACTIVE) {
setInterval(nukeCC, 1000); setInterval(nukeCC, 1000);
} }
const windowLocation = window.location.href;
window.multiprobe_debug = false; window.multiprobe_debug = false;
console.log("[MP] MultiProbe init");
(function() { (function() {
'use strict'; 'use strict';
@ -60,6 +63,7 @@ window.multiprobe_debug = false;
}; };
let cursorImageI = window.getComputedStyle(document.body).cursor; let cursorImageI = window.getComputedStyle(document.body).cursor;
console.log("[MP] Injecting custom styles...");
const styles = document.createElement("style"); const styles = document.createElement("style");
styles.innerHTML = ` styles.innerHTML = `
html { html {
@ -75,6 +79,8 @@ html {
z-index: 999999999; z-index: 999999999;
pointer-events: none; pointer-events: none;
overflow:hidden; overflow:hidden;
text-shadow: none!important;
font-family: Arial,sans-serif;
} }
#otherCursors img { #otherCursors img {
@ -118,6 +124,9 @@ html {
background-color: black; background-color: black;
color: white; color: white;
z-index:9999998; z-index:9999998;
text-shadow: none!important;
font-family: Arial,sans-serif;
font-size: unset !important;
} }
.groupui-popper { .groupui-popper {
@ -141,6 +150,7 @@ html {
height: 2rem; height: 2rem;
line-height: 2rem; line-height: 2rem;
background-color: rgba(255,255,255,0.1); background-color: rgba(255,255,255,0.1);
overflow:hidden;
} }
.groupui-scrollbox { .groupui-scrollbox {
@ -150,6 +160,8 @@ html {
width: 100%; width: 100%;
height: calc(100% - 2rem); height: calc(100% - 2rem);
overflow-y: scroll; overflow-y: scroll;
font-family: Arial,sans-serif;
font-size: unset !important;
} }
.groupui-user { .groupui-user {
@ -195,6 +207,8 @@ kbd {
line-height: 1; line-height: 1;
padding: 2px 4px; padding: 2px 4px;
white-space: nowrap; white-space: nowrap;
font-family: Arial,sans-serif;
font-size: unset !important;
} }
.mplink, .mplink:visited { .mplink, .mplink:visited {
@ -213,10 +227,13 @@ kbd {
localStorage["mpconnectonload"] = true; localStorage["mpconnectonload"] = true;
} }
const bodyMargin = parseInt(window.getComputedStyle(document.body).marginTop.replace("px", "")); let marginComputedStyle = window.getComputedStyle(document.body);
const bodyMarginTop = parseInt(marginComputedStyle.marginTop.replace("px", ""));
const bodyMarginLeft = parseInt(marginComputedStyle.marginLeft.replace("px", ""));
const bodyMarginRight = parseInt(marginComputedStyle.marginRight.replace("px", ""));
const otherCursors = document.createElement("div"); const otherCursors = document.createElement("div");
otherCursors.style.top = `-${((window.scrollY + document.body.getBoundingClientRect().top) - bodyMargin)}px`; otherCursors.style.top = `-${((window.scrollY + document.body.getBoundingClientRect().top) - bodyMarginTop)}px`;
otherCursors.id = "otherCursors"; otherCursors.id = "otherCursors";
document.body.appendChild(otherCursors); document.body.appendChild(otherCursors);
@ -267,22 +284,25 @@ kbd {
setInterval(() => { setInterval(() => {
if (document.body.scrollHeight > window.innerHeight) { if (document.body.scrollHeight > window.innerHeight) {
otherCursors.style = `width:${clientWidth = document.body.getBoundingClientRect().width}px;height:${document.body.scrollHeight}px;top:-${((window.scrollY + document.body.getBoundingClientRect().top) - bodyMargin)}px`; otherCursors.style = `width:${clientWidth = (document.body.getBoundingClientRect().width + bodyMarginRight + bodyMarginLeft)}px;height:${document.body.scrollHeight}px;top:-${((window.scrollY + document.body.getBoundingClientRect().top) - bodyMarginTop)}px;cursor: ${cursorImageI};`;
} else { } else {
otherCursors.style = `width:${clientWidth = document.body.getBoundingClientRect().width}px;height:${window.innerHeight}px;top:-${((window.scrollY + document.body.getBoundingClientRect().top) - bodyMargin)}px`; otherCursors.style = `width:${clientWidth = (document.body.getBoundingClientRect().width + bodyMarginRight + bodyMarginLeft)}px;height:${window.innerHeight}px;top:-${((window.scrollY + document.body.getBoundingClientRect().top) - bodyMarginTop)}px;cursor: ${cursorImageI};`;
} }
}, 1000); }, 1000);
let needsToUpdate = false; let needsToUpdate = false;
const versionFetchAddress = window.location.href.replace("127.0.0.1", "localhost").includes("//localhost:") ? "http://localhost:38194/api/version" : "https://multiprobe.eusv.net/api/version"; console.log("[MP] Checking for new versions...");
const versionFetchAddress = windowLocation.replace("127.0.0.1", "localhost").includes("//localhost:") ? "http://localhost:38194/api/version" : "https://multiprobe.eusv.net/api/version";
fetch(versionFetchAddress, { method: "post" }).then(response => { fetch(versionFetchAddress, { method: "post" }).then(response => {
console.log("hi");
response.text().then(versionNumberRaw => { response.text().then(versionNumberRaw => {
const versionNumber = parseInt(versionNumberRaw); const versionNumber = parseInt(versionNumberRaw);
if (versionNumber > USERSCRIPT_VERSION) { if (versionNumber > USERSCRIPT_VERSION) {
// We're out of date >:( // We're out of date >:(
needsToUpdate = true; needsToUpdate = true;
createUpdateDialog(`${versionNumberRaw.slice(0, versionNumberRaw.length - 1)}.${versionNumberRaw.slice(-1)}`); createUpdateDialog(`${versionNumberRaw.slice(0, versionNumberRaw.length - 1)}.${versionNumberRaw.slice(-1)}`);
console.log("[MP] We're out of date :(");
} else {
console.log("[MP] We're up to date!");
} }
}); });
}); });
@ -427,6 +447,13 @@ kbd {
} }
} }
window.onkeydown = (e) => {
if (!windowContainer && e.key === "F1") {
localStorage["mpshowfirsttime"] = "true";
createFirstTimeDialog();
}
};
function lerp(value1, value2, amount) { function lerp(value1, value2, amount) {
return value1 + (value2 - value1) * amount; return value1 + (value2 - value1) * amount;
} }
@ -469,15 +496,17 @@ kbd {
function doConnect(apiKey) { function doConnect(apiKey) {
const Buffer = getBufferClass(); const Buffer = getBufferClass();
ws = new WebSocket(window.location.href.includes("//localhost:") ? "ws://localhost:38195" : "wss://ws.eusv.net/t00mp"); console.log("[MP] Connecting to realtime server...");
ws = new WebSocket(windowLocation.includes("//localhost:") ? "ws://localhost:38195" : "wss://ws.eusv.net/t00mp");
let keepAliveInterval; let keepAliveInterval;
ws.onopen = () => { ws.onopen = () => {
console.log("[MP] Connected! Authenticating...");
otherCursors.innerHTML = ""; otherCursors.innerHTML = "";
selfCursor = new RemoteClient(localStorage["t00mp_username"]); selfCursor = new RemoteClient(localStorage["t00mp_username"]);
selfCursor.probeImage.style.visibility = "hidden"; selfCursor.probeImage.style.visibility = "hidden";
selfCursor.element.style.visibility = localStorage["t00mp_cursorStyle"] ?? "hidden"; selfCursor.element.style.visibility = localStorage["t00mp_cursorStyle"] ?? "hidden";
selfCursor.hasBeenMoved = true; selfCursor.hasBeenMoved = true;
const currentPage = window.location.href.split("/").slice(3).join("/"); const currentPage = windowLocation.split("/").slice(3).join("/");
ws.send(createWriter(Endian.LE, 4 + apiKey.length + currentPage.length) ws.send(createWriter(Endian.LE, 4 + apiKey.length + currentPage.length)
.writeByte(MessageType.ClientDetails) .writeByte(MessageType.ClientDetails)
.writeShortString(apiKey) .writeShortString(apiKey)
@ -512,6 +541,7 @@ kbd {
if (!needsToUpdate) { if (!needsToUpdate) {
createFirstTimeDialog(); createFirstTimeDialog();
} }
console.log("[MP] Authenticated!");
break; break;
} }
case MessageType.ClientJoined: case MessageType.ClientJoined:
@ -598,7 +628,7 @@ kbd {
function createOnlineDialog() { function createOnlineDialog() {
const bg = document.createElement("div"); const bg = document.createElement("div");
windowContainer = bg; windowContainer = bg;
bg.style = "z-index:1000000000;position:fixed;top:0px;left:0px;width:100%;height:100%;background-color:rgba(0,0,0,0.5)"; bg.style = "z-index:1000000000;position:fixed;top:0px;left:0px;width:100%;height:100%;background-color:rgba(0,0,0,0.5);text-shadow: none!important;font-family: Arial,sans-serif;font-size: unset !important;";
const dialog = document.createElement("div"); const dialog = document.createElement("div");
dialog.style = "position:absolute;top:50%;left:50%;min-width:15rem;background-color:#343434;padding:1rem;transform:translate(-50%,-50%);text-align:center;color:white"; dialog.style = "position:absolute;top:50%;left:50%;min-width:15rem;background-color:#343434;padding:1rem;transform:translate(-50%,-50%);text-align:center;color:white";
bg.appendChild(dialog); bg.appendChild(dialog);
@ -659,7 +689,7 @@ kbd {
function createUpdateDialog(versionNumber) { function createUpdateDialog(versionNumber) {
const bg = document.createElement("div"); const bg = document.createElement("div");
bg.style = "z-index:1000000000;position:fixed;top:0px;left:0px;width:100%;height:100%;background-color:rgba(0,0,0,0.5)"; bg.style = "z-index:1000000000;position:fixed;top:0px;left:0px;width:100%;height:100%;background-color:rgba(0,0,0,0.5);text-shadow: none!important;font-family: Arial,sans-serif;font-size: unset !important;";
const dialog = document.createElement("div"); const dialog = document.createElement("div");
dialog.style = "position:absolute;top:50%;left:50%;min-width:15rem;background-color:#343434;padding:1rem;transform:translate(-50%,-50%);text-align:center;color:white"; dialog.style = "position:absolute;top:50%;left:50%;min-width:15rem;background-color:#343434;padding:1rem;transform:translate(-50%,-50%);text-align:center;color:white";
bg.appendChild(dialog); bg.appendChild(dialog);
@ -694,7 +724,7 @@ kbd {
const bg = document.createElement("div"); const bg = document.createElement("div");
windowContainer = bg; windowContainer = bg;
bg.style = "z-index:1000000000;position:fixed;top:0px;left:0px;width:100%;height:100%;background-color:rgba(0,0,0,0.5)"; bg.style = "z-index:1000000000;position:fixed;top:0px;left:0px;width:100%;height:100%;background-color:rgba(0,0,0,0.5);text-shadow: none!important;font-family: Arial,sans-serif;font-size: unset !important;";
const dialog = document.createElement("div"); const dialog = document.createElement("div");
dialog.style = "position:absolute;top:50%;left:50%;min-width:15rem;background-color:#343434;padding:1rem;transform:translate(-50%,-50%);text-align:center;color:white"; dialog.style = "position:absolute;top:50%;left:50%;min-width:15rem;background-color:#343434;padding:1rem;transform:translate(-50%,-50%);text-align:center;color:white";
bg.appendChild(dialog); bg.appendChild(dialog);
@ -719,6 +749,10 @@ kbd {
groupLI.innerHTML = "You can show/hide the party sidebar if you are in one by pressing <kbd>G</kbd>"; groupLI.innerHTML = "You can show/hide the party sidebar if you are in one by pressing <kbd>G</kbd>";
actionList.appendChild(groupLI); actionList.appendChild(groupLI);
const helpTip = document.createElement("li");
helpTip.innerHTML = "If you press <kbd>F1</kbd> you can open this help again.";
actionList.appendChild(helpTip);
const buttons = document.createElement("div"); const buttons = document.createElement("div");
buttons.style.marginTop = "1rem"; buttons.style.marginTop = "1rem";
@ -739,7 +773,7 @@ kbd {
function createLoginDialog() { function createLoginDialog() {
const bg = document.createElement("div"); const bg = document.createElement("div");
windowContainer = bg; windowContainer = bg;
bg.style = "z-index:1000000000;position:fixed;top:0px;left:0px;width:100%;height:100%;background-color:rgba(0,0,0,0.5)"; bg.style = "z-index:1000000000;position:fixed;top:0px;left:0px;width:100%;height:100%;background-color:rgba(0,0,0,0.5);text-shadow: none!important;font-family: Arial,sans-serif;font-size: unset !important;";
const dialog = document.createElement("div"); const dialog = document.createElement("div");
dialog.style = "position:absolute;top:50%;left:50%;width:15rem;background-color:#343434;padding-bottom:1rem;transform:translate(-50%,-50%);text-align:center;color:white"; dialog.style = "position:absolute;top:50%;left:50%;width:15rem;background-color:#343434;padding-bottom:1rem;transform:translate(-50%,-50%);text-align:center;color:white";
bg.appendChild(dialog); bg.appendChild(dialog);
@ -791,7 +825,7 @@ kbd {
doNotButton.disabled = true; doNotButton.disabled = true;
title.innerText = "Authenticating..."; title.innerText = "Authenticating...";
fetch(window.location.href.replace("127.0.0.1", "localhost").includes("//localhost:") ? "http://localhost:38194/api/login" : "https://multiprobe.eusv.net/api/login", { fetch(windowLocation.replace("127.0.0.1", "localhost").includes("//localhost:") ? "http://localhost:38194/api/login" : "https://multiprobe.eusv.net/api/login", {
method: "POST", method: "POST",
body: `username=${encodeURIComponent(username.value)}&password=${encodeURIComponent(password.value)}`, body: `username=${encodeURIComponent(username.value)}&password=${encodeURIComponent(password.value)}`,
headers: { headers: {
@ -825,7 +859,7 @@ kbd {
} }
const openMenuButton = document.createElement("button"); const openMenuButton = document.createElement("button");
openMenuButton.style = "opacity:0.25;position:fixed;top:0px;right:0px;z-index:9999999;margin:4px;background-color:black;color:white;border:1px solid white"; openMenuButton.style = "opacity:0.25;position:fixed;top:0px;right:0px;z-index:9999999;margin:4px;background-color:black;color:white;border:1px solid white;text-shadow: none!important;font-family: Arial,sans-serif;font-size: unset !important;";
openMenuButton.innerText = "MultiProbe Menu"; openMenuButton.innerText = "MultiProbe Menu";
openMenuButton.onclick = () => { openMenuButton.onclick = () => {
if (ws || localStorage["mpapikey"]) { if (ws || localStorage["mpapikey"]) {
@ -839,4 +873,6 @@ kbd {
if (localStorage["mpapikey"] && localStorage["mpapikey"] !== "" && localStorage["mpconnectonload"] === "true") { if (localStorage["mpapikey"] && localStorage["mpapikey"] !== "" && localStorage["mpconnectonload"] === "true") {
doConnect(localStorage["mpapikey"]); doConnect(localStorage["mpapikey"]);
} }
console.log("[MP] Init complete.");
})(); })();