Splashscreen.

MichaelDiBernardo · Aug 26, 2024 · ccbcb50 · ccbcb50
1 parent e054648
commit ccbcb50
Show file tree

Hide file tree

Showing 4 changed files with 135 additions and 2 deletions.
diff --git a/assets/css/fonts.css b/assets/css/fonts.css
@@ -0,0 +1,41 @@
+.extralight {
+  font-family: "Mukta", sans-serif;
+  font-weight: 200;
+  font-style: normal;
+}
+
+.light {
+  font-family: "Mukta", sans-serif;
+  font-weight: 300;
+  font-style: normal;
+}
+
+.regular {
+  font-family: "Mukta", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+}
+
+.medium {
+  font-family: "Mukta", sans-serif;
+  font-weight: 500;
+  font-style: normal;
+}
+
+.semibold {
+  font-family: "Mukta", sans-serif;
+  font-weight: 600;
+  font-style: normal;
+}
+
+.bold {
+  font-family: "Mukta", sans-serif;
+  font-weight: 700;
+  font-style: normal;
+}
+
+.extrabold {
+  font-family: "Mukta", sans-serif;
+  font-weight: 800;
+  font-style: normal;
+}
diff --git a/index.html b/index.html
@@ -71,7 +71,16 @@
       content="https://mikedebo.com/nora-looks-for-bugs/share.jpg"
     />
 
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Mukta:wght@200;300;400;500;600;700;800&display=swap"
+      rel="stylesheet"
+    />
+
     <!-- Styles -->
+    <link rel="stylesheet" href="./assets/css/fonts.css" />
     <link rel="stylesheet" href="style.css" />
 
     <!-- Javscript -->
@@ -87,7 +96,12 @@
   </head>
 
   <body>
-    <div id="scrollable-area"></div>
+    <div id="splash-screen">
+      <img src="android-chrome-512x512.png" alt="Nora Looks For Bugs Logo" />
+      <h1 class="extrabold">Nora Looks For Bugs</h1>
+    </div>
+
+    <div id="scrollable-area" style="display: none"></div>
 
     <template id="rock-template">
       <div class="rock">

diff --git a/main.js b/main.js
@@ -1,10 +1,53 @@
 const numRocks = 1000;
 const gridSize = 51200 / 256;
 
+function preloadAssets() {
+  const imagesToPreload = ["./assets/img/rock1.png"];
+
+  const soundsToPreload = [
+    "./assets/sound/rock1.m4a",
+    "./assets/sound/rock2.m4a",
+    "./assets/sound/rock3.m4a",
+    "./assets/sound/rock4.m4a",
+    "./assets/sound/rock5.m4a",
+  ];
+
+  const preloadPromises = [
+    ...imagesToPreload.map((src) => preloadImage(src)),
+    ...soundsToPreload.map((src) => preloadSound(src)),
+  ];
+
+  return Promise.all(preloadPromises);
+}
+
+function preloadImage(src) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = resolve;
+    img.onerror = reject;
+    img.src = src;
+  });
+}
+
+function preloadSound(src) {
+  return new Promise((resolve, reject) => {
+    const audio = new Audio();
+    audio.oncanplaythrough = resolve;
+    audio.onerror = reject;
+    audio.src = src;
+  });
+}
+
 document.addEventListener("DOMContentLoaded", () => {
+  const splashScreen = document.getElementById("splash-screen");
   const scrollableArea = document.getElementById("scrollable-area");
   const rockTemplate = document.getElementById("rock-template");
 
+  function hideSplashScreen() {
+    splashScreen.style.display = "none";
+    scrollableArea.style.display = "grid";
+  }
+
   function createRockComponent(location) {
     const rock = rockTemplate.content.cloneNode(true).querySelector(".rock");
     rock.style.gridRow = location.x;
@@ -55,7 +98,17 @@ document.addEventListener("DOMContentLoaded", () => {
   }
 
   function initialize() {
-    createRocks();
+    preloadAssets()
+      .then(() => {
+        createRocks();
+      })
+      .catch((error) => {
+        console.error("Error preloading assets:", error);
+      })
+      .finally(() => {
+        // Hide splashscreen regardless of whether prefetch was successful.
+        hideSplashScreen();
+      });
   }
 
   initialize();

diff --git a/style.css b/style.css
@@ -82,6 +82,31 @@ body {
   overflow: auto;
 }
 
+#splash-screen {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #ffffff;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+}
+
+#splash-screen img {
+  width: 200px;
+  height: 200px;
+  margin-bottom: 20px;
+}
+
+#splash-screen h1 {
+  font-size: 24px;
+  margin: 5px 0;
+}
+
 #scrollable-area {
   width: 51200px;
   height: 51200px;