[Refactor][UI/UX] Reducing permanent memory occupation from Starter Select and Pokédex

src/ui/pokedex-ui-handler.ts

@@ -152,6 +152,7 @@
 
 export default class PokedexUiHandler extends MessageUiHandler {
   private starterSelectContainer: Phaser.GameObjects.Container;
+  private starterBoxContainer: Phaser.GameObjects.Container;
   private starterSelectScrollBar: ScrollBar;
   private filterBarContainer: Phaser.GameObjects.Container;
   private filterBar: FilterBar;
@@ -437,23 +438,23 @@
     this.pokemonFormText.setOrigin(0, 0);
     this.starterSelectContainer.add(this.pokemonFormText);
 
-    const starterBoxContainer = globalScene.add.container(speciesContainerX + 6, 9); //115
+    this.starterBoxContainer = globalScene.add.container(speciesContainerX + 6, 9); //115
 
     this.starterSelectScrollBar = new ScrollBar(161, 12, 5, pokemonContainerWindow.height - 6, 9);
 
-    starterBoxContainer.add(this.starterSelectScrollBar);
+    this.starterBoxContainer.add(this.starterSelectScrollBar);
 
     this.pokerusCursorObjs = new Array(POKERUS_STARTER_COUNT).fill(null).map(() => {
       const cursorObj = globalScene.add.image(0, 0, "select_cursor_pokerus");
       cursorObj.setVisible(false);
       cursorObj.setOrigin(0, 0);
-      starterBoxContainer.add(cursorObj);
+      this.starterBoxContainer.add(cursorObj);
       return cursorObj;
     });
 
     this.cursorObj = globalScene.add.image(0, 0, "select_cursor");
     this.cursorObj.setOrigin(0, 0);
-    starterBoxContainer.add(this.cursorObj);
+    this.starterBoxContainer.add(this.cursorObj);
 
     for (const species of allSpecies) {
       this.speciesLoaded.set(species.speciesId, false);
@@ -467,7 +468,7 @@
       pokemonContainer.setPosition(pos.x, pos.y);
       this.iconAnimHandler.addOrUpdate(pokemonContainer.icon, PokemonIconAnimMode.NONE);
       this.pokemonContainers.push(pokemonContainer);
       starterBoxContainer.add(pokemonContainer);
     }
 
     // Tray to display forms
@@ -480,11 +481,11 @@
     this.trayCursorObj = globalScene.add.image(0, 0, "select_cursor");
     this.trayCursorObj.setOrigin(0, 0);
     this.formTrayContainer.add(this.trayCursorObj);
-    starterBoxContainer.add(this.formTrayContainer);
-    starterBoxContainer.bringToTop(this.formTrayContainer);
+    this.starterBoxContainer.add(this.formTrayContainer);
+    this.starterBoxContainer.bringToTop(this.formTrayContainer);
     this.formTrayContainer.setVisible(false);
 
-    this.starterSelectContainer.add(starterBoxContainer);
+    this.starterSelectContainer.add(this.starterBoxContainer);
 
     this.pokemonSprite = globalScene.add.sprite(96, 143, "pkmn__sub");
     this.pokemonSprite.setPipeline(globalScene.spritePipeline, { tone: [ 0.0, 0.0, 0.0, 0.0 ], ignoreTimeTint: true });
@@ -562,6 +563,13 @@
 
   show(args: any[]): boolean {
 
+    for (const species of this.allSpecies) {
+      const pokemonContainer = new PokedexMonContainer(species).setVisible(false);
+      this.iconAnimHandler.addOrUpdate(pokemonContainer.icon, PokemonIconAnimMode.NONE);
+      this.pokemonContainers.push(pokemonContainer);
+      this.starterBoxContainer.add(pokemonContainer);
+    }
+
     if (!this.starterPreferences) {
       this.starterPreferences = StarterPrefs.load();
     }
@@ -2165,6 +2173,14 @@
   clear(): void {
     super.clear();
 
+    this.pokemonContainers.forEach(obj => {
+      this.starterBoxContainer.remove(obj, true); // Removes from container and destroys it
+    });
+    this.pokemonContainers = [];
+    // These arrays must be emptied too, or garbage is not collected properly
+    this.validPokemonContainers = [];
+    this.filteredPokemonContainers = [];
+
     this.cursor = -1;
     this.oldCursor = -1;
     globalScene.ui.hideTooltip();

src/ui/starter-select-ui-handler.ts

@@ -221,6 +221,7 @@ interface SpeciesDetails {
 
 export default class StarterSelectUiHandler extends MessageUiHandler {
   private starterSelectContainer: Phaser.GameObjects.Container;
+  private starterBoxContainer: Phaser.GameObjects.Container;
   private starterSelectScrollBar: ScrollBar;
   private filterBarContainer: Phaser.GameObjects.Container;
   private filterBar: FilterBar;
@@ -634,27 +635,25 @@ export default class StarterSelectUiHandler extends MessageUiHandler {
     this.randomCursorObj.setOrigin(0, 0);
     this.starterSelectContainer.add(this.randomCursorObj);
 
-    const starterSpecies: Species[] = [];
-
-    const starterBoxContainer = globalScene.add.container(speciesContainerX + 6, 9); //115
+    this.starterBoxContainer = globalScene.add.container(speciesContainerX + 6, 9); //115
 
     this.starterSelectScrollBar = new ScrollBar(161, 12, 5, starterContainerWindow.height - 6, 9);
 
-    starterBoxContainer.add(this.starterSelectScrollBar);
+    this.starterBoxContainer.add(this.starterSelectScrollBar);
 
     this.pokerusCursorObjs = new Array(POKERUS_STARTER_COUNT).fill(null).map(() => {
       const cursorObj = globalScene.add.image(0, 0, "select_cursor_pokerus");
       cursorObj.setVisible(false);
       cursorObj.setOrigin(0, 0);
-      starterBoxContainer.add(cursorObj);
+      this.starterBoxContainer.add(cursorObj);
       return cursorObj;
     });
 
     this.starterCursorObjs = new Array(6).fill(null).map(() => {
       const cursorObj = globalScene.add.image(0, 0, "select_cursor_highlight");
       cursorObj.setVisible(false);
       cursorObj.setOrigin(0, 0);
-      starterBoxContainer.add(cursorObj);
+      this.starterBoxContainer.add(cursorObj);
       return cursorObj;
     });
 
@@ -666,25 +665,19 @@ export default class StarterSelectUiHandler extends MessageUiHandler {
     this.starterIconsCursorObj.setOrigin(0, 0);
     this.starterSelectContainer.add(this.starterIconsCursorObj);
 
-    starterBoxContainer.add(this.cursorObj);
+    this.starterBoxContainer.add(this.cursorObj);
+
+    this.starterSelectContainer.add(this.starterBoxContainer);
 
     for (const species of allSpecies) {
       if (!speciesStarterCosts.hasOwnProperty(species.speciesId) || !species.isObtainable()) {
         continue;
       }
 
-      starterSpecies.push(species.speciesId);
       this.speciesLoaded.set(species.speciesId, false);
       this.allSpecies.push(species);
-
-      const starterContainer = new StarterContainer(species).setVisible(false);
-      this.iconAnimHandler.addOrUpdate(starterContainer.icon, PokemonIconAnimMode.NONE);
-      this.starterContainers.push(starterContainer);
-      starterBoxContainer.add(starterContainer);
     }
 
-    this.starterSelectContainer.add(starterBoxContainer);
-
     this.starterIcons = new Array(6).fill(null).map((_, i) => {
       const icon = globalScene.add.sprite(teamWindowX + 7, calcStarterIconY(i), "pokemon_icons_0");
       icon.setScale(0.5);
@@ -947,6 +940,14 @@ export default class StarterSelectUiHandler extends MessageUiHandler {
   }
 
   show(args: any[]): boolean {
+
+    for (const species of this.allSpecies) {
+      const starterContainer = new StarterContainer(species).setVisible(false);
+      this.iconAnimHandler.addOrUpdate(starterContainer.icon, PokemonIconAnimMode.NONE);
+      this.starterContainers.push(starterContainer);
+      this.starterBoxContainer.add(starterContainer);
+    }
+
     if (!this.starterPreferences) {
       // starterPreferences haven't been loaded yet
       this.starterPreferences = StarterPrefs.load();
@@ -3916,6 +3917,14 @@ export default class StarterSelectUiHandler extends MessageUiHandler {
     this.activeTooltip = undefined;
     globalScene.ui.hideTooltip();
 
+    this.starterContainers.forEach(obj => {
+      this.starterBoxContainer.remove(obj, true); // Removes from container and destroys it
+    });
+    this.starterContainers = [];
+    // These arrays must be emptied too, or garbage is not collected properly
+    this.validStarterContainers = [];
+    this.filteredStarterContainers = [];
+
     this.starterSelectContainer.setVisible(false);
     this.blockInput = false;