Pokélapse

Constraint Solver configured for building/generating VGC2020 Pokémon teams.

Comment

Inspiration

Ryan is too fixated on Pokémon, competitively and in general. He was unsatisfied with the statistical information available about the game. Most statistics are only conditional on the Pokémon, ignoring role, damage type, and more.

What it does

The project lets the user fill in as much or as little information about a team they have in mind, using dropdowns. Then, the user may explore novel random but valid possibilities. At any point, they may step forward, step back, and manually detail the team.

It is built using the "Wave Function Collapse" algorithm, which we named the project after. It is normally used to procedurally generate tilemaps and low-resolution images. One novel use was to generate poems with specific lyrical forms, like limericks and ballads. Similarly, we applied it here. (It's loosely based on quantum mechanics, with "observations" and "collapses" of probability. So, we're essentially observing a superposition of all Pokémon.)

How we built it

The project is built in HTML/TypeScript/CSS, running as a static page. If you host it yourself, we used python3 -m http.server. If you want to edit the TypeScript, you will have to run tsc to compile into JavaScript, as usual.

Challenges we ran into

  • Ryan didn't believe he would find anyone to work with him on the project. So, the team formed rather late, two hours in, and we began after regrouping the next day, 12 hours in.
  • Everyone on the team was fresh to Typescript, and some were new to Javascript as well. We learned as we went, and the exports system was a pain point without help.
  • The dropdowns were very demanding to get working. We wrangled with them, trying to populate them, to style the dropdown, to call functions on selection, and much more.
  • Not everyone was used to Github, and so occasionally shenanigans would happen in our branch.

Accomplishments that we're proud of

  • The algorithm implementation. It is technically generic, so it would work to solve any set of restraints.
  • Picking up Typescript.
  • The front-end. The page is responsive and interacts with the back-end cleanly.

What we learned

We had many people from many disciplines, so there was naturally a lot of crossing over and picking up things. As someone who couldn't have enough programming languages, Ryan suggested Typescript to use in place of Javascript. Steven had a comprehensive knowledge of front-end development, and as tasks were spread among us, we worked with the event system between HTML and Javascript, JQuery, and the interface between the front and back. "Most" importantly, everyone gained an appreciation of Pokémon and knowledge of random facts. (Riolu has Prankster???)

What's next for Pokélapse

The constraints are quite loose, generating rather uncompetitive movesets. For example, the items are currently not considered and are quite nonsensical at the moment. (We think it makes it funnier.) Team synergy was planned, but since it was more of a recommendation than a hard constraint, we focused on getting valid teams first. In the future, we would have an options panel for such recommendations, such as:

  • Limiting choices to top popular picks with a user-defined cutoff.
  • Filtering out not fully evolved Pokémon.
  • Avoiding mixed attackers (physical and special).
  • Avoiding shared type weaknesses in teams. Visually, the item dropdown could have their icons, and moves could have their type. There are small imprecisions in the styling. The site is a bit wonky on mobile, too.
Share this project:

Updates