Custom loading messages and fix GUI

src/index.html

@@ -38,7 +38,7 @@ <h1>Solar System Model</h1>
           </div>
         </div>
         <div id="loader-text">
-          <p>Loading...</p>
+          Loading...
         </div>
       </div>
     </div>

src/setup/loading.ts

@@ -0,0 +1,34 @@
+const loadingPrompts = [
+  "Detecting neutrinos",
+  "Forming event horizons",
+  "Annihilating particles",
+  "Tunneling electrons",
+  "Entangling photons",
+  "Collapsing wavefunctions",
+  "Quantising gravity",
+  "Evaporating black holes",
+  "Increasing entropy",
+];
+
+const loadingTextInterval = setInterval(() => {
+  const index = Math.floor(Math.random() * loadingPrompts.length);
+  const loadText = document.getElementById("loader-text") as HTMLDivElement;
+  loadText.textContent = `${loadingPrompts[index]}...`;
+}, 2000);
+
+export const onLoaded = () => {
+  clearInterval(loadingTextInterval);
+  const loadText = document.getElementById("loader-text") as HTMLDivElement;
+  loadText.textContent = "Click to continue...";
+
+  const loadIcon = document.getElementById("loader-circle") as HTMLDivElement;
+  const svg = loadIcon.children[0] as HTMLElement;
+  svg.style.animation = "none";
+
+  const loadContainer = document.getElementById("loading") as HTMLDivElement;
+  loadContainer.style.cursor = "pointer";
+
+  loadContainer.addEventListener("click", () => {
+    loadContainer.style.display = "none";
+  });
+};

src/setup/textures.ts

@@ -1,10 +1,10 @@
 import * as THREE from "three";
+import { onLoaded } from "./loading";
 
-const textureLoader = new THREE.TextureLoader();
-
-const textureLoadSet = new Set<string>();
 let textureCount = 0;
 let texturesLoaded = 0;
+const textureLoader = new THREE.TextureLoader();
+const textureLoadSet = new Set<string>();
 
 export const loadTexture = (path: string) => {
   textureLoadSet.add(path);
@@ -13,28 +13,11 @@ export const loadTexture = (path: string) => {
     texturesLoaded++;
 
     if (texturesLoaded === textureCount) {
-      handleTexturesLoaded();
+      onLoaded();
     }
   });
 };
 
-const handleTexturesLoaded = () => {
-  const loadText = document.getElementById("loader-text")
-    ?.children[0] as HTMLParagraphElement;
-  loadText.textContent = "Click to continue...";
-
-  const loadIcon = document.getElementById("loader-circle") as HTMLDivElement;
-  const svg = loadIcon.children[0] as HTMLElement;
-  svg.style.animation = "none";
-
-  const loadContainer = document.getElementById("loading") as HTMLDivElement;
-  loadContainer.style.cursor = "pointer";
-
-  loadContainer.addEventListener("click", () => {
-    loadContainer.style.display = "none";
-  });
-};
-
 export const setTextureCount = (n: number) => {
   textureCount = n;
 };

src/style.scss

@@ -1,4 +1,5 @@
 @use "./styles/animation.scss";
+@use "./styles/gui.scss";
 @use "./styles/label.scss";
 @use "./styles//loading-screen.scss";