[UI/UX] Reducing number of containers in the Pokédex

[Wlowscha]

What are the changes the user will see?

Hopefully none.

Why am I making these changes?

Since the introduction of #5083 to main, players on certain devices and browsers have been experiencing crashes due to insufficient memory. While memory issues are pervasive in the Pokérogue implementation, the Pokédex exacerbated the problem by introducing a large number of new containers.

Specifically, the Pokédex followed the example of the Starter Select screen, which by itself creates a container for each starter (over 500). These containers already occupy a significant space in memory, and the Pokédex introduced new containers for each species (over 1000). What's worse, the containers are created in the setup() phase and never deleted.

Another PR, #5351, attempted to put a patch on these issues by creating the containers when the Pokédex or Starter Select are opened, and removing them afterwards. This only shifts the problem, while also introducing a lag of a few seconds when accessing or exiting these screens. This PR brings about more sweeping changes aimed at curbing the number of containers altogether.

What are the changes from a developer perspective?

Instead of creating a container for each species in the Pokédex, only 9x9=81 containers are created (the maximum number of Pokémon icons visible on screen at the same time). No additional lists of containers are created when filtering; instead, the relevant information about filtered Pokémon is stored in an array of interfaces. The user interface has been updated accordingly, in particular by reworking the logic for scrolling in the icon box.

This PR is self-consistent and reduces memory occupation due to the Pokédex specifically, which is the most urgent problem. Further improvements are possible with regards to the starter select screen, by cutting down on the number of containers in a similar way, or even reusing the Pokédex containers outright.

Whether the contributions from #5351 can still be beneficial after these changes remains to be seen.

Screenshots/Videos

Comparison from dev tools on Microsoft Edge, between current main (first screenshot) and with the changes from this PR (second screenshot), both from running the game locally for fair comparison. Notice that, as intended, the occupation from PokédexMonContainers is significantly less. In both cases, the screenshots are taken after starting the game, opening the Dex and closing it.

How to test the changes?

Just open the dex and fumble around. Since this is a pretty significant rework of the UI, it's very likely that bugs are hidden somewhere.

Checklist

• I'm using beta as my base branch
• There is no overlap with another PR? Some overlap with [Refactor][UI/UX] Reducing permanent memory occupation from Starter Select and Pokédex #5351
• The PR is self-contained and cannot be split into smaller PRs?
• Have I provided a clear explanation of the changes?
• Have I tested the changes manually?
• Are all unit tests still passing? (npm run test)
  • Have I created new automated tests (npm run create-test) or updated existing tests related to the PR's changes?

[DayKev]

Just did a quick skim of the code for now.

[DayKev]

Pokedex still seems to work.

[SirzBenjie]

This is a good start. I hope this helps mobile users out.

Sorry @Wlowscha , I won't have my automated tests for the Pokedex here for this primarily because they are tied up with my testing infrastructure refactors (which relied on changing some stuff for game state that makes the tests not translate).

There's a lot more still to do, but doing this incrementally is wise