random-mirrors/pokerogue
1
0
Fork 0
mirror of https://github.com/pagefaultgames/pokerogue.git synced 2025-01-30 20:57:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Bug,Enhancement] Fix and improve Starter selector UI (#3340)

Browse Source 
* apply offset to all hybrid filter

* make dropDownType to public for offsetHybridFilter function

* refactoring defaultSettings to additional suport default cursor.

* fix to remember last cursor on hover mode

* remove unnecessary reset code

* fix sort reset function

* update resetFilter function

* update requested changes

* remove log msg

* fix checking default on sort

* refactoring hasDefaultValues function for readability

* fix lastdir bug
This commit is contained in:
Leo Kim 2024-08-06 00:42:15 +09:00 committed by GitHub
parent 97e362368c
commit 91b32132d0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 68 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
src/ui/dropdown.ts
View File

@ -27,10 +27,10 @@ export class DropDownLabel {
public text: string; public text: string;
public sprite?: Phaser.GameObjects.Sprite; public sprite?: Phaser.GameObjects.Sprite;
constructor(label: string, sprite?: Phaser.GameObjects.Sprite, state: DropDownState = DropDownState.ON) { constructor(label: string, sprite?: Phaser.GameObjects.Sprite, state: DropDownState = DropDownState.OFF) {
this.text = label || ""; this.text = label || "";
this.sprite = sprite; this.sprite = sprite;
this.state = state || DropDownState.ON; this.state = state;
} }
} }
@ -262,12 +262,13 @@ export class DropDown extends Phaser.GameObjects.Container {
public options: DropDownOption[]; public options: DropDownOption[];
private window: Phaser.GameObjects.NineSlice; private window: Phaser.GameObjects.NineSlice;
private cursorObj: Phaser.GameObjects.Image; private cursorObj: Phaser.GameObjects.Image;
private dropDownType: DropDownType = DropDownType.MULTI; public dropDownType: DropDownType = DropDownType.MULTI;
public cursor: number = 0; public cursor: number = 0;
private lastCursor: number = -1;
public defaultCursor: number = 0; public defaultCursor: number = 0;
private onChange: () => void; private onChange: () => void;
private lastDir: SortDirection = SortDirection.ASC; private lastDir: SortDirection = SortDirection.ASC;
private defaultValues: any[]; private defaultSettings: any[];
constructor(scene: BattleScene, x: number, y: number, options: DropDownOption[], onChange: () => void, type: DropDownType = DropDownType.MULTI, optionSpacing: number = 2) { constructor(scene: BattleScene, x: number, y: number, options: DropDownOption[], onChange: () => void, type: DropDownType = DropDownType.MULTI, optionSpacing: number = 2) {
const windowPadding = 5; const windowPadding = 5;
@ -292,7 +293,7 @@ export class DropDown extends Phaser.GameObjects.Container {
this.options.unshift(new DropDownOption(scene, "ALL", new DropDownLabel(i18next.t("filterBar:all"), undefined, this.checkForAllOn() ? DropDownState.ON : DropDownState.OFF))); this.options.unshift(new DropDownOption(scene, "ALL", new DropDownLabel(i18next.t("filterBar:all"), undefined, this.checkForAllOn() ? DropDownState.ON : DropDownState.OFF)));
} }
this.defaultValues = this.getVals(); this.defaultSettings = this.getSettings();
// Place ui elements in the correct spot // Place ui elements in the correct spot
options.forEach((option, index) => { options.forEach((option, index) => {
@ -339,8 +340,8 @@ export class DropDown extends Phaser.GameObjects.Container {
resetCursor(): boolean { resetCursor(): boolean {
// If we are an hybrid dropdown in "hover" mode, don't move the cursor back to 0 // If we are an hybrid dropdown in "hover" mode, don't move the cursor back to 0
if (this.dropDownType === DropDownType.HYBRID && this.checkForAllOff() && this.cursor > 0) { if (this.dropDownType === DropDownType.HYBRID && this.checkForAllOff()) {
return false; return this.setCursor(this.lastCursor);
} }
return this.setCursor(this.defaultCursor); return this.setCursor(this.defaultCursor);
} }
@ -361,6 +362,7 @@ export class DropDown extends Phaser.GameObjects.Container {
this.cursorObj.setVisible(true); this.cursorObj.setVisible(true);
// If hydrid type, we need to update the filters when going up/down in the list // If hydrid type, we need to update the filters when going up/down in the list
if (this.dropDownType === DropDownType.HYBRID) { if (this.dropDownType === DropDownType.HYBRID) {
this.lastCursor = cursor;
this.onChange(); this.onChange();
} }
} }
@ -457,23 +459,43 @@ export class DropDown extends Phaser.GameObjects.Container {
} }
} }
/**
* Get the current selected settings dictionary for each option
* @returns an array of dictionaries with the current state of each option
* - the settings dictionary is like this { val: any, state: DropDownState, cursor: boolean, dir: SortDirection }
*/
private getSettings(): any[] {
const settings = [];
for (let i = 0; i < this.options.length; i++) {
settings.push({ val: this.options[i].val, state: this.options[i].state , cursor: (this.cursor === i), dir: this.options[i].dir });
}
return settings;
}
/** /**
* Check whether the values of all options are the same as the default ones * Check whether the values of all options are the same as the default ones
* @returns true if they are the same, false otherwise * @returns true if they are the same, false otherwise
*/ */
public hasDefaultValues(): boolean { public hasDefaultValues(): boolean {
const currentValues = this.getVals(); const currentValues = this.getSettings();
const compareValues = (keys: string[]): boolean => {
return currentValues.length === this.defaultSettings.length &&
currentValues.every((value, index) =>
keys.every(key => value[key] === this.defaultSettings[index][key])
);
};
switch (this.dropDownType) { switch (this.dropDownType) {
case DropDownType.MULTI: case DropDownType.MULTI:
case DropDownType.HYBRID:
return currentValues.length === this.defaultValues.length && currentValues.every((value, index) => value === this.defaultValues[index]);
case DropDownType.RADIAL: case DropDownType.RADIAL:
return currentValues.every((value, index) => value["val"] === this.defaultValues[index]["val"] && value["state"] === this.defaultValues[index]["state"]); return compareValues(["val", "state"]);
case DropDownType.HYBRID:
return compareValues(["val", "state", "cursor"]);
case DropDownType.SINGLE: case DropDownType.SINGLE:
return currentValues[0]["dir"] === this.defaultValues[0]["dir"] && currentValues[0]["val"] === this.defaultValues[0]["val"]; return compareValues(["val", "state", "dir"]);
default: default:
return false; return false;
@ -484,46 +506,29 @@ export class DropDown extends Phaser.GameObjects.Container {
* Set all values to their default state * Set all values to their default state
*/ */
public resetToDefault(): void { public resetToDefault(): void {
this.setCursor(this.defaultCursor); if (this.defaultSettings.length > 0) {
this.setCursor(this.defaultCursor);
this.lastDir = SortDirection.ASC;
for (let i = 0; i < this.options.length; i++) { for (let i = 0; i < this.options.length; i++) {
const option = this.options[i]; // reset values with the defaultValues
// reset values if (this.dropDownType === DropDownType.SINGLE) {
switch (this.dropDownType) { if (this.defaultSettings[i].state === DropDownState.OFF) {
case DropDownType.HYBRID: this.options[i].setOptionState(DropDownState.OFF);
case DropDownType.MULTI: this.options[i].setDirection(SortDirection.ASC);
if (this.defaultValues.includes(option.val)) { this.options[i].toggle.setVisible(false);
option.setOptionState(DropDownState.ON); } else {
this.options[i].setOptionState(DropDownState.ON);
this.options[i].setDirection(SortDirection.ASC);
this.options[i].toggle.setVisible(true);
}
} else { } else {
option.setOptionState(DropDownState.OFF); if (this.defaultSettings[i]) {
} this.options[i].setOptionState(this.defaultSettings[i]["state"]);
break;
case DropDownType.RADIAL:
const targetValue = this.defaultValues.find(value => value.val === option.val);
option.setOptionState(targetValue.state);
break;
case DropDownType.SINGLE:
if (option.val === this.defaultValues[0].val) {
if (option.state !== DropDownState.ON) {
this.toggleOptionState(i);
}
if (option.dir !== this.defaultValues[0].dir) {
this.toggleOptionState(i);
} }
} }
break;
} }
} }
// Select or unselect "ALL" button if applicable
if (this.dropDownType === DropDownType.MULTI || this.dropDownType === DropDownType.HYBRID) {
if (this.checkForAllOn()) {
this.options[0].setOptionState(DropDownState.ON);
} else {
this.options[0].setOptionState(DropDownState.OFF);
}
}
} }
/** /**

14
src/ui/filter-bar.ts
View File

@ -1,5 +1,5 @@
import BattleScene from "#app/battle-scene.js"; import BattleScene from "#app/battle-scene.js";
import { DropDown } from "./dropdown"; import { DropDown, DropDownType } from "./dropdown";
import { StarterContainer } from "./starter-container"; import { StarterContainer } from "./starter-container";
import { addTextObject, getTextColor, TextStyle } from "./text"; import { addTextObject, getTextColor, TextStyle } from "./text";
import { UiTheme } from "#enums/ui-theme"; import { UiTheme } from "#enums/ui-theme";
@ -120,11 +120,13 @@ export class FilterBar extends Phaser.GameObjects.Container {
/** /**
* Move the leftmost dropdown to the left of the FilterBar instead of below it * Move the leftmost dropdown to the left of the FilterBar instead of below it
*/ */
offsetFirstFilter(): void { offsetHybridFilters(): void {
if (this.dropDowns[0]) { for (let i=0; i<this.dropDowns.length; i++) {
this.dropDowns[0].autoSize(); if (this.dropDowns[i].dropDownType === DropDownType.HYBRID) {
this.dropDowns[0].x -= this.dropDowns[0].getWidth(); this.dropDowns[i].autoSize();
this.dropDowns[0].y = 0; this.dropDowns[i].x = - this.dropDowns[i].getWidth();
this.dropDowns[i].y = 0;
}
} }
} }

23
src/ui/starter-select-ui-handler.ts
View File

@ -450,11 +450,11 @@ export default class StarterSelectUiHandler extends MessageUiHandler {
// sort filter // sort filter
const sortOptions = [ const sortOptions = [
new DropDownOption(this.scene, 0, new DropDownLabel(i18next.t("filterBar:sortByNumber"))), new DropDownOption(this.scene, 0, new DropDownLabel(i18next.t("filterBar:sortByNumber"), undefined, DropDownState.ON)),
new DropDownOption(this.scene, 1, new DropDownLabel(i18next.t("filterBar:sortByCost"), undefined, DropDownState.OFF)), new DropDownOption(this.scene, 1, new DropDownLabel(i18next.t("filterBar:sortByCost"))),
new DropDownOption(this.scene, 2, new DropDownLabel(i18next.t("filterBar:sortByCandies"), undefined, DropDownState.OFF)), new DropDownOption(this.scene, 2, new DropDownLabel(i18next.t("filterBar:sortByCandies"))),
new DropDownOption(this.scene, 3, new DropDownLabel(i18next.t("filterBar:sortByIVs"), undefined, DropDownState.OFF)), new DropDownOption(this.scene, 3, new DropDownLabel(i18next.t("filterBar:sortByIVs"))),
new DropDownOption(this.scene, 4, new DropDownLabel(i18next.t("filterBar:sortByName"), undefined, DropDownState.OFF)) new DropDownOption(this.scene, 4, new DropDownLabel(i18next.t("filterBar:sortByName")))
]; ];
this.filterBar.addFilter(DropDownColumn.SORT, i18next.t("filterBar:sortFilter"), new DropDown(this.scene, 0, 0, sortOptions, this.updateStarters, DropDownType.SINGLE)); this.filterBar.addFilter(DropDownColumn.SORT, i18next.t("filterBar:sortFilter"), new DropDown(this.scene, 0, 0, sortOptions, this.updateStarters, DropDownType.SINGLE));
this.filterBarContainer.add(this.filterBar); this.filterBarContainer.add(this.filterBar);
@ -462,7 +462,7 @@ export default class StarterSelectUiHandler extends MessageUiHandler {
this.starterSelectContainer.add(this.filterBarContainer); this.starterSelectContainer.add(this.filterBarContainer);
// Offset the generation filter dropdown to avoid covering the filtered pokemon // Offset the generation filter dropdown to avoid covering the filtered pokemon
this.filterBar.offsetFirstFilter(); this.filterBar.offsetHybridFilters();
if (!this.scene.uiTheme) { if (!this.scene.uiTheme) {
starterContainerWindow.setVisible(false); starterContainerWindow.setVisible(false);
@ -914,19 +914,12 @@ export default class StarterSelectUiHandler extends MessageUiHandler {
*/ */
resetFilters() : void { resetFilters() : void {
const genDropDown: DropDown = this.filterBar.getFilter(DropDownColumn.GEN); const genDropDown: DropDown = this.filterBar.getFilter(DropDownColumn.GEN);
if (this.scene.gameMode.isChallenge) {
// In challenge mode all gens are selected by default
genDropDown.defaultCursor = 0;
} else {
// in other modes, gen 1 is selected by default, and all options disabled
genDropDown.defaultCursor = 1;
}
this.filterBar.setValsToDefault(); this.filterBar.setValsToDefault();
// for all modes except challenge, disable all gen options to enable hovering behavior
if (!this.scene.gameMode.isChallenge) { if (!this.scene.gameMode.isChallenge) {
genDropDown.unselectAllOptions(); // if not in a challenge, in Gen hybrid filter hovering mode, set the cursor to the Gen1
genDropDown.setCursor(1);
} }
} }