From 5812dad90aa7728f59e5238668c530096b3a8824 Mon Sep 17 00:00:00 2001 From: iZePlayzYT Date: Sun, 28 Sep 2025 04:25:55 +0200 Subject: [PATCH] Chat UI redesigned --- src/pc/djui/djui_chat_box.c | 22 +++++++++++------ src/pc/djui/djui_chat_message.c | 8 +++--- src/pc/djui/djui_inputbox.c | 43 +++++++++++++++++++++++++++------ 3 files changed, 55 insertions(+), 18 deletions(-) diff --git a/src/pc/djui/djui_chat_box.c b/src/pc/djui/djui_chat_box.c index 5224f86f1..9d8cdb558 100644 --- a/src/pc/djui/djui_chat_box.c +++ b/src/pc/djui/djui_chat_box.c @@ -105,7 +105,7 @@ void sent_history_reset_navigation(ArrayList *arrayList) { bool djui_chat_box_render(struct DjuiBase* base) { struct DjuiChatBox* chatBox = (struct DjuiChatBox*)base; struct DjuiBase* ccBase = &chatBox->chatContainer->base; - djui_base_set_size(ccBase, 1.0f, chatBox->base.comp.height - 32 - 8); + djui_base_set_size(ccBase, 1.0f, chatBox->base.comp.height - 32 - 18); if (chatBox->scrolling) { f32 yMax = chatBox->chatContainer->base.elem.height - chatBox->chatFlow->base.height.value; f32 target = chatBox->chatFlow->base.y.value + (chatBox->scrollY - chatBox->chatFlow->base.y.value) * (configSmoothScrolling ? 0.5f : 1.f); @@ -135,7 +135,12 @@ static void djui_chat_box_set_focus_style(void) { djui_interactable_set_input_focus(&gDjuiChatBox->chatInput->base); } - djui_base_set_color(&gDjuiChatBox->chatFlow->base, 0, 0, 0, gDjuiChatBoxFocus ? 128 : 0); + bool hasMessages = (gDjuiChatBox->chatFlow->base.height.value > 2.0f); + u8 alpha = 0; + if (hasMessages) { + alpha = gDjuiChatBoxFocus ? 160 : 0; + } + djui_base_set_color(&gDjuiChatBox->chatFlow->base, 0, 0, 0, alpha); } static void djui_chat_box_input_enter(struct DjuiInputbox* chatInput) { @@ -640,7 +645,7 @@ struct DjuiChatBox* djui_chat_box_create(void) { djui_base_init(&gDjuiRoot->base, base, djui_chat_box_render, djui_chat_box_destroy); djui_base_set_size_type(base, DJUI_SVT_ABSOLUTE, DJUI_SVT_ABSOLUTE); - djui_base_set_size(base, 600, 400); + djui_base_set_size(base, 800, 400); djui_base_set_alignment(base, DJUI_HALIGN_LEFT, DJUI_VALIGN_BOTTOM); djui_base_set_color(base, 0, 0, 0, 0); djui_base_set_padding(base, 0, 8, 8, 8); @@ -654,12 +659,12 @@ struct DjuiChatBox* djui_chat_box_create(void) { struct DjuiFlowLayout* chatFlow = djui_flow_layout_create(ccBase); struct DjuiBase* cfBase = &chatFlow->base; - djui_base_set_location(cfBase, 0, 0); + djui_base_set_location(cfBase, 0, 8); djui_base_set_size_type(cfBase, DJUI_SVT_RELATIVE, DJUI_SVT_ABSOLUTE); djui_base_set_size(cfBase, 1.0f, 2); - djui_base_set_color(cfBase, 0, 0, 0, 128); - djui_base_set_padding(cfBase, 2, 2, 2, 2); - djui_flow_layout_set_margin(chatFlow, 2); + djui_base_set_color(cfBase, 0, 0, 0, 64); + djui_base_set_padding(cfBase, 0, 2, 0, 2); + djui_flow_layout_set_margin(chatFlow, 0); djui_flow_layout_set_flow_direction(chatFlow, DJUI_FLOW_DIR_UP); cfBase->addChildrenToHead = true; cfBase->abandonAfterChildRenderFail = true; @@ -670,6 +675,9 @@ struct DjuiChatBox* djui_chat_box_create(void) { djui_base_set_size_type(ciBase, DJUI_SVT_RELATIVE, DJUI_SVT_ABSOLUTE); djui_base_set_size(ciBase, 1.0f, 32); djui_base_set_alignment(ciBase, DJUI_HALIGN_LEFT, DJUI_VALIGN_BOTTOM); + djui_base_set_location(ciBase, 0, 0); + djui_base_set_border_width(ciBase, 0); + djui_interactable_hook_key(&chatInput->base, djui_chat_box_input_on_key_down, djui_inputbox_on_key_up); djui_interactable_hook_text_input(&chatInput->base, djui_chat_box_input_on_text_input); djui_interactable_hook_text_editing(&chatInput->base, djui_chat_box_input_on_text_editing); diff --git a/src/pc/djui/djui_chat_message.c b/src/pc/djui/djui_chat_message.c index 6bb9028a4..397dbaffd 100644 --- a/src/pc/djui/djui_chat_message.c +++ b/src/pc/djui/djui_chat_message.c @@ -24,14 +24,14 @@ static bool djui_chat_message_render(struct DjuiBase* base) { } if (gDjuiChatBoxFocus) { - djui_base_set_color(base, 0, 0, 0, 120); + djui_base_set_color(base, 0, 0, 0, 0); djui_base_set_color(ctBase, 255, 255, 255, 255); djui_base_set_size_type(base, DJUI_SVT_RELATIVE, DJUI_SVT_ABSOLUTE); djui_base_set_size(base, 1.0f, chatMessage->base.height.value); } else if (f <= 0.1f) { return false; } else { - djui_base_set_color(base, 0, 0, 0, 180 * f); + djui_base_set_color(base, 0, 0, 0, 140 * f); djui_base_set_color(ctBase, 255, 255, 255, 255 * f); djui_base_set_size_type(base, DJUI_SVT_ABSOLUTE, DJUI_SVT_ABSOLUTE); djui_base_set_size(base, chatMessage->messageWidth, chatMessage->base.height.value); @@ -76,8 +76,8 @@ void djui_chat_message_create(const char* message) { djui_base_init(&gDjuiChatBox->chatFlow->base, base, djui_chat_message_render, djui_chat_message_destroy); djui_base_set_size_type(base, DJUI_SVT_RELATIVE, DJUI_SVT_ABSOLUTE); djui_base_set_size(base, 1.0f, 0); - djui_base_set_color(base, 0, 0, 0, 64); - djui_base_set_padding(base, 2, 4, 2, 4); + djui_base_set_color(base, 0, 0, 0, 0); + djui_base_set_padding(base, 0, 4, 0, 4); djui_base_set_alignment(base, DJUI_HALIGN_LEFT, DJUI_VALIGN_BOTTOM); f32 maxTextWidth = gDjuiChatBox->base.width.value - gDjuiChatBox->base.padding.left.value - gDjuiChatBox->base.padding.right.value - base->padding.left.value - base->padding.right.value; diff --git a/src/pc/djui/djui_inputbox.c b/src/pc/djui/djui_inputbox.c index 917595f5b..0a2ca4df5 100644 --- a/src/pc/djui/djui_inputbox.c +++ b/src/pc/djui/djui_inputbox.c @@ -3,12 +3,13 @@ #include "djui.h" #include "djui_unicode.h" #include "djui_hud_utils.h" +#include "djui_chat_box.h" #include "pc/gfx/gfx_window_manager_api.h" #include "pc/pc_main.h" #include "game/segment2.h" #include "pc/controller/controller_keyboard.h" -#define DJUI_INPUTBOX_YOFF (-3) +#define DJUI_INPUTBOX_YOFF (-2) #define DJUI_INPUTBOX_MAX_BLINK 50 #define DJUI_INPUTBOX_MID_BLINK (DJUI_INPUTBOX_MAX_BLINK / 2) #define DJUI_INPUTBOX_CURSOR_WIDTH (2.0f / 32.0f) @@ -20,6 +21,14 @@ static u8 sCursorBlink = 0; static void djui_inputbox_update_style(struct DjuiBase* base) { struct DjuiInputbox* inputbox = (struct DjuiInputbox*)base; + if (gDjuiChatBox != NULL && &gDjuiChatBox->chatInput->base == base) { + djui_base_set_border_width(base, 0); + djui_base_set_border_color(base, 0, 0, 0, 0); + u8 alpha = gDjuiChatBoxFocus ? 200 : 150; + djui_base_set_color(&inputbox->base, 0, 0, 0, alpha); + return; + } + if (!inputbox->base.enabled) { djui_base_set_border_color(base, 90, 90, 90, 255); djui_base_set_color(&inputbox->base, 140, 140, 140, 255); @@ -503,6 +512,7 @@ static void djui_inputbox_render_preview_text(struct DjuiInputbox* inputbox) { static void djui_inputbox_render_selection(struct DjuiInputbox* inputbox) { const struct DjuiFont* font = gDjuiFonts[configDjuiThemeFont == 0 ? FONT_NORMAL : FONT_ALIASED]; + bool isChatInput = (gDjuiChatBox != NULL && &gDjuiChatBox->chatInput->base == &inputbox->base); // make selection well formed u16 selection[2] = { 0 }; @@ -540,7 +550,11 @@ static void djui_inputbox_render_selection(struct DjuiInputbox* inputbox) { if (sCursorBlink < DJUI_INPUTBOX_MID_BLINK && djui_interactable_is_input_focus(&inputbox->base)) { create_dl_translation_matrix(DJUI_MTX_PUSH, renderX - DJUI_INPUTBOX_CURSOR_WIDTH / 2.0f, -0.1f, 0); create_dl_scale_matrix(DJUI_MTX_NOPUSH, DJUI_INPUTBOX_CURSOR_WIDTH, 0.8f, 1.0f); - gDPSetEnvColor(gDisplayListHead++, 0, 0, 0, 255); + if (isChatInput) { + gDPSetEnvColor(gDisplayListHead++, 255, 255, 255, 255); + } else { + gDPSetEnvColor(gDisplayListHead++, 0, 0, 0, 255); + } gSPDisplayList(gDisplayListHead++, dl_djui_simple_rect); gSPPopMatrix(gDisplayListHead++, G_MTX_MODELVIEW); } @@ -604,9 +618,15 @@ static bool djui_inputbox_render(struct DjuiBase* base) { const struct DjuiFont* font = gDjuiFonts[configDjuiThemeFont == 0 ? FONT_NORMAL : FONT_ALIASED]; djui_rect_render(base); - // Shift the text away from the left side a tad - comp->x += 2; - comp->width -= 2; + bool isChatInput = (gDjuiChatBox != NULL && &gDjuiChatBox->chatInput->base == base); + if (isChatInput) { + comp->x += 6; + comp->y -= 1; + comp->width -= 6; + } else { + comp->x += 2; + comp->width -= 2; + } // shift the viewing window to keep the selection in view djui_inputbox_keep_selection_in_view(inputbox); @@ -614,6 +634,12 @@ static bool djui_inputbox_render(struct DjuiBase* base) { // translate position f32 translatedX = comp->x + inputbox->viewX; f32 translatedY = comp->y + DJUI_INPUTBOX_YOFF; + if (isChatInput) { + f32 lineHeight = font->lineHeight * font->defaultFontScale; + f32 innerHeight = comp->height - base->borderWidth.value * 2; + f32 centerOffset = (innerHeight - lineHeight) * 0.5f; + translatedY += fmaxf(centerOffset, 0.0f); + } djui_gfx_position_translate(&translatedX, &translatedY); create_dl_translation_matrix(DJUI_MTX_PUSH, translatedX, translatedY, 0); @@ -633,8 +659,11 @@ static bool djui_inputbox_render(struct DjuiBase* base) { // render preview text (for tab completion) - after font setup // djui_inputbox_render_preview_text(inputbox); - // set color - gDPSetEnvColor(gDisplayListHead++, inputbox->textColor.r, inputbox->textColor.g, inputbox->textColor.b, inputbox->textColor.a); + if (isChatInput) { + gDPSetEnvColor(gDisplayListHead++, 255, 255, 255, 255); + } else { + gDPSetEnvColor(gDisplayListHead++, inputbox->textColor.r, inputbox->textColor.g, inputbox->textColor.b, inputbox->textColor.a); + } // make selection well formed u16 selection[2] = { 0 };