render: sectioned new HUD layout with portrait; polish action log panel
Signed-off-by: NotAShelf <raf@notashelf.dev> Change-Id: I8a46ddecadd45712c9bef32d061783896a6a6964
This commit is contained in:
parent
6ea1e084db
commit
4663367673
GPG key ID:
29D95B64378DB4BF
1 changed files with 162 additions and 54 deletions
200
src/render.c
200
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) {
|
||||
const char *weapon_name = item_get_name(&p->equipped_weapon);
|
||||
if (weapon_name) {
|
||||
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);
|
||||
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) {
|
||||
const char *armor_name = item_get_name(&p->equipped_armor);
|
||||
if (armor_name) {
|
||||
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);
|
||||
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);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue