mirror of
https://iceshrimp.dev/limepotato/jormungandr-bite.git
synced 2025-01-10 15:40:57 -07:00
er?
This commit is contained in:
Iceshrimp development
parent
52792b706e
commit
8b4a927bce
3 changed files with 213 additions and 209 deletions
BIN
.yarn/cache/libopenmpt-wasm-https-c2e0cb89a7-ace14fcb0e.zip
(Stored with Git LFS)
vendored
Normal file
BIN
.yarn/cache/libopenmpt-wasm-https-c2e0cb89a7-ace14fcb0e.zip
(Stored with Git LFS)
vendored
Normal file
Binary file not shown.
|
|
@ -1,224 +1,225 @@
|
|||
<template>
|
||||
<div>
|
||||
<div v-if="achievements" class="root">
|
||||
<div v-for="achievement in achievements" :key="achievement" class="_panel achievement">
|
||||
<div class="icon">
|
||||
<div :class="[['iconFrame'], ['iconFrame_' + ACHIEVEMENT_BADGES[achievement.name].frame]]">
|
||||
<div class="iconInner" :style="{ background: ACHIEVEMENT_BADGES[achievement.name].bg }">
|
||||
<img class="iconImg" :src="ACHIEVEMENT_BADGES[achievement.name].img">
|
||||
<div>
|
||||
<div v-if="achievements" :class="'.root'">
|
||||
<div v-for="achievement in achievements" :key="achievement" :class="'.achievement'" class="_panel">
|
||||
<div :class="'.icon'">
|
||||
<div :class="['.iconFrame', ['iconFrame_' + ACHIEVEMENT_BADGES[achievement.name].frame]]">
|
||||
<div :class="['.iconInner']" :style="{ background: ACHIEVEMENT_BADGES[achievement.name].bg }">
|
||||
<img :class="'.iconImg'" :src="ACHIEVEMENT_BADGES[achievement.name].img">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="body">
|
||||
<div class="header">
|
||||
<span class="title">{{ i18n.ts._achievements._types['_' + achievement.name].title }}</span>
|
||||
<span class="time">
|
||||
<time v-tooltip="new Date(achievement.unlockedAt).toLocaleString()">{{ new Date(achievement.unlockedAt).getFullYear() }}/{{ new Date(achievement.unlockedAt).getMonth() + 1 }}/{{ new Date(achievement.unlockedAt).getDate() }}</time>
|
||||
</span>
|
||||
<div :class="'.body'">
|
||||
<div :class="'.header'">
|
||||
<span :class="'.title'">{{ i18n.ts._achievements._types['_' + achievement.name].title }}</span>
|
||||
<span :class="'.time'">
|
||||
<time v-tooltip="new Date(achievement.unlockedAt).toLocaleString()">{{ new Date(achievement.unlockedAt).getFullYear() }}/{{ new Date(achievement.unlockedAt).getMonth() + 1 }}/{{ new Date(achievement.unlockedAt).getDate() }}</time>
|
||||
</span>
|
||||
</div>
|
||||
<div :class="'.description'">{{ i18n.ts._achievements._types['_' + achievement.name].description }}</div>
|
||||
<div v-if="i18n.ts._achievements._types['_' + achievement.name].flavor" :class="'.flavor'">{{ i18n.ts._achievements._types['_' + achievement.name].flavor }}</div>
|
||||
</div>
|
||||
<div class="description">{{ i18n.ts._achievements._types['_' + achievement.name].description }}</div>
|
||||
<div v-if="i18n.ts._achievements._types['_' + achievement.name].flavor" class="flavor">{{ i18n.ts._achievements._types['_' + achievement.name].flavor }}</div>
|
||||
</div>
|
||||
<template v-if="withLocked">
|
||||
<div v-for="achievement in lockedAchievements" :key="achievement" :class="['.achievement', '.locked']" class="_panel" @click="achievement === 'clickedClickHere' ? clickHere() : () => {}">
|
||||
<div :class="'.icon'">
|
||||
</div>
|
||||
<div :class="'.body'">
|
||||
<div :class="'.header'">
|
||||
<span :class="'.title'">???</span>
|
||||
</div>
|
||||
<div :class="'.description'">???</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div v-else>
|
||||
<MkLoading/>
|
||||
</div>
|
||||
<template v-if="withLocked">
|
||||
<div v-for="achievement in lockedAchievements" :key="achievement" class="_panel achievement locked" @click="achievement === 'clickedClickHere' ? clickHere() : () => {}">
|
||||
<div class="icon">
|
||||
</div>
|
||||
<div class="body">
|
||||
<div class="header">
|
||||
<span class="title">???</span>
|
||||
</div>
|
||||
<div class="description">???</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div v-else>
|
||||
<MkLoading/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import * as misskey from 'misskey-js';
|
||||
import { onMounted } from 'vue';
|
||||
import * as os from '@/os';
|
||||
import { i18n } from '@/i18n';
|
||||
import { ACHIEVEMENT_TYPES, ACHIEVEMENT_BADGES, claimAchievement } from '@/scripts/achievements';
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
user: misskey.entities.User;
|
||||
withLocked: boolean;
|
||||
}>(), {
|
||||
withLocked: true,
|
||||
});
|
||||
|
||||
let achievements = $ref();
|
||||
const lockedAchievements = $computed(() => ACHIEVEMENT_TYPES.filter(x => !(achievements ?? []).some(a => a.name === x)));
|
||||
|
||||
function fetch() {
|
||||
os.api('users/achievements', { userId: props.user.id }).then(res => {
|
||||
achievements = [];
|
||||
for (const t of ACHIEVEMENT_TYPES) {
|
||||
const a = res.find(x => x.name === t);
|
||||
if (a) achievements.push(a);
|
||||
}
|
||||
//achievements = res.sort((a, b) => b.unlockedAt - a.unlockedAt);
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import * as misskey from 'misskey-js';
|
||||
import { onMounted } from 'vue';
|
||||
import * as os from '@/os';
|
||||
import { i18n } from '@/i18n';
|
||||
import { ACHIEVEMENT_TYPES, ACHIEVEMENT_BADGES, claimAchievement } from '@/scripts/achievements';
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
user: misskey.entities.User;
|
||||
withLocked: boolean;
|
||||
}>(), {
|
||||
withLocked: true,
|
||||
});
|
||||
}
|
||||
|
||||
function clickHere() {
|
||||
claimAchievement('clickedClickHere');
|
||||
fetch();
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
fetch();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.root {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, min(380px, 100%));
|
||||
grid-gap: 12px;
|
||||
place-content: center;
|
||||
}
|
||||
|
||||
.achievement {
|
||||
display: flex;
|
||||
padding: 16px;
|
||||
|
||||
&.locked {
|
||||
opacity: 0.5;
|
||||
|
||||
let achievements = $ref();
|
||||
const lockedAchievements = $computed(() => ACHIEVEMENT_TYPES.filter(x => !(achievements ?? []).some(a => a.name === x)));
|
||||
|
||||
function fetch() {
|
||||
os.api('users/achievements', { userId: props.user.id }).then(res => {
|
||||
achievements = [];
|
||||
for (const t of ACHIEVEMENT_TYPES) {
|
||||
const a = res.find(x => x.name === t);
|
||||
if (a) achievements.push(a);
|
||||
}
|
||||
//achievements = res.sort((a, b) => b.unlockedAt - a.unlockedAt);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
flex-shrink: 0;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
@keyframes shine {
|
||||
0% { translate: -30px; }
|
||||
100% { translate: -130px; }
|
||||
}
|
||||
|
||||
.iconFrame {
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
padding: 6px;
|
||||
border-radius: 100%;
|
||||
box-sizing: border-box;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
filter: drop-shadow(0px 2px 2px #00000044);
|
||||
box-shadow: 0 1px 0px #ffffff88 inset;
|
||||
overflow: clip;
|
||||
}
|
||||
.iconFrame_bronze {
|
||||
background: linear-gradient(0deg, #703827, #d37566);
|
||||
|
||||
> .iconInner {
|
||||
background: linear-gradient(0deg, #d37566, #703827);
|
||||
|
||||
function clickHere() {
|
||||
claimAchievement('clickedClickHere');
|
||||
fetch();
|
||||
}
|
||||
}
|
||||
.iconFrame_silver {
|
||||
background: linear-gradient(0deg, #7c7c7c, #e1e1e1);
|
||||
|
||||
> .iconInner {
|
||||
background: linear-gradient(0deg, #e1e1e1, #7c7c7c);
|
||||
|
||||
onMounted(() => {
|
||||
fetch();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" module>
|
||||
.root {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, min(380px, 100%));
|
||||
grid-gap: 12px;
|
||||
place-content: center;
|
||||
}
|
||||
}
|
||||
.iconFrame_gold {
|
||||
background: linear-gradient(0deg, rgba(255,182,85,1) 0%, rgba(233,133,0,1) 49%, rgba(255,243,93,1) 51%, rgba(255,187,25,1) 100%);
|
||||
|
||||
> .iconInner {
|
||||
background: linear-gradient(0deg, #ffee20, #eb7018);
|
||||
|
||||
.achievement {
|
||||
display: flex;
|
||||
padding: 16px;
|
||||
|
||||
&.locked {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
|
||||
.icon {
|
||||
flex-shrink: 0;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
@keyframes shine {
|
||||
0% { translate: -30px; }
|
||||
100% { translate: -130px; }
|
||||
}
|
||||
|
||||
.iconFrame {
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
padding: 6px;
|
||||
border-radius: 100%;
|
||||
box-sizing: border-box;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
filter: drop-shadow(0px 2px 2px #00000044);
|
||||
box-shadow: 0 1px 0px #ffffff88 inset;
|
||||
overflow: clip;
|
||||
}
|
||||
.iconFrame_bronze {
|
||||
background: linear-gradient(0deg, #703827, #d37566);
|
||||
|
||||
> .iconInner {
|
||||
background: linear-gradient(0deg, #d37566, #703827);
|
||||
}
|
||||
}
|
||||
.iconFrame_silver {
|
||||
background: linear-gradient(0deg, #7c7c7c, #e1e1e1);
|
||||
|
||||
> .iconInner {
|
||||
background: linear-gradient(0deg, #e1e1e1, #7c7c7c);
|
||||
}
|
||||
}
|
||||
.iconFrame_gold {
|
||||
background: linear-gradient(0deg, rgba(255,182,85,1) 0%, rgba(233,133,0,1) 49%, rgba(255,243,93,1) 51%, rgba(255,187,25,1) 100%);
|
||||
|
||||
> .iconInner {
|
||||
background: linear-gradient(0deg, #ffee20, #eb7018);
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
width: 200px;
|
||||
height: 8px;
|
||||
rotate: -45deg;
|
||||
translate: -30px;
|
||||
background: #ffffff88;
|
||||
animation: shine 2s infinite;
|
||||
}
|
||||
}
|
||||
.iconFrame_platinum {
|
||||
background: linear-gradient(0deg, rgba(154,154,154,1) 0%, rgba(226,226,226,1) 49%, rgba(255,255,255,1) 51%, rgba(195,195,195,1) 100%);
|
||||
|
||||
> .iconInner {
|
||||
background: linear-gradient(0deg, #e1e1e1, #7c7c7c);
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
width: 200px;
|
||||
height: 8px;
|
||||
rotate: -45deg;
|
||||
translate: -30px;
|
||||
background: #ffffffee;
|
||||
animation: shine 2s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.iconInner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 100%;
|
||||
box-shadow: 0 1px 0px #ffffff88 inset;
|
||||
}
|
||||
|
||||
.iconImg {
|
||||
width: calc(100% - 12px);
|
||||
height: calc(100% - 12px);
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
width: 200px;
|
||||
height: 8px;
|
||||
rotate: -45deg;
|
||||
translate: -30px;
|
||||
background: #ffffff88;
|
||||
animation: shine 2s infinite;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
filter: drop-shadow(0px 1px 2px #000000aa);
|
||||
}
|
||||
}
|
||||
.iconFrame_platinum {
|
||||
background: linear-gradient(0deg, rgba(154,154,154,1) 0%, rgba(226,226,226,1) 49%, rgba(255,255,255,1) 51%, rgba(195,195,195,1) 100%);
|
||||
|
||||
> .iconInner {
|
||||
background: linear-gradient(0deg, #e1e1e1, #7c7c7c);
|
||||
|
||||
.body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 30px;
|
||||
width: 200px;
|
||||
height: 8px;
|
||||
rotate: -45deg;
|
||||
translate: -30px;
|
||||
background: #ffffffee;
|
||||
animation: shine 2s infinite;
|
||||
|
||||
.header {
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.iconInner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 100%;
|
||||
box-shadow: 0 1px 0px #ffffff88 inset;
|
||||
}
|
||||
|
||||
.iconImg {
|
||||
width: calc(100% - 12px);
|
||||
height: calc(100% - 12px);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
margin: auto;
|
||||
filter: drop-shadow(0px 1px 2px #000000aa);
|
||||
}
|
||||
|
||||
.body {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.time {
|
||||
margin-left: auto;
|
||||
font-size: 85%;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 85%;
|
||||
}
|
||||
|
||||
.flavor {
|
||||
opacity: 0.7;
|
||||
transform: skewX(-15deg);
|
||||
font-size: 85%;
|
||||
margin-top: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
.title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.time {
|
||||
margin-left: auto;
|
||||
font-size: 85%;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 85%;
|
||||
}
|
||||
|
||||
.flavor {
|
||||
opacity: 0.7;
|
||||
transform: skewX(-15deg);
|
||||
font-size: 85%;
|
||||
margin-top: 8px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -225,7 +225,7 @@
|
|||
<MkA
|
||||
v-if="notification.type === 'achievementEarned'"
|
||||
class="text"
|
||||
:to="/my/achievements">
|
||||
:to="'/my/achievements'">
|
||||
{{ i18n.ts._achievements._types['_' + notification.achievement].title }}
|
||||
</MkA>
|
||||
<span
|
||||
|
|
|
|||
Loading…
Reference in a new issue