mika/pokerogue
1
0
Fork 0
mirror of https://github.com/pagefaultgames/pokerogue.git synced 2025-06-21 17:12:44 +02:00
Code Issues Packages Projects Releases Wiki Activity

[Fix] Fix input field overlaps

Browse Source
This commit is contained in:
fabske0 2025-06-19 22:02:35 +02:00
parent c9ed6f4326
commit f4f5c37228
3 changed files with 25 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/ui/form-modal-ui-handler.ts
View File

@ -71,6 +71,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));
@ -83,20 +87,29 @@ 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 has a much bigger width, so there is currently no need to shorten the label
const label = addTextObject(
10,
(hasTitle ? 31 : 5) + 20 * f,
config.label.length > 25 && this.constructor.name !== "PokedexScanUiHandler"
? 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,

7
src/ui/pokedex-scan-ui-handler.ts
View File

@ -160,8 +160,11 @@ export default 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 {

32
src/ui/registration-form-ui-handler.ts
View File

@ -7,19 +7,6 @@ import i18next from "i18next";
import { pokerogueApi } from "#app/plugins/api/pokerogue-api";
import { globalScene } from "#app/global-scene";
interface LanguageSetting {
inputFieldFontSize?: string;
warningMessageFontSize?: string;
errorMessageFontSize?: string;
}
const languageSettings: { [key: string]: LanguageSetting } = {
"es-ES": {
inputFieldFontSize: "50px",
errorMessageFontSize: "40px",
},
};
export default class RegistrationFormUiHandler extends FormModalUiHandler {
getModalTitle(_config?: ModalConfig): string {
return i18next.t("menu:register");
@ -34,7 +21,7 @@ export default class RegistrationFormUiHandler extends FormModalUiHandler {
}
getButtonTopMargin(): number {
return 8;
return 12;
}
getButtonLabels(_config?: ModalConfig): string[] {
@ -75,18 +62,9 @@ export default 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);
@ -106,10 +84,6 @@ export default 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"));