mirror of
https://github.com/setube/ogame-vue-ts.git
synced 2026-05-12 07:55:11 +08:00
629 lines
20 KiB
Vue
629 lines
20 KiB
Vue
<template>
|
||
<div class="battle-animation-container">
|
||
<!-- 播放控制栏 -->
|
||
<div class="flex items-center justify-between gap-2 mb-4 p-3 bg-muted/50 rounded-lg border">
|
||
<div class="flex items-center gap-2">
|
||
<Button variant="outline" size="icon" @click="restart" :disabled="!canRestart">
|
||
<RotateCcw class="h-4 w-4" />
|
||
</Button>
|
||
<Button variant="outline" size="icon" @click="previousRound" :disabled="!canGoPrevious">
|
||
<SkipBack class="h-4 w-4" />
|
||
</Button>
|
||
<Button :variant="isPlaying ? 'default' : 'outline'" size="icon" @click="togglePlay" :disabled="!canPlay">
|
||
<Pause v-if="isPlaying" class="h-4 w-4" />
|
||
<Play v-else class="h-4 w-4" />
|
||
</Button>
|
||
<Button variant="outline" size="icon" @click="nextRound" :disabled="!canGoNext">
|
||
<SkipForward class="h-4 w-4" />
|
||
</Button>
|
||
</div>
|
||
|
||
<!-- 播放速度 -->
|
||
<div class="flex items-center gap-2">
|
||
<span class="text-xs text-muted-foreground">{{ t('messagesView.speed') }}:</span>
|
||
<Select v-model="speedMultiplier">
|
||
<SelectTrigger class="w-20 h-8">
|
||
<SelectValue />
|
||
</SelectTrigger>
|
||
<SelectContent class="z-100">
|
||
<SelectItem value="0.5">0.5x</SelectItem>
|
||
<SelectItem value="1">1x</SelectItem>
|
||
<SelectItem value="2">2x</SelectItem>
|
||
<SelectItem value="4">4x</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 战斗场景 -->
|
||
<div class="battle-scene relative overflow-hidden rounded-lg border bg-gradient-to-b from-slate-900 to-slate-950 p-4 min-h-[300px]">
|
||
<!-- 星空背景 -->
|
||
<div class="absolute inset-0 overflow-hidden pointer-events-none">
|
||
<div v-for="i in 20" :key="i" class="star" :style="getStarStyle(i)" />
|
||
</div>
|
||
|
||
<!-- 攻击方区域 -->
|
||
<div class="relative z-10 flex justify-between items-center gap-4">
|
||
<!-- 攻击方舰队 -->
|
||
<div class="flex-1">
|
||
<div class="flex items-center gap-2 mb-2">
|
||
<Sword class="h-4 w-4 text-red-400" />
|
||
<span class="text-sm font-medium text-red-400">{{ t('simulatorView.attacker') }}</span>
|
||
</div>
|
||
<div class="fleet-display attacker" :class="{ attacking: attackAnimationPhase === 'attack' }">
|
||
<div class="grid grid-cols-5 gap-1">
|
||
<div
|
||
v-for="(count, shipType) in currentAttackerFleet"
|
||
:key="shipType"
|
||
class="ship-unit flex flex-col items-center p-1.5 rounded bg-red-950/50 border border-red-900/50"
|
||
:class="{ 'exploding': isShipExploding('attacker', shipType as ShipType) }"
|
||
>
|
||
<Rocket class="h-4 w-4 text-red-400" />
|
||
<span class="text-[10px] text-red-300">{{ formatNumber(count, 0) }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="mt-2 text-xs text-red-400/80">{{ t('messagesView.power') }}: {{ formatNumber(currentAttackerPower) }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- VS 标志 -->
|
||
<div class="flex flex-col items-center gap-2">
|
||
<div
|
||
class="vs-badge w-12 h-12 rounded-full bg-yellow-500/20 border-2 border-yellow-500/50 flex items-center justify-center"
|
||
:class="{ 'pulse-animation': attackAnimationPhase === 'attack' }"
|
||
>
|
||
<Swords class="h-6 w-6 text-yellow-400" />
|
||
</div>
|
||
<!-- 当前回合损失动画 -->
|
||
<Transition name="damage-popup">
|
||
<div v-if="showDamageNumbers" class="damage-numbers text-center">
|
||
<div v-if="displayedLosses.attacker > 0" class="text-red-400 text-xs font-bold animate-bounce">
|
||
-{{ displayedLosses.attacker }}
|
||
</div>
|
||
<div v-if="displayedLosses.defender > 0" class="text-blue-400 text-xs font-bold animate-bounce">
|
||
-{{ displayedLosses.defender }}
|
||
</div>
|
||
</div>
|
||
</Transition>
|
||
</div>
|
||
|
||
<!-- 防守方舰队 -->
|
||
<div class="flex-1">
|
||
<div class="flex items-center justify-end gap-2 mb-2">
|
||
<span class="text-sm font-medium text-blue-400">{{ t('simulatorView.defender') }}</span>
|
||
<ShieldIcon class="h-4 w-4 text-blue-400" />
|
||
</div>
|
||
<div class="fleet-display defender" :class="{ defending: attackAnimationPhase === 'attack' }">
|
||
<div class="grid grid-cols-5 gap-1 justify-end">
|
||
<div
|
||
v-for="(count, shipType) in currentDefenderFleet"
|
||
:key="shipType"
|
||
class="ship-unit flex flex-col items-center p-1.5 rounded bg-blue-950/50 border border-blue-900/50"
|
||
:class="{ 'exploding': isShipExploding('defender', shipType as string) }"
|
||
>
|
||
<component :is="isDefenseType(String(shipType)) ? Shield : Rocket" class="h-4 w-4 text-blue-400" />
|
||
<span class="text-[10px] text-blue-300">{{ formatNumber(count, 0) }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="mt-2 text-xs text-blue-400/80 text-right">
|
||
{{ t('messagesView.power') }}: {{ formatNumber(currentDefenderPower) }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 战斗日志 -->
|
||
<div class="battle-log mt-4 p-3 bg-black/30 rounded border border-white/10 max-h-32 overflow-y-auto">
|
||
<div v-for="(log, index) in battleLogs" :key="index" class="text-xs mb-1" :class="log.type">
|
||
<span class="text-muted-foreground">[{{ log.round }}]</span>
|
||
{{ log.message }}
|
||
</div>
|
||
<div v-if="battleLogs.length === 0" class="text-xs text-muted-foreground text-center py-2">
|
||
{{ t('messagesView.battleLogEmpty') }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 战斗结果预览 (仅在完成时显示) -->
|
||
<Transition name="fade">
|
||
<div v-if="showResult" class="mt-4 p-4 rounded-lg border text-center" :class="resultStyle">
|
||
<p class="text-lg font-bold">{{ resultText }}</p>
|
||
<p class="text-sm text-muted-foreground mt-1">
|
||
{{ t('simulatorView.afterRounds').replace('{rounds}', String(totalRounds)) }}
|
||
</p>
|
||
</div>
|
||
</Transition>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed, watch, onUnmounted } from 'vue'
|
||
import { useI18n } from '@/composables/useI18n'
|
||
import { useGameConfig } from '@/composables/useGameConfig'
|
||
import { formatNumber } from '@/utils/format'
|
||
import { Button } from '@/components/ui/button'
|
||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
|
||
import { Play, Pause, SkipBack, SkipForward, RotateCcw, Sword, Shield as ShieldIcon, Swords, Rocket, Shield } from 'lucide-vue-next'
|
||
import type { BattleResult, ShipType, DefenseType, Fleet } from '@/types/game'
|
||
|
||
const props = defineProps<{
|
||
report: BattleResult
|
||
}>()
|
||
|
||
const emit = defineEmits<{
|
||
(e: 'complete'): void
|
||
}>()
|
||
|
||
const { t } = useI18n()
|
||
const { SHIPS, DEFENSES } = useGameConfig()
|
||
|
||
// 播放状态
|
||
const isPlaying = ref(false)
|
||
const currentRoundIndex = ref(0)
|
||
const speedMultiplier = ref('1')
|
||
const attackAnimationPhase = ref<'idle' | 'attack' | 'damage'>('idle')
|
||
const showDamageNumbers = ref(false)
|
||
const showResult = ref(false)
|
||
|
||
// 爆炸动画追踪
|
||
const explodingShips = ref<{ side: 'attacker' | 'defender'; type: string }[]>([])
|
||
|
||
// 当前显示的损失数字（用于动画显示）
|
||
const displayedLosses = ref({ attacker: 0, defender: 0 })
|
||
|
||
// 战斗日志
|
||
interface BattleLog {
|
||
round: number
|
||
message: string
|
||
type: 'attacker-loss' | 'defender-loss' | 'info'
|
||
}
|
||
const battleLogs = ref<BattleLog[]>([])
|
||
|
||
// 计算属性
|
||
const totalRounds = computed(() => props.report.roundDetails?.length || props.report.rounds || 1)
|
||
|
||
const canPlay = computed(() => currentRoundIndex.value < totalRounds.value)
|
||
const canGoPrevious = computed(() => currentRoundIndex.value > 0)
|
||
const canGoNext = computed(() => currentRoundIndex.value < totalRounds.value)
|
||
const canRestart = computed(() => currentRoundIndex.value > 0 || battleLogs.value.length > 0)
|
||
|
||
// 当前回合的舰队状态（通过累计损失计算）
|
||
const currentAttackerFleet = computed(() => {
|
||
const fleet: Partial<Fleet> = { ...props.report.attackerFleet }
|
||
if (props.report.roundDetails) {
|
||
for (let i = 0; i < currentRoundIndex.value; i++) {
|
||
const roundLosses = props.report.roundDetails[i]?.attackerLosses || {}
|
||
for (const [shipType, count] of Object.entries(roundLosses)) {
|
||
if (fleet[shipType as keyof Fleet] !== undefined) {
|
||
fleet[shipType as keyof Fleet] = Math.max(0, (fleet[shipType as keyof Fleet] || 0) - count)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// 过滤掉数量为0的
|
||
return Object.fromEntries(Object.entries(fleet).filter(([, count]) => count > 0))
|
||
})
|
||
|
||
const currentDefenderFleet = computed(() => {
|
||
const fleet: Partial<Fleet> = { ...props.report.defenderFleet }
|
||
const defense: Partial<Record<DefenseType, number>> = { ...props.report.defenderDefense }
|
||
|
||
if (props.report.roundDetails) {
|
||
for (let i = 0; i < currentRoundIndex.value; i++) {
|
||
const roundLosses = props.report.roundDetails[i]?.defenderLosses || { fleet: {}, defense: {} }
|
||
for (const [shipType, count] of Object.entries(roundLosses.fleet || {})) {
|
||
if (fleet[shipType as keyof Fleet] !== undefined) {
|
||
fleet[shipType as keyof Fleet] = Math.max(0, (fleet[shipType as keyof Fleet] || 0) - count)
|
||
}
|
||
}
|
||
for (const [defType, count] of Object.entries(roundLosses.defense || {})) {
|
||
if (defense[defType as DefenseType] !== undefined) {
|
||
defense[defType as DefenseType] = Math.max(0, (defense[defType as DefenseType] || 0) - count)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 合并舰队和防御
|
||
const combined = {
|
||
...Object.fromEntries(Object.entries(fleet).filter(([, count]) => count > 0)),
|
||
...Object.fromEntries(Object.entries(defense).filter(([, count]) => count > 0))
|
||
}
|
||
return combined
|
||
})
|
||
|
||
const currentAttackerPower = computed(() => {
|
||
if (props.report.roundDetails && currentRoundIndex.value > 0) {
|
||
return props.report.roundDetails[currentRoundIndex.value - 1]?.attackerRemainingPower || 0
|
||
}
|
||
// 初始战斗力
|
||
return calculateFleetPower(props.report.attackerFleet)
|
||
})
|
||
|
||
const currentDefenderPower = computed(() => {
|
||
if (props.report.roundDetails && currentRoundIndex.value > 0) {
|
||
return props.report.roundDetails[currentRoundIndex.value - 1]?.defenderRemainingPower || 0
|
||
}
|
||
// 初始战斗力
|
||
return calculateFleetPower(props.report.defenderFleet) + calculateDefensePower(props.report.defenderDefense)
|
||
})
|
||
|
||
const resultStyle = computed(() => {
|
||
if (props.report.winner === 'draw') {
|
||
return 'bg-gray-50 dark:bg-gray-950/30 border-gray-200 dark:border-gray-800 text-gray-700 dark:text-gray-300'
|
||
}
|
||
if (props.report.winner === 'attacker') {
|
||
return 'bg-red-50 dark:bg-red-950/30 border-red-300 dark:border-red-800 text-red-700 dark:text-red-300'
|
||
}
|
||
return 'bg-blue-50 dark:bg-blue-950/30 border-blue-300 dark:border-blue-800 text-blue-700 dark:text-blue-300'
|
||
})
|
||
|
||
const resultText = computed(() => {
|
||
if (props.report.winner === 'draw') return t('messagesView.draw')
|
||
if (props.report.winner === 'attacker') return t('messagesView.attackerWins')
|
||
return t('messagesView.defenderWins')
|
||
})
|
||
|
||
// 辅助函数
|
||
const calculateFleetPower = (fleet: Partial<Fleet>): number => {
|
||
let power = 0
|
||
for (const [shipType, count] of Object.entries(fleet)) {
|
||
const config = SHIPS.value[shipType as ShipType]
|
||
if (config) {
|
||
power += (config.attack + config.shield + config.armor) * count
|
||
}
|
||
}
|
||
return power
|
||
}
|
||
|
||
const calculateDefensePower = (defense: Partial<Record<DefenseType, number>>): number => {
|
||
let power = 0
|
||
for (const [defType, count] of Object.entries(defense)) {
|
||
const config = DEFENSES.value[defType as DefenseType]
|
||
if (config) {
|
||
power += (config.attack + config.shield + config.armor) * count
|
||
}
|
||
}
|
||
return power
|
||
}
|
||
|
||
const isDefenseType = (type: string): boolean => {
|
||
return type in DEFENSES.value
|
||
}
|
||
|
||
const isShipExploding = (side: 'attacker' | 'defender', type: string): boolean => {
|
||
return explodingShips.value.some(s => s.side === side && s.type === type)
|
||
}
|
||
|
||
const getStarStyle = (index: number): Record<string, string> => {
|
||
const seed = index * 1234
|
||
const x = seed % 100
|
||
const y = (seed * 7) % 100
|
||
const size = 1 + (seed % 2)
|
||
const opacity = 0.3 + (seed % 5) / 10
|
||
const delay = seed % 3000
|
||
|
||
return {
|
||
position: 'absolute',
|
||
left: `${x}%`,
|
||
top: `${y}%`,
|
||
width: `${size}px`,
|
||
height: `${size}px`,
|
||
backgroundColor: 'white',
|
||
borderRadius: '50%',
|
||
opacity: String(opacity),
|
||
animation: `twinkle 2s ease-in-out ${delay}ms infinite`
|
||
}
|
||
}
|
||
|
||
// 播放控制
|
||
let playTimeoutId: ReturnType<typeof setTimeout> | null = null
|
||
let isPlayingRound = false // 防止重复执行
|
||
|
||
const togglePlay = () => {
|
||
if (isPlaying.value) {
|
||
pause()
|
||
} else {
|
||
play()
|
||
}
|
||
}
|
||
|
||
const play = () => {
|
||
if (currentRoundIndex.value >= totalRounds.value) {
|
||
restart()
|
||
}
|
||
isPlaying.value = true
|
||
scheduleNextRound()
|
||
}
|
||
|
||
const pause = () => {
|
||
isPlaying.value = false
|
||
if (playTimeoutId) {
|
||
clearTimeout(playTimeoutId)
|
||
playTimeoutId = null
|
||
}
|
||
}
|
||
|
||
const scheduleNextRound = () => {
|
||
if (!isPlaying.value) return
|
||
if (playTimeoutId) clearTimeout(playTimeoutId)
|
||
|
||
// 使用 setTimeout 而非 setInterval，确保每回合顺序执行
|
||
playTimeoutId = setTimeout(async () => {
|
||
if (!isPlaying.value) return
|
||
if (currentRoundIndex.value < totalRounds.value) {
|
||
await playRound()
|
||
scheduleNextRound() // 回合完成后再调度下一回合
|
||
} else {
|
||
pause()
|
||
showResult.value = true
|
||
emit('complete')
|
||
}
|
||
}, 100) // 短暂延迟启动
|
||
}
|
||
|
||
const playRound = async () => {
|
||
if (isPlayingRound) return // 防止重复执行
|
||
if (currentRoundIndex.value >= totalRounds.value) return
|
||
|
||
isPlayingRound = true
|
||
const speed = parseFloat(speedMultiplier.value)
|
||
const roundIndex = currentRoundIndex.value
|
||
const roundData = props.report.roundDetails?.[roundIndex]
|
||
|
||
// 攻击动画阶段
|
||
attackAnimationPhase.value = 'attack'
|
||
|
||
// 添加日志
|
||
battleLogs.value.push({
|
||
round: roundIndex + 1,
|
||
message: t('messagesView.roundStarted').replace('{round}', String(roundIndex + 1)),
|
||
type: 'info'
|
||
})
|
||
|
||
// 等待攻击动画
|
||
await sleep(400 / speed)
|
||
|
||
// 伤害阶段
|
||
attackAnimationPhase.value = 'damage'
|
||
|
||
// 计算当前回合的损失数字
|
||
if (roundData) {
|
||
const attackerLoss = Object.values(roundData.attackerLosses).reduce((sum, count) => sum + count, 0)
|
||
const defenderLoss =
|
||
Object.values(roundData.defenderLosses.fleet || {}).reduce((sum, count) => sum + count, 0) +
|
||
Object.values(roundData.defenderLosses.defense || {}).reduce((sum, count) => sum + count, 0)
|
||
displayedLosses.value = { attacker: attackerLoss, defender: defenderLoss }
|
||
} else {
|
||
displayedLosses.value = { attacker: 0, defender: 0 }
|
||
}
|
||
showDamageNumbers.value = true
|
||
|
||
if (roundData) {
|
||
// 记录攻击方损失
|
||
for (const [shipType, count] of Object.entries(roundData.attackerLosses)) {
|
||
if (count > 0) {
|
||
explodingShips.value.push({ side: 'attacker', type: shipType })
|
||
battleLogs.value.push({
|
||
round: roundIndex + 1,
|
||
message: t('messagesView.shipDestroyed')
|
||
.replace('{count}', String(count))
|
||
.replace('{ship}', SHIPS.value[shipType as ShipType]?.name || shipType),
|
||
type: 'attacker-loss'
|
||
})
|
||
}
|
||
}
|
||
|
||
// 记录防守方损失
|
||
for (const [shipType, count] of Object.entries(roundData.defenderLosses.fleet || {})) {
|
||
if (count > 0) {
|
||
explodingShips.value.push({ side: 'defender', type: shipType })
|
||
battleLogs.value.push({
|
||
round: roundIndex + 1,
|
||
message: t('messagesView.shipDestroyed')
|
||
.replace('{count}', String(count))
|
||
.replace('{ship}', SHIPS.value[shipType as ShipType]?.name || shipType),
|
||
type: 'defender-loss'
|
||
})
|
||
}
|
||
}
|
||
|
||
for (const [defType, count] of Object.entries(roundData.defenderLosses.defense || {})) {
|
||
if (count > 0) {
|
||
explodingShips.value.push({ side: 'defender', type: defType })
|
||
battleLogs.value.push({
|
||
round: roundIndex + 1,
|
||
message: t('messagesView.defenseDestroyed')
|
||
.replace('{count}', String(count))
|
||
.replace('{defense}', DEFENSES.value[defType as DefenseType]?.name || defType),
|
||
type: 'defender-loss'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
|
||
// 等待伤害显示
|
||
await sleep(600 / speed)
|
||
|
||
// 清理状态
|
||
attackAnimationPhase.value = 'idle'
|
||
showDamageNumbers.value = false
|
||
explodingShips.value = []
|
||
|
||
currentRoundIndex.value++
|
||
isPlayingRound = false
|
||
}
|
||
|
||
const nextRound = () => {
|
||
if (currentRoundIndex.value < totalRounds.value) {
|
||
pause()
|
||
playRound()
|
||
}
|
||
}
|
||
|
||
const previousRound = () => {
|
||
if (currentRoundIndex.value > 0) {
|
||
pause()
|
||
currentRoundIndex.value--
|
||
// 移除该回合的日志
|
||
battleLogs.value = battleLogs.value.filter(log => log.round <= currentRoundIndex.value)
|
||
showResult.value = false
|
||
}
|
||
}
|
||
|
||
const restart = () => {
|
||
pause()
|
||
currentRoundIndex.value = 0
|
||
battleLogs.value = []
|
||
showResult.value = false
|
||
explodingShips.value = []
|
||
attackAnimationPhase.value = 'idle'
|
||
showDamageNumbers.value = false
|
||
displayedLosses.value = { attacker: 0, defender: 0 }
|
||
}
|
||
|
||
const sleep = (ms: number): Promise<void> => {
|
||
return new Promise(resolve => setTimeout(resolve, ms))
|
||
}
|
||
|
||
// 监听速度变化
|
||
watch(speedMultiplier, () => {
|
||
if (isPlaying.value) {
|
||
scheduleNextRound()
|
||
}
|
||
})
|
||
|
||
// 清理
|
||
onUnmounted(() => {
|
||
if (playTimeoutId) {
|
||
clearTimeout(playTimeoutId)
|
||
}
|
||
})
|
||
|
||
// 暴露给父组件
|
||
defineExpose({
|
||
currentRoundIndex,
|
||
totalRounds
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.star {
|
||
will-change: opacity;
|
||
}
|
||
|
||
@keyframes twinkle {
|
||
0%,
|
||
100% {
|
||
opacity: 0.3;
|
||
}
|
||
50% {
|
||
opacity: 0.8;
|
||
}
|
||
}
|
||
|
||
.fleet-display {
|
||
will-change: transform;
|
||
}
|
||
|
||
.fleet-display.attacking {
|
||
animation: shake 0.3s ease-in-out;
|
||
}
|
||
|
||
.fleet-display.defending {
|
||
animation: shake 0.3s ease-in-out 0.1s;
|
||
}
|
||
|
||
@keyframes shake {
|
||
0%,
|
||
100% {
|
||
transform: translate3d(0, 0, 0);
|
||
}
|
||
25% {
|
||
transform: translate3d(-3px, 0, 0);
|
||
}
|
||
75% {
|
||
transform: translate3d(3px, 0, 0);
|
||
}
|
||
}
|
||
|
||
.ship-unit {
|
||
will-change: transform, opacity;
|
||
}
|
||
|
||
.ship-unit.exploding {
|
||
animation: explode 0.5s ease-out forwards;
|
||
}
|
||
|
||
@keyframes explode {
|
||
0% {
|
||
transform: scale3d(1, 1, 1);
|
||
opacity: 1;
|
||
}
|
||
50% {
|
||
transform: scale3d(1.3, 1.3, 1);
|
||
opacity: 0.5;
|
||
background-color: rgba(239, 68, 68, 0.5);
|
||
}
|
||
100% {
|
||
transform: scale3d(0.8, 0.8, 1);
|
||
opacity: 0.3;
|
||
}
|
||
}
|
||
|
||
.vs-badge {
|
||
will-change: transform;
|
||
}
|
||
|
||
.pulse-animation {
|
||
animation: pulse 0.5s ease-in-out;
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0%,
|
||
100% {
|
||
transform: scale3d(1, 1, 1);
|
||
}
|
||
50% {
|
||
transform: scale3d(1.2, 1.2, 1);
|
||
}
|
||
}
|
||
|
||
.damage-popup-enter-active,
|
||
.damage-popup-leave-active {
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.damage-popup-enter-from {
|
||
opacity: 0;
|
||
transform: translate3d(0, 10px, 0);
|
||
}
|
||
|
||
.damage-popup-leave-to {
|
||
opacity: 0;
|
||
transform: translate3d(0, -10px, 0);
|
||
}
|
||
|
||
.fade-enter-active,
|
||
.fade-leave-active {
|
||
transition: opacity 0.5s ease;
|
||
}
|
||
|
||
.fade-enter-from,
|
||
.fade-leave-to {
|
||
opacity: 0;
|
||
}
|
||
|
||
.battle-log .attacker-loss {
|
||
color: rgb(248, 113, 113);
|
||
}
|
||
|
||
.battle-log .defender-loss {
|
||
color: rgb(96, 165, 250);
|
||
}
|
||
|
||
.battle-log .info {
|
||
color: rgb(156, 163, 175);
|
||
}
|
||
</style>
|