styling fixes mainly for 001b hub
This commit is contained in:
parent
cd170dc471
commit
1f920c018c
1 changed files with 38 additions and 13 deletions
|
@ -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"]) {
|
||||||
|
|
Loading…
Reference in a new issue