[Enhancement][UI] Merging Achievements and Vouchers into a single Page (#3424)

* Merging Achievements/Vouchers

* Fixed bug

* Fixed bug

* Removed vouchers-ui-handler.ts

* fixed update bug

* sample localization change

* Fixing imports

* Organized localizations

* Not a Cat commit unless something's forgotten

* Made Action button/text position responsive to language.

* typedocs

* idk why phaser

* ugh

* Fixed cursors

* why

* Removing stray file

* Merge conflicts yay

---------

Co-authored-by: Frutescens <info@laptop>

src/locales/de/menu-ui-handler.json

@@ -3,7 +3,6 @@
   "ACHIEVEMENTS": "Erfolge",
   "STATS": "Statistiken",
   "RUN_HISTORY": "Laufhistorie",
-  "VOUCHERS": "Gutscheine",
   "EGG_LIST": "Eierliste",
   "EGG_GACHA": "Eier-Gacha",
   "MANAGE_DATA": "Daten verwalten",

src/locales/en/menu-ui-handler.json

@@ -3,7 +3,6 @@
   "ACHIEVEMENTS": "Achievements",
   "STATS": "Stats",
   "RUN_HISTORY": "Run History",
-  "VOUCHERS": "Vouchers",
   "EGG_LIST": "Egg List",
   "EGG_GACHA": "Egg Gacha",
   "MANAGE_DATA": "Manage Data",

src/locales/es/menu-ui-handler.json

@@ -3,7 +3,6 @@
   "ACHIEVEMENTS": "Logros",
   "STATS": "Estadísticas",
   "RUN_HISTORY": "Historial de partida",
-  "VOUCHERS": "Vales",
   "EGG_LIST": "Lista de Huevos",
   "EGG_GACHA": "Gacha de Huevos",
   "MANAGE_DATA": "Gestionar Datos",

src/locales/fr/menu-ui-handler.json

@@ -3,7 +3,6 @@
   "ACHIEVEMENTS": "Succès",
   "STATS": "Statistiques",
   "RUN_HISTORY": "Historique",
-  "VOUCHERS": "Coupons",
   "EGG_LIST": "Liste des Œufs",
   "EGG_GACHA": "Gacha-Œufs",
   "MANAGE_DATA": "Mes données",

src/locales/it/menu-ui-handler.json

@@ -3,7 +3,6 @@
   "ACHIEVEMENTS": "Obiettivi",
   "STATS": "Statistiche",
   "RUN_HISTORY": "Run precedenti",
-  "VOUCHERS": "Biglietti",
   "EGG_LIST": "Lista uova",
   "EGG_GACHA": "Macchine uova",
   "MANAGE_DATA": "Gestisci dati",

src/locales/ja/menu-ui-handler.json

@@ -3,7 +3,6 @@
   "ACHIEVEMENTS": "じっせき",
   "STATS": "とうけい",
   "RUN_HISTORY":"ラン履歴",
-  "VOUCHERS": "クーポン",
   "EGG_LIST": "タマゴリスト",
   "EGG_GACHA": "タマゴガチャ",
   "MANAGE_DATA": "データかんり",

src/locales/ko/menu-ui-handler.json

@@ -3,7 +3,6 @@
   "ACHIEVEMENTS": "업적",
   "STATS": "통계",
   "RUN_HISTORY": "플레이 이력",
-  "VOUCHERS": "바우처",
   "EGG_LIST": "알 목록",
   "EGG_GACHA": "알 뽑기",
   "MANAGE_DATA": "데이터 관리",

src/locales/pt_BR/menu-ui-handler.json

@@ -3,7 +3,6 @@
   "ACHIEVEMENTS": "Conquistas",
   "STATS": "Estatísticas",
   "RUN_HISTORY": "Histórico de Jogos",
-  "VOUCHERS": "Vouchers",
   "EGG_LIST": "Incubadora",
   "EGG_GACHA": "Gacha de ovos",
   "MANAGE_DATA": "Gerenciar dados",

src/locales/zh_CN/menu-ui-handler.json

@@ -3,7 +3,6 @@
   "ACHIEVEMENTS": "成就",
   "STATS": "数据统计",
   "RUN_HISTORY": "历史记录",
-  "VOUCHERS": "兑换券",
   "EGG_LIST": "蛋列表",
   "EGG_GACHA": "扭蛋机",
   "MANAGE_DATA": "管理数据",

src/locales/zh_TW/menu-ui-handler.json

@@ -3,7 +3,6 @@
   "ACHIEVEMENTS": "成就",
   "STATS": "數據",
   "RUN_HISTORY": "歷史記錄",
-  "VOUCHERS": "兌換劵",
   "EGG_LIST": "蛋列表",
   "EGG_GACHA": "扭蛋機",
   "MANAGE_DATA": "管理數據",

src/ui/achvs-ui-handler.ts

@@ -2,6 +2,7 @@ import BattleScene from "../battle-scene";
 import { Button } from "#enums/buttons";
 import i18next from "i18next";
 import { Achv, achvs, getAchievementDescription } from "../system/achv";
+import { Voucher, getVoucherTypeIcon, getVoucherTypeName, vouchers } from "../system/voucher";
 import MessageUiHandler from "./message-ui-handler";
 import { addTextObject, TextStyle } from "./text";
 import { Mode } from "./ui";
@@ -9,40 +10,67 @@ import { addWindow } from "./ui-theme";
 import { ParseKeys } from "i18next";
 import { PlayerGender } from "#enums/player-gender";
 
+enum Page {
+  ACHIEVEMENTS,
+  VOUCHERS
+}
+
 export default class AchvsUiHandler extends MessageUiHandler {
-  private readonly ACHV_ROWS = 4;
+  private readonly ROWS = 4;
-  private readonly ACHV_COLS = 17;
+  private readonly COLS = 17;
 
-  private achvsContainer: Phaser.GameObjects.Container;
+  private mainContainer: Phaser.GameObjects.Container;
-  private achvIconsContainer: Phaser.GameObjects.Container;
+  private iconsContainer: Phaser.GameObjects.Container;
+
+  private headerBg: Phaser.GameObjects.NineSlice;
+  private headerText: Phaser.GameObjects.Text;
+  private headerActionText: Phaser.GameObjects.Text;
+  private headerActionButton: Phaser.GameObjects.Sprite;
+  private headerBgX: number;
+  private iconsBg: Phaser.GameObjects.NineSlice;
+  private icons: Phaser.GameObjects.Sprite[];
 
-  private achvIconsBg: Phaser.GameObjects.NineSlice;
-  private achvIcons: Phaser.GameObjects.Sprite[];
   private titleText: Phaser.GameObjects.Text;
   private scoreText: Phaser.GameObjects.Text;
   private unlockText: Phaser.GameObjects.Text;
 
+  private achvsName: string;
   private achvsTotal: number;
-  private scrollCursor: number;
+  private vouchersName: string;
+  private vouchersTotal: number;
+  private currentTotal: number;
 
+  private scrollCursor: number;
   private cursorObj: Phaser.GameObjects.NineSlice | null;
+  private currentPage: Page;
 
   constructor(scene: BattleScene, mode: Mode | null = null) {
     super(scene, mode);
 
     this.achvsTotal = Object.keys(achvs).length;
+    this.vouchersTotal = Object.keys(vouchers).length;
     this.scrollCursor = 0;
   }
 
   setup() {
     const ui = this.getUi();
 
-    this.achvsContainer = this.scene.add.container(1, -(this.scene.game.canvas.height / 6) + 1);
+    this.mainContainer = this.scene.add.container(1, -(this.scene.game.canvas.height / 6) + 1);
 
-    this.achvsContainer.setInteractive(new Phaser.Geom.Rectangle(0, 0, this.scene.game.canvas.width / 6, this.scene.game.canvas.height / 6), Phaser.Geom.Rectangle.Contains);
+    this.mainContainer.setInteractive(new Phaser.Geom.Rectangle(0, 0, this.scene.game.canvas.width / 6, this.scene.game.canvas.height / 6), Phaser.Geom.Rectangle.Contains);
 
-    const headerBg = addWindow(this.scene, 0, 0, (this.scene.game.canvas.width / 6) - 2, 24);
+    this.headerBg = addWindow(this.scene, 0, 0, (this.scene.game.canvas.width / 6) - 2, 24);
-    headerBg.setOrigin(0, 0);
+    this.headerBg.setOrigin(0, 0);
+
+    this.headerText = addTextObject(this.scene, 0, 0, "", TextStyle.SETTINGS_LABEL);
+    this.headerText.setOrigin(0, 0);
+    this.headerText.setPositionRelative(this.headerBg, 8, 4);
+    this.headerActionButton = new Phaser.GameObjects.Sprite(this.scene, 0, 0, "keyboard", "SPACE.png");
+    this.headerActionButton.setOrigin(0, 0);
+    this.headerActionButton.setPositionRelative(this.headerBg, 236, 6);
+    this.headerActionText = addTextObject(this.scene, 0, 0, "", TextStyle.WINDOW, {fontSize:"60px"});
+    this.headerActionText.setOrigin(0, 0);
+    this.headerActionText.setPositionRelative(this.headerBg, 264, 8);
 
     // We need to get the player gender from the game data to add the correct prefix to the achievement name
     const playerGender = this.scene.gameData.gender;
@@ -51,30 +79,29 @@ export default class AchvsUiHandler extends MessageUiHandler {
       genderPrefix = "PGF";
     }
 
-    const headerText = addTextObject(this.scene, 0, 0, i18next.t(`${genderPrefix}achv:Achievements.name` as ParseKeys), TextStyle.SETTINGS_LABEL);
+    this.achvsName = i18next.t(`${genderPrefix}achv:Achievements.name` as ParseKeys);
-    headerText.setOrigin(0, 0);
+    this.vouchersName = i18next.t("voucher:vouchers");
-    headerText.setPositionRelative(headerBg, 8, 4);
 
-    this.achvIconsBg = addWindow(this.scene, 0, headerBg.height, (this.scene.game.canvas.width / 6) - 2, (this.scene.game.canvas.height / 6) - headerBg.height - 68);
+    this.iconsBg = addWindow(this.scene, 0, this.headerBg.height, (this.scene.game.canvas.width / 6) - 2, (this.scene.game.canvas.height / 6) - this.headerBg.height - 68);
-    this.achvIconsBg.setOrigin(0, 0);
+    this.iconsBg.setOrigin(0, 0);
 
-    this.achvIconsContainer = this.scene.add.container(6, headerBg.height + 6);
+    this.iconsContainer = this.scene.add.container(6, this.headerBg.height + 6);
 
-    this.achvIcons = [];
+    this.icons = [];
 
-    for (let a = 0; a < this.ACHV_ROWS * this.ACHV_COLS; a++) {
+    for (let a = 0; a < this.ROWS * this.COLS; a++) {
-      const x = (a % this.ACHV_COLS) * 18;
+      const x = (a % this.COLS) * 18;
-      const y = Math.floor(a / this.ACHV_COLS) * 18;
+      const y = Math.floor(a / this.COLS) * 18;
 
       const icon = this.scene.add.sprite(x, y, "items", "unknown");
       icon.setOrigin(0, 0);
       icon.setScale(0.5);
 
-      this.achvIcons.push(icon);
+      this.icons.push(icon);
-      this.achvIconsContainer.add(icon);
+      this.iconsContainer.add(icon);
     }
 
-    const titleBg = addWindow(this.scene, 0, headerBg.height + this.achvIconsBg.height, 174, 24);
+    const titleBg = addWindow(this.scene, 0, this.headerBg.height + this.iconsBg.height, 174, 24);
     titleBg.setOrigin(0, 0);
 
     this.titleText = addTextObject(this.scene, 0, 0, "", TextStyle.WINDOW);
@@ -105,36 +132,40 @@ export default class AchvsUiHandler extends MessageUiHandler {
 
     this.message = descriptionText;
 
-    this.achvsContainer.add(headerBg);
+    this.mainContainer.add(this.headerBg);
-    this.achvsContainer.add(headerText);
+    this.mainContainer.add(this.headerActionButton);
-    this.achvsContainer.add(this.achvIconsBg);
+    this.mainContainer.add(this.headerText);
-    this.achvsContainer.add(this.achvIconsContainer);
+    this.mainContainer.add(this.headerActionText);
-    this.achvsContainer.add(titleBg);
+    this.mainContainer.add(this.iconsBg);
-    this.achvsContainer.add(this.titleText);
+    this.mainContainer.add(this.iconsContainer);
-    this.achvsContainer.add(scoreBg);
+    this.mainContainer.add(titleBg);
-    this.achvsContainer.add(this.scoreText);
+    this.mainContainer.add(this.titleText);
-    this.achvsContainer.add(unlockBg);
+    this.mainContainer.add(scoreBg);
-    this.achvsContainer.add(this.unlockText);
+    this.mainContainer.add(this.scoreText);
-    this.achvsContainer.add(descriptionBg);
+    this.mainContainer.add(unlockBg);
-    this.achvsContainer.add(descriptionText);
+    this.mainContainer.add(this.unlockText);
+    this.mainContainer.add(descriptionBg);
+    this.mainContainer.add(descriptionText);
 
-    ui.add(this.achvsContainer);
+    ui.add(this.mainContainer);
 
+    this.currentPage = Page.ACHIEVEMENTS;
     this.setCursor(0);
 
-    this.achvsContainer.setVisible(false);
+    this.mainContainer.setVisible(false);
   }
 
   show(args: any[]): boolean {
     super.show(args);
 
+    this.headerBgX = this.headerBg.getTopRight().x;
     this.updateAchvIcons();
 
-    this.achvsContainer.setVisible(true);
+    this.mainContainer.setVisible(true);
     this.setCursor(0);
     this.setScrollCursor(0);
 
-    this.getUi().moveTo(this.achvsContainer, this.getUi().length - 1);
+    this.getUi().moveTo(this.mainContainer, this.getUi().length - 1);
 
     this.getUi().hideTooltip();
 
@@ -160,48 +191,71 @@ export default class AchvsUiHandler extends MessageUiHandler {
     this.unlockText.setText(unlocked ? new Date(achvUnlocks[achv.id]).toLocaleDateString() : i18next.t(`${genderPrefix}achv:Locked.name` as ParseKeys));
   }
 
+  protected showVoucher(voucher: Voucher) {
+    const voucherUnlocks = this.scene.gameData.voucherUnlocks;
+    const unlocked = voucherUnlocks.hasOwnProperty(voucher.id);
+
+    this.titleText.setText(getVoucherTypeName(voucher.voucherType));
+    this.showText(voucher.description);
+    this.unlockText.setText(unlocked ? new Date(voucherUnlocks[voucher.id]).toLocaleDateString() : i18next.t("voucher:locked"));
+  }
+
   processInput(button: Button): boolean {
     const ui = this.getUi();
 
     let success = false;
 
+    if (button === Button.ACTION) {
+      success = true;
+      this.setScrollCursor(0);
+      if (this.currentPage === Page.ACHIEVEMENTS) {
+        this.currentPage = Page.VOUCHERS;
+        this.updateVoucherIcons();
+        this.setCursor(0);
+      } else if (this.currentPage === Page.VOUCHERS) {
+        this.currentPage = Page.ACHIEVEMENTS;
+        this.updateAchvIcons();
+        this.setCursor(0);
+      }
+      this.mainContainer.update();
+    }
     if (button === Button.CANCEL) {
       success = true;
       this.scene.ui.revertMode();
     } else {
-      const rowIndex = Math.floor(this.cursor / this.ACHV_COLS);
+      const rowIndex = Math.floor(this.cursor / this.COLS);
-      const itemOffset = (this.scrollCursor * this.ACHV_COLS);
+      const itemOffset = (this.scrollCursor * this.COLS);
       switch (button) {
       case Button.UP:
-        if (this.cursor < this.ACHV_COLS) {
+        if (this.cursor < this.COLS) {
           if (this.scrollCursor) {
             success = this.setScrollCursor(this.scrollCursor - 1);
           }
         } else {
-          success = this.setCursor(this.cursor - this.ACHV_COLS);
+          success = this.setCursor(this.cursor - this.COLS);
         }
         break;
       case Button.DOWN:
-        const canMoveDown = (this.cursor + itemOffset) + this.ACHV_COLS < this.achvsTotal;
+        const canMoveDown = (this.cursor + itemOffset) + this.COLS < this.currentTotal;
-        if (rowIndex >= this.ACHV_ROWS - 1) {
+        if (rowIndex >= this.ROWS - 1) {
-          if (this.scrollCursor < Math.ceil(this.achvsTotal / this.ACHV_COLS) - this.ACHV_ROWS && canMoveDown) {
+          if (this.scrollCursor < Math.ceil(this.currentTotal / this.COLS) - this.ROWS && canMoveDown) {
             success = this.setScrollCursor(this.scrollCursor + 1);
           }
         } else if (canMoveDown) {
-          success = this.setCursor(this.cursor + this.ACHV_COLS);
+          success = this.setCursor(this.cursor + this.COLS);
         }
         break;
       case Button.LEFT:
         if (!this.cursor && this.scrollCursor) {
-          success = this.setScrollCursor(this.scrollCursor - 1) && this.setCursor(this.cursor + (this.ACHV_COLS - 1));
+          success = this.setScrollCursor(this.scrollCursor - 1) && this.setCursor(this.cursor + (this.COLS - 1));
         } else if (this.cursor) {
           success = this.setCursor(this.cursor - 1);
         }
         break;
       case Button.RIGHT:
-        if (this.cursor + 1 === this.ACHV_ROWS * this.ACHV_COLS && this.scrollCursor < Math.ceil(this.achvsTotal / this.ACHV_COLS) - this.ACHV_ROWS) {
+        if (this.cursor + 1 === this.ROWS * this.COLS && this.scrollCursor < Math.ceil(this.currentTotal / this.COLS) - this.ROWS) {
-          success = this.setScrollCursor(this.scrollCursor + 1) && this.setCursor(this.cursor - (this.ACHV_COLS - 1));
+          success = this.setScrollCursor(this.scrollCursor + 1) && this.setCursor(this.cursor - (this.COLS - 1));
-        } else if (this.cursor + itemOffset < this.achvsTotal - 1) {
+        } else if (this.cursor + itemOffset < this.currentTotal - 1) {
           success = this.setCursor(this.cursor + 1);
         }
         break;
@@ -215,24 +269,30 @@ export default class AchvsUiHandler extends MessageUiHandler {
     return success;
   }
 
-  setCursor(cursor: integer): boolean {
+  setCursor(cursor: integer, pageChange?: boolean): boolean {
     const ret = super.setCursor(cursor);
 
-    let updateAchv = ret;
+    let update = ret;
 
     if (!this.cursorObj) {
       this.cursorObj = this.scene.add.nineslice(0, 0, "select_cursor_highlight", undefined, 16, 16, 1, 1, 1, 1);
       this.cursorObj.setOrigin(0, 0);
-      this.achvIconsContainer.add(this.cursorObj);
+      this.iconsContainer.add(this.cursorObj);
-      updateAchv = true;
+      update = true;
     }
 
-    this.cursorObj.setPositionRelative(this.achvIcons[this.cursor], 0, 0);
+    this.cursorObj.setPositionRelative(this.icons[this.cursor], 0, 0);
 
-    if (updateAchv) {
+    if (update || pageChange) {
-      this.showAchv(achvs[Object.keys(achvs)[cursor + this.scrollCursor * this.ACHV_COLS]]);
+      switch (this.currentPage) {
+      case Page.ACHIEVEMENTS:
+        this.showAchv(achvs[Object.keys(achvs)[cursor + this.scrollCursor * this.COLS]]);
+        break;
+      case Page.VOUCHERS:
+        this.showVoucher(vouchers[Object.keys(vouchers)[cursor + this.scrollCursor * this.COLS]]);
+        break;
+      }
     }
-
     return ret;
   }
 
@@ -249,10 +309,16 @@ export default class AchvsUiHandler extends MessageUiHandler {
 
     this.scrollCursor = scrollCursor;
 
+    switch (this.currentPage) {
+    case Page.ACHIEVEMENTS:
       this.updateAchvIcons();
-
+      this.showAchv(achvs[Object.keys(achvs)[Math.min(this.cursor + this.scrollCursor * this.COLS, Object.values(achvs).length - 1)]]);
-    this.showAchv(achvs[Object.keys(achvs)[Math.min(this.cursor + this.scrollCursor * this.ACHV_COLS, Object.values(achvs).length - 1)]]);
+      break;
-
+    case Page.VOUCHERS:
+      this.updateVoucherIcons();
+      this.showVoucher(vouchers[Object.keys(vouchers)[Math.min(this.cursor + this.scrollCursor * this.COLS, Object.values(vouchers).length - 1)]]);
+      break;
+    }
     return true;
   }
 
@@ -262,15 +328,21 @@ export default class AchvsUiHandler extends MessageUiHandler {
    * Determines what data is to be displayed on the UI and updates it accordingly based on the current value of this.scrollCursor
    */
   updateAchvIcons(): void {
+    this.headerText.text = this.achvsName;
+    this.headerActionText.text = this.vouchersName;
+    const textPosition = this.headerBgX - this.headerActionText.displayWidth - 8;
+    this.headerActionText.setX(textPosition);
+    this.headerActionButton.setX(textPosition - this.headerActionButton.displayWidth - 4);
+
     const achvUnlocks = this.scene.gameData.achvUnlocks;
 
-    const itemOffset = this.scrollCursor * this.ACHV_COLS;
+    const itemOffset = this.scrollCursor * this.COLS;
-    const itemLimit = this.ACHV_ROWS * this.ACHV_COLS;
+    const itemLimit = this.ROWS * this.COLS;
 
     const achvRange = Object.values(achvs).slice(itemOffset, itemLimit + itemOffset);
 
     achvRange.forEach((achv: Achv, i: integer) => {
-      const icon = this.achvIcons[i];
+      const icon = this.icons[i];
       const unlocked = achvUnlocks.hasOwnProperty(achv.id);
       const hidden = !unlocked && achv.secret && (!achv.parentId || !achvUnlocks.hasOwnProperty(achv.parentId));
       const tinted = !hidden && !unlocked;
@@ -284,14 +356,54 @@ export default class AchvsUiHandler extends MessageUiHandler {
       }
     });
 
-    if (achvRange.length < this.achvIcons.length) {
+    if (achvRange.length < this.icons.length) {
-      this.achvIcons.slice(achvRange.length).map(i => i.setVisible(false));
+      this.icons.slice(achvRange.length).map(i => i.setVisible(false));
     }
+
+    this.currentTotal = this.achvsTotal;
+  }
+
+  /**
+   * updateVoucherIcons(): void
+   * Determines what data is to be displayed on the UI and updates it accordingly based on the current value of this.scrollCursor
+   */
+  updateVoucherIcons(): void {
+    this.headerText.text = this.vouchersName;
+    this.headerActionText.text = this.achvsName;
+    const textPosition = this.headerBgX - this.headerActionText.displayWidth - 8;
+    this.headerActionText.setX(textPosition);
+    this.headerActionButton.setX(textPosition - this.headerActionButton.displayWidth - 4);
+
+    const voucherUnlocks = this.scene.gameData.voucherUnlocks;
+
+    const itemOffset = this.scrollCursor * this.COLS;
+    const itemLimit = this.ROWS * this.COLS;
+
+    const voucherRange = Object.values(vouchers).slice(itemOffset, itemLimit + itemOffset);
+
+    voucherRange.forEach((voucher: Voucher, i: integer) => {
+      const icon = this.icons[i];
+      const unlocked = voucherUnlocks.hasOwnProperty(voucher.id);
+
+      icon.setFrame(getVoucherTypeIcon(voucher.voucherType));
+      icon.setVisible(true);
+      if (!unlocked) {
+        icon.setTintFill(0);
+      } else {
+        icon.clearTint();
+      }
+    });
+
+    if (voucherRange.length < this.icons.length) {
+      this.icons.slice(voucherRange.length).map(i => i.setVisible(false));
+    }
+    this.currentTotal = this.vouchersTotal;
   }
 
   clear() {
     super.clear();
-    this.achvsContainer.setVisible(false);
+    this.currentPage = Page.ACHIEVEMENTS;
+    this.mainContainer.setVisible(false);
     this.eraseCursor();
   }
 

src/ui/menu-ui-handler.ts

@@ -17,7 +17,6 @@ enum MenuOptions {
   ACHIEVEMENTS,
   STATS,
   RUN_HISTORY,
-  VOUCHERS,
   EGG_LIST,
   EGG_GACHA,
   MANAGE_DATA,
@@ -388,10 +387,6 @@ export default class MenuUiHandler extends MessageUiHandler {
         ui.setOverlayMode(Mode.RUN_HISTORY);
         success = true;
         break;
-      case MenuOptions.VOUCHERS:
-        ui.setOverlayMode(Mode.VOUCHERS);
-        success = true;
-        break;
       case MenuOptions.EGG_LIST:
         if (this.scene.gameData.eggs.length) {
           ui.revertMode();

src/ui/ui.ts

@@ -23,7 +23,6 @@ import OptionSelectUiHandler from "./settings/option-select-ui-handler";
 import EggHatchSceneHandler from "./egg-hatch-scene-handler";
 import EggListUiHandler from "./egg-list-ui-handler";
 import EggGachaUiHandler from "./egg-gacha-ui-handler";
-import VouchersUiHandler from "./vouchers-ui-handler";
 import {addWindow} from "./ui-theme";
 import LoginFormUiHandler from "./login-form-ui-handler";
 import RegistrationFormUiHandler from "./registration-form-ui-handler";
@@ -77,7 +76,6 @@ export enum Mode {
   KEYBOARD_BINDING,
   ACHIEVEMENTS,
   GAME_STATS,
-  VOUCHERS,
   EGG_LIST,
   EGG_GACHA,
   LOGIN_FORM,
@@ -120,7 +118,6 @@ const noTransitionModes = [
   Mode.SETTINGS_KEYBOARD,
   Mode.ACHIEVEMENTS,
   Mode.GAME_STATS,
-  Mode.VOUCHERS,
   Mode.LOGIN_FORM,
   Mode.REGISTRATION_FORM,
   Mode.LOADING,
@@ -179,7 +176,6 @@ export default class UI extends Phaser.GameObjects.Container {
       new KeyboardBindingUiHandler(scene),
       new AchvsUiHandler(scene),
       new GameStatsUiHandler(scene),
-      new VouchersUiHandler(scene),
       new EggListUiHandler(scene),
       new EggGachaUiHandler(scene),
       new LoginFormUiHandler(scene),

src/ui/vouchers-ui-handler.ts

@@ -1,262 +0,0 @@
-import BattleScene from "../battle-scene";
-import { Button } from "#enums/buttons";
-import i18next from "i18next";
-import { Voucher, getVoucherTypeIcon, getVoucherTypeName, vouchers } from "../system/voucher";
-import MessageUiHandler from "./message-ui-handler";
-import { TextStyle, addTextObject } from "./text";
-import { Mode } from "./ui";
-import { addWindow } from "./ui-theme";
-
-const itemRows = 4;
-const itemCols = 17;
-
-export default class VouchersUiHandler extends MessageUiHandler {
-  private vouchersContainer: Phaser.GameObjects.Container;
-  private voucherIconsContainer: Phaser.GameObjects.Container;
-
-  private voucherIconsBg: Phaser.GameObjects.NineSlice;
-  private voucherIcons: Phaser.GameObjects.Sprite[];
-  private titleText: Phaser.GameObjects.Text;
-  private unlockText: Phaser.GameObjects.Text;
-
-  private itemsTotal: integer;
-  private scrollCursor: integer;
-
-  private cursorObj: Phaser.GameObjects.NineSlice | null;
-
-  constructor(scene: BattleScene, mode: Mode | null = null) {
-    super(scene, mode);
-
-    this.itemsTotal = Object.keys(vouchers).length;
-    this.scrollCursor = 0;
-  }
-
-  setup() {
-    const ui = this.getUi();
-
-    this.vouchersContainer = this.scene.add.container(1, -(this.scene.game.canvas.height / 6) + 1);
-
-    this.vouchersContainer.setInteractive(new Phaser.Geom.Rectangle(0, 0, this.scene.game.canvas.width / 6, this.scene.game.canvas.height / 6), Phaser.Geom.Rectangle.Contains);
-
-    const headerBg = addWindow(this.scene, 0, 0, (this.scene.game.canvas.width / 6) - 2, 24);
-    headerBg.setOrigin(0, 0);
-
-    const headerText = addTextObject(this.scene, 0, 0, i18next.t("voucher:vouchers"), TextStyle.SETTINGS_LABEL);
-    headerText.setOrigin(0, 0);
-    headerText.setPositionRelative(headerBg, 8, 4);
-
-    this.voucherIconsBg = addWindow(this.scene, 0, headerBg.height, (this.scene.game.canvas.width / 6) - 2, (this.scene.game.canvas.height / 6) - headerBg.height - 68);
-    this.voucherIconsBg.setOrigin(0, 0);
-
-    this.voucherIconsContainer = this.scene.add.container(6, headerBg.height + 6);
-
-    this.voucherIcons = [];
-
-    for (let a = 0; a < itemRows * itemCols; a++) {
-      const x = (a % itemCols) * 18;
-      const y = Math.floor(a / itemCols) * 18;
-
-      const icon = this.scene.add.sprite(x, y, "items", "unknown");
-      icon.setOrigin(0, 0);
-      icon.setScale(0.5);
-
-      this.voucherIcons.push(icon);
-      this.voucherIconsContainer.add(icon);
-    }
-
-    const titleBg = addWindow(this.scene, 0, headerBg.height + this.voucherIconsBg.height, 220, 24);
-    titleBg.setOrigin(0, 0);
-
-    this.titleText = addTextObject(this.scene, 0, 0, "", TextStyle.WINDOW);
-    this.titleText.setOrigin(0, 0);
-    this.titleText.setPositionRelative(titleBg, 8, 4);
-
-    const unlockBg = addWindow(this.scene, titleBg.x + titleBg.width, titleBg.y, 98, 24);
-    unlockBg.setOrigin(0, 0);
-
-    this.unlockText = addTextObject(this.scene, 0, 0, "", TextStyle.WINDOW);
-    this.unlockText.setOrigin(0, 0);
-    this.unlockText.setPositionRelative(unlockBg, 8, 4);
-
-    const descriptionBg = addWindow(this.scene, 0, titleBg.y + titleBg.height, (this.scene.game.canvas.width / 6) - 2, 42);
-    descriptionBg.setOrigin(0, 0);
-
-    const descriptionText = addTextObject(this.scene, 0, 0, "", TextStyle.WINDOW, { maxLines: 2 });
-    descriptionText.setWordWrapWidth(1870);
-    descriptionText.setOrigin(0, 0);
-    descriptionText.setPositionRelative(descriptionBg, 8, 4);
-
-    this.message = descriptionText;
-
-    this.vouchersContainer.add(headerBg);
-    this.vouchersContainer.add(headerText);
-    this.vouchersContainer.add(this.voucherIconsBg);
-    this.vouchersContainer.add(this.voucherIconsContainer);
-    this.vouchersContainer.add(titleBg);
-    this.vouchersContainer.add(this.titleText);
-    this.vouchersContainer.add(unlockBg);
-    this.vouchersContainer.add(this.unlockText);
-    this.vouchersContainer.add(descriptionBg);
-    this.vouchersContainer.add(descriptionText);
-
-    ui.add(this.vouchersContainer);
-
-    this.setCursor(0);
-
-    this.vouchersContainer.setVisible(false);
-  }
-
-  show(args: any[]): boolean {
-    super.show(args);
-
-    this.vouchersContainer.setVisible(true);
-    this.setCursor(0);
-    this.setScrollCursor(0);
-
-    this.updateVoucherIcons();
-
-    this.getUi().moveTo(this.vouchersContainer, this.getUi().length - 1);
-
-    this.getUi().hideTooltip();
-
-    return true;
-  }
-
-  protected showVoucher(voucher: Voucher) {
-    const voucherUnlocks = this.scene.gameData.voucherUnlocks;
-    const unlocked = voucherUnlocks.hasOwnProperty(voucher.id);
-
-    this.titleText.setText(getVoucherTypeName(voucher.voucherType));
-    this.showText(voucher.description);
-    this.unlockText.setText(unlocked ? new Date(voucherUnlocks[voucher.id]).toLocaleDateString() : i18next.t("voucher:locked"));
-  }
-
-  processInput(button: Button): boolean {
-    const ui = this.getUi();
-
-    let success = false;
-
-    if (button === Button.CANCEL) {
-      success = true;
-      this.scene.ui.revertMode();
-    } else {
-      const rowIndex = Math.floor(this.cursor / itemCols);
-      const itemOffset = (this.scrollCursor * itemCols);
-      switch (button) {
-      case Button.UP:
-        if (this.cursor < itemCols) {
-          if (this.scrollCursor) {
-            success = this.setScrollCursor(this.scrollCursor - 1);
-          }
-        } else {
-          success = this.setCursor(this.cursor - itemCols);
-        }
-        break;
-      case Button.DOWN:
-        const canMoveDown = (this.cursor + itemOffset) + itemCols < this.itemsTotal;
-        if (rowIndex >= itemRows - 1) {
-          if (this.scrollCursor < Math.ceil(this.itemsTotal / itemCols) - itemRows && canMoveDown) {
-            success = this.setScrollCursor(this.scrollCursor + 1);
-          }
-        } else if (canMoveDown) {
-          success = this.setCursor(this.cursor + itemCols);
-        }
-        break;
-      case Button.LEFT:
-        if (!this.cursor && this.scrollCursor) {
-          success = this.setScrollCursor(this.scrollCursor - 1) && this.setCursor(this.cursor + (itemCols - 1));
-        } else if (this.cursor) {
-          success = this.setCursor(this.cursor - 1);
-        }
-        break;
-      case Button.RIGHT:
-        if (this.cursor + 1 === itemRows * itemCols && this.scrollCursor < Math.ceil(this.itemsTotal / itemCols) - itemRows) {
-          success = this.setScrollCursor(this.scrollCursor + 1) && this.setCursor(this.cursor - (itemCols - 1));
-        } else if (this.cursor + itemOffset < Object.keys(vouchers).length - 1) {
-          success = this.setCursor(this.cursor + 1);
-        }
-        break;
-      }
-    }
-
-    if (success) {
-      ui.playSelect();
-    }
-
-    return success;
-  }
-
-  setCursor(cursor: integer): boolean {
-    const ret = super.setCursor(cursor);
-
-    let updateVoucher = ret;
-
-    if (!this.cursorObj) {
-      this.cursorObj = this.scene.add.nineslice(0, 0, "select_cursor_highlight", undefined, 16, 16, 1, 1, 1, 1);
-      this.cursorObj.setOrigin(0, 0);
-      this.voucherIconsContainer.add(this.cursorObj);
-      updateVoucher = true;
-    }
-
-    this.cursorObj.setPositionRelative(this.voucherIcons[this.cursor], 0, 0);
-
-    if (updateVoucher) {
-      this.showVoucher(vouchers[Object.keys(vouchers)[cursor + this.scrollCursor * itemCols]]);
-    }
-
-    return ret;
-  }
-
-  setScrollCursor(scrollCursor: integer): boolean {
-    if (scrollCursor === this.scrollCursor) {
-      return false;
-    }
-
-    this.scrollCursor = scrollCursor;
-
-    this.updateVoucherIcons();
-
-    this.showVoucher(vouchers[Object.keys(vouchers)[Math.min(this.cursor + this.scrollCursor * itemCols, Object.values(vouchers).length - 1)]]);
-
-    return true;
-  }
-
-  updateVoucherIcons(): void {
-    const voucherUnlocks = this.scene.gameData.voucherUnlocks;
-
-    const itemOffset = this.scrollCursor * itemCols;
-    const itemLimit = itemRows * itemCols;
-
-    const voucherRange = Object.values(vouchers).slice(itemOffset, itemLimit + itemOffset);
-
-    voucherRange.forEach((voucher: Voucher, i: integer) => {
-      const icon = this.voucherIcons[i];
-      const unlocked = voucherUnlocks.hasOwnProperty(voucher.id);
-
-      icon.setFrame(getVoucherTypeIcon(voucher.voucherType));
-      icon.setVisible(true);
-      if (!unlocked) {
-        icon.setTintFill(0);
-      } else {
-        icon.clearTint();
-      }
-    });
-
-    if (voucherRange.length < this.voucherIcons.length) {
-      this.voucherIcons.slice(voucherRange.length).map(i => i.setVisible(false));
-    }
-  }
-
-  clear() {
-    super.clear();
-    this.vouchersContainer.setVisible(false);
-    this.eraseCursor();
-  }
-
-  eraseCursor() {
-    if (this.cursorObj) {
-      this.cursorObj.destroy();
-    }
-    this.cursorObj = null;
-  }
-}