added many debug logs

global/globalScript.js

@@ -2,6 +2,12 @@ const PAGES = {
   null: -1,
   SYNTHWAVE: 0,
 }
+const CONSOLE_COLORS = {
+  red: "color: #FF0000;",
+  green: "color: #00FF00",
+  white: "color: #FFFFFF;",
+  debugTitle: "color: #00FF00;",
+}
 
 let CURRENT_PAGE = PAGES.null
 
@@ -38,6 +44,11 @@ function lerp(x, y, t) {
 }
 
 
+function debugPrint(title, value) {
+  console.log(`%c${title}:\n%c${value}`, CONSOLE_COLORS.debugTitle, CONSOLE_COLORS.white)
+}
+
+
 function toggleGrid() {
   if (gridVisible) {
     document.getElementById("gridCanvas").remove()
@@ -99,11 +110,13 @@ function pauseAnimBtn(state) {
     pauseBtn.src = "/assets/icons/playAnimation_8x8.png"
   }
 
-  localStorage["isAnimating"] = state
+  localStorage["isAnimating"] = isAnimating
 }
 
 
 document.addEventListener("DOMContentLoaded", async function() {
+  debugPrint("currentPage", `${CURRENT_PAGE} ${Object.keys(PAGES)[CURRENT_PAGE + 1]}`)
+
   startLoadingScreen()
 
   setLoadingProgress("Fetching tips...")
@@ -114,10 +127,10 @@ document.addEventListener("DOMContentLoaded", async function() {
 
   setLoadingProgress("Calculating pixel density...")
   calcPixelDensity()
-  console.log("pxDensity: " + getComputedStyle(document.body).getPropertyValue("--pxDensity"))
+  debugPrint("pxDensity", pxDensity)
 
-  if (densityWidth > densityHeight) { console.log("pxDensity Direction: Width, " + densityWidth) }
+  if (densityWidth > densityHeight) { debugPrint("pxDensity Direction", `Width, ${densityWidth}`) }
-  else { console.log("pxDensity Direction: Height, " + densityHeight) } 
+  else { debugPrint("pxDensity Direction", `Height, ${densityHeight}`) } 
 
   setLoadingProgress("adding navBar...")
   await loadNavBarJson()
@@ -128,6 +141,7 @@ document.addEventListener("DOMContentLoaded", async function() {
   }
   
   pauseAnimBtn(localStorage["isAnimating"] || "true")
+  debugPrint("Pause button state", isAnimating)
 
   if (showLoading != "true") { 
     removeLoadingScreen()
@@ -145,6 +159,7 @@ window.addEventListener("resize", function() {
     case (PAGES.SYNTHWAVE): onResizeSynthwave()
   }
 
+  // unoptimal but works well enough
   if (gridVisible) {
     toggleGrid()
     toggleGrid()
@@ -153,7 +168,7 @@ window.addEventListener("resize", function() {
 
 let prevAnimationState = isAnimating
 
-
+/*
 document.addEventListener("visibilitychange", function() {
   if (document.hidden) {
     prevAnimationState = isAnimating;
@@ -164,17 +179,18 @@ document.addEventListener("visibilitychange", function() {
   }
 });
 
-/*
+
 window.addEventListener("blur", function() {
   if (document.visibilityState === "visible") {
     prevAnimationState = isAnimating;
     isAnimating = false;
   }
 });
-*/
+
 
 window.addEventListener("focus", function() {
   if (!document.hidden) {
     isAnimating = prevAnimationState;
   }
-});
+});
+*/

global/loadingScreen.js

@@ -23,6 +23,7 @@ let tipsJson
 async function loadTips() {
   let tipsText = await fetch("/data/loadingScreenTips.json").then(response => response.text())
   tipsJson = JSON.parse(tipsText)
+  console.log(tipsJson)
 }
 
 
@@ -32,6 +33,7 @@ let selectedTip = "undefined"
 
 function newTip() {
   selectedTip = tipsJson[randomIntFrom0(tipsJson.length)]
+  debugPrint("new tip", selectedTip)
 } 
 
 
@@ -44,6 +46,7 @@ function startLoadingScreen() {
 	loadingScreenProgress.innerHTML = `Loading...<br><br>Tip: ${selectedTip}`
 
 	const loadDur = randomFloat(3000, 6000)
+  debugPrint("loadDur initial", loadDur)
 
 	setTimeout(removeLoadingScreen, loadDur)
 }

global/navBar.js

@@ -47,5 +47,6 @@ function createNavBarBtn(icon = "", action = "", actionValue = "", iconId = "")
 async function loadNavBarJson() {
   let navBarText = await fetch("/data/navBar.json").then(response => response.text())
   navBarJson = JSON.parse(navBarText)
+  console.log(navBarJson)
 }
 

global/screenTransition.js

@@ -1,6 +1,7 @@
 function slideTransition(url) {
-  const dur = 0.5
+  const dur = 500
-  const loadingTime = 1.0
+  const loadingTime = randomFloat(500, 1500)
+  debugPrint("loadDur transition", loadingTime)
 
   const slideLeft = `slide-left ${dur}s cubic-bezier(0, 0, 0, 1.46) forwards`
 
@@ -15,6 +16,6 @@ function slideTransition(url) {
 
   setTimeout(function() {
     setLoadingProgress("Done!")
-    setTimeout(function() { document.location = url }, loadingTime * 1000)
+    setTimeout(function() { document.location = url }, loadingTime)
-  }, (dur + loadingTime) * 1000)
+  }, dur + loadingTime)
 }

script.js

@@ -15,6 +15,8 @@ function addStars() {
   let randX = randomInt(0, 256)
   let randY = randomInt(0, 256)
 
+  debugPrint("Star pos", `[x${randX}, y${randY}]`)
+
   starNoise.style.top = `round(calc(${randX}px * var(--pxDensity)), var(--pxDensityPx))`
   starNoise.style.left = `round(calc(${randY}px * var(--pxDensity)), var(--pxDensityPx))`
 }