fix(highlights): confetti delay

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);
+	};
+}

package.json

@@ -14,7 +14,7 @@
 	"dependencies": {
 		"@heroicons/vue": "^2.1.3",
 		"@pinia/nuxt": "^0.5.1",
-		"@tsparticles/confetti": "^3.3.0",
+		"@tsparticles/confetti": "^3.5.0",
 		"node-emoji": "^2.1.3",
 		"nuxt": "^3.11.2",
 		"vue": "^3.4.21",

pages/highlights.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import type { Card } from '~/components/HighlightCard.vue';
+import '@tsparticles/confetti';
 
 const { data } = await useFetch('/api/highlights');
+const flippedCards = useFlippedCards();
+const confetti = useConfetti();
 
 type Entries<T> = {
 	[K in keyof T]: [K, T[K]];
@@ -58,7 +61,11 @@ function getFormattedValue(
 	}
 }
 
-const flippedCards = useFlippedCards();
+watch(flippedCards, (newVal) => {
+	if (newVal.value.length === 6) {
+		confetti();
+	}
+});
 </script>
 
 <template>
@@ -67,6 +74,5 @@ const flippedCards = useFlippedCards();
 		<ul class="flex w-fit grid-cols-3 flex-col gap-8 md:grid md:gap-0">
 			<highlightCard v-for="(card, index) of cards" :key="card.title" :card="card" :index="index" />
 		</ul>
-		<Confetti v-if="flippedCards.value.length === 6" />
 	</div>
 </template>