From 17eeceb4f348b87582986f77a6129874cb3ad53d Mon Sep 17 00:00:00 2001 From: fabske0 <192151969+fabske0@users.noreply.github.com> Date: Wed, 30 Jul 2025 19:58:10 +0200 Subject: [PATCH] [UI/UX] Fix button and input field overlaps (#6013) * [Fix] Fix button overlap * [Fix] Fix input field overlaps * use getWidth to determine if label should be shortened --------- Co-authored-by: Sirz Benjie <142067137+SirzBenjie@users.noreply.github.com> Co-authored-by: damocleas --- src/ui/form-modal-ui-handler.ts | 20 ++++++++++++---- src/ui/modal-ui-handler.ts | 19 +++++++++++---- src/ui/pokedex-scan-ui-handler.ts | 7 ++++-- src/ui/registration-form-ui-handler.ts | 32 +++----------------------- 4 files changed, 38 insertions(+), 40 deletions(-) diff --git a/src/ui/form-modal-ui-handler.ts b/src/ui/form-modal-ui-handler.ts index 7ae545a7292..203d98a86c7 100644 --- a/src/ui/form-modal-ui-handler.ts +++ b/src/ui/form-modal-ui-handler.ts @@ -72,6 +72,10 @@ export abstract class FormModalUiHandler extends ModalUiHandler { (hasTitle ? 31 : 5) + 20 * (config.length - 1) + 16 + this.getButtonTopMargin(), "", TextStyle.TOOLTIP_CONTENT, + { + fontSize: "42px", + wordWrap: { width: 850 }, + }, ); this.errorMessage.setColor(this.getTextColor(TextStyle.SUMMARY_PINK)); this.errorMessage.setShadowColor(this.getTextColor(TextStyle.SUMMARY_PINK, true)); @@ -84,20 +88,28 @@ export abstract class FormModalUiHandler extends ModalUiHandler { this.inputs = []; this.formLabels = []; fieldsConfig.forEach((config, f) => { - const label = addTextObject(10, (hasTitle ? 31 : 5) + 20 * f, config.label, TextStyle.TOOLTIP_CONTENT); + // The Pokédex Scan Window uses width `300` instead of `160` like the other forms + // Therefore, the label does not need to be shortened + const label = addTextObject( + 10, + (hasTitle ? 31 : 5) + 20 * f, + config.label.length > 25 && this.getWidth() < 200 ? config.label.slice(0, 20) + "..." : config.label, + TextStyle.TOOLTIP_CONTENT, + ); label.name = "formLabel" + f; this.formLabels.push(label); this.modalContainer.add(this.formLabels[this.formLabels.length - 1]); - const inputContainer = globalScene.add.container(70, (hasTitle ? 28 : 2) + 20 * f); + const inputWidth = label.width < 320 ? 80 : 80 - (label.width - 320) / 5.5; + const inputContainer = globalScene.add.container(70 + (80 - inputWidth), (hasTitle ? 28 : 2) + 20 * f); inputContainer.setVisible(false); - const inputBg = addWindow(0, 0, 80, 16, false, false, 0, 0, WindowVariant.XTHIN); + const inputBg = addWindow(0, 0, inputWidth, 16, false, false, 0, 0, WindowVariant.XTHIN); const isPassword = config?.isPassword; const isReadOnly = config?.isReadOnly; - const input = addTextInputObject(4, -2, 440, 116, TextStyle.TOOLTIP_CONTENT, { + const input = addTextInputObject(4, -2, inputWidth * 5.5, 116, TextStyle.TOOLTIP_CONTENT, { type: isPassword ? "password" : "text", maxLength: isPassword ? 64 : 20, readOnly: isReadOnly, diff --git a/src/ui/modal-ui-handler.ts b/src/ui/modal-ui-handler.ts index c93b713831e..228d80968b9 100644 --- a/src/ui/modal-ui-handler.ts +++ b/src/ui/modal-ui-handler.ts @@ -152,7 +152,12 @@ export abstract class ModalUiHandler extends UiHandler { updateContainer(config?: ModalConfig): void { const [marginTop, marginRight, marginBottom, marginLeft] = this.getMargin(config); - const [width, height] = [this.getWidth(config), this.getHeight(config)]; + /** + * If the total amount of characters for the 2 buttons exceeds ~30 characters, + * the width in `registration-form-ui-handler.ts` and `login-form-ui-handler.ts` needs to be increased. + */ + const width = this.getWidth(config); + const height = this.getHeight(config); this.modalContainer.setPosition( (globalScene.game.canvas.width / 6 - (width + (marginRight - marginLeft))) / 2, (-globalScene.game.canvas.height / 6 - (height + (marginBottom - marginTop))) / 2, @@ -166,10 +171,14 @@ export abstract class ModalUiHandler extends UiHandler { this.titleText.setX(width / 2); this.titleText.setVisible(!!title); - for (let b = 0; b < this.buttonContainers.length; b++) { - const sliceWidth = width / (this.buttonContainers.length + 1); - - this.buttonContainers[b].setPosition(sliceWidth * (b + 1), this.modalBg.height - (this.buttonBgs[b].height + 8)); + if (this.buttonContainers.length > 0) { + const spacing = 12; + const totalWidth = this.buttonBgs.reduce((sum, bg) => sum + bg.width, 0) + spacing * (this.buttonBgs.length - 1); + let x = (this.modalBg.width - totalWidth) / 2; + this.buttonContainers.forEach((container, i) => { + container.setPosition(x + this.buttonBgs[i].width / 2, this.modalBg.height - (this.buttonBgs[i].height + 8)); + x += this.buttonBgs[i].width + spacing; + }); } } diff --git a/src/ui/pokedex-scan-ui-handler.ts b/src/ui/pokedex-scan-ui-handler.ts index bcf869f6f39..ab3258a03de 100644 --- a/src/ui/pokedex-scan-ui-handler.ts +++ b/src/ui/pokedex-scan-ui-handler.ts @@ -158,8 +158,11 @@ export class PokedexScanUiHandler extends FormModalUiHandler { if (super.show(args)) { const config = args[0] as ModalConfig; - this.inputs[0].resize(1150, 116); - this.inputContainers[0].list[0].width = 200; + const label = this.formLabels[0]; + + const inputWidth = label.width < 420 ? 200 : 200 - (label.width - 420) / 5.75; + this.inputs[0].resize(inputWidth * 5.75, 116); + this.inputContainers[0].list[0].width = inputWidth; if (args[1] && typeof (args[1] as PlayerPokemon).getNameToRender === "function") { this.inputs[0].text = (args[1] as PlayerPokemon).getNameToRender(); } else { diff --git a/src/ui/registration-form-ui-handler.ts b/src/ui/registration-form-ui-handler.ts index 60f8d1d987f..2c8080d534d 100644 --- a/src/ui/registration-form-ui-handler.ts +++ b/src/ui/registration-form-ui-handler.ts @@ -8,19 +8,6 @@ import type { ModalConfig } from "#ui/modal-ui-handler"; import { addTextObject } from "#ui/text"; import i18next from "i18next"; -interface LanguageSetting { - inputFieldFontSize?: string; - warningMessageFontSize?: string; - errorMessageFontSize?: string; -} - -const languageSettings: { [key: string]: LanguageSetting } = { - "es-ES": { - inputFieldFontSize: "50px", - errorMessageFontSize: "40px", - }, -}; - export class RegistrationFormUiHandler extends FormModalUiHandler { getModalTitle(_config?: ModalConfig): string { return i18next.t("menu:register"); @@ -35,7 +22,7 @@ export class RegistrationFormUiHandler extends FormModalUiHandler { } getButtonTopMargin(): number { - return 8; + return 12; } getButtonLabels(_config?: ModalConfig): string[] { @@ -76,18 +63,9 @@ export class RegistrationFormUiHandler extends FormModalUiHandler { setup(): void { super.setup(); - this.modalContainer.list.forEach((child: Phaser.GameObjects.GameObject) => { - if (child instanceof Phaser.GameObjects.Text && child !== this.titleText) { - const inputFieldFontSize = languageSettings[i18next.resolvedLanguage!]?.inputFieldFontSize; - if (inputFieldFontSize) { - child.setFontSize(inputFieldFontSize); - } - } - }); - - const warningMessageFontSize = languageSettings[i18next.resolvedLanguage!]?.warningMessageFontSize ?? "42px"; const label = addTextObject(10, 87, i18next.t("menu:registrationAgeWarning"), TextStyle.TOOLTIP_CONTENT, { - fontSize: warningMessageFontSize, + fontSize: "42px", + wordWrap: { width: 850 }, }); this.modalContainer.add(label); @@ -107,10 +85,6 @@ export class RegistrationFormUiHandler extends FormModalUiHandler { const onFail = error => { globalScene.ui.setMode(UiMode.REGISTRATION_FORM, Object.assign(config, { errorMessage: error?.trim() })); globalScene.ui.playError(); - const errorMessageFontSize = languageSettings[i18next.resolvedLanguage!]?.errorMessageFontSize; - if (errorMessageFontSize) { - this.errorMessage.setFontSize(errorMessageFontSize); - } }; if (!this.inputs[0].text) { return onFail(i18next.t("menu:emptyUsername"));