oscar-surf/misskey
oscar-surf/misskey
0
0
Fork 0
Code Issues Activity

enhance(client): show fireworks when visit user who today is birthday

Browse source 
Resolve #9476
This commit is contained in:
syuilo 2023-01-06 13:25:49 +09:00
parent 6adc0521d8
commit dc5b4a0402
4 changed files with 44 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

34
packages/frontend/src/pages/user/home.vue
View file

@ -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(() => {