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

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;
}
}