[QoL] Username finder (#4040)

* Added the ability to potentially get username from login screen

* Accidentally made dev login enforced :)

* Updated image

src/loading-scene.ts

@@ -165,6 +165,7 @@ export class LoadingScene extends SceneBase {
     this.loadImage("saving_icon", "ui");
     this.loadImage("discord", "ui");
     this.loadImage("google", "ui");
+    this.loadImage("settings_icon", "ui");
 
     this.loadImage("default_bg", "arenas");
     // Load arena images

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

@@ -3,14 +3,17 @@ import { ModalConfig } from "./modal-ui-handler";
 import * as Utils from "../utils";
 import { Mode } from "./ui";
 import i18next from "i18next";
-import BattleScene from "#app/battle-scene.js";
+import BattleScene from "#app/battle-scene";
 import { addTextObject, TextStyle } from "./text";
 import { addWindow } from "./ui-theme";
+import { OptionSelectItem } from "#app/ui/abstact-option-select-ui-handler";
 
 export default class LoginFormUiHandler extends FormModalUiHandler {
   private googleImage: Phaser.GameObjects.Image;
   private discordImage: Phaser.GameObjects.Image;
+  private usernameInfoImage: Phaser.GameObjects.Image;
   private externalPartyContainer: Phaser.GameObjects.Container;
+  private infoContainer: Phaser.GameObjects.Container;
   private externalPartyBg: Phaser.GameObjects.NineSlice;
   private externalPartyTitle: Phaser.GameObjects.Text;
   constructor(scene: BattleScene, mode: Mode | null = null) {
@@ -28,17 +31,14 @@ export default class LoginFormUiHandler extends FormModalUiHandler {
     this.externalPartyContainer.add(this.externalPartyBg);
     this.externalPartyContainer.add(this.externalPartyTitle);
 
+    this.infoContainer = this.scene.add.container(0, 0);
+    this.infoContainer.setInteractive(new Phaser.Geom.Rectangle(0, 0, this.scene.game.canvas.width / 12, this.scene.game.canvas.height / 12), Phaser.Geom.Rectangle.Contains);
+
     const googleImage = this.scene.add.image(0, 0, "google");
     googleImage.setOrigin(0, 0);
     googleImage.setScale(0.07);
     googleImage.setInteractive();
     googleImage.setName("google-icon");
-    googleImage.on("pointerdown", () => {
-      const redirectUri = encodeURIComponent(`${import.meta.env.VITE_SERVER_URL}/auth/google/callback`);
-      const googleId = import.meta.env.VITE_GOOGLE_CLIENT_ID;
-      const googleUrl = `https://accounts.google.com/o/oauth2/auth?client_id=${googleId}&redirect_uri=${redirectUri}&response_type=code&scope=openid`;
-      window.open(googleUrl, "_self");
-    });
     this.googleImage = googleImage;
 
     const discordImage = this.scene.add.image(20, 0, "discord");
@@ -46,12 +46,7 @@ export default class LoginFormUiHandler extends FormModalUiHandler {
     discordImage.setScale(0.07);
     discordImage.setInteractive();
     discordImage.setName("discord-icon");
-    discordImage.on("pointerdown", () => {
-      const redirectUri = encodeURIComponent(`${import.meta.env.VITE_SERVER_URL}/auth/discord/callback`);
-      const discordId = import.meta.env.VITE_DISCORD_CLIENT_ID;
-      const discordUrl = `https://discord.com/api/oauth2/authorize?client_id=${discordId}&redirect_uri=${redirectUri}&response_type=code&scope=identify&prompt=none`;
-      window.open(discordUrl, "_self");
-    });
+
     this.discordImage = discordImage;
 
     this.externalPartyContainer.add(this.googleImage);
@@ -60,6 +55,17 @@ export default class LoginFormUiHandler extends FormModalUiHandler {
     this.externalPartyContainer.add(this.googleImage);
     this.externalPartyContainer.add(this.discordImage);
     this.externalPartyContainer.setVisible(false);
+
+    const usernameInfoImage = this.scene.add.image(20, 0, "settings_icon");
+    usernameInfoImage.setOrigin(0, 0);
+    usernameInfoImage.setScale(0.5);
+    usernameInfoImage.setInteractive();
+    usernameInfoImage.setName("username-info-icon");
+    this.usernameInfoImage = usernameInfoImage;
+
+    this.infoContainer.add(this.usernameInfoImage);
+    this.getUi().add(this.infoContainer);
+    this.infoContainer.setVisible(false);
   }
 
   getModalTitle(config?: ModalConfig): string {
@@ -104,9 +110,8 @@ export default class LoginFormUiHandler extends FormModalUiHandler {
   show(args: any[]): boolean {
     if (super.show(args)) {
 
-      this.processExternalProvider();
-
       const config = args[0] as ModalConfig;
+      this.processExternalProvider(config);
       const originalLoginAction = this.submitAction;
       this.submitAction = (_) => {
         // Prevent overlapping overrides on action modification
@@ -146,12 +151,14 @@ export default class LoginFormUiHandler extends FormModalUiHandler {
   clear() {
     super.clear();
     this.externalPartyContainer.setVisible(false);
+    this.infoContainer.setVisible(false);
 
     this.discordImage.off("pointerdown");
     this.googleImage.off("pointerdown");
+    this.usernameInfoImage.off("pointerdown");
   }
 
-  processExternalProvider() : void {
+  processExternalProvider(config: ModalConfig) : void {
     this.externalPartyTitle.setText(i18next.t("menu:orUse") ?? "");
     this.externalPartyTitle.setX(20+this.externalPartyTitle.text.length);
     this.externalPartyTitle.setVisible(true);
@@ -162,6 +169,55 @@ export default class LoginFormUiHandler extends FormModalUiHandler {
     this.googleImage.setPosition(this.externalPartyBg.width/3.1, this.externalPartyBg.height-60);
     this.discordImage.setPosition(this.externalPartyBg.width/3.1, this.externalPartyBg.height-40);
 
+    this.infoContainer.setPosition(5, -76);
+    this.infoContainer.setVisible(true);
+    this.getUi().moveTo(this.infoContainer, this.getUi().length - 1);
+    this.usernameInfoImage.setPositionRelative(this.infoContainer, 0, 0);
+
+    this.discordImage.on("pointerdown", () => {
+      const redirectUri = encodeURIComponent(`${import.meta.env.VITE_SERVER_URL}/auth/discord/callback`);
+      const discordId = import.meta.env.VITE_DISCORD_CLIENT_ID;
+      const discordUrl = `https://discord.com/api/oauth2/authorize?client_id=${discordId}&redirect_uri=${redirectUri}&response_type=code&scope=identify&prompt=none`;
+      window.open(discordUrl, "_self");
+    });
+
+    this.googleImage.on("pointerdown", () => {
+      const redirectUri = encodeURIComponent(`${import.meta.env.VITE_SERVER_URL}/auth/google/callback`);
+      const googleId = import.meta.env.VITE_GOOGLE_CLIENT_ID;
+      const googleUrl = `https://accounts.google.com/o/oauth2/auth?client_id=${googleId}&redirect_uri=${redirectUri}&response_type=code&scope=openid`;
+      window.open(googleUrl, "_self");
+    });
+
+    const onFail = error => {
+      this.scene.ui.setMode(Mode.LOADING, { buttonActions: [] });
+      this.scene.ui.setModeForceTransition(Mode.LOGIN_FORM, Object.assign(config, { errorMessage: error?.trim() }));
+      this.scene.ui.playError();
+    };
+
+    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: () => {
+              this.scene.ui.revertMode();
+              return true;
+            }
+          });
+        }
+        this.scene.ui.setOverlayMode(Mode.OPTION_SELECT, {
+          options: options,
+          delay: 1000
+        });
+      } else {
+        return onFail("You have too many save files to use this");
+      }
+    });
+
     this.externalPartyContainer.setAlpha(0);
     this.scene.tweens.add({
       targets: this.externalPartyContainer,
@@ -170,5 +226,14 @@ export default class LoginFormUiHandler extends FormModalUiHandler {
       y: "-=24",
       alpha: 1
     });
+
+    this.infoContainer.setAlpha(0);
+    this.scene.tweens.add({
+      targets: this.infoContainer,
+      duration: Utils.fixedInt(1000),
+      ease: "Sine.easeInOut",
+      y: "-=24",
+      alpha: 1
+    });
   }
 }