Filter bar can adjust cursorOffset and x padding

This commit is contained in:
Wlowscha 2025-01-04 20:22:06 +01:00
parent 52e2a673e8
commit fbcd14264e
No known key found for this signature in database
GPG Key ID: 3C8F1AD330565D04
2 changed files with 15 additions and 11 deletions

View File

@ -25,13 +25,20 @@ export class FilterBar extends Phaser.GameObjects.Container {
public openDropDown: boolean = false; public openDropDown: boolean = false;
private lastCursor: number = -1; private lastCursor: number = -1;
private uiTheme: UiTheme; private uiTheme: UiTheme;
private leftPaddingX: number;
private rightPaddingX: number;
private cursorOffset: number;
constructor(scene: BattleScene, x: number, y: number, width: number, height: number) { constructor(scene: BattleScene, x: number, y: number, width: number, height: number, leftPaddingX: number = 6, rightPaddingX: number = 6, cursorOffset: number = 8) {
super(scene, x, y); super(scene, x, y);
this.width = width; this.width = width;
this.height = height; this.height = height;
this.leftPaddingX = leftPaddingX;
this.rightPaddingX = rightPaddingX;
this.cursorOffset = cursorOffset;
this.window = addWindow(scene, 0, 0, width, height, false, false, undefined, undefined, WindowVariant.THIN); this.window = addWindow(scene, 0, 0, width, height, false, false, undefined, undefined, WindowVariant.THIN);
this.add(this.window); this.add(this.window);
@ -97,23 +104,21 @@ export class FilterBar extends Phaser.GameObjects.Container {
* Position the filter dropdowns evenly across the width of the container * Position the filter dropdowns evenly across the width of the container
*/ */
private calcFilterPositions(): void { private calcFilterPositions(): void {
const paddingX = 6;
const cursorOffset = 8;
let totalWidth = paddingX * 2 + cursorOffset; let totalWidth = this.leftPaddingX + this.rightPaddingX + this.cursorOffset;
this.labels.forEach(label => { this.labels.forEach(label => {
totalWidth += label.displayWidth + cursorOffset; totalWidth += label.displayWidth + this.cursorOffset;
}); });
const spacing = (this.width - totalWidth) / (this.labels.length - 1); const spacing = (this.width - totalWidth) / (this.labels.length - 1);
for (let i = 0; i < this.labels.length; i++) { for (let i = 0; i < this.labels.length; i++) {
if (i === 0) { if (i === 0) {
this.labels[i].x = paddingX + cursorOffset; this.labels[i].x = this.leftPaddingX + this.cursorOffset;
} else { } else {
const lastRight = this.labels[i - 1].x + this.labels[i - 1].displayWidth; const lastRight = this.labels[i - 1].x + this.labels[i - 1].displayWidth;
this.labels[i].x = lastRight + spacing + cursorOffset; this.labels[i].x = lastRight + spacing + this.cursorOffset;
} }
this.dropDowns[i].x = this.labels[i].x - cursorOffset - paddingX; this.dropDowns[i].x = this.labels[i].x - this.cursorOffset - this.leftPaddingX;
this.dropDowns[i].y = this.height; this.dropDowns[i].y = this.height;
} }
} }
@ -140,8 +145,7 @@ export class FilterBar extends Phaser.GameObjects.Container {
} }
} }
const cursorOffset = 8; this.cursorObj.setPosition(this.labels[cursor].x - this.cursorOffset + 2, 6);
this.cursorObj.setPosition(this.labels[cursor].x - cursorOffset + 2, 6);
this.lastCursor = cursor; this.lastCursor = cursor;
} }

View File

@ -354,7 +354,7 @@ export default class PokedexUiHandler extends MessageUiHandler {
// Create and initialise filter bar // Create and initialise filter bar
this.filterBarContainer = this.scene.add.container(0, 0); this.filterBarContainer = this.scene.add.container(0, 0);
this.filterBar = new FilterBar(this.scene, speciesContainerX - 10, 1, 175 + 10, filterBarHeight); this.filterBar = new FilterBar(this.scene, speciesContainerX, 1, 175, filterBarHeight, 2, 0, 6);
// gen filter // gen filter
const genOptions: DropDownOption[] = [ const genOptions: DropDownOption[] = [