From 46633676736f3ba684647cb6adec4502346da3c2 Mon Sep 17 00:00:00 2001 From: NotAShelf Date: Wed, 8 Apr 2026 12:04:46 +0300 Subject: [PATCH] render: sectioned new HUD layout with portrait; polish action log panel Signed-off-by: NotAShelf Change-Id: I8a46ddecadd45712c9bef32d061783896a6a6964 --- src/render.c | 204 +++++++++++++++++++++++++++++++++++++++------------ 1 file changed, 156 insertions(+), 48 deletions(-) diff --git a/src/render.c b/src/render.c index 0c27419..7a1f274 100644 --- a/src/render.c +++ b/src/render.c @@ -109,27 +109,58 @@ void render_items(const Item *items, int count) { } void render_ui(const Player *p) { - // UI background bar (taller for two rows) - Rectangle ui_bg = {0, (float)(MAP_HEIGHT * TILE_SIZE), (float)SCREEN_WIDTH, 60}; - DrawRectangleRec(ui_bg, (Color){15, 15, 15, 255}); + // HUD Panel + const int hud_y = MAP_HEIGHT * TILE_SIZE; + const int hud_height = 60; + 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 - // Draw dividing line - DrawLine(0, MAP_HEIGHT * TILE_SIZE, SCREEN_WIDTH, MAP_HEIGHT * TILE_SIZE, (Color){50, 50, 50, 255}); + // Main HUD background with border + Rectangle ui_bg = {0, (float)hud_y, (float)SCREEN_WIDTH, (float)hud_height}; + DrawRectangleRec(ui_bg, hud_bg); + 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}); - // HP Bar (row 1, left) - int bar_x = 10; - int bar_y = MAP_HEIGHT * TILE_SIZE + 10; - int bar_width = 140; - int bar_height = 18; + // Section dividers + int section1_end = 180; // after portrait + HP bar + int section2_end = 310; // after stats + int section3_end = 480; // after equipment - // Bar background - DrawRectangle(bar_x, bar_y, bar_width, bar_height, (Color){30, 30, 30, 255}); + 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}); - // Bar fill based on HP percentage + 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}); + + int portrait_x = 8; + int portrait_y = hud_y + 8; + int portrait_size = 44; + + // 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. + DrawRectangle(portrait_x, portrait_y, portrait_size, portrait_size, (Color){30, 30, 45, 255}); + 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}); + DrawRectangleLines(bar_x, bar_y, bar_width, bar_height, (Color){80, 70, 60, 255}); + + // HP Bar fill float hp_percent = (float)p->hp / p->max_hp; int fill_width = (int)(bar_width * hp_percent); - - // Color gradient: green > yellow > red Color hp_color; if (hp_percent > 0.6f) { hp_color = (Color){60, 180, 60, 255}; @@ -138,16 +169,20 @@ void render_ui(const Player *p) { } else { hp_color = (Color){200, 60, 60, 255}; } - DrawRectangle(bar_x, bar_y, fill_width, bar_height, hp_color); - // HP text inside bar + if (fill_width > 0) { + DrawRectangle(bar_x + 1, bar_y + 1, fill_width - 2, bar_height - 2, hp_color); + } + + // HP text, centered in bar char hp_text[32]; snprintf(hp_text, sizeof(hp_text), "%d/%d", p->hp, p->max_hp); - int hp_text_w = MeasureText(hp_text, 14); - DrawText(hp_text, bar_x + (bar_width - hp_text_w) / 2, bar_y + 2, 14, WHITE); + int hp_text_w = MeasureText(hp_text, 10); + DrawText(hp_text, bar_x + (bar_width - hp_text_w) / 2, bar_y + 2, 10, WHITE); - // Status effect indicators next to HP bar - int effect_x = bar_x + bar_width + 5; + // Status effects + int effect_x = bar_x; + int effect_y = bar_y + bar_height + 5; for (int i = 0; i < p->effect_count && i < MAX_EFFECTS; i++) { Color eff_color; const char *eff_label = ""; @@ -178,52 +213,124 @@ void render_ui(const Player *p) { if (p->effects[i].duration > 0) { char eff_text[16]; snprintf(eff_text, sizeof(eff_text), "%s%d", eff_label, p->effects[i].duration); - DrawText(eff_text, effect_x, bar_y, 12, eff_color); - effect_x += 40; + DrawText(eff_text, effect_x, effect_y, 9, eff_color); + effect_x += 28; } } - // Stats row 1: Floor, ATK, DEF, Inv - int stats_x_start = (effect_x > bar_x + bar_width + 15) ? effect_x + 10 : bar_x + bar_width + 15; - int stats_y = bar_y; - DrawText("F1", stats_x_start, stats_y, 14, WHITE); - DrawText("ATK", stats_x_start + 35, stats_y, 14, YELLOW); - DrawText("DEF", stats_x_start + 85, stats_y, 14, BLUE); - DrawText("INV", stats_x_start + 130, stats_y, 14, GREEN); + int stats_x = section1_end + 15; + int stats_y = hud_y + 12; + int stat_spacing = 40; - // Row 2: equipment slots and controls - int row2_y = stats_y + 24; + // Floor + char floor_text[16]; + snprintf(floor_text, sizeof(floor_text), "F%d", p->floor); + DrawText(floor_text, stats_x, stats_y, 14, text_bright); + DrawText("Floor", stats_x, stats_y + 16, 9, text_dim); - // Equipment (left side of row 2) + // ATK + char atk_text[16]; + snprintf(atk_text, sizeof(atk_text), "%d", p->attack); + DrawText(atk_text, stats_x + stat_spacing, stats_y, 14, YELLOW); + DrawText("ATK", stats_x + stat_spacing, stats_y + 16, 9, text_dim); + + // DEF + char def_text[16]; + 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); + + int equip_x = section2_end + 15; + int equip_y = hud_y + 8; + + // Weapon slot + DrawText("WEAPON", equip_x, equip_y, 9, text_dim); if (p->has_weapon) { - char weapon_text[64]; - snprintf(weapon_text, sizeof(weapon_text), "Wpn:%s +%d [%s]", item_get_name(&p->equipped_weapon), - p->equipped_weapon.power, dmg_class_get_short(p->equipped_weapon.dmg_class)); - DrawText(weapon_text, 10, row2_y, 12, YELLOW); + const char *weapon_name = item_get_name(&p->equipped_weapon); + 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("Wpn:--- [IMP]", 10, row2_y, 12, (Color){60, 60, 60, 255}); + 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); if (p->has_armor) { - char armor_text[48]; - snprintf(armor_text, sizeof(armor_text), "Arm:%s +%d", item_get_name(&p->equipped_armor), p->equipped_armor.power); - DrawText(armor_text, 150, row2_y, 12, BLUE); + const char *armor_name = item_get_name(&p->equipped_armor); + if (armor_name) { + char armor_text[48]; + snprintf(armor_text, sizeof(armor_text), "%s +%d", armor_name, p->equipped_armor.power); + DrawText(armor_text, equip_x, equip_y + 37, 10, (Color){100, 150, 255, 255}); + } } else { - DrawText("Arm:---", 150, row2_y, 12, (Color){60, 60, 60, 255}); + DrawText("None", equip_x, equip_y + 37, 10, (Color){80, 75, 70, 255}); } - // Controls hint (right side) - DrawText("[G] Pickup [I] Inventory [E] Equip [D] Drop", 350, row2_y, 12, (Color){70, 70, 70, 255}); + int ctrl_x = section3_end + 20; + int ctrl_y = hud_y + 14; + + DrawText("[WASD] Move [G] Pickup [I] Inventory [U] Use", ctrl_x, ctrl_y, 11, (Color){139, 119, 89, 255}); + DrawText("[E] Equip [D] Drop [Q] Quit", ctrl_x, ctrl_y + 16, 11, (Color){139, 119, 89, 255}); + + // INV count in top-right corner of HUD + char inv_text[16]; + 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); } void render_action_log(const char log[5][128], int count, int head) { - int log_x = 10; - int log_y = MAP_HEIGHT * TILE_SIZE - 75; + // Roguelike scroll/log panel styling + const int log_width = 250; + const int log_height = 90; + const int log_x = 2; + const int log_y = MAP_HEIGHT * TILE_SIZE - log_height - 5; + + const Color log_bg = {15, 12, 10, 230}; // dark parchment + const Color log_border = {100, 85, 65, 255}; // bronze border + const Color log_border_dark = {60, 50, 40, 255}; // shadow + + // Background panel with border + Rectangle log_rect = {(float)log_x, (float)log_y, (float)log_width, (float)log_height}; + DrawRectangleRec(log_rect, log_bg); + DrawRectangleLines(log_x, log_y, log_width, log_height, log_border); + + // Inner shadow line + DrawLine(log_x + 1, log_y + log_height - 1, log_x + log_width - 1, log_y + log_height - 1, log_border_dark); + DrawLine(log_x + log_width - 1, log_y + 1, log_x + log_width - 1, log_y + log_height - 1, log_border_dark); + + // Title bar + DrawRectangle(log_x + 4, log_y + 4, log_width - 8, 16, (Color){30, 25, 20, 255}); + 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); + + // Log entries + int text_x = log_x + 8; + int text_start_y = log_y + 28; + int line_height = 12; for (int i = 0; i < count && i < 5; i++) { int idx = (head - count + i + 5) % 5; if (log[idx][0] != '\0') { - DrawText(log[idx], log_x, log_y + i * 14, 12, (Color){140, 140, 140, 255}); + // Fade older messages + int age = count - i - 1; + Color text_color; + if (age == 0) { + text_color = (Color){220, 210, 200, 255}; // newest: bright + } else if (age == 1) { + text_color = (Color){180, 170, 160, 255}; // recent + } else if (age == 2) { + text_color = (Color){150, 140, 130, 230}; // older + } else { + text_color = (Color){120, 110, 100, 200}; // oldest: dim + } + DrawText(log[idx], text_x, text_start_y + i * line_height, 10, text_color); } } } @@ -336,7 +443,8 @@ void render_floating_texts(FloatingText *texts, int count, int shake_x, int shak if (texts[i].label[0] != '\0') { // Label text (DODGE, BLOCK, CRIT!, proc name, SLAIN) - int font_size = (texts[i].label[0] == 'C') ? 16 : 14; // CRIT! slightly larger + // Check for "CRIT!" specifically rather than just 'C' prefix + int font_size = (strcmp(texts[i].label, "CRIT!") == 0) ? 16 : 14; Color color = label_color(&texts[i], a); int text_w = MeasureText(texts[i].label, font_size); DrawText(texts[i].label, x - text_w / 2, y, font_size, color);