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

feat(ui): 반응형 레이아웃 및 저장 시스템 개선

Browse Source 
## 반응형 레이아웃
- app.dart: 화면 크기별 레이아웃 분기 로직 추가 (+173 라인)
- game_play_screen.dart: 반응형 UI 구조 개선
- layouts/, pages/ 디렉토리 추가 (새 레이아웃 시스템)
- carousel_nav_bar.dart: 캐러셀 네비게이션 바 추가
- enhanced_animation_panel.dart: 향상된 애니메이션 패널

## 저장 시스템
- save_manager.dart: 저장 관리 기능 확장
- save_repository.dart: 저장소 인터페이스 개선
- save_service.dart: 저장 서비스 로직 추가

## UI 개선
- notification_service.dart: 알림 시스템 기능 확장
- notification_overlay.dart: 오버레이 UI 개선
- equipment_stats_panel.dart: 장비 스탯 패널 개선
- cinematic_view.dart: 시네마틱 뷰 개선
- new_character_screen.dart: 캐릭터 생성 화면 개선

## 다국어
- game_text_l10n.dart: 텍스트 추가 (+182 라인)

## 테스트
- 관련 테스트 파일 업데이트
This commit is contained in:
JiWoong Sul
2025-12-23 17:52:43 +09:00
parent 1da6fa7a2b
commit e6af7dd91a
28 changed files with 2734 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
lib/src/features/front/front_screen.dart
View File

@@ -334,16 +334,15 @@ class _Tag extends StatelessWidget {
@override
Widget build(BuildContext context) {
final colorScheme = Theme.of(context).colorScheme;
// 어두운 배경에 잘 보이도록 대비되는 색상 사용
final tagColor = colorScheme.onPrimaryContainer;
return Chip(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
backgroundColor: colorScheme.onPrimary.withValues(alpha: 0.14),
avatar: Icon(icon, color: colorScheme.onPrimary, size: 16),
backgroundColor: colorScheme.primaryContainer.withValues(alpha: 0.8),
avatar: Icon(icon, color: tagColor, size: 16),
label: Text(
label,
style: TextStyle(
color: colorScheme.onPrimary,
fontWeight: FontWeight.w600,
),
style: TextStyle(color: tagColor, fontWeight: FontWeight.w600),
),
side: BorderSide.none,
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,

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

@@ -1,3 +1,5 @@
import 'package:flutter/foundation.dart'
show kIsWeb, defaultTargetPlatform, TargetPlatform;
import 'package:flutter/material.dart';
import 'package:askiineverdie/data/game_text_l10n.dart' as game_l10n;
@@ -26,15 +28,27 @@ import 'package:askiineverdie/src/features/game/widgets/equipment_stats_panel.da
import 'package:askiineverdie/src/features/game/widgets/potion_inventory_panel.dart';
import 'package:askiineverdie/src/features/game/widgets/task_progress_panel.dart';
import 'package:askiineverdie/src/features/game/widgets/active_buff_panel.dart';
import 'package:askiineverdie/src/features/game/layouts/mobile_carousel_layout.dart';
/// 게임 진행 화면 (Main.dfm 기반 3패널 레이아웃)
///
/// Phase 7: colorTheme 제거됨, 고정 4색 팔레트 사용
class GamePlayScreen extends StatefulWidget {
const GamePlayScreen({super.key, required this.controller});
const GamePlayScreen({
super.key,
required this.controller,
this.forceCarouselLayout = false,
this.forceDesktopLayout = false,
});
final GameSessionController controller;
/// 테스트 모드: 웹에서도 모바일 캐로셀 레이아웃 강제 사용
final bool forceCarouselLayout;
/// 테스트 모드: 모바일에서도 데스크톱 3패널 레이아웃 강제 사용
final bool forceDesktopLayout;
@override
State<GamePlayScreen> createState() => _GamePlayScreenState();
}
@@ -400,6 +414,102 @@ class _GamePlayScreenState extends State<GamePlayScreen>
setState(() {});
}
/// 캐로셀 레이아웃 사용 여부 판단
///
/// - forceDesktopLayout (테스트 모드) 활성화 시 데스크톱 레이아웃 사용
/// - forceCarouselLayout (테스트 모드) 활성화 시 캐로셀 레이아웃 사용
/// - 실제 모바일 플랫폼 (iOS/Android) 시 캐로셀 사용
bool _shouldUseCarouselLayout(BuildContext context) {
// 테스트 모드: 데스크톱 레이아웃 강제
if (widget.forceDesktopLayout) return false;
// 테스트 모드: 캐로셀 레이아웃 강제
if (widget.forceCarouselLayout) return true;
// 웹에서는 3패널 레이아웃 사용 (테스트 모드가 아닌 경우)
if (kIsWeb) return false;
// 모바일 플랫폼(iOS/Android)에서는 캐로셀 사용
final platform = defaultTargetPlatform;
return platform == TargetPlatform.iOS || platform == TargetPlatform.android;
}
/// 현재 언어명 가져오기
String _getCurrentLanguageName() {
final locale = game_l10n.currentGameLocale;
if (locale == 'ko') return game_l10n.languageKorean;
if (locale == 'ja') return game_l10n.languageJapanese;
return game_l10n.languageEnglish;
}
/// 언어 선택 다이얼로그 표시
void _showLanguageDialog(BuildContext context) {
showDialog<void>(
context: context,
builder: (context) => AlertDialog(
title: Text(game_l10n.menuLanguage),
content: Column(
mainAxisSize: MainAxisSize.min,
children: [
_buildLanguageOption(context, 'en', game_l10n.languageEnglish),
_buildLanguageOption(context, 'ko', game_l10n.languageKorean),
_buildLanguageOption(context, 'ja', game_l10n.languageJapanese),
],
),
),
);
}
Widget _buildLanguageOption(
BuildContext context,
String locale,
String label,
) {
final isSelected = game_l10n.currentGameLocale == locale;
return ListTile(
leading: Icon(
isSelected ? Icons.radio_button_checked : Icons.radio_button_unchecked,
color: isSelected ? Theme.of(context).colorScheme.primary : null,
),
title: Text(
label,
style: TextStyle(
fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
),
),
onTap: () {
Navigator.pop(context); // 다이얼로그 닫기
game_l10n.setGameLocale(locale);
setState(() {});
},
);
}
/// 부활 처리 핸들러
Future<void> _handleResurrect() async {
// 1. 부활 처리 (HP/MP 회복, 장비 구매 - 게임 재개 없음)
await widget.controller.resurrect();
// 2. 부활 애니메이션 재생
setState(() {
_specialAnimation = AsciiAnimationType.resurrection;
});
// 3. 애니메이션 종료 후 게임 재개
final duration = getSpecialAnimationDuration(
AsciiAnimationType.resurrection,
);
Future.delayed(Duration(milliseconds: duration), () async {
if (mounted) {
setState(() {
_specialAnimation = null;
});
// 부활 후 게임 재개 (새 루프 시작)
await widget.controller.resumeAfterResurrection();
}
});
}
@override
Widget build(BuildContext context) {
final state = widget.controller.state;
@@ -407,7 +517,84 @@ class _GamePlayScreenState extends State<GamePlayScreen>
return const Scaffold(body: Center(child: CircularProgressIndicator()));
}
// 로케일 변경 시 전체 위젯 트리 강제 리빌드를 위한 Key
final localeKey = ValueKey(game_l10n.currentGameLocale);
// 캐로셀 레이아웃 사용 여부 확인
if (_shouldUseCarouselLayout(context)) {
return NotificationOverlay(
key: localeKey,
notificationService: _notificationService,
child: PopScope(
canPop: false,
onPopInvokedWithResult: (didPop, result) async {
if (didPop) return;
final shouldPop = await _onPopInvoked();
if (shouldPop && context.mounted) {
await widget.controller.pause(saveOnStop: false);
if (context.mounted) {
Navigator.of(context).pop();
}
}
},
child: Stack(
children: [
MobileCarouselLayout(
state: state,
combatLogEntries: _combatLogEntries,
speedMultiplier: widget.controller.loop?.speedMultiplier ?? 1,
onSpeedCycle: () {
widget.controller.loop?.cycleSpeed();
setState(() {});
},
isPaused: !widget.controller.isRunning,
onPauseToggle: () async {
await widget.controller.togglePause();
setState(() {});
},
onSave: _saveGameState,
onExit: () async {
final shouldExit = await _onPopInvoked();
if (shouldExit && context.mounted) {
await widget.controller.pause(saveOnStop: false);
if (context.mounted) {
Navigator.of(context).pop();
}
}
},
notificationService: _notificationService,
specialAnimation: _specialAnimation,
onLanguageChange: (locale) {
game_l10n.setGameLocale(locale);
setState(() {});
},
onDeleteSaveAndNewGame: () async {
// 게임 루프 중지
await widget.controller.pause(saveOnStop: false);
// 세이브 파일 삭제
await widget.controller.saveManager.deleteSave();
// 캐릭터 생성 화면으로 돌아가기
if (context.mounted) {
Navigator.of(context).pop();
}
},
),
// 사망 오버레이
if (state.isDead && state.deathInfo != null)
DeathOverlay(
deathInfo: state.deathInfo!,
traits: state.traits,
onResurrect: _handleResurrect,
),
],
),
),
);
}
// 기존 데스크톱 레이아웃
return NotificationOverlay(
key: localeKey,
notificationService: _notificationService,
child: PopScope(
canPop: false,
@@ -443,6 +630,12 @@ class _GamePlayScreenState extends State<GamePlayScreen>
onPressed: () => widget.controller.loop?.cheatCompletePlot(),
),
],
// 언어 변경 버튼
TextButton.icon(
onPressed: () => _showLanguageDialog(context),
icon: const Icon(Icons.language, size: 18),
label: Text(_getCurrentLanguageName()),
),
],
),
body: Stack(
@@ -497,29 +690,7 @@ class _GamePlayScreenState extends State<GamePlayScreen>
DeathOverlay(
deathInfo: state.deathInfo!,
traits: state.traits,
onResurrect: () async {
// 1. 부활 처리 (HP/MP 회복, 장비 구매 - 게임 재개 없음)
await widget.controller.resurrect();
// 2. 부활 애니메이션 재생
setState(() {
_specialAnimation = AsciiAnimationType.resurrection;
});
// 3. 애니메이션 종료 후 게임 재개
final duration = getSpecialAnimationDuration(
AsciiAnimationType.resurrection,
);
Future.delayed(Duration(milliseconds: duration), () async {
if (mounted) {
setState(() {
_specialAnimation = null;
});
// 부활 후 게임 재개 (새 루프 시작)
await widget.controller.resumeAfterResurrection();
}
});
},
onResurrect: _handleResurrect,
),
],
),

386
lib/src/features/game/layouts/mobile_carousel_layout.dart Normal file
View File

@@ -0,0 +1,386 @@
import 'package:flutter/material.dart';
import 'package:askiineverdie/src/core/notification/notification_service.dart';
import 'package:askiineverdie/data/game_text_l10n.dart' as l10n;
import 'package:askiineverdie/l10n/app_localizations.dart';
import 'package:askiineverdie/src/core/animation/ascii_animation_type.dart';
import 'package:askiineverdie/src/core/model/game_state.dart';
import 'package:askiineverdie/src/features/game/pages/character_sheet_page.dart';
import 'package:askiineverdie/src/features/game/pages/combat_log_page.dart';
import 'package:askiineverdie/src/features/game/pages/equipment_page.dart';
import 'package:askiineverdie/src/features/game/pages/inventory_page.dart';
import 'package:askiineverdie/src/features/game/pages/quest_page.dart';
import 'package:askiineverdie/src/features/game/pages/skills_page.dart';
import 'package:askiineverdie/src/features/game/pages/story_page.dart';
import 'package:askiineverdie/src/features/game/widgets/carousel_nav_bar.dart';
import 'package:askiineverdie/src/features/game/widgets/combat_log.dart';
import 'package:askiineverdie/src/features/game/widgets/enhanced_animation_panel.dart';
/// 모바일 캐로셀 레이아웃
///
/// 모바일 앱용 레이아웃:
/// - 상단: 확장 애니메이션 패널 (ASCII 애니메이션, HP/MP, 버프, 몬스터 HP)
/// - 중앙: 캐로셀 (7개 페이지: 스킬, 인벤토리, 장비, 캐릭터시트, 전투로그, 스토리, 퀘스트)
/// - 하단: 네비게이션 바 (7개 버튼)
class MobileCarouselLayout extends StatefulWidget {
const MobileCarouselLayout({
super.key,
required this.state,
required this.combatLogEntries,
required this.speedMultiplier,
required this.onSpeedCycle,
required this.isPaused,
required this.onPauseToggle,
required this.onSave,
required this.onExit,
required this.notificationService,
required this.onLanguageChange,
required this.onDeleteSaveAndNewGame,
this.specialAnimation,
});
final GameState state;
final List<CombatLogEntry> combatLogEntries;
final int speedMultiplier;
final VoidCallback onSpeedCycle;
final bool isPaused;
final VoidCallback onPauseToggle;
final VoidCallback onSave;
final VoidCallback onExit;
final NotificationService notificationService;
final void Function(String locale) onLanguageChange;
final VoidCallback onDeleteSaveAndNewGame;
final AsciiAnimationType? specialAnimation;
@override
State<MobileCarouselLayout> createState() => _MobileCarouselLayoutState();
}
class _MobileCarouselLayoutState extends State<MobileCarouselLayout> {
late PageController _pageController;
int _currentPage = CarouselPage.character.index; // 기본: 캐릭터시트
@override
void initState() {
super.initState();
_pageController = PageController(initialPage: _currentPage);
}
@override
void dispose() {
_pageController.dispose();
super.dispose();
}
void _onPageChanged(int page) {
setState(() {
_currentPage = page;
});
}
void _onNavPageSelected(int page) {
_pageController.animateToPage(
page,
duration: const Duration(milliseconds: 300),
curve: Curves.easeInOut,
);
}
/// 현재 언어명 가져오기
String _getCurrentLanguageName() {
final locale = l10n.currentGameLocale;
if (locale == 'ko') return l10n.languageKorean;
if (locale == 'ja') return l10n.languageJapanese;
return l10n.languageEnglish;
}
/// 언어 선택 다이얼로그 표시
void _showLanguageDialog(BuildContext context) {
showDialog<void>(
context: context,
builder: (context) => AlertDialog(
title: Text(l10n.menuLanguage),
content: Column(
mainAxisSize: MainAxisSize.min,
children: [
_buildLanguageOption(context, 'en', l10n.languageEnglish),
_buildLanguageOption(context, 'ko', l10n.languageKorean),
_buildLanguageOption(context, 'ja', l10n.languageJapanese),
],
),
),
);
}
Widget _buildLanguageOption(
BuildContext context,
String locale,
String label,
) {
final isSelected = l10n.currentGameLocale == locale;
return ListTile(
leading: Icon(
isSelected ? Icons.radio_button_checked : Icons.radio_button_unchecked,
color: isSelected ? Theme.of(context).colorScheme.primary : null,
),
title: Text(
label,
style: TextStyle(
fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
),
),
onTap: () {
Navigator.pop(context); // 다이얼로그 닫기
widget.onLanguageChange(locale);
},
);
}
/// 세이브 삭제 확인 다이얼로그 표시
void _showDeleteConfirmDialog(BuildContext context) {
showDialog<void>(
context: context,
builder: (context) => AlertDialog(
title: Text(l10n.confirmDeleteTitle),
content: Text(l10n.confirmDeleteMessage),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: Text(l10n.buttonCancel),
),
TextButton(
onPressed: () {
Navigator.pop(context); // 다이얼로그 닫기
widget.onDeleteSaveAndNewGame();
},
style: TextButton.styleFrom(foregroundColor: Colors.red),
child: Text(l10n.buttonConfirm),
),
],
),
);
}
/// 옵션 메뉴 표시
void _showOptionsMenu(BuildContext context) {
final localizations = L10n.of(context);
showModalBottomSheet<void>(
context: context,
builder: (context) => SafeArea(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
// 헤더
Container(
padding: const EdgeInsets.all(16),
width: double.infinity,
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.primaryContainer,
),
child: Text(
l10n.menuOptions,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16,
color: Theme.of(context).colorScheme.onPrimaryContainer,
),
),
),
// 일시정지/재개
ListTile(
leading: Icon(
widget.isPaused ? Icons.play_arrow : Icons.pause,
color: widget.isPaused ? Colors.green : Colors.orange,
),
title: Text(widget.isPaused ? l10n.menuResume : l10n.menuPause),
onTap: () {
Navigator.pop(context);
widget.onPauseToggle();
},
),
// 속도 조절
ListTile(
leading: const Icon(Icons.speed),
title: Text(l10n.menuSpeed),
trailing: Container(
padding: const EdgeInsets.symmetric(
horizontal: 12,
vertical: 4,
),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.primaryContainer,
borderRadius: BorderRadius.circular(12),
),
child: Text(
'${widget.speedMultiplier}x',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Theme.of(context).colorScheme.primary,
),
),
),
onTap: () {
widget.onSpeedCycle();
Navigator.pop(context);
},
),
// 언어 변경
ListTile(
leading: const Icon(Icons.language, color: Colors.teal),
title: Text(l10n.menuLanguage),
trailing: Text(
_getCurrentLanguageName(),
style: TextStyle(color: Theme.of(context).colorScheme.primary),
),
onTap: () {
Navigator.pop(context);
_showLanguageDialog(context);
},
),
const Divider(),
// 저장
ListTile(
leading: const Icon(Icons.save, color: Colors.blue),
title: Text(l10n.menuSave),
onTap: () {
Navigator.pop(context);
widget.onSave();
widget.notificationService.showGameSaved(l10n.menuSaved);
},
),
// 새로하기 (세이브 삭제)
ListTile(
leading: const Icon(Icons.refresh, color: Colors.orange),
title: Text(l10n.menuNewGame),
subtitle: Text(
l10n.menuDeleteSave,
style: TextStyle(
fontSize: 12,
color: Theme.of(context).colorScheme.outline,
),
),
onTap: () {
Navigator.pop(context);
_showDeleteConfirmDialog(context);
},
),
// 종료
ListTile(
leading: const Icon(Icons.exit_to_app, color: Colors.red),
title: Text(localizations.exitGame),
onTap: () {
Navigator.pop(context);
widget.onExit();
},
),
const SizedBox(height: 8),
],
),
),
);
}
@override
Widget build(BuildContext context) {
final state = widget.state;
return Scaffold(
appBar: AppBar(
title: Text(L10n.of(context).progressQuestTitle(state.traits.name)),
actions: [
// 옵션 버튼
IconButton(
icon: const Icon(Icons.more_vert),
onPressed: () => _showOptionsMenu(context),
tooltip: l10n.menuOptions,
),
],
),
body: Column(
children: [
// 상단: 확장 애니메이션 패널
EnhancedAnimationPanel(
progress: state.progress,
stats: state.stats,
skillSystem: state.skillSystem,
speedMultiplier: widget.speedMultiplier,
onSpeedCycle: widget.onSpeedCycle,
isPaused: widget.isPaused,
onPauseToggle: widget.onPauseToggle,
specialAnimation: widget.specialAnimation,
weaponName: state.equipment.weapon,
shieldName: state.equipment.shield,
characterLevel: state.traits.level,
monsterLevel: state.progress.currentTask.monsterLevel,
latestCombatEvent:
state.progress.currentCombat?.recentEvents.lastOrNull,
),
// 중앙: 캐로셀 (PageView)
Expanded(
child: PageView(
controller: _pageController,
onPageChanged: _onPageChanged,
children: [
// 0: 스킬
SkillsPage(
spellBook: state.spellBook,
skillSystem: state.skillSystem,
),
// 1: 인벤토리
InventoryPage(
inventory: state.inventory,
potionInventory: state.potionInventory,
encumbrance: state.progress.encumbrance,
usedPotionTypes:
state.progress.currentCombat?.usedPotionTypes ?? const {},
),
// 2: 장비
EquipmentPage(equipment: state.equipment),
// 3: 캐릭터시트 (기본)
CharacterSheetPage(
traits: state.traits,
stats: state.stats,
exp: state.progress.exp,
),
// 4: 전투로그
CombatLogPage(entries: widget.combatLogEntries),
// 5: 퀘스트
QuestPage(
questHistory: state.progress.questHistory,
quest: state.progress.quest,
),
// 6: 스토리
StoryPage(
plotStageCount: state.progress.plotStageCount,
plot: state.progress.plot,
),
],
),
),
// 하단: 네비게이션 바
CarouselNavBar(
currentPage: _currentPage,
onPageSelected: _onNavPageSelected,
),
],
),
);
}
}

133
lib/src/features/game/pages/character_sheet_page.dart Normal file
View File

@@ -0,0 +1,133 @@
import 'package:flutter/material.dart';
import 'package:askiineverdie/l10n/app_localizations.dart';
import 'package:askiineverdie/src/core/l10n/game_data_l10n.dart';
import 'package:askiineverdie/src/core/model/game_state.dart';
import 'package:askiineverdie/src/features/game/widgets/stats_panel.dart';
/// 캐릭터시트 페이지 (캐로셀 - 기본 페이지)
///
/// 트레잇, 스탯, 경험치 표시.
class CharacterSheetPage extends StatelessWidget {
const CharacterSheetPage({
super.key,
required this.traits,
required this.stats,
required this.exp,
});
final Traits traits;
final Stats stats;
final ProgressBarState exp;
@override
Widget build(BuildContext context) {
final localizations = L10n.of(context);
return SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// 트레잇
_buildSectionHeader(context, localizations.traits),
_buildTraitsList(context),
// 스탯
_buildSectionHeader(context, localizations.stats),
StatsPanel(stats: stats),
// 경험치
_buildSectionHeader(context, localizations.experience),
_buildExpBar(context),
],
),
);
}
Widget _buildSectionHeader(BuildContext context, String title) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
color: Theme.of(context).colorScheme.primaryContainer,
child: Text(
title,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 13,
color: Theme.of(context).colorScheme.onPrimaryContainer,
),
),
);
}
Widget _buildTraitsList(BuildContext context) {
final localizations = L10n.of(context);
final traitData = [
(localizations.traitName, traits.name),
(localizations.traitRace, GameDataL10n.getRaceName(context, traits.race)),
(
localizations.traitClass,
GameDataL10n.getKlassName(context, traits.klass),
),
(localizations.traitLevel, '${traits.level}'),
];
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
child: Column(
children: traitData.map((t) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 2),
child: Row(
children: [
SizedBox(
width: 60,
child: Text(
t.$1,
style: TextStyle(fontSize: 12, color: Colors.grey.shade600),
),
),
Expanded(
child: Text(
t.$2,
style: const TextStyle(
fontSize: 13,
fontWeight: FontWeight.bold,
),
overflow: TextOverflow.ellipsis,
),
),
],
),
);
}).toList(),
),
);
}
Widget _buildExpBar(BuildContext context) {
final localizations = L10n.of(context);
final progress = exp.max > 0
? (exp.position / exp.max).clamp(0.0, 1.0)
: 0.0;
final remaining = exp.max - exp.position;
return Padding(
padding: const EdgeInsets.all(12),
child: Column(
children: [
LinearProgressIndicator(
value: progress,
backgroundColor: Colors.blue.withValues(alpha: 0.2),
valueColor: const AlwaysStoppedAnimation<Color>(Colors.blue),
minHeight: 12,
),
const SizedBox(height: 4),
Text(
'$remaining ${localizations.xpNeededForNextLevel}',
style: TextStyle(fontSize: 10, color: Colors.grey.shade600),
),
],
),
);
}
}

44
lib/src/features/game/pages/combat_log_page.dart Normal file
View File

@@ -0,0 +1,44 @@
import 'package:flutter/material.dart';
import 'package:askiineverdie/l10n/app_localizations.dart';
import 'package:askiineverdie/src/features/game/widgets/combat_log.dart';
/// 전투 로그 페이지 (캐로셀)
///
/// 전투 이벤트 로그 표시.
class CombatLogPage extends StatelessWidget {
const CombatLogPage({super.key, required this.entries});
final List<CombatLogEntry> entries;
@override
Widget build(BuildContext context) {
final localizations = L10n.of(context);
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// 헤더
_buildSectionHeader(context, localizations.combatLog),
// 로그 (CombatLog 재사용)
Expanded(child: CombatLog(entries: entries)),
],
);
}
Widget _buildSectionHeader(BuildContext context, String title) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
color: Theme.of(context).colorScheme.primaryContainer,
child: Text(
title,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 13,
color: Theme.of(context).colorScheme.onPrimaryContainer,
),
),
);
}
}

45
lib/src/features/game/pages/equipment_page.dart Normal file
View File

@@ -0,0 +1,45 @@
import 'package:flutter/material.dart';
import 'package:askiineverdie/l10n/app_localizations.dart';
import 'package:askiineverdie/src/core/model/game_state.dart';
import 'package:askiineverdie/src/features/game/widgets/equipment_stats_panel.dart';
/// 장비 페이지 (캐로셀)
///
/// 현재 장착된 장비 목록과 스탯 표시.
class EquipmentPage extends StatelessWidget {
const EquipmentPage({super.key, required this.equipment});
final Equipment equipment;
@override
Widget build(BuildContext context) {
final localizations = L10n.of(context);
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// 장비 헤더
_buildSectionHeader(context, localizations.equipment),
// 장비 목록 (EquipmentStatsPanel 재사용)
Expanded(child: EquipmentStatsPanel(equipment: equipment)),
],
);
}
Widget _buildSectionHeader(BuildContext context, String title) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
color: Theme.of(context).colorScheme.primaryContainer,
child: Text(
title,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 13,
color: Theme.of(context).colorScheme.onPrimaryContainer,
),
),
);
}
}

166
lib/src/features/game/pages/inventory_page.dart Normal file
View File

@@ -0,0 +1,166 @@
import 'package:flutter/material.dart';
import 'package:askiineverdie/data/game_text_l10n.dart' as l10n;
import 'package:askiineverdie/l10n/app_localizations.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/potion.dart';
import 'package:askiineverdie/src/features/game/widgets/potion_inventory_panel.dart';
/// 인벤토리 페이지 (캐로셀)
///
/// 골드, 아이템 목록, 물약 인벤토리, 무게 표시.
class InventoryPage extends StatelessWidget {
const InventoryPage({
super.key,
required this.inventory,
required this.potionInventory,
required this.encumbrance,
this.usedPotionTypes = const {},
});
final Inventory inventory;
final PotionInventory potionInventory;
final ProgressBarState encumbrance;
final Set<PotionType> usedPotionTypes;
@override
Widget build(BuildContext context) {
final localizations = L10n.of(context);
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// 인벤토리 (아이템)
_buildSectionHeader(context, localizations.inventory),
Expanded(flex: 2, child: _buildInventoryList(context)),
// 물약
_buildSectionHeader(context, l10n.uiPotions),
Expanded(
flex: 2,
child: PotionInventoryPanel(
inventory: potionInventory,
usedInBattle: usedPotionTypes,
),
),
// 무게 (Encumbrance)
_buildSectionHeader(context, localizations.encumbrance),
_buildProgressBar(context),
],
);
}
Widget _buildSectionHeader(BuildContext context, String title) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
color: Theme.of(context).colorScheme.primaryContainer,
child: Text(
title,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 13,
color: Theme.of(context).colorScheme.onPrimaryContainer,
),
),
);
}
Widget _buildInventoryList(BuildContext context) {
final localizations = L10n.of(context);
return ListView.builder(
itemCount: inventory.items.length + 1, // +1 for gold
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
itemBuilder: (context, index) {
if (index == 0) {
// 골드 표시
return Padding(
padding: const EdgeInsets.symmetric(vertical: 3),
child: Row(
children: [
const Icon(
Icons.monetization_on,
size: 16,
color: Colors.amber,
),
const SizedBox(width: 8),
Expanded(
child: Text(
localizations.gold,
style: const TextStyle(fontSize: 13),
),
),
Text(
'${inventory.gold}',
style: const TextStyle(
fontSize: 13,
fontWeight: FontWeight.bold,
color: Colors.amber,
),
),
],
),
);
}
final item = inventory.items[index - 1];
final translatedName = GameDataL10n.translateItemString(
context,
item.name,
);
return Padding(
padding: const EdgeInsets.symmetric(vertical: 3),
child: Row(
children: [
const Icon(Icons.inventory_2, size: 16, color: Colors.grey),
const SizedBox(width: 8),
Expanded(
child: Text(
translatedName,
style: const TextStyle(fontSize: 13),
overflow: TextOverflow.ellipsis,
),
),
Text(
'${item.count}',
style: const TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
),
),
],
),
);
},
);
}
Widget _buildProgressBar(BuildContext context) {
final progress = encumbrance.max > 0
? (encumbrance.position / encumbrance.max).clamp(0.0, 1.0)
: 0.0;
final percentage = (progress * 100).toInt();
return Padding(
padding: const EdgeInsets.all(12),
child: Column(
children: [
LinearProgressIndicator(
value: progress,
backgroundColor: Colors.orange.withValues(alpha: 0.2),
valueColor: const AlwaysStoppedAnimation<Color>(Colors.orange),
minHeight: 12,
),
const SizedBox(height: 4),
Text(
'$percentage%',
style: TextStyle(fontSize: 10, color: Colors.grey.shade600),
),
],
),
);
}
}

135
lib/src/features/game/pages/quest_page.dart Normal file
View File

@@ -0,0 +1,135 @@
import 'package:flutter/material.dart';
import 'package:askiineverdie/l10n/app_localizations.dart';
import 'package:askiineverdie/src/core/model/game_state.dart';
/// 퀘스트 페이지 (캐로셀)
///
/// 퀘스트 히스토리 및 현재 퀘스트 진행 상황 표시.
class QuestPage extends StatelessWidget {
const QuestPage({super.key, required this.questHistory, required this.quest});
final List<HistoryEntry> questHistory;
final ProgressBarState quest;
@override
Widget build(BuildContext context) {
final localizations = L10n.of(context);
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// 헤더
_buildSectionHeader(context, localizations.quests),
// 퀘스트 목록
Expanded(child: _buildQuestList(context)),
// 퀘스트 프로그레스
_buildProgressSection(context),
],
);
}
Widget _buildSectionHeader(BuildContext context, String title) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
color: Theme.of(context).colorScheme.primaryContainer,
child: Text(
title,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 13,
color: Theme.of(context).colorScheme.onPrimaryContainer,
),
),
);
}
Widget _buildQuestList(BuildContext context) {
final localizations = L10n.of(context);
if (questHistory.isEmpty) {
return Center(
child: Text(
localizations.noActiveQuests,
style: const TextStyle(fontSize: 13, color: Colors.grey),
),
);
}
return ListView.builder(
itemCount: questHistory.length,
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
itemBuilder: (context, index) {
final entry = questHistory[index];
final isCurrentQuest =
index == questHistory.length - 1 && !entry.isComplete;
return Padding(
padding: const EdgeInsets.symmetric(vertical: 4),
child: Row(
children: [
if (isCurrentQuest)
const Icon(Icons.arrow_right, size: 18, color: Colors.blue)
else
Icon(
entry.isComplete
? Icons.check_box
: Icons.check_box_outline_blank,
size: 18,
color: entry.isComplete ? Colors.green : Colors.grey,
),
const SizedBox(width: 8),
Expanded(
child: Text(
entry.caption,
style: TextStyle(
fontSize: 13,
decoration: entry.isComplete
? TextDecoration.lineThrough
: null,
color: isCurrentQuest
? Colors.blue
: entry.isComplete
? Colors.grey
: null,
fontWeight: isCurrentQuest ? FontWeight.bold : null,
),
overflow: TextOverflow.ellipsis,
),
),
],
),
);
},
);
}
Widget _buildProgressSection(BuildContext context) {
final localizations = L10n.of(context);
final progress = quest.max > 0
? (quest.position / quest.max).clamp(0.0, 1.0)
: 0.0;
final percentage = (progress * 100).toInt();
return Padding(
padding: const EdgeInsets.all(12),
child: Column(
children: [
LinearProgressIndicator(
value: progress,
backgroundColor: Colors.green.withValues(alpha: 0.2),
valueColor: const AlwaysStoppedAnimation<Color>(Colors.green),
minHeight: 12,
),
const SizedBox(height: 4),
Text(
localizations.percentComplete(percentage),
style: TextStyle(fontSize: 10, color: Colors.grey.shade600),
),
],
),
);
}
}

162
lib/src/features/game/pages/skills_page.dart Normal file
View File

@@ -0,0 +1,162 @@
import 'package:flutter/material.dart';
import 'package:askiineverdie/data/game_text_l10n.dart' as l10n;
import 'package:askiineverdie/data/skill_data.dart';
import 'package:askiineverdie/l10n/app_localizations.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/skill.dart';
import 'package:askiineverdie/src/features/game/widgets/active_buff_panel.dart';
/// 스킬 페이지 (캐로셀)
///
/// SpellBook 기반 스킬 목록과 활성 버프 표시.
class SkillsPage extends StatelessWidget {
const SkillsPage({
super.key,
required this.spellBook,
required this.skillSystem,
});
final SpellBook spellBook;
final SkillSystemState skillSystem;
@override
Widget build(BuildContext context) {
final localizations = L10n.of(context);
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// 스킬 목록
_buildSectionHeader(context, localizations.spellBook),
Expanded(flex: 3, child: _buildSkillsList(context)),
// 활성 버프
_buildSectionHeader(context, l10n.uiBuffs),
Expanded(
flex: 2,
child: ActiveBuffPanel(
activeBuffs: skillSystem.activeBuffs,
currentMs: skillSystem.elapsedMs,
),
),
],
);
}
Widget _buildSectionHeader(BuildContext context, String title) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
color: Theme.of(context).colorScheme.primaryContainer,
child: Text(
title,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 13,
color: Theme.of(context).colorScheme.onPrimaryContainer,
),
),
);
}
Widget _buildSkillsList(BuildContext context) {
if (spellBook.spells.isEmpty) {
return Center(
child: Text(
L10n.of(context).noSpellsYet,
style: const TextStyle(fontSize: 12, color: Colors.grey),
),
);
}
return ListView.builder(
itemCount: spellBook.spells.length,
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
itemBuilder: (context, index) {
final spell = spellBook.spells[index];
final skill = SkillData.getSkillBySpellName(spell.name);
final spellName = GameDataL10n.getSpellName(context, spell.name);
// 쿨타임 상태 확인
final skillState = skill != null
? skillSystem.getSkillState(skill.id)
: null;
final isOnCooldown =
skillState != null &&
!skillState.isReady(skillSystem.elapsedMs, skill!.cooldownMs);
return _SkillRow(
spellName: spellName,
rank: spell.rank,
skill: skill,
isOnCooldown: isOnCooldown,
);
},
);
}
}
/// 스킬 행 위젯
class _SkillRow extends StatelessWidget {
const _SkillRow({
required this.spellName,
required this.rank,
required this.skill,
required this.isOnCooldown,
});
final String spellName;
final String rank;
final Skill? skill;
final bool isOnCooldown;
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 3),
child: Row(
children: [
// 스킬 타입 아이콘
_buildTypeIcon(),
const SizedBox(width: 8),
// 스킬 이름
Expanded(
child: Text(
spellName,
style: TextStyle(
fontSize: 13,
color: isOnCooldown ? Colors.grey : null,
),
overflow: TextOverflow.ellipsis,
),
),
// 쿨타임 표시
if (isOnCooldown)
const Icon(Icons.hourglass_empty, size: 14, color: Colors.orange),
const SizedBox(width: 8),
// 랭크
Text(
rank,
style: const TextStyle(fontSize: 12, fontWeight: FontWeight.bold),
),
],
),
);
}
Widget _buildTypeIcon() {
if (skill == null) {
return const SizedBox(width: 16);
}
final (IconData icon, Color color) = switch (skill!.type) {
SkillType.attack => (Icons.flash_on, Colors.red),
SkillType.heal => (Icons.favorite, Colors.green),
SkillType.buff => (Icons.arrow_upward, Colors.blue),
SkillType.debuff => (Icons.arrow_downward, Colors.purple),
};
return Icon(icon, size: 16, color: color);
}
}

156
lib/src/features/game/pages/story_page.dart Normal file
View File

@@ -0,0 +1,156 @@
import 'package:flutter/material.dart';
import 'package:askiineverdie/l10n/app_localizations.dart';
import 'package:askiineverdie/src/core/model/game_state.dart';
import 'package:askiineverdie/src/core/util/pq_logic.dart' as pq_logic;
/// 스토리 페이지 (캐로셀)
///
/// Plot 진행 상황 표시.
class StoryPage extends StatelessWidget {
const StoryPage({
super.key,
required this.plotStageCount,
required this.plot,
});
final int plotStageCount;
final ProgressBarState plot;
@override
Widget build(BuildContext context) {
final localizations = L10n.of(context);
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// 헤더
_buildSectionHeader(context, localizations.plotDevelopment),
// Plot 목록
Expanded(child: _buildPlotList(context)),
// Plot 프로그레스
_buildProgressSection(context),
],
);
}
Widget _buildSectionHeader(BuildContext context, String title) {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
color: Theme.of(context).colorScheme.primaryContainer,
child: Text(
title,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 13,
color: Theme.of(context).colorScheme.onPrimaryContainer,
),
),
);
}
Widget _buildPlotList(BuildContext context) {
final localizations = L10n.of(context);
if (plotStageCount == 0) {
return Center(
child: Text(
localizations.prologue,
style: const TextStyle(fontSize: 13, color: Colors.grey),
),
);
}
return ListView.builder(
itemCount: plotStageCount,
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
itemBuilder: (context, index) {
final isCompleted = index < plotStageCount - 1;
final label = index == 0
? localizations.prologue
: localizations.actNumber(_toRoman(index));
return Padding(
padding: const EdgeInsets.symmetric(vertical: 4),
child: Row(
children: [
Icon(
isCompleted ? Icons.check_box : Icons.check_box_outline_blank,
size: 18,
color: isCompleted ? Colors.green : Colors.grey,
),
const SizedBox(width: 8),
Expanded(
child: Text(
label,
style: TextStyle(
fontSize: 13,
decoration: isCompleted ? TextDecoration.lineThrough : null,
color: isCompleted ? Colors.grey : null,
),
),
),
],
),
);
},
);
}
Widget _buildProgressSection(BuildContext context) {
final progress = plot.max > 0
? (plot.position / plot.max).clamp(0.0, 1.0)
: 0.0;
final remaining = plot.max - plot.position;
final remainingTime = pq_logic.roughTime(remaining);
return Padding(
padding: const EdgeInsets.all(12),
child: Column(
children: [
LinearProgressIndicator(
value: progress,
backgroundColor: Colors.purple.withValues(alpha: 0.2),
valueColor: const AlwaysStoppedAnimation<Color>(Colors.purple),
minHeight: 12,
),
const SizedBox(height: 4),
Text(
'$remainingTime remaining',
style: TextStyle(fontSize: 10, color: Colors.grey.shade600),
),
],
),
);
}
String _toRoman(int number) {
const romanNumerals = [
(1000, 'M'),
(900, 'CM'),
(500, 'D'),
(400, 'CD'),
(100, 'C'),
(90, 'XC'),
(50, 'L'),
(40, 'XL'),
(10, 'X'),
(9, 'IX'),
(5, 'V'),
(4, 'IV'),
(1, 'I'),
];
var result = '';
var remaining = number;
for (final (value, numeral) in romanNumerals) {
while (remaining >= value) {
result += numeral;
remaining -= value;
}
}
return result;
}
}

121
lib/src/features/game/widgets/carousel_nav_bar.dart Normal file
View File

@@ -0,0 +1,121 @@
import 'package:flutter/material.dart';
import 'package:askiineverdie/data/game_text_l10n.dart' as l10n;
/// 캐로셀 페이지 인덱스
enum CarouselPage {
skills, // 0: 스킬
inventory, // 1: 인벤토리
equipment, // 2: 장비
character, // 3: 캐릭터시트 (기본)
combatLog, // 4: 전투로그
quest, // 5: 퀘스트
story, // 6: 스토리
}
/// 캐로셀 네비게이션 바
///
/// 7개의 페이지 버튼을 표시하고 현재 페이지를 하이라이트.
/// 버튼 탭 시 해당 페이지로 이동.
class CarouselNavBar extends StatelessWidget {
const CarouselNavBar({
super.key,
required this.currentPage,
required this.onPageSelected,
});
final int currentPage;
final ValueChanged<int> onPageSelected;
@override
Widget build(BuildContext context) {
return Container(
height: 56,
padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 4),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surfaceContainerHighest,
border: Border(top: BorderSide(color: Theme.of(context).dividerColor)),
),
child: Row(
children: CarouselPage.values.map((page) {
final isSelected = page.index == currentPage;
return Expanded(
child: _NavButton(
page: page,
isSelected: isSelected,
onTap: () => onPageSelected(page.index),
),
);
}).toList(),
),
);
}
}
/// 개별 네비게이션 버튼
class _NavButton extends StatelessWidget {
const _NavButton({
required this.page,
required this.isSelected,
required this.onTap,
});
final CarouselPage page;
final bool isSelected;
final VoidCallback onTap;
@override
Widget build(BuildContext context) {
final (icon, label) = _getIconAndLabel(page);
final theme = Theme.of(context);
final color = isSelected
? theme.colorScheme.primary
: theme.colorScheme.onSurfaceVariant;
return InkWell(
onTap: onTap,
borderRadius: BorderRadius.circular(8),
child: Container(
padding: const EdgeInsets.symmetric(vertical: 4),
decoration: isSelected
? BoxDecoration(
color: theme.colorScheme.primaryContainer.withValues(
alpha: 0.5,
),
borderRadius: BorderRadius.circular(8),
)
: null,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(icon, size: 20, color: color),
const SizedBox(height: 2),
Text(
label,
style: TextStyle(
fontSize: 9,
fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
color: color,
),
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
],
),
),
);
}
/// 페이지별 아이콘과 라벨
(IconData, String) _getIconAndLabel(CarouselPage page) {
return switch (page) {
CarouselPage.skills => (Icons.auto_fix_high, l10n.navSkills),
CarouselPage.inventory => (Icons.inventory_2, l10n.navInventory),
CarouselPage.equipment => (Icons.shield, l10n.navEquipment),
CarouselPage.character => (Icons.person, l10n.navCharacter),
CarouselPage.combatLog => (Icons.list_alt, l10n.navCombatLog),
CarouselPage.story => (Icons.auto_stories, l10n.navStory),
CarouselPage.quest => (Icons.flag, l10n.navQuest),
};
}
}

5
lib/src/features/game/widgets/cinematic_view.dart
View File

@@ -165,7 +165,10 @@ class _CinematicViewState extends State<CinematicView>
onPressed: _skip,
child: Text(
l10n.uiSkip,
style: const TextStyle(color: Colors.white54, fontSize: 14),
style: const TextStyle(
color: Colors.white54,
fontSize: 14,
),
),
),
),

642
lib/src/features/game/widgets/enhanced_animation_panel.dart Normal file
View File

@@ -0,0 +1,642 @@
import 'package:flutter/material.dart';
import 'package:askiineverdie/data/game_text_l10n.dart' as l10n;
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/combat_state.dart';
import 'package:askiineverdie/src/core/model/game_state.dart';
import 'package:askiineverdie/src/features/game/widgets/ascii_animation_card.dart';
/// 모바일용 확장 애니메이션 패널
///
/// 캐로셀 레이아웃에서 상단 영역에 표시되는 통합 패널:
/// - ASCII 애니메이션 (기존 높이 유지)
/// - 플레이어 HP/MP 컴팩트 바 (플로팅 텍스트 포함)
/// - 활성 버프 아이콘 (최대 3개)
/// - 몬스터 HP 바 (전투 중)
class EnhancedAnimationPanel extends StatefulWidget {
const EnhancedAnimationPanel({
super.key,
required this.progress,
required this.stats,
required this.skillSystem,
required this.speedMultiplier,
required this.onSpeedCycle,
required this.isPaused,
required this.onPauseToggle,
this.specialAnimation,
this.weaponName,
this.shieldName,
this.characterLevel,
this.monsterLevel,
this.latestCombatEvent,
});
final ProgressState progress;
final Stats stats;
final SkillSystemState skillSystem;
final int speedMultiplier;
final VoidCallback onSpeedCycle;
final bool isPaused;
final VoidCallback onPauseToggle;
final AsciiAnimationType? specialAnimation;
final String? weaponName;
final String? shieldName;
final int? characterLevel;
final int? monsterLevel;
final CombatEvent? latestCombatEvent;
@override
State<EnhancedAnimationPanel> createState() => _EnhancedAnimationPanelState();
}
class _EnhancedAnimationPanelState extends State<EnhancedAnimationPanel>
with TickerProviderStateMixin {
// HP/MP 변화 애니메이션
late AnimationController _hpFlashController;
late AnimationController _mpFlashController;
late AnimationController _monsterFlashController;
late Animation<double> _hpFlashAnimation;
late Animation<double> _mpFlashAnimation;
late Animation<double> _monsterFlashAnimation;
int _hpChange = 0;
int _mpChange = 0;
int _monsterHpChange = 0;
// 이전 값 추적
int _lastHp = 0;
int _lastMp = 0;
int _lastMonsterHp = 0;
@override
void initState() {
super.initState();
_hpFlashController = AnimationController(
duration: const Duration(milliseconds: 500),
vsync: this,
);
_mpFlashController = AnimationController(
duration: const Duration(milliseconds: 500),
vsync: this,
);
_monsterFlashController = AnimationController(
duration: const Duration(milliseconds: 500),
vsync: this,
);
_hpFlashAnimation = Tween<double>(begin: 1.0, end: 0.0).animate(
CurvedAnimation(parent: _hpFlashController, curve: Curves.easeOut),
);
_mpFlashAnimation = Tween<double>(begin: 1.0, end: 0.0).animate(
CurvedAnimation(parent: _mpFlashController, curve: Curves.easeOut),
);
_monsterFlashAnimation = Tween<double>(begin: 1.0, end: 0.0).animate(
CurvedAnimation(parent: _monsterFlashController, curve: Curves.easeOut),
);
// 초기값 설정
_lastHp = _currentHp;
_lastMp = _currentMp;
_lastMonsterHp = _currentMonsterHp ?? 0;
}
@override
void didUpdateWidget(EnhancedAnimationPanel oldWidget) {
super.didUpdateWidget(oldWidget);
// HP 변화 감지
final newHp = _currentHp;
if (newHp != _lastHp) {
_hpChange = newHp - _lastHp;
_hpFlashController.forward(from: 0.0);
_lastHp = newHp;
}
// MP 변화 감지
final newMp = _currentMp;
if (newMp != _lastMp) {
_mpChange = newMp - _lastMp;
_mpFlashController.forward(from: 0.0);
_lastMp = newMp;
}
// 몬스터 HP 변화 감지
final newMonsterHp = _currentMonsterHp;
if (newMonsterHp != null && newMonsterHp != _lastMonsterHp) {
_monsterHpChange = newMonsterHp - _lastMonsterHp;
_monsterFlashController.forward(from: 0.0);
_lastMonsterHp = newMonsterHp;
} else if (newMonsterHp == null) {
_lastMonsterHp = 0;
}
}
int get _currentHp =>
widget.progress.currentCombat?.playerStats.hpCurrent ?? widget.stats.hp;
int get _currentHpMax =>
widget.progress.currentCombat?.playerStats.hpMax ?? widget.stats.hpMax;
int get _currentMp =>
widget.progress.currentCombat?.playerStats.mpCurrent ?? widget.stats.mp;
int get _currentMpMax =>
widget.progress.currentCombat?.playerStats.mpMax ?? widget.stats.mpMax;
int? get _currentMonsterHp =>
widget.progress.currentCombat?.monsterStats.hpCurrent;
int? get _currentMonsterHpMax =>
widget.progress.currentCombat?.monsterStats.hpMax;
@override
void dispose() {
_hpFlashController.dispose();
_mpFlashController.dispose();
_monsterFlashController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
final combat = widget.progress.currentCombat;
final isInCombat = combat != null && combat.isActive;
return Container(
padding: const EdgeInsets.all(8),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surfaceContainerHighest,
border: Border(
bottom: BorderSide(color: Theme.of(context).dividerColor),
),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
// ASCII 애니메이션 (기존 높이 120 유지)
SizedBox(
height: 120,
child: AsciiAnimationCard(
taskType: widget.progress.currentTask.type,
monsterBaseName: widget.progress.currentTask.monsterBaseName,
specialAnimation: widget.specialAnimation,
weaponName: widget.weaponName,
shieldName: widget.shieldName,
characterLevel: widget.characterLevel,
monsterLevel: widget.monsterLevel,
isPaused: widget.isPaused,
latestCombatEvent: widget.latestCombatEvent,
),
),
const SizedBox(height: 8),
// 상태 바 영역: HP/MP + 버프 아이콘 + 몬스터 HP
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// 좌측: HP/MP 바
Expanded(
flex: 3,
child: Column(
children: [
_buildCompactHpBar(),
const SizedBox(height: 4),
_buildCompactMpBar(),
],
),
),
const SizedBox(width: 8),
// 중앙: 활성 버프 아이콘 (최대 3개)
_buildBuffIcons(),
const SizedBox(width: 8),
// 우측: 몬스터 HP (전투 중) 또는 컨트롤 버튼
Expanded(
flex: 2,
child: isInCombat
? _buildMonsterHpBar(combat)
: _buildControlButtons(),
),
],
),
const SizedBox(height: 6),
// 하단: 태스크 프로그레스 바 + 캡션
_buildTaskProgress(),
],
),
);
}
/// 컴팩트 HP 바
Widget _buildCompactHpBar() {
final ratio = _currentHpMax > 0 ? _currentHp / _currentHpMax : 0.0;
final isLow = ratio < 0.2 && ratio > 0;
return AnimatedBuilder(
animation: _hpFlashAnimation,
builder: (context, child) {
return Stack(
clipBehavior: Clip.none,
children: [
// HP 바
Container(
height: 14,
decoration: BoxDecoration(
color: isLow
? Colors.red.withValues(alpha: 0.2)
: Colors.grey.shade800,
borderRadius: BorderRadius.circular(3),
),
child: Row(
children: [
// 라벨
Container(
width: 28,
alignment: Alignment.center,
child: Text(
l10n.statHp,
style: const TextStyle(
fontSize: 9,
fontWeight: FontWeight.bold,
color: Colors.white70,
),
),
),
// 프로그레스
Expanded(
child: ClipRRect(
borderRadius: const BorderRadius.horizontal(
right: Radius.circular(3),
),
child: LinearProgressIndicator(
value: ratio.clamp(0.0, 1.0),
backgroundColor: Colors.red.withValues(alpha: 0.2),
valueColor: AlwaysStoppedAnimation(
isLow ? Colors.red : Colors.red.shade600,
),
minHeight: 14,
),
),
),
// 수치
Container(
width: 48,
alignment: Alignment.center,
child: Text(
'$_currentHp/$_currentHpMax',
style: const TextStyle(fontSize: 8, color: Colors.white),
),
),
],
),
),
// 플로팅 변화량
if (_hpChange != 0 && _hpFlashAnimation.value > 0.05)
Positioned(
right: 50,
top: -8,
child: Transform.translate(
offset: Offset(0, -10 * (1 - _hpFlashAnimation.value)),
child: Opacity(
opacity: _hpFlashAnimation.value,
child: Text(
_hpChange > 0 ? '+$_hpChange' : '$_hpChange',
style: TextStyle(
fontSize: 11,
fontWeight: FontWeight.bold,
color: _hpChange < 0 ? Colors.red : Colors.green,
shadows: const [
Shadow(color: Colors.black, blurRadius: 3),
],
),
),
),
),
),
],
);
},
);
}
/// 컴팩트 MP 바
Widget _buildCompactMpBar() {
final ratio = _currentMpMax > 0 ? _currentMp / _currentMpMax : 0.0;
return AnimatedBuilder(
animation: _mpFlashAnimation,
builder: (context, child) {
return Stack(
clipBehavior: Clip.none,
children: [
Container(
height: 14,
decoration: BoxDecoration(
color: Colors.grey.shade800,
borderRadius: BorderRadius.circular(3),
),
child: Row(
children: [
Container(
width: 28,
alignment: Alignment.center,
child: Text(
l10n.statMp,
style: const TextStyle(
fontSize: 9,
fontWeight: FontWeight.bold,
color: Colors.white70,
),
),
),
Expanded(
child: ClipRRect(
borderRadius: const BorderRadius.horizontal(
right: Radius.circular(3),
),
child: LinearProgressIndicator(
value: ratio.clamp(0.0, 1.0),
backgroundColor: Colors.blue.withValues(alpha: 0.2),
valueColor: AlwaysStoppedAnimation(
Colors.blue.shade600,
),
minHeight: 14,
),
),
),
Container(
width: 48,
alignment: Alignment.center,
child: Text(
'$_currentMp/$_currentMpMax',
style: const TextStyle(fontSize: 8, color: Colors.white),
),
),
],
),
),
if (_mpChange != 0 && _mpFlashAnimation.value > 0.05)
Positioned(
right: 50,
top: -8,
child: Transform.translate(
offset: Offset(0, -10 * (1 - _mpFlashAnimation.value)),
child: Opacity(
opacity: _mpFlashAnimation.value,
child: Text(
_mpChange > 0 ? '+$_mpChange' : '$_mpChange',
style: TextStyle(
fontSize: 11,
fontWeight: FontWeight.bold,
color: _mpChange < 0 ? Colors.orange : Colors.cyan,
shadows: const [
Shadow(color: Colors.black, blurRadius: 3),
],
),
),
),
),
),
],
);
},
);
}
/// 활성 버프 아이콘 (최대 3개)
Widget _buildBuffIcons() {
final buffs = widget.skillSystem.activeBuffs;
final currentMs = widget.skillSystem.elapsedMs;
if (buffs.isEmpty) {
return const SizedBox(width: 60);
}
// 최대 3개만 표시
final displayBuffs = buffs.take(3).toList();
return SizedBox(
width: 60,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: displayBuffs.map((buff) {
final remainingMs = buff.remainingDuration(currentMs);
final progress = remainingMs / buff.effect.durationMs;
final isExpiring = remainingMs < 3000;
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 2),
child: Stack(
alignment: Alignment.center,
children: [
// 진행률 원형 표시
SizedBox(
width: 18,
height: 18,
child: CircularProgressIndicator(
value: progress.clamp(0.0, 1.0),
strokeWidth: 2,
backgroundColor: Colors.grey.shade700,
valueColor: AlwaysStoppedAnimation(
isExpiring ? Colors.orange : Colors.lightBlue,
),
),
),
// 버프 아이콘
Icon(
Icons.trending_up,
size: 10,
color: isExpiring ? Colors.orange : Colors.lightBlue,
),
],
),
);
}).toList(),
),
);
}
/// 몬스터 HP 바 (전투 중)
Widget _buildMonsterHpBar(CombatState combat) {
final max = _currentMonsterHpMax ?? 1;
final current = _currentMonsterHp ?? 0;
final ratio = max > 0 ? current / max : 0.0;
return AnimatedBuilder(
animation: _monsterFlashAnimation,
builder: (context, child) {
return Stack(
clipBehavior: Clip.none,
children: [
Container(
height: 32,
decoration: BoxDecoration(
color: Colors.orange.withValues(alpha: 0.1),
borderRadius: BorderRadius.circular(4),
border: Border.all(color: Colors.orange.withValues(alpha: 0.3)),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// HP 바
Padding(
padding: const EdgeInsets.symmetric(horizontal: 4),
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(Colors.orange),
minHeight: 8,
),
),
),
const SizedBox(height: 2),
// 퍼센트
Text(
'${(ratio * 100).toInt()}%',
style: const TextStyle(
fontSize: 9,
color: Colors.orange,
fontWeight: FontWeight.bold,
),
),
],
),
),
// 플로팅 데미지
if (_monsterHpChange != 0 && _monsterFlashAnimation.value > 0.05)
Positioned(
right: 10,
top: -10,
child: Transform.translate(
offset: Offset(0, -10 * (1 - _monsterFlashAnimation.value)),
child: Opacity(
opacity: _monsterFlashAnimation.value,
child: Text(
_monsterHpChange > 0
? '+$_monsterHpChange'
: '$_monsterHpChange',
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.bold,
color: _monsterHpChange < 0
? Colors.yellow
: Colors.green,
shadows: const [
Shadow(color: Colors.black, blurRadius: 3),
],
),
),
),
),
),
],
);
},
);
}
/// 컨트롤 버튼 (비전투 시)
Widget _buildControlButtons() {
return SizedBox(
height: 32,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// 일시정지 버튼
SizedBox(
width: 36,
height: 28,
child: OutlinedButton(
onPressed: widget.onPauseToggle,
style: OutlinedButton.styleFrom(
padding: EdgeInsets.zero,
visualDensity: VisualDensity.compact,
side: BorderSide(
color: widget.isPaused
? Colors.orange.withValues(alpha: 0.7)
: Theme.of(
context,
).colorScheme.outline.withValues(alpha: 0.5),
),
),
child: Icon(
widget.isPaused ? Icons.play_arrow : Icons.pause,
size: 14,
color: widget.isPaused ? Colors.orange : null,
),
),
),
const SizedBox(width: 4),
// 속도 버튼
SizedBox(
width: 36,
height: 28,
child: OutlinedButton(
onPressed: widget.onSpeedCycle,
style: OutlinedButton.styleFrom(
padding: EdgeInsets.zero,
visualDensity: VisualDensity.compact,
),
child: Text(
'${widget.speedMultiplier}x',
style: TextStyle(
fontSize: 10,
fontWeight: widget.speedMultiplier > 1
? FontWeight.bold
: FontWeight.normal,
color: widget.speedMultiplier > 1
? Theme.of(context).colorScheme.primary
: null,
),
),
),
),
],
),
);
}
/// 태스크 프로그레스 바
Widget _buildTaskProgress() {
final task = widget.progress.task;
final progressValue = task.max > 0
? (task.position / task.max).clamp(0.0, 1.0)
: 0.0;
return Column(
children: [
// 캡션
Text(
widget.progress.currentTask.caption,
style: Theme.of(context).textTheme.bodySmall,
textAlign: TextAlign.center,
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
const SizedBox(height: 4),
// 프로그레스 바
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8),
child: LinearProgressIndicator(
value: progressValue,
backgroundColor: Theme.of(
context,
).colorScheme.primary.withValues(alpha: 0.2),
valueColor: AlwaysStoppedAnimation<Color>(
Theme.of(context).colorScheme.primary,
),
minHeight: 10,
),
),
],
);
}
}

10
lib/src/features/game/widgets/equipment_stats_panel.dart
View File

@@ -308,7 +308,10 @@ class _StatsGrid extends StatelessWidget {
}
if (stats.criRate > 0) {
entries.add(
_StatEntry(l10n.statCri, '${(stats.criRate * 100).toStringAsFixed(1)}%'),
_StatEntry(
l10n.statCri,
'${(stats.criRate * 100).toStringAsFixed(1)}%',
),
);
}
if (stats.parryRate > 0) {
@@ -335,7 +338,10 @@ class _StatsGrid extends StatelessWidget {
}
if (stats.evasion > 0) {
entries.add(
_StatEntry(l10n.statEva, '${(stats.evasion * 100).toStringAsFixed(1)}%'),
_StatEntry(
l10n.statEva,
'${(stats.evasion * 100).toStringAsFixed(1)}%',
),
);
}

22
lib/src/features/game/widgets/notification_overlay.dart
View File

@@ -40,8 +40,9 @@ class _NotificationOverlayState extends State<NotificationOverlay>
vsync: this,
);
_slideAnimation =
Tween<Offset>(begin: const Offset(0, -1), end: Offset.zero).animate(
// 하단에서 슬라이드 인/아웃
_slideAnimation = Tween<Offset>(begin: const Offset(0, 1), end: Offset.zero)
.animate(
CurvedAnimation(
parent: _animationController,
curve: Curves.easeOutBack,
@@ -86,7 +87,7 @@ class _NotificationOverlayState extends State<NotificationOverlay>
widget.child,
if (_currentNotification != null)
Positioned(
top: MediaQuery.of(context).padding.top + 16,
bottom: MediaQuery.of(context).padding.bottom + 80,
left: 16,
right: 16,
child: SlideTransition(
@@ -214,6 +215,21 @@ class _NotificationCard extends StatelessWidget {
Icons.whatshot,
Colors.redAccent,
),
NotificationType.gameSaved => (
const Color(0xFF00695C),
Icons.save,
Colors.tealAccent,
),
NotificationType.info => (
const Color(0xFF0277BD),
Icons.info_outline,
Colors.lightBlueAccent,
),
NotificationType.warning => (
const Color(0xFFF57C00),
Icons.warning_amber,
Colors.amber,
),
};
}
}

2
lib/src/features/game/widgets/stats_panel.dart
View File

@@ -120,6 +120,8 @@ class _StatsPanelState extends State<StatsPanel>
return ListView.builder(
itemCount: stats.length,
padding: const EdgeInsets.symmetric(horizontal: 8),
shrinkWrap: true,
physics: const NeverScrollableScrollPhysics(),
itemBuilder: (context, index) {
final stat = stats[index];
final change = _statChanges[stat.$1];

31
lib/src/features/new_character/new_character_screen.dart
View File

@@ -18,7 +18,9 @@ class NewCharacterScreen extends StatefulWidget {
const NewCharacterScreen({super.key, this.onCharacterCreated});
/// 캐릭터 생성 완료 시 호출되는 콜백
final void Function(GameState initialState)? onCharacterCreated;
/// testMode: 웹에서도 모바일 캐로셀 레이아웃 사용
final void Function(GameState initialState, {bool testMode})?
onCharacterCreated;
@override
State<NewCharacterScreen> createState() => _NewCharacterScreenState();
@@ -53,6 +55,9 @@ class _NewCharacterScreenState extends State<NewCharacterScreen> {
// 이름 생성용 RNG
late DeterministicRandom _nameRng;
// 테스트 모드 (웹에서 모바일 캐로셀 레이아웃 활성화)
bool _testModeEnabled = false;
@override
void initState() {
super.initState();
@@ -198,7 +203,7 @@ class _NewCharacterScreenState extends State<NewCharacterScreen> {
queue: QueueState.empty(),
);
widget.onCharacterCreated?.call(initialState);
widget.onCharacterCreated?.call(initialState, testMode: _testModeEnabled);
}
@override
@@ -230,6 +235,10 @@ class _NewCharacterScreenState extends State<NewCharacterScreen> {
Expanded(child: _buildKlassSection()),
],
),
const SizedBox(height: 16),
// 테스트 모드 토글 (웹에서 모바일 레이아웃 테스트)
_buildTestModeToggle(),
const SizedBox(height: 24),
// Sold! 버튼
@@ -583,8 +592,9 @@ class _NewCharacterScreenState extends State<NewCharacterScreen> {
final percent = (passive.value * 100).round();
return switch (passive.type) {
ClassPassiveType.hpBonus => game_l10n.passiveHpBonus(percent),
ClassPassiveType.physicalDamageBonus =>
game_l10n.passivePhysicalBonus(percent),
ClassPassiveType.physicalDamageBonus => game_l10n.passivePhysicalBonus(
percent,
),
ClassPassiveType.defenseBonus => game_l10n.passiveDefenseBonus(percent),
ClassPassiveType.magicDamageBonus => game_l10n.passiveMagicBonus(percent),
ClassPassiveType.evasionBonus => game_l10n.passiveEvasionBonus(percent),
@@ -595,4 +605,17 @@ class _NewCharacterScreenState extends State<NewCharacterScreen> {
ClassPassiveType.firstStrikeBonus => passive.description,
};
}
/// 테스트 모드 토글 위젯
Widget _buildTestModeToggle() {
return Card(
child: SwitchListTile(
title: Text(game_l10n.uiTestMode),
subtitle: Text(game_l10n.uiTestModeDesc),
value: _testModeEnabled,
onChanged: (value) => setState(() => _testModeEnabled = value),
secondary: const Icon(Icons.phone_android),
),
);
}
}