[Bug] Fix Login Screen Buttons can be Pressed While Animating (#5170)

* destroy containers when processing external containers

* make form buttons uninteractible until tweens finished instead

* fix holding enter spam

* fix conflicts
This commit is contained in:
Chris 2025-04-19 17:00:12 -04:00 committed by GitHub
parent 65294f408e
commit bda286cebb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 120 additions and 106 deletions

View File

@ -124,7 +124,7 @@ export abstract class FormModalUiHandler extends ModalUiHandler {
if (this.buttonBgs.length) {
this.buttonBgs[0].off("pointerdown");
this.buttonBgs[0].on("pointerdown", () => {
if (this.submitAction) {
if (this.submitAction && globalScene.tweens.getTweensOf(this.modalContainer).length === 0) {
this.submitAction();
}
});

View File

@ -40,25 +40,9 @@ export default class LoginFormUiHandler extends FormModalUiHandler {
setup(): void {
super.setup();
this.buildExternalPartyContainer();
this.infoContainer = globalScene.add.container(0, 0);
this.usernameInfoImage = this.buildInteractableImage("settings_icon", "username-info-icon", {
x: 20,
scale: 0.5,
});
this.saveDownloadImage = this.buildInteractableImage("saving_icon", "save-download-icon", {
x: 0,
scale: 0.75,
});
this.infoContainer.add(this.usernameInfoImage);
this.infoContainer.add(this.saveDownloadImage);
this.getUi().add(this.infoContainer);
this.infoContainer.setVisible(false);
this.infoContainer.disableInteractive();
this.buildInfoContainer();
}
private buildExternalPartyContainer() {
@ -84,6 +68,26 @@ export default class LoginFormUiHandler extends FormModalUiHandler {
this.externalPartyContainer.setVisible(false);
}
private buildInfoContainer() {
this.infoContainer = globalScene.add.container(0, 0);
this.usernameInfoImage = this.buildInteractableImage("settings_icon", "username-info-icon", {
x: 20,
scale: 0.5,
});
this.saveDownloadImage = this.buildInteractableImage("saving_icon", "save-download-icon", {
x: 0,
scale: 0.75,
});
this.infoContainer.add(this.usernameInfoImage);
this.infoContainer.add(this.saveDownloadImage);
this.getUi().add(this.infoContainer);
this.infoContainer.setVisible(false);
this.infoContainer.disableInteractive();
}
override getModalTitle(_config?: ModalConfig): string {
let key = "menu:login";
if (import.meta.env.VITE_SERVER_URL === "https://apibeta.pokerogue.net") {
@ -143,27 +147,29 @@ export default class LoginFormUiHandler extends FormModalUiHandler {
this.processExternalProvider(config);
const originalLoginAction = this.submitAction;
this.submitAction = _ => {
// Prevent overlapping overrides on action modification
this.submitAction = originalLoginAction;
this.sanitizeInputs();
if (globalScene.tweens.getTweensOf(this.modalContainer).length === 0) {
// Prevent overlapping overrides on action modification
this.submitAction = originalLoginAction;
this.sanitizeInputs();
globalScene.ui.setMode(UiMode.LOADING, { buttonActions: [] });
const onFail = error => {
const onFail = error => {
globalScene.ui.setMode(UiMode.LOGIN_FORM, Object.assign(config, { errorMessage: error?.trim() }));
globalScene.ui.playError();
};
if (!this.inputs[0].text) {
return onFail(i18next.t("menu:emptyUsername"));
}
const [usernameInput, passwordInput] = this.inputs;
pokerogueApi.account.login({ username: usernameInput.text, password: passwordInput.text }).then(error => {
if (!error && originalLoginAction) {
originalLoginAction();
} else {
onFail(error);
globalScene.ui.playError();
};
if (!this.inputs[0].text) {
return onFail(i18next.t("menu:emptyUsername"));
}
});
const [usernameInput, passwordInput] = this.inputs;
pokerogueApi.account.login({ username: usernameInput.text, password: passwordInput.text }).then(error => {
if (!error && originalLoginAction) {
originalLoginAction();
} else {
onFail(error);
}
});
}
};
return true;
@ -221,34 +227,36 @@ export default class LoginFormUiHandler extends FormModalUiHandler {
};
this.usernameInfoImage.on("pointerdown", () => {
const localStorageKeys = Object.keys(localStorage); // this gets the keys for localStorage
const keyToFind = "data_";
const dataKeys = localStorageKeys.filter(ls => ls.indexOf(keyToFind) >= 0);
if (dataKeys.length > 0 && dataKeys.length <= 2) {
const options: OptionSelectItem[] = [];
for (let i = 0; i < dataKeys.length; i++) {
options.push({
label: dataKeys[i].replace(keyToFind, ""),
handler: () => {
globalScene.ui.revertMode();
this.infoContainer.disableInteractive();
return true;
},
});
}
if (globalScene.tweens.getTweensOf(this.infoContainer).length === 0) {
const localStorageKeys = Object.keys(localStorage); // this gets the keys for localStorage
const keyToFind = "data_";
const dataKeys = localStorageKeys.filter(ls => ls.indexOf(keyToFind) >= 0);
if (dataKeys.length > 0 && dataKeys.length <= 2) {
const options: OptionSelectItem[] = [];
for (let i = 0; i < dataKeys.length; i++) {
options.push({
label: dataKeys[i].replace(keyToFind, ""),
handler: () => {
globalScene.ui.revertMode();
this.infoContainer.disableInteractive();
return true;
},
});
}
globalScene.ui.setOverlayMode(UiMode.OPTION_SELECT, {
options: options,
delay: 1000,
});
this.infoContainer.setInteractive(
new Phaser.Geom.Rectangle(0, 0, globalScene.game.canvas.width, globalScene.game.canvas.height),
Phaser.Geom.Rectangle.Contains,
);
} else {
if (dataKeys.length > 2) {
return onFail(this.ERR_TOO_MANY_SAVES);
options: options,
delay: 1000,
});
this.infoContainer.setInteractive(
new Phaser.Geom.Rectangle(0, 0, globalScene.game.canvas.width, globalScene.game.canvas.height),
Phaser.Geom.Rectangle.Contains,
);
} else {
if (dataKeys.length > 2) {
return onFail(this.ERR_TOO_MANY_SAVES);
}
return onFail(this.ERR_NO_SAVES);
}
return onFail(this.ERR_NO_SAVES);
}
});

View File

@ -134,7 +134,11 @@ export abstract class ModalUiHandler extends UiHandler {
for (let a = 0; a < this.buttonBgs.length; a++) {
if (a < this.buttonBgs.length) {
this.buttonBgs[a].on("pointerdown", _ => config.buttonActions[a]());
this.buttonBgs[a].on("pointerdown", _ => {
if (globalScene.tweens.getTweensOf(this.modalContainer).length === 0) {
config.buttonActions[a]();
}
});
}
}

View File

@ -98,51 +98,53 @@ export default class RegistrationFormUiHandler extends FormModalUiHandler {
const originalRegistrationAction = this.submitAction;
this.submitAction = _ => {
// Prevent overlapping overrides on action modification
this.submitAction = originalRegistrationAction;
this.sanitizeInputs();
if (globalScene.tweens.getTweensOf(this.modalContainer).length === 0) {
// Prevent overlapping overrides on action modification
this.submitAction = originalRegistrationAction;
this.sanitizeInputs();
globalScene.ui.setMode(UiMode.LOADING, { buttonActions: [] });
const onFail = error => {
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"));
}
if (!this.inputs[1].text) {
return onFail(this.getReadableErrorMessage("invalid password"));
}
if (this.inputs[1].text !== this.inputs[2].text) {
return onFail(i18next.t("menu:passwordNotMatchingConfirmPassword"));
}
const [usernameInput, passwordInput] = this.inputs;
pokerogueApi.account
.register({
username: usernameInput.text,
password: passwordInput.text,
})
.then(registerError => {
if (!registerError) {
pokerogueApi.account
.login({
username: usernameInput.text,
password: passwordInput.text,
})
.then(loginError => {
if (!loginError) {
originalRegistrationAction?.();
} else {
onFail(loginError);
}
});
} else {
onFail(registerError);
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"));
}
if (!this.inputs[1].text) {
return onFail(this.getReadableErrorMessage("invalid password"));
}
if (this.inputs[1].text !== this.inputs[2].text) {
return onFail(i18next.t("menu:passwordNotMatchingConfirmPassword"));
}
const [usernameInput, passwordInput] = this.inputs;
pokerogueApi.account
.register({
username: usernameInput.text,
password: passwordInput.text,
})
.then(registerError => {
if (!registerError) {
pokerogueApi.account
.login({
username: usernameInput.text,
password: passwordInput.text,
})
.then(loginError => {
if (!loginError) {
originalRegistrationAction?.();
} else {
onFail(loginError);
}
});
} else {
onFail(registerError);
}
});
}
};
return true;