UI/UX: Fix alignment with right-aligned stat bars + optimize combat display

BREAKING: Changed format_stat_bar() to right-aligned format
- Bars now left-aligned, emoji+label on right
- Works with Telegram's proportional font (spaces don't work)
- Format: {bar} {percentage}% ({current}/{max}) {emoji} {label}

Combat improvements:
- Show BOTH HP bars on every turn (player + enemy)
- Eliminates redundant enemy HP display
- Better tactical awareness with complete state info

Files modified:
- bot/utils.py: Right-aligned format_stat_bar()
- bot/combat.py: Both HP bars on player/enemy turns
- bot/action_handlers.py: Fixed emoji handling
- bot/combat_handlers.py: Updated combat status display
- docs/development/UI_UX_IMPROVEMENTS.md: Complete documentation

Example output:
██████████ 100% (100/100) ❤️ Your HP
███░░░░░░░ 30% (15/50) 🐕 Feral Dog
This commit is contained in:
Joan
2025-10-20 12:58:41 +02:00
parent dfea27f9cb
commit c78c902b82
5 changed files with 179 additions and 155 deletions

View File

@@ -46,31 +46,35 @@ def create_progress_bar(current: int, maximum: int, length: int = 10, filled_cha
def format_stat_bar(label: str, emoji: str, current: int, maximum: int, bar_length: int = 10, label_width: int = 7) -> str:
"""
Format a stat (HP, Stamina, etc.) with visual progress bar.
Uses right-aligned label format to avoid alignment issues with Telegram's proportional font.
Args:
label: Stat label (e.g., "HP", "Stamina")
emoji: Emoji to display (e.g., "❤️", "")
label: Stat label (e.g., "HP", "Stamina", "Your HP")
emoji: Emoji to display (e.g., "❤️", "", "🐕")
current: Current value
maximum: Maximum value
bar_length: Length of the progress bar
label_width: Width to pad label to for alignment (default 7)
label_width: Not used, kept for backwards compatibility
Returns:
Formatted string with bar and percentage
Formatted string with bar on left, label on right
Examples:
>>> format_stat_bar("HP", "❤️", 75, 100)
"❤️ HP: ███████░░░ 75% (75/100)"
"███████░░░ 75% (75/100) ❤️ HP"
>>> format_stat_bar("Stamina", "", 50, 100)
"⚡ Stamina: █████░░░░░ 50% (50/100)"
"█████░░░░░ 50% (50/100) ⚡ Stamina"
"""
bar = create_progress_bar(current, maximum, bar_length)
percentage = int((current / maximum * 100)) if maximum > 0 else 0
# Pad label for alignment
padded_label = f"{label}:".ljust(label_width + 1)
return f"{emoji} {padded_label} {bar} {percentage}% ({current}/{maximum})"
# Right-aligned format: bar first, then stats, then emoji + label
# This way bars are always left-aligned regardless of label length
if emoji:
return f"{bar} {percentage}% ({current}/{maximum}) {emoji} {label}"
else:
# If no emoji provided, just use label
return f"{bar} {percentage}% ({current}/{maximum}) {label}"