style(ui): HP/MP 바 숫자 오버레이 표시
- 웹: hp_mp_bar.dart 숫자를 바 중앙에 오버레이 - 모바일: enhanced_animation_panel.dart 동일 적용 - 텍스트 그림자 추가로 가독성 향상
This commit is contained in:
JiWoong Sul
@@ -285,7 +285,7 @@ class _EnhancedAnimationPanelState extends State<EnhancedAnimationPanel>
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
/// 컴팩트 HP 바
|
/// 컴팩트 HP 바 (숫자 오버레이)
|
||||||
Widget _buildCompactHpBar() {
|
Widget _buildCompactHpBar() {
|
||||||
final ratio = _currentHpMax > 0 ? _currentHp / _currentHpMax : 0.0;
|
final ratio = _currentHpMax > 0 ? _currentHp / _currentHpMax : 0.0;
|
||||||
final isLow = ratio < 0.2 && ratio > 0;
|
final isLow = ratio < 0.2 && ratio > 0;
|
||||||
@@ -320,29 +320,42 @@ class _EnhancedAnimationPanelState extends State<EnhancedAnimationPanel>
|
|||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
// 프로그레스
|
// 프로그레스 바 + 숫자 오버레이
|
||||||
Expanded(
|
Expanded(
|
||||||
child: ClipRRect(
|
child: Stack(
|
||||||
borderRadius: const BorderRadius.horizontal(
|
alignment: Alignment.center,
|
||||||
right: Radius.circular(3),
|
children: [
|
||||||
),
|
// 프로그레스 바
|
||||||
child: LinearProgressIndicator(
|
ClipRRect(
|
||||||
value: ratio.clamp(0.0, 1.0),
|
borderRadius: const BorderRadius.horizontal(
|
||||||
backgroundColor: Colors.red.withValues(alpha: 0.2),
|
right: Radius.circular(3),
|
||||||
valueColor: AlwaysStoppedAnimation(
|
),
|
||||||
isLow ? Colors.red : Colors.red.shade600,
|
child: LinearProgressIndicator(
|
||||||
|
value: ratio.clamp(0.0, 1.0),
|
||||||
|
backgroundColor: Colors.red.withValues(alpha: 0.2),
|
||||||
|
valueColor: AlwaysStoppedAnimation(
|
||||||
|
isLow ? Colors.red : Colors.red.shade600,
|
||||||
|
),
|
||||||
|
minHeight: 20,
|
||||||
|
),
|
||||||
),
|
),
|
||||||
minHeight: 20,
|
// 숫자 오버레이 (바 중앙)
|
||||||
),
|
Text(
|
||||||
),
|
'$_currentHp/$_currentHpMax',
|
||||||
),
|
style: TextStyle(
|
||||||
// 수치
|
fontSize: 11,
|
||||||
Container(
|
fontWeight: FontWeight.bold,
|
||||||
width: 56,
|
color: Colors.white,
|
||||||
alignment: Alignment.center,
|
shadows: [
|
||||||
child: Text(
|
Shadow(
|
||||||
'$_currentHp/$_currentHpMax',
|
color: Colors.black.withValues(alpha: 0.9),
|
||||||
style: const TextStyle(fontSize: 11, color: Colors.white),
|
blurRadius: 2,
|
||||||
|
),
|
||||||
|
const Shadow(color: Colors.black, blurRadius: 4),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
@@ -352,7 +365,7 @@ class _EnhancedAnimationPanelState extends State<EnhancedAnimationPanel>
|
|||||||
// 플로팅 변화량
|
// 플로팅 변화량
|
||||||
if (_hpChange != 0 && _hpFlashAnimation.value > 0.05)
|
if (_hpChange != 0 && _hpFlashAnimation.value > 0.05)
|
||||||
Positioned(
|
Positioned(
|
||||||
right: 50,
|
right: 20,
|
||||||
top: -8,
|
top: -8,
|
||||||
child: Transform.translate(
|
child: Transform.translate(
|
||||||
offset: Offset(0, -10 * (1 - _hpFlashAnimation.value)),
|
offset: Offset(0, -10 * (1 - _hpFlashAnimation.value)),
|
||||||
@@ -378,7 +391,7 @@ class _EnhancedAnimationPanelState extends State<EnhancedAnimationPanel>
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
/// 컴팩트 MP 바
|
/// 컴팩트 MP 바 (숫자 오버레이)
|
||||||
Widget _buildCompactMpBar() {
|
Widget _buildCompactMpBar() {
|
||||||
final ratio = _currentMpMax > 0 ? _currentMp / _currentMpMax : 0.0;
|
final ratio = _currentMpMax > 0 ? _currentMp / _currentMpMax : 0.0;
|
||||||
|
|
||||||
@@ -408,27 +421,42 @@ class _EnhancedAnimationPanelState extends State<EnhancedAnimationPanel>
|
|||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
|
// 프로그레스 바 + 숫자 오버레이
|
||||||
Expanded(
|
Expanded(
|
||||||
child: ClipRRect(
|
child: Stack(
|
||||||
borderRadius: const BorderRadius.horizontal(
|
alignment: Alignment.center,
|
||||||
right: Radius.circular(3),
|
children: [
|
||||||
),
|
// 프로그레스 바
|
||||||
child: LinearProgressIndicator(
|
ClipRRect(
|
||||||
value: ratio.clamp(0.0, 1.0),
|
borderRadius: const BorderRadius.horizontal(
|
||||||
backgroundColor: Colors.blue.withValues(alpha: 0.2),
|
right: Radius.circular(3),
|
||||||
valueColor: AlwaysStoppedAnimation(
|
),
|
||||||
Colors.blue.shade600,
|
child: LinearProgressIndicator(
|
||||||
|
value: ratio.clamp(0.0, 1.0),
|
||||||
|
backgroundColor: Colors.blue.withValues(alpha: 0.2),
|
||||||
|
valueColor: AlwaysStoppedAnimation(
|
||||||
|
Colors.blue.shade600,
|
||||||
|
),
|
||||||
|
minHeight: 20,
|
||||||
|
),
|
||||||
),
|
),
|
||||||
minHeight: 20,
|
// 숫자 오버레이 (바 중앙)
|
||||||
),
|
Text(
|
||||||
),
|
'$_currentMp/$_currentMpMax',
|
||||||
),
|
style: TextStyle(
|
||||||
Container(
|
fontSize: 11,
|
||||||
width: 56,
|
fontWeight: FontWeight.bold,
|
||||||
alignment: Alignment.center,
|
color: Colors.white,
|
||||||
child: Text(
|
shadows: [
|
||||||
'$_currentMp/$_currentMpMax',
|
Shadow(
|
||||||
style: const TextStyle(fontSize: 11, color: Colors.white),
|
color: Colors.black.withValues(alpha: 0.9),
|
||||||
|
blurRadius: 2,
|
||||||
|
),
|
||||||
|
const Shadow(color: Colors.black, blurRadius: 4),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
@@ -437,7 +465,7 @@ class _EnhancedAnimationPanelState extends State<EnhancedAnimationPanel>
|
|||||||
|
|
||||||
if (_mpChange != 0 && _mpFlashAnimation.value > 0.05)
|
if (_mpChange != 0 && _mpFlashAnimation.value > 0.05)
|
||||||
Positioned(
|
Positioned(
|
||||||
right: 50,
|
right: 20,
|
||||||
top: -8,
|
top: -8,
|
||||||
child: Transform.translate(
|
child: Transform.translate(
|
||||||
offset: Offset(0, -10 * (1 - _mpFlashAnimation.value)),
|
offset: Offset(0, -10 * (1 - _mpFlashAnimation.value)),
|
||||||
|
|||||||
@@ -288,7 +288,7 @@ class _HpMpBarState extends State<HpMpBar> with TickerProviderStateMixin {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
/// 레트로 스타일 세그먼트 바
|
/// 레트로 스타일 세그먼트 바 (숫자 바 위 오버레이)
|
||||||
Widget _buildRetroBar({
|
Widget _buildRetroBar({
|
||||||
required String label,
|
required String label,
|
||||||
required int current,
|
required int current,
|
||||||
@@ -316,53 +316,62 @@ class _HpMpBarState extends State<HpMpBar> with TickerProviderStateMixin {
|
|||||||
),
|
),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
// 세그먼트 바
|
// 세그먼트 바 (숫자 오버레이)
|
||||||
Expanded(
|
Expanded(
|
||||||
child: Container(
|
child: Stack(
|
||||||
height: 12,
|
alignment: Alignment.center,
|
||||||
decoration: BoxDecoration(
|
children: [
|
||||||
color: emptyColor.withValues(alpha: 0.3),
|
// 세그먼트 바
|
||||||
border: Border.all(color: RetroColors.panelBorderOuter, width: 1),
|
Container(
|
||||||
),
|
height: 14,
|
||||||
child: Row(
|
decoration: BoxDecoration(
|
||||||
children: List.generate(segmentCount, (index) {
|
color: emptyColor.withValues(alpha: 0.3),
|
||||||
final isFilled = index < filledSegments;
|
border:
|
||||||
return Expanded(
|
Border.all(color: RetroColors.panelBorderOuter, width: 1),
|
||||||
child: Container(
|
),
|
||||||
decoration: BoxDecoration(
|
child: Row(
|
||||||
color: isFilled
|
children: List.generate(segmentCount, (index) {
|
||||||
? fillColor.withValues(alpha: blinkOpacity)
|
final isFilled = index < filledSegments;
|
||||||
: emptyColor.withValues(alpha: 0.2),
|
return Expanded(
|
||||||
border: Border(
|
child: Container(
|
||||||
right: index < segmentCount - 1
|
decoration: BoxDecoration(
|
||||||
? BorderSide(
|
color: isFilled
|
||||||
color: RetroColors.panelBorderOuter.withValues(
|
? fillColor.withValues(alpha: blinkOpacity)
|
||||||
alpha: 0.3,
|
: emptyColor.withValues(alpha: 0.2),
|
||||||
),
|
border: Border(
|
||||||
width: 1,
|
right: index < segmentCount - 1
|
||||||
)
|
? BorderSide(
|
||||||
: BorderSide.none,
|
color:
|
||||||
|
RetroColors.panelBorderOuter.withValues(
|
||||||
|
alpha: 0.3,
|
||||||
|
),
|
||||||
|
width: 1,
|
||||||
|
)
|
||||||
|
: BorderSide.none,
|
||||||
|
),
|
||||||
|
),
|
||||||
),
|
),
|
||||||
|
);
|
||||||
|
}),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
// 숫자 오버레이 (바 중앙)
|
||||||
|
Text(
|
||||||
|
'$current/$max',
|
||||||
|
style: TextStyle(
|
||||||
|
fontFamily: 'PressStart2P',
|
||||||
|
fontSize: 12,
|
||||||
|
color: RetroColors.textLight.withValues(alpha: blinkOpacity),
|
||||||
|
shadows: [
|
||||||
|
Shadow(
|
||||||
|
color: Colors.black.withValues(alpha: 0.9),
|
||||||
|
blurRadius: 2,
|
||||||
),
|
),
|
||||||
),
|
const Shadow(color: Colors.black, blurRadius: 4),
|
||||||
);
|
],
|
||||||
}),
|
),
|
||||||
),
|
),
|
||||||
),
|
],
|
||||||
),
|
|
||||||
const SizedBox(width: 6),
|
|
||||||
// 수치 표시
|
|
||||||
SizedBox(
|
|
||||||
width: 60,
|
|
||||||
child: Text(
|
|
||||||
'$current/$max',
|
|
||||||
style: const TextStyle(
|
|
||||||
fontFamily: 'PressStart2P',
|
|
||||||
fontSize: 13,
|
|
||||||
color: RetroColors.textLight,
|
|
||||||
),
|
|
||||||
textAlign: TextAlign.right,
|
|
||||||
overflow: TextOverflow.ellipsis,
|
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
|
|||||||
Reference in New Issue
Block a user