moved stuff to js to remove HTML, making it easier to create new pages.

global/globalScript.js

@@ -92,11 +92,11 @@ function pauseAnimBtn(state) {
 
   if (state == "true") {
     isAnimating = true
-    pauseBtn.src = "./assets/icons/pauseAnimation_8x8.png"
+    pauseBtn.src = "/assets/icons/pauseAnimation_8x8.png"
   }
   else {
     isAnimating = false
-    pauseBtn.src = "./assets/icons/playAnimation_8x8.png"
+    pauseBtn.src = "/assets/icons/playAnimation_8x8.png"
   }
 
   localStorage["isAnimating"] = state
@@ -119,6 +119,10 @@ document.addEventListener("DOMContentLoaded", async function() {
   if (densityWidth > densityHeight) { console.log("pxDensity Direction: Width, " + densityWidth) }
   else { console.log("pxDensity Direction: Height, " + densityHeight) } 
 
+  setLoadingProgress("adding navBar...")
+  await loadNavBarJson()
+  onLoadNavBar()
+
   switch (CURRENT_PAGE) {
     case (PAGES.SYNTHWAVE): loadingScreenSynthwave()
   }

global/loadingScreen.js

@@ -1,14 +1,27 @@
 let isLoading = true
 let stopLoading = false
-let loadingScreenProgress = document.getElementById("loadingText")
 let loadingScreenEl = document.getElementById("loadingScreen")
 
 
+loadingScreenEl.className = "bgDiv"
+loadingScreenEl.innerHTML = `
+  <img class="loadingImg" draggable="false" src="/assets/byteDiceBlinkAnim_32x32.png">
+
+  <button class="pxFont" onclick="stopShowingLoading()" id="loadingCornerText">
+    Press ESC to instantly close the loading screen<br>Or click me to never see it again.
+  </button>
+
+  <p id="loadingText">Loading...<br>Loading files...<br><br>Tip: Tip loading...</p>
+`
+
+
+let loadingScreenProgress = document.getElementById("loadingText")
+
 let tipsJson
 
 
 async function loadTips() {
-  let tipsText = await fetch("./data/loadingScreenTips.json").then(response => response.text())
+  let tipsText = await fetch("/data/loadingScreenTips.json").then(response => response.text())
   tipsJson = JSON.parse(tipsText)
 }
 

global/navBar.js

@@ -0,0 +1,51 @@
+let navBarJson
+
+function onLoadNavBar() {
+  const container = document.getElementById("navBarContainer")
+
+  if (!container) { return }
+
+  const navBarAligner = document.createElement("div")
+  navBarAligner.className = "navBarAligner"
+
+  const navBar = document.createElement("ul")
+  navBar.className = "navBar"
+
+
+  for (let btn of navBarJson) {
+    navBar.appendChild(createNavBarBtn(
+      btn["icon"]        || "",
+      btn["action"]      || "",
+      btn["actionValue"] || "",
+      btn["iconId"]      || ""
+    ))
+  }
+
+  navBarAligner.appendChild(navBar)
+  container.appendChild(navBarAligner)
+}
+
+function createNavBarBtn(icon = "", action = "", actionValue = "", iconId = "") {
+  let onClick
+  switch (action) {
+    case "navigate": onClick = `slideTransition('${actionValue}')`; break
+    case "function": onClick = `${actionValue}`; break
+    default: ""
+  }
+
+  let btn = document.createElement("li")
+  btn.innerHTML = `
+    <button onclick="${onClick}" class="navBtn">
+      <img class="navBtnImg" draggable="false" src="/assets/navBarBtn.png">
+      <img class="navBtnIcon" draggable="false" src="/assets/icons/${icon}" id="${iconId}">
+    </button>
+  `
+
+  return btn
+}
+
+async function loadNavBarJson() {
+  let navBarText = await fetch("/data/navBar.json").then(response => response.text())
+  navBarJson = JSON.parse(navBarText)
+}
+