mika/pokerogue
1
0
Fork 0
mirror of https://github.com/pagefaultgames/pokerogue.git synced 2025-07-15 21:02:18 +02:00
Code Issues Packages Projects Releases Wiki Activity

added footer to display cancel/action/reset buttons

Browse Source
This commit is contained in:
Greenlamp 2024-05-17 16:30:44 +02:00
parent a6b150a48c
commit 91cbcee1c3
1 changed files with 58 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/ui/settings/settings-ui-handler.ts
View File

@ -27,12 +27,14 @@ export default class SettingsUiHandler extends UiHandler {
private reloadRequired: boolean;
private reloadI18n: boolean;
private rowsToDisplay: integer;
constructor(scene: BattleScene, mode?: Mode) {
super(scene, mode);
this.reloadRequired = false;
this.reloadI18n = false;
this.rowsToDisplay = 8;
}
setup() {
@ -40,13 +42,19 @@ export default class SettingsUiHandler extends UiHandler {
this.settingsContainer = this.scene.add.container(1, -(this.scene.game.canvas.height / 6) + 1);
this.settingsContainer.setInteractive(new Phaser.Geom.Rectangle(0, 0, this.scene.game.canvas.width / 6, this.scene.game.canvas.height / 6), Phaser.Geom.Rectangle.Contains);
this.settingsContainer.setInteractive(new Phaser.Geom.Rectangle(0, 0, this.scene.game.canvas.width / 6, this.scene.game.canvas.height / 6) - 20, Phaser.Geom.Rectangle.Contains);
this.navigationIcons = {};
const headerBg = addWindow(this.scene, 0, 0, (this.scene.game.canvas.width / 6) - 2, 24);
headerBg.setOrigin(0, 0);
this.optionsBg = addWindow(this.scene, 0, headerBg.height, (this.scene.game.canvas.width / 6) - 2, (this.scene.game.canvas.height / 6) - 16 - headerBg.height - 2);
this.optionsBg.setOrigin(0, 0);
const actionsBg = addWindow(this.scene, 0, (this.scene.game.canvas.height / 6) - headerBg.height, (this.scene.game.canvas.width / 6) - 2, 22);
actionsBg.setOrigin(0, 0);
const iconPreviousTab = this.scene.add.sprite(0, 0, 'keyboard');
iconPreviousTab.setScale(.1);
iconPreviousTab.setOrigin(0, -0.1);
@ -59,6 +67,37 @@ export default class SettingsUiHandler extends UiHandler {
iconNextTab.setPositionRelative(headerBg, headerBg.width - 20, 4);
this.navigationIcons['BUTTON_CYCLE_SHINY'] = iconNextTab;
const iconAction = this.scene.add.sprite(0, 0, 'keyboard');
iconAction.setScale(.1);
iconAction.setOrigin(0, -0.1);
iconAction.setPositionRelative(actionsBg, headerBg.width - 20, 4);
this.navigationIcons['BUTTON_ACTION'] = iconAction;
const actionText = addTextObject(this.scene, 0, 0, 'Action', TextStyle.SETTINGS_LABEL);
actionText.setOrigin(0, 0);
actionText.setPositionRelative(iconAction, 0, 2);
actionText.setPositionRelative(iconAction, -actionText.width/6, -(actionText.height/6)/2 - 6);
const iconCancel = this.scene.add.sprite(0, 0, 'keyboard');
iconCancel.setScale(.1);
iconCancel.setOrigin(0, -0.1);
iconCancel.setPositionRelative(actionsBg, headerBg.width - 100, 4);
this.navigationIcons['BUTTON_CANCEL'] = iconCancel;
const cancelText = addTextObject(this.scene, 0, 0, 'Cancel', TextStyle.SETTINGS_LABEL);
cancelText.setOrigin(0, 0);
cancelText.setPositionRelative(iconCancel, -cancelText.width/6, -(cancelText.height/6)/2 - 6);
const iconReset = this.scene.add.sprite(0, 0, 'keyboard');
iconReset.setScale(.1);
iconReset.setOrigin(0, -0.1);
iconReset.setPositionRelative(actionsBg, headerBg.width - 170, 4);
this.navigationIcons['BUTTON_HOME'] = iconReset;
const resetText = addTextObject(this.scene, 0, 0, 'Reset gamepad & keyboard', TextStyle.SETTINGS_LABEL);
resetText.setOrigin(0, 0);
resetText.setPositionRelative(iconReset, -resetText.width/6, -(resetText.height/6)/2 - 6);
const headerText = addTextObject(this.scene, 0, 0, 'General', TextStyle.SETTINGS_SELECTED);
headerText.setOrigin(0, 0);
headerText.setPositionRelative(headerBg, 8 + iconPreviousTab.width/6 - 4, 4);
@ -71,9 +110,6 @@ export default class SettingsUiHandler extends UiHandler {
keyboardText.setOrigin(0, 0);
keyboardText.setPositionRelative(headerBg, 97 + iconPreviousTab.width/6 - 4, 4);
this.optionsBg = addWindow(this.scene, 0, headerBg.height, (this.scene.game.canvas.width / 6) - 2, (this.scene.game.canvas.height / 6) - headerBg.height - 2);
this.optionsBg.setOrigin(0, 0);
this.optionsContainer = this.scene.add.container(0, 0);
this.settingLabels = [];
@ -120,9 +156,16 @@ export default class SettingsUiHandler extends UiHandler {
this.settingsContainer.add(gamepadText);
this.settingsContainer.add(keyboardText);
this.settingsContainer.add(this.optionsBg);
this.settingsContainer.add(actionsBg);
this.settingsContainer.add(this.optionsContainer);
this.settingsContainer.add(iconNextTab)
this.settingsContainer.add(iconAction)
this.settingsContainer.add(iconCancel)
this.settingsContainer.add(iconReset)
this.settingsContainer.add(iconPreviousTab)
this.settingsContainer.add(actionText)
this.settingsContainer.add(cancelText)
this.settingsContainer.add(resetText)
ui.add(this.settingsContainer);
@ -134,6 +177,12 @@ export default class SettingsUiHandler extends UiHandler {
updateBindings(): void {
for (const settingName of Object.keys(this.navigationIcons)) {
if (settingName === 'BUTTON_HOME') {
this.navigationIcons[settingName].setTexture("keyboard");
this.navigationIcons[settingName].setFrame("T_Home_Key_Dark.png");
this.navigationIcons[settingName].alpha = 1;
continue
}
const icon = this.scene.inputController?.getIconForLatestInputRecorded(settingName);
if (icon) {
const type = this.scene.inputController?.getLastSourceType();
@ -175,7 +224,6 @@ export default class SettingsUiHandler extends UiHandler {
processInput(button: Button): boolean {
const ui = this.getUi();
// Defines the maximum number of rows that can be displayed on the screen.
const rowsToDisplay = 9;
let success = false;
@ -195,17 +243,17 @@ export default class SettingsUiHandler extends UiHandler {
} else {
// When at the top of the menu and pressing UP, move to the bottommost item.
// First, set the cursor to the last visible element, preparing for the scroll to the end.
const successA = this.setCursor(rowsToDisplay - 1);
const successA = this.setCursor(this.rowsToDisplay - 1);
// Then, adjust the scroll to display the bottommost elements of the menu.
const successB = this.setScrollCursor(this.optionValueLabels.length - rowsToDisplay);
const successB = this.setScrollCursor(this.optionValueLabels.length - this.rowsToDisplay);
success = successA && successB; // success is just there to play the little validation sound effect
}
break;
case Button.DOWN:
if (cursor < this.optionValueLabels.length - 1) {
if (this.cursor < rowsToDisplay - 1) // if the visual cursor is in the frame of 0 to 8
if (this.cursor < this.rowsToDisplay - 1) // if the visual cursor is in the frame of 0 to 8
success = this.setCursor(this.cursor + 1);
else if (this.scrollCursor < this.optionValueLabels.length - rowsToDisplay)
else if (this.scrollCursor < this.optionValueLabels.length - this.rowsToDisplay)
success = this.setScrollCursor(this.scrollCursor + 1);
} else {
// When at the bottom of the menu and pressing DOWN, move to the topmost item.
@ -306,7 +354,7 @@ export default class SettingsUiHandler extends UiHandler {
this.optionsContainer.setY(-16 * this.scrollCursor);
for (let s = 0; s < this.settingLabels.length; s++) {
const visible = s >= this.scrollCursor && s < this.scrollCursor + 9;
const visible = s >= this.scrollCursor && s < this.scrollCursor + this.rowsToDisplay;
this.settingLabels[s].setVisible(visible);
for (let option of this.optionValueLabels[s])
option.setVisible(visible);