MarseyWorld/files/assets/js/fireworks.js

const fireworks = document.getElementsByClassName("firework")
let counter = 0

for (let firework of fireworks){
	const timeout = 2000 * counter
	counter++
	setTimeout(() => {
		setInterval(() => {
			firework.firstElementChild.src = "/i/firework-trail.webp"

			const xpos = Math.floor(Math.random() * 80) + 5
			let ypos = 95
			firework.style.top=ypos+"%"
			firework.style.left=xpos+"%"

			firework.style.display="inline-block"
			const hue = Math.floor(Math.random()*360)+1
			firework.style.filter="hue-rotate("+hue+"deg)"

			let id = null
			const height = Math.floor(Math.random()*60)+15
			clearInterval(id);
			id = setInterval(frame, 20);

			const vnum = Math.floor(Math.random()*1000)

			function frame() {
				if (ypos <= height) {
					clearInterval(id);
					firework.firstElementChild.src = "/i/firework-explosion.webp?v="+vnum
				} else {
					ypos--;
					firework.style.top=ypos+"%"
				}
			}
		}, 7000)
	}, timeout)
}