From 1f920c018c176d38d5270ee92dec5a8b5889a542 Mon Sep 17 00:00:00 2001 From: Holly Date: Tue, 7 May 2024 21:46:52 +0100 Subject: [PATCH] styling fixes mainly for 001b hub --- client/Terminal-00-Multiuser.user.js | 51 +++++++++++++++++++++------- 1 file changed, 38 insertions(+), 13 deletions(-) diff --git a/client/Terminal-00-Multiuser.user.js b/client/Terminal-00-Multiuser.user.js index 01ed034..f25a8e6 100644 --- a/client/Terminal-00-Multiuser.user.js +++ b/client/Terminal-00-Multiuser.user.js @@ -32,6 +32,7 @@ if (!window.TE_ACTIVE) { setInterval(nukeCC, 1000); } +const windowLocation = window.location.href; window.multiprobe_debug = false; (function() { @@ -75,6 +76,8 @@ html { z-index: 999999999; pointer-events: none; overflow:hidden; + text-shadow: none!important; + font-family: Arial,sans-serif; } #otherCursors img { @@ -118,6 +121,9 @@ html { background-color: black; color: white; z-index:9999998; + text-shadow: none!important; + font-family: Arial,sans-serif; + font-size: unset !important; } .groupui-popper { @@ -150,6 +156,8 @@ html { width: 100%; height: calc(100% - 2rem); overflow-y: scroll; + font-family: Arial,sans-serif; + font-size: unset !important; } .groupui-user { @@ -195,6 +203,8 @@ kbd { line-height: 1; padding: 2px 4px; white-space: nowrap; + font-family: Arial,sans-serif; + font-size: unset !important; } .mplink, .mplink:visited { @@ -213,10 +223,13 @@ kbd { 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"); - 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"; document.body.appendChild(otherCursors); @@ -267,14 +280,14 @@ kbd { setInterval(() => { 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 { - 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); 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"; + 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 => { console.log("hi"); response.text().then(versionNumberRaw => { @@ -425,8 +438,16 @@ kbd { groupPopper.click(); } } + console.log(e.key); } + window.onkeydown = (e) => { + if (!windowContainer && e.key === "F1") { + localStorage["mpshowfirsttime"] = "true"; + createFirstTimeDialog(); + } + }; + function lerp(value1, value2, amount) { return value1 + (value2 - value1) * amount; } @@ -469,7 +490,7 @@ kbd { function doConnect(apiKey) { const Buffer = getBufferClass(); - ws = new WebSocket(window.location.href.includes("//localhost:") ? "ws://localhost:38195" : "wss://ws.eusv.net/t00mp"); + ws = new WebSocket(windowLocation.includes("//localhost:") ? "ws://localhost:38195" : "wss://ws.eusv.net/t00mp"); let keepAliveInterval; ws.onopen = () => { otherCursors.innerHTML = ""; @@ -477,7 +498,7 @@ kbd { selfCursor.probeImage.style.visibility = "hidden"; selfCursor.element.style.visibility = localStorage["t00mp_cursorStyle"] ?? "hidden"; 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) .writeByte(MessageType.ClientDetails) .writeShortString(apiKey) @@ -598,7 +619,7 @@ kbd { function createOnlineDialog() { const bg = document.createElement("div"); 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"); 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); @@ -659,7 +680,7 @@ kbd { function createUpdateDialog(versionNumber) { 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"); 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); @@ -694,7 +715,7 @@ kbd { const bg = document.createElement("div"); 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"); 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); @@ -719,6 +740,10 @@ kbd { groupLI.innerHTML = "You can show/hide the party sidebar if you are in one by pressing G"; actionList.appendChild(groupLI); + const helpTip = document.createElement("li"); + helpTip.innerHTML = "If you press F1 you can open this help again."; + actionList.appendChild(helpTip); + const buttons = document.createElement("div"); buttons.style.marginTop = "1rem"; @@ -739,7 +764,7 @@ kbd { function createLoginDialog() { const bg = document.createElement("div"); 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"); 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); @@ -791,7 +816,7 @@ kbd { doNotButton.disabled = true; 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", body: `username=${encodeURIComponent(username.value)}&password=${encodeURIComponent(password.value)}`, headers: { @@ -825,7 +850,7 @@ kbd { } 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.onclick = () => { if (ws || localStorage["mpapikey"]) {