Move credits to a separate component

morr0ne · Mar 7, 2024 · 6e4d633 · 6e4d633
1 parent 989ce73
commit 6e4d633
Show file tree

Hide file tree

Showing 4 changed files with 117 additions and 124 deletions.
diff --git a/src/components/Credits.astro b/src/components/Credits.astro
@@ -0,0 +1,115 @@
+<div class="grid grid-cols-2 grid-rows-2 h-screen">
+    <div class="bg-black text-credits-orange row-span-2" id="lyrics"></div>
+    <div class="bg-lime-600 text-credits-orange" id="credits"></div>
+    <div class="bg-fuchsia-800 text-credits-orange">
+        <pre id="art" class="leading-[1.2]"></pre>
+    </div>
+</div>
+
+<script>
+    import { lyrics, type Lyric } from "./lyrics";
+    import { ASCII_ART } from "./ascii_art";
+
+    const audio = new Audio("/portal_still_alive.mp3");
+
+    const lyricsDiv = document.getElementById("lyrics")! as HTMLDivElement;
+
+    const creditsDiv = document.getElementById("credits")! as HTMLDivElement;
+
+    const artDiv = document.getElementById("art")! as HTMLDivElement;
+
+    audio.addEventListener("canplaythrough", () => {
+        const startTime = performance.now();
+
+        let expectedTime = 0;
+        let lyricIndex = 0;
+
+        let songStarted = false;
+        let previousLineDone = true;
+
+        function playSong() {
+            const elasped = performance.now() - startTime;
+
+            if (!songStarted && elasped >= 6850) {
+                audio.play();
+                songStarted = true;
+
+                console.log(`Started playing audio after ${elasped}ms`);
+            }
+
+            if (previousLineDone && elasped >= expectedTime) {
+                const lyric = lyrics[lyricIndex];
+
+                if (lyric.asciiArt !== undefined) {
+                    artDiv.innerText = ASCII_ART[lyric.asciiArt];
+                }
+
+                drawLine(lyric, elasped - expectedTime).then(() => {
+                    previousLineDone = true;
+                });
+
+                expectedTime += lyric.duration;
+                lyricIndex++;
+                previousLineDone = false;
+            }
+
+            window.requestAnimationFrame(playSong);
+        }
+
+        function drawLine(lyric: Lyric, deviation: number): Promise<void> {
+            switch (lyric.line) {
+                case " ":
+                    return new Promise((resolve) =>
+                        setTimeout(resolve, lyric.duration - deviation),
+                    );
+                case "* ":
+                    return new Promise((resolve) => {
+                        setTimeout(() => {
+                            lyricsDiv.innerText += " ";
+                            resolve();
+                        }, lyric.duration - deviation);
+                    });
+                case "&":
+                    return new Promise((resolve) => {
+                        setTimeout(() => {
+                            lyricsDiv.innerText = "";
+                            resolve();
+                        }, lyric.duration - deviation);
+                    });
+                case "^":
+                    return new Promise((resolve) => {
+                        setTimeout(() => {
+                            lyricsDiv.innerText += "\n";
+                            resolve();
+                        }, lyric.duration - deviation);
+                    });
+
+                default:
+                    return new Promise((resolve) => {
+                        let charIndex = 0;
+
+                        let id = setInterval(
+                            () => {
+                                const char = lyric.line[charIndex];
+
+                                lyricsDiv.innerHTML += char;
+                                charIndex++;
+
+                                if (charIndex >= lyric.line.length) {
+                                    if (!lyric.sameLine) {
+                                        lyricsDiv.innerText += "\n";
+                                    }
+
+                                    clearInterval(id);
+                                    resolve();
+                                }
+                            },
+                            (lyric.duration - deviation) / lyric.line.length,
+                        );
+                    });
+            }
+        }
+
+        window.requestAnimationFrame(playSong);
+    });
+</script>
diff --git a/src/pages/ascii_art.ts → src/components/ascii_art.ts b/src/pages/ascii_art.ts → src/components/ascii_art.ts
diff --git a/src/pages/lyrics.ts → src/components/lyrics.ts b/src/pages/lyrics.ts → src/components/lyrics.ts
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,5 +1,5 @@
 ---
-
+import Credits from "../components/Credits.astro";
 ---
 
 <html lang="en">
@@ -8,130 +8,8 @@
 		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>The cake is a lie</title>
-		<script>
-			import { lyrics, type Lyric } from "./lyrics.ts";
-			import { ASCII_ART } from "./ascii_art.ts";
-
-			const audio = new Audio("/portal_still_alive.mp3");
-
-			const lyricsDiv = document.getElementById(
-				"lyrics",
-			)! as HTMLDivElement;
-
-			const creditsDiv = document.getElementById(
-				"credits",
-			)! as HTMLDivElement;
-
-			const artDiv = document.getElementById("art")! as HTMLDivElement;
-
-			audio.addEventListener("canplaythrough", (event) => {
-				const startTime = performance.now();
-
-				let expectedTime = 0;
-				let lyricIndex = 0;
-
-				let songStarted = false;
-				let previousLineDone = true;
-
-				function playSong() {
-					const elasped = performance.now() - startTime;
-
-					if (!songStarted && elasped >= 6850) {
-						audio.play();
-						songStarted = true;
-
-						console.log(`Started playing audio after ${elasped}ms`);
-					}
-
-					if (previousLineDone && elasped >= expectedTime) {
-						const lyric = lyrics[lyricIndex];
-
-						if (lyric.asciiArt !== undefined) {
-							artDiv.innerText = ASCII_ART[lyric.asciiArt];
-						}
-
-						drawLine(lyric, elasped - expectedTime).then(() => {
-							previousLineDone = true;
-						});
-
-						expectedTime += lyric.duration;
-						lyricIndex++;
-						previousLineDone = false;
-					}
-
-					window.requestAnimationFrame(playSong);
-				}
-
-				function drawLine(
-					lyric: Lyric,
-					deviation: number,
-				): Promise<void> {
-					switch (lyric.line) {
-						case " ":
-							return new Promise((resolve) =>
-								setTimeout(resolve, lyric.duration - deviation),
-							);
-						case "* ":
-							return new Promise((resolve) => {
-								setTimeout(() => {
-									lyricsDiv.innerText += " ";
-									resolve();
-								}, lyric.duration - deviation);
-							});
-						case "&":
-							return new Promise((resolve) => {
-								setTimeout(() => {
-									lyricsDiv.innerText = "";
-									resolve();
-								}, lyric.duration - deviation);
-							});
-						case "^":
-							return new Promise((resolve) => {
-								setTimeout(() => {
-									lyricsDiv.innerText += "\n";
-									resolve();
-								}, lyric.duration - deviation);
-							});
-
-						default:
-							return new Promise((resolve) => {
-								let charIndex = 0;
-
-								let id = setInterval(
-									() => {
-										const char = lyric.line[charIndex];
-
-										lyricsDiv.innerHTML += char;
-										charIndex++;
-
-										if (charIndex >= lyric.line.length) {
-											if (!lyric.sameLine) {
-												lyricsDiv.innerText += "\n";
-											}
-
-											clearInterval(id);
-											resolve();
-										}
-									},
-									(lyric.duration - deviation) /
-										lyric.line.length,
-								);
-							});
-					}
-				}
-
-				window.requestAnimationFrame(playSong);
-			});
-		</script>
 	</head>
 	<body>
-		<div class="grid grid-cols-2 grid-rows-2 h-screen">
-			<div class="bg-black text-credits-orange row-span-2" id="lyrics">
-			</div>
-			<div class="bg-lime-600 text-credits-orange" id="credits"></div>
-			<div class="bg-fuchsia-800 text-credits-orange">
-				<pre id="art" class="leading-[1.2]"></pre>
-			</div>
-		</div>
+		<Credits />
 	</body>
 </html>