From be19ea610fe4f2e8976337b403cd62c3a3abaf33 Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Fri, 30 Sep 2022 17:57:06 +0200
Subject: [PATCH] client: refactor components/ripple.vue to composition API

---
 packages/client/src/components/ripple.vue | 82 ++++++++++-------------
 1 file changed, 35 insertions(+), 47 deletions(-)

diff --git a/packages/client/src/components/ripple.vue b/packages/client/src/components/ripple.vue
index 8761e24d7..b8ff35b01 100644
--- a/packages/client/src/components/ripple.vue
+++ b/packages/client/src/components/ripple.vue
@@ -56,59 +56,47 @@
 </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, onMounted } from 'vue';
+<script lang="ts" setup>
+import { onMounted } from 'vue';
 import * as os from '@/os';
 
-export default defineComponent({
-	props: {
-		x: {
-			type: Number,
-			required: true,
-		},
-		y: {
-			type: Number,
-			required: true,
-		},
-		particle: {
-			type: Boolean,
-			required: false,
-			default: true,
-		},
-	},
-	emits: ['end'],
-	setup(props, context) {
-		const particles = [];
-		const origin = 64;
-		const colors = ['#FF1493', '#00FFFF', '#FFE202'];
+const props = withDefaults(defineProps<{
+	x: number;
+	y: number;
+	particle?: boolean;
+}>(), {
+	particle: true,
+});
 
-		if (props.particle) {
-			for (let i = 0; i < 12; i++) {
-				const angle = Math.random() * (Math.PI * 2);
-				const pos = Math.random() * 16;
-				const velocity = 16 + (Math.random() * 48);
-				particles.push({
-					size: 4 + (Math.random() * 8),
-					xA: origin + (Math.sin(angle) * pos),
-					yA: origin + (Math.cos(angle) * pos),
-					xB: origin + (Math.sin(angle) * (pos + velocity)),
-					yB: origin + (Math.cos(angle) * (pos + velocity)),
-					color: colors[Math.floor(Math.random() * colors.length)],
-				});
-			}
-		}
+const emit = defineEmits<{
+	(ev: 'end'): void;
+}>();
 
-		onMounted(() => {
-			window.setTimeout(() => {
-				context.emit('end');
-			}, 1100);
+const zIndex = os.claimZIndex('high');
+const particles = [];
+const origin = 64;
+const colors = ['#FF1493', '#00FFFF', '#FFE202'];
+
+if (props.particle) {
+	for (let i = 0; i < 12; i++) {
+		const angle = Math.random() * (Math.PI * 2);
+		const pos = Math.random() * 16;
+		const velocity = 16 + (Math.random() * 48);
+		particles.push({
+			size: 4 + (Math.random() * 8),
+			xA: origin + (Math.sin(angle) * pos),
+			yA: origin + (Math.cos(angle) * pos),
+			xB: origin + (Math.sin(angle) * (pos + velocity)),
+			yB: origin + (Math.cos(angle) * (pos + velocity)),
+			color: colors[Math.floor(Math.random() * colors.length)],
 		});
+	}
+}
 
-		return {
-			particles,
-			zIndex: os.claimZIndex('high'),
-		};
-	},
+onMounted(() => {
+	window.setTimeout(() => {
+		emit('end');
+	}, 1100);
 });
 </script>