diff --git a/src/components/Credits.astro b/src/components/Credits.astro index 96c06df..3617166 100644 --- 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; + } + }
@@ -114,11 +128,11 @@ const bottomBorder = "-".repeat(50);
{leftBorder}
- _ + _
{centerBorder}
- _ + _
{rightBorder}
{topRightBorder}
@@ -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 { - 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);