QOL update

data/navBar.json

@@ -16,10 +16,7 @@
     "actionValue": "https://github.com/ByteDice"
   },
   {
-    "icon": "powerplates_8x8.png",
+    "hidden": true,
-    "action": "navigate",
-    "actionValue": "/powerplates",
-    "disabled": true,
     "alt": {
       "name": "byte",
       "icon": "dice3_8x8.png",

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">
+  <div style="margin-left: calc(3px * var(--pxDensity)); display: flex;">
-    Press ESC to instantly close the loading screen<br>Or click me to never see it again.
+    <p class="encased" style="height: 100%">
-  </button>
+      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() {
+function setShowLoading(state) {
-	localStorage["fakeLoading"] = false
+	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
+  let dur = 500
-  const loadingTime = randomFloat(500, 1500)
+  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`

sitemap.xml

@@ -5,16 +5,16 @@
 		<priority>1.00</priority>
 		<lastmod>2025-01-28</lastmod>
 	</url>
-	<url>
-		<loc>https://www.bytedice.net/404.html</loc>
-		<priority>0.67</priority>
-		<lastmod>2025-01-25</lastmod>
-	</url>
 	<url>
 		<loc>https://www.bytedice.net/toys</loc>
 		<priority>0.67</priority>
 		<lastmod>2025-01-28</lastmod>
 	</url>
+	<url>
+		<loc>https://www.bytedice.net/404.html</loc>
+		<priority>0.67</priority>
+		<lastmod>2025-01-25</lastmod>
+	</url>
 	<url>
 		<loc>https://www.bytedice.net/toys/license</loc>
 		<priority>0.33</priority>

toys/license/index.html

@@ -61,7 +61,7 @@
         </h1><br>
         
         <h1>Basic</h1><br>
-        <form>
+        <form class="licenseForm">
           <div class="paramContainer"><label for="titleInput">Title</label><input type="text" id="titleInput" name="titleInput" value="Boykisser license"></div>
           <div class="paramContainer"><label for="authorInput">For/Author</label><input type="text" id="authorInput" name="authorInput" value="Byte Dice"></div>
           <div class="paramContainer"><label for="createdInput">Issued</label><input type="text" id="createdInput" name="createdInput" value="2025-01-01"></div>
@@ -91,16 +91,16 @@
         </form><br>
 
         <h1>Extra</h1><br>
-        <form>
+        <form class="licenseForm">
-          <label for="soon1">Soon...</label><input name="soon1" value="Does nothing"><br>
+          <label for="soon1">Soon...</label><input type="text" name="soon1" value="Does nothing"><br>
           <!-- decorations like
             the QR-code and other "accessories"
           -->
         </form><br>
 
         <h1>Advanced</h1><br>
-        <form>
+        <form class="licenseForm">
-          <label for="soon2">Soon...</label><input name="soon2" value="Does nothing"><br>
+          <label for="soon2">Soon...</label><input type="text" name="soon2" value="Does nothing"><br>
           <!-- 
             license border radius
             pic border radius

toys/license/options.css

@@ -14,7 +14,7 @@
   margin: 0%;
   max-width: calc(100% - (4px * var(--pxDensity)));
 }
-label {
+.licenseForm label {
   background-color: var(--navBarBtn_Inner);
   box-shadow: calc(1px * var(--pxDensity)) 0px var(--navBarBtn_Border),
               calc(-1px * var(--pxDensity)) 0px var(--navBarBtn_Border),
@@ -27,7 +27,7 @@ label {
   width: round(auto, var(--pxDensity));
   height: calc(6px * var(--pxDensity));
 }
-input {
+.licenseForm input[type="text"] {
   font-family: "Roboto", sans-serif;
   background-color: var(--navBarBtn_Inner);
   box-shadow: calc(1px * var(--pxDensity)) 0px var(--navBarBtn_Border),

toys/license/style.css

@@ -11,7 +11,7 @@
 }
 a {
   cursor: pointer;
-  color: #0000EE;
+  color: #3333EE;
   text-decoration: underline;
   font-weight: normal;
 }