feat(ui): 게임 위젯들 레트로 UI 적용
- death_overlay: 사망 화면 레트로 스타일로 재디자인 - help_dialog: RetroDialog 사용으로 통일 - hp_mp_bar: 레트로 프로그레스 바 스타일 적용 - notification_overlay: 레트로 패널 스타일 적용 - statistics_dialog: RetroDialog로 변경
This commit is contained in:
JiWoong Sul
@@ -1,6 +1,8 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
import 'package:askiineverdie/src/core/model/game_statistics.dart';
|
||||
import 'package:askiineverdie/src/shared/retro_colors.dart';
|
||||
import 'package:askiineverdie/src/shared/widgets/retro_dialog.dart';
|
||||
|
||||
/// 게임 통계 다이얼로그 (Statistics Dialog)
|
||||
///
|
||||
@@ -23,6 +25,7 @@ class StatisticsDialog extends StatefulWidget {
|
||||
}) {
|
||||
return showDialog(
|
||||
context: context,
|
||||
barrierColor: Colors.black87,
|
||||
builder: (_) => StatisticsDialog(
|
||||
session: session,
|
||||
cumulative: cumulative,
|
||||
@@ -52,84 +55,46 @@ class _StatisticsDialogState extends State<StatisticsDialog>
|
||||
|
||||
@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: 400, maxHeight: 500),
|
||||
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.bar_chart,
|
||||
color: theme.colorScheme.onPrimaryContainer,
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: Text(
|
||||
isKorean
|
||||
? '게임 통계'
|
||||
: isJapanese
|
||||
? 'ゲーム統計'
|
||||
: 'Game Statistics',
|
||||
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
|
||||
? '統計'
|
||||
: 'Statistics';
|
||||
|
||||
final tabs = isKorean
|
||||
? ['세션', '누적']
|
||||
: isJapanese
|
||||
? ['セッション', '累積']
|
||||
: ['Session', 'Total'];
|
||||
|
||||
return RetroDialog(
|
||||
title: title,
|
||||
titleIcon: '📊',
|
||||
maxWidth: 420,
|
||||
maxHeight: 520,
|
||||
accentColor: RetroColors.gold,
|
||||
child: Column(
|
||||
children: [
|
||||
// 탭 바
|
||||
RetroTabBar(
|
||||
controller: _tabController,
|
||||
tabs: tabs,
|
||||
accentColor: RetroColors.gold,
|
||||
),
|
||||
// 탭 내용
|
||||
Expanded(
|
||||
child: TabBarView(
|
||||
controller: _tabController,
|
||||
tabs: [
|
||||
Tab(
|
||||
text: isKorean
|
||||
? '현재 세션'
|
||||
: isJapanese
|
||||
? '現在のセッション'
|
||||
: 'Session',
|
||||
),
|
||||
Tab(
|
||||
text: isKorean
|
||||
? '누적 통계'
|
||||
: isJapanese
|
||||
? '累積統計'
|
||||
: 'Cumulative',
|
||||
),
|
||||
children: [
|
||||
_SessionStatisticsView(stats: widget.session),
|
||||
_CumulativeStatisticsView(stats: widget.cumulative),
|
||||
],
|
||||
),
|
||||
// 탭 내용
|
||||
Expanded(
|
||||
child: TabBarView(
|
||||
controller: _tabController,
|
||||
children: [
|
||||
_SessionStatisticsView(stats: widget.session),
|
||||
_CumulativeStatisticsView(stats: widget.cumulative),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
@@ -147,7 +112,7 @@ class _SessionStatisticsView extends StatelessWidget {
|
||||
final isJapanese = Localizations.localeOf(context).languageCode == 'ja';
|
||||
|
||||
return ListView(
|
||||
padding: const EdgeInsets.all(16),
|
||||
padding: const EdgeInsets.all(12),
|
||||
children: [
|
||||
_StatSection(
|
||||
title: isKorean
|
||||
@@ -155,7 +120,7 @@ class _SessionStatisticsView extends StatelessWidget {
|
||||
: isJapanese
|
||||
? '戦闘'
|
||||
: 'Combat',
|
||||
icon: Icons.sports_mma,
|
||||
icon: '⚔',
|
||||
items: [
|
||||
_StatItem(
|
||||
label: isKorean
|
||||
@@ -191,14 +156,14 @@ class _SessionStatisticsView extends StatelessWidget {
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
const SizedBox(height: 12),
|
||||
_StatSection(
|
||||
title: isKorean
|
||||
? '데미지'
|
||||
: isJapanese
|
||||
? 'ダメージ'
|
||||
: 'Damage',
|
||||
icon: Icons.flash_on,
|
||||
icon: '⚡',
|
||||
items: [
|
||||
_StatItem(
|
||||
label: isKorean
|
||||
@@ -226,14 +191,14 @@ class _SessionStatisticsView extends StatelessWidget {
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
const SizedBox(height: 12),
|
||||
_StatSection(
|
||||
title: isKorean
|
||||
? '스킬'
|
||||
: isJapanese
|
||||
? 'スキル'
|
||||
: 'Skills',
|
||||
icon: Icons.auto_awesome,
|
||||
icon: '✧',
|
||||
items: [
|
||||
_StatItem(
|
||||
label: isKorean
|
||||
@@ -269,14 +234,14 @@ class _SessionStatisticsView extends StatelessWidget {
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
const SizedBox(height: 12),
|
||||
_StatSection(
|
||||
title: isKorean
|
||||
? '경제'
|
||||
: isJapanese
|
||||
? '経済'
|
||||
: 'Economy',
|
||||
icon: Icons.monetization_on,
|
||||
icon: '💰',
|
||||
items: [
|
||||
_StatItem(
|
||||
label: isKorean
|
||||
@@ -312,14 +277,14 @@ class _SessionStatisticsView extends StatelessWidget {
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
const SizedBox(height: 12),
|
||||
_StatSection(
|
||||
title: isKorean
|
||||
? '진행'
|
||||
: isJapanese
|
||||
? '進行'
|
||||
: 'Progress',
|
||||
icon: Icons.trending_up,
|
||||
icon: '↑',
|
||||
items: [
|
||||
_StatItem(
|
||||
label: isKorean
|
||||
@@ -356,7 +321,7 @@ class _CumulativeStatisticsView extends StatelessWidget {
|
||||
final isJapanese = Localizations.localeOf(context).languageCode == 'ja';
|
||||
|
||||
return ListView(
|
||||
padding: const EdgeInsets.all(16),
|
||||
padding: const EdgeInsets.all(12),
|
||||
children: [
|
||||
_StatSection(
|
||||
title: isKorean
|
||||
@@ -364,7 +329,7 @@ class _CumulativeStatisticsView extends StatelessWidget {
|
||||
: isJapanese
|
||||
? '記録'
|
||||
: 'Records',
|
||||
icon: Icons.emoji_events,
|
||||
icon: '🏆',
|
||||
items: [
|
||||
_StatItem(
|
||||
label: isKorean
|
||||
@@ -395,14 +360,14 @@ class _CumulativeStatisticsView extends StatelessWidget {
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
const SizedBox(height: 12),
|
||||
_StatSection(
|
||||
title: isKorean
|
||||
? '총 플레이'
|
||||
: isJapanese
|
||||
? '総プレイ'
|
||||
: 'Total Play',
|
||||
icon: Icons.access_time,
|
||||
icon: '⏱',
|
||||
items: [
|
||||
_StatItem(
|
||||
label: isKorean
|
||||
@@ -438,14 +403,14 @@ class _CumulativeStatisticsView extends StatelessWidget {
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
const SizedBox(height: 12),
|
||||
_StatSection(
|
||||
title: isKorean
|
||||
? '총 전투'
|
||||
: isJapanese
|
||||
? '総戦闘'
|
||||
: 'Total Combat',
|
||||
icon: Icons.sports_mma,
|
||||
icon: '⚔',
|
||||
items: [
|
||||
_StatItem(
|
||||
label: isKorean
|
||||
@@ -481,14 +446,14 @@ class _CumulativeStatisticsView extends StatelessWidget {
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
const SizedBox(height: 12),
|
||||
_StatSection(
|
||||
title: isKorean
|
||||
? '총 데미지'
|
||||
: isJapanese
|
||||
? '総ダメージ'
|
||||
: 'Total Damage',
|
||||
icon: Icons.flash_on,
|
||||
icon: '⚡',
|
||||
items: [
|
||||
_StatItem(
|
||||
label: isKorean
|
||||
@@ -508,14 +473,14 @@ class _CumulativeStatisticsView extends StatelessWidget {
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
const SizedBox(height: 12),
|
||||
_StatSection(
|
||||
title: isKorean
|
||||
? '총 스킬'
|
||||
: isJapanese
|
||||
? '総スキル'
|
||||
: 'Total Skills',
|
||||
icon: Icons.auto_awesome,
|
||||
icon: '✧',
|
||||
items: [
|
||||
_StatItem(
|
||||
label: isKorean
|
||||
@@ -535,14 +500,14 @@ class _CumulativeStatisticsView extends StatelessWidget {
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
const SizedBox(height: 12),
|
||||
_StatSection(
|
||||
title: isKorean
|
||||
? '총 경제'
|
||||
: isJapanese
|
||||
? '総経済'
|
||||
: 'Total Economy',
|
||||
icon: Icons.monetization_on,
|
||||
icon: '💰',
|
||||
items: [
|
||||
_StatItem(
|
||||
label: isKorean
|
||||
@@ -591,7 +556,7 @@ class _CumulativeStatisticsView extends StatelessWidget {
|
||||
}
|
||||
}
|
||||
|
||||
/// 통계 섹션 위젯
|
||||
/// 레트로 스타일 통계 섹션 위젯
|
||||
class _StatSection extends StatelessWidget {
|
||||
const _StatSection({
|
||||
required this.title,
|
||||
@@ -600,31 +565,20 @@ class _StatSection extends StatelessWidget {
|
||||
});
|
||||
|
||||
final String title;
|
||||
final IconData icon;
|
||||
final String icon;
|
||||
final List<_StatItem> items;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
// 섹션 헤더
|
||||
Row(
|
||||
children: [
|
||||
Icon(icon, size: 18, color: theme.colorScheme.primary),
|
||||
const SizedBox(width: 8),
|
||||
Text(
|
||||
title,
|
||||
style: theme.textTheme.titleSmall?.copyWith(
|
||||
fontWeight: FontWeight.bold,
|
||||
color: theme.colorScheme.primary,
|
||||
),
|
||||
),
|
||||
],
|
||||
RetroSectionHeader(
|
||||
title: title,
|
||||
icon: icon,
|
||||
accentColor: RetroColors.gold,
|
||||
),
|
||||
const Divider(height: 8),
|
||||
// 통계 항목들
|
||||
...items,
|
||||
],
|
||||
@@ -632,7 +586,7 @@ class _StatSection extends StatelessWidget {
|
||||
}
|
||||
}
|
||||
|
||||
/// 개별 통계 항목 위젯
|
||||
/// 레트로 스타일 개별 통계 항목 위젯
|
||||
class _StatItem extends StatelessWidget {
|
||||
const _StatItem({
|
||||
required this.label,
|
||||
@@ -646,42 +600,11 @@ class _StatItem extends StatelessWidget {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 4),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Text(
|
||||
label,
|
||||
style: theme.textTheme.bodyMedium?.copyWith(
|
||||
color: theme.colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
Container(
|
||||
padding: highlight
|
||||
? const EdgeInsets.symmetric(horizontal: 8, vertical: 2)
|
||||
: null,
|
||||
decoration: highlight
|
||||
? BoxDecoration(
|
||||
color: theme.colorScheme.primaryContainer,
|
||||
borderRadius: BorderRadius.circular(4),
|
||||
)
|
||||
: null,
|
||||
child: Text(
|
||||
value,
|
||||
style: theme.textTheme.bodyMedium?.copyWith(
|
||||
fontWeight: FontWeight.bold,
|
||||
fontFamily: 'monospace',
|
||||
color: highlight
|
||||
? theme.colorScheme.onPrimaryContainer
|
||||
: theme.colorScheme.onSurface,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
return RetroStatRow(
|
||||
label: label,
|
||||
value: value,
|
||||
highlight: highlight,
|
||||
highlightColor: RetroColors.gold,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user