From fda32af58fa8ddb63a02899e716e7650d134dc56 Mon Sep 17 00:00:00 2001 From: Colin Lienard Date: Tue, 16 Jul 2024 16:19:30 +0200 Subject: [PATCH 1/5] fix(highlights): confetti delay --- pages/highlights.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/pages/highlights.vue b/pages/highlights.vue index ee04d71..86490c3 100644 --- a/pages/highlights.vue +++ b/pages/highlights.vue @@ -1,5 +1,6 @@ - - diff --git a/composables/useConfetti.ts b/composables/useConfetti.ts new file mode 100644 index 0000000..ce5552e --- /dev/null +++ b/composables/useConfetti.ts @@ -0,0 +1,26 @@ +import { confetti } from '@tsparticles/confetti'; + +export function useConfetti() { + let interval: NodeJS.Timeout; + + onUnmounted(() => { + clearInterval(interval); + }); + + return () => { + let count = 0; + + interval = setInterval(() => { + confetti({ + particleCount: 100, + spread: 360, + origin: { x: Math.random(), y: Math.random() * 0.8 }, + }); + + count++; + if (count === 5) { + clearInterval(interval); + } + }, 500); + }; +} diff --git a/pages/highlights.vue b/pages/highlights.vue index 86490c3..444fb58 100644 --- a/pages/highlights.vue +++ b/pages/highlights.vue @@ -3,6 +3,8 @@ import type { Card } from '~/components/HighlightCard.vue'; import '@tsparticles/confetti'; const { data } = await useFetch('/api/highlights'); +const flippedCards = useFlippedCards(); +const confetti = useConfetti(); type Entries = { [K in keyof T]: [K, T[K]]; @@ -59,7 +61,11 @@ function getFormattedValue( } } -const flippedCards = useFlippedCards(); +watch(flippedCards, (newVal) => { + if (newVal.value.length === 6) { + confetti(); + } +}); From 55232c8fbc5474de476577b04c75bf10087cc3ac Mon Sep 17 00:00:00 2001 From: Colin Lienard Date: Wed, 17 Jul 2024 10:45:41 +0200 Subject: [PATCH 3/5] changes --- pages/highlights.vue | 1 - 1 file changed, 1 deletion(-) diff --git a/pages/highlights.vue b/pages/highlights.vue index 444fb58..f8135c6 100644 --- a/pages/highlights.vue +++ b/pages/highlights.vue @@ -1,6 +1,5 @@