chore: battle result UI, demo locales, and scene updates

This commit is contained in:
2026-06-14 16:19:31 +08:00
parent c46c4efd6c
commit b61d08a0ca
5 changed files with 51 additions and 11 deletions

View File

@@ -95,5 +95,5 @@
"hud": { "player": "You" },
"result": { "victory": "Victory!" }
},
"stat": { "courage": "Courage" }
"stat": { "courage": "Courage", "qte_succeeded": "QTE Wins", "trust": "Trust", "investigation": "Investigation" }
}

View File

@@ -95,5 +95,5 @@
"hud": { "player": "你" },
"result": { "victory": "击退成功!" }
},
"stat": { "courage": "勇气" }
"stat": { "courage": "勇气", "qte_succeeded": "QTE 成功", "trust": "信任值", "investigation": "调查进度" }
}

View File

@@ -417,7 +417,10 @@
"title": "击退成功!",
"titleKey": "battle.result.victory",
"stats": [
{ "label": "勇气", "labelKey": "stat.courage", "variable": "courage", "max": 100 }
{ "label": "勇气", "labelKey": "stat.courage", "variable": "courage", "max": 100 },
{ "label": "QTE 成功", "labelKey": "stat.qte_succeeded", "variable": "qte_succeeded" },
{ "label": "信任值", "labelKey": "stat.trust", "variable": "trust" },
{ "label": "调查进度", "labelKey": "stat.investigation", "variable": "investigation", "max": 3 }
]
},
"choices": [

View File

@@ -393,11 +393,13 @@ init()
@skip="handleSkip"
@speed-change="handleSpeedChange"
/>
<BattleResult
v-if="store.showBattleResult"
:result="store.battleResultData"
@continue="onBattleResultContinue"
/>
<Transition name="battle-result">
<BattleResult
v-if="store.showBattleResult"
:result="store.battleResultData"
@continue="onBattleResultContinue"
/>
</Transition>
<MainMenu
v-if="!started || store.gameEnded"
:show-resume="!store.gameEnded && hasAutoSave"
@@ -651,3 +653,10 @@ html, body {
.prompt-toast-enter-from,
.prompt-toast-leave-to { opacity: 0; }
</style>
<style>
.battle-result-enter-active { transition: all 0.3s ease-out; }
.battle-result-leave-active { transition: all 0.2s ease-in; }
.battle-result-enter-from { opacity: 0; }
.battle-result-leave-to { opacity: 0; transform: scale(0.95); }
</style>

View File

@@ -1,10 +1,9 @@
<script setup lang="ts">
import type { BattleResultDef } from '@engine/types'
import { useGameStore } from '@/stores/gameStore'
import { useI18n } from '@/composables/useI18n'
defineProps<{
result: BattleResultDef
result: { title: string; titleKey?: string; stats: { label: string; labelKey?: string; variable: string; max?: number }[] }
}>()
const emit = defineEmits<{
@@ -25,7 +24,12 @@ function statValue(variable: string): number {
<h2 class="result-title">{{ t(result.titleKey || result.title) }}</h2>
<div class="result-stats">
<div class="result-stat" v-for="s in result.stats" :key="s.variable">
<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) }}
@@ -48,6 +52,12 @@ function statValue(variable: string): number {
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 {
@@ -60,6 +70,12 @@ function statValue(variable: string): number {
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 {
@@ -68,6 +84,8 @@ function statValue(variable: string): number {
color: #ffc107;
letter-spacing: 4px;
margin-bottom: 28px;
opacity: 0;
animation: statFadeIn 0.3s ease-out 100ms forwards;
}
.result-stats {
@@ -83,6 +101,13 @@ function statValue(variable: string): number {
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 {
@@ -106,6 +131,9 @@ function statValue(variable: string): number {
cursor: pointer;
letter-spacing: 2px;
transition: background 0.15s;
opacity: 0;
animation: statFadeIn 0.3s ease-out forwards;
animation-delay: 600ms;
}
.result-continue:hover {