65 lines
1.6 KiB
Vue
65 lines
1.6 KiB
Vue
<template>
|
|
<Teleport to="body">
|
|
<TransitionGroup
|
|
name="achievement"
|
|
tag="div"
|
|
class="fixed bottom-4 right-4 z-50 flex flex-col gap-2"
|
|
>
|
|
<div
|
|
v-for="ach in visibleAchievements"
|
|
:key="ach.id"
|
|
class="bg-slate-800 border border-yellow-500/50 rounded-xl p-4 shadow-2xl max-w-sm flex items-start gap-3"
|
|
>
|
|
<div class="text-3xl">{{ ach.icon || '🏆' }}</div>
|
|
<div>
|
|
<h4 class="font-bold text-yellow-400 text-sm">{{ ach.title }}</h4>
|
|
<p class="text-xs text-slate-400 mt-0.5">{{ ach.description }}</p>
|
|
</div>
|
|
<button
|
|
@click="dismiss(ach.id)"
|
|
class="text-slate-500 hover:text-slate-300 ml-2"
|
|
>
|
|
✕
|
|
</button>
|
|
</div>
|
|
</TransitionGroup>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
achievements: { type: Array, default: () => [] }
|
|
})
|
|
|
|
const visibleAchievements = ref([])
|
|
|
|
watch(() => props.achievements, (newAchievements) => {
|
|
const incoming = newAchievements.filter(a => !visibleAchievements.value.find(v => v.id === a.id))
|
|
incoming.forEach(ach => {
|
|
visibleAchievements.value.push(ach)
|
|
setTimeout(() => dismiss(ach.id), 5000)
|
|
})
|
|
}, { deep: true, immediate: true })
|
|
|
|
const dismiss = (id) => {
|
|
visibleAchievements.value = visibleAchievements.value.filter(a => a.id !== id)
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.achievement-enter-active,
|
|
.achievement-leave-active {
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.achievement-enter-from {
|
|
opacity: 0;
|
|
transform: translateX(100%) scale(0.9);
|
|
}
|
|
|
|
.achievement-leave-to {
|
|
opacity: 0;
|
|
transform: translateX(100%) scale(0.9);
|
|
}
|
|
</style>
|