Add broken credits and fix font

morr0ne · Mar 7, 2024 · cfdead7 · cfdead7
1 parent 935317f
commit cfdead7
Showing 1 changed file with 35 additions and 13 deletions.
diff --git a/src/components/Credits.astro b/src/components/Credits.astro
@@ -1,7 +1,7 @@
 <style>
     @font-face {
         font-family: "Nimbus Mono";
-        src: url("NimbusMonoPS-Regular.ttf");
+        src: url("/NimbusMonoPS-Regular.ttf");
     }
 
     #outro {
@@ -20,24 +20,15 @@
     <div class="row-span-2">
         <span id="lyrics"></span><span id="cursor">_</span>
     </div>
-    <div class="" id="credits">
-        " "CreditsOutroText" "Gautam Babbar" "CreditsOutroText" "Ted Backman"
-        "CreditsOutroText" "Kelly Bailey" "CreditsOutroText" "Jeff Ballinger"
-        "CreditsOutroText" "Aaron Barber" "CreditsOutroText" "Jeep Barnett"
-        "CreditsOutroText" "Jeremy Bennett" "CreditsOutroText" "Dan Berger"
-        "CreditsOutroText" "Yahn Bernier" "CreditsOutroText" "Ken Birdwell"
-        "CreditsOutroText" "Derrick Birum" "CreditsOutroText" "Mike Blaszczak"
-        "CreditsOutroText" "Iestyn Bleasdale-Shepherd" "CreditsOutroText" "Chris
-        Bokitch" "CreditsOutroText" "Steve Bond" "CreditsOutroText" "Matt Boone"
-        "CreditsOutroText" "Antoine Bourdon" "CreditsOutroText"
-    </div>
+    <div class="" id="credits"></div>
     <div class="">
         <pre id="art" class="leading-[1.2]"></pre>
     </div>
 </div>
 
 <script>
     import { lyrics, type Lyric } from "./lyrics";
+    import { credits } from "./credits";
     import { ASCII_ART } from "./ascii_art";
 
     const audio = new Audio("/portal_still_alive.mp3");
@@ -61,6 +52,37 @@
     audio.addEventListener("canplaythrough", () => {
         const startTime = performance.now();
 
+        startLyrics(startTime);
+        // startCredits(startTime);
+    });
+
+    async function startCredits(startTime: number) {
+        for (const credit of credits) {
+            await drawLine(credit);
+        }
+
+        function drawLine(credit: string): Promise<void> {
+            return new Promise((resolve) => {
+                let charIndex = 0;
+
+                let id = setInterval(() => {
+                    const char = credit[charIndex];
+
+                    creditsDiv.innerHTML += char;
+                    charIndex++;
+
+                    if (charIndex >= credit.length) {
+                        creditsDiv.innerText += "\n";
+
+                        clearInterval(id);
+                        resolve();
+                    }
+                }, 570 / credit.length);
+            });
+        }
+    }
+
+    function startLyrics(startTime: number) {
         let expectedTime = 0;
         let lyricIndex = 0;
 
@@ -151,5 +173,5 @@
         }
 
         window.requestAnimationFrame(playSong);
-    });
+    }
 </script>