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

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
 }