diff --git a/packages/client/assets/woozy.png b/packages/client/assets/woozy.png new file mode 100644 index 000000000..53419f14b --- /dev/null +++ b/packages/client/assets/woozy.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:12534af236ea0fb67db6ac7df1c62a4e847fb3e7dd31b05d142dd3a66cf9c8eb +size 18990 diff --git a/packages/client/src/components/MkStarButton.vue b/packages/client/src/components/MkStarButton.vue index 4902b7428..e1deb47ed 100644 --- a/packages/client/src/components/MkStarButton.vue +++ b/packages/client/src/components/MkStarButton.vue @@ -1,6 +1,13 @@ @@ -9,6 +16,7 @@ import type { Note } from 'calckey-js/built/entities'; import Ripple from '@/components/MkRipple.vue'; import { pleaseLogin } from '@/scripts/please-login'; import * as os from '@/os'; +import { defaultStore } from '@/store'; import { i18n } from '@/i18n'; const props = defineProps<{ @@ -19,7 +27,7 @@ function star(ev?: MouseEvent): void { pleaseLogin(); os.api('notes/reactions/create', { noteId: props.note.id, - reaction: '⭐', + reaction: defaultStore.woozyMode ? '🥴' : '⭐', }); const el = ev && (ev.currentTarget ?? ev.target) as HTMLElement | null | undefined; if (el) { diff --git a/packages/client/src/pages/about.vue b/packages/client/src/pages/about.vue index 017603757..2c6c44d3c 100644 --- a/packages/client/src/pages/about.vue +++ b/packages/client/src/pages/about.vue @@ -14,7 +14,7 @@
- +
{{ $instance.name || host }}
@@ -113,16 +113,19 @@ import { defaultStore } from '@/store'; import 'swiper/scss'; import 'swiper/scss/virtual'; -const props = withDefaults(defineProps<{ +withDefaults(defineProps<{ initialTab?: string; }>(), { initialTab: 'overview', }); let stats = $ref(null); +let icon = $ref(null); +let iconClicks = 0; let tabs = ['overview', 'emojis', 'charts']; let tab = $ref(tabs[0]); watch($$(tab), () => (syncSlide(tabs.indexOf(tab)))); +watch(defaultStore.woozyMode, () => {}); if (iAmModerator) tabs.push('federation'); @@ -166,6 +169,10 @@ definePageMetadata(computed(() => ({ let swiperRef = null; +async function sleep(seconds) { + return new Promise((resolve) => setTimeout(resolve, seconds * 1000)); +} + function setSwiperRef(swiper) { swiperRef = swiper; syncSlide(tabs.indexOf(tab)); @@ -178,9 +185,72 @@ function onSlideChange() { function syncSlide(index) { swiperRef.slideTo(index); } + +onMounted(() => { + icon.addEventListener('click', async () => { + iconClicks++; + icon.style.animation = 'unset'; + await sleep(0.1); + icon.style.animation = `iconShake${(iconClicks % 3) + 1} 1 0.3s`; + if (iconClicks % 3 === 0) { + defaultStore.set('woozyMode', !defaultStore.woozyMode); + await sleep(1.5); + icon.style.animation = 'unset'; + icon.style.animation = 'swpinY 1 0.6s'; + } + }); +}); +