From 47dfcd852fb525a63e5ee60ae9b152092ff00753 Mon Sep 17 00:00:00 2001 From: ByteDice Date: Fri, 17 Jan 2025 16:34:26 +0100 Subject: [PATCH] added many debug logs --- global/globalScript.js | 32 ++++++++++++++++++++++++-------- global/loadingScreen.js | 3 +++ global/navBar.js | 1 + global/screenTransition.js | 9 +++++---- script.js | 2 ++ 5 files changed, 35 insertions(+), 12 deletions(-) diff --git a/global/globalScript.js b/global/globalScript.js index 570200b..81313d7 100644 --- a/global/globalScript.js +++ b/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) } - else { console.log("pxDensity Direction: Height, " + densityHeight) } + if (densityWidth > densityHeight) { debugPrint("pxDensity Direction", `Width, ${densityWidth}`) } + 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; } -}); \ No newline at end of file +}); +*/ \ No newline at end of file diff --git a/global/loadingScreen.js b/global/loadingScreen.js index 039bdf7..a9a5be5 100644 --- a/global/loadingScreen.js +++ b/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...

Tip: ${selectedTip}` const loadDur = randomFloat(3000, 6000) + debugPrint("loadDur initial", loadDur) setTimeout(removeLoadingScreen, loadDur) } diff --git a/global/navBar.js b/global/navBar.js index 45d5728..9939d1c 100644 --- a/global/navBar.js +++ b/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) } diff --git a/global/screenTransition.js b/global/screenTransition.js index d359251..917d138 100644 --- a/global/screenTransition.js +++ b/global/screenTransition.js @@ -1,6 +1,7 @@ function slideTransition(url) { - const dur = 0.5 - const loadingTime = 1.0 + const dur = 500 + 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) - }, (dur + loadingTime) * 1000) + setTimeout(function() { document.location = url }, loadingTime) + }, dur + loadingTime) } \ No newline at end of file diff --git a/script.js b/script.js index 0bc2b52..b0e275f 100644 --- a/script.js +++ b/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))` } \ No newline at end of file