feat(ui): 반응형 레이아웃 및 저장 시스템 개선
## 반응형 레이아웃 - 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
386
lib/src/features/game/layouts/mobile_carousel_layout.dart
Normal file
386
lib/src/features/game/layouts/mobile_carousel_layout.dart
Normal 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,
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user