julian/asciinevrdie
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): HP/MP 바 개선 및 전투 시스템 UI 업데이트

Browse Source 
- HP/MP 변화 시 플래시 효과 및 변화량 표시 추가
- 전투 중 몬스터 HP 바 표시 기능 추가
- 몬스터 HP 바 Row 오버플로우 버그 수정 (Flexible 적용)
- 전투 상태 및 이벤트 모델 개선
- 캐릭터 애니메이션 및 전투 컴포저 업데이트
This commit is contained in:
JiWoong Sul
2025-12-18 18:10:22 +09:00
parent 45147da5ec
commit cf8fdaecde
14 changed files with 1220 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
lib/src/features/game/game_play_screen.dart
View File

@@ -4,6 +4,7 @@ import 'package:askiineverdie/data/story_data.dart';
import 'package:askiineverdie/l10n/app_localizations.dart';
import 'package:askiineverdie/src/core/animation/ascii_animation_type.dart';
import 'package:askiineverdie/src/core/engine/story_service.dart';
import 'package:askiineverdie/src/core/model/combat_event.dart';
import 'package:askiineverdie/src/core/l10n/game_data_l10n.dart';
import 'package:askiineverdie/src/core/model/game_state.dart';
import 'package:askiineverdie/src/core/model/hall_of_fame.dart';
@@ -14,6 +15,7 @@ import 'package:askiineverdie/src/features/game/game_session_controller.dart';
import 'package:askiineverdie/src/features/hall_of_fame/hall_of_fame_screen.dart';
import 'package:askiineverdie/src/features/game/widgets/cinematic_view.dart';
import 'package:askiineverdie/src/features/game/widgets/combat_log.dart';
import 'package:askiineverdie/src/features/game/widgets/death_overlay.dart';
import 'package:askiineverdie/src/features/game/widgets/hp_mp_bar.dart';
import 'package:askiineverdie/src/features/game/widgets/notification_overlay.dart';
import 'package:askiineverdie/src/features/game/widgets/skill_panel.dart';
@@ -53,14 +55,22 @@ class _GamePlayScreenState extends State<GamePlayScreen>
int _lastQuestCount = 0;
int _lastPlotStageCount = 0;
// 전투 이벤트 추적 (마지막 처리된 이벤트 수)
int _lastProcessedEventCount = 0;
void _checkSpecialEvents(GameState state) {
// Phase 8: 태스크 변경 시 로그 추가
final currentCaption = state.progress.currentTask.caption;
if (currentCaption.isNotEmpty && currentCaption != _lastTaskCaption) {
_addCombatLog(currentCaption, CombatLogType.normal);
_lastTaskCaption = currentCaption;
// 새 태스크 시작 시 이벤트 카운터 리셋
_lastProcessedEventCount = 0;
}
// 전투 이벤트 처리 (Combat Events)
_processCombatEvents(state);
// 레벨업 감지
if (state.traits.level > _lastLevel && _lastLevel > 0) {
_specialAnimation = AsciiAnimationType.levelUp;
@@ -129,6 +139,69 @@ class _GamePlayScreenState extends State<GamePlayScreen>
}
}
/// 전투 이벤트를 로그로 변환 (Convert Combat Events to Log)
void _processCombatEvents(GameState state) {
final combat = state.progress.currentCombat;
if (combat == null || !combat.isActive) {
_lastProcessedEventCount = 0;
return;
}
final events = combat.recentEvents;
if (events.isEmpty || events.length <= _lastProcessedEventCount) {
return;
}
// 새 이벤트만 처리
final newEvents = events.skip(_lastProcessedEventCount);
for (final event in newEvents) {
final (message, type) = _formatCombatEvent(event);
_addCombatLog(message, type);
}
_lastProcessedEventCount = events.length;
}
/// 전투 이벤트를 메시지와 타입으로 변환
(String, CombatLogType) _formatCombatEvent(CombatEvent event) {
return switch (event.type) {
CombatEventType.playerAttack => event.isCritical
? ('CRITICAL! ${event.damage} damage to ${event.targetName}!', CombatLogType.critical)
: ('You hit ${event.targetName} for ${event.damage} damage', CombatLogType.damage),
CombatEventType.monsterAttack => (
'${event.targetName} hits you for ${event.damage} damage',
CombatLogType.monsterAttack,
),
CombatEventType.playerEvade => (
'You evaded ${event.targetName}\'s attack!',
CombatLogType.evade,
),
CombatEventType.monsterEvade => (
'${event.targetName} evaded your attack!',
CombatLogType.evade,
),
CombatEventType.playerBlock => (
'Blocked! Reduced to ${event.damage} damage',
CombatLogType.block,
),
CombatEventType.playerParry => (
'Parried! Reduced to ${event.damage} damage',
CombatLogType.parry,
),
CombatEventType.playerSkill => event.isCritical
? ('CRITICAL ${event.skillName}! ${event.damage} damage!', CombatLogType.critical)
: ('${event.skillName}: ${event.damage} damage', CombatLogType.spell),
CombatEventType.playerHeal => (
'${event.skillName ?? "Heal"}: +${event.healAmount} HP',
CombatLogType.heal,
),
CombatEventType.playerBuff => (
'${event.skillName} activated!',
CombatLogType.buff,
),
};
}
/// Phase 9: Act 시네마틱 표시 (Show Act Cinematic)
Future<void> _showCinematicForAct(StoryAct act) async {
if (_showingCinematic) return;
@@ -329,44 +402,60 @@ class _GamePlayScreenState extends State<GamePlayScreen>
],
],
),
body: Column(
body: Stack(
children: [
// 상단: ASCII 애니메이션 + Task Progress (Phase 7: 고정 4색 팔레트)
TaskProgressPanel(
progress: state.progress,
speedMultiplier: widget.controller.loop?.speedMultiplier ?? 1,
onSpeedCycle: () {
widget.controller.loop?.cycleSpeed();
setState(() {});
},
isPaused: !widget.controller.isRunning,
onPauseToggle: () async {
await widget.controller.togglePause();
setState(() {});
},
specialAnimation: _specialAnimation,
weaponName: state.equipment.weapon,
shieldName: state.equipment.shield,
characterLevel: state.traits.level,
monsterLevel: state.progress.currentTask.monsterLevel,
// 메인 게임 UI
Column(
children: [
// 상단: ASCII 애니메이션 + Task Progress (Phase 7: 고정 4색 팔레트)
TaskProgressPanel(
progress: state.progress,
speedMultiplier: widget.controller.loop?.speedMultiplier ?? 1,
onSpeedCycle: () {
widget.controller.loop?.cycleSpeed();
setState(() {});
},
isPaused: !widget.controller.isRunning,
onPauseToggle: () async {
await widget.controller.togglePause();
setState(() {});
},
specialAnimation: _specialAnimation,
weaponName: state.equipment.weapon,
shieldName: state.equipment.shield,
characterLevel: state.traits.level,
monsterLevel: state.progress.currentTask.monsterLevel,
latestCombatEvent: state.progress.currentCombat?.recentEvents.lastOrNull,
),
// 메인 3패널 영역
Expanded(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// 좌측 패널: Character Sheet
Expanded(flex: 2, child: _buildCharacterPanel(state)),
// 중앙 패널: Equipment/Inventory
Expanded(flex: 3, child: _buildEquipmentPanel(state)),
// 우측 패널: Plot/Quest
Expanded(flex: 2, child: _buildQuestPanel(state)),
],
),
),
],
),
// 메인 3패널 영역
Expanded(
child: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// 좌측 패널: Character Sheet
Expanded(flex: 2, child: _buildCharacterPanel(state)),
// 중앙 패널: Equipment/Inventory
Expanded(flex: 3, child: _buildEquipmentPanel(state)),
// 우측 패널: Plot/Quest
Expanded(flex: 2, child: _buildQuestPanel(state)),
],
// Phase 4: 사망 오버레이 (Death Overlay)
if (state.isDead && state.deathInfo != null)
DeathOverlay(
deathInfo: state.deathInfo!,
traits: state.traits,
onResurrect: () async {
await widget.controller.resurrect();
},
),
),
],
),
),
@@ -392,12 +481,22 @@ class _GamePlayScreenState extends State<GamePlayScreen>
_buildSectionHeader(l10n.stats),
Expanded(flex: 2, child: StatsPanel(stats: state.stats)),
// Phase 8: HP/MP 바 (사망 위험 시 깜빡임)
// Phase 8: HP/MP 바 (사망 위험 시 깜빡임, 전투 중 몬스터 HP 표시)
// 전투 중에는 전투 스탯의 HP/MP 사용, 비전투 시 기본 스탯 사용
HpMpBar(
hpCurrent: state.stats.hp,
hpMax: state.stats.hpMax,
mpCurrent: state.stats.mp,
mpMax: state.stats.mpMax,
hpCurrent: state.progress.currentCombat?.playerStats.hpCurrent ??
state.stats.hp,
hpMax: state.progress.currentCombat?.playerStats.hpMax ??
state.stats.hpMax,
mpCurrent: state.progress.currentCombat?.playerStats.mpCurrent ??
state.stats.mp,
mpMax: state.progress.currentCombat?.playerStats.mpMax ??
state.stats.mpMax,
// 전투 중일 때 몬스터 HP 정보 전달
monsterHpCurrent:
state.progress.currentCombat?.monsterStats.hpCurrent,
monsterHpMax: state.progress.currentCombat?.monsterStats.hpMax,
monsterName: state.progress.currentCombat?.monsterStats.name,
),
// Experience 바

70
lib/src/features/game/widgets/ascii_animation_card.dart
View File

@@ -10,6 +10,7 @@ import 'package:askiineverdie/src/core/animation/character_frames.dart';
import 'package:askiineverdie/src/core/animation/monster_size.dart';
import 'package:askiineverdie/src/core/animation/weapon_category.dart';
import 'package:askiineverdie/src/core/constants/ascii_colors.dart';
import 'package:askiineverdie/src/core/model/combat_event.dart';
import 'package:askiineverdie/src/core/model/game_state.dart';
/// ASCII 애니메이션 카드 위젯
@@ -30,6 +31,7 @@ class AsciiAnimationCard extends StatefulWidget {
this.characterLevel,
this.monsterLevel,
this.isPaused = false,
this.latestCombatEvent,
});
final TaskType taskType;
@@ -57,6 +59,9 @@ class AsciiAnimationCard extends StatefulWidget {
/// 몬스터 레벨 (몬스터 크기 결정용)
final int? monsterLevel;
/// 최근 전투 이벤트 (애니메이션 동기화용)
final CombatEvent? latestCombatEvent;
@override
State<AsciiAnimationCard> createState() => _AsciiAnimationCardState();
}
@@ -90,6 +95,10 @@ class _AsciiAnimationCardState extends State<AsciiAnimationCard> {
int _phaseIndex = 0;
int _phaseFrameCount = 0;
// 전투 이벤트 동기화용 (Phase 5)
int? _lastEventTimestamp;
bool _showCriticalEffect = false;
@override
void initState() {
super.initState();
@@ -124,6 +133,12 @@ class _AsciiAnimationCardState extends State<AsciiAnimationCard> {
return;
}
// 전투 이벤트 동기화 (Phase 5)
if (widget.latestCombatEvent != null &&
widget.latestCombatEvent!.timestamp != _lastEventTimestamp) {
_handleCombatEvent(widget.latestCombatEvent!);
}
if (oldWidget.taskType != widget.taskType ||
oldWidget.monsterBaseName != widget.monsterBaseName ||
oldWidget.weaponName != widget.weaponName ||
@@ -133,6 +148,45 @@ class _AsciiAnimationCardState extends State<AsciiAnimationCard> {
}
}
/// 전투 이벤트에 따라 애니메이션 페이즈 강제 전환 (Phase 5)
void _handleCombatEvent(CombatEvent event) {
_lastEventTimestamp = event.timestamp;
// 전투 모드가 아니면 무시
if (!_isBattleMode) return;
// 이벤트 타입에 따라 페이즈 강제 전환
final (targetPhase, isCritical) = switch (event.type) {
// 플레이어 공격 → attack 페이즈
CombatEventType.playerAttack => (BattlePhase.attack, event.isCritical),
CombatEventType.playerSkill => (BattlePhase.attack, event.isCritical),
// 몬스터 공격/플레이어 피격 → hit 페이즈
CombatEventType.monsterAttack => (BattlePhase.hit, false),
CombatEventType.playerBlock => (BattlePhase.hit, false),
CombatEventType.playerParry => (BattlePhase.hit, false),
// 회피 → recover 페이즈 (빠른 회피 동작)
CombatEventType.playerEvade => (BattlePhase.recover, false),
CombatEventType.monsterEvade => (BattlePhase.idle, false),
// 회복/버프 → idle 페이즈 유지
CombatEventType.playerHeal => (BattlePhase.idle, false),
CombatEventType.playerBuff => (BattlePhase.idle, false),
};
setState(() {
_battlePhase = targetPhase;
_battleSubFrame = 0;
_phaseFrameCount = 0;
_showCriticalEffect = isCritical;
// 페이즈 인덱스 동기화
_phaseIndex = _battlePhaseSequence.indexWhere((p) => p.$1 == targetPhase);
if (_phaseIndex < 0) _phaseIndex = 0;
});
}
/// 현재 상태를 유지하면서 타이머만 재시작
void _restartTimer() {
_timer?.cancel();
@@ -286,6 +340,8 @@ class _AsciiAnimationCardState extends State<AsciiAnimationCard> {
_phaseIndex = (_phaseIndex + 1) % _battlePhaseSequence.length;
_phaseFrameCount = 0;
_battleSubFrame = 0;
// 크리티컬 이펙트 리셋 (페이즈 전환 시)
_showCriticalEffect = false;
} else {
_battleSubFrame++;
}
@@ -376,17 +432,23 @@ class _AsciiAnimationCardState extends State<AsciiAnimationCard> {
frameText = _animationData.frames[frameIndex];
}
// 특수 애니메이션 중이면 테두리 표시
// 테두리 효과 결정 (특수 애니메이션 또는 크리티컬 히트)
final isSpecial = _currentSpecialAnimation != null;
Border? borderEffect;
if (_showCriticalEffect) {
// 크리티컬 히트: 노란색 테두리 (Phase 5)
borderEffect = Border.all(color: Colors.yellow.withValues(alpha: 0.8), width: 2);
} else if (isSpecial) {
// 특수 애니메이션: 시안 테두리
borderEffect = Border.all(color: AsciiColors.positive.withValues(alpha: 0.5));
}
return Container(
padding: const EdgeInsets.all(4),
decoration: BoxDecoration(
color: bgColor,
borderRadius: BorderRadius.circular(4),
border: isSpecial
? Border.all(color: AsciiColors.positive.withValues(alpha: 0.5))
: null,
border: borderEffect,
),
child: _isBattleMode
? LayoutBuilder(

12
lib/src/features/game/widgets/combat_log.dart
View File

@@ -22,6 +22,12 @@ enum CombatLogType {
questComplete, // 퀘스트 완료
loot, // 전리품 획득
spell, // 주문 습득
critical, // 크리티컬 히트
evade, // 회피
block, // 방패 방어
parry, // 무기 쳐내기
monsterAttack, // 몬스터 공격
buff, // 버프 활성화
}
/// 전투 로그 위젯 (Phase 8: 실시간 전투 이벤트 표시)
@@ -145,6 +151,12 @@ class _LogEntryTile extends StatelessWidget {
CombatLogType.questComplete => (Colors.blue.shade300, Icons.check_circle),
CombatLogType.loot => (Colors.orange.shade300, Icons.inventory_2),
CombatLogType.spell => (Colors.purple.shade300, Icons.auto_fix_high),
CombatLogType.critical => (Colors.yellow.shade300, Icons.flash_on),
CombatLogType.evade => (Colors.cyan.shade300, Icons.directions_run),
CombatLogType.block => (Colors.blueGrey.shade300, Icons.shield),
CombatLogType.parry => (Colors.teal.shade300, Icons.sports_kabaddi),
CombatLogType.monsterAttack => (Colors.deepOrange.shade300, Icons.dangerous),
CombatLogType.buff => (Colors.lightBlue.shade300, Icons.trending_up),
};
}
}

189
lib/src/features/game/widgets/death_overlay.dart
View File

@@ -1,5 +1,6 @@
import 'package:flutter/material.dart';
import 'package:askiineverdie/src/core/model/combat_event.dart';
import 'package:askiineverdie/src/core/model/game_state.dart';
/// 사망 오버레이 위젯 (Phase 4)
@@ -70,6 +71,15 @@ class DeathOverlay extends StatelessWidget {
// 상실 정보
_buildLossInfo(context),
// 전투 로그 (있는 경우만 표시)
if (deathInfo.lastCombatEvents.isNotEmpty) ...[
const SizedBox(height: 16),
Divider(color: colorScheme.outlineVariant),
const SizedBox(height: 8),
_buildCombatLog(context),
],
const SizedBox(height: 24),
// 부활 버튼
@@ -169,16 +179,65 @@ class DeathOverlay extends StatelessWidget {
}
Widget _buildLossInfo(BuildContext context) {
final theme = Theme.of(context);
final hasLostItem = deathInfo.lostItemName != null;
return Column(
children: [
_buildInfoRow(
context,
icon: Icons.shield_outlined,
label: 'Equipment Lost',
value: '${deathInfo.lostEquipmentCount} items',
isNegative: true,
),
const SizedBox(height: 8),
// 제물로 바친 아이템 표시
if (hasLostItem) ...[
Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: theme.colorScheme.errorContainer.withValues(alpha: 0.2),
borderRadius: BorderRadius.circular(8),
border: Border.all(
color: theme.colorScheme.error.withValues(alpha: 0.3),
),
),
child: Row(
children: [
Icon(
Icons.local_fire_department,
size: 20,
color: theme.colorScheme.error,
),
const SizedBox(width: 8),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Sacrificed to Resurrect',
style: theme.textTheme.labelSmall?.copyWith(
color: theme.colorScheme.onSurfaceVariant,
),
),
const SizedBox(height: 2),
Text(
deathInfo.lostItemName!,
style: theme.textTheme.bodyMedium?.copyWith(
fontWeight: FontWeight.bold,
color: theme.colorScheme.error,
),
),
],
),
),
],
),
),
const SizedBox(height: 12),
] else ...[
_buildInfoRow(
context,
icon: Icons.check_circle_outline,
label: 'Equipment',
value: 'No sacrifice needed',
isNegative: false,
),
const SizedBox(height: 8),
],
_buildInfoRow(
context,
icon: Icons.monetization_on_outlined,
@@ -253,4 +312,118 @@ class DeathOverlay extends StatelessWidget {
),
);
}
/// 사망 직전 전투 로그 표시
Widget _buildCombatLog(BuildContext context) {
final theme = Theme.of(context);
final events = deathInfo.lastCombatEvents;
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Combat Log',
style: theme.textTheme.labelMedium?.copyWith(
color: theme.colorScheme.onSurfaceVariant,
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 8),
Container(
constraints: const BoxConstraints(maxHeight: 120),
decoration: BoxDecoration(
color: theme.colorScheme.surfaceContainerHighest,
borderRadius: BorderRadius.circular(8),
),
child: ListView.builder(
shrinkWrap: true,
padding: const EdgeInsets.all(8),
itemCount: events.length,
itemBuilder: (context, index) {
final event = events[index];
return _buildCombatEventTile(context, event);
},
),
),
],
);
}
/// 개별 전투 이벤트 타일
Widget _buildCombatEventTile(BuildContext context, CombatEvent event) {
final (icon, color, message) = _formatCombatEvent(event);
return Padding(
padding: const EdgeInsets.symmetric(vertical: 2),
child: Row(
children: [
Icon(icon, size: 12, color: color),
const SizedBox(width: 6),
Expanded(
child: Text(
message,
style: TextStyle(
fontSize: 11,
color: color,
fontFamily: 'monospace',
),
),
),
],
),
);
}
/// 전투 이벤트를 아이콘, 색상, 메시지로 포맷
(IconData, Color, String) _formatCombatEvent(CombatEvent event) {
return switch (event.type) {
CombatEventType.playerAttack => (
event.isCritical ? Icons.flash_on : Icons.local_fire_department,
event.isCritical ? Colors.yellow.shade300 : Colors.green.shade300,
event.isCritical
? 'CRITICAL! ${event.damage} damage to ${event.targetName}'
: 'Hit ${event.targetName} for ${event.damage} damage',
),
CombatEventType.monsterAttack => (
Icons.dangerous,
Colors.red.shade300,
'${event.targetName} hits you for ${event.damage} damage',
),
CombatEventType.playerEvade => (
Icons.directions_run,
Colors.cyan.shade300,
'Evaded attack from ${event.targetName}',
),
CombatEventType.monsterEvade => (
Icons.directions_run,
Colors.orange.shade300,
'${event.targetName} evaded your attack',
),
CombatEventType.playerBlock => (
Icons.shield,
Colors.blueGrey.shade300,
'Blocked ${event.targetName}\'s attack (${event.damage} reduced)',
),
CombatEventType.playerParry => (
Icons.sports_kabaddi,
Colors.teal.shade300,
'Parried ${event.targetName}\'s attack (${event.damage} reduced)',
),
CombatEventType.playerSkill => (
Icons.auto_fix_high,
Colors.purple.shade300,
'${event.skillName} deals ${event.damage} damage',
),
CombatEventType.playerHeal => (
Icons.healing,
Colors.green.shade300,
'Healed for ${event.healAmount} HP',
),
CombatEventType.playerBuff => (
Icons.trending_up,
Colors.lightBlue.shade300,
'${event.skillName} activated',
),
};
}
}

308
lib/src/features/game/widgets/hp_mp_bar.dart
View File

@@ -1,8 +1,10 @@
import 'package:flutter/material.dart';
/// HP/MP 바 위젯 (Phase 8: 사망 위험 시 깜빡임)
/// HP/MP 바 위젯 (Phase 8: 변화 시 시각 효과)
///
/// HP가 20% 미만일 때 빨간색 깜빡임 효과 표시
/// - HP가 20% 미만일 때 빨간색 깜빡임
/// - HP/MP 변화 시 색상 플래시 + 변화량 표시
/// - 전투 중 몬스터 HP 바 표시
class HpMpBar extends StatefulWidget {
const HpMpBar({
super.key,
@@ -10,6 +12,9 @@ class HpMpBar extends StatefulWidget {
required this.hpMax,
required this.mpCurrent,
required this.mpMax,
this.monsterHpCurrent,
this.monsterHpMax,
this.monsterName,
});
final int hpCurrent;
@@ -17,40 +22,111 @@ class HpMpBar extends StatefulWidget {
final int mpCurrent;
final int mpMax;
/// 전투 중 몬스터 HP (null이면 비전투)
final int? monsterHpCurrent;
final int? monsterHpMax;
final String? monsterName;
@override
State<HpMpBar> createState() => _HpMpBarState();
}
class _HpMpBarState extends State<HpMpBar> with SingleTickerProviderStateMixin {
class _HpMpBarState extends State<HpMpBar> with TickerProviderStateMixin {
late AnimationController _blinkController;
late Animation<double> _blinkAnimation;
// HP/MP 변화 애니메이션
late AnimationController _hpFlashController;
late AnimationController _mpFlashController;
late Animation<double> _hpFlashAnimation;
late Animation<double> _mpFlashAnimation;
// 변화량 표시용
int _hpChange = 0;
int _mpChange = 0;
bool _hpDamage = false;
bool _mpDamage = false;
// 몬스터 HP 변화 애니메이션
late AnimationController _monsterFlashController;
late Animation<double> _monsterFlashAnimation;
int _monsterHpChange = 0;
@override
void initState() {
super.initState();
// 위험 깜빡임
_blinkController = AnimationController(
duration: const Duration(milliseconds: 500),
vsync: this,
);
_blinkAnimation = Tween<double>(begin: 1.0, end: 0.3).animate(
CurvedAnimation(parent: _blinkController, curve: Curves.easeInOut),
);
// HP 플래시
_hpFlashController = AnimationController(
duration: const Duration(milliseconds: 400),
vsync: this,
);
_hpFlashAnimation = Tween<double>(begin: 1.0, end: 0.0).animate(
CurvedAnimation(parent: _hpFlashController, curve: Curves.easeOut),
);
// MP 플래시
_mpFlashController = AnimationController(
duration: const Duration(milliseconds: 400),
vsync: this,
);
_mpFlashAnimation = Tween<double>(begin: 1.0, end: 0.0).animate(
CurvedAnimation(parent: _mpFlashController, curve: Curves.easeOut),
);
// 몬스터 HP 플래시
_monsterFlashController = AnimationController(
duration: const Duration(milliseconds: 400),
vsync: this,
);
_monsterFlashAnimation = Tween<double>(begin: 1.0, end: 0.0).animate(
CurvedAnimation(parent: _monsterFlashController, curve: Curves.easeOut),
);
_updateBlinkState();
}
@override
void didUpdateWidget(HpMpBar oldWidget) {
super.didUpdateWidget(oldWidget);
// HP 변화 감지
if (oldWidget.hpCurrent != widget.hpCurrent) {
_hpChange = widget.hpCurrent - oldWidget.hpCurrent;
_hpDamage = _hpChange < 0;
_hpFlashController.forward(from: 0.0);
}
// MP 변화 감지
if (oldWidget.mpCurrent != widget.mpCurrent) {
_mpChange = widget.mpCurrent - oldWidget.mpCurrent;
_mpDamage = _mpChange < 0;
_mpFlashController.forward(from: 0.0);
}
// 몬스터 HP 변화 감지
if (oldWidget.monsterHpCurrent != widget.monsterHpCurrent &&
widget.monsterHpCurrent != null &&
oldWidget.monsterHpCurrent != null) {
_monsterHpChange = widget.monsterHpCurrent! - oldWidget.monsterHpCurrent!;
_monsterFlashController.forward(from: 0.0);
}
_updateBlinkState();
}
void _updateBlinkState() {
final hpRatio = widget.hpMax > 0 ? widget.hpCurrent / widget.hpMax : 1.0;
// HP < 20% 시 깜박임 시작
if (hpRatio < 0.2 && hpRatio > 0) {
if (!_blinkController.isAnimating) {
_blinkController.repeat(reverse: true);
@@ -64,6 +140,9 @@ class _HpMpBarState extends State<HpMpBar> with SingleTickerProviderStateMixin {
@override
void dispose() {
_blinkController.dispose();
_hpFlashController.dispose();
_mpFlashController.dispose();
_monsterFlashController.dispose();
super.dispose();
}
@@ -72,44 +151,126 @@ class _HpMpBarState extends State<HpMpBar> with SingleTickerProviderStateMixin {
final hpRatio = widget.hpMax > 0 ? widget.hpCurrent / widget.hpMax : 0.0;
final mpRatio = widget.mpMax > 0 ? widget.mpCurrent / widget.mpMax : 0.0;
final hasMonster = widget.monsterHpCurrent != null &&
widget.monsterHpMax != null &&
widget.monsterHpMax! > 0;
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
// HP 바
_buildBar(
// HP 바 (플래시 효과 포함)
_buildAnimatedBar(
label: 'HP',
current: widget.hpCurrent,
max: widget.hpMax,
ratio: hpRatio,
color: Colors.red,
isLow: hpRatio < 0.2 && hpRatio > 0,
flashController: _hpFlashAnimation,
change: _hpChange,
isDamage: _hpDamage,
),
const SizedBox(height: 4),
// MP 바
_buildBar(
// MP 바 (플래시 효과 포함)
_buildAnimatedBar(
label: 'MP',
current: widget.mpCurrent,
max: widget.mpMax,
ratio: mpRatio,
color: Colors.blue,
isLow: false,
flashController: _mpFlashAnimation,
change: _mpChange,
isDamage: _mpDamage,
),
// 몬스터 HP 바 (전투 중일 때만)
if (hasMonster) ...[
const SizedBox(height: 8),
_buildMonsterBar(),
],
],
),
);
}
Widget _buildAnimatedBar({
required String label,
required int current,
required int max,
required double ratio,
required Color color,
required bool isLow,
required Animation<double> flashController,
required int change,
required bool isDamage,
}) {
return AnimatedBuilder(
animation: Listenable.merge([_blinkAnimation, flashController]),
builder: (context, child) {
// 플래시 색상 (데미지=빨강, 회복=녹색)
final flashColor = isDamage
? Colors.red.withValues(alpha: flashController.value * 0.4)
: Colors.green.withValues(alpha: flashController.value * 0.4);
// 위험 깜빡임 배경
final lowBgColor = isLow
? Colors.red.withValues(alpha: (1 - _blinkAnimation.value) * 0.3)
: Colors.transparent;
return Container(
decoration: BoxDecoration(
color: flashController.value > 0.1 ? flashColor : lowBgColor,
borderRadius: BorderRadius.circular(4),
),
child: Stack(
children: [
_buildBar(label: label, current: current, max: max, ratio: ratio, color: color),
// 플로팅 변화량 텍스트 (위로 떠오르며 사라짐)
if (change != 0 && flashController.value > 0.05)
Positioned(
right: 70,
top: 0,
bottom: 0,
child: Transform.translate(
// 위로 떠오르는 애니메이션 (최대 15픽셀 위로)
offset: Offset(0, -15 * (1 - flashController.value)),
child: Opacity(
opacity: flashController.value,
child: Text(
change > 0 ? '+$change' : '$change',
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color: isDamage ? Colors.red : Colors.green,
shadows: const [
Shadow(color: Colors.black, blurRadius: 3),
Shadow(color: Colors.black, blurRadius: 6),
],
),
),
),
),
),
],
),
);
},
);
}
Widget _buildBar({
required String label,
required int current,
required int max,
required double ratio,
required Color color,
required bool isLow,
}) {
final bar = Row(
return Row(
children: [
SizedBox(
width: 24,
@@ -140,24 +301,115 @@ class _HpMpBarState extends State<HpMpBar> with SingleTickerProviderStateMixin {
),
],
);
}
// HP < 20% 시 깜박임 효과 적용
if (isLow) {
return AnimatedBuilder(
animation: _blinkAnimation,
builder: (context, child) {
return Container(
decoration: BoxDecoration(
color: Colors.red.withValues(alpha: (1 - _blinkAnimation.value) * 0.3),
borderRadius: BorderRadius.circular(4),
),
child: child,
);
},
child: bar,
);
}
/// 몬스터 HP 바
Widget _buildMonsterBar() {
final current = widget.monsterHpCurrent!;
final max = widget.monsterHpMax!;
final ratio = max > 0 ? current / max : 0.0;
final name = widget.monsterName ?? 'Enemy';
return bar;
return AnimatedBuilder(
animation: _monsterFlashAnimation,
builder: (context, child) {
// 데미지 플래시 (몬스터는 항상 데미지를 받음)
final flashColor = Colors.yellow.withValues(
alpha: _monsterFlashAnimation.value * 0.3,
);
return Container(
padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 2),
decoration: BoxDecoration(
color: _monsterFlashAnimation.value > 0.1
? flashColor
: Colors.orange.withValues(alpha: 0.1),
borderRadius: BorderRadius.circular(4),
border: Border.all(color: Colors.orange.withValues(alpha: 0.3)),
),
child: Stack(
clipBehavior: Clip.none,
children: [
Row(
children: [
// 몬스터 아이콘
const Icon(Icons.pest_control, size: 14, color: Colors.orange),
const SizedBox(width: 4),
// 이름 (Flexible로 공간 부족 시 축소)
Flexible(
flex: 0,
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 50),
child: Text(
name.length > 8 ? '${name.substring(0, 6)}...' : name,
style: const TextStyle(
fontSize: 9,
fontWeight: FontWeight.bold,
color: Colors.orange,
),
overflow: TextOverflow.ellipsis,
),
),
),
const SizedBox(width: 4),
// HP 바
Expanded(
child: ClipRRect(
borderRadius: BorderRadius.circular(2),
child: LinearProgressIndicator(
value: ratio.clamp(0.0, 1.0),
backgroundColor: Colors.orange.withValues(alpha: 0.2),
valueColor:
const AlwaysStoppedAnimation<Color>(Colors.orange),
minHeight: 8,
),
),
),
const SizedBox(width: 4),
// HP 숫자
Text(
'$current/$max',
style: const TextStyle(fontSize: 8, color: Colors.orange),
textAlign: TextAlign.right,
),
],
),
// 플로팅 데미지 텍스트
if (_monsterHpChange != 0 && _monsterFlashAnimation.value > 0.05)
Positioned(
right: 60,
top: -5,
child: Transform.translate(
offset: Offset(0, -12 * (1 - _monsterFlashAnimation.value)),
child: Opacity(
opacity: _monsterFlashAnimation.value,
child: Text(
_monsterHpChange > 0
? '+$_monsterHpChange'
: '$_monsterHpChange',
style: TextStyle(
fontSize: 11,
fontWeight: FontWeight.bold,
color: _monsterHpChange < 0
? Colors.yellow
: Colors.green,
shadows: const [
Shadow(color: Colors.black, blurRadius: 3),
Shadow(color: Colors.black, blurRadius: 6),
],
),
),
),
),
),
],
),
);
},
);
}
}

6
lib/src/features/game/widgets/task_progress_panel.dart
View File

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
import 'package:askiineverdie/l10n/app_localizations.dart';
import 'package:askiineverdie/src/core/animation/ascii_animation_type.dart';
import 'package:askiineverdie/src/core/model/combat_event.dart';
import 'package:askiineverdie/src/core/model/game_state.dart';
import 'package:askiineverdie/src/features/game/widgets/ascii_animation_card.dart';
@@ -21,6 +22,7 @@ class TaskProgressPanel extends StatelessWidget {
this.shieldName,
this.characterLevel,
this.monsterLevel,
this.latestCombatEvent,
});
final ProgressState progress;
@@ -40,6 +42,9 @@ class TaskProgressPanel extends StatelessWidget {
final int? characterLevel;
final int? monsterLevel;
/// 최근 전투 이벤트 (애니메이션 동기화용, Phase 5)
final CombatEvent? latestCombatEvent;
@override
Widget build(BuildContext context) {
return Container(
@@ -65,6 +70,7 @@ class TaskProgressPanel extends StatelessWidget {
characterLevel: characterLevel,
monsterLevel: monsterLevel,
isPaused: isPaused,
latestCombatEvent: latestCombatEvent,
),
),
const SizedBox(height: 8),