[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>
This commit is contained in:
Mumble
GitHub
parent
f6551efc36
commit
c7184558c2
|
|
@ -3,7 +3,6 @@
|
|||
"ACHIEVEMENTS": "Erfolge",
|
||||
"STATS": "Statistiken",
|
||||
"RUN_HISTORY": "Laufhistorie",
|
||||
"VOUCHERS": "Gutscheine",
|
||||
"EGG_LIST": "Eierliste",
|
||||
"EGG_GACHA": "Eier-Gacha",
|
||||
"MANAGE_DATA": "Daten verwalten",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
"ACHIEVEMENTS": "じっせき",
|
||||
"STATS": "とうけい",
|
||||
"RUN_HISTORY":"ラン履歴",
|
||||
"VOUCHERS": "クーポン",
|
||||
"EGG_LIST": "タマゴリスト",
|
||||
"EGG_GACHA": "タマゴガチャ",
|
||||
"MANAGE_DATA": "データかんり",
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
"ACHIEVEMENTS": "업적",
|
||||
"STATS": "통계",
|
||||
"RUN_HISTORY": "플레이 이력",
|
||||
"VOUCHERS": "바우처",
|
||||
"EGG_LIST": "알 목록",
|
||||
"EGG_GACHA": "알 뽑기",
|
||||
"MANAGE_DATA": "데이터 관리",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
"ACHIEVEMENTS": "成就",
|
||||
"STATS": "数据统计",
|
||||
"RUN_HISTORY": "历史记录",
|
||||
"VOUCHERS": "兑换券",
|
||||
"EGG_LIST": "蛋列表",
|
||||
"EGG_GACHA": "扭蛋机",
|
||||
"MANAGE_DATA": "管理数据",
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
"ACHIEVEMENTS": "成就",
|
||||
"STATS": "數據",
|
||||
"RUN_HISTORY": "歷史記錄",
|
||||
"VOUCHERS": "兌換劵",
|
||||
"EGG_LIST": "蛋列表",
|
||||
"EGG_GACHA": "扭蛋機",
|
||||
"MANAGE_DATA": "管理數據",
|
||||
|
|
|
|||
|
|
@ -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 ACHV_COLS = 17;
|
||||
private readonly ROWS = 4;
|
||||
private readonly COLS = 17;
|
||||
|
||||
private achvsContainer: Phaser.GameObjects.Container;
|
||||
private achvIconsContainer: Phaser.GameObjects.Container;
|
||||
private mainContainer: 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);
|
||||
headerBg.setOrigin(0, 0);
|
||||
this.headerBg = addWindow(this.scene, 0, 0, (this.scene.game.canvas.width / 6) - 2, 24);
|
||||
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);
|
||||
headerText.setOrigin(0, 0);
|
||||
headerText.setPositionRelative(headerBg, 8, 4);
|
||||
this.achvsName = i18next.t(`${genderPrefix}achv:Achievements.name` as ParseKeys);
|
||||
this.vouchersName = i18next.t("voucher:vouchers");
|
||||
|
||||
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.achvIconsBg.setOrigin(0, 0);
|
||||
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.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++) {
|
||||
const x = (a % this.ACHV_COLS) * 18;
|
||||
const y = Math.floor(a / this.ACHV_COLS) * 18;
|
||||
for (let a = 0; a < this.ROWS * this.COLS; a++) {
|
||||
const x = (a % this.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.achvIconsContainer.add(icon);
|
||||
this.icons.push(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.achvsContainer.add(headerText);
|
||||
this.achvsContainer.add(this.achvIconsBg);
|
||||
this.achvsContainer.add(this.achvIconsContainer);
|
||||
this.achvsContainer.add(titleBg);
|
||||
this.achvsContainer.add(this.titleText);
|
||||
this.achvsContainer.add(scoreBg);
|
||||
this.achvsContainer.add(this.scoreText);
|
||||
this.achvsContainer.add(unlockBg);
|
||||
this.achvsContainer.add(this.unlockText);
|
||||
this.achvsContainer.add(descriptionBg);
|
||||
this.achvsContainer.add(descriptionText);
|
||||
this.mainContainer.add(this.headerBg);
|
||||
this.mainContainer.add(this.headerActionButton);
|
||||
this.mainContainer.add(this.headerText);
|
||||
this.mainContainer.add(this.headerActionText);
|
||||
this.mainContainer.add(this.iconsBg);
|
||||
this.mainContainer.add(this.iconsContainer);
|
||||
this.mainContainer.add(titleBg);
|
||||
this.mainContainer.add(this.titleText);
|
||||
this.mainContainer.add(scoreBg);
|
||||
this.mainContainer.add(this.scoreText);
|
||||
this.mainContainer.add(unlockBg);
|
||||
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 itemOffset = (this.scrollCursor * this.ACHV_COLS);
|
||||
const rowIndex = Math.floor(this.cursor / this.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;
|
||||
if (rowIndex >= this.ACHV_ROWS - 1) {
|
||||
if (this.scrollCursor < Math.ceil(this.achvsTotal / this.ACHV_COLS) - this.ACHV_ROWS && canMoveDown) {
|
||||
const canMoveDown = (this.cursor + itemOffset) + this.COLS < this.currentTotal;
|
||||
if (rowIndex >= this.ROWS - 1) {
|
||||
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) {
|
||||
success = this.setScrollCursor(this.scrollCursor + 1) && this.setCursor(this.cursor - (this.ACHV_COLS - 1));
|
||||
} else if (this.cursor + itemOffset < this.achvsTotal - 1) {
|
||||
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.COLS - 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);
|
||||
updateAchv = true;
|
||||
this.iconsContainer.add(this.cursorObj);
|
||||
update = true;
|
||||
}
|
||||
|
||||
this.cursorObj.setPositionRelative(this.achvIcons[this.cursor], 0, 0);
|
||||
this.cursorObj.setPositionRelative(this.icons[this.cursor], 0, 0);
|
||||
|
||||
if (updateAchv) {
|
||||
this.showAchv(achvs[Object.keys(achvs)[cursor + this.scrollCursor * this.ACHV_COLS]]);
|
||||
if (update || pageChange) {
|
||||
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;
|
||||
|
||||
this.updateAchvIcons();
|
||||
|
||||
this.showAchv(achvs[Object.keys(achvs)[Math.min(this.cursor + this.scrollCursor * this.ACHV_COLS, Object.values(achvs).length - 1)]]);
|
||||
|
||||
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)]]);
|
||||
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 itemLimit = this.ACHV_ROWS * this.ACHV_COLS;
|
||||
const itemOffset = this.scrollCursor * this.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) {
|
||||
this.achvIcons.slice(achvRange.length).map(i => i.setVisible(false));
|
||||
if (achvRange.length < this.icons.length) {
|
||||
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();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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),
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue