diff --git a/assets/icons/close.png b/assets/icons/close.png index 2c5eb06..84ee0f7 100644 Binary files a/assets/icons/close.png and b/assets/icons/close.png differ diff --git a/assets/icons/help.png b/assets/icons/help.png index d69be42..d8911ff 100644 Binary files a/assets/icons/help.png and b/assets/icons/help.png differ diff --git a/assets/icons/settings.png b/assets/icons/settings.png index 13b645e..997741a 100644 Binary files a/assets/icons/settings.png and b/assets/icons/settings.png differ diff --git a/game.c b/game.c index 4975eda..61775df 100644 --- a/game.c +++ b/game.c @@ -444,7 +444,11 @@ void draw_bg(void) { set_height_constraint(&board_con, window_size.height, UI_CONSTRAINT_FIXED); // bg - draw_quad(&board_con, game.palette.bg_color, 0, ALIGN_TOP_LEFT); + UiStyle style = { + .bg_color = game.palette.bg_color, + .align = ALIGN_TOP_LEFT + }; + draw_quad(&board_con, style); GlyphInstanceList batch; new_glyph_instance_list(&batch, 32); @@ -475,11 +479,20 @@ void draw_quit_dialog(void) { set_y_constraint(&dialog_con, 0, UI_CONSTRAINT_FIXED); set_width_constraint(&dialog_con, 1.f, UI_CONSTRAINT_RELATIVE); set_height_constraint(&dialog_con, 1.f, UI_CONSTRAINT_RELATIVE); - draw_quad(&dialog_con, ColorRGBA(0, 0, 0, 200), 0, ALIGN_CENTER); + UiStyle style = { + .bg_color = ColorRGBA(0, 0, 0, 200), + .align = ALIGN_CENTER, + }; + draw_quad(&dialog_con, style); set_width_constraint(&dialog_con, 0.4f, UI_CONSTRAINT_RELATIVE); set_height_constraint(&dialog_con, 0.2f, UI_CONSTRAINT_RELATIVE); - draw_quad(&dialog_con, ColorRGBA(135, 124, 124, 255), 8, ALIGN_CENTER); + style = (UiStyle){ + .bg_color = ColorRGBA(135, 124, 124, 255), + .border_radius = 8, + .align = ALIGN_CENTER, + }; + draw_quad(&dialog_con, style); UIConstraints text_con = default_constraints; set_parent_constraint(&text_con, &dialog_con); @@ -494,13 +507,19 @@ void draw_quit_dialog(void) { set_height_constraint(&btn_con, 0.25f, UI_CONSTRAINT_RELATIVE); set_y_constraint(&btn_con, -0.10f, UI_CONSTRAINT_RELATIVE); set_x_constraint(&btn_con, -0.20f, UI_CONSTRAINT_RELATIVE); - if (draw_button(&btn_con, mult_color(COLOR_WHITE, 0.9f), "Yes", btn_con.height * 0.20f, ALIGN_BOTTOM_CENTER, BUTTON_STATE_ACTIVE)) { + style = (UiStyle){ + .bg_color = mult_color(COLOR_WHITE, 0.9f), + .fg_color = COLOR_BLACK, + .border_radius = btn_con.height * 0.2f, + .align = ALIGN_BOTTOM_CENTER, + }; + if (draw_button(&btn_con, "Yes", style, BUTTON_STATE_ACTIVE)) { zephr_quit(); } set_y_constraint(&btn_con, -0.10f, UI_CONSTRAINT_RELATIVE); set_x_constraint(&btn_con, 0.20f, UI_CONSTRAINT_RELATIVE); - if (draw_button(&btn_con, mult_color(COLOR_WHITE, 0.9f), "No", btn_con.height * 0.20f, ALIGN_BOTTOM_CENTER, BUTTON_STATE_ACTIVE)) { + if (draw_button(&btn_con, "No", style, BUTTON_STATE_ACTIVE)) { game.quit_dialog = false; } } @@ -511,13 +530,22 @@ void draw_help_dialog(void) { set_height_constraint(&dialog_con, 1.f, UI_CONSTRAINT_RELATIVE); set_x_constraint(&dialog_con, 0, UI_CONSTRAINT_FIXED); set_y_constraint(&dialog_con, 0, UI_CONSTRAINT_FIXED); - draw_quad(&dialog_con, ColorRGBA(0, 0, 0, 200), 0, ALIGN_CENTER); + UiStyle style = { + .bg_color = ColorRGBA(0, 0, 0, 200), + .align = ALIGN_CENTER, + }; + draw_quad(&dialog_con, style); UIConstraints content_card_con = default_constraints; set_parent_constraint(&content_card_con, &dialog_con); set_width_constraint(&content_card_con, 0.4f, UI_CONSTRAINT_RELATIVE); set_height_constraint(&content_card_con, 0.33f, UI_CONSTRAINT_RELATIVE); - draw_quad(&content_card_con, ColorRGBA(135, 124, 124, 255), 8, ALIGN_CENTER); + style = (UiStyle){ + .bg_color = ColorRGBA(135, 124, 124, 255), + .border_radius = 8, + .align = ALIGN_CENTER, + }; + draw_quad(&content_card_con, style); UIConstraints text_con = default_constraints; set_parent_constraint(&text_con, &content_card_con); @@ -538,7 +566,13 @@ void draw_help_dialog(void) { set_height_constraint(&btn_con, 1, UI_CONSTRAINT_ASPECT_RATIO); set_y_constraint(&btn_con, -24, UI_CONSTRAINT_RELATIVE_PIXELS); set_x_constraint(&btn_con, 24, UI_CONSTRAINT_RELATIVE_PIXELS); - if (draw_icon_button(&btn_con, mult_color(COLOR_WHITE, 0.8f), game.icon_textures[CLOSE_ICON], btn_con.height * 0.20f, ALIGN_TOP_RIGHT, BUTTON_STATE_ACTIVE)) { + style = (UiStyle){ + .bg_color = mult_color(COLOR_WHITE, 0.8f), + .fg_color = ColorRGBA(232, 28, 36, 255), + .border_radius = btn_con.height * 0.2f, + .align = ALIGN_TOP_RIGHT, + }; + if (draw_icon_button(&btn_con, game.icon_textures[CLOSE_ICON], style, BUTTON_STATE_ACTIVE)) { game.help_dialog = false; } } @@ -549,13 +583,22 @@ void draw_settings_dialog(void) { set_height_constraint(&dialog_con, 1.f, UI_CONSTRAINT_RELATIVE); set_x_constraint(&dialog_con, 0, UI_CONSTRAINT_FIXED); set_y_constraint(&dialog_con, 0, UI_CONSTRAINT_FIXED); - draw_quad(&dialog_con, ColorRGBA(0, 0, 0, 200), 0, ALIGN_CENTER); + UiStyle style = { + .bg_color = ColorRGBA(0, 0, 0, 200), + .align = ALIGN_CENTER, + }; + draw_quad(&dialog_con, style); UIConstraints content_card_con = default_constraints; set_parent_constraint(&content_card_con, &dialog_con); set_width_constraint(&content_card_con, 0.55f, UI_CONSTRAINT_RELATIVE); set_height_constraint(&content_card_con, 0.6f, UI_CONSTRAINT_RELATIVE); - draw_quad(&content_card_con, ColorRGBA(135, 124, 124, 255), 8, ALIGN_CENTER); + style = (UiStyle){ + .bg_color = ColorRGBA(135, 124, 124, 255), + .border_radius = 8, + .align = ALIGN_CENTER, + }; + draw_quad(&content_card_con, style); UIConstraints text_con = default_constraints; set_parent_constraint(&text_con, &content_card_con); @@ -621,7 +664,13 @@ void draw_settings_dialog(void) { set_y_constraint(&btn_con, 400, UI_CONSTRAINT_RELATIVE_PIXELS); set_width_constraint(&btn_con, 150, UI_CONSTRAINT_RELATIVE_PIXELS); set_height_constraint(&btn_con, 0.35f, UI_CONSTRAINT_ASPECT_RATIO); - if (draw_button(&btn_con, ColorRGBA(201, 146, 126, 255), "Reset", 8.f, ALIGN_TOP_CENTER, BUTTON_STATE_ACTIVE)) { + style = (UiStyle){ + .bg_color = ColorRGBA(201, 146, 126, 255), + .fg_color = COLOR_BLACK, + .border_radius = 8, + .align = ALIGN_TOP_CENTER, + }; + if (draw_button(&btn_con, "Reset", style, BUTTON_STATE_ACTIVE)) { reset_palette(); } @@ -629,7 +678,13 @@ void draw_settings_dialog(void) { set_height_constraint(&btn_con, 1, UI_CONSTRAINT_ASPECT_RATIO); set_y_constraint(&btn_con, -24, UI_CONSTRAINT_RELATIVE_PIXELS); set_x_constraint(&btn_con, 24, UI_CONSTRAINT_RELATIVE_PIXELS); - if (draw_icon_button(&btn_con, mult_color(COLOR_WHITE, 0.8f), game.icon_textures[CLOSE_ICON], btn_con.height * 0.20f, ALIGN_TOP_RIGHT, BUTTON_STATE_ACTIVE)) { + style = (UiStyle){ + .bg_color = mult_color(COLOR_WHITE, 0.8f), + .fg_color = ColorRGBA(232, 28, 36, 255), + .border_radius = btn_con.height * 0.2f, + .align = ALIGN_TOP_RIGHT, + }; + if (draw_icon_button(&btn_con, game.icon_textures[CLOSE_ICON], style, BUTTON_STATE_ACTIVE)) { game.settings_dialog = false; } } @@ -640,13 +695,22 @@ void draw_game_over(void) { set_height_constraint(&dialog_con, 1.f, UI_CONSTRAINT_RELATIVE); set_x_constraint(&dialog_con, 0, UI_CONSTRAINT_FIXED); set_y_constraint(&dialog_con, 0, UI_CONSTRAINT_FIXED); - draw_quad(&dialog_con, ColorRGBA(0, 0, 0, (u8)game.game_over_bg_opacity), 0, ALIGN_CENTER); + UiStyle style = { + .bg_color = ColorRGBA(0, 0, 0, (u8)game.game_over_bg_opacity), + .align = ALIGN_CENTER, + }; + draw_quad(&dialog_con, style); UIConstraints content_card_con = default_constraints; set_parent_constraint(&content_card_con, &dialog_con); set_width_constraint(&content_card_con, 0.3f, UI_CONSTRAINT_RELATIVE); set_height_constraint(&content_card_con, 0.2f, UI_CONSTRAINT_RELATIVE); - draw_quad(&content_card_con, ColorRGBA(135, 124, 124, (u8)game.game_over_opacity), 8, ALIGN_CENTER); + style = (UiStyle){ + .bg_color = ColorRGBA(135, 124, 124, (u8)game.game_over_opacity), + .border_radius = 8, + .align = ALIGN_CENTER, + }; + draw_quad(&content_card_con, style); UIConstraints text_con = default_constraints; set_parent_constraint(&text_con, &content_card_con); @@ -662,7 +726,12 @@ void draw_game_over(void) { set_y_constraint(&btn_con, -24, UI_CONSTRAINT_RELATIVE_PIXELS); set_width_constraint(&btn_con, 0.30f, UI_CONSTRAINT_RELATIVE); set_height_constraint(&btn_con, 0.3f, UI_CONSTRAINT_ASPECT_RATIO); - if (draw_button(&btn_con, ColorRGBA(201, 146, 126, (u8)game.game_over_opacity), "Try Again", 8.f, ALIGN_BOTTOM_CENTER, btn_state)) { + style = (UiStyle){ + .bg_color = ColorRGBA(201, 146, 126, (u8)game.game_over_opacity), + .border_radius = 8, + .align = ALIGN_BOTTOM_CENTER, + }; + if (draw_button(&btn_con, "Try Again", style, btn_state)) { reset_game(); } } @@ -681,12 +750,18 @@ void draw_ui(void) { set_width_constraint(&btn_con, icon_btn_width, UI_CONSTRAINT_RELATIVE_PIXELS); set_height_constraint(&btn_con, 1, UI_CONSTRAINT_ASPECT_RATIO); - if (draw_icon_button(&btn_con, ColorRGBA(201, 146, 126, 255), game.icon_textures[HELP_ICON], btn_con.height * 0.15f, ALIGN_TOP_RIGHT, bg_btns_state)) { + UiStyle style = { + .bg_color = ColorRGBA(201, 146, 126, 255), + .fg_color = ColorRGBA(40, 92, 100, 255), + .border_radius = btn_con.height * 0.15f, + .align = ALIGN_TOP_RIGHT, + }; + if (draw_icon_button(&btn_con, game.icon_textures[HELP_ICON], style, bg_btns_state)) { game.help_dialog = true; } set_x_constraint(&btn_con, -icon_btn_offset - icon_btn_width - icon_btns_padding, UI_CONSTRAINT_RELATIVE_PIXELS); - if (draw_icon_button(&btn_con, ColorRGBA(201, 146, 126, 255), game.icon_textures[SETTINGS_ICON], btn_con.height * 0.15f, ALIGN_TOP_RIGHT, bg_btns_state)) { + if (draw_icon_button(&btn_con, game.icon_textures[SETTINGS_ICON], style, bg_btns_state)) { game.settings_dialog = true; } @@ -694,7 +769,13 @@ void draw_ui(void) { set_y_constraint(&btn_con, -0.05f, UI_CONSTRAINT_RELATIVE); set_width_constraint(&btn_con, 200, UI_CONSTRAINT_RELATIVE_PIXELS); set_height_constraint(&btn_con, 65, UI_CONSTRAINT_RELATIVE_PIXELS); - if (draw_button(&btn_con, ColorRGBA(201, 172, 126, 255), "New Game", btn_con.height * 0.25f, ALIGN_BOTTOM_CENTER, bg_btns_state)) { + style = (UiStyle) { + .bg_color = ColorRGBA(201, 172, 126, 255), + .fg_color = COLOR_BLACK, + .border_radius = btn_con.height * 0.25f, + .align = ALIGN_BOTTOM_CENTER, + }; + if (draw_button(&btn_con, "New Game", style, bg_btns_state)) { reset_game(); } @@ -721,8 +802,12 @@ void draw_board(void) { set_y_constraint(&board_con, 0.05f, UI_CONSTRAINT_RELATIVE); set_height_constraint(&board_con, 0.6f, UI_CONSTRAINT_RELATIVE); set_width_constraint(&board_con, 1, UI_CONSTRAINT_ASPECT_RATIO); - const float board_border_radius = board_con.width * 0.02f; - draw_quad(&board_con, game.palette.board_bg_color, board_border_radius, ALIGN_CENTER); + UiStyle style = { + .bg_color = game.palette.board_bg_color, + .border_radius = board_con.width * 0.02f, + .align = ALIGN_CENTER, + }; + draw_quad(&board_con, style); // empty tiles const float tile_padding = board_con.width * 0.02f; @@ -734,11 +819,16 @@ void draw_board(void) { set_height_constraint(&empty_tile_con, tile_height, UI_CONSTRAINT_FIXED); set_width_constraint(&empty_tile_con, 1, UI_CONSTRAINT_ASPECT_RATIO); + style = (UiStyle){ + .bg_color = mult_color(game.palette.board_bg_color, 0.85f), + .border_radius = tile_board_radius, + .align = ALIGN_TOP_LEFT, + }; for (int i = 0; i < 4; i++) { set_y_constraint(&empty_tile_con, (tile_height + tile_padding) * i + tile_padding, UI_CONSTRAINT_FIXED); for (int j = 0; j < 4; j++) { set_x_constraint(&empty_tile_con, (tile_height + tile_padding) * j + tile_padding, UI_CONSTRAINT_FIXED); - draw_quad(&empty_tile_con, mult_color(game.palette.board_bg_color, 0.85f), tile_board_radius, ALIGN_TOP_LEFT); + draw_quad(&empty_tile_con, style); } } @@ -754,6 +844,11 @@ void draw_board(void) { for (int j = 0; j < 4; j++) { Tile *tile = &game.board[i][j]; Color tile_color = get_tile_color(tile->value); + UiStyle style = { + .bg_color = tile_color, + .border_radius = tile_board_radius, + .align = ALIGN_TOP_LEFT, + }; char value[16]; sprintf(value, "%d", tile->value); f32 tile_y_pos = (f32)((tile_height + tile_padding) * i + tile_padding + game.board[i][j].anim_y_offset_relative * board_con.height); @@ -762,7 +857,7 @@ void draw_board(void) { set_y_constraint(&tile_con, tile_y_pos, UI_CONSTRAINT_FIXED); set_x_constraint(&tile_con, tile_x_pos, UI_CONSTRAINT_FIXED); if (tile->value > 0) { - draw_quad(&tile_con, tile_color, tile_board_radius, ALIGN_TOP_LEFT); + draw_quad(&tile_con, style); // value text set_parent_constraint(&text_con, &tile_con); @@ -777,13 +872,18 @@ void draw_board(void) { if (game.spawning_new_tile) { // spawning tile Color tile_color = get_tile_color(game.spawning_tile_value); + UiStyle style = { + .bg_color = tile_color, + .border_radius = tile_board_radius, + .align = ALIGN_TOP_LEFT, + }; f32 tile_x_pos = (f32)((tile_height + tile_padding) * game.spawning_tile_coords.y + tile_padding) + tile_height / 2 - game.spawning_tile_scale * tile_height / 2; f32 tile_y_pos = (f32)((tile_height + tile_padding) * game.spawning_tile_coords.x + tile_padding) + tile_height / 2 - game.spawning_tile_scale * tile_height / 2; set_x_constraint(&tile_con, tile_x_pos, UI_CONSTRAINT_FIXED); set_y_constraint(&tile_con, tile_y_pos, UI_CONSTRAINT_FIXED); set_height_constraint(&tile_con, tile_height * game.spawning_tile_scale, UI_CONSTRAINT_FIXED); set_width_constraint(&tile_con, 1, UI_CONSTRAINT_ASPECT_RATIO); - draw_quad(&tile_con, tile_color, tile_board_radius, ALIGN_TOP_LEFT); + draw_quad(&tile_con, style); // value text set_parent_constraint(&text_con, &tile_con); set_x_constraint(&text_con, 0, UI_CONSTRAINT_FIXED); @@ -944,7 +1044,7 @@ void update_positions(f64 delta_t) { void handle_keyboard_input(ZephrEvent e) { - bool can_move = !game.quit_dialog && !game.help_dialog && !game.animating; + bool can_move = !game.quit_dialog && !game.help_dialog && !game.settings_dialog && !game.animating; if (e.key.mods & ZEPHR_KEY_MOD_CTRL && e.key.code == ZEPHR_KEYCODE_Q) { game_attempt_quit(); diff --git a/ui.c b/ui.c index b28c31a..cd86d0c 100644 --- a/ui.c +++ b/ui.c @@ -216,35 +216,34 @@ bool inside_rect(Rect *rect, Vec2 *point) { return false; } -void draw_quad(UIConstraints *constraints, const Color color, float border_radius, Alignment align) { +void draw_quad(UIConstraints *constraints, const UiStyle style) { use_shader(ui_shader); - set_vec4f(ui_shader, "aColor", color.r / 255.f, color.g / 255.f, color.b / 255.f, color.a / 255.f); + set_vec4f(ui_shader, "aColor", style.bg_color.r / 255.f, style.bg_color.g / 255.f, style.bg_color.b / 255.f, style.bg_color.a / 255.f); set_float(ui_shader, "uiWidth", constraints->width); set_float(ui_shader, "uiHeight", constraints->height); - set_float(ui_shader, "borderRadius", border_radius); + set_float(ui_shader, "borderRadius", style.border_radius); set_mat4f(ui_shader, "projection", (float *)zephr_ctx->projection.m); - Vec2f pos = { 0.f, 0.f }; - Sizef size = { 0.f, 0.f }; + Rect rect = {0}; - apply_constraints(constraints, &pos, &size); - apply_alignment(align, constraints, &pos, size); + apply_constraints(constraints, &rect.pos, &rect.size); + apply_alignment(style.align, constraints, &rect.pos, rect.size); // set the positions after applying alignment so children can use them - constraints->x = pos.x; - constraints->y = pos.y; + constraints->x = rect.pos.x; + constraints->y = rect.pos.y; Matrix4x4 model = identity(); - apply_translation(&model, (Vec2f){-size.width / 2.f, -size.height / 2.f}); + apply_translation(&model, (Vec2f){-rect.size.width / 2.f, -rect.size.height / 2.f}); apply_scale(&model, constraints->scale); - apply_translation(&model, (Vec2f){size.width / 2.f, size.height / 2.f}); + apply_translation(&model, (Vec2f){rect.size.width / 2.f, rect.size.height / 2.f}); - apply_translation(&model, (Vec2f){-size.width / 2.f, -size.height / 2.f}); + apply_translation(&model, (Vec2f){-rect.size.width / 2.f, -rect.size.height / 2.f}); apply_rotation(&model, to_radians(constraints->rotation)); - apply_translation(&model, (Vec2f){size.width / 2.f, size.height / 2.f}); + apply_translation(&model, (Vec2f){rect.size.width / 2.f, rect.size.height / 2.f}); - apply_translation(&model, pos); + apply_translation(&model, rect.pos); set_mat4f(ui_shader, "model", (float *)model.m); @@ -252,14 +251,14 @@ void draw_quad(UIConstraints *constraints, const Color color, float border_radiu float vertices[6][4] = { // bottom left tri - {0, 0 + size.height, 0.0, 1.0}, - {0, 0, 0.0, 0.0}, - {0 + size.width, 0, 1.0, 0.0}, + {0, 0 + rect.size.height, 0.0, 1.0}, + {0, 0, 0.0, 0.0}, + {0 + rect.size.width, 0, 1.0, 0.0}, // top right tri - {0, 0 + size.height, 0.0, 1.0}, - {0 + size.width, 0, 1.0, 0.0}, - {0 + size.width, 0 + size.height, 1.0, 1.0}, + {0, 0 + rect.size.height, 0.0, 1.0}, + {0 + rect.size.width, 0, 1.0, 0.0}, + {0 + rect.size.width, 0 + rect.size.height, 1.0, 1.0}, }; glBindBuffer(GL_ARRAY_BUFFER, ui_vbo); @@ -271,7 +270,7 @@ void draw_quad(UIConstraints *constraints, const Color color, float border_radiu glBindVertexArray(0); } -void draw_circle(UIConstraints *constraints, const Color color, Alignment align) { +void draw_circle(UIConstraints *constraints, const UiStyle style) { float radius = 0.f; if (constraints->width > constraints->height) { @@ -279,13 +278,17 @@ void draw_circle(UIConstraints *constraints, const Color color, Alignment align) } else { radius = constraints->width / 2.f; } - draw_quad(constraints, color, radius, align); + + UiStyle new_style = style; + new_style.border_radius = radius; + + draw_quad(constraints, new_style); } -void draw_triangle(UIConstraints *constraints, const Color color, Alignment align) { +void draw_triangle(UIConstraints *constraints, const UiStyle style) { use_shader(ui_shader); - set_vec4f(ui_shader, "aColor", color.r / 255.f, color.g / 255.f, color.b / 255.f, color.a / 255.f); + set_vec4f(ui_shader, "aColor", style.bg_color.r / 255.f, style.bg_color.g / 255.f, style.bg_color.b / 255.f, style.bg_color.a / 255.f); set_float(ui_shader, "borderRadius", 0.f); set_mat4f(ui_shader, "projection", (float *)zephr_ctx->projection.m); @@ -293,7 +296,7 @@ void draw_triangle(UIConstraints *constraints, const Color color, Alignment alig Sizef size = { 0.f, 0.f }; apply_constraints(constraints, &pos, &size); - apply_alignment(align, constraints, &pos, size); + apply_alignment(style.align, constraints, &pos, size); // set the positions after applying alignment so children can use them constraints->x = pos.x; @@ -390,16 +393,15 @@ void draw_texture(UIConstraints *constraints, const TextureId texture_id, const set_bool(ui_shader, "hasTexture", false); } -bool draw_button_with_location(const char *file, int line, UIConstraints *constraints, const Color color, const char *text, f32 radius, Alignment align, ButtonState state) { +bool draw_button_with_location(const char *file, int line, UIConstraints *constraints, const char *text, UiStyle style, ButtonState state) { UiIdHash hash = core_fnv_hash32(file, strlen(file), CORE_FNV_HASH32_INIT); hash = core_fnv_hash32(&line, sizeof(line), hash); - Color text_color = COLOR_BLACK; - text_color.a = color.a; + style.fg_color.a = style.bg_color.a; Rect rect = {0}; apply_constraints(constraints, &rect.pos, &rect.size); - apply_alignment(align, constraints, &rect.pos, rect.size); + apply_alignment(style.align, constraints, &rect.pos, rect.size); bool is_hovered = inside_rect(&rect, &zephr_ctx->mouse.pos); bool left_mouse_pressed = zephr_ctx->mouse.pressed && zephr_ctx->mouse.button == ZEPHR_MOUSE_BUTTON_LEFT; @@ -424,23 +426,22 @@ bool draw_button_with_location(const char *file, int line, UIConstraints *constr zephr_set_cursor(ZEPHR_CURSOR_HAND); if (left_mouse_pressed) { - Color new_color = mult_color(color, 0.8f); - draw_quad(constraints, new_color, radius, align); + style.bg_color = mult_color(style.bg_color, 0.8f); + draw_quad(constraints, style); } else { - Color new_color = mult_color(color, 0.9f); - draw_quad(constraints, new_color, radius, align); + style.bg_color = mult_color(style.bg_color, 0.9f); + draw_quad(constraints, style); } } else if (state == BUTTON_STATE_DISABLED) { if (is_hovered) { zephr_set_cursor(ZEPHR_CURSOR_DISABLED); } - Color new_color = color; - new_color.a = 100; - text_color.a = 100; - draw_quad(constraints, new_color, radius, align); + style.bg_color.a = 100; + style.fg_color.a = 100; + draw_quad(constraints, style); } else { - draw_quad(constraints, color, radius, align); + draw_quad(constraints, style); } if (text) { @@ -455,7 +456,7 @@ bool draw_button_with_location(const char *file, int line, UIConstraints *constr // TODO: need to adjust the font size based on the text height - draw_text(text, font_size, text_constraints, text_color, ALIGN_CENTER); + draw_text(text, font_size, text_constraints, style.fg_color, ALIGN_CENTER); } if (clicked && state == BUTTON_STATE_ACTIVE) { @@ -465,17 +466,16 @@ bool draw_button_with_location(const char *file, int line, UIConstraints *constr return false; } -bool draw_icon_button_with_location(const char *file, int line, UIConstraints *constraints, Color btn_color, const TextureId icon_tex_id, f32 radius, Alignment align, ButtonState state) { +bool draw_icon_button_with_location(const char *file, int line, UIConstraints *constraints, const TextureId icon_tex_id, UiStyle style, ButtonState state) { CORE_DEBUG_ASSERT(icon_tex_id, "draw_icon_button() requires that you provide an icon texture"); UiIdHash hash = core_fnv_hash32(file, strlen(file), CORE_FNV_HASH32_INIT); hash = core_fnv_hash32(&line, sizeof(line), hash); Rect rect = {0}; - Color icon_color = COLOR_WHITE; apply_constraints(constraints, &rect.pos, &rect.size); - apply_alignment(align, constraints, &rect.pos, rect.size); + apply_alignment(style.align, constraints, &rect.pos, rect.size); bool is_hovered = inside_rect(&rect, &zephr_ctx->mouse.pos); bool left_mouse_pressed = zephr_ctx->mouse.pressed && zephr_ctx->mouse.button == ZEPHR_MOUSE_BUTTON_LEFT; @@ -500,22 +500,22 @@ bool draw_icon_button_with_location(const char *file, int line, UIConstraints *c zephr_set_cursor(ZEPHR_CURSOR_HAND); if (left_mouse_pressed) { - btn_color = mult_color(btn_color, 0.8f); - icon_color = mult_color(icon_color, 0.8f); + style.bg_color = mult_color(style.bg_color, 0.8f); + style.fg_color = mult_color(style.fg_color, 0.8f); } else { - btn_color = mult_color(btn_color, 0.9f); - icon_color = mult_color(icon_color, 0.9f); + style.bg_color = mult_color(style.bg_color, 0.9f); + style.fg_color = mult_color(style.fg_color, 0.9f); } } else if (state == BUTTON_STATE_DISABLED) { if (is_hovered) { zephr_set_cursor(ZEPHR_CURSOR_DISABLED); } - icon_color.a = 100; - btn_color.a = 100; + style.fg_color.a = 100; + style.bg_color.a = 100; } - draw_quad(constraints, btn_color, radius, align); + draw_quad(constraints, style); UIConstraints icon_constraints = default_constraints; @@ -524,7 +524,7 @@ bool draw_icon_button_with_location(const char *file, int line, UIConstraints *c set_y_constraint(&icon_constraints, 0, UI_CONSTRAINT_RELATIVE_PIXELS); set_width_constraint(&icon_constraints, constraints->width * 0.8f, UI_CONSTRAINT_FIXED); set_height_constraint(&icon_constraints, constraints->height * 0.8f, UI_CONSTRAINT_FIXED); - draw_texture(&icon_constraints, icon_tex_id, icon_color, 0, ALIGN_CENTER); + draw_texture(&icon_constraints, icon_tex_id, style.fg_color, 0, ALIGN_CENTER); if (clicked && state == BUTTON_STATE_ACTIVE) { return true; @@ -613,12 +613,17 @@ f32 draw_color_picker_slider_with_location(const char *file, int line, UIConstra set_width_constraint(&triangle_con, 14, UI_CONSTRAINT_RELATIVE_PIXELS); set_height_constraint(&triangle_con, 0.5f, UI_CONSTRAINT_ASPECT_RATIO); triangle_con.y += -(triangle_con.height / 2.f); - draw_triangle(&triangle_con, COLOR_BLACK, ALIGN_TOP_LEFT); + UiStyle tri_style = { + .bg_color = COLOR_BLACK, + .border_radius = 0, + .align = ALIGN_TOP_LEFT, + }; + draw_triangle(&triangle_con, tri_style); set_x_constraint(&triangle_con, 1, UI_CONSTRAINT_RELATIVE); triangle_con.x -= triangle_con.height / 2; set_rotation_constraint(&triangle_con, 90); - draw_triangle(&triangle_con, COLOR_BLACK, ALIGN_TOP_LEFT); + draw_triangle(&triangle_con, tri_style); return slider_selection; } @@ -708,22 +713,27 @@ Vec2f draw_color_picker_canvas_with_location(const char* file, int line, UIConst triangle_con.x -= triangle_con.height; triangle_con.y -= triangle_con.height * 2; set_rotation_constraint(&triangle_con, 0); - draw_triangle(&triangle_con, COLOR_WHITE, ALIGN_TOP_LEFT); + UiStyle tri_style = { + .bg_color = COLOR_WHITE, + .border_radius = 0, + .align = ALIGN_TOP_LEFT, + }; + draw_triangle(&triangle_con, tri_style); triangle_con.x += triangle_con.height * 2; triangle_con.y += triangle_con.height * 2; set_rotation_constraint(&triangle_con, 90); - draw_triangle(&triangle_con, COLOR_WHITE, ALIGN_TOP_LEFT); + draw_triangle(&triangle_con, tri_style); triangle_con.x -= triangle_con.height * 2; triangle_con.y += triangle_con.height * 2; set_rotation_constraint(&triangle_con, 180); - draw_triangle(&triangle_con, COLOR_WHITE, ALIGN_TOP_LEFT); + draw_triangle(&triangle_con, tri_style); triangle_con.x -= triangle_con.height * 2; triangle_con.y -= triangle_con.height * 2; set_rotation_constraint(&triangle_con, 270); - draw_triangle(&triangle_con, COLOR_WHITE, ALIGN_TOP_LEFT); + draw_triangle(&triangle_con, tri_style); return canvas_pos; } @@ -736,7 +746,12 @@ void draw_color_picker_popup(UIConstraints *picker_button_con) { set_y_constraint(&popup_con, picker_button_con->height + 20, UI_CONSTRAINT_FIXED); set_width_constraint(&popup_con, 450, UI_CONSTRAINT_RELATIVE_PIXELS); set_height_constraint(&popup_con, 480, UI_CONSTRAINT_RELATIVE_PIXELS); - draw_quad(&popup_con, mult_color(COLOR_WHITE, 0.94f), 8, ALIGN_TOP_LEFT); + UiStyle popup_style = { + .bg_color = mult_color(COLOR_WHITE, 0.94f), + .border_radius = 8, + .align = ALIGN_TOP_LEFT, + }; + draw_quad(&popup_con, popup_style); UIConstraints color_slider_con = default_constraints; set_parent_constraint(&color_slider_con, &popup_con); @@ -757,15 +772,23 @@ void draw_color_picker_popup(UIConstraints *picker_button_con) { set_y_constraint(&button_con, -0.05f, UI_CONSTRAINT_RELATIVE); set_width_constraint(&button_con, 0.43f, UI_CONSTRAINT_RELATIVE); set_height_constraint(&button_con, 0.3f, UI_CONSTRAINT_ASPECT_RATIO); - if (draw_button(&button_con, *zephr_ctx->ui.popup_revert_color, "Revert", 4, ALIGN_BOTTOM_LEFT, BUTTON_STATE_ACTIVE)) { + UiStyle button_style = { + .bg_color = *zephr_ctx->ui.popup_revert_color, + .fg_color = COLOR_BLACK, + .border_radius = 4, + .align = ALIGN_BOTTOM_LEFT, + }; + if (draw_button(&button_con, "Revert", button_style, BUTTON_STATE_ACTIVE)) { zephr_ctx->ui.popup_open = false; } Color selected_color = hsv2rgb(slider_selection * 360.f, canvas_pos.x, 1.0f - canvas_pos.y); + button_style.align = ALIGN_BOTTOM_RIGHT; set_x_constraint(&button_con, -0.04f, UI_CONSTRAINT_RELATIVE); set_y_constraint(&button_con, -0.05f, UI_CONSTRAINT_RELATIVE); - if (draw_button(&button_con, selected_color, "Apply", 4, ALIGN_BOTTOM_RIGHT, BUTTON_STATE_ACTIVE)) { + button_style.bg_color = selected_color; + if (draw_button(&button_con, "Apply", button_style, BUTTON_STATE_ACTIVE)) { *zephr_ctx->ui.popup_revert_color = selected_color; zephr_ctx->ui.popup_open = false; } @@ -803,7 +826,12 @@ void draw_color_picker(UIConstraints *constraints, Color *color, Alignment align display_color.a = 100; } - draw_quad(&con, display_color, con.width * 0.08f, align); + UiStyle style = { + .bg_color = display_color, + .border_radius = con.width * 0.08f, + .align = align, + }; + draw_quad(&con, style); if (is_hovered && state == BUTTON_STATE_ACTIVE && zephr_ctx->mouse.released && zephr_ctx->mouse.button == ZEPHR_MOUSE_BUTTON_LEFT) { zephr_ctx->ui.popup_open = true; diff --git a/ui.h b/ui.h index 711f35e..f4605e3 100644 --- a/ui.h +++ b/ui.h @@ -55,6 +55,13 @@ typedef enum ButtonState { BUTTON_STATE_DISABLED, } ButtonState; +typedef struct UiStyle { + Color bg_color; + Color fg_color; + f32 border_radius; + Alignment align; +} UiStyle; + int init_ui(const char* font_path); void set_parent_constraint(UIConstraints *constraints, UIConstraints *parent_constraints); void set_x_constraint(UIConstraints *constraints, float value, UIConstraint type); @@ -62,16 +69,16 @@ void set_y_constraint(UIConstraints *constraints, float value, UIConstraint type void set_width_constraint(UIConstraints *constraints, float value, UIConstraint type); void set_height_constraint(UIConstraints *constraints, float value, UIConstraint type); void set_rotation_constraint(UIConstraints *constraints, float angle_d); -void apply_constraints(UIConstraints *constraints, Vec2f *pos, Sizef *size); -void apply_alignment(Alignment align, UIConstraints *constraints, Vec2f *pos, Sizef size); -bool inside_rect(Rect *rect, Vec2 *point); -void draw_quad(UIConstraints *constraints, const Color color, float border_radius, Alignment align); -void draw_circle(UIConstraints *constraints, const Color color, Alignment align); -void draw_triangle(UIConstraints *constraints, const Color color, Alignment align); -bool draw_button_with_location(const char* file, int line, UIConstraints *constraints, Color color, const char *text, f32 radius, Alignment align, ButtonState state); -bool draw_icon_button_with_location(const char* fie, int line, UIConstraints *constraints, Color color, const TextureId icon_tex_id, f32 radius, Alignment align, ButtonState state); +void apply_constraints(UIConstraints *constraints, Vec2f *pos, Sizef *size); // internal +void apply_alignment(Alignment align, UIConstraints *constraints, Vec2f *pos, Sizef size); // internal +bool inside_rect(Rect *rect, Vec2 *point); // internal +void draw_quad(UIConstraints *constraints, const UiStyle style); +void draw_circle(UIConstraints *constraints, const UiStyle style); +void draw_triangle(UIConstraints *constraints, const UiStyle style); +bool draw_button_with_location(const char* file, int line, UIConstraints *constraints, const char *text, UiStyle style, ButtonState state); +bool draw_icon_button_with_location(const char* file, int line, UIConstraints *constraints, const TextureId icon_tex_id, UiStyle style, ButtonState state); void draw_color_picker_popup(UIConstraints *picker_button_con); void draw_color_picker(UIConstraints *constraints, Color *color, Alignment align, ButtonState state); -#define draw_button(constraints, color, text, radius, align, state) draw_button_with_location(__FILE__, __LINE__, constraints, color, text, radius, align, state) -#define draw_icon_button(constraints, color, icon_tex_id, radius, align, state) draw_icon_button_with_location(__FILE__, __LINE__, constraints, color, icon_tex_id, radius, align, state) +#define draw_button(constraints, text, style, state) draw_button_with_location(__FILE__, __LINE__, constraints, text, style, state) +#define draw_icon_button(constraints, icon_tex_id, style, state) draw_icon_button_with_location(__FILE__, __LINE__, constraints, icon_tex_id, style, state)