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:
24
bot/utils.py
24
bot/utils.py
@@ -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}"
|
||||
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user