From 3b617fafdd4bd821b0c4e6706a15279d11a24b7b Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 6 Jan 2023 13:43:10 +0900
Subject: [PATCH] =?UTF-8?q?enhance(client):=20=E3=82=A2=E3=83=83=E3=83=97?=
 =?UTF-8?q?=E3=83=87=E3=83=BC=E3=83=88=E6=99=82=E3=81=AB=E3=82=82=E8=8A=B1?=
 =?UTF-8?q?=E7=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../frontend/src/components/MkUpdated.vue     |  7 ++++-
 packages/frontend/src/pages/user/home.vue     | 27 ++-----------------
 packages/frontend/src/scripts/confetti.ts     | 25 +++++++++++++++++
 3 files changed, 33 insertions(+), 26 deletions(-)
 create mode 100644 packages/frontend/src/scripts/confetti.ts

diff --git a/packages/frontend/src/components/MkUpdated.vue b/packages/frontend/src/components/MkUpdated.vue
index 2f2864220..2ed0c6ea3 100644
--- a/packages/frontend/src/components/MkUpdated.vue
+++ b/packages/frontend/src/components/MkUpdated.vue
@@ -10,12 +10,13 @@
 </template>
 
 <script lang="ts" setup>
-import { shallowRef } from 'vue';
+import { onMounted, shallowRef } from 'vue';
 import MkModal from '@/components/MkModal.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkSparkle from '@/components/MkSparkle.vue';
 import { version } from '@/config';
 import { i18n } from '@/i18n';
+import { confetti } from '@/scripts/confetti';
 
 const modal = shallowRef<InstanceType<typeof MkModal>>();
 
@@ -23,6 +24,10 @@ const whatIsNew = () => {
 	modal.value.close();
 	window.open(`https://misskey-hub.net/docs/releases.html#_${version.replace(/\./g, '-')}`, '_blank');
 };
+
+onMounted(() => {
+	confetti();
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/frontend/src/pages/user/home.vue b/packages/frontend/src/pages/user/home.vue
index 0c66e7a83..8c5c4c309 100644
--- a/packages/frontend/src/pages/user/home.vue
+++ b/packages/frontend/src/pages/user/home.vue
@@ -110,7 +110,6 @@
 <script lang="ts" setup>
 import { defineAsyncComponent, computed, inject, onMounted, onUnmounted, watch } from 'vue';
 import calcAge from 's-age';
-import confetti from 'canvas-confetti';
 import * as misskey from 'misskey-js';
 import XUserTimeline from './index.timeline.vue';
 import XNote from '@/components/MkNote.vue';
@@ -129,6 +128,7 @@ import { useRouter } from '@/router';
 import { i18n } from '@/i18n';
 import { $i } from '@/account';
 import { dateString } from '@/filters/date';
+import { confetti } from '@/scripts/confetti';
 
 const XPhotos = defineAsyncComponent(() => import('./index.photos.vue'));
 const XActivity = defineAsyncComponent(() => import('./index.activity.vue'));
@@ -156,29 +156,6 @@ const age = $computed(() => {
 	return calcAge(props.user.birthday);
 });
 
-function birthdayEffect() {
-	const duration = 1000 * 5;
-	const animationEnd = Date.now() + duration;
-	const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: os.claimZIndex('high') };
-
-	function randomInRange(min, max) {
-		return Math.random() * (max - min) + min;
-	}
-
-	const interval = setInterval(() => {
-		const timeLeft = animationEnd - Date.now();
-
-		if (timeLeft <= 0) {
-			return clearInterval(interval);
-		}
-
-		const particleCount = 50 * (timeLeft / duration);
-		// since particles fall down, start a bit higher than random
-		confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } }));
-		confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } }));
-	}, 250);
-}
-
 function menu(ev) {
 	os.popupMenu(getUserMenu(props.user, router), ev.currentTarget ?? ev.target);
 }
@@ -211,7 +188,7 @@ onMounted(() => {
 		const bm = parseInt(props.user.birthday.split('-')[1]);
 		const bd = parseInt(props.user.birthday.split('-')[2]);
 		if (m === bm && d === bd) {
-			birthdayEffect();
+			confetti();
 		}
 	}
 });
diff --git a/packages/frontend/src/scripts/confetti.ts b/packages/frontend/src/scripts/confetti.ts
new file mode 100644
index 000000000..2a9f39390
--- /dev/null
+++ b/packages/frontend/src/scripts/confetti.ts
@@ -0,0 +1,25 @@
+import _confetti from 'canvas-confetti';
+import * as os from '@/os';
+
+export function confetti() {
+	const duration = 1000 * 5;
+	const animationEnd = Date.now() + duration;
+	const defaults = { startVelocity: 30, spread: 360, ticks: 60, zIndex: os.claimZIndex('high') };
+
+	function randomInRange(min, max) {
+		return Math.random() * (max - min) + min;
+	}
+
+	const interval = setInterval(() => {
+		const timeLeft = animationEnd - Date.now();
+
+		if (timeLeft <= 0) {
+			return clearInterval(interval);
+		}
+
+		const particleCount = 50 * (timeLeft / duration);
+		// since particles fall down, start a bit higher than random
+		_confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 } }));
+		_confetti(Object.assign({}, defaults, { particleCount, origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 } }));
+	}, 250);
+}