chore: battle result UI, demo locales, and scene updates
This commit is contained in:
@@ -95,5 +95,5 @@
|
||||
"hud": { "player": "You" },
|
||||
"result": { "victory": "Victory!" }
|
||||
},
|
||||
"stat": { "courage": "Courage" }
|
||||
"stat": { "courage": "Courage", "qte_succeeded": "QTE Wins", "trust": "Trust", "investigation": "Investigation" }
|
||||
}
|
||||
@@ -95,5 +95,5 @@
|
||||
"hud": { "player": "你" },
|
||||
"result": { "victory": "击退成功!" }
|
||||
},
|
||||
"stat": { "courage": "勇气" }
|
||||
"stat": { "courage": "勇气", "qte_succeeded": "QTE 成功", "trust": "信任值", "investigation": "调查进度" }
|
||||
}
|
||||
@@ -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": [
|
||||
|
||||
19
src/App.vue
19
src/App.vue
@@ -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>
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user