Fixed a UI inconsistency in the inventory overlay

src/render.c

@@ -108,36 +108,33 @@ void render_items(const Item *items, int count) {
   }
 }
 
-void render_ui(const Player *p) {
+static void draw_hud_background(int hud_y, int hud_height, Color hud_bg, Color hud_border, Color magic_a, Color magic_b ) {
-  // HUD Panel
+    // Main HUD background with border
-  const int hud_y = MAP_HEIGHT * TILE_SIZE;
+    Rectangle ui_bg = {0, (float)hud_y, (float)SCREEN_WIDTH, (float)hud_height};
-  const int hud_height = 60;
+    DrawRectangleRec(ui_bg, hud_bg);
-  const Color hud_bg = {25, 20, 15, 255};          // dark parchment
+    DrawRectangleLines(0, hud_y, SCREEN_WIDTH, hud_height, hud_border);
-  const Color hud_border = {139, 119, 89, 255};    // bronze/brown border
+    DrawLine(0, hud_y + 1, SCREEN_WIDTH, hud_y + 1, magic_a);
-  const Color text_dim = {160, 150, 140, 255};     // dimmed text
+    DrawLine(0, hud_y + hud_height - 2, SCREEN_WIDTH, hud_y + hud_height - 2, magic_b); // Magic number 2, probably offset from window bottom
-  const Color text_bright = {240, 230, 220, 255};  // bright text
+}
 
-  // Main HUD background with border
+static void draw_section_divider(int hud_y, int section_x, int border_gap, int hud_height, Color magic_a, Color magic_b) {
-  Rectangle ui_bg = {0, (float)hud_y, (float)SCREEN_WIDTH, (float)hud_height};
+  DrawLine(section_x, hud_y + border_gap, section_x, hud_y + hud_height - border_gap, magic_a);
-  DrawRectangleRec(ui_bg, hud_bg);
+  DrawLine(section_x + 1, hud_y + border_gap, section_x + 1, hud_y + hud_height - border_gap, magic_b);
-  DrawRectangleLines(0, hud_y, SCREEN_WIDTH, hud_height, hud_border);
+}
-  DrawLine(0, hud_y + 1, SCREEN_WIDTH, hud_y + 1, (Color){60, 55, 50, 255});
-  DrawLine(0, hud_y + hud_height - 2, SCREEN_WIDTH, hud_y + hud_height - 2, (Color){15, 12, 10, 255});
-
-  // Section dividers
-  int section1_end = 180;  // after portrait + HP bar
-  int section2_end = 310;  // after stats
-  int section3_end = 480;  // after equipment
-
-  DrawLine(section1_end, hud_y + 5, section1_end, hud_y + hud_height - 5, (Color){60, 55, 50, 255});
-  DrawLine(section1_end + 1, hud_y + 5, section1_end + 1, hud_y + hud_height - 5, (Color){15, 12, 10, 255});
-
-  DrawLine(section2_end, hud_y + 5, section2_end, hud_y + hud_height - 5, (Color){60, 55, 50, 255});
-  DrawLine(section2_end + 1, hud_y + 5, section2_end + 1, hud_y + hud_height - 5, (Color){15, 12, 10, 255});
 
+static void draw_player_life(
+  const Player *p, int hud_y, Color text_bright, Color text_dim, Color full_health,
+  Color low_health, Color crit_health, Color hp_background, Color hp_outline
+  ) {
+  // HP Bar, to the right of portrait
   int portrait_x = 8;
   int portrait_y = hud_y + 8;
   int portrait_size = 44;
+  int bar_x = portrait_x + portrait_size + 8;
+  int bar_y = hud_y + 22;
+  int bar_width = 100;
+  int bar_height = 16;
+
 
   // FIXME: for now this is just a blue square indicating the player. Once we
   // model the player, add classes, sprites, etc. this will need to be revisited.
@@ -145,29 +142,23 @@ void render_ui(const Player *p) {
   DrawRectangle(portrait_x + 2, portrait_y + 2, portrait_size - 4, portrait_size - 4, BLUE);
   DrawRectangleLines(portrait_x, portrait_y, portrait_size, portrait_size, (Color){139, 119, 89, 255});
 
-  // HP Bar, to the right of portrait
-  int bar_x = portrait_x + portrait_size + 8;
-  int bar_y = hud_y + 20;
-  int bar_width = 100;
-  int bar_height = 16;
-
   // HP Label, above bar
   DrawText("HP", bar_x, bar_y - 11, 9, text_dim);
 
   // HP Bar background
-  DrawRectangle(bar_x, bar_y, bar_width, bar_height, (Color){20, 15, 15, 255});
+  DrawRectangle(bar_x, bar_y, bar_width, bar_height, hp_background);
-  DrawRectangleLines(bar_x, bar_y, bar_width, bar_height, (Color){80, 70, 60, 255});
+  DrawRectangleLines(bar_x, bar_y, bar_width, bar_height, hp_outline);
 
   // HP Bar fill
   float hp_percent = (float)p->hp / p->max_hp;
   int fill_width = (int)(bar_width * hp_percent);
   Color hp_color;
   if (hp_percent > 0.6f) {
-    hp_color = (Color){60, 180, 60, 255};
+    hp_color = full_health;
   } else if (hp_percent > 0.3f) {
-    hp_color = (Color){200, 180, 40, 255};
+    hp_color = low_health;
   } else {
-    hp_color = (Color){200, 60, 60, 255};
+    hp_color = crit_health;
   }
 
   if (fill_width > 0) {
@@ -178,7 +169,7 @@ void render_ui(const Player *p) {
   char hp_text[32];
   snprintf(hp_text, sizeof(hp_text), "%d/%d", p->hp, p->max_hp);
   int hp_text_w = MeasureText(hp_text, 10);
-  DrawText(hp_text, bar_x + (bar_width - hp_text_w) / 2, bar_y + 2, 10, WHITE);
+  DrawText(hp_text, bar_x + (bar_width - hp_text_w) / 2, bar_y + 3, 10, WHITE);
 
   // Status effects
   int effect_x = bar_x;
@@ -218,69 +209,110 @@ void render_ui(const Player *p) {
     }
   }
 
-  int stats_x = section1_end + 15;
+}
-  int stats_y = hud_y + 12;
-  int stat_spacing = 40;
 
-  // Floor
+static void draw_player_stats(
-  char floor_text[16];
+    const Player *p, int hud_y, int stats_x, Color text_bright, Color text_dim
-  snprintf(floor_text, sizeof(floor_text), "F%d", p->floor);
+) {
-  DrawText(floor_text, stats_x, stats_y, 14, text_bright);
+    int stats_y = hud_y + 12;
-  DrawText("Floor", stats_x, stats_y + 16, 9, text_dim);
+    int stat_spacing = 40;
 
-  // ATK
+    char floor_text[16];
-  char atk_text[16];
+    snprintf(floor_text, sizeof(floor_text), "F%d", p->floor);
-  snprintf(atk_text, sizeof(atk_text), "%d", p->attack);
+    DrawText(floor_text, stats_x, stats_y, 14, text_bright);
-  DrawText(atk_text, stats_x + stat_spacing, stats_y, 14, YELLOW);
+    DrawText("Floor", stats_x, stats_y + 16, 9, text_dim);
-  DrawText("ATK", stats_x + stat_spacing, stats_y + 16, 9, text_dim);
 
-  // DEF
+    char atk_text[16];
-  char def_text[16];
+    snprintf(atk_text, sizeof(atk_text), "%d", p->attack);
-  snprintf(def_text, sizeof(def_text), "%d", p->defense);
+    DrawText(atk_text, stats_x + stat_spacing, stats_y, 14, YELLOW);
-  DrawText(def_text, stats_x + stat_spacing * 2, stats_y, 14, (Color){100, 150, 255, 255});
+    DrawText("ATK", stats_x + stat_spacing, stats_y + 16, 9, text_dim);
-  DrawText("DEF", stats_x + stat_spacing * 2, stats_y + 16, 9, text_dim);
 
-  int equip_x = section2_end + 15;
+    char def_text[16];
-  int equip_y = hud_y + 8;
+    snprintf(def_text, sizeof(def_text), "%d", p->defense);
+    DrawText(def_text, stats_x + stat_spacing * 2, stats_y, 14, (Color){100, 150, 255, 255});
+    DrawText("DEF", stats_x + stat_spacing * 2, stats_y + 16, 9, text_dim);
+}
 
-  // Weapon slot
+static void draw_equipment(
-  DrawText("WEAPON", equip_x, equip_y, 9, text_dim);
+    const Player *p, int hud_y, int equip_x, Color text_dim
-  if (p->has_weapon) {
+) {
-    const char *weapon_name = item_get_name(&p->equipped_weapon);
+    int equip_y = hud_y + 8;
-    if (weapon_name) {
+
-      char weapon_text[64];
+    DrawText("WEAPON", equip_x, equip_y, 9, text_dim);
-      snprintf(weapon_text, sizeof(weapon_text), "%s +%d [%s]", weapon_name, p->equipped_weapon.power,
+    if (p->has_weapon) {
-               dmg_class_get_short(p->equipped_weapon.dmg_class));
+        const char *weapon_name = item_get_name(&p->equipped_weapon);
-      DrawText(weapon_text, equip_x, equip_y + 11, 10, (Color){255, 220, 100, 255});
+        if (weapon_name) {
+            char weapon_text[64];
+            snprintf(weapon_text, sizeof(weapon_text), "%s +%d [%s]",
+                     weapon_name, p->equipped_weapon.power,
+                     dmg_class_get_short(p->equipped_weapon.dmg_class));
+            DrawText(weapon_text, equip_x, equip_y + 11, 10, (Color){255, 220, 100, 255});
+        }
+    } else {
+        DrawText("None [IMP]", equip_x, equip_y + 11, 10, (Color){80, 75, 70, 255});
     }
-  } else {
-    DrawText("None [IMP]", equip_x, equip_y + 11, 10, (Color){80, 75, 70, 255});
-  }
 
-  // Armor slot
+    DrawText("ARMOR", equip_x, equip_y + 26, 9, text_dim);
-  DrawText("ARMOR", equip_x, equip_y + 26, 9, text_dim);
+    if (p->has_armor) {
-  if (p->has_armor) {
+        const char *armor_name = item_get_name(&p->equipped_armor);
-    const char *armor_name = item_get_name(&p->equipped_armor);
+        if (armor_name) {
-    if (armor_name) {
+            char armor_text[48];
-      char armor_text[48];
+            snprintf(armor_text, sizeof(armor_text), "%s +%d",
-      snprintf(armor_text, sizeof(armor_text), "%s +%d", armor_name, p->equipped_armor.power);
+                     armor_name, p->equipped_armor.power);
-      DrawText(armor_text, equip_x, equip_y + 37, 10, (Color){100, 150, 255, 255});
+            DrawText(armor_text, equip_x, equip_y + 37, 10, (Color){100, 150, 255, 255});
+        }
+    } else {
+        DrawText("None", equip_x, equip_y + 37, 10, (Color){80, 75, 70, 255});
     }
-  } else {
+}
-    DrawText("None", equip_x, equip_y + 37, 10, (Color){80, 75, 70, 255});
-  }
 
-  int ctrl_x = section3_end + 20;
+static void draw_controls_inv(const Player *p, int hud_y, int ctrl_x, Color controls_color) {
-  int ctrl_y = hud_y + 14;
+    int ctrl_y = hud_y + 14;
+    DrawText("[WASD] Move   [G] Pickup   [I] Inventory   [U] Use",
+             ctrl_x, ctrl_y, 11, controls_color);
+    DrawText("[E] Equip   [D] Drop   [Q] Quit",
+             ctrl_x, ctrl_y + 16, 11, controls_color);
 
-  DrawText("[WASD] Move   [G] Pickup   [I] Inventory   [U] Use", ctrl_x, ctrl_y, 11, (Color){139, 119, 89, 255});
+    char inv_text[16];
-  DrawText("[E] Equip   [D] Drop   [Q] Quit", ctrl_x, ctrl_y + 16, 11, (Color){139, 119, 89, 255});
+    snprintf(inv_text, sizeof(inv_text), "INV: %d/%d", p->inventory_count, MAX_INVENTORY);
+    int inv_width = MeasureText(inv_text, 10);
+    DrawText(inv_text, SCREEN_WIDTH - inv_width - 10, hud_y + 5, 10, GREEN);
+}
 
-  // INV count in top-right corner of HUD
+void render_ui(const Player *p) {
-  char inv_text[16];
+  // HUD Panel
-  snprintf(inv_text, sizeof(inv_text), "INV: %d/%d", p->inventory_count, MAX_INVENTORY);
+  const int hud_y = MAP_HEIGHT * TILE_SIZE;
-  int inv_width = MeasureText(inv_text, 10);
+  const int hud_height = 60;
-  DrawText(inv_text, SCREEN_WIDTH - inv_width - 10, hud_y + 5, 10, GREEN);
+  const Color hud_bg = {25, 20, 15, 255};          // dark parchment
+  const Color hud_border = {139, 119, 89, 255};    // bronze/brown border
+  const Color text_dim = {160, 150, 140, 255};     // dimmed text
+  const Color text_bright = {240, 230, 220, 255};  // bright text
+  const Color magic_color_a = {60, 55, 50, 255};   // I don't know what exactly this is (may be top/left colouring)
+  const Color magic_color_b = {15, 12, 10, 255};   // See above (may be bottom/right colouring)
+  const Color full_health = {60, 180, 60, 255};
+  const Color low_health = {200, 180, 40, 255};
+  const Color crit_health = {200, 60, 60, 255};
+  const Color health_bar_background = {20, 15, 15, 255};
+  const Color health_bar_outline = {80, 70, 60, 255};
+
+  draw_hud_background(hud_y, hud_height, hud_bg, hud_border, magic_color_a, magic_color_b);
+
+  // Section dividers
+  int section1_end = 180;  // after portrait + HP bar
+  int section2_end = 310;  // after stats
+  int section3_end = 480;  // after equipment
+
+  draw_section_divider(hud_y, section1_end, 5, hud_height, magic_color_a, magic_color_b);
+  draw_section_divider(hud_y, section2_end, 5, hud_height, magic_color_a, magic_color_b);
+
+  draw_player_life(p, hud_y, text_bright, text_dim, full_health, low_health,
+                   crit_health, health_bar_background, health_bar_outline);
+
+  draw_player_stats(p, hud_y, section1_end + 15, text_bright, text_dim);
+
+  draw_equipment(p, hud_y, section2_end + 15, text_dim);
+
+  draw_controls_inv(p, hud_y, section3_end + 20, hud_border);
 }
 
 void render_action_log(const char log[5][128], int count, int head) {
@@ -308,7 +340,7 @@ void render_action_log(const char log[5][128], int count, int head) {
   DrawText("MESSAGE LOG", log_x + 8, log_y + 6, 10, (Color){180, 160, 130, 255});
 
   // Separator line under title
-  DrawLine(log_x + 4, log_y + 22, log_x + log_width - 5, log_y + 22, log_border_dark);
+  DrawLine(log_x + 4, log_y + 22, log_x + log_width - 4, log_y + 22, log_border_dark);
 
   // Log entries
   int text_x = log_x + 8;
@@ -338,7 +370,7 @@ void render_action_log(const char log[5][128], int count, int head) {
 void render_inventory_overlay(const Player *p, int selected) {
   // Overlay dimensions
   int ov_width = 360;
-  int ov_height = 300;
+  int ov_height = 337;
   Rectangle overlay = {(float)(SCREEN_WIDTH - ov_width) / 2, (float)(SCREEN_HEIGHT - ov_height) / 2 - 60,
                        (float)ov_width, (float)ov_height};
   DrawRectangleRec(overlay, (Color){12, 12, 12, 252});
@@ -362,8 +394,8 @@ void render_inventory_overlay(const Player *p, int selected) {
 
       // Selection highlight
       if (i == selected) {
-        DrawRectangle((int)overlay.x + 6, y_pos, (int)overlay.width - 12, row_height - 2, (Color){45, 45, 45, 255});
+        DrawRectangle((int)overlay.x + 6, y_pos - 2, (int)overlay.width - 12, row_height - 2, (Color){45, 45, 45, 255});
-        DrawRectangleLines((int)overlay.x + 6, y_pos, (int)overlay.width - 12, row_height - 2,
+        DrawRectangleLines((int)overlay.x + 6, y_pos - 2, (int)overlay.width - 12, row_height - 2,
                            (Color){180, 160, 80, 255});
       }
 
@@ -583,6 +615,7 @@ void render_end_screen(int is_victory, int kills, int items, int damage_dealt, i
   }
 }
 
+// Floating message popup
 void render_message(const char *message) {
   if (message == NULL)
     return;