[Refactor] Cleanup achvs ui handler (#5919)

This commit is contained in:
Sirz Benjie 2025-06-06 16:15:13 -05:00 committed by GitHub
parent 1fc42b3231
commit 855868bfea
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 254 additions and 214 deletions

View File

@ -179,11 +179,11 @@ interface Unlocks {
[key: number]: boolean;
}
interface AchvUnlocks {
export interface AchvUnlocks {
[key: string]: number;
}
interface VoucherUnlocks {
export interface VoucherUnlocks {
[key: string]: number;
}

View File

@ -11,20 +11,20 @@ import { addWindow } from "#app/ui/ui-theme";
import { ScrollBar } from "#app/ui/scroll-bar";
import { PlayerGender } from "#enums/player-gender";
import { globalScene } from "#app/global-scene";
import type { AchvUnlocks, VoucherUnlocks } from "#app/system/game-data";
enum Page {
ACHIEVEMENTS,
VOUCHERS,
}
const Page = {
ACHIEVEMENTS: 0,
VOUCHERS: 1,
} as const;
type Page = (typeof Page)[keyof typeof Page];
interface LanguageSetting {
TextSize: string;
}
const languageSettings: { [key: string]: LanguageSetting } = {
de: {
TextSize: "80px",
},
de: { TextSize: "80px" },
};
export default class AchvsUiHandler extends MessageUiHandler {
@ -70,44 +70,35 @@ export default class AchvsUiHandler extends MessageUiHandler {
setup() {
const ui = this.getUi();
this.mainContainer = globalScene.add.container(1, -(globalScene.game.canvas.height / 6) + 1);
/** Width of the global canvas / 6 */
const WIDTH = globalScene.game.canvas.width / 6;
/** Height of the global canvas / 6 */
const HEIGHT = globalScene.game.canvas.height / 6;
this.mainContainer.setInteractive(
new Phaser.Geom.Rectangle(0, 0, globalScene.game.canvas.width / 6, globalScene.game.canvas.height / 6),
Phaser.Geom.Rectangle.Contains,
);
this.mainContainer = globalScene.add.container(1, -HEIGHT + 1);
this.headerBg = addWindow(0, 0, globalScene.game.canvas.width / 6 - 2, 24);
this.headerBg.setOrigin(0, 0);
this.mainContainer.setInteractive(new Phaser.Geom.Rectangle(0, 0, WIDTH, HEIGHT), Phaser.Geom.Rectangle.Contains);
this.headerText = addTextObject(0, 0, "", TextStyle.SETTINGS_LABEL);
this.headerText.setOrigin(0, 0);
this.headerText.setPositionRelative(this.headerBg, 8, 4);
this.headerActionButton = new Phaser.GameObjects.Sprite(globalScene, 0, 0, "keyboard", "ACTION.png");
this.headerActionButton.setOrigin(0, 0);
this.headerActionButton.setPositionRelative(this.headerBg, 236, 6);
this.headerActionText = addTextObject(0, 0, "", TextStyle.WINDOW, {
fontSize: "60px",
});
this.headerActionText.setOrigin(0, 0);
this.headerActionText.setPositionRelative(this.headerBg, 264, 8);
this.headerBg = addWindow(0, 0, WIDTH - 2, 24);
this.headerText = addTextObject(0, 0, "", TextStyle.SETTINGS_LABEL)
.setOrigin(0)
.setPositionRelative(this.headerBg, 8, 4);
this.headerActionButton = new Phaser.GameObjects.Sprite(globalScene, 0, 0, "keyboard", "ACTION.png")
.setOrigin(0)
.setPositionRelative(this.headerBg, 236, 6);
this.headerActionText = addTextObject(0, 0, "", TextStyle.WINDOW, { fontSize: "60px" })
.setOrigin(0)
.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 genderIndex = globalScene.gameData.gender ?? PlayerGender.MALE;
const genderStr = PlayerGender[genderIndex].toLowerCase();
this.achvsName = i18next.t("achv:Achievements.name", {
context: genderStr,
});
this.achvsName = i18next.t("achv:Achievements.name", { context: genderStr });
this.vouchersName = i18next.t("voucher:vouchers");
this.iconsBg = addWindow(
0,
this.headerBg.height,
globalScene.game.canvas.width / 6 - 2,
globalScene.game.canvas.height / 6 - this.headerBg.height - 68,
);
this.iconsBg.setOrigin(0, 0);
this.iconsBg = addWindow(0, this.headerBg.height, WIDTH - 2, HEIGHT - this.headerBg.height - 68).setOrigin(0);
const yOffset = 6;
this.scrollBar = new ScrollBar(
@ -126,68 +117,59 @@ export default class AchvsUiHandler extends MessageUiHandler {
const x = (a % this.COLS) * 18;
const y = Math.floor(a / this.COLS) * 18;
const icon = globalScene.add.sprite(x, y, "items", "unknown");
icon.setOrigin(0, 0);
icon.setScale(0.5);
const icon = globalScene.add.sprite(x, y, "items", "unknown").setOrigin(0).setScale(0.5);
this.icons.push(icon);
this.iconsContainer.add(icon);
}
const titleBg = addWindow(0, this.headerBg.height + this.iconsBg.height, 174, 24);
titleBg.setOrigin(0, 0);
this.titleBg = titleBg;
this.titleText = addTextObject(0, 0, "", TextStyle.WINDOW);
this.titleText = addTextObject(0, 0, "", TextStyle.WINDOW).setOrigin();
const textSize = languageSettings[i18next.language]?.TextSize ?? this.titleText.style.fontSize;
this.titleText.setFontSize(textSize);
const titleBgCenterX = titleBg.x + titleBg.width / 2;
const titleBgCenterY = titleBg.y + titleBg.height / 2;
this.titleText.setOrigin(0.5, 0.5);
this.titleText.setPosition(titleBgCenterX, titleBgCenterY);
this.scoreContainer = globalScene.add.container(titleBg.x + titleBg.width, titleBg.y);
const scoreBg = addWindow(0, 0, 46, 24);
scoreBg.setOrigin(0, 0);
this.scoreContainer.add(scoreBg);
this.scoreText = addTextObject(scoreBg.width / 2, scoreBg.height / 2, "", TextStyle.WINDOW);
this.scoreText.setOrigin(0.5, 0.5);
this.scoreContainer.add(this.scoreText);
this.scoreText = addTextObject(scoreBg.width / 2, scoreBg.height / 2, "", TextStyle.WINDOW).setOrigin();
this.scoreContainer.add([scoreBg, this.scoreText]);
const unlockBg = addWindow(this.scoreContainer.x + scoreBg.width, titleBg.y, 98, 24);
unlockBg.setOrigin(0, 0);
this.unlockText = addTextObject(0, 0, "", TextStyle.WINDOW);
this.unlockText.setOrigin(0.5, 0.5);
this.unlockText.setPositionRelative(unlockBg, unlockBg.width / 2, unlockBg.height / 2);
this.unlockText = addTextObject(0, 0, "", TextStyle.WINDOW)
.setPositionRelative(unlockBg, unlockBg.width / 2, unlockBg.height / 2)
.setOrigin();
const descriptionBg = addWindow(0, titleBg.y + titleBg.height, globalScene.game.canvas.width / 6 - 2, 42);
descriptionBg.setOrigin(0, 0);
const descriptionBg = addWindow(0, titleBg.y + titleBg.height, WIDTH - 2, 42);
const descriptionText = addTextObject(0, 0, "", TextStyle.WINDOW, {
maxLines: 2,
});
descriptionText.setWordWrapWidth(1870);
descriptionText.setOrigin(0, 0);
descriptionText.setPositionRelative(descriptionBg, 8, 4);
const descriptionText = addTextObject(0, 0, "", TextStyle.WINDOW, { maxLines: 2 })
.setWordWrapWidth(1870)
.setOrigin(0)
.setPositionRelative(descriptionBg, 8, 4);
this.message = 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.scrollBar);
this.mainContainer.add(this.iconsContainer);
this.mainContainer.add(titleBg);
this.mainContainer.add(this.titleText);
this.mainContainer.add(this.scoreContainer);
this.mainContainer.add(unlockBg);
this.mainContainer.add(this.unlockText);
this.mainContainer.add(descriptionBg);
this.mainContainer.add(descriptionText);
this.mainContainer.add([
this.headerBg,
this.headerActionButton,
this.headerText,
this.headerActionText,
this.iconsBg,
this.scrollBar,
this.iconsContainer,
titleBg,
this.titleText,
this.scoreContainer,
unlockBg,
this.unlockText,
descriptionBg,
descriptionText,
]);
ui.add(this.mainContainer);
@ -246,13 +228,12 @@ export default class AchvsUiHandler extends MessageUiHandler {
);
}
processInput(button: Button): boolean {
const ui = this.getUi();
let success = false;
if (button === Button.ACTION) {
success = true;
// #region Input Processing
/**
* Submethod of {@linkcode processInput} that handles the action button input
* @returns Whether the success sound should be played
*/
private processActionInput(): true {
this.setScrollCursor(0);
if (this.currentPage === Page.ACHIEVEMENTS) {
this.currentPage = Page.VOUCHERS;
@ -265,68 +246,114 @@ export default class AchvsUiHandler extends MessageUiHandler {
this.scrollBar.setTotalRows(Math.ceil(this.currentTotal / this.COLS));
this.scrollBar.setScrollCursor(0);
this.mainContainer.update();
return true;
}
/**
* Submethod of {@linkcode processInput} that handles the up button input
* @returns Whether the success sound should be played
*/
private processUpInput(): boolean {
if (this.cursor >= this.COLS) {
return this.setCursor(this.cursor - this.COLS);
}
if (button === Button.CANCEL) {
success = true;
globalScene.ui.revertMode();
} else {
const rowIndex = Math.floor(this.cursor / this.COLS);
const itemOffset = this.scrollCursor * this.COLS;
switch (button) {
case Button.UP:
if (this.cursor < this.COLS) {
if (this.scrollCursor) {
success = this.setScrollCursor(this.scrollCursor - 1);
} else {
return this.setScrollCursor(this.scrollCursor - 1);
}
// Wrap around to the last row
success = this.setScrollCursor(Math.ceil(this.currentTotal / this.COLS) - this.ROWS);
const success = this.setScrollCursor(Math.ceil(this.currentTotal / this.COLS) - this.ROWS);
let newCursorIndex = this.cursor + (this.ROWS - 1) * this.COLS;
if (newCursorIndex > this.currentTotal - this.scrollCursor * this.COLS - 1) {
newCursorIndex -= this.COLS;
}
success = success && this.setCursor(newCursorIndex);
return success && this.setCursor(newCursorIndex);
}
} else {
success = this.setCursor(this.cursor - this.COLS);
}
break;
case Button.DOWN:
/**
* Submethod of {@linkcode processInput} that handles the down button input
* @returns Whether the success sound should be played
*/
private processDownInput(): boolean {
const rowIndex = Math.floor(this.cursor / this.COLS);
const itemOffset = this.scrollCursor * this.COLS;
const canMoveDown = itemOffset + 1 < this.currentTotal;
if (rowIndex >= this.ROWS - 1) {
if (this.scrollCursor < Math.ceil(this.currentTotal / this.COLS) - this.ROWS && canMoveDown) {
// scroll down one row
success = this.setScrollCursor(this.scrollCursor + 1);
} else {
return this.setScrollCursor(this.scrollCursor + 1);
}
// wrap back to the first row
success = this.setScrollCursor(0) && this.setCursor(this.cursor % this.COLS);
return this.setScrollCursor(0) && this.setCursor(this.cursor % this.COLS);
}
} else if (canMoveDown) {
success = this.setCursor(Math.min(this.cursor + this.COLS, this.currentTotal - itemOffset - 1));
if (canMoveDown) {
return this.setCursor(Math.min(this.cursor + this.COLS, this.currentTotal - itemOffset - 1));
}
return false;
}
/**
* Submethod of {@linkcode processInput} that handles the left button input
* @returns Whether the success sound should be played
*/
private processLeftInput(): boolean {
const itemOffset = this.scrollCursor * this.COLS;
if (this.cursor % this.COLS === 0) {
return this.setCursor(Math.min(this.cursor + this.COLS - 1, this.currentTotal - itemOffset - 1));
}
return this.setCursor(this.cursor - 1);
}
/**
* Submethod of {@linkcode processInput} that handles the right button input
* @returns Whether the success sound should be played
*/
private processRightInput(): boolean {
const itemOffset = this.scrollCursor * this.COLS;
if ((this.cursor + 1) % this.COLS === 0 || this.cursor + itemOffset === this.currentTotal - 1) {
return this.setCursor(this.cursor - (this.cursor % this.COLS));
}
return this.setCursor(this.cursor + 1);
}
/**
* Process user input to navigate through the achievements and vouchers UI.
* @param button - The button that was pressed
* @returns Whether an action was successfully processed
*/
processInput(button: Button): boolean {
let success = false;
switch (button) {
case Button.ACTION:
success = this.processActionInput();
break;
case Button.CANCEL:
success = true;
globalScene.ui.revertMode();
break;
case Button.UP:
success = this.processUpInput();
break;
case Button.DOWN:
success = this.processDownInput();
break;
case Button.LEFT:
if (this.cursor % this.COLS === 0) {
success = this.setCursor(Math.min(this.cursor + this.COLS - 1, this.currentTotal - itemOffset - 1));
} else {
success = this.setCursor(this.cursor - 1);
}
success = this.processLeftInput();
break;
case Button.RIGHT:
if ((this.cursor + 1) % this.COLS === 0 || this.cursor + itemOffset === this.currentTotal - 1) {
success = this.setCursor(this.cursor - (this.cursor % this.COLS));
} else {
success = this.setCursor(this.cursor + 1);
}
success = this.processRightInput();
break;
}
}
if (success) {
ui.playSelect();
this.getUi().playSelect();
}
return success;
}
// #endregion Input Processing
setCursor(cursor: number, pageChange?: boolean): boolean {
const ret = super.setCursor(cursor);
@ -334,15 +361,18 @@ export default class AchvsUiHandler extends MessageUiHandler {
let update = ret;
if (!this.cursorObj) {
this.cursorObj = globalScene.add.nineslice(0, 0, "select_cursor_highlight", undefined, 16, 16, 1, 1, 1, 1);
this.cursorObj.setOrigin(0, 0);
this.cursorObj = globalScene.add
.nineslice(0, 0, "select_cursor_highlight", undefined, 16, 16, 1, 1, 1, 1)
.setOrigin(0);
this.iconsContainer.add(this.cursorObj);
update = true;
}
this.cursorObj.setPositionRelative(this.icons[this.cursor], 0, 0);
if (!update && !pageChange) {
return ret;
}
if (update || pageChange) {
switch (this.currentPage) {
case Page.ACHIEVEMENTS:
if (pageChange) {
@ -361,7 +391,6 @@ export default class AchvsUiHandler extends MessageUiHandler {
this.showVoucher(vouchers[Object.keys(vouchers)[cursor + this.scrollCursor * this.COLS]]);
break;
}
}
return ret;
}
@ -399,30 +428,50 @@ export default class AchvsUiHandler extends MessageUiHandler {
}
/**
* updateAchvIcons(): void
* Determines what data is to be displayed on the UI and updates it accordingly based on the current value of this.scrollCursor
* Updates the icons displayed on the UI based on the current page and scroll cursor.
* @param items - The items to display (achievements or vouchers).
* @param unlocks - The unlocks data for the items.
* @param getIconFrame - A function to determine the frame for each item.
* @param headerText - The text for the header.
* @param actionText - The text for the action button.
* @param totalItems - The total number of items.
* @param forAchievements - `True` when updating icons for the achievements page, `false` for the vouchers page.
*/
updateAchvIcons(): void {
this.headerText.text = this.achvsName;
this.headerActionText.text = this.vouchersName;
private updateIcons<T extends boolean>(
items: T extends true ? Achv[] : Voucher[],
unlocks: T extends true ? AchvUnlocks : VoucherUnlocks,
headerText: string,
actionText: string,
totalItems: number,
forAchievements: T,
): void {
// type ItemType = T extends true ? Achv : Voucher;
// type RangeType = ItemType[];
this.headerText.text = headerText;
this.headerActionText.text = actionText;
const textPosition = this.headerBgX - this.headerActionText.displayWidth - 8;
this.headerActionText.setX(textPosition);
this.headerActionButton.setX(textPosition - this.headerActionButton.displayWidth - 4);
const achvUnlocks = globalScene.gameData.achvUnlocks;
const itemOffset = this.scrollCursor * this.COLS;
const itemLimit = this.ROWS * this.COLS;
const achvRange = Object.values(achvs).slice(itemOffset, itemLimit + itemOffset);
const itemRange = items.slice(itemOffset, itemLimit + itemOffset);
achvRange.forEach((achv: Achv, i: number) => {
itemRange.forEach((item: (typeof itemRange)[0], i: number) => {
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;
const unlocked = unlocks.hasOwnProperty(item.id);
let tinted = !unlocked;
if (forAchievements) {
// Typescript cannot properly infer the type of `item` here, so we need to cast it
const achv = item as Achv;
const hidden = !unlocked && achv.secret && (!achv.parentId || !unlocks.hasOwnProperty(achv.parentId));
tinted &&= !hidden;
icon.setFrame(!hidden ? achv.iconImage : "unknown");
} else {
icon.setFrame(getVoucherTypeIcon((item as Voucher).voucherType));
}
icon.setVisible(true);
if (tinted) {
icon.setTintFill(0);
@ -431,48 +480,39 @@ export default class AchvsUiHandler extends MessageUiHandler {
}
});
if (achvRange.length < this.icons.length) {
this.icons.slice(achvRange.length).map(i => i.setVisible(false));
if (itemRange.length < this.icons.length) {
this.icons.slice(itemRange.length).forEach(i => i.setVisible(false));
}
this.currentTotal = this.achvsTotal;
this.currentTotal = totalItems;
}
/**
* updateVoucherIcons(): void
* Determines what data is to be displayed on the UI and updates it accordingly based on the current value of this.scrollCursor
* Update the achievement icons displayed on the UI based on the current scroll cursor.
*/
updateAchvIcons(): void {
this.updateIcons(
Object.values(achvs),
globalScene.gameData.achvUnlocks,
this.achvsName,
this.vouchersName,
this.achvsTotal,
true,
);
}
/**
* Update the voucher icons displayed on the UI based on the current scroll cursor.
*/
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 = globalScene.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: number) => {
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;
this.updateIcons(
Object.values(vouchers),
globalScene.gameData.voucherUnlocks,
this.vouchersName,
this.achvsName,
this.vouchersTotal,
false,
);
}
clear() {