Case Study

This page was inspired by an old site that I used to visit: Pokecharms. At Pokecharms, they let you build these trainer cards to download and share and my younger self absolutely adored them!

Ever since Covid, I have been coming up with a Pokemon-inspired story that I've been slowly fleshing out and developing. One day this winter, when I looked back at the league I was making, I stopped and I realized "Hey, it'd be cool if other people could make their own Pokemon Leagues too!"

So I sat down with myself and thought "How do I want to do this?" and honestly, just like most other pages, all I really needed was vanilla javascript and good ol' Lumen.

I originally thought I would need something more complex; to bring all of the saved selections to another page, but I realized: Why do I need to bring it to another page? Just because other sites do doesn't mean I have to. So I thought I'd try a lightbox. Reason being is that all of the selection processing isn't visible to the human eye anyways, so it can process the selections and display in the background, and then when the user is ready, the lightbox will open up with all of the information they selected.

The only downside to this method is that lightboxes aren't meant to scroll; so if the user makes selections that go larger than the height of the screen, then, well... it's not exactly the most professional looking. I did ensure the functionality and display would be fine by making the lightbox do an overload: scroll but this is a challenge I'd be interested in investigating further. For right now though, this method gets the job done and is perfectly functional as is.

I did wanna talk a bit about what happens in the background when users make their League too. The selection lists are populated with trainers that I have saved in my database, which all there is is just their database ID and their name. The ID is being applied to a data-member (aka data-trainer) as a reference for later.

When a user makes a selection, the function I wrote finds the data-member of the select list that I had applied, then goes to the lightbox area and searches for the div with the same id as the data-link to. For example, Gym 1 would be: "data-link: gym-1-link" so it looks for "hashtag#gym-1-link" etc. Once it finds that div, it will apply an image using the data-trainer number I mentioned previously, and it will also take the innerText from the selection and apply it to the designated area for the trainer's name.

Using the same selection method, when a user makes a selection for the trainer's type specialty, it will go and find that designated area in the lightbox and apply a little colour around that box that's associated with that Pokemon type. The reason why I included this is because I wanted to give the users freedom of what they want their league to be like. If you have a story that justifies Misty being a bug trainer, who am I to judge? Live your life, live your dreams!

One last thing is that I also included a simple mode to this as well, that just takes the Gym Leaders, Elite 4, and Champions and applies them to the selection lists. As much as I want to nurture people's ideas and give them creative freedom, sometimes there can be too much information and cause an overload. So I wanted to provide an option for faster creation and less chance of an information overload.

Pokecharms helped Little Delilah bloom her creativity and gave her hours of fun and entertainment to spend on. That's why I wanted to build something with a similar vibe. I know she would absolutely LOVE to spend hours creating leagues of just her favourites, or have some ideas spring forth!

One day I hope to upgrade the page to allow custom trainers to be added. That will definitely be a challenge, but one I'm willing to take on to help nurture all of these ideas fans may have!