styling fixes mainly for 001b hub

This commit is contained in:
Holly Stubbs 2024-05-07 21:46:52 +01:00
parent cd170dc471
commit 1f920c018c
Signed by: tgpholly
GPG key ID: B8583C4B7D18119E

View file

@ -32,6 +32,7 @@ if (!window.TE_ACTIVE) {
setInterval(nukeCC, 1000); setInterval(nukeCC, 1000);
} }
const windowLocation = window.location.href;
window.multiprobe_debug = false; window.multiprobe_debug = false;
(function() { (function() {
@ -75,6 +76,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 +121,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 {
@ -150,6 +156,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 +203,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 +223,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,14 +280,14 @@ 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"; 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"); console.log("hi");
response.text().then(versionNumberRaw => { response.text().then(versionNumberRaw => {
@ -425,8 +438,16 @@ kbd {
groupPopper.click(); groupPopper.click();
} }
} }
console.log(e.key);
} }
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,7 +490,7 @@ 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"); ws = new WebSocket(windowLocation.includes("//localhost:") ? "ws://localhost:38195" : "wss://ws.eusv.net/t00mp");
let keepAliveInterval; let keepAliveInterval;
ws.onopen = () => { ws.onopen = () => {
otherCursors.innerHTML = ""; otherCursors.innerHTML = "";
@ -477,7 +498,7 @@ kbd {
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)
@ -598,7 +619,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 +680,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 +715,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 +740,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 +764,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 +816,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 +850,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"]) {