diff options
| -rw-r--r-- | CHANGELOG.md | 1 | ||||
| -rw-r--r-- | packages/frontend/package.json | 1 | ||||
| -rw-r--r-- | packages/frontend/src/pages/user/home.vue | 34 | ||||
| -rw-r--r-- | yarn.lock | 8 |
4 files changed, 44 insertions, 0 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md index 556fe12868..6cda5537dc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -80,6 +80,7 @@ You should also include the user name that made the change. - Client: add user list widget @syuilo - Client: add heatmap of daily active users to about page @syuilo - Client: introduce fluent emoji @syuilo +- Client: show fireworks when visit user who today is birthday @syuilo - Client: show bot warning on screen when logged in as bot account @syuilo - Client: improve overall performance of client @syuilo - Client: ui tweaks @syuilo diff --git a/packages/frontend/package.json b/packages/frontend/package.json index d151a7b3af..98230d6ceb 100644 --- a/packages/frontend/package.json +++ b/packages/frontend/package.json @@ -20,6 +20,7 @@ "blurhash": "2.0.4", "broadcast-channel": "4.19.1", "browser-image-resizer": "git+https://github.com/misskey-dev/browser-image-resizer#v2.2.1-misskey.3", + "canvas-confetti": "^1.6.0", "chart.js": "4.1.1", "chartjs-adapter-date-fns": "3.0.0", "chartjs-chart-matrix": "^1.3.0", diff --git a/packages/frontend/src/pages/user/home.vue b/packages/frontend/src/pages/user/home.vue index 11a7ee3b8a..d9d7fc826c 100644 --- a/packages/frontend/src/pages/user/home.vue +++ b/packages/frontend/src/pages/user/home.vue @@ -110,6 +110,7 @@ <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'; @@ -155,6 +156,29 @@ 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); } @@ -180,6 +204,16 @@ function parallax() { onMounted(() => { window.requestAnimationFrame(parallaxLoop); narrow = rootEl!.clientWidth < 1000; + + if (props.user.birthday) { + const m = new Date().getMonth() + 1; + const d = new Date().getDate(); + const bm = parseInt(props.user.birthday.split('-')[1]); + const bd = parseInt(props.user.birthday.split('-')[2]); + if (m === bm && d === bd) { + birthdayEffect(); + } + } }); onUnmounted(() => { @@ -4833,6 +4833,13 @@ __metadata: languageName: node linkType: hard +"canvas-confetti@npm:^1.6.0": + version: 1.6.0 + resolution: "canvas-confetti@npm:1.6.0" + checksum: be19e3be736ab28aa8af7b53cba9f4146f5714edadbf4d5a7d7b1899914dc59a8ac5574260fe6b7d9995c51df5787b0b707adfbb72dbacbc61fc03f9f2b25291 + languageName: node + linkType: hard + "caseless@npm:~0.12.0": version: 0.12.0 resolution: "caseless@npm:0.12.0" @@ -8052,6 +8059,7 @@ __metadata: blurhash: 2.0.4 broadcast-channel: 4.19.1 browser-image-resizer: "git+https://github.com/misskey-dev/browser-image-resizer#v2.2.1-misskey.3" + canvas-confetti: ^1.6.0 chart.js: 4.1.1 chartjs-adapter-date-fns: 3.0.0 chartjs-chart-matrix: ^1.3.0 |