From 9531e64c0d06ba86fb41b455fc7bd22926b1188b Mon Sep 17 00:00:00 2001
From: Leo Kim <47556641+KimJeongSun@users.noreply.github.com>
Date: Thu, 1 Aug 2024 01:00:46 +0900
Subject: [PATCH] [Enhancement] Optimize updateScroll function in starter
 select UI  (#3268)

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

* fix eslint
---
 src/ui/starter-select-ui-handler.ts | 123 +++++++++++++++-------------
 1 file changed, 65 insertions(+), 58 deletions(-)

diff --git a/src/ui/starter-select-ui-handler.ts b/src/ui/starter-select-ui-handler.ts
index 6693db0e9a4..e0f895b89c4 100644
--- a/src/ui/starter-select-ui-handler.ts
+++ b/src/ui/starter-select-ui-handler.ts
@@ -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);
+        }
       }
     });
   };