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

feat(ui): 캐릭터 생성 화면 레트로 UI 전면 개편

Browse Source 
- RetroPanel, RetroButton 사용으로 통일
- 스탯 표시 레트로 스타일 적용
- 종족/직업 선택 UI 개선
- 전체 레이아웃 레트로 RPG 느낌으로 변경
This commit is contained in:
JiWoong Sul
2025-12-30 19:04:09 +09:00
parent 9e96b94465
commit 06f76e1364
1 changed files with 362 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

385
lib/src/features/new_character/new_character_screen.dart
View File

@@ -13,6 +13,8 @@ import 'package:askiineverdie/src/core/util/deterministic_random.dart';
import 'package:askiineverdie/src/core/l10n/game_data_l10n.dart';
import 'package:askiineverdie/src/core/util/pq_logic.dart';
import 'package:askiineverdie/src/features/new_character/widgets/race_preview.dart';
import 'package:askiineverdie/src/shared/retro_colors.dart';
import 'package:askiineverdie/src/shared/widgets/retro_widgets.dart';
/// 캐릭터 생성 화면 (NewGuy.pas 포팅)
class NewCharacterScreen extends StatefulWidget {
@@ -268,9 +270,19 @@ class _NewCharacterScreenState extends State<NewCharacterScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: RetroColors.deepBrown,
appBar: AppBar(
title: Text(L10n.of(context).newCharacterTitle),
backgroundColor: RetroColors.darkBrown,
title: Text(
L10n.of(context).newCharacterTitle.toUpperCase(),
style: const TextStyle(
fontFamily: 'PressStart2P',
fontSize: 12,
color: RetroColors.gold,
),
),
centerTitle: true,
iconTheme: const IconThemeData(color: RetroColors.gold),
),
body: SingleChildScrollView(
padding: const EdgeInsets.all(16),
@@ -286,11 +298,15 @@ class _NewCharacterScreenState extends State<NewCharacterScreen> {
const SizedBox(height: 16),
// 종족 미리보기 (Phase 5: 종족별 캐릭터 애니메이션)
Center(
RetroPanel(
title: 'PREVIEW',
padding: const EdgeInsets.all(8),
child: Center(
child: RacePreview(
raceId: _races[_selectedRaceIndex].raceId,
),
),
),
const SizedBox(height: 16),
// 종족/직업 선택 섹션
@@ -309,13 +325,10 @@ class _NewCharacterScreenState extends State<NewCharacterScreen> {
const SizedBox(height: 24),
// Sold! 버튼
FilledButton.icon(
RetroTextButton(
text: L10n.of(context).soldButton,
icon: Icons.check,
onPressed: _onSold,
icon: const Icon(Icons.check),
label: Text(L10n.of(context).soldButton),
style: FilledButton.styleFrom(
padding: const EdgeInsets.symmetric(vertical: 16),
),
),
],
),
@@ -325,44 +338,56 @@ class _NewCharacterScreenState extends State<NewCharacterScreen> {
Widget _buildNameSection() {
final l10n = L10n.of(context);
return Card(
child: Padding(
padding: const EdgeInsets.all(16),
return RetroPanel(
title: 'NAME',
child: Row(
children: [
Expanded(
child: TextField(
controller: _nameController,
style: const TextStyle(
fontFamily: 'PressStart2P',
fontSize: 10,
color: RetroColors.textLight,
),
decoration: InputDecoration(
labelText: l10n.name,
border: const OutlineInputBorder(),
labelStyle: const TextStyle(
fontFamily: 'PressStart2P',
fontSize: 8,
color: RetroColors.gold,
),
border: const OutlineInputBorder(
borderSide: BorderSide(color: RetroColors.panelBorderInner),
),
enabledBorder: const OutlineInputBorder(
borderSide: BorderSide(color: RetroColors.panelBorderInner),
),
focusedBorder: const OutlineInputBorder(
borderSide: BorderSide(color: RetroColors.gold, width: 2),
),
counterStyle: const TextStyle(color: RetroColors.textDisabled),
),
maxLength: 30,
),
),
const SizedBox(width: 8),
IconButton.filled(
RetroIconButton(
icon: Icons.casino,
onPressed: _onGenerateName,
icon: const Icon(Icons.casino),
tooltip: l10n.generateName,
),
],
),
),
);
}
Widget _buildStatsSection() {
final l10n = L10n.of(context);
return Card(
child: Padding(
padding: const EdgeInsets.all(16),
return RetroPanel(
title: 'STATS',
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(l10n.stats, style: Theme.of(context).textTheme.titleMedium),
const SizedBox(height: 12),
// 스탯 그리드
Row(
children: [
@@ -385,25 +410,28 @@ class _NewCharacterScreenState extends State<NewCharacterScreen> {
Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
decoration: BoxDecoration(
color: _getTotalColor().withValues(alpha: 0.3),
borderRadius: BorderRadius.circular(8),
border: Border.all(color: _getTotalColor()),
color: _getTotalColor().withValues(alpha: 0.2),
border: Border.all(color: _getTotalColor(), width: 2),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
l10n.total,
style: const TextStyle(fontWeight: FontWeight.bold),
l10n.total.toUpperCase(),
style: const TextStyle(
fontFamily: 'PressStart2P',
fontSize: 8,
fontWeight: FontWeight.bold,
color: RetroColors.textLight,
),
),
Text(
'$_total',
style: TextStyle(
fontSize: 20,
fontFamily: 'PressStart2P',
fontSize: 14,
fontWeight: FontWeight.bold,
color: _getTotalColor() == Colors.white
? Colors.black
: _getTotalColor(),
color: _getTotalColor(),
),
),
],
@@ -412,38 +440,39 @@ class _NewCharacterScreenState extends State<NewCharacterScreen> {
const SizedBox(height: 12),
// Roll 버튼들
Wrap(
alignment: WrapAlignment.center,
spacing: 16,
runSpacing: 8,
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
OutlinedButton.icon(
onPressed: _onUnroll,
icon: const Icon(Icons.undo),
label: Text(l10n.unroll),
style: OutlinedButton.styleFrom(
foregroundColor: _rollHistory.isEmpty ? Colors.grey : null,
RetroTextButton(
text: l10n.unroll,
icon: Icons.undo,
onPressed: _rollHistory.isEmpty ? null : _onUnroll,
isPrimary: false,
),
),
FilledButton.icon(
const SizedBox(width: 16),
RetroTextButton(
text: l10n.roll,
icon: Icons.casino,
onPressed: _onReroll,
icon: const Icon(Icons.casino),
label: Text(l10n.roll),
),
],
),
if (_rollHistory.isNotEmpty)
Padding(
padding: const EdgeInsets.only(top: 8),
child: Center(
child: Text(
game_l10n.uiRollHistory(_rollHistory.length),
style: Theme.of(context).textTheme.bodySmall,
textAlign: TextAlign.center,
style: const TextStyle(
fontFamily: 'PressStart2P',
fontSize: 6,
color: RetroColors.textDisabled,
),
),
),
),
],
),
),
);
}
@@ -452,16 +481,28 @@ class _NewCharacterScreenState extends State<NewCharacterScreen> {
margin: const EdgeInsets.all(4),
padding: const EdgeInsets.symmetric(vertical: 8),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surfaceContainerHighest,
borderRadius: BorderRadius.circular(8),
color: RetroColors.panelBgLight,
border: Border.all(color: RetroColors.panelBorderInner),
),
child: Column(
children: [
Text(label, style: Theme.of(context).textTheme.labelSmall),
Text(
label.toUpperCase(),
style: const TextStyle(
fontFamily: 'PressStart2P',
fontSize: 6,
color: RetroColors.gold,
),
),
const SizedBox(height: 4),
Text(
'$value',
style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
style: const TextStyle(
fontFamily: 'PressStart2P',
fontSize: 12,
fontWeight: FontWeight.bold,
color: RetroColors.textLight,
),
),
],
),
@@ -469,18 +510,9 @@ class _NewCharacterScreenState extends State<NewCharacterScreen> {
}
Widget _buildRaceSection() {
return Card(
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
L10n.of(context).race,
style: Theme.of(context).textTheme.titleMedium,
),
const SizedBox(height: 8),
SizedBox(
return RetroPanel(
title: 'RACE',
child: SizedBox(
height: 300,
child: ListView.builder(
controller: _raceScrollController,
@@ -488,33 +520,50 @@ class _NewCharacterScreenState extends State<NewCharacterScreen> {
itemBuilder: (context, index) {
final isSelected = index == _selectedRaceIndex;
final race = _races[index];
return ListTile(
leading: Icon(
isSelected
? Icons.radio_button_checked
: Icons.radio_button_unchecked,
color: isSelected
? Theme.of(context).colorScheme.primary
return GestureDetector(
onTap: () => setState(() => _selectedRaceIndex = index),
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
decoration: BoxDecoration(
color: isSelected ? RetroColors.panelBgLight : null,
border: isSelected
? Border.all(color: RetroColors.gold, width: 1)
: null,
),
title: Text(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Icon(
isSelected ? Icons.arrow_right : Icons.remove,
size: 12,
color: isSelected
? RetroColors.gold
: RetroColors.textDisabled,
),
const SizedBox(width: 4),
Expanded(
child: Text(
GameDataL10n.getRaceName(context, race.name),
style: TextStyle(
fontWeight: isSelected
? FontWeight.bold
: FontWeight.normal,
fontFamily: 'PressStart2P',
fontSize: 8,
color: isSelected
? RetroColors.gold
: RetroColors.textLight,
),
),
subtitle: isSelected ? _buildRaceInfo(race) : null,
dense: !isSelected,
visualDensity: VisualDensity.compact,
onTap: () => setState(() => _selectedRaceIndex = index),
);
},
),
),
],
),
if (isSelected) _buildRaceInfo(race),
],
),
),
);
},
),
),
);
}
@@ -531,22 +580,23 @@ class _NewCharacterScreenState extends State<NewCharacterScreen> {
? race.passives.map((p) => _translateRacePassive(p)).join(', ')
: '';
return Column(
return Padding(
padding: const EdgeInsets.only(left: 16, top: 4),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (statMods.isNotEmpty)
Text(
statMods.join(', '),
style: Theme.of(context).textTheme.bodySmall,
style: const TextStyle(fontSize: 9, color: RetroColors.textLight),
),
if (passiveDesc.isNotEmpty)
Text(
passiveDesc,
style: Theme.of(context).textTheme.bodySmall?.copyWith(
color: Theme.of(context).colorScheme.primary,
),
style: const TextStyle(fontSize: 9, color: RetroColors.expGreen),
),
],
),
);
}
@@ -576,18 +626,9 @@ class _NewCharacterScreenState extends State<NewCharacterScreen> {
}
Widget _buildKlassSection() {
return Card(
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
L10n.of(context).classTitle,
style: Theme.of(context).textTheme.titleMedium,
),
const SizedBox(height: 8),
SizedBox(
return RetroPanel(
title: 'CLASS',
child: SizedBox(
height: 300,
child: ListView.builder(
controller: _klassScrollController,
@@ -595,33 +636,50 @@ class _NewCharacterScreenState extends State<NewCharacterScreen> {
itemBuilder: (context, index) {
final isSelected = index == _selectedKlassIndex;
final klass = _klasses[index];
return ListTile(
leading: Icon(
isSelected
? Icons.radio_button_checked
: Icons.radio_button_unchecked,
color: isSelected
? Theme.of(context).colorScheme.primary
return GestureDetector(
onTap: () => setState(() => _selectedKlassIndex = index),
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
decoration: BoxDecoration(
color: isSelected ? RetroColors.panelBgLight : null,
border: isSelected
? Border.all(color: RetroColors.gold, width: 1)
: null,
),
title: Text(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Icon(
isSelected ? Icons.arrow_right : Icons.remove,
size: 12,
color: isSelected
? RetroColors.gold
: RetroColors.textDisabled,
),
const SizedBox(width: 4),
Expanded(
child: Text(
GameDataL10n.getKlassName(context, klass.name),
style: TextStyle(
fontWeight: isSelected
? FontWeight.bold
: FontWeight.normal,
fontFamily: 'PressStart2P',
fontSize: 8,
color: isSelected
? RetroColors.gold
: RetroColors.textLight,
),
),
subtitle: isSelected ? _buildClassInfo(klass) : null,
dense: !isSelected,
visualDensity: VisualDensity.compact,
onTap: () => setState(() => _selectedKlassIndex = index),
);
},
),
),
],
),
if (isSelected) _buildClassInfo(klass),
],
),
),
);
},
),
),
);
}
@@ -638,22 +696,23 @@ class _NewCharacterScreenState extends State<NewCharacterScreen> {
? klass.passives.map((p) => _translateClassPassive(p)).join(', ')
: '';
return Column(
return Padding(
padding: const EdgeInsets.only(left: 16, top: 4),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (statMods.isNotEmpty)
Text(
statMods.join(', '),
style: Theme.of(context).textTheme.bodySmall,
style: const TextStyle(fontSize: 9, color: RetroColors.textLight),
),
if (passiveDesc.isNotEmpty)
Text(
passiveDesc,
style: Theme.of(context).textTheme.bodySmall?.copyWith(
color: Theme.of(context).colorScheme.secondary,
),
style: const TextStyle(fontSize: 9, color: RetroColors.expGreen),
),
],
),
);
}
@@ -678,13 +737,81 @@ class _NewCharacterScreenState extends State<NewCharacterScreen> {
/// 테스트 모드 토글 위젯
Widget _buildTestModeToggle() {
return Card(
child: SwitchListTile(
title: Text(game_l10n.uiTestMode),
subtitle: Text(game_l10n.uiTestModeDesc),
value: _testModeEnabled,
onChanged: (value) => setState(() => _testModeEnabled = value),
secondary: const Icon(Icons.phone_android),
return RetroPanel(
title: 'OPTIONS',
child: GestureDetector(
onTap: () => setState(() => _testModeEnabled = !_testModeEnabled),
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
child: Row(
children: [
Icon(
Icons.phone_android,
size: 18,
color: _testModeEnabled
? RetroColors.gold
: RetroColors.textDisabled,
),
const SizedBox(width: 12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
game_l10n.uiTestMode,
style: TextStyle(
fontFamily: 'PressStart2P',
fontSize: 8,
color: _testModeEnabled
? RetroColors.gold
: RetroColors.textLight,
),
),
const SizedBox(height: 4),
Text(
game_l10n.uiTestModeDesc,
style: const TextStyle(
fontFamily: 'PressStart2P',
fontSize: 6,
color: RetroColors.textDisabled,
),
),
],
),
),
Container(
width: 40,
height: 20,
decoration: BoxDecoration(
color: _testModeEnabled
? RetroColors.expGreen
: RetroColors.panelBgLight,
border: Border.all(
color: _testModeEnabled
? RetroColors.expGreen
: RetroColors.panelBorderInner,
width: 2,
),
),
child: Row(
mainAxisAlignment: _testModeEnabled
? MainAxisAlignment.end
: MainAxisAlignment.start,
children: [
Container(
width: 16,
height: 16,
margin: const EdgeInsets.all(1),
color: _testModeEnabled
? RetroColors.textLight
: RetroColors.textDisabled,
),
],
),
),
],
),
),
),
);
}