99 lines
2.9 KiB
JavaScript
99 lines
2.9 KiB
JavaScript
function waitForAnimationEnd(elem, animationName)
|
|
{
|
|
return new Promise(resolve => {
|
|
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");
|
|
|
|
async function sessionStartupAnimation()
|
|
{
|
|
// Page setup
|
|
let all_default_elements = document.body.querySelectorAll("*");
|
|
all_default_elements.forEach((elem) => elem.style.opacity = 0);
|
|
|
|
console.log(document.body.style.height);
|
|
|
|
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 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)];
|
|
|
|
// 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.innerHTML = quote.text;
|
|
|
|
document.body.appendChild(text_elem);
|
|
|
|
sound.play();
|
|
|
|
await waitForAnimationEnd(text_elem, "text-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 them and fade in for page content
|
|
document.body.removeChild(author_elem);
|
|
document.body.removeChild(text_elem);
|
|
|
|
all_default_elements.forEach((elem) => elem.style.animation = "opacity-fade-in 0.2s");
|
|
all_default_elements.forEach((elem) => elem.style.opacity = 1);
|
|
}
|
|
|
|
function interruptStartingAnimation()
|
|
{
|
|
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 = () => {
|
|
interruptStartingAnimation();
|
|
window.onkeydown = null;
|
|
}
|
|
|
|
window.onload = () => {
|
|
if(!sessionStorage.getItem("hasExecutedSessionStartupAnimation"))
|
|
{
|
|
sessionStorage.setItem("hasExecutedSessionStartupAnimation", "true");
|
|
sessionStartupAnimation();
|
|
}
|
|
}
|