QOL update

global/globalStyle.css

@@ -4,6 +4,7 @@
   --navBar_SecondInner: #344b6c;
   --navBarBtn_Inner: #474747;
   --navBarBtn_Border: #232323;
+  --brightBlue: #569cd6;
   --pxDensity: 1;
   --pxDensityPx: 1px;
   --bottomPxMargin: 1px;
@@ -50,4 +51,52 @@ canvas {
   background-color: transparent;
   border: none;
   color: inherit;
+}
+.encased {
+  display: inline-block;
+  background-color: var(--navBarBtn_Inner);
+  box-shadow: calc(1px * var(--pxDensity)) 0px var(--navBarBtn_Border),
+              calc(-1px * var(--pxDensity)) 0px var(--navBarBtn_Border),
+              0px calc(1px * var(--pxDensity)) var(--navBarBtn_Border),
+              0px calc(-1px * var(--pxDensity)) var(--navBarBtn_Border);
+
+  padding: calc(1px * var(--pxDensity));
+  margin: calc(3px * var(--pxDensity)) calc(3px * var(--pxDensity)) 0% 0%;
+  width: round(auto, var(--pxDensity));
+  height: calc(6px * var(--pxDensity));
+}
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+.switch input {
+  display: none;
+}
+.switchDecor {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--navBarBtn_Border);
+  transition: 0.2s steps(2, end);
+}
+.switchDecor:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: var(--navBarBtn_Inner);
+  transition: 0.2s steps(2, end);
+}
+.switch input:checked + .switchDecor {
+  background-color: var(--brightBlue);
+}
+.switch input:checked + .switchDecor:before {
+  transform: translateX(26px);
 }

global/loadingScreen.js

@@ -9,9 +9,18 @@ loadingScreenEl.className = "bgDiv"
 loadingScreenEl.innerHTML = `
   <img class="loadingImg" draggable="false" src="/assets/byteDiceBlinkAnim_32x32.png">
 
-  <button class="pxFont" onclick="stopShowingLoading()" id="loadingCornerText">
-    Press ESC to instantly close the loading screen<br>Or click me to never see it again.
-  </button>
+  <div style="margin-left: calc(3px * var(--pxDensity)); display: flex;">
+    <p class="encased" style="height: 100%">
+      Use extended loading screen?<br>
+      <small style="margin: 0px; font-size: 10px;">(For immersion)</small>
+    </p>
+    <div class="encased" style="height: inherit; display: flex;">
+      <label class="switch" style="margin: auto;">
+        <input type="checkbox" name="fakeLoadingToggle" onclick="setShowLoading(this.checked)" ${localStorage["fakeLoading"] != "true" ? "" : "checked"}>
+        <span class="switchDecor"></span>
+      </label>
+    </div>
+  </div>
 
   <p id="loadingText">Loading...<br>Loading files...<br><br>Tip: Tip loading...</p>
 `
@@ -57,11 +66,6 @@ function setLoadingProgress(newText) {
 function startLoadingScreen() {
 	loadingScreenProgress.innerHTML = `Loading...<br><br>Tip: ${selectedTip}`
 
-  if (fakeLoading != "true") {
-    let cText = document.getElementById("loadingCornerText")
-    if (cText) { cText.remove() }
-  }
-
 	const loadDur = randomFloat(2000, 4000)
   debugPrint("loadDur initial", loadDur)
 
@@ -72,7 +76,7 @@ function startLoadingScreen() {
 }
 
 
-function removeLoadingScreen(rmCornerText = false) {
+function removeLoadingScreen() {
   if (!isLoading) { return }
 
   setLoadingProgress("Done!")
@@ -85,18 +89,14 @@ function removeLoadingScreen(rmCornerText = false) {
 
     setTimeout(function() {
       loadingScreenEl.style.left = "100vw"
-      if (rmCornerText) {
-        let cText = document.getElementById("loadingCornerText")
-        if (cText) { cText.remove() }
-      }
       newTip()
     }, fadeOutDur * 1000)
   }, 500)
 }
 
 
-function stopShowingLoading() {
-	localStorage["fakeLoading"] = false
+function setShowLoading(state) {
+	localStorage["fakeLoading"] = state
 }
 
 

global/navBar.js

@@ -6,6 +6,8 @@ function onLoadNavBar() {
   const altString = container.dataset.alt || ""
   alts = altString.replace(" ", "").split(",")
 
+  debugPrint("Navbar alts", alts);
+
   if (!container) { return }
 
   const navBarAligner = document.createElement("div")
@@ -16,21 +18,26 @@ function onLoadNavBar() {
 
 
   for (let btn of navBarJson) {
-    navBar.appendChild(createNavBarBtn(
+    createdBtn = createNavBarBtn(
       btn["icon"]        || "",
       btn["action"]      || "",
       btn["actionValue"] || "",
       btn["iconId"]      || "",
       btn["alt"]         || "",
-      btn["disabled"]    || false
-    ))
+      btn["disabled"]    || false,
+      btn["hidden"]      || false
+    )
+
+    if (createdBtn != null) {
+      navBar.appendChild(createdBtn)
+    }
   }
 
   navBarAligner.appendChild(navBar)
   container.appendChild(navBarAligner)
 }
 
-function createNavBarBtn(icon = "", action = "", actionValue = "", iconId = "", alt = "", disabled = false) {
+function createNavBarBtn(icon = "", action = "", actionValue = "", iconId = "", alt = "", disabled = false, hidden = false) {
   if (alts.includes(alt["name"])) {
     icon        = alt["icon"]        || icon        || ""
     action      = alt["action"]      || action      || ""
@@ -38,6 +45,7 @@ function createNavBarBtn(icon = "", action = "", actionValue = "", iconId = "",
     iconId      = alt["iconId"]      || iconId      || ""
 
     disabled = alt["disabled"] === undefined ? disabled : alt["disabled"] || false;
+    hidden = alt["hidden"] || false;
   }
 
   let onClick
@@ -47,6 +55,8 @@ function createNavBarBtn(icon = "", action = "", actionValue = "", iconId = "",
     default: ""
   }
 
+  if (hidden) { return null; }
+
   let btn = document.createElement("li")
 
   btn.innerHTML = `
@@ -56,7 +66,7 @@ function createNavBarBtn(icon = "", action = "", actionValue = "", iconId = "",
     </button>
   `
 
-  return btn
+  return btn;
 }
 
 async function loadNavBarJson() {

global/screenTransition.js

@@ -3,8 +3,11 @@ let mainDiv = document.getElementById("mainDiv")
 
 function slideTransition(url, event) {
   const ctrlPressed = event.ctrlKey
-  const dur = 500
-  const loadingTime = randomFloat(500, 1500)
+  let dur = 500
+  let loadingTime = randomFloat(500, 1500)
+
+  if (localStorage["fakeLoading"] != "true") { dur = 500; loadingTime = 0; }
+
   debugPrint("loadDur transition", loadingTime)
 
   const slideLeft = `slide-left ${dur / 1000}s cubic-bezier(0, 0, 0, 1.46) forwards`