diff --git a/lib/src/features/game/pages/equipment_page.dart b/lib/src/features/game/pages/equipment_page.dart index fa7fe8b..2739c3f 100644 --- a/lib/src/features/game/pages/equipment_page.dart +++ b/lib/src/features/game/pages/equipment_page.dart @@ -3,6 +3,7 @@ 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'; +import 'package:askiineverdie/src/shared/retro_colors.dart'; /// 장비 페이지 (캐로셀) /// @@ -29,17 +30,35 @@ class EquipmentPage extends StatelessWidget { } Widget _buildSectionHeader(BuildContext context, String title) { + final gold = RetroColors.goldOf(context); + final goldDark = RetroColors.goldDarkOf(context); + final panelBg = RetroColors.panelBgOf(context); + 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, + padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8), + decoration: BoxDecoration( + color: panelBg, + border: Border( + top: BorderSide(color: gold, width: 2), + left: BorderSide(color: gold, width: 2), + bottom: BorderSide(color: goldDark, width: 2), + right: BorderSide(color: goldDark, width: 2), ), ), + child: Row( + children: [ + Icon(Icons.shield, size: 16, color: gold), + const SizedBox(width: 8), + Text( + title, + style: TextStyle( + fontWeight: FontWeight.bold, + fontSize: 13, + color: gold, + ), + ), + ], + ), ); } } diff --git a/lib/src/features/game/widgets/equipment_stats_panel.dart b/lib/src/features/game/widgets/equipment_stats_panel.dart index 3a1d9b4..a4439ab 100644 --- a/lib/src/features/game/widgets/equipment_stats_panel.dart +++ b/lib/src/features/game/widgets/equipment_stats_panel.dart @@ -7,6 +7,7 @@ import 'package:askiineverdie/src/core/model/equipment_item.dart'; import 'package:askiineverdie/src/core/model/equipment_slot.dart'; import 'package:askiineverdie/src/core/model/game_state.dart'; import 'package:askiineverdie/src/core/model/item_stats.dart'; +import 'package:askiineverdie/src/shared/retro_colors.dart'; /// 장비 스탯 표시 패널 /// @@ -130,7 +131,7 @@ class _EquipmentSlotTile extends StatelessWidget { } } -/// 빈 슬롯 타일 +/// 빈 슬롯 타일 (레트로 스타일) class _EmptySlotTile extends StatelessWidget { const _EmptySlotTile({required this.slot}); @@ -138,6 +139,8 @@ class _EmptySlotTile extends StatelessWidget { @override Widget build(BuildContext context) { + final textMuted = RetroColors.textMutedOf(context); + return ListTile( dense: true, contentPadding: const EdgeInsets.symmetric(horizontal: 8), @@ -146,7 +149,7 @@ class _EmptySlotTile extends StatelessWidget { '[${_getSlotName(slot)}] ${l10n.uiEmpty}', style: TextStyle( fontSize: 11, - color: Colors.grey.shade600, + color: textMuted, fontStyle: FontStyle.italic, ), ), @@ -154,7 +157,7 @@ class _EmptySlotTile extends StatelessWidget { } } -/// 슬롯 아이콘 +/// 슬롯 아이콘 (레트로 스타일) class _SlotIcon extends StatelessWidget { const _SlotIcon({required this.slot, this.isEmpty = false}); @@ -177,15 +180,15 @@ class _SlotIcon extends StatelessWidget { EquipmentSlot.sollerets => Icons.do_not_step, }; - return Icon( - icon, - size: 16, - color: isEmpty ? Colors.grey.shade400 : Colors.grey.shade700, - ); + final color = isEmpty + ? RetroColors.textMutedOf(context) + : RetroColors.textSecondaryOf(context); + + return Icon(icon, size: 16, color: color); } } -/// 점수 배지 +/// 점수 배지 (레트로 스타일) class _ScoreBadge extends StatelessWidget { const _ScoreBadge({required this.score}); @@ -193,25 +196,29 @@ class _ScoreBadge extends StatelessWidget { @override Widget build(BuildContext context) { + final gold = RetroColors.goldOf(context); + final surface = RetroColors.surfaceOf(context); + return Container( padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2), decoration: BoxDecoration( - color: Colors.blueGrey.shade100, - borderRadius: BorderRadius.circular(8), + color: surface, + border: Border.all(color: gold, width: 1), + borderRadius: BorderRadius.circular(4), ), child: Text( '$score', style: TextStyle( fontSize: 10, fontWeight: FontWeight.bold, - color: Colors.blueGrey.shade700, + color: gold, ), ), ); } } -/// 장비 점수 총합 헤더 +/// 장비 점수 총합 헤더 (레트로 스타일) class _TotalScoreHeader extends StatelessWidget { const _TotalScoreHeader({ required this.totalScore, @@ -225,26 +232,29 @@ class _TotalScoreHeader extends StatelessWidget { @override Widget build(BuildContext context) { + final gold = RetroColors.goldOf(context); + final goldDark = RetroColors.goldDarkOf(context); + final panelBg = RetroColors.panelBgOf(context); + final border = RetroColors.borderOf(context); + final textPrimary = RetroColors.textPrimaryOf(context); + final textSecondary = RetroColors.textSecondaryOf(context); + return Container( margin: const EdgeInsets.only(bottom: 8), padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8), decoration: BoxDecoration( - gradient: LinearGradient( - colors: [Colors.blueGrey.shade700, Colors.blueGrey.shade600], + color: panelBg, + border: Border( + top: BorderSide(color: gold, width: 2), + left: BorderSide(color: gold, width: 2), + bottom: BorderSide(color: goldDark, width: 2), + right: BorderSide(color: goldDark, width: 2), ), - borderRadius: BorderRadius.circular(8), - boxShadow: [ - BoxShadow( - color: Colors.black.withValues(alpha: 0.2), - blurRadius: 4, - offset: const Offset(0, 2), - ), - ], ), child: Row( children: [ // 장비 아이콘 - const Icon(Icons.shield, size: 20, color: Colors.white70), + Icon(Icons.shield, size: 20, color: gold), const SizedBox(width: 8), // 총합 점수 @@ -254,14 +264,14 @@ class _TotalScoreHeader extends StatelessWidget { children: [ Text( l10n.uiEquipmentScore, - style: const TextStyle(fontSize: 10, color: Colors.white70), + style: TextStyle(fontSize: 10, color: textSecondary), ), Text( '$totalScore', - style: const TextStyle( + style: TextStyle( fontSize: 18, fontWeight: FontWeight.bold, - color: Colors.white, + color: gold, ), ), ], @@ -272,15 +282,15 @@ class _TotalScoreHeader extends StatelessWidget { Container( padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4), decoration: BoxDecoration( - color: Colors.white.withValues(alpha: 0.2), - borderRadius: BorderRadius.circular(12), + color: border, + borderRadius: BorderRadius.circular(4), ), child: Text( '$equippedCount / $totalSlots', - style: const TextStyle( + style: TextStyle( fontSize: 11, fontWeight: FontWeight.w500, - color: Colors.white, + color: textPrimary, ), ), ), @@ -381,7 +391,7 @@ class _StatsGrid extends StatelessWidget { if (entries.isEmpty) { return Text( l10n.uiNoBonusStats, - style: const TextStyle(fontSize: 10, color: Colors.grey), + style: TextStyle(fontSize: 10, color: RetroColors.textMutedOf(context)), ); } @@ -400,7 +410,7 @@ class _StatEntry { final String value; } -/// 스탯 칩 +/// 스탯 칩 (레트로 스타일) class _StatChip extends StatelessWidget { const _StatChip({required this.entry}); @@ -408,22 +418,32 @@ class _StatChip extends StatelessWidget { @override Widget build(BuildContext context) { + final surface = RetroColors.surfaceOf(context); + final border = RetroColors.borderOf(context); + final textMuted = RetroColors.textMutedOf(context); + final textPrimary = RetroColors.textPrimaryOf(context); + return Container( padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 2), decoration: BoxDecoration( - color: Colors.grey.shade200, - borderRadius: BorderRadius.circular(4), + color: surface, + border: Border.all(color: border, width: 1), + borderRadius: BorderRadius.circular(2), ), child: Row( mainAxisSize: MainAxisSize.min, children: [ Text( '${entry.label}: ', - style: TextStyle(fontSize: 9, color: Colors.grey.shade600), + style: TextStyle(fontSize: 9, color: textMuted), ), Text( entry.value, - style: const TextStyle(fontSize: 9, fontWeight: FontWeight.bold), + style: TextStyle( + fontSize: 9, + fontWeight: FontWeight.bold, + color: textPrimary, + ), ), ], ), @@ -431,7 +451,7 @@ class _StatChip extends StatelessWidget { } } -/// 아이템 메타 정보 행 +/// 아이템 메타 정보 행 (레트로 스타일) class _ItemMetaRow extends StatelessWidget { const _ItemMetaRow({required this.item}); @@ -440,12 +460,13 @@ class _ItemMetaRow extends StatelessWidget { @override Widget build(BuildContext context) { final rarityName = _getTranslatedRarity(item.rarity); + final textMuted = RetroColors.textMutedOf(context); return Row( children: [ Text( l10n.uiLevel(item.level), - style: const TextStyle(fontSize: 9, color: Colors.grey), + style: TextStyle(fontSize: 9, color: textMuted), ), const SizedBox(width: 8), Text( @@ -459,7 +480,7 @@ class _ItemMetaRow extends StatelessWidget { const SizedBox(width: 8), Text( l10n.uiWeight(item.weight), - style: const TextStyle(fontSize: 9, color: Colors.grey), + style: TextStyle(fontSize: 9, color: textMuted), ), ], );