feat(ui): 도움말 다이얼로그 및 UI 개선
- HelpDialog 추가 - 게임 화면에 통계/도움말 버튼 추가 - CombatLog에 디버프 이벤트 표시 - AudioService mp3 확장자 지원 - 설정 텍스트 l10n 추가
This commit is contained in:
JiWoong Sul
553
lib/src/features/game/widgets/help_dialog.dart
Normal file
553
lib/src/features/game/widgets/help_dialog.dart
Normal file
@@ -0,0 +1,553 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
/// 도움말 다이얼로그 (Help Dialog)
|
||||
///
|
||||
/// 게임 메카닉과 UI 설명을 제공
|
||||
class HelpDialog extends StatefulWidget {
|
||||
const HelpDialog({super.key});
|
||||
|
||||
/// 다이얼로그 표시
|
||||
static Future<void> show(BuildContext context) {
|
||||
return showDialog(
|
||||
context: context,
|
||||
builder: (_) => const HelpDialog(),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
State<HelpDialog> createState() => _HelpDialogState();
|
||||
}
|
||||
|
||||
class _HelpDialogState extends State<HelpDialog>
|
||||
with SingleTickerProviderStateMixin {
|
||||
late TabController _tabController;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_tabController = TabController(length: 4, vsync: this);
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_tabController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
final isKorean = Localizations.localeOf(context).languageCode == 'ko';
|
||||
final isJapanese = Localizations.localeOf(context).languageCode == 'ja';
|
||||
|
||||
return Dialog(
|
||||
child: Container(
|
||||
constraints: const BoxConstraints(maxWidth: 500, maxHeight: 600),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
// 헤더
|
||||
Container(
|
||||
padding: const EdgeInsets.all(16),
|
||||
decoration: BoxDecoration(
|
||||
color: theme.colorScheme.primaryContainer,
|
||||
borderRadius: const BorderRadius.vertical(
|
||||
top: Radius.circular(28),
|
||||
),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(
|
||||
Icons.help_outline,
|
||||
color: theme.colorScheme.onPrimaryContainer,
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: Text(
|
||||
isKorean
|
||||
? '게임 도움말'
|
||||
: isJapanese
|
||||
? 'ゲームヘルプ'
|
||||
: 'Game Help',
|
||||
style: theme.textTheme.titleLarge?.copyWith(
|
||||
color: theme.colorScheme.onPrimaryContainer,
|
||||
),
|
||||
),
|
||||
),
|
||||
IconButton(
|
||||
icon: const Icon(Icons.close),
|
||||
onPressed: () => Navigator.of(context).pop(),
|
||||
color: theme.colorScheme.onPrimaryContainer,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
// 탭 바
|
||||
TabBar(
|
||||
controller: _tabController,
|
||||
isScrollable: true,
|
||||
tabs: [
|
||||
Tab(
|
||||
text: isKorean
|
||||
? '기본'
|
||||
: isJapanese
|
||||
? '基本'
|
||||
: 'Basics',
|
||||
),
|
||||
Tab(
|
||||
text: isKorean
|
||||
? '전투'
|
||||
: isJapanese
|
||||
? '戦闘'
|
||||
: 'Combat',
|
||||
),
|
||||
Tab(
|
||||
text: isKorean
|
||||
? '스킬'
|
||||
: isJapanese
|
||||
? 'スキル'
|
||||
: 'Skills',
|
||||
),
|
||||
Tab(
|
||||
text: isKorean
|
||||
? 'UI'
|
||||
: isJapanese
|
||||
? 'UI'
|
||||
: 'UI',
|
||||
),
|
||||
],
|
||||
),
|
||||
// 탭 내용
|
||||
Expanded(
|
||||
child: TabBarView(
|
||||
controller: _tabController,
|
||||
children: [
|
||||
_BasicsHelpView(
|
||||
isKorean: isKorean,
|
||||
isJapanese: isJapanese,
|
||||
),
|
||||
_CombatHelpView(
|
||||
isKorean: isKorean,
|
||||
isJapanese: isJapanese,
|
||||
),
|
||||
_SkillsHelpView(
|
||||
isKorean: isKorean,
|
||||
isJapanese: isJapanese,
|
||||
),
|
||||
_UIHelpView(
|
||||
isKorean: isKorean,
|
||||
isJapanese: isJapanese,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// 기본 도움말 뷰
|
||||
class _BasicsHelpView extends StatelessWidget {
|
||||
const _BasicsHelpView({
|
||||
required this.isKorean,
|
||||
required this.isJapanese,
|
||||
});
|
||||
|
||||
final bool isKorean;
|
||||
final bool isJapanese;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return ListView(
|
||||
padding: const EdgeInsets.all(16),
|
||||
children: [
|
||||
_HelpSection(
|
||||
icon: Icons.info_outline,
|
||||
title: isKorean
|
||||
? '게임 소개'
|
||||
: isJapanese
|
||||
? 'ゲーム紹介'
|
||||
: 'About the Game',
|
||||
content: isKorean
|
||||
? 'Askii Never Die는 자동 진행 RPG입니다. 캐릭터가 자동으로 몬스터와 싸우고, '
|
||||
'퀘스트를 완료하며, 레벨업합니다. 여러분은 장비와 스킬을 관리하면 됩니다.'
|
||||
: isJapanese
|
||||
? 'Askii Never Dieは自動進行RPGです。キャラクターが自動でモンスターと戦い、'
|
||||
'クエストを完了し、レベルアップします。装備とスキルの管理だけで大丈夫です。'
|
||||
: 'Askii Never Die is an idle RPG. Your character automatically fights monsters, '
|
||||
'completes quests, and levels up. You manage equipment and skills.',
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
_HelpSection(
|
||||
icon: Icons.trending_up,
|
||||
title: isKorean
|
||||
? '진행 방식'
|
||||
: isJapanese
|
||||
? '進行方式'
|
||||
: 'Progression',
|
||||
content: isKorean
|
||||
? '• 몬스터 처치 → 전리품 획득 → 장비 업그레이드\n'
|
||||
'• 경험치 획득 → 레벨업 → 스탯 상승\n'
|
||||
'• 퀘스트 완료 → 보상 획득\n'
|
||||
'• 플롯 진행 → 새로운 Act 해금'
|
||||
: isJapanese
|
||||
? '• モンスター討伐 → 戦利品獲得 → 装備アップグレード\n'
|
||||
'• 経験値獲得 → レベルアップ → ステータス上昇\n'
|
||||
'• クエスト完了 → 報酬獲得\n'
|
||||
'• プロット進行 → 新しいAct解放'
|
||||
: '• Kill monsters → Get loot → Upgrade equipment\n'
|
||||
'• Gain XP → Level up → Stats increase\n'
|
||||
'• Complete quests → Get rewards\n'
|
||||
'• Progress plot → Unlock new Acts',
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
_HelpSection(
|
||||
icon: Icons.save,
|
||||
title: isKorean
|
||||
? '저장'
|
||||
: isJapanese
|
||||
? 'セーブ'
|
||||
: 'Saving',
|
||||
content: isKorean
|
||||
? '게임은 자동으로 저장됩니다. 레벨업, 퀘스트 완료, Act 진행 시 자동 저장됩니다. '
|
||||
'뒤로 가기 시 저장 여부를 선택할 수 있습니다.'
|
||||
: isJapanese
|
||||
? 'ゲームは自動保存されます。レベルアップ、クエスト完了、Act進行時に自動保存されます。'
|
||||
'戻る時に保存するかどうか選択できます。'
|
||||
: 'The game auto-saves. It saves on level up, quest completion, and Act progression. '
|
||||
'When exiting, you can choose whether to save.',
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// 전투 도움말 뷰
|
||||
class _CombatHelpView extends StatelessWidget {
|
||||
const _CombatHelpView({
|
||||
required this.isKorean,
|
||||
required this.isJapanese,
|
||||
});
|
||||
|
||||
final bool isKorean;
|
||||
final bool isJapanese;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return ListView(
|
||||
padding: const EdgeInsets.all(16),
|
||||
children: [
|
||||
_HelpSection(
|
||||
icon: Icons.sports_mma,
|
||||
title: isKorean
|
||||
? '전투 시스템'
|
||||
: isJapanese
|
||||
? '戦闘システム'
|
||||
: 'Combat System',
|
||||
content: isKorean
|
||||
? '전투는 자동으로 진행됩니다. 플레이어와 몬스터가 번갈아 공격하며, '
|
||||
'공격 속도(Attack Speed)에 따라 공격 빈도가 결정됩니다.'
|
||||
: isJapanese
|
||||
? '戦闘は自動で進行します。プレイヤーとモンスターが交互に攻撃し、'
|
||||
'攻撃速度(Attack Speed)によって攻撃頻度が決まります。'
|
||||
: 'Combat is automatic. Player and monster take turns attacking, '
|
||||
'with attack frequency based on Attack Speed.',
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
_HelpSection(
|
||||
icon: Icons.shield,
|
||||
title: isKorean
|
||||
? '방어 메카닉'
|
||||
: isJapanese
|
||||
? '防御メカニック'
|
||||
: 'Defense Mechanics',
|
||||
content: isKorean
|
||||
? '• 회피(Evasion): DEX 기반, 공격을 완전히 피함\n'
|
||||
'• 방패 방어(Block): 방패 장착 시, 피해 감소\n'
|
||||
'• 무기 쳐내기(Parry): 무기로 공격 일부 막음\n'
|
||||
'• 방어력(DEF): 모든 피해에서 차감'
|
||||
: isJapanese
|
||||
? '• 回避(Evasion): DEX基準、攻撃を完全に回避\n'
|
||||
'• 盾防御(Block): 盾装備時、ダメージ軽減\n'
|
||||
'• 武器受け流し(Parry): 武器で攻撃を一部防ぐ\n'
|
||||
'• 防御力(DEF): 全ダメージから差し引き'
|
||||
: '• Evasion: DEX-based, completely avoid attacks\n'
|
||||
'• Block: With shield, reduce damage\n'
|
||||
'• Parry: Deflect some damage with weapon\n'
|
||||
'• DEF: Subtracted from all damage',
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
_HelpSection(
|
||||
icon: Icons.favorite,
|
||||
title: isKorean
|
||||
? '사망과 부활'
|
||||
: isJapanese
|
||||
? '死亡と復活'
|
||||
: 'Death & Revival',
|
||||
content: isKorean
|
||||
? 'HP가 0이 되면 사망합니다. 사망 시 장비 하나를 제물로 바쳐 부활할 수 있습니다. '
|
||||
'부활 후 HP/MP가 완전 회복되고 빈 장비 슬롯에 기본 장비가 지급됩니다.'
|
||||
: isJapanese
|
||||
? 'HPが0になると死亡します。死亡時に装備1つを捧げて復活できます。'
|
||||
'復活後HP/MPが完全回復し、空の装備スロットに基本装備が支給されます。'
|
||||
: 'You die when HP reaches 0. Sacrifice one equipment piece to revive. '
|
||||
'After revival, HP/MP fully restore and empty slots get basic equipment.',
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// 스킬 도움말 뷰
|
||||
class _SkillsHelpView extends StatelessWidget {
|
||||
const _SkillsHelpView({
|
||||
required this.isKorean,
|
||||
required this.isJapanese,
|
||||
});
|
||||
|
||||
final bool isKorean;
|
||||
final bool isJapanese;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return ListView(
|
||||
padding: const EdgeInsets.all(16),
|
||||
children: [
|
||||
_HelpSection(
|
||||
icon: Icons.auto_awesome,
|
||||
title: isKorean
|
||||
? '스킬 종류'
|
||||
: isJapanese
|
||||
? 'スキル種類'
|
||||
: 'Skill Types',
|
||||
content: isKorean
|
||||
? '• 공격(Attack): 적에게 직접 피해\n'
|
||||
'• 회복(Heal): HP/MP 회복\n'
|
||||
'• 버프(Buff): 자신에게 유리한 효과\n'
|
||||
'• 디버프(Debuff): 적에게 불리한 효과\n'
|
||||
'• DOT: 시간에 걸쳐 지속 피해'
|
||||
: isJapanese
|
||||
? '• 攻撃(Attack): 敵に直接ダメージ\n'
|
||||
'• 回復(Heal): HP/MP回復\n'
|
||||
'• バフ(Buff): 自分に有利な効果\n'
|
||||
'• デバフ(Debuff): 敵に不利な効果\n'
|
||||
'• DOT: 時間経過でダメージ'
|
||||
: '• Attack: Deal direct damage\n'
|
||||
'• Heal: Restore HP/MP\n'
|
||||
'• Buff: Beneficial effects on self\n'
|
||||
'• Debuff: Harmful effects on enemies\n'
|
||||
'• DOT: Damage over time',
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
_HelpSection(
|
||||
icon: Icons.psychology,
|
||||
title: isKorean
|
||||
? '자동 스킬 선택'
|
||||
: isJapanese
|
||||
? '自動スキル選択'
|
||||
: 'Auto Skill Selection',
|
||||
content: isKorean
|
||||
? '스킬은 AI가 자동으로 선택합니다:\n'
|
||||
'1. HP 낮음 → 회복 스킬 우선\n'
|
||||
'2. HP/MP 충분 → 버프 스킬 사용\n'
|
||||
'3. 몬스터 HP 높음 → 디버프 적용\n'
|
||||
'4. 공격 스킬로 마무리'
|
||||
: isJapanese
|
||||
? 'スキルはAIが自動選択します：\n'
|
||||
'1. HP低い → 回復スキル優先\n'
|
||||
'2. HP/MP十分 → バフスキル使用\n'
|
||||
'3. モンスターHP高い → デバフ適用\n'
|
||||
'4. 攻撃スキルで仕上げ'
|
||||
: 'Skills are auto-selected by AI:\n'
|
||||
'1. Low HP → Heal skills priority\n'
|
||||
'2. HP/MP sufficient → Use buff skills\n'
|
||||
'3. Monster HP high → Apply debuffs\n'
|
||||
'4. Finish with attack skills',
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
_HelpSection(
|
||||
icon: Icons.upgrade,
|
||||
title: isKorean
|
||||
? '스킬 랭크'
|
||||
: isJapanese
|
||||
? 'スキルランク'
|
||||
: 'Skill Ranks',
|
||||
content: isKorean
|
||||
? '스킬은 I ~ IX 랭크가 있습니다. 랭크가 높을수록:\n'
|
||||
'• 데미지/회복량 증가\n'
|
||||
'• MP 소모량 증가\n'
|
||||
'• 쿨타임 증가\n'
|
||||
'레벨업 시 랜덤하게 스킬을 배웁니다.'
|
||||
: isJapanese
|
||||
? 'スキルにはI~IXランクがあります。ランクが高いほど：\n'
|
||||
'• ダメージ/回復量増加\n'
|
||||
'• MP消費量増加\n'
|
||||
'• クールタイム増加\n'
|
||||
'レベルアップ時にランダムでスキルを習得します。'
|
||||
: 'Skills have ranks I~IX. Higher rank means:\n'
|
||||
'• More damage/healing\n'
|
||||
'• More MP cost\n'
|
||||
'• Longer cooldown\n'
|
||||
'Learn random skills on level up.',
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// UI 도움말 뷰
|
||||
class _UIHelpView extends StatelessWidget {
|
||||
const _UIHelpView({
|
||||
required this.isKorean,
|
||||
required this.isJapanese,
|
||||
});
|
||||
|
||||
final bool isKorean;
|
||||
final bool isJapanese;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return ListView(
|
||||
padding: const EdgeInsets.all(16),
|
||||
children: [
|
||||
_HelpSection(
|
||||
icon: Icons.view_column,
|
||||
title: isKorean
|
||||
? '화면 구성'
|
||||
: isJapanese
|
||||
? '画面構成'
|
||||
: 'Screen Layout',
|
||||
content: isKorean
|
||||
? '• 상단: 전투 애니메이션, 태스크 진행바\n'
|
||||
'• 좌측: 캐릭터 정보, HP/MP, 스탯\n'
|
||||
'• 중앙: 장비, 인벤토리\n'
|
||||
'• 우측: 플롯/퀘스트 진행, 스펠북'
|
||||
: isJapanese
|
||||
? '• 上部: 戦闘アニメーション、タスク進行バー\n'
|
||||
'• 左側: キャラクター情報、HP/MP、ステータス\n'
|
||||
'• 中央: 装備、インベントリ\n'
|
||||
'• 右側: プロット/クエスト進行、スペルブック'
|
||||
: '• Top: Combat animation, task progress bar\n'
|
||||
'• Left: Character info, HP/MP, stats\n'
|
||||
'• Center: Equipment, inventory\n'
|
||||
'• Right: Plot/quest progress, spellbook',
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
_HelpSection(
|
||||
icon: Icons.speed,
|
||||
title: isKorean
|
||||
? '속도 조절'
|
||||
: isJapanese
|
||||
? '速度調整'
|
||||
: 'Speed Control',
|
||||
content: isKorean
|
||||
? '태스크 진행바 옆 속도 버튼으로 게임 속도를 조절할 수 있습니다:\n'
|
||||
'• 1x: 기본 속도\n'
|
||||
'• 2x: 2배 속도\n'
|
||||
'• 5x: 5배 속도\n'
|
||||
'• 10x: 10배 속도'
|
||||
: isJapanese
|
||||
? 'タスク進行バー横の速度ボタンでゲーム速度を調整できます：\n'
|
||||
'• 1x: 基本速度\n'
|
||||
'• 2x: 2倍速\n'
|
||||
'• 5x: 5倍速\n'
|
||||
'• 10x: 10倍速'
|
||||
: 'Use the speed button next to task bar to adjust game speed:\n'
|
||||
'• 1x: Normal speed\n'
|
||||
'• 2x: 2x speed\n'
|
||||
'• 5x: 5x speed\n'
|
||||
'• 10x: 10x speed',
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
_HelpSection(
|
||||
icon: Icons.pause,
|
||||
title: isKorean
|
||||
? '일시정지'
|
||||
: isJapanese
|
||||
? '一時停止'
|
||||
: 'Pause',
|
||||
content: isKorean
|
||||
? '일시정지 버튼으로 게임을 멈출 수 있습니다. '
|
||||
'일시정지 중에도 UI를 확인하고 설정을 변경할 수 있습니다.'
|
||||
: isJapanese
|
||||
? '一時停止ボタンでゲームを止められます。'
|
||||
'一時停止中もUIを確認し設定を変更できます。'
|
||||
: 'Use the pause button to stop the game. '
|
||||
'You can still view UI and change settings while paused.',
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
_HelpSection(
|
||||
icon: Icons.bar_chart,
|
||||
title: isKorean
|
||||
? '통계'
|
||||
: isJapanese
|
||||
? '統計'
|
||||
: 'Statistics',
|
||||
content: isKorean
|
||||
? '통계 버튼에서 현재 세션과 누적 게임 통계를 확인할 수 있습니다. '
|
||||
'처치한 몬스터, 획득 골드, 플레이 시간 등을 추적합니다.'
|
||||
: isJapanese
|
||||
? '統計ボタンで現在のセッションと累積ゲーム統計を確認できます。'
|
||||
'倒したモンスター、獲得ゴールド、プレイ時間などを追跡します。'
|
||||
: 'View current session and cumulative stats in the statistics button. '
|
||||
'Track monsters killed, gold earned, play time, etc.',
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// 도움말 섹션 위젯
|
||||
class _HelpSection extends StatelessWidget {
|
||||
const _HelpSection({
|
||||
required this.icon,
|
||||
required this.title,
|
||||
required this.content,
|
||||
});
|
||||
|
||||
final IconData icon;
|
||||
final String title;
|
||||
final String content;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// 섹션 헤더
|
||||
Row(
|
||||
children: [
|
||||
Icon(icon, size: 20, color: theme.colorScheme.primary),
|
||||
const SizedBox(width: 8),
|
||||
Text(
|
||||
title,
|
||||
style: theme.textTheme.titleMedium?.copyWith(
|
||||
fontWeight: FontWeight.bold,
|
||||
color: theme.colorScheme.primary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
// 내용
|
||||
Container(
|
||||
padding: const EdgeInsets.all(12),
|
||||
decoration: BoxDecoration(
|
||||
color: theme.colorScheme.surfaceContainerHighest.withValues(alpha: 0.5),
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
),
|
||||
child: Text(
|
||||
content,
|
||||
style: theme.textTheme.bodyMedium?.copyWith(
|
||||
height: 1.5,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user