143 lines
3.1 KiB
Vue
143 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
import { useGameStore } from '@/stores/gameStore'
|
|
import { useI18n } from '@/composables/useI18n'
|
|
|
|
defineProps<{
|
|
result: { title: string; titleKey?: string; stats: { label: string; labelKey?: string; variable: string; max?: number }[] }
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
continue: []
|
|
}>()
|
|
|
|
const store = useGameStore()
|
|
const { t } = useI18n()
|
|
|
|
function statValue(variable: string): number {
|
|
return store.variable(variable)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="battle-result-overlay" @click.self="emit('continue')" @keydown.escape="emit('continue')">
|
|
<div class="battle-result-panel">
|
|
<h2 class="result-title">{{ t(result.titleKey || result.title) }}</h2>
|
|
|
|
<div class="result-stats">
|
|
<div
|
|
v-for="(s, index) in result.stats"
|
|
:key="s.variable"
|
|
class="result-stat"
|
|
:style="{ animationDelay: (200 + index * 80) + 'ms' }"
|
|
>
|
|
<span class="rstat-label">{{ t(s.labelKey || s.label) }}</span>
|
|
<span class="rstat-value">
|
|
{{ statValue(s.variable) }}
|
|
<span v-if="s.max !== undefined"> / {{ s.max }}</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="result-continue" @click="emit('continue')">{{ t('ui.continue') }}</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.battle-result-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.85);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 200;
|
|
animation: overlayFadeIn 0.3s ease-out;
|
|
}
|
|
|
|
@keyframes overlayFadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
.battle-result-panel {
|
|
background: #1a1a2e;
|
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
border-radius: 10px;
|
|
padding: 36px 40px;
|
|
min-width: 340px;
|
|
max-width: 440px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
animation: panelEnter 0.35s ease-out;
|
|
}
|
|
|
|
@keyframes panelEnter {
|
|
from { opacity: 0; transform: scale(0.9); }
|
|
to { opacity: 1; transform: scale(1); }
|
|
}
|
|
|
|
.result-title {
|
|
font-size: 24px;
|
|
font-weight: 400;
|
|
color: #ffc107;
|
|
letter-spacing: 4px;
|
|
margin-bottom: 28px;
|
|
opacity: 0;
|
|
animation: statFadeIn 0.3s ease-out 100ms forwards;
|
|
}
|
|
|
|
.result-stats {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
width: 100%;
|
|
}
|
|
|
|
.result-stat {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 10px 16px;
|
|
background: rgba(255, 255, 255, 0.04);
|
|
border-radius: 4px;
|
|
opacity: 0;
|
|
animation: statFadeIn 0.3s ease-out forwards;
|
|
}
|
|
|
|
@keyframes statFadeIn {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.rstat-label {
|
|
font-size: 14px;
|
|
color: #aaa;
|
|
}
|
|
|
|
.rstat-value {
|
|
font-size: 14px;
|
|
color: #eee;
|
|
}
|
|
|
|
.result-continue {
|
|
margin-top: 24px;
|
|
padding: 12px 48px;
|
|
font-size: 16px;
|
|
color: #fff;
|
|
background: rgba(255, 255, 255, 0.08);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
letter-spacing: 2px;
|
|
transition: background 0.15s;
|
|
opacity: 0;
|
|
animation: statFadeIn 0.3s ease-out forwards;
|
|
animation-delay: 600ms;
|
|
}
|
|
|
|
.result-continue:hover {
|
|
background: rgba(255, 255, 255, 0.15);
|
|
}
|
|
</style>
|