improved tips code quality

globalScript.js

@@ -1,3 +1,10 @@
+const PAGES = {
+  null: -1,
+  SYNTHWAVE: 0,
+}
+
+let CURRENT_PAGE = PAGES.null
+
 let isAnimating = true
 
 function randomFloat(min, max) {
@@ -79,3 +86,30 @@ function pauseAnimBtn(state) {
 
   localStorage["isAnimating"] = state
 }
+
+
+document.addEventListener("DOMContentLoaded", async function() {
+  startLoadingScreen()
+
+  setLoadingProgress("Fetching tips...")
+
+  await loadTips()
+
+  newTip()
+
+  setLoadingProgress("Calculating pixel density...")
+  calcPixelDensity()
+
+  switch (CURRENT_PAGE) {
+    case (PAGES.SYNTHWAVE): loadingScreenSynthwave()
+  }
+  
+  pauseAnimBtn(localStorage["isAnimating"] || "true")
+
+  if (showLoading != "true") { 
+    removeLoadingScreen()
+  }
+  else {
+    setLoadingProgress("Cleaning up...")
+  }
+}, false)

index.html

@@ -67,12 +67,16 @@
     <p id="loadingText">Loading...<br>Loading files...<br><br>Tip: Tip loading...</p>
   </div>
 
+  <!-- libs -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"></script>
 
-  <script src="./globalScript.js"></script>
+  <!-- global -->
+  <script src="./globalScript.js"></script> <!-- compact the other global scripts into this global script -->
   <script src="./pxDensity.js"></script>
   <script src="/loadingScreen.js"></script>
   <script src="/screenTransition.js"></script>
 
+  <!-- local -->
   <script src="script.js"></script>
   <script src="synthwaveEffect.js"></script>
 </body>

loadingScreen.js

@@ -4,25 +4,17 @@ let loadingScreenProgress = document.getElementById("loadingText")
 let loadingScreenEl = document.getElementById("loadingScreen")
 
 
-let tipsJson;
+let tipsJson
 
-(function loadTipsSync() {
-  const xhr = new XMLHttpRequest();
-  xhr.open("GET", "./loadingScreenTips.json", false)
-  xhr.send(null)
 
-  if (xhr.status === 200) {
-    tipsJson = JSON.parse(xhr.responseText)
-  } else {
-    console.error("Failed to load tips:", xhr.status, xhr.statusText)
-    tipsJson = []
-  }
-})()
+async function loadTips() {
+  let tipsText = await fetch("./loadingScreenTips.json").then(response => response.text())
+  tipsJson = JSON.parse(tipsText)
+}
 
-console.log(tipsJson)
 
-let selectedTip = tipsJson[randomIntFrom0(tipsJson.length)]
 const showLoading = localStorage["showLoading"] || "true"
+let selectedTip = "undefined"
 
 
 function newTip() {

loadingScreenTips.json

@@ -6,7 +6,7 @@
   "Bad at a game? Just press the \"get good at games\" button!",
   "I AM NOT A FEMBOY NOR GAY. (I support though :thumbsup:)",
   "You should listen to that song that goes \"do do do do do do do do do.\"",
-  "(Almost) Every pixel in this website's pixel art is positioned pixel perfect.",
+  "(Almost) Every pixel in this website's pixel art is positioned pixel perfectly.",
   "Shouldn't I be talking about tips?",
   "Did you know that... uh... hold on let me think... I don't know, I forgot.",
   "This tip is very helpful.",

script.js

@@ -1,21 +1,9 @@
-document.addEventListener("DOMContentLoaded", function() {
-  startLoadingScreen()
-
-  setLoadingProgress("Calculating pixel density...")
-  calcPixelDensity()
+CURRENT_PAGE = PAGES.SYNTHWAVE
 
+function loadingScreenSynthwave() {
   setLoadingProgress("Adding stars...")
   addStars()
-  
-  pauseAnimBtn(localStorage["isAnimating"] || "true")
-
-  if (showLoading != "true") { 
-    removeLoadingScreen()
-  }
-  else {
-    setLoadingProgress("Cleaning up...")
-  }
-}, false)
+}
 
 
 function addStars() {

style.css

@@ -39,6 +39,8 @@ body {
 }
 #synthwaveCanvas {
   position: absolute;
-  bottom: round(0%, var(--pxDensityPx));
+  top: round(0%, var(--pxDensityPx));
   left: round(0%, var(--pxDensityPx));
+  width: 100%;
+  height: 100%;
 }