From f4b9244a88ea6e4f141c3dfc7dc8a75841367c2e Mon Sep 17 00:00:00 2001
From: Francis Dinh <normandy@biribiri.dev>
Date: Sat, 10 Sep 2022 00:42:39 -0400
Subject: [PATCH] client: refactor sparkle.vue to composition api

---
 packages/client/src/components/sparkle.vue | 102 ++++++++++-----------
 1 file changed, 50 insertions(+), 52 deletions(-)

diff --git a/packages/client/src/components/sparkle.vue b/packages/client/src/components/sparkle.vue
index a72ea6976..9c84afcfa 100644
--- a/packages/client/src/components/sparkle.vue
+++ b/packages/client/src/components/sparkle.vue
@@ -63,62 +63,60 @@
 </span>
 </template>
 
-<script lang="ts">
-import { defineComponent, onMounted, onUnmounted, ref } from 'vue';
+<script lang="ts" setup>
+import { onMounted, onUnmounted } from 'vue';
 
-export default defineComponent({
-	setup() {
-		const particles = ref([]);
-		const el = ref<HTMLElement>();
-		const width = ref(0);
-		const height = ref(0);
-		const colors = ['#FF1493', '#00FFFF', '#FFE202', '#FFE202', '#FFE202'];
-		let stop = false;
-		let ro: ResizeObserver | undefined;
+type Particle = {
+	id: string;
+	x: number;
+	y: number;
+	size: number;
+	dur: number;
+	color: string;
+};
 
-		onMounted(() => {
-			ro = new ResizeObserver(() => {
-				width.value = el.value?.offsetWidth + 64;
-				height.value = el.value?.offsetHeight + 64;
-			});
-			ro.observe(el.value);
-			const add = () => {
-				if (stop) return;
-				const x = (Math.random() * (width.value - 64));
-				const y = (Math.random() * (height.value - 64));
-				const sizeFactor = Math.random();
-				const particle = {
-					id: Math.random().toString(),
-					x,
-					y,
-					size: 0.2 + ((sizeFactor / 10) * 3),
-					dur: 1000 + (sizeFactor * 1000),
-					color: colors[Math.floor(Math.random() * colors.length)],
-				};
-				particles.value.push(particle);
-				window.setTimeout(() => {
-					particles.value = particles.value.filter(x => x.id !== particle.id);
-				}, particle.dur - 100);
+let particles: Particle[] = $ref([]);
+let el: HTMLElement = $ref();
+let width = $ref(0);
+let height = $ref(0);
+const colors = ['#FF1493', '#00FFFF', '#FFE202', '#FFE202', '#FFE202'];
+let stop = false;
+let ro: ResizeObserver | undefined;
 
-				window.setTimeout(() => {
-					add();
-				}, 500 + (Math.random() * 500));
-			};
-			add();
-		});
-		
-		onUnmounted(() => {
-			if (ro) ro.disconnect();
-			stop = true;
-		});
-
-		return {
-			el,
-			width,
-			height,
-			particles,
+onMounted(() => {
+	ro = new ResizeObserver(() => {
+		width = el.offsetWidth + 64;
+		height = el.offsetHeight + 64;
+	});
+	ro.observe(el);
+	const add = (): void => {
+		if (stop) return;
+		const x = (Math.random() * (width - 64));
+		const y = (Math.random() * (height - 64));
+		const sizeFactor = Math.random();
+		const particle = {
+			id: Math.random().toString(),
+			x,
+			y,
+			size: 0.2 + ((sizeFactor / 10) * 3),
+			dur: 1000 + (sizeFactor * 1000),
+			color: colors[Math.floor(Math.random() * colors.length)],
 		};
-	},
+		particles.push(particle);
+		window.setTimeout(() => {
+			particles = particles.filter(p => p.id !== particle.id);
+		}, particle.dur - 100);
+
+		window.setTimeout(() => {
+			add();
+		}, 500 + (Math.random() * 500));
+	};
+	add();
+});
+
+onUnmounted(() => {
+	if (ro) ro.disconnect();
+	stop = true;
 });
 </script>