Improve cursors

morr0ne · Mar 8, 2024 · 2da39f6 · 2da39f6
1 parent 30f2846
commit 2da39f6
Showing 1 changed file with 21 additions and 13 deletions.
diff --git a/src/components/Credits.astro b/src/components/Credits.astro
@@ -93,10 +93,15 @@ const bottomBorder = "-".repeat(50);
     FIXME
     The cursors in the game blink at opposite intervals
     */
-    .cursor {
+    #lyrics-cursor {
         animation: blink 600ms step-end infinite;
     }
 
+    #credits-cursor {
+        visibility: hidden;
+        animation: blink-opposite 600ms step-end infinite;
+    }
+
     @keyframes blink {
         50% {
             visibility: hidden;
@@ -105,6 +110,15 @@ const bottomBorder = "-".repeat(50);
             visibility: visible;
         }
     }
+
+    @keyframes blink-opposite {
+        50% {
+            visibility: visible;
+        }
+        100% {
+            visibility: hidden;
+        }
+    }
 </style>
 
 <div id="screen">
@@ -114,11 +128,11 @@ const bottomBorder = "-".repeat(50);
     <div></div>
     <div id="left-border">{leftBorder}</div>
     <div id="lyrics-container">
-        <span id="lyrics"></span><span class="cursor">_</span>
+        <span id="lyrics"></span><span id="lyrics-cursor">_</span>
     </div>
     <div id="center-border">{centerBorder}</div>
     <div id="credits-container">
-        <span id="credits"></span><span class="cursor">_</span>
+        <span id="credits"></span><span id="credits-cursor">_</span>
     </div>
     <div id="right-border">{rightBorder}</div>
     <div id="middle-border">{topRightBorder}</div>
@@ -182,21 +196,16 @@ const bottomBorder = "-".repeat(50);
 
         const timing = 68.623562;
         const startOffset = 9000;
-        let expectedTime = 9000;
+        let expectedTime = startOffset;
 
         let previousLineDone = true;
 
-        let firstLine = true;
-
         async function playSong() {
             const elasped = performance.now() - startTime;
 
             if (elasped < startOffset) {
                 window.requestAnimationFrame(playSong);
                 return;
-            } else if (firstLine) {
-                creditsDiv.innerText += "\n";
-                firstLine = false;
             }
 
             if (previousLineDone && elasped >= expectedTime) {
@@ -221,10 +230,6 @@ const bottomBorder = "-".repeat(50);
         }
 
         function drawLine(credit: string, deviation: number): Promise<void> {
-            creditsDiv.innerText = creditsDiv.innerText.substring(
-                creditsDiv.innerText.indexOf("\n") + 1,
-            );
-
             return new Promise((resolve) => {
                 let charIndex = 0;
 
@@ -235,6 +240,9 @@ const bottomBorder = "-".repeat(50);
                     charIndex++;
 
                     if (charIndex >= credit.length) {
+                        creditsDiv.innerText = creditsDiv.innerText.substring(
+                            creditsDiv.innerText.indexOf("\n") + 1,
+                        );
                         creditsDiv.innerText += "\n";
 
                         clearInterval(id);