Chat UI redesigned

This commit is contained in:
iZePlayzYT 2025-09-28 04:25:55 +02:00
parent 5c939c6ded
commit 5812dad90a
3 changed files with 55 additions and 18 deletions

View file

@ -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);

View file

@ -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;

View file

@ -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 };