[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

src/ui/menu-ui-handler.ts

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

src/ui/modal-ui-handler.ts

@@ -89,6 +89,25 @@ export abstract class ModalUiHandler extends UiHandler {
   show(args: any[]): boolean {
     if (args.length >= 1 && "buttonActions" in args[0]) {
       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;