From fd9d19d2751363a24f36b37a9f65dda30c8c9003 Mon Sep 17 00:00:00 2001
From: Ulysse Cura <ulysse.cura@gmail.com>
Date: Sun, 8 Mar 2026 13:37:13 +0100
Subject: [PATCH] Syncronized sound and animation and cleaner interruption

---
 scripts/session_startup_animation.js | 17 ++++++++++++-----
 styles/session_startup_animation.css |  2 +-
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/scripts/session_startup_animation.js b/scripts/session_startup_animation.js
index 3244046..a08e7e9 100644
--- a/scripts/session_startup_animation.js
+++ b/scripts/session_startup_animation.js
@@ -9,10 +9,13 @@ function waitForAnimationEnd(elem, animationName)
                 resolve();
             }
         }
+
         elem.onanimationend = handleAnimationEnd;
     });
 }
 
+let sound = new Audio("../assets/game-boy-advance-startup-sound.mp3");
+
 async function sessionStartupAnimation()
 {
     // Page setup
@@ -48,11 +51,10 @@ async function sessionStartupAnimation()
     text_elem.className = "startup-animation-text";
     text_elem.innerHTML = quote.text;
 
-    let sound = new Audio("../assets/game-boy-advance-startup-sound.mp3");
-    sound.play();
-
     document.body.appendChild(text_elem);
 
+    sound.play();
+
     await waitForAnimationEnd(text_elem, "text-animation");
 
     // Fade out for both
@@ -73,8 +75,13 @@ async function sessionStartupAnimation()
 
 function interruptStartingAnimation()
 {
-    // Bad but works in this context
-    window.location.reload();
+    let author_elem = document.body.querySelector(".startup-animation-author");
+    author_elem.getAnimations().forEach((animation) => animation.finish());
+
+    let text_elem = document.body.querySelector(".startup-animation-text");
+    text_elem.getAnimations().forEach((animation) => animation.finish());
+
+    sound.currentTime = 2.75;
 }
 
 window.onkeydown = () => {
diff --git a/styles/session_startup_animation.css b/styles/session_startup_animation.css
index 89c0ced..58ab622 100644
--- a/styles/session_startup_animation.css
+++ b/styles/session_startup_animation.css
@@ -66,7 +66,7 @@
     width: 100%;
     top: 25%;
     text-align: center;
-    animation: text-animation 2.5s ease-in-out, opacity-fade-in 1s;
+    animation: text-animation 3s ease-in-out, opacity-fade-in 1s;
 }
 
 .startup-animation-author {