Spaces:

dylanebert
/

EchoesInTheDark

Running

App Files Files Community

dylanebert HF staff commited on 11 days ago

Commit

f526bf0

1 Parent(s): 0e853b6

.

Browse files

Files changed (4) hide show

Build/Build.data +2 -2
Build/Build.loader.js +1 -1
Build/Build.wasm +2 -2
index.html +75 -11

Build/Build.data CHANGED Viewed

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f2849441613d40beb8575fd099287db185778798f0ff558346dda122355ab3a4
-size 15190460

 version https://git-lfs.github.com/spec/v1
+oid sha256:404bcb3340e26d3a1c20e423a62f64000ad8985e8a5a1cd6f084804c5366148b
+size 15191467

Build/Build.loader.js CHANGED Viewed

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:80127c16a9052a5f0a630450368ed3396832591a7e95fcbc39d22f7fbd931bf1
 size 26416

 version https://git-lfs.github.com/spec/v1
+oid sha256:97e57dc75c7230a1641c9aebe068a623819b5166a4ff0c3206f3359da25d34b7
 size 26416

Build/Build.wasm CHANGED Viewed

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:7d3bb6a3f366f94d2877d8a99cbdfbd6e889c7f90d2529e898c7d15c5ce1a94a
-size 33434485

 version https://git-lfs.github.com/spec/v1
+oid sha256:b96f139eefc9f41b4d4c2eb4aca9b1cdea5d91b8843158178b46ff92f39626f4
+size 33435441

index.html CHANGED Viewed

@@ -28,7 +28,7 @@
             #loading-text {
                 color: white;
                 font-family: "Bebas Neue", Arial, sans-serif;
-                font-size: 64px;
                 position: absolute;
                 top: 50%;
                 left: 50%;
@@ -40,7 +40,7 @@
             }
             #loading-subtext {
                 font-family: "Bebas Neue", Arial, sans-serif;
-                font-size: 32px;
                 position: absolute;
                 top: 50%;
                 left: 50%;
@@ -56,6 +56,37 @@
             .fade-out {
                 opacity: 0;
             }
         </style>
     </head>
     <body class="dark">
@@ -66,6 +97,14 @@
             <div id="loading-text">Vibe Coding in the Dark</div>
             <div id="loading-subtext">by Dylan Ebert (IndividualKex)</div>
         </div>
         <div id="unity-fullscreen-button" style="display: none"></div>
         <a
             target="_blank"
@@ -106,6 +145,9 @@
                   const canvas = document.querySelector("#unity-canvas");
                   const loadingCover = document.querySelector("#loading-cover");
                   const fullscreenButton = document.querySelector("#unity-fullscreen-button");
                   const canFullscreen = (function() {
                     for (const key of [
@@ -133,14 +175,16 @@
                   let loadingStartTime = Date.now();
                   let loadingFinished = false;
                   let minTimeElapsed = false;
-                  // Function to check if we can hide the loading screen
-                  function tryHideLoadingScreen() {
                     if (loadingFinished && minTimeElapsed) {
                       loadingCover.classList.add('fade-out');
                       setTimeout(() => {
                         loadingCover.style.display = "none";
                         loadingCover.classList.remove('fade-out');
                       }, 1500); // Match the CSS transition time
                     }
                   }
@@ -148,17 +192,17 @@
                   // Start the minimum display time timer
                   setTimeout(() => {
                     minTimeElapsed = true;
-                    tryHideLoadingScreen();
                   }, minDisplayTime);
-                  const script = document.createElement("script");
-                  script.src = loaderUrl;
-                  script.onload = () => {
                     createUnityInstance(canvas, config, (progress) => {
                       // No progress visualization needed
-                    }).then((unityInstance) => {
-                      loadingFinished = true;
-                      tryHideLoadingScreen();
                       if (canFullscreen) {
                         if (!hideFullScreenButton) {
@@ -171,6 +215,26 @@
                     }).catch((message) => {
                       alert(message);
                     });
                   };
                   document.body.appendChild(script);
         </script>

             #loading-text {
                 color: white;
                 font-family: "Bebas Neue", Arial, sans-serif;
+                font-size: 40px;
                 position: absolute;
                 top: 50%;
                 left: 50%;
             }
             #loading-subtext {
                 font-family: "Bebas Neue", Arial, sans-serif;
+                font-size: 24px;
                 position: absolute;
                 top: 50%;
                 left: 50%;
             .fade-out {
                 opacity: 0;
             }
+            /* Start Game Button Styles */
+            #start-game-container {
+                position: fixed;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                background-color: #000000;
+                display: none;
+                justify-content: center;
+                align-items: center;
+                z-index: 100;
+            }
+            #start-game-button {
+                font-family: "Bebas Neue", Arial, sans-serif;
+                font-size: 32px;
+                padding: 15px 40px;
+                color: white;
+                background-color: #333;
+                border: 2px solid white;
+                border-radius: 8px;
+                cursor: pointer;
+                transition: all 0.3s ease;
+            }
+            #start-game-button:hover {
+                background-color: #555;
+                transform: scale(1.05);
+            }
         </style>
     </head>
     <body class="dark">
             <div id="loading-text">Vibe Coding in the Dark</div>
             <div id="loading-subtext">by Dylan Ebert (IndividualKex)</div>
         </div>
+        <div id="start-game-container">
+            <button id="start-game-button">START GAME</button>
+            <audio
+                id="audio-element"
+                src="data:audio/mp3;base64,SUQzBAAAAAAAI1RTU0UAAAAPAAADTGF2ZjU4Ljc2LjEwMAAAAAAAAAAAAAAA/+M4wAAAAAAAAAAAAEluZm8AAAAPAAAAAwAAAbsAVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVA=="
+                type="audio/mp3"
+            ></audio>
+        </div>
         <div id="unity-fullscreen-button" style="display: none"></div>
         <a
             target="_blank"
                   const canvas = document.querySelector("#unity-canvas");
                   const loadingCover = document.querySelector("#loading-cover");
                   const fullscreenButton = document.querySelector("#unity-fullscreen-button");
+                  const startGameContainer = document.querySelector("#start-game-container");
+                  const startGameButton = document.querySelector("#start-game-button");
+                  const audioElement = document.querySelector("#audio-element");
                   const canFullscreen = (function() {
                     for (const key of [
                   let loadingStartTime = Date.now();
                   let loadingFinished = false;
                   let minTimeElapsed = false;
+                  let unityInstance = null;
+                  // Function to check if we can show the start button
+                  function tryShowStartButton() {
                     if (loadingFinished && minTimeElapsed) {
                       loadingCover.classList.add('fade-out');
                       setTimeout(() => {
                         loadingCover.style.display = "none";
                         loadingCover.classList.remove('fade-out');
+                        startGameContainer.style.display = "flex";
                       }, 1500); // Match the CSS transition time
                     }
                   }
                   // Start the minimum display time timer
                   setTimeout(() => {
                     minTimeElapsed = true;
+                    tryShowStartButton();
                   }, minDisplayTime);
+                  // Initialize Unity
+                  function initUnity() {
+                    if (unityInstance) return; // Prevent multiple initializations
                     createUnityInstance(canvas, config, (progress) => {
                       // No progress visualization needed
+                    }).then((instance) => {
+                      unityInstance = instance;
                       if (canFullscreen) {
                         if (!hideFullScreenButton) {
                     }).catch((message) => {
                       alert(message);
                     });
+                  }
+                  // Start button click handler
+                  startGameButton.addEventListener('click', () => {
+                    // Play silent audio to unlock audio on Safari
+                    audioElement.play().catch(error => console.log("Audio play failed:", error));
+                    // Hide start button container
+                    startGameContainer.style.display = "none";
+                    // Initialize Unity if not already done
+                    initUnity();
+                  });
+                  const script = document.createElement("script");
+                  script.src = loaderUrl;
+                  script.onload = () => {
+                    // Signal that loading is finished
+                    loadingFinished = true;
+                    tryShowStartButton();
                   };
                   document.body.appendChild(script);
         </script>