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

data/navBar.json

@@ -15,12 +15,14 @@
     "actionValue": "https://github.com/ByteDice"
   },
   {
-    "icon": "powerplates_8x8.png"
+    "icon": "powerplates_8x8.png",
+    "action": "navigate",
+    "actionValue": "/powerplates"
   },
   {
     "icon": "pauseAnimation_8x8.png",
     "action": "function",
-    "actionValue": "https://discord.com",
+    "actionValue": "pauseAnimBtn('auto')",
     "iconId": "animationToggle"
   }
 ]

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)
+}
+

index.html

@@ -6,70 +6,26 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Byte Dice</title>
 
-  <link rel="stylesheet" href="./global/navBar.css">
-  <link rel="stylesheet" href="./global/globalStyle.css">
-  <link rel="stylesheet" href="./global/loadingScreen.css">
+  <link rel="stylesheet" href="/global/navBar.css">
+  <link rel="stylesheet" href="/global/globalStyle.css">
+  <link rel="stylesheet" href="/global/loadingScreen.css">
   <link rel="stylesheet" href="style.css">
 
-  <link rel="icon" type="image/png" href="./assets/favicon_32x32.png">
+  <link rel="icon" type="image/png" href="/assets/favicon_32x32.png">
 </head>
 
 <body style="background-color: #323232; color: #ffffff;">
   <div id="mainDiv">
-    <img src="./assets/backgrounds/bgGradient_256x164.png" class="bgGradient">
+    <img src="/assets/backgrounds/bgGradient_256x164.png" class="bgGradient">
     
-    <img src="./assets/backgrounds/starNoise_512x512.png" draggable="false" id="starNoise">
-    <img src="./assets/synthwaveSun_40x40.png" draggable="false" class="synthSun">
+    <img src="/assets/backgrounds/starNoise_512x512.png" draggable="false" id="starNoise">
+    <img src="/assets/synthwaveSun_40x40.png" draggable="false" class="synthSun">
 
     <div id="canvasContainer"></div>
-    
-    <!-- TODO: change discord URL to server URL -->
-    <!-- TODO: make automatic navBar generator -->
-    <div class="navBarAligner">
-      <ul class="navBar">
-        <li>
-          <button onclick="slideTransition('https://discord.com')" class="navBtn">
-            <img class="navBtnImg" draggable="false" src="./assets/navBarBtn.png">
-            <img class="navBtnIcon" draggable="false" src="./assets/icons/discord_8x8.png">
-          </button>
-        </li>
-        <li>
-          <button onclick="slideTransition('https://youtube.com/@ByteDice')" class="navBtn">
-            <img class="navBtnImg" draggable="false" src="./assets/navBarBtn.png">
-            <img class="navBtnIcon" draggable="false" src="./assets/icons/youtube_8x8.png">
-          </button>
-        </li>
-        <li>
-          <button onclick="slideTransition('https://github.com/ByteDice')" class="navBtn">
-            <img class="navBtnImg" draggable="false" src="./assets/navBarBtn.png">
-            <img class="navBtnIcon" draggable="false" src="./assets/icons/github_8x8.png">
-          </button>
-        </li>
-        <li>
-          <button class="navBtn">
-            <img class="navBtnImg" draggable="false" src="./assets/navBarBtn.png">
-            <img class="navBtnIcon" draggable="false" src="./assets/icons/powerplates_8x8.png">
-          </button>
-        </li>
-        <li>
-          <button onClick="pauseAnimBtn('auto')" class="navBtn">
-            <img class="navBtnImg" draggable="false" src="./assets/navBarBtn.png">
-            <img class="navBtnIcon" draggable="false" src="./assets/icons/pauseAnimation_8x8.png" id="animationToggle">
-          </button>
-        </li>
-      </ul>
-    </div>
+    <div id="navBarContainer"></div>
   </div>
 
-  <div class="bgDiv" id="loadingScreen">
-    <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>
-  </div>
+  <div id="loadingScreen"></div>
 
   
   <!-- libs -->
@@ -80,10 +36,11 @@
   <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/shaders/CopyShader.js"></script>
 
   <!-- global -->
-  <script src="./global/globalScript.js"></script> <!-- TODO: compact the other global scripts into this global script -->
-  <script src="./global/pxDensity.js"></script>
-  <script src="./global/loadingScreen.js"></script>
-  <script src="./global/screenTransition.js"></script>
+  <script src="/global/globalScript.js"></script>
+  <script src="/global/pxDensity.js"></script>
+  <script src="/global/loadingScreen.js"></script>
+  <script src="/global/navBar.js"></script>
+  <script src="/global/screenTransition.js"></script>
 
   <!-- local -->
   <script src="script.js"></script>