[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 <damocleas25@gmail.com>

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,

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;
+      });
     }
   }
 

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 {

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