|
|
@ -16,13 +16,18 @@
|
|
|
|
|
|
|
|
|
|
|
|
onMount(() => {
|
|
|
|
onMount(() => {
|
|
|
|
let frame;
|
|
|
|
let frame;
|
|
|
|
|
|
|
|
let lastUpdate = new Date();
|
|
|
|
|
|
|
|
|
|
|
|
function loop() {
|
|
|
|
function loop() {
|
|
|
|
frame = requestAnimationFrame(loop);
|
|
|
|
frame = requestAnimationFrame(loop);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const now = new Date();
|
|
|
|
|
|
|
|
const dt = now - lastUpdate;
|
|
|
|
|
|
|
|
lastUpdate = now;
|
|
|
|
|
|
|
|
|
|
|
|
confetti = confetti.map(emoji => {
|
|
|
|
confetti = confetti.map(emoji => {
|
|
|
|
emoji.y += 0.7 * emoji.r;
|
|
|
|
emoji.y += 0.042 * emoji.r * dt;
|
|
|
|
if (emoji.y > 120) emoji.y = -20;
|
|
|
|
if (emoji.y > 120) emoji.y = ((emoji.y + 20) % 140) - 20;
|
|
|
|
return emoji;
|
|
|
|
return emoji;
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
@ -46,4 +51,4 @@
|
|
|
|
|
|
|
|
|
|
|
|
{#each confetti as c}
|
|
|
|
{#each confetti as c}
|
|
|
|
<span style="left: {c.x}%; top: {c.y}%; transform: scale({c.r})">{c.character}</span>
|
|
|
|
<span style="left: {c.x}%; top: {c.y}%; transform: scale({c.r})">{c.character}</span>
|
|
|
|
{/each}
|
|
|
|
{/each}
|
|
|
|