diff --git a/main.js b/main.js
index fce77fa..5adbd82 100644
--- 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
index 2012b41..ef2df7c 100644
--- 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;
+