fixed/improved loading screen

index.html

@@ -50,6 +50,14 @@
     </li>
   </ul>
 
+  <div class="bgDiv" id="loadingScreen">
+    <img class="loadingImg" draggable="false" src="/assets/byteDiceBlinkAnim_32x32.png">
+    <button class="loadingCornerText pxFont" onclick="stopShowingLoading()">
+      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>
+
   <script src="/globalScript.js"></script>
   <script src="/pxDensity.js"></script>
   <script src="/synthwaveEffect.js"></script>

loadingScreen.css

@@ -8,8 +8,8 @@
 }
 .loadingImg {
   position: absolute;
-  top: 50%;
+  top: round(50%, var(--pxDensityPx));
-  left: 50%;
+  left: round(50%, var(--pxDensityPx));
   transform: translate(-50%, -50%);
   width: calc(32px * var(--pxDensity));
   height: calc(32px * var(--pxDensity));
@@ -30,7 +30,7 @@
   left: 0%;
   cursor: pointer;
 }
-.loadingText {
+#loadingText {
   position: absolute;
   bottom: 0%;
   left: 50%;

loadingScreen.js

@@ -1,53 +1,51 @@
 let isLoading = true
-let loadingScreenEl = document.createElement("div")
+let stopLoading = false
-loadingScreenEl.className = "bgDiv"
+let loadingScreenProgress = document.getElementById("loadingText")
-
+let loadingScreenEl = document.getElementById("loadingScreen")
-let loadingImg = `<img class="loadingImg" draggable="false" src="/assets/byteDiceBlinkAnim_32x32.png">`
-let closeText = `
-	<button class="loadingCornerText pxFont" onclick="stopShowingLoading()">
-		Press ESC to instantly close theloading screen<br>Click me to never see it again.
-	</button>
-`
 
 let tips = [
 	"Just don't die.",
 	"Did you know this is a tip?",
 	"Is thisn't not very un-understandable?",
   "m".repeat(200),
-  "Bad at a game? Just press the \"get good at games\" button!"
+  "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.\""
 ]
 
-let loadingText = `<p class="loadingText">Loading...<br>Tip: ${tips[randomIntFrom0(tips.length)]}</p>`
+let selectedTip = tips[randomIntFrom0(tips.length)]
-
-loadingScreenEl.innerHTML = loadingImg + closeText + loadingText
-
 const showLoading = localStorage["showLoading"] || "true"
 
 
-document.addEventListener("DOMContentLoaded", function() {
+function setLoadingProgress(newText) {
-	if (showLoading != "true") { return }
+  loadingScreenProgress.innerHTML = `Loading...<br>${newText}<br><br>Tip: ${selectedTip}`
+}
 
-	document.body.appendChild(loadingScreenEl)
+
+function startLoadingScreen() {
+	loadingScreenProgress.innerHTML = `Loading...<br><br>Tip: ${selectedTip}`
 
 	const loadDur = randomFloat(3000, 6000)
 
-	setTimeout(function() {
+	setTimeout(removeLoadingScreen, loadDur)
-		removeLoadingScreen()
+}
-	}, loadDur)
-}, false)
 
 
 function removeLoadingScreen() {
   if (!isLoading) { return }
 
+  setLoadingProgress("Done!")
+
   isLoading = false
 	const fadeOutDur = 0.5
 	
+	setTimeout(function() {
     loadingScreenEl.style.animation = `fade-out ${fadeOutDur}s forwards`
 
     setTimeout(function() {
       document.body.removeChild(loadingScreenEl)
-	}, fadeOutDur * 1000);
+    }, fadeOutDur * 1000)
+  }, 500)
 }
 
 

pxDensity.js

@@ -1,7 +1,7 @@
 let pxDensity = getComputedStyle(document.body).getPropertyValue("--pxDensity")
 let pxDensityDefined = false
 
-document.addEventListener("DOMContentLoaded", function() {
+function calcPixelDensity() {
   let densityWidth =  document.documentElement.clientWidth / 256
   let densityHeight = document.documentElement.clientHeight / 164
 
@@ -12,4 +12,4 @@ document.addEventListener("DOMContentLoaded", function() {
   pxDensityDefined = true
 
   console.log("pxDensity: " + getComputedStyle(document.body).getPropertyValue("--pxDensity"))
-}, false)
+}

script.js

@@ -1,8 +1,29 @@
 document.addEventListener("DOMContentLoaded", function() {
+  startLoadingScreen()
+
+  setLoadingProgress("Calculating pixel density...")
+  calcPixelDensity()
+  
+  setLoadingProgress("Adding stars...")
+  addStars()
+  
+  setLoadingProgress("Animating synthwave background...")
+  startSynthAnimation()
+
+  if (showLoading != "true") { 
+    removeLoadingScreen()
+  }
+  else {
+    setLoadingProgress("Cleaning up...")
+  }
+}, false)
+
+
+function addStars() {
   let starNoise = document.getElementById("starNoise")
   let randX = randomInt(0, 256)
   let randY = randomInt(0, 256)
 
   starNoise.style.top = `round(calc(${randX}px * var(--pxDensity)), var(--pxDensityPx))`
   starNoise.style.left = `round(calc(${randY}px * var(--pxDensity)), var(--pxDensityPx))`
-}, false)
+}

style.css

@@ -6,7 +6,7 @@ body {
                     #0d0035 100%);
   background-position: 0% 10vh;
   overflow: hidden;
-  background-color: #dadada !important;
+  margin: 0%;
 }
 .synthSun {
   width: calc(40px * var(--pxDensity));

synthwaveEffect.js

@@ -143,10 +143,10 @@ function animateSynthWave() {
 }
 
 
-document.addEventListener("DOMContentLoaded", function() {
+function startSynthAnimation() {
   for (i = 0; i < 350; i++) {
     animateSynthWave()
   }
 
   setInterval( animateSynthWave, 1000 / 24)
-}, false)
+}