[BUG][UI/UX] Correction of errors when `` Save & Quit` and ` Log out`` (#3105)

* Fixes confirmation issues in SAVE_AND_QUIT and LOG_OUT

* Added LOADING mode to prevent spamming from SAVE_AND_QUIT and LOG_OUT buttons, and added option to set black background for LOADING mode

* Fixed conditional statement to ensure robustness in live environments to avoid potential issues in production

* Good overlay position
This commit is contained in:
Adrián T. 2024-09-11 23:12:20 -04:00 committed by GitHub
parent 28012b8d85
commit 7ed7fec808
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 49 additions and 10 deletions

View File

@ -460,6 +460,7 @@ export default class MenuUiHandler extends MessageUiHandler {
} }
} }
} }
this.showText("", 0);
switch (adjustedCursor) { switch (adjustedCursor) {
case MenuOptions.GAME_SETTINGS: case MenuOptions.GAME_SETTINGS:
ui.setOverlayMode(Mode.SETTINGS); ui.setOverlayMode(Mode.SETTINGS);
@ -548,15 +549,28 @@ export default class MenuUiHandler extends MessageUiHandler {
case MenuOptions.SAVE_AND_QUIT: case MenuOptions.SAVE_AND_QUIT:
if (this.scene.currentBattle) { if (this.scene.currentBattle) {
success = true; success = true;
const doSaveQuit = () => {
ui.setMode(Mode.LOADING, {
buttonActions: [], fadeOut: () =>
this.scene.gameData.saveAll(this.scene, true, true, true, true).then(() => {
this.scene.reset(true);
})
});
};
if (this.scene.currentBattle.turn > 1) { if (this.scene.currentBattle.turn > 1) {
ui.showText(i18next.t("menuUiHandler:losingProgressionWarning"), null, () => { ui.showText(i18next.t("menuUiHandler:losingProgressionWarning"), null, () => {
ui.setOverlayMode(Mode.CONFIRM, () => this.scene.gameData.saveAll(this.scene, true, true, true, true).then(() => this.scene.reset(true)), () => { if (!this.active) {
this.showText("", 0);
return;
}
ui.setOverlayMode(Mode.CONFIRM, doSaveQuit, () => {
ui.revertMode(); ui.revertMode();
ui.showText("", 0); this.showText("", 0);
}, false, -98); }, false, -98);
}); });
} else { } else {
this.scene.gameData.saveAll(this.scene, true, true, true, true).then(() => this.scene.reset(true)); doSaveQuit();
} }
} else { } else {
error = true; error = true;
@ -565,19 +579,25 @@ export default class MenuUiHandler extends MessageUiHandler {
case MenuOptions.LOG_OUT: case MenuOptions.LOG_OUT:
success = true; success = true;
const doLogout = () => { const doLogout = () => {
Utils.apiFetch("account/logout", true).then(res => { ui.setMode(Mode.LOADING, {
buttonActions: [], fadeOut: () => Utils.apiFetch("account/logout", true).then(res => {
if (!res.ok) { if (!res.ok) {
console.error(`Log out failed (${res.status}: ${res.statusText})`); console.error(`Log out failed (${res.status}: ${res.statusText})`);
} }
Utils.removeCookie(Utils.sessionIdKey); Utils.removeCookie(Utils.sessionIdKey);
updateUserInfo().then(() => this.scene.reset(true, true)); updateUserInfo().then(() => this.scene.reset(true, true));
})
}); });
}; };
if (this.scene.currentBattle) { if (this.scene.currentBattle) {
ui.showText(i18next.t("menuUiHandler:losingProgressionWarning"), null, () => { ui.showText(i18next.t("menuUiHandler:losingProgressionWarning"), null, () => {
if (!this.active) {
this.showText("", 0);
return;
}
ui.setOverlayMode(Mode.CONFIRM, doLogout, () => { ui.setOverlayMode(Mode.CONFIRM, doLogout, () => {
ui.revertMode(); ui.revertMode();
ui.showText("", 0); this.showText("", 0);
}, false, -98); }, false, -98);
}); });
} else { } else {

View File

@ -89,6 +89,25 @@ export abstract class ModalUiHandler extends UiHandler {
show(args: any[]): boolean { show(args: any[]): boolean {
if (args.length >= 1 && "buttonActions" in args[0]) { if (args.length >= 1 && "buttonActions" in args[0]) {
super.show(args); super.show(args);
if (args[0].hasOwnProperty("fadeOut") && typeof args[0].fadeOut === "function") {
const [ marginTop, marginRight, marginBottom, marginLeft ] = this.getMargin();
const overlay = this.scene.add.rectangle(( this.getWidth() + marginLeft + marginRight) / 2, (this.getHeight() + marginTop + marginBottom) / 2,this.scene.game.canvas.width / 6,this.scene.game.canvas.height /6, 0);
overlay.setOrigin(0.5,0.5);
overlay.setName("rect-ui-overlay-modal");
overlay.setAlpha(0);
this.modalContainer.add(overlay);
this.modalContainer.moveTo(overlay,0);
this.scene.tweens.add({
targets: overlay,
alpha: 1,
duration: 250,
ease: "Sine.easeOut",
onComplete: args[0].fadeOut
});
}
const config = args[0] as ModalConfig; const config = args[0] as ModalConfig;