Recently I had been replaying some Pokemon RPGs and found myself frequently referencing various type charts online to help me choose the ideal team for battles. While they’re all very useful, I had an idea to create my own interactive Type Chart!
The basic premise of the app was to be able to select one or two types and get an instant visual indicator for how other types might be affected by or affect the selected type(s).
I struggled a bit with UX on this little project simply because I wanted it to be somewhat clear to the user how they’re supposed to use this. I initially had the wheel itself as the primary interactive element where users could select the slices to change out the selected type. This felt potentially confusing because there was no clear indication that the slices were interactable.
To improve the experience I made sure the interactive elements were in either the top or bottom toolbars.
This was also my first attempt at creating a Progressive Web App! The web app can be saved to mobile devices and blends in with the OS as though it were a native application. The instructions for doing so, along with how to use the app, are part of the modal that appears when clicking the info button (light bulb.)
I’ve included a language option in the top toolbar which swaps out all text with the (mostly correct) translation in the selected language!
The application includes both a dark and light mode thanks to tailwind CSS’s dark mode prefix. I’ve also written a custom GLSL shader that sits behind the wheel element. It features a starburst effect and some particles that take the shape of the currently selected type’s icon! This was a ton of fun to figure out in a react setting and it runs smoothly on the users GPU.
Below is a video showing off the various UI elements as well as screenshots of the dark and light modes:
