Fixed linking and unlinking and updated menu options

src/ui/admin-ui-handler.ts

@@ -7,16 +7,16 @@ import { Button } from "#app/enums/buttons";
 
 export default class AdminUiHandler extends FormModalUiHandler {
 
-  private adminMode: string;
+  private adminMode: AdminMode;
-
+  private readonly errorMessageName = "errorMessageLabel";
-  private unlinkAction: Function;
 
   constructor(scene: BattleScene, mode: Mode | null = null) {
     super(scene, mode);
   }
 
   setup(): void {
-
+    super.setup();
+    this.errorMessage.name = this.errorMessageName;
   }
 
   getModalTitle(config?: ModalConfig): string {
@@ -24,11 +24,18 @@ export default class AdminUiHandler extends FormModalUiHandler {
   }
 
   getFields(config?: ModalConfig): string[] {
-    return this.adminMode === "link" ? ["Username", "Discord ID"] : ["Test", "Hello"];
+    switch (this.adminMode) {
+    case AdminMode.LINK:
+      return ["Username", "Discord ID"];
+    case AdminMode.UNLINK:
+      return ["Username", "Discord ID"];
+    default:
+      return [""];
+    }
   }
 
   getWidth(config?: ModalConfig): number {
-    return 220;
+    return 160;
   }
 
   getMargin(config?: ModalConfig): [number, number, number, number] {
@@ -36,7 +43,14 @@ export default class AdminUiHandler extends FormModalUiHandler {
   }
 
   getButtonLabels(config?: ModalConfig): string[] {
+    switch (this.adminMode) {
+    case AdminMode.LINK:
       return ["Link account", "Cancel"];
+    case AdminMode.UNLINK:
+      return ["Unlink account", "Cancel"];
+    default:
+      return ["Activate ADMIN", "Cancel"];
+    }
   }
 
   processInput(button: Button): boolean {
@@ -49,40 +63,49 @@ export default class AdminUiHandler extends FormModalUiHandler {
   }
 
   show(args: any[]): boolean {
-    this.adminMode = args[args.length - 1];
+    this.modalContainer.list = this.modalContainer.list.filter(mC => mC.type !== "Text" || mC.text === "" || mC.text === this.getModalTitle() || mC.name === this.errorMessageName);
-    super.setup();
 
-    if (super.show(args.slice(0, -1))) {
+    this.adminMode = args[args.length - 1] as AdminMode;
+
+    const fields = this.getFields();
+    const hasTitle = !!this.getModalTitle();
+    this.updateFields(fields, hasTitle);
+    this.updateContainer(args[0]);
+
+    const labels = this.getButtonLabels();
+    for (let i = 0; i < labels.length; i++) {
+      this.buttonLabels[i].setText(labels[i]);
+    }
+
+    this.errorMessage.setPosition(10, (hasTitle ? 31 : 5) + 20 * (fields.length - 1) + 16 + this.getButtonTopMargin());
+
+    if (super.show(args)) {
       const config = args[0] as ModalConfig;
       const originalSubmitAction = this.submitAction;
-      let originAction: number = 0; // this is used to keep track of which button has been pressed
-      /*  This code is here because currently the form-modal-ui-handler is hardcoded to only have a single action button and a cancel button
-       *  This code below adds interactivity and a specific action to the unlink account button. This also sets up the originalAction variable
-       *  from above, which lets us figure out if we're linking or unlinking, which makes this.submitAction do post different API calls
-       */
-      for (let i = 0; i < this.buttonBgs.length - 1; i++) {
-        this.buttonBgs[i].off("pointerdown");
-        this.buttonBgs[i].on("pointerdown", () => {
-          originAction = i;
-          if (this.submitAction) {
-            this.submitAction();
-          }
-        });
-      }
       this.submitAction = (_) => {
         this.submitAction = originalSubmitAction;
         this.scene.ui.setMode(Mode.LOADING, { buttonActions: [] });
         const onFail = error => {
-          this.scene.ui.setMode(Mode.ADMIN, Object.assign(config, { errorMessage: error?.trim() }));
+          this.scene.ui.setMode(Mode.ADMIN, Object.assign(config, { errorMessage: error?.trim() }), this.adminMode);
           this.scene.ui.playError();
         };
         if (!this.inputs[0].text) {
+          if (this.adminMode === AdminMode.LINK) {
             return onFail("Username is required");
           }
+          if (this.adminMode === AdminMode.UNLINK && !this.inputs[1].text) {
+            return onFail("Either username or discord Id is required");
+          }
+        }
         if (!this.inputs[1].text) {
+          if (this.adminMode === AdminMode.LINK) {
             return onFail("Discord Id is required");
           }
-        if (originAction === 0) {
+          if (this.adminMode === AdminMode.UNLINK && !this.inputs[0].text) {
+            return onFail("Either username or discord is required");
+          }
+        }
+        if (this.adminMode === AdminMode.LINK) {
           Utils.apiPost("admin/account/discord-link", `username=${encodeURIComponent(this.inputs[0].text)}&discordId=${encodeURIComponent(this.inputs[1].text)}`, "application/x-www-form-urlencoded", true)
             .then(response => {
               if (!response.ok) {
@@ -91,13 +114,14 @@ export default class AdminUiHandler extends FormModalUiHandler {
               this.inputs[0].setText("");
               this.inputs[1].setText("");
               this.scene.ui.revertMode();
+              this.scene.ui.revertMode();
             })
             .catch((err) => {
               console.error(err);
               this.scene.ui.revertMode();
+              this.scene.ui.revertMode();
             });
-          return false;
+        } else if (this.adminMode === AdminMode.UNLINK) {
-        } else if (originAction === 1) {
           Utils.apiPost("admin/account/discord-unlink", `username=${encodeURIComponent(this.inputs[0].text)}&discordId=${encodeURIComponent(this.inputs[1].text)}`, "application/x-www-form-urlencoded", true)
             .then(response => {
               if (!response.ok) {
@@ -106,13 +130,16 @@ export default class AdminUiHandler extends FormModalUiHandler {
               this.inputs[0].setText("");
               this.inputs[1].setText("");
               this.scene.ui.revertMode();
+              this.scene.ui.revertMode();
             })
             .catch((err) => {
               console.error(err);
               this.scene.ui.revertMode();
+              this.scene.ui.revertMode();
             });
-          return false;
         }
+
+        return false;
       };
       return true;
     }
@@ -124,3 +151,20 @@ export default class AdminUiHandler extends FormModalUiHandler {
     super.clear();
   }
 }
+
+export enum AdminMode {
+  LINK,
+  UNLINK
+}
+
+
+export function getAdminModeName(adminMode: AdminMode): string {
+  switch (adminMode) {
+  case AdminMode.LINK:
+    return "Link";
+  case AdminMode.UNLINK:
+    return "Unlink";
+  default:
+    return "";
+  }
+}

src/ui/form-modal-ui-handler.ts

@@ -19,6 +19,7 @@ export abstract class FormModalUiHandler extends ModalUiHandler {
   protected errorMessage: Phaser.GameObjects.Text;
   protected submitAction: Function | null;
   protected tween: Phaser.Tweens.Tween;
+  protected formLabels: Phaser.GameObjects.Text[];
 
   constructor(scene: BattleScene, mode: Mode | null = null) {
     super(scene, mode);
@@ -26,6 +27,7 @@ export abstract class FormModalUiHandler extends ModalUiHandler {
     this.editing = false;
     this.inputContainers = [];
     this.inputs = [];
+    this.formLabels = [];
   }
 
   abstract getFields(): string[];
@@ -49,10 +51,26 @@ export abstract class FormModalUiHandler extends ModalUiHandler {
 
     const hasTitle = !!this.getModalTitle();
 
+    if (fields.length > 1 && fields[0]!=="") {
+      this.updateFields(fields, hasTitle);
+    }
+
+    this.errorMessage = addTextObject(this.scene, 10, (hasTitle ? 31 : 5) + 20 * (fields.length - 1) + 16 + this.getButtonTopMargin(), "", TextStyle.TOOLTIP_CONTENT);
+    this.errorMessage.setColor(this.getTextColor(TextStyle.SUMMARY_PINK));
+    this.errorMessage.setShadowColor(this.getTextColor(TextStyle.SUMMARY_PINK, true));
+    this.errorMessage.setVisible(false);
+    this.modalContainer.add(this.errorMessage);
+  }
+
+  updateFields(fields: string[], hasTitle: boolean) {
+    this.inputContainers = [];
+    this.inputs = [];
+    this.formLabels= [];
     fields.forEach((field, f) => {
       const label = addTextObject(this.scene, 10, (hasTitle ? 31 : 5) + 20 * f, field, TextStyle.TOOLTIP_CONTENT);
 
-      this.modalContainer.add(label);
+      this.formLabels.push(label);
+      this.modalContainer.add(this.formLabels[this.formLabels.length - 1]);
 
       const inputContainer = this.scene.add.container(70, (hasTitle ? 28 : 2) + 20 * f);
       inputContainer.setVisible(false);
@@ -65,17 +83,12 @@ export abstract class FormModalUiHandler extends ModalUiHandler {
 
       inputContainer.add(inputBg);
       inputContainer.add(input);
-      this.modalContainer.add(inputContainer);
 
       this.inputContainers.push(inputContainer);
+      this.modalContainer.add(this.inputContainers[this.inputContainers.length - 1]);
+
       this.inputs.push(input);
     });
-
-    this.errorMessage = addTextObject(this.scene, 10, (hasTitle ? 31 : 5) + 20 * (fields.length - 1) + 16 + this.getButtonTopMargin(), "", TextStyle.TOOLTIP_CONTENT);
-    this.errorMessage.setColor(this.getTextColor(TextStyle.SUMMARY_PINK));
-    this.errorMessage.setShadowColor(this.getTextColor(TextStyle.SUMMARY_PINK, true));
-    this.errorMessage.setVisible(false);
-    this.modalContainer.add(this.errorMessage);
   }
 
   show(args: any[]): boolean {

src/ui/menu-ui-handler.ts

@@ -13,6 +13,7 @@ import { GameDataType } from "#enums/game-data-type";
 import BgmBar from "#app/ui/bgm-bar";
 import AwaitableUiHandler from "./awaitable-ui-handler";
 import { SelectModifierPhase } from "#app/phases/select-modifier-phase";
+import { AdminMode, getAdminModeName } from "./admin-ui-handler";
 
 enum MenuOptions {
   GAME_SETTINGS,
@@ -383,25 +384,77 @@ export default class MenuUiHandler extends MessageUiHandler {
     if (!bypassLogin && loggedInUser?.hasAdminRole) {
       communityOptions.push({
         label: "Admin",
+        handler: () => {
+
+          const options: OptionSelectItem[] = [];
+          //for (let i = 0; i < Object.values(AdminMode).filter((v) => !isNaN(Number(v))).length; i++) {
+          //fields.forEach((field, f) => {
+          Object.values(AdminMode).filter((v) => !isNaN(Number(v))).forEach((mode) => {
+            options.push({
+              label: getAdminModeName(mode),
               handler: () => {
                 ui.playSelect();
                 ui.setOverlayMode(Mode.ADMIN, {
                   buttonActions: [
                     () => {
                       ui.revertMode();
-              },
-              () => {
                       ui.revertMode();
                     },
                     () => {
                       ui.revertMode();
+                      ui.revertMode();
                     }
                   ]
-          }, "link");
+                }, mode);
+                return true;
+              }
+            });
+          });
+          options.push({
+            label: "Cancel",
+            handler: () => {
+              ui.revertMode();
+              return true;
+            }
+          });
+          this.scene.ui.setOverlayMode(Mode.OPTION_SELECT, {
+            options: options,
+            delay: 0
+          });
+
+          //ui.playSelect();
+          //ui.setOverlayMode(Mode.ADMIN, {
+          //  buttonActions: [
+          //    () => {
+          //      ui.revertMode();
+          //    },
+          //    () => {
+          //      ui.revertMode();
+          //    }
+          //  ]
+          //}, AdminMode.LINK);
           return true;
         },
         keepOpen: true
       });
+      //communityOptions.push({
+      //  label: "Admin2",
+      //  handler: () => {
+      //    ui.playSelect();
+      //    ui.setOverlayMode(Mode.ADMIN, {
+      //      buttonActions: [
+      //        () => {
+      //          ui.revertMode();
+      //        },
+      //        () => {
+      //          ui.revertMode();
+      //        }
+      //      ]
+      //    }, AdminMode.UNLINK);
+      //    return true;
+      //  },
+      //  keepOpen: true
+      //});
     }
     communityOptions.push({
       label: i18next.t("menuUiHandler:cancel"),

src/ui/modal-ui-handler.ts

@@ -15,12 +15,14 @@ export abstract class ModalUiHandler extends UiHandler {
   protected titleText: Phaser.GameObjects.Text;
   protected buttonContainers: Phaser.GameObjects.Container[];
   protected buttonBgs: Phaser.GameObjects.NineSlice[];
+  protected buttonLabels: Phaser.GameObjects.Text[];
 
   constructor(scene: BattleScene, mode: Mode | null = null) {
     super(scene, mode);
 
     this.buttonContainers = [];
     this.buttonBgs = [];
+    this.buttonLabels = [];
   }
 
   abstract getModalTitle(config?: ModalConfig): string;
@@ -75,6 +77,7 @@ export abstract class ModalUiHandler extends UiHandler {
 
     const buttonContainer = this.scene.add.container(0, buttonTopMargin);
 
+    this.buttonLabels.push(buttonLabel);
     this.buttonBgs.push(buttonBg);
     this.buttonContainers.push(buttonContainer);