㊙️
This commit is contained in:
syuilo
parent
2112fb3896
commit
9a270e59a4
4 changed files with 266 additions and 46 deletions
|
|
@ -1,50 +1,54 @@
|
|||
<template>
|
||||
<FormBase class="znqjceqz">
|
||||
<section class="_formItem">
|
||||
<div class="_formPanel" style="text-align: center; padding: 16px;">
|
||||
<img src="/assets/icons/512.png" alt="" style="display: block; width: 100px; margin: 0 auto; border-radius: 16px;" ref="icon"/>
|
||||
<div style="margin-top: 0.75em;">Misskey</div>
|
||||
<div style="opacity: 0.5;">v{{ version }}</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="_formItem" style="text-align: center; padding: 0 16px;">
|
||||
{{ $t('_aboutMisskey.about') }}
|
||||
</section>
|
||||
<FormGroup>
|
||||
<FormLink to="https://github.com/syuilo/misskey" external>
|
||||
<template #icon><Fa :icon="faCode"/></template>
|
||||
{{ $t('_aboutMisskey.source') }}
|
||||
<template #suffix>GitHub</template>
|
||||
</FormLink>
|
||||
<FormLink to="https://crowdin.com/project/misskey" external>
|
||||
<template #icon><Fa :icon="faLanguage"/></template>
|
||||
{{ $t('_aboutMisskey.translation') }}
|
||||
<template #suffix>Crowdin</template>
|
||||
</FormLink>
|
||||
<FormLink to="https://www.patreon.com/syuilo" external>
|
||||
<template #icon><Fa :icon="faHandHoldingMedical"/></template>
|
||||
{{ $t('_aboutMisskey.donate') }}
|
||||
<template #suffix>Patreon</template>
|
||||
</FormLink>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<template #label>{{ $t('_aboutMisskey.contributors') }}</template>
|
||||
<FormLink to="https://github.com/syuilo" external>@syuilo</FormLink>
|
||||
<FormLink to="https://github.com/AyaMorisawa" external>@AyaMorisawa</FormLink>
|
||||
<FormLink to="https://github.com/mei23" external>@mei23</FormLink>
|
||||
<FormLink to="https://github.com/acid-chicken" external>@acid-chicken</FormLink>
|
||||
<FormLink to="https://github.com/tamaina" external>@tamaina</FormLink>
|
||||
<FormLink to="https://github.com/rinsuki" external>@rinsuki</FormLink>
|
||||
<FormLink to="https://github.com/Xeltica" external>@Xeltica</FormLink>
|
||||
<FormLink to="https://github.com/u1-liquid" external>@u1-liquid</FormLink>
|
||||
<template #caption><MkLink url="https://github.com/syuilo/misskey/graphs/contributors">{{ $t('_aboutMisskey.allContributors') }}</MkLink></template>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<template #label><Mfm text="[jelly ❤]"/> {{ $t('_aboutMisskey.patrons') }}</template>
|
||||
<FormKeyValueView v-for="patron in patrons" :key="patron"><template #key>{{ patron }}</template></FormKeyValueView>
|
||||
<template #caption>{{ $t('_aboutMisskey.morePatrons') }}</template>
|
||||
</FormGroup>
|
||||
</FormBase>
|
||||
<div style="overflow: hidden;">
|
||||
<FormBase class="znqjceqz">
|
||||
<div id="debug"></div>
|
||||
<section class="_formItem">
|
||||
<div class="_formPanel" style="text-align: center; padding: 16px;" ref="about">
|
||||
<img src="/assets/icons/512.png" alt="" style="display: block; width: 100px; margin: 0 auto; border-radius: 16px;" ref="icon" @load="iconLoaded" draggable="false"/>
|
||||
<div style="margin: 0.75em auto 0 auto; width: max-content;">Misskey</div>
|
||||
<div style="margin: 0 auto; opacity: 0.5; width: max-content;">v{{ version }}</div>
|
||||
<span v-for="emoji in easterEggEmojis" :key="emoji.emoji" class="_physics_circle_" :style="{ position: 'absolute', top: emoji.top, left: emoji.left, userSelect: 'none' }"><MkEmoji style="pointer-events: none; font-size: 24px; width: 24px;" :emoji="emoji.emoji" :custom-emojis="$store.state.instance.meta.emojis" :is-reaction="false" :normal="true" :no-style="true"/></span>
|
||||
</div>
|
||||
</section>
|
||||
<section class="_formItem" style="text-align: center; padding: 0 16px;" @click="gravity">
|
||||
{{ $t('_aboutMisskey.about') }}
|
||||
</section>
|
||||
<FormGroup>
|
||||
<FormLink to="https://github.com/syuilo/misskey" external>
|
||||
<template #icon><Fa :icon="faCode"/></template>
|
||||
{{ $t('_aboutMisskey.source') }}
|
||||
<template #suffix>GitHub</template>
|
||||
</FormLink>
|
||||
<FormLink to="https://crowdin.com/project/misskey" external>
|
||||
<template #icon><Fa :icon="faLanguage"/></template>
|
||||
{{ $t('_aboutMisskey.translation') }}
|
||||
<template #suffix>Crowdin</template>
|
||||
</FormLink>
|
||||
<FormLink to="https://www.patreon.com/syuilo" external>
|
||||
<template #icon><Fa :icon="faHandHoldingMedical"/></template>
|
||||
{{ $t('_aboutMisskey.donate') }}
|
||||
<template #suffix>Patreon</template>
|
||||
</FormLink>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<template #label>{{ $t('_aboutMisskey.contributors') }}</template>
|
||||
<FormLink to="https://github.com/syuilo" external>@syuilo</FormLink>
|
||||
<FormLink to="https://github.com/AyaMorisawa" external>@AyaMorisawa</FormLink>
|
||||
<FormLink to="https://github.com/mei23" external>@mei23</FormLink>
|
||||
<FormLink to="https://github.com/acid-chicken" external>@acid-chicken</FormLink>
|
||||
<FormLink to="https://github.com/tamaina" external>@tamaina</FormLink>
|
||||
<FormLink to="https://github.com/rinsuki" external>@rinsuki</FormLink>
|
||||
<FormLink to="https://github.com/Xeltica" external>@Xeltica</FormLink>
|
||||
<FormLink to="https://github.com/u1-liquid" external>@u1-liquid</FormLink>
|
||||
<template #caption><MkLink url="https://github.com/syuilo/misskey/graphs/contributors">{{ $t('_aboutMisskey.allContributors') }}</MkLink></template>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<template #label><Mfm text="[jelly ❤]"/> {{ $t('_aboutMisskey.patrons') }}</template>
|
||||
<FormKeyValueView v-for="patron in patrons" :key="patron"><template #key>{{ patron }}</template></FormKeyValueView>
|
||||
<template #caption>{{ $t('_aboutMisskey.morePatrons') }}</template>
|
||||
</FormGroup>
|
||||
</FormBase>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
|
|
@ -57,6 +61,7 @@ import FormBase from '@/components/form/base.vue';
|
|||
import FormGroup from '@/components/form/group.vue';
|
||||
import FormKeyValueView from '@/components/form/key-value-view.vue';
|
||||
import MkLink from '@/components/link.vue';
|
||||
import { physics } from '@/scripts/physics.ts';
|
||||
import * as os from '@/os';
|
||||
|
||||
const patrons = [
|
||||
|
|
@ -115,10 +120,24 @@ export default defineComponent({
|
|||
},
|
||||
version,
|
||||
patrons,
|
||||
easterEggReady: false,
|
||||
easterEggEmojis: [],
|
||||
easterEggEngine: null,
|
||||
faInfoCircle, faCode, faLanguage, faHandHoldingMedical,
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
const emojis = this.$store.state.settings.reactions;
|
||||
for (let i = 0; i < 32; i++) {
|
||||
this.easterEggEmojis.push({
|
||||
top: -(32 + (Math.random() * 256)) + 'px',
|
||||
left: (Math.random() * 99) + '%',
|
||||
emoji: emojis[Math.floor(Math.random() * emojis.length)],
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
VanillaTilt.init(this.$refs.icon, {
|
||||
max: 30,
|
||||
|
|
@ -127,6 +146,27 @@ export default defineComponent({
|
|||
speed: 1000,
|
||||
});
|
||||
},
|
||||
|
||||
beforeUnmount() {
|
||||
if (this.easterEggEngine) {
|
||||
this.easterEggEngine.stop();
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
iconLoaded() {
|
||||
this.$nextTick(() => {
|
||||
this.easterEggReady = true;
|
||||
});
|
||||
},
|
||||
|
||||
gravity() {
|
||||
if (!this.easterEggReady) return;
|
||||
this.easterEggReady = false;
|
||||
this.$refs.icon.vanillaTilt.destroy();
|
||||
this.easterEggEngine = physics(this.$refs.about);
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue