/ BATTLE_UI_ENHANCEMENTS.md
BATTLE_UI_ENHANCEMENTS.md
1 # Battle System UI Enhancements 2 3 ## Overview 4 This document describes the Pokemon Red-style battle system enhancements added to the GUNRPG console client. 5 6 ## Features Implemented 7 8 ### 1. Pokemon Red-Style Battle Log 📋 9 The combat screen now features a dedicated "BATTLE LOG" panel that displays real-time combat events in a Pokemon-style format: 10 11 ``` 12 ┌─── 📋 BATTLE LOG ────────────────────────────┐ 13 │ Player fired a shot! │ 14 │ Enemy took 15 damage (Torso)! │ 15 │ Enemy fired a shot! │ 16 │ Player missed! │ 17 │ Player started walking. │ 18 │ Enemy reloaded. │ 19 │ │ 20 └──────────────────────────────────────────────┘ 21 ``` 22 23 **Features:** 24 - Shows last 6 combat events 25 - Actor names prefixed to messages 26 - Event types: ShotFired, Damage, Miss, Reload, ADS, Movement, Cover, Suppression 27 - Updates automatically after each turn advance 28 29 ### 2. Enhanced Progress Bars 30 31 **HP Bars:** Visual health indicators for both player and enemy 32 ``` 33 HP: [████████████████ ] 80/100 34 ``` 35 36 **Stamina Bar:** Shows player stamina for tactical decisions 37 ``` 38 STA: [███████████ ] 75/100 39 ``` 40 41 ### 3. Cover State Visualization 🛡️ 42 43 ASCII art representation of cover status: 44 - `COVER: [ EXPOSED ]` - No cover, vulnerable 45 - `COVER: [ ▄ PARTIAL ▄ ]` - Partial cover, some protection 46 - `COVER: [███ FULL ███]` - Full cover, maximum protection 47 48 ### 4. Combat Stats Display 49 50 **Player Panel:** 51 ``` 52 ┌─── 🎮 PLAYER ─────────────┐ 53 │ PlayerName │ 54 │ │ 55 │ HP: [████████████] 100/100│ 56 │ STA: [███████████] 75/100 │ 57 │ AMMO: 28/30 [ADS] │ 58 │ │ 59 │ COVER: [ ▄ PARTIAL ▄ ] │ 60 │ MOVE: Walking │ 61 └────────────────────────────┘ 62 ``` 63 64 **Enemy Panel:** 65 ``` 66 ┌─── 💀 ENEMY ──────────────┐ 67 │ Enemy (LVL 2) │ 68 │ │ 69 │ HP: [███████████] 85/100 │ 70 │ AMMO: 25/30 │ 71 │ DIST: 15.0m │ 72 │ COVER: Partial │ 73 └────────────────────────────┘ 74 ``` 75 76 ### 5. Weapon Stance Indicator 77 78 Shows current aiming mode: 79 - `[ADS]` - Aim Down Sights (better accuracy) 80 - `[HIP]` - Hip Fire (faster but less accurate) 81 82 ## Technical Implementation 83 84 ### Backend Changes 85 86 1. **BattleLogFormatter** (`GUNRPG.Application/Combat/BattleLogFormatter.cs`) 87 - Converts combat system events into human-readable messages 88 - Handles event types: ShotFired, Damage, Miss, Reload, ADS, Movement, Cover 89 - Limits to 20 most recent events 90 91 2. **BattleLogEntryDto** (`GUNRPG.Application/Dtos/BattleLogEntryDto.cs`) 92 - DTO for individual battle log entries 93 - Contains: EventType, TimeMs, Message, ActorName 94 95 3. **CombatSessionDto Enhancement** 96 - Added `List<BattleLogEntryDto> BattleLog` property 97 - Automatically populated from combat system ExecutedEvents 98 99 ### Frontend Changes 100 101 1. **ConsoleClient DTO Classes** 102 - Added `CombatSessionDto`, `PlayerStateDto`, `PetStateDto`, `BattleLogEntryDto` 103 - Enables proper JSON deserialization of API responses 104 105 2. **UI Helper Methods** (`UI` class) 106 - `CreateBattleLogDisplay()` - Pokemon-style log rendering 107 - `CreateCoverVisual()` - ASCII art cover visualization 108 - `CreateProgressBar()` - Enhanced with proper clamping 109 110 3. **Enhanced Combat Screen** 111 - Emoji headers (⚔, 🎮, 💀, 📋) for visual appeal 112 - Two-column layout for player vs enemy 113 - Dedicated battle log section 114 - Additional stats (stamina, cover visual, ADS indicator) 115 116 ## Event Types Logged 117 118 | Event Type | Description | Example Message | 119 |------------|-------------|-----------------| 120 | ShotFired | Operator fires weapon | "Player fired a shot!" | 121 | Damage | Hit lands on target | "Enemy took 15 damage (Torso)!" | 122 | Miss | Shot misses target | "Player missed!" | 123 | Reload | Weapon reloaded | "Enemy reloaded." | 124 | ADS | Aim down sights complete | "Player aimed down sights." | 125 | Movement | Movement started/stopped | "Enemy started walking." | 126 | Cover | Enter/exit cover | "Player took partial cover." | 127 | Suppression | Suppressing fire | "Enemy is suppressing!" | 128 129 ## Visual Comparison 130 131 ### Before: 132 - Basic HP bars only 133 - No battle log 134 - Simple text stats 135 - No cover visualization 136 137 ### After: 138 - HP + Stamina bars 139 - Pokemon-style scrolling battle log (6 most recent events) 140 - ASCII art cover visualization 141 - ADS/HIP stance indicator 142 - Emoji icons for sections 143 - Enhanced layout with more tactical information 144 145 ## Usage 146 147 1. Start a mission from Base Camp 148 2. Navigate to Combat Session screen 149 3. Press "ADVANCE TURN" to execute combat 150 4. Watch battle log update with events 151 5. Monitor HP, stamina, cover, and ammo status 152 6. Use battle log to understand combat flow 153 154 ## Future Enhancements 155 156 Potential additions: 157 - Color-coded messages (damage in red, heals in green) 158 - Sound effects for major events 159 - Animation effects (screen shake on damage) 160 - Expanded log with scrolling view 161 - Combat statistics summary 162 - Replay feature to review previous turns