130 lines
3.9 KiB
JavaScript
130 lines
3.9 KiB
JavaScript
function waitForAnimationEnd(elem, animation_name)
|
|
{
|
|
return new Promise(resolve => {
|
|
elem.onanimationend = (event) => {
|
|
if(event.animationName === animation_name)
|
|
{
|
|
elem.onanimationend = null;
|
|
resolve();
|
|
}
|
|
};
|
|
});
|
|
}
|
|
|
|
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);
|
|
|
|
// Get quotes possibilities
|
|
// Not the most optimised way, but it's working
|
|
let xmlhttp = new XMLHttpRequest();
|
|
|
|
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
|
|
});
|
|
}
|
|
|
|
let quotes = JSON.parse(xmlhttp.responseText)["quotes"];
|
|
let quote = quotes[Math.floor(Math.random() * quotes.length)];
|
|
|
|
// Add quote
|
|
let text_elem = document.createElement("h1");
|
|
text_elem.className = "startup-animation-text";
|
|
text_elem.style.setProperty("--delay", String(200 / quote.text.length));
|
|
text_elem.style.setProperty("--half-text-len", String((quote.text.length - 1) / 2));
|
|
|
|
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;
|
|
};
|
|
|
|
if(quote.text[i] == " ")
|
|
char_elem.innerHTML = " ";
|
|
else
|
|
char_elem.textContent = quote.text[i];
|
|
|
|
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);
|
|
|
|
await waitForAnimationEnd(text_elem, "opacity-fade-out");
|
|
|
|
// Remove quote and fade in 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");
|
|
}
|
|
});
|
|
|
|
window.onkeydown = null;
|
|
}
|
|
|
|
function interruptStartingAnimation()
|
|
{
|
|
let author_elem = document.body.querySelector(".startup-animation-author");
|
|
author_elem.getAnimations().forEach((animation) => {
|
|
// Skip if fade-out
|
|
if(animation.animationName != "opacity-fade-out")
|
|
animation.finish();
|
|
});
|
|
|
|
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(sound.currentTime < 2.75)
|
|
{
|
|
sound.currentTime = 2.75;
|
|
}
|
|
}
|
|
|
|
window.onkeydown = () => {
|
|
interruptStartingAnimation();
|
|
}
|
|
|
|
// Only start animation once per session
|
|
window.onload = () => {
|
|
document.body.removeAttribute("style");
|
|
|
|
if(!sessionStorage.getItem("hasExecutedSessionStartupAnimation"))
|
|
{
|
|
sessionStorage.setItem("hasExecutedSessionStartupAnimation", "true");
|
|
sessionStartupAnimation();
|
|
}
|
|
}
|