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

feat(ui): 게임 위젯들 레트로 UI 적용

Browse Source 
- death_overlay: 사망 화면 레트로 스타일로 재디자인
- help_dialog: RetroDialog 사용으로 통일
- hp_mp_bar: 레트로 프로그레스 바 스타일 적용
- notification_overlay: 레트로 패널 스타일 적용
- statistics_dialog: RetroDialog로 변경
This commit is contained in:
JiWoong Sul
2025-12-30 19:03:52 +09:00
parent af837fde8a
commit 27e05fb3c1
5 changed files with 742 additions and 605 deletions
Download Patch File Download Diff File Expand all files Collapse all files

232
lib/src/features/game/widgets/help_dialog.dart
View File

@@ -1,5 +1,8 @@
import 'package:flutter/material.dart';
import 'package:askiineverdie/src/shared/retro_colors.dart';
import 'package:askiineverdie/src/shared/widgets/retro_dialog.dart';
/// 도움말 다이얼로그 (Help Dialog)
///
/// 게임 메카닉과 UI 설명을 제공
@@ -10,6 +13,7 @@ class HelpDialog extends StatefulWidget {
static Future<void> show(BuildContext context) {
return showDialog(
context: context,
barrierColor: Colors.black87,
builder: (_) => const HelpDialog(),
);
}
@@ -36,113 +40,58 @@ class _HelpDialogState extends State<HelpDialog>
@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(
final title = isKorean
? '도움말'
: isJapanese
? 'ヘルプ'
: 'Help';
final tabs = isKorean
? ['기본', '전투', '스킬', 'UI']
: isJapanese
? ['基本', '戦闘', 'スキル', 'UI']
: ['Basics', 'Combat', 'Skills', 'UI'];
return RetroDialog(
title: title,
titleIcon: '❓',
accentColor: RetroColors.mpBlue,
child: Column(
children: [
// 탭 바
RetroTabBar(
controller: _tabController,
tabs: tabs,
accentColor: RetroColors.mpBlue,
),
// 탭 내용
Expanded(
child: TabBarView(
controller: _tabController,
isScrollable: true,
tabs: [
Tab(
text: isKorean
? '기본'
: isJapanese
? '基本'
: 'Basics',
children: [
_BasicsHelpView(
isKorean: isKorean,
isJapanese: isJapanese,
),
Tab(
text: isKorean
? '전투'
: isJapanese
? '戦闘'
: 'Combat',
_CombatHelpView(
isKorean: isKorean,
isJapanese: isJapanese,
),
Tab(
text: isKorean
? '스킬'
: isJapanese
? 'スキル'
: 'Skills',
_SkillsHelpView(
isKorean: isKorean,
isJapanese: isJapanese,
),
Tab(
text: isKorean
? 'UI'
: isJapanese
? 'UI'
: 'UI',
_UIHelpView(
isKorean: isKorean,
isJapanese: isJapanese,
),
],
),
// 탭 내용
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,
),
],
),
),
],
),
),
],
),
);
}
@@ -161,10 +110,10 @@ class _BasicsHelpView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView(
padding: const EdgeInsets.all(16),
padding: const EdgeInsets.all(12),
children: [
_HelpSection(
icon: Icons.info_outline,
icon: 'ℹ',
title: isKorean
? '게임 소개'
: isJapanese
@@ -179,9 +128,9 @@ class _BasicsHelpView extends StatelessWidget {
: '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),
const SizedBox(height: 12),
_HelpSection(
icon: Icons.trending_up,
icon: '↑',
title: isKorean
? '진행 방식'
: isJapanese
@@ -202,9 +151,9 @@ class _BasicsHelpView extends StatelessWidget {
'• Complete quests → Get rewards\n'
'• Progress plot → Unlock new Acts',
),
const SizedBox(height: 16),
const SizedBox(height: 12),
_HelpSection(
icon: Icons.save,
icon: '💾',
title: isKorean
? '저장'
: isJapanese
@@ -237,10 +186,10 @@ class _CombatHelpView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView(
padding: const EdgeInsets.all(16),
padding: const EdgeInsets.all(12),
children: [
_HelpSection(
icon: Icons.sports_mma,
icon: '⚔',
title: isKorean
? '전투 시스템'
: isJapanese
@@ -255,9 +204,9 @@ class _CombatHelpView extends StatelessWidget {
: 'Combat is automatic. Player and monster take turns attacking, '
'with attack frequency based on Attack Speed.',
),
const SizedBox(height: 16),
const SizedBox(height: 12),
_HelpSection(
icon: Icons.shield,
icon: '🛡',
title: isKorean
? '방어 메카닉'
: isJapanese
@@ -278,9 +227,9 @@ class _CombatHelpView extends StatelessWidget {
'• Parry: Deflect some damage with weapon\n'
'• DEF: Subtracted from all damage',
),
const SizedBox(height: 16),
const SizedBox(height: 12),
_HelpSection(
icon: Icons.favorite,
icon: '♥',
title: isKorean
? '사망과 부활'
: isJapanese
@@ -313,10 +262,10 @@ class _SkillsHelpView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView(
padding: const EdgeInsets.all(16),
padding: const EdgeInsets.all(12),
children: [
_HelpSection(
icon: Icons.auto_awesome,
icon: '✧',
title: isKorean
? '스킬 종류'
: isJapanese
@@ -340,9 +289,9 @@ class _SkillsHelpView extends StatelessWidget {
'• Debuff: Harmful effects on enemies\n'
'• DOT: Damage over time',
),
const SizedBox(height: 16),
const SizedBox(height: 12),
_HelpSection(
icon: Icons.psychology,
icon: '🤖',
title: isKorean
? '자동 스킬 선택'
: isJapanese
@@ -366,9 +315,9 @@ class _SkillsHelpView extends StatelessWidget {
'3. Monster HP high → Apply debuffs\n'
'4. Finish with attack skills',
),
const SizedBox(height: 16),
const SizedBox(height: 12),
_HelpSection(
icon: Icons.upgrade,
icon: '★',
title: isKorean
? '스킬 랭크'
: isJapanese
@@ -410,10 +359,10 @@ class _UIHelpView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ListView(
padding: const EdgeInsets.all(16),
padding: const EdgeInsets.all(12),
children: [
_HelpSection(
icon: Icons.view_column,
icon: '📺',
title: isKorean
? '화면 구성'
: isJapanese
@@ -434,9 +383,9 @@ class _UIHelpView extends StatelessWidget {
'• Center: Equipment, inventory\n'
'• Right: Plot/quest progress, spellbook',
),
const SizedBox(height: 16),
const SizedBox(height: 12),
_HelpSection(
icon: Icons.speed,
icon: '⏩',
title: isKorean
? '속도 조절'
: isJapanese
@@ -460,9 +409,9 @@ class _UIHelpView extends StatelessWidget {
'• 5x: 5x speed\n'
'• 10x: 10x speed',
),
const SizedBox(height: 16),
const SizedBox(height: 12),
_HelpSection(
icon: Icons.pause,
icon: '⏸',
title: isKorean
? '일시정지'
: isJapanese
@@ -477,9 +426,9 @@ class _UIHelpView extends StatelessWidget {
: 'Use the pause button to stop the game. '
'You can still view UI and change settings while paused.',
),
const SizedBox(height: 16),
const SizedBox(height: 12),
_HelpSection(
icon: Icons.bar_chart,
icon: '📊',
title: isKorean
? '통계'
: isJapanese
@@ -499,7 +448,7 @@ class _UIHelpView extends StatelessWidget {
}
}
/// 도움말 섹션 위젯
/// 레트로 스타일 도움말 섹션 위젯
class _HelpSection extends StatelessWidget {
const _HelpSection({
required this.icon,
@@ -507,46 +456,23 @@ class _HelpSection extends StatelessWidget {
required this.content,
});
final IconData icon;
final String 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,
),
),
],
RetroSectionHeader(
title: title,
icon: icon,
accentColor: RetroColors.mpBlue,
),
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,
),
),
),
RetroInfoBox(content: content),
],
);
}