From e8430c9ce0528365b395fdf1a32d0f3a2abf7144 Mon Sep 17 00:00:00 2001 From: Opaque02 <66582645+Opaque02@users.noreply.github.com> Date: Wed, 25 Sep 2024 19:52:24 +1000 Subject: [PATCH] Fixed linking and unlinking and updated menu options --- src/ui/admin-ui-handler.ts | 106 ++++++++++++++++++++++---------- src/ui/form-modal-ui-handler.ts | 29 ++++++--- src/ui/menu-ui-handler.ts | 79 ++++++++++++++++++++---- src/ui/modal-ui-handler.ts | 3 + 4 files changed, 165 insertions(+), 52 deletions(-) diff --git a/src/ui/admin-ui-handler.ts b/src/ui/admin-ui-handler.ts index b568fda8382..b89d4eda54c 100644 --- a/src/ui/admin-ui-handler.ts +++ b/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 unlinkAction: Function; + private adminMode: AdminMode; + private readonly errorMessageName = "errorMessageLabel"; 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[] { - return ["Link account", "Cancel"]; + 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]; - super.setup(); + this.modalContainer.list = this.modalContainer.list.filter(mC => mC.type !== "Text" || mC.text === "" || mC.text === this.getModalTitle() || mC.name === this.errorMessageName); - 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) { - return onFail("Username is required"); + 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) { - return onFail("Discord Id is required"); + if (this.adminMode === AdminMode.LINK) { + return onFail("Discord Id is required"); + } + if (this.adminMode === AdminMode.UNLINK && !this.inputs[0].text) { + return onFail("Either username or discord is required"); + } } - if (originAction === 0) { + 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 (originAction === 1) { + } else if (this.adminMode === AdminMode.UNLINK) { 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 ""; + } +} diff --git a/src/ui/form-modal-ui-handler.ts b/src/ui/form-modal-ui-handler.ts index 331154263ad..1e3b96e6b82 100644 --- a/src/ui/form-modal-ui-handler.ts +++ b/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 { diff --git a/src/ui/menu-ui-handler.ts b/src/ui/menu-ui-handler.ts index c162415accb..0ccafdaf0ea 100644 --- a/src/ui/menu-ui-handler.ts +++ b/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, @@ -384,24 +385,76 @@ export default class MenuUiHandler extends MessageUiHandler { communityOptions.push({ label: "Admin", handler: () => { - ui.playSelect(); - ui.setOverlayMode(Mode.ADMIN, { - buttonActions: [ - () => { - ui.revertMode(); - }, - () => { - ui.revertMode(); - }, - () => { - ui.revertMode(); + + 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(); + } + ] + }, mode); + return true; } - ] - }, "link"); + }); + }); + 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"), diff --git a/src/ui/modal-ui-handler.ts b/src/ui/modal-ui-handler.ts index 80a39d7bf7f..247925997b4 100644 --- a/src/ui/modal-ui-handler.ts +++ b/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);