assets/startup_quotes.json

@@ -20,10 +20,6 @@
             "text": "C",
             "author": "Dennis Ritchie"
         },
-        {
-            "text": "UNIX",
-            "author": "Dennis Ritchie"
-        },
         {
             "text": "PICO",
             "author": "Raspberry Pi"
@@ -44,21 +40,9 @@
             "text": "GNU/LINUX",
             "author": "Linus Torvalds"
         },
-        {
-            "text": "GIT",
-            "author": "Linus Torvalds"
-        },
         {
             "text": "DEBIAN",
             "author": "Ian Murdock"
-        },
-        {
-            "text": "THE LEGEND OF ZELDA",
-            "author": "Nintendo"
-        },
-        {
-            "text": "SUPER MARIO BROS",
-            "author": "Nintendo"
         }
     ]
 }

scripts/session_startup_animation.js

@@ -1,91 +1,96 @@
-function waitForAnimationEnd(elem, animation_name)
+function waitForAnimationEnd(elem, animationName)
 {
     return new Promise(resolve => {
-        elem.onanimationend = (event) => {
-            if(event.animationName === animation_name)
+        function handleAnimationEnd(evt)
+        {
+            if (evt.animationName === animationName)
             {
                 elem.onanimationend = null;
                 resolve();
             }
-        };
+        }
+
+        elem.onanimationend = handleAnimationEnd;
     });
 }
 
 let sound = new Audio("../assets/game-boy-advance-startup-sound.mp3");
-sound.load();
 
 async function sessionStartupAnimation()
 {
     // Page setup
-    let default_elements = document.body.querySelectorAll("*");
-    default_elements.forEach((elem) => elem.style.opacity = 0);
+    let all_default_elements = document.body.querySelectorAll("*");
+    all_default_elements.forEach((elem) => elem.style.opacity = 0);
 
-    // Get quotes possibilities
-    // Not the most optimised way, but it's working
     let xmlhttp = new XMLHttpRequest();
 
+    // Not the most optimised way, but it's working
     xmlhttp.open("GET", "assets/startup_quotes.json", false);
     xmlhttp.send();
     if(xmlhttp.status != 200)
     {
-        throw new WebTransportError({
-            message: "The file 'assets/startup_quotes.json' is not available",
-            streamErrorCode: xmlhttp.status
-        });
+        throw WebTransportError("The file 'assets/startup_quots.json' is not available");
     }
 
     let quotes = JSON.parse(xmlhttp.responseText)["quotes"];
     let quote = quotes[Math.floor(Math.random() * quotes.length)];
 
-    // Add quote
+    // First the author
+    let author_elem = document.createElement("h2");
+    author_elem.className = "startup-animation-author";
+    author_elem.innerHTML = quote.author + "<sup>®</sup>";
+
+    document.body.appendChild(author_elem);
+
+    await waitForAnimationEnd(author_elem, "opacity-fade-in")
+
+    // Then the text and sound
     let text_elem = document.createElement("h1");
     text_elem.className = "startup-animation-text";
-    text_elem.style.setProperty("--delay", String(200 / quote.text.length));
+
+    let time_between_chars = 200 / quote.text.length; // ms
 
     for(let i = 0; i < quote.text.length; i++)
     {
         let char_elem = document.createElement("div");
-
         char_elem.className = "startup-animation-char"
-        char_elem.style.setProperty("--char-nb", String(i));
-
-        char_elem.onanimationstart = (event) => {
-            char_elem.onanimationstart = null;
-            event.target.style.opacity = 1;
-        };
+        char_elem.style.animation =
+            "char-animation 3s ease-in-out " + String(i * time_between_chars) +
+            "ms, opacity-fade-in 1s " + String(i * time_between_chars) + "ms";
 
         if(quote.text[i] == " ")
-            char_elem.innerHTML = "&nbsp;";
+            char_elem.innerHTML = "<pre>" + quote.text[i] + "</pre>";
         else
             char_elem.textContent = quote.text[i];
 
+        console.log(char_elem.onanimationend);
         text_elem.appendChild(char_elem);
     }
 
-    let author_elem = document.createElement("h2");
-    author_elem.className = "startup-animation-author";
-    author_elem.innerHTML = quote.author + "<sup>®</sup>";
-    author_elem.onanimationend = () => {
-        author_elem.onanimationend = null;
-        sound.play();
-    };
-
     document.body.appendChild(text_elem);
-    document.body.appendChild(author_elem);
+
+    sound.play();
+
+    await waitForAnimationEnd(text_elem.firstChild, "opacity-fade-in");
+
+    text_elem.childNodes.forEach((char_elem) => char_elem.style.opacity = 1);
+
+    await waitForAnimationEnd(text_elem.lastChild, "char-animation");
+
+    // Fade out for both
+    text_elem.style.animation = "opacity-fade-out 1s ease-in";
+    text_elem.style.opacity = 0;
+    author_elem.style.animation = "opacity-fade-out 1s ease-in";
+    author_elem.style.opacity = 0;
 
     await waitForAnimationEnd(text_elem, "opacity-fade-out");
 
-    // Remove quote and fade in page content
+    // Remove them and fade in for page content
     document.body.removeChild(author_elem);
     document.body.removeChild(text_elem);
 
-    default_elements.forEach((default_elem) => {
-        default_elem.style.animation = "opacity-fade-in 0.5s ease-in";
-        default_elem.onanimationend = () => {
-            default_elem.onanimationend = null;
-            default_elem.removeAttribute("style");
-        }
-    });
+    all_default_elements.forEach((elem) => elem.style.animation = "opacity-fade-in 0.5s");
+    all_default_elements.forEach((elem) => elem.style.opacity = 1);
 
     window.onkeydown = null;
 }
@@ -102,8 +107,8 @@ function interruptStartingAnimation()
     let text_elem = document.body.querySelectorAll(".startup-animation-char");
     text_elem.forEach((char_elem) => char_elem.getAnimations().forEach((animation) => {
         // No need to skip fade-out because it is handled by startup-animation-text
-        if(animation.currentTime < 3600)
-            animation.currentTime = 3600;
+        if(animation.currentTime < 2800)
+            animation.currentTime = 2800;
     }));
 
     if(sound.currentTime < 2.75)
@@ -118,7 +123,7 @@ window.onkeydown = () => {
 
 // Only start animation once per session
 window.onload = () => {
-    document.body.removeAttribute("style");
+    document.body.style.opacity = 1;
 
     if(!sessionStorage.getItem("hasExecutedSessionStartupAnimation"))
     {

styles/general.css

@@ -1,7 +1,4 @@
 body {
-    margin: 0;
-    height: 100%;
-    width: 100%;
     background-color: #151416;
     color: white;
 }

styles/session_startup_animation.css

@@ -68,7 +68,7 @@
     width: 100%;
     top: 23%;
     text-align: center;
-    align-items: flex-end;
+    align-items: end;
     justify-content: center;
     display: flex;
 }
@@ -80,9 +80,6 @@
 .startup-animation-char {
     position: relative;
     opacity: 0;
-    animation: char-animation   2.9s ease-in-out calc(var(--delay) * var(--char-nb) * 1ms + 1s),
-               opacity-fade-in  1s               calc(var(--delay) * var(--char-nb) * 1ms + 1s),
-               opacity-fade-out 1s ease-in       4s;
 }
 
 .startup-animation-author {
@@ -95,6 +92,5 @@
     bottom: 20%;
     text-align: center;
     white-space: nowrap;
-    animation: opacity-fade-in 1s ease-in,
-               opacity-fade-out 1s ease-in 4s;
+    animation: opacity-fade-in 1s ease-in;
 }