[Enhancement] Optimize updateScroll function in starter select UI (#3268)

* optimize updateScroll function to update only the container within the screen

* fix eslint
This commit is contained in:
Leo Kim 2024-08-01 01:00:46 +09:00 committed by GitHub
parent 7f8ddb514d
commit 9531e64c0d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 65 additions and 58 deletions

View File

@ -2057,76 +2057,83 @@ export default class StarterSelectUiHandler extends MessageUiHandler {
updateScroll = () => {
const maxColumns = 9;
const maxRows = 9;
const onScreenFirstIndex = this.scrollCursor * 9;
const onScreenLastIndex = Math.min(this.filteredStarterContainers.length - 1, onScreenFirstIndex + 81);
this.starterSelectScrollBar.setPage(this.scrollCursor);
let pokerusCursorIndex = 0;
this.filteredStarterContainers.forEach((container, i) => {
const pos = calcStarterPosition(i, this.scrollCursor);
container.setPosition(pos.x, pos.y);
if (i < (maxRows + this.scrollCursor) * maxColumns && i >= this.scrollCursor * maxColumns) {
container.setVisible(true);
} else {
if (i < onScreenFirstIndex || i > onScreenLastIndex) {
container.setVisible(false);
}
if (this.pokerusSpecies.includes(container.species)) {
this.pokerusCursorObjs[pokerusCursorIndex].setPosition(pos.x - 1, pos.y + 1);
return;
} else {
const pos = calcStarterPosition(i, this.scrollCursor);
container.setPosition(pos.x, pos.y);
if (i < (maxRows + this.scrollCursor) * maxColumns && i >= this.scrollCursor * maxColumns) {
this.pokerusCursorObjs[pokerusCursorIndex].setVisible(true);
container.setVisible(true);
} else {
this.pokerusCursorObjs[pokerusCursorIndex].setVisible(false);
}
pokerusCursorIndex++;
}
if (this.starterSpecies.includes(container.species)) {
this.starterCursorObjs[this.starterSpecies.indexOf(container.species)].setPosition(pos.x - 1, pos.y + 1);
if (i < (maxRows + this.scrollCursor) * maxColumns && i >= this.scrollCursor * maxColumns) {
this.starterCursorObjs[this.starterSpecies.indexOf(container.species)].setVisible(true);
} else {
this.starterCursorObjs[this.starterSpecies.indexOf(container.species)].setVisible(false);
}
}
const speciesId = container.species.speciesId;
this.updateStarterValueLabel(container);
container.label.setVisible(true);
const speciesVariants = speciesId && this.scene.gameData.dexData[speciesId].caughtAttr & DexAttr.SHINY
? [ DexAttr.DEFAULT_VARIANT, DexAttr.VARIANT_2, DexAttr.VARIANT_3 ].filter(v => !!(this.scene.gameData.dexData[speciesId].caughtAttr & v))
: [];
for (let v = 0; v < 3; v++) {
const hasVariant = speciesVariants.length > v;
container.shinyIcons[v].setVisible(hasVariant);
if (hasVariant) {
container.shinyIcons[v].setTint(getVariantTint(speciesVariants[v] === DexAttr.DEFAULT_VARIANT ? 0 : speciesVariants[v] === DexAttr.VARIANT_2 ? 1 : 2));
}
}
container.starterPassiveBgs.setVisible(!!this.scene.gameData.starterData[speciesId].passiveAttr);
container.hiddenAbilityIcon.setVisible(!!this.scene.gameData.dexData[speciesId].caughtAttr && !!(this.scene.gameData.starterData[speciesId].abilityAttr & 4));
container.classicWinIcon.setVisible(this.scene.gameData.starterData[speciesId].classicWinCount > 0);
// 'Candy Icon' mode
if (this.scene.candyUpgradeDisplay === 0) {
if (!starterColors[speciesId]) {
// Default to white if no colors are found
starterColors[speciesId] = [ "ffffff", "ffffff" ];
container.setVisible(false);
}
// Set the candy colors
container.candyUpgradeIcon.setTint(argbFromRgba(Utils.rgbHexToRgba(starterColors[speciesId][0])));
container.candyUpgradeOverlayIcon.setTint(argbFromRgba(Utils.rgbHexToRgba(starterColors[speciesId][1])));
if (this.pokerusSpecies.includes(container.species)) {
this.pokerusCursorObjs[pokerusCursorIndex].setPosition(pos.x - 1, pos.y + 1);
this.setUpgradeIcon(container);
} else if (this.scene.candyUpgradeDisplay === 1) {
container.candyUpgradeIcon.setVisible(false);
container.candyUpgradeOverlayIcon.setVisible(false);
if (i < (maxRows + this.scrollCursor) * maxColumns && i >= this.scrollCursor * maxColumns) {
this.pokerusCursorObjs[pokerusCursorIndex].setVisible(true);
} else {
this.pokerusCursorObjs[pokerusCursorIndex].setVisible(false);
}
pokerusCursorIndex++;
}
if (this.starterSpecies.includes(container.species)) {
this.starterCursorObjs[this.starterSpecies.indexOf(container.species)].setPosition(pos.x - 1, pos.y + 1);
if (i < (maxRows + this.scrollCursor) * maxColumns && i >= this.scrollCursor * maxColumns) {
this.starterCursorObjs[this.starterSpecies.indexOf(container.species)].setVisible(true);
} else {
this.starterCursorObjs[this.starterSpecies.indexOf(container.species)].setVisible(false);
}
}
const speciesId = container.species.speciesId;
this.updateStarterValueLabel(container);
container.label.setVisible(true);
const speciesVariants = speciesId && this.scene.gameData.dexData[speciesId].caughtAttr & DexAttr.SHINY
? [ DexAttr.DEFAULT_VARIANT, DexAttr.VARIANT_2, DexAttr.VARIANT_3 ].filter(v => !!(this.scene.gameData.dexData[speciesId].caughtAttr & v))
: [];
for (let v = 0; v < 3; v++) {
const hasVariant = speciesVariants.length > v;
container.shinyIcons[v].setVisible(hasVariant);
if (hasVariant) {
container.shinyIcons[v].setTint(getVariantTint(speciesVariants[v] === DexAttr.DEFAULT_VARIANT ? 0 : speciesVariants[v] === DexAttr.VARIANT_2 ? 1 : 2));
}
}
container.starterPassiveBgs.setVisible(!!this.scene.gameData.starterData[speciesId].passiveAttr);
container.hiddenAbilityIcon.setVisible(!!this.scene.gameData.dexData[speciesId].caughtAttr && !!(this.scene.gameData.starterData[speciesId].abilityAttr & 4));
container.classicWinIcon.setVisible(this.scene.gameData.starterData[speciesId].classicWinCount > 0);
// 'Candy Icon' mode
if (this.scene.candyUpgradeDisplay === 0) {
if (!starterColors[speciesId]) {
// Default to white if no colors are found
starterColors[speciesId] = [ "ffffff", "ffffff" ];
}
// Set the candy colors
container.candyUpgradeIcon.setTint(argbFromRgba(Utils.rgbHexToRgba(starterColors[speciesId][0])));
container.candyUpgradeOverlayIcon.setTint(argbFromRgba(Utils.rgbHexToRgba(starterColors[speciesId][1])));
this.setUpgradeIcon(container);
} else if (this.scene.candyUpgradeDisplay === 1) {
container.candyUpgradeIcon.setVisible(false);
container.candyUpgradeOverlayIcon.setVisible(false);
}
}
});
};