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

204
lib/src/features/game/widgets/hp_mp_bar.dart
View File

@@ -1,9 +1,11 @@
import 'package:flutter/material.dart';
import 'package:askiineverdie/data/game_text_l10n.dart' as l10n;
import 'package:askiineverdie/src/shared/retro_colors.dart';
/// HP/MP 바 위젯 (Phase 8: 변화 시 시각 효과)
/// HP/MP 바 위젯 (레트로 RPG 스타일)
///
/// - 세그먼트 스타일의 8-bit 프로그레스 바
/// - HP가 20% 미만일 때 빨간색 깜빡임
/// - HP/MP 변화 시 색상 플래시 + 변화량 표시
/// - 전투 중 몬스터 HP 바 표시
@@ -158,8 +160,12 @@ class _HpMpBarState extends State<HpMpBar> with TickerProviderStateMixin {
widget.monsterHpMax != null &&
widget.monsterHpMax! > 0;
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
return Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
decoration: BoxDecoration(
color: RetroColors.panelBg,
border: Border.all(color: RetroColors.panelBorderOuter, width: 2),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
@@ -169,13 +175,14 @@ class _HpMpBarState extends State<HpMpBar> with TickerProviderStateMixin {
current: widget.hpCurrent,
max: widget.hpMax,
ratio: hpRatio,
color: Colors.red,
fillColor: RetroColors.hpRed,
emptyColor: RetroColors.hpRedDark,
isLow: hpRatio < 0.2 && hpRatio > 0,
flashController: _hpFlashAnimation,
change: _hpChange,
isDamage: _hpDamage,
),
const SizedBox(height: 4),
const SizedBox(height: 6),
// MP 바 (플래시 효과 포함)
_buildAnimatedBar(
@@ -183,7 +190,8 @@ class _HpMpBarState extends State<HpMpBar> with TickerProviderStateMixin {
current: widget.mpCurrent,
max: widget.mpMax,
ratio: mpRatio,
color: Colors.blue,
fillColor: RetroColors.mpBlue,
emptyColor: RetroColors.mpBlueDark,
isLow: false,
flashController: _mpFlashAnimation,
change: _mpChange,
@@ -202,7 +210,8 @@ class _HpMpBarState extends State<HpMpBar> with TickerProviderStateMixin {
required int current,
required int max,
required double ratio,
required Color color,
required Color fillColor,
required Color emptyColor,
required bool isLow,
required Animation<double> flashController,
required int change,
@@ -213,27 +222,28 @@ class _HpMpBarState extends State<HpMpBar> with TickerProviderStateMixin {
builder: (context, child) {
// 플래시 색상 (데미지=빨강, 회복=녹색)
final flashColor = isDamage
? Colors.red.withValues(alpha: flashController.value * 0.4)
: Colors.green.withValues(alpha: flashController.value * 0.4);
? RetroColors.hpRed.withValues(alpha: flashController.value * 0.4)
: RetroColors.expGreen.withValues(alpha: flashController.value * 0.4);
// 위험 깜빡임 배경
final lowBgColor = isLow
? Colors.red.withValues(alpha: (1 - _blinkAnimation.value) * 0.3)
? RetroColors.hpRed.withValues(alpha: (1 - _blinkAnimation.value) * 0.3)
: Colors.transparent;
return Container(
decoration: BoxDecoration(
color: flashController.value > 0.1 ? flashColor : lowBgColor,
borderRadius: BorderRadius.circular(4),
),
child: Stack(
children: [
_buildBar(
_buildRetroBar(
label: label,
current: current,
max: max,
ratio: ratio,
color: color,
fillColor: fillColor,
emptyColor: emptyColor,
blinkOpacity: isLow ? _blinkAnimation.value : 1.0,
),
// 플로팅 변화량 텍스트 (위로 떠오르며 사라짐)
@@ -250,9 +260,10 @@ class _HpMpBarState extends State<HpMpBar> with TickerProviderStateMixin {
child: Text(
change > 0 ? '+$change' : '$change',
style: TextStyle(
fontSize: 12,
fontFamily: 'PressStart2P',
fontSize: 8,
fontWeight: FontWeight.bold,
color: isDamage ? Colors.red : Colors.green,
color: isDamage ? RetroColors.hpRed : RetroColors.expGreen,
shadows: const [
Shadow(color: Colors.black, blurRadius: 3),
Shadow(color: Colors.black, blurRadius: 6),
@@ -269,40 +280,81 @@ class _HpMpBarState extends State<HpMpBar> with TickerProviderStateMixin {
);
}
Widget _buildBar({
/// 레트로 스타일 세그먼트 바
Widget _buildRetroBar({
required String label,
required int current,
required int max,
required double ratio,
required Color color,
required Color fillColor,
required Color emptyColor,
required double blinkOpacity,
}) {
const segmentCount = 15;
final filledSegments = (ratio.clamp(0.0, 1.0) * segmentCount).round();
return Row(
children: [
// 레이블 (HP/MP)
SizedBox(
width: 24,
width: 28,
child: Text(
label,
style: const TextStyle(fontSize: 10, fontWeight: FontWeight.bold),
),
),
Expanded(
child: ClipRRect(
borderRadius: BorderRadius.circular(2),
child: LinearProgressIndicator(
value: ratio.clamp(0.0, 1.0),
backgroundColor: color.withValues(alpha: 0.2),
valueColor: AlwaysStoppedAnimation<Color>(color),
minHeight: 10,
style: TextStyle(
fontFamily: 'PressStart2P',
fontSize: 7,
fontWeight: FontWeight.bold,
color: RetroColors.gold.withValues(alpha: blinkOpacity),
),
),
),
const SizedBox(width: 4),
// Flexible로 오버플로우 방지
Flexible(
flex: 0,
// 세그먼트 바
Expanded(
child: Container(
height: 12,
decoration: BoxDecoration(
color: emptyColor.withValues(alpha: 0.3),
border: Border.all(
color: RetroColors.panelBorderOuter,
width: 1,
),
),
child: Row(
children: List.generate(segmentCount, (index) {
final isFilled = index < filledSegments;
return Expanded(
child: Container(
decoration: BoxDecoration(
color: isFilled
? fillColor.withValues(alpha: blinkOpacity)
: emptyColor.withValues(alpha: 0.2),
border: Border(
right: index < segmentCount - 1
? BorderSide(
color: RetroColors.panelBorderOuter
.withValues(alpha: 0.3),
width: 1,
)
: BorderSide.none,
),
),
),
);
}),
),
),
),
const SizedBox(width: 6),
// 수치 표시
SizedBox(
width: 60,
child: Text(
'$current/$max',
style: const TextStyle(fontSize: 9),
style: const TextStyle(
fontFamily: 'PressStart2P',
fontSize: 6,
color: RetroColors.textLight,
),
textAlign: TextAlign.right,
overflow: TextOverflow.ellipsis,
),
@@ -311,53 +363,90 @@ class _HpMpBarState extends State<HpMpBar> with TickerProviderStateMixin {
);
}
/// 몬스터 HP 바
/// 몬스터 HP 바 (레트로 스타일)
Widget _buildMonsterBar() {
final max = widget.monsterHpMax!;
final ratio = max > 0 ? widget.monsterHpCurrent! / max : 0.0;
const segmentCount = 10;
final filledSegments = (ratio.clamp(0.0, 1.0) * segmentCount).round();
return AnimatedBuilder(
animation: _monsterFlashAnimation,
builder: (context, child) {
// 데미지 플래시 (몬스터는 항상 데미지를 받음)
final flashColor = Colors.yellow.withValues(
final flashColor = RetroColors.gold.withValues(
alpha: _monsterFlashAnimation.value * 0.3,
);
return Container(
padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 2),
padding: const EdgeInsets.all(4),
decoration: BoxDecoration(
color: _monsterFlashAnimation.value > 0.1
? flashColor
: Colors.orange.withValues(alpha: 0.1),
borderRadius: BorderRadius.circular(4),
border: Border.all(color: Colors.orange.withValues(alpha: 0.3)),
: RetroColors.panelBgLight.withValues(alpha: 0.5),
border: Border.all(
color: RetroColors.gold.withValues(alpha: 0.6),
width: 1,
),
),
child: Stack(
clipBehavior: Clip.none,
children: [
// HP 바만 표시 (공간 제약으로 아이콘/이름 생략)
Row(
children: [
// HP 바
// 몬스터 아이콘
const Icon(
Icons.pest_control,
size: 12,
color: RetroColors.gold,
),
const SizedBox(width: 6),
// 세그먼트 HP 바
Expanded(
child: ClipRRect(
borderRadius: BorderRadius.circular(2),
child: LinearProgressIndicator(
value: ratio.clamp(0.0, 1.0),
backgroundColor: Colors.orange.withValues(alpha: 0.2),
valueColor: const AlwaysStoppedAnimation<Color>(
Colors.orange,
child: Container(
height: 10,
decoration: BoxDecoration(
color: RetroColors.hpRedDark.withValues(alpha: 0.3),
border: Border.all(
color: RetroColors.panelBorderOuter,
width: 1,
),
minHeight: 8,
),
child: Row(
children: List.generate(segmentCount, (index) {
final isFilled = index < filledSegments;
return Expanded(
child: Container(
decoration: BoxDecoration(
color: isFilled
? RetroColors.gold
: RetroColors.panelBorderOuter
.withValues(alpha: 0.3),
border: Border(
right: index < segmentCount - 1
? BorderSide(
color: RetroColors.panelBorderOuter
.withValues(alpha: 0.3),
width: 1,
)
: BorderSide.none,
),
),
),
);
}),
),
),
),
const SizedBox(width: 4),
const SizedBox(width: 6),
// HP 퍼센트
Text(
'${(ratio * 100).toInt()}%',
style: const TextStyle(fontSize: 8, color: Colors.orange),
style: const TextStyle(
fontFamily: 'PressStart2P',
fontSize: 6,
color: RetroColors.gold,
),
),
],
),
@@ -365,8 +454,8 @@ class _HpMpBarState extends State<HpMpBar> with TickerProviderStateMixin {
// 플로팅 데미지 텍스트
if (_monsterHpChange != 0 && _monsterFlashAnimation.value > 0.05)
Positioned(
right: 60,
top: -5,
right: 50,
top: -8,
child: Transform.translate(
offset: Offset(0, -12 * (1 - _monsterFlashAnimation.value)),
child: Opacity(
@@ -376,11 +465,12 @@ class _HpMpBarState extends State<HpMpBar> with TickerProviderStateMixin {
? '+$_monsterHpChange'
: '$_monsterHpChange',
style: TextStyle(
fontSize: 11,
fontFamily: 'PressStart2P',
fontSize: 7,
fontWeight: FontWeight.bold,
color: _monsterHpChange < 0
? Colors.yellow
: Colors.green,
? RetroColors.gold
: RetroColors.expGreen,
shadows: const [
Shadow(color: Colors.black, blurRadius: 3),
Shadow(color: Colors.black, blurRadius: 6),