made EVEN MORE mobile compatible (missing screenTransition tips text & license font)

data/navBar.json

@@ -31,6 +31,11 @@
     "icon": "pauseAnimation_8x8.png",
     "action": "function",
     "actionValue": "pauseAnimBtn('auto')",
-    "iconId": "animationToggle"
+    "iconId": "animationToggle",
+    "disabled": false,
+    "alt": {
+      "name": "playDisabled",
+      "disabled": true
+    }
   }
 ]

global/globalScript.js

@@ -137,7 +137,13 @@ function pauseAnimBtn(state) {
 }
 
 
+function setVh() {
+  document.documentElement.style.setProperty("--vh", window.innerHeight * 0.01 + "px");
+}
+
+
 document.addEventListener("DOMContentLoaded", async function() {
+  
   debugPrint("currentPage", `${CURRENT_PAGE} ${Object.keys(PAGES)[CURRENT_PAGE + 1]}`)
 
   startLoadingScreen()
@@ -180,6 +186,7 @@ document.addEventListener("DOMContentLoaded", async function() {
 
 
 window.addEventListener("resize", function() {
+  document.documentElement.style.setProperty("--vh", window.innerHeight * 0.01 + "px");
   calcPixelDensity()
 
   switch (CURRENT_PAGE) {
@@ -194,6 +201,11 @@ window.addEventListener("resize", function() {
 })
 
 
+if ("scrollRestoration" in history) {
+  history.scrollRestoration = "manual";
+}
+
+
 window.addEventListener("pageshow", (event) => {
   if (event.persisted) {
     // reload page to clear unwanted cache.

global/globalStyle.css

@@ -15,10 +15,10 @@ html {
   background-color: #323232;
   overflow: hidden;
   width: 100vw;
-  height: 100vh;
+  height: calc(var(--vh, 1vh) * 100);
 }
 body {
-  height: 100vh;
+  height: calc(var(--vh, 1vh) * 100);
   background-color: #323232;
   color: #ffffff;
   overflow: hidden;

global/loadingScreen.css

@@ -4,7 +4,7 @@
   top: 0%;
   left: 0%;
   width: 100vw;
-  height: 100vh;
+  height: calc(var(--vh, 1vh) * 100);
 }
 .loadingImg {
   position: absolute;
@@ -19,7 +19,6 @@
   0% {opacity: 100%;}
   100% {opacity: 0%;}
 }
-/* custom pixel 3x5 font */
 #loadingCornerText {
   background-color: transparent;
   color: #ffffff;
@@ -31,8 +30,8 @@
   cursor: pointer;
 }
 #loadingText {
-  position: absolute;
-  bottom: 0;
+  position: fixed;
+  bottom: 0%;
   left: calc(50vw - min(45vw, 250px));
   width: min(90vw, 500px);
   text-align: center;
@@ -40,4 +39,5 @@
   display: flex;
   justify-content: center;
   color: #ffffff;
+  pointer-events: none;
 }

global/navBar.js

@@ -32,11 +32,12 @@ function onLoadNavBar() {
 
 function createNavBarBtn(icon = "", action = "", actionValue = "", iconId = "", alt = "", disabled = false) {
   if (alts.includes(alt["name"])) {
-    icon        = alt["icon"]        || ""
-    action      = alt["action"]      || ""
-    actionValue = alt["actionValue"] || ""
-    iconId      = alt["iconId"]      || ""
-    disabled    = alt["disabled"]    || false
+    icon        = alt["icon"]        || icon        || ""
+    action      = alt["action"]      || action      || ""
+    actionValue = alt["actionValue"] || actionValue || ""
+    iconId      = alt["iconId"]      || iconId      || ""
+
+    disabled = alt["disabled"] === undefined ? disabled : alt["disabled"] || false;
   }
 
   let onClick

global/pxDensity.js

@@ -1,4 +1,4 @@
-let pxDensity = parseFloat(getComputedStyle(document.body).getPropertyValue("--pxDensity"))
+let pxDensity = 1
 let pxDensityDefined = false
 
 let pxWidth = 256
@@ -16,7 +16,7 @@ function calcPixelDensity() {
   document.documentElement.style.setProperty("--pxDensity", widest)
   document.documentElement.style.setProperty("--pxDensityPx", `${widest}px`)
 
-  pxDensity = parseFloat(getComputedStyle(document.body).getPropertyValue("--pxDensity"))
+  pxDensity = widest
 
   pxDensityDefined = true
 }

sitemap.xml

@@ -3,7 +3,7 @@
 	<url>
 		<loc>https://www.bytedice.net</loc>
 		<priority>1.00</priority>
-		<lastmod>2025-01-25</lastmod>
+		<lastmod>2025-01-27</lastmod>
 	</url>
 	<url>
 		<loc>https://www.bytedice.net/404.html</loc>
@@ -13,11 +13,11 @@
 	<url>
 		<loc>https://www.bytedice.net/toys</loc>
 		<priority>0.67</priority>
-		<lastmod>2025-01-26</lastmod>
+		<lastmod>2025-01-27</lastmod>
 	</url>
 	<url>
 		<loc>https://www.bytedice.net/toys/license</loc>
 		<priority>0.33</priority>
-		<lastmod>2025-01-26</lastmod>
+		<lastmod>2025-01-27</lastmod>
 	</url>
 </urlset>

style.css

@@ -18,11 +18,6 @@
   image-rendering: pixelated;
   transform: translate(-50%, -50%);
 }
-#mainDiv {
-  overflow: hidden;
-  width: 100vw;
-  height: 100vh;
-}
 .bgGradient {
   image-rendering: pixelated;
   width: calc(256px * var(--pxDensity));

toys/index.html

@@ -16,7 +16,7 @@
 
 <body>
   <div id="mainDiv">
-    <div id="navBarContainer" data-alt="byte"></div>
+    <div id="navBarContainer" data-alt="byte, playDisabled"></div>
 
     <ul>
       <li class="toyLi">

toys/license/index.html

@@ -44,8 +44,6 @@
   <!-- Proof that I am Byte Dice? Check the commit history. -->
 
   <div id="mainDiv">
-    <div id="navBarContainer" data-alt="byte"></div>
-
     <div class="allContainer">
       <div id="optionsContainer" class="borderedRect">
         <h1 class="optionsCredits h1Top">
@@ -186,6 +184,8 @@
 
       <p id="credits_600x400">Original by Chilli<br>Remade by Byte Dice at bytedice.net/toys</p>
     </div>
+
+    <div id="navBarContainer" data-alt="byte, playDisabled"></div>
   </div>
 
   <div id="loadingScreen"></div>

toys/license/options.css

@@ -6,6 +6,7 @@
   padding: calc(2px * var(--pxDensity));
   overflow-y: scroll;
   max-width: min(600px, 100vw);
+  max-height: 40vh;
   flex-grow: 1;
   font-size: calc(4px * var(--pxDensity));
 }