Files
echoes-of-the-ash/docs/development/UI_EXAMPLES.md
Joan 861f3b8a36 Add visual progress bars and refactor handler modules
- Implement visual HP/Stamina/XP bars using Unicode characters (██░)
- Refactor handlers.py (1308 → 377 lines) into specialized modules:
  * action_handlers.py - World interaction and status display
  * inventory_handlers.py - Inventory management
  * combat_handlers.py - Combat actions
  * profile_handlers.py - Character stats with visual bars
  * corpse_handlers.py - Looting system
  * pickup_handlers.py - Item collection
- Add utility functions: create_progress_bar(), format_stat_bar()
- Organize all documentation into docs/ structure
- Create comprehensive documentation index with navigation
- Add UI examples showing before/after visual improvements
2025-10-19 00:23:44 +02:00

4.8 KiB

Visual UI Examples

Before & After Comparison

Main Menu / Player Status

Before

Location: Downtown Plaza
Status: Healthy
❤️ HP: 70/100 | ⚡️ Stamina: 50/100
🎒 Load: 15/50 kg | 30/100 vol
⚔️ Equipped: 🔧 Wrench, 🎒 Backpack
━━━━━━━━━━━━━━━━━━━━
A desolate plaza, once bustling with life...

After

📍 Location: Downtown Plaza
❤️ HP: ███████░░░ 70% (70/100)
⚡ Stamina: █████░░░░░ 50% (50/100)
🎒 Load: 15/50 kg | 30/100 vol
⚔️ Equipped: 🔧 Wrench, 🎒 Backpack
━━━━━━━━━━━━━━━━━━━━
A desolate plaza, once bustling with life...

Player Profile

Before

👤 PlayerName
━━━━━━━━━━━━━━━━━━━━

Level: 5
XP: 240/600 (40%)
⭐ Unspent Points: 2

Health: 70/100 ❤️
Stamina: 50/100 ⚡

Stats:
💪 Strength: 12
🏃 Agility: 8
💚 Endurance: 10
🧠 Intellect: 5

Combat:
⚔️ Base Damage: 13
🛡️ Flee Chance: 58%
💚 Stamina Regen: 2/cycle

After

👤 PlayerName
━━━━━━━━━━━━━━━━━━━━

Level: 5
⭐ XP: ████░░░░░░ 40% (240/600)
💎 Unspent Points: 2

❤️ HP: ███████░░░ 70% (70/100)
⚡ Stamina: █████░░░░░ 50% (50/100)

Stats:
💪 Strength: 12
🏃 Agility: 8
💚 Endurance: 10
🧠 Intellect: 5

Combat:
⚔️ Base Damage: 13
🛡️ Flee Chance: 58%
💚 Stamina Regen: 2/cycle

Visual States

Critical Health

❤️ HP: ██░░░░░░░░ 20% (20/100)

Low Stamina

⚡ Stamina: ██░░░░░░░░ 20% (20/100)

Half Values

❤️ HP: █████░░░░░ 50% (50/100)
⚡ Stamina: █████░░░░░ 50% (50/100)

Full Values

❤️ HP: ██████████ 100% (100/100)
⚡ Stamina: ██████████ 100% (100/100)

Empty/Dead

❤️ HP: ░░░░░░░░░░ 0% (0/100)
⚡ Stamina: ░░░░░░░░░░ 0% (0/100)

XP Progress Examples

Just Leveled Up

⭐ XP: ░░░░░░░░░░ 0% (0/600)

Quarter Progress

⭐ XP: ██░░░░░░░░ 25% (150/600)

Half Progress

⭐ XP: █████░░░░░ 50% (300/600)

Almost Level Up

⭐ XP: █████████░ 95% (570/600)

Character Build Examples

Tank Build (High HP/Endurance)

👤 TankWarrior
━━━━━━━━━━━━━━━━━━━━

Level: 10
⭐ XP: ███████░░░ 65% (780/1200)

❤️ HP: ████████░░ 80% (160/200)
⚡ Stamina: ██████░░░░ 60% (90/150)

Stats:
💪 Strength: 15
🏃 Agility: 5
💚 Endurance: 20
🧠 Intellect: 5

Glass Cannon (High Damage, Low HP)

👤 GlassCannon
━━━━━━━━━━━━━━━━━━━━

Level: 10
⭐ XP: ███████░░░ 65% (780/1200)

❤️ HP: ██████░░░░ 60% (60/100)
⚡ Stamina: ████████░░ 80% (120/150)

Stats:
💪 Strength: 25
🏃 Agility: 10
💚 Endurance: 5
🧠 Intellect: 5

Balanced Build

👤 AllRounder
━━━━━━━━━━━━━━━━━━━━

Level: 10
⭐ XP: ███████░░░ 65% (780/1200)

❤️ HP: ███████░░░ 70% (105/150)
⚡ Stamina: ███████░░░ 70% (88/125)

Stats:
💪 Strength: 15
🏃 Agility: 12
💚 Endurance: 12
🧠 Intellect: 6

Combat Display Examples

Player vs Enemy (Active Combat)

⚔️ Combat with 🐕 Feral Dog!

A mangy, aggressive dog with matted fur...

🐕 Enemy HP: ██████░░░░ 60% (30/50)
❤️ Your HP: ███████░░░ 70% (70/100)

🎯 Your turn! What will you do?

[⚔️ Attack] [🏃 Flee] [💊 Use Item]

Low Health Warning

⚠️ A 🧟 Infected Human appears!

A shambling, infected survivor...

🧟 Enemy HP: ████████░░ 80% (80/100)
❤️ Your HP: ██░░░░░░░░ 20% (20/100)  ⚠️ CRITICAL!

🎯 Your turn! What will you do?

Inventory Display

Inventory Load Bars (Future Enhancement)

🎒 Your Inventory:
📊 Weight: █████░░░░░ 50% (25/50 kg)
📦 Volume: ███░░░░░░░ 30% (30/100 vol)

Items:
🔧 Wrench x1
🥫 Canned Food x3
💊 Bandage x5

Mobile Display

All bars are designed to work perfectly on mobile:

  • Unicode characters supported on all platforms
  • Monospaced alignment for consistent display
  • Clear even on small screens
  • Works in all Telegram clients

Implementation Date: October 19, 2025
Status: Live in Production