Project Details

Overview

Image of Pokemon Guess Who

Project Name:

Pokemon Guess Who



Software & Technologies Used:

-APIs
-CSS/SASS
-HTML
-JavaScript
-Lumen/Laravel
-Responsive Design
-VS Code
-phpMyAdmin

Client:

Self



Link:

Pokemon Guess Who


Description:

A browser based version of Guess Who, featuring Pokemon!

Case Study


This idea was inspired when I was watching a video from the Youtuber Patterz, where he and his friend chose Pokemon to bring to a battle based off Guess Who games. They put a bunch of Pokemon in their boxes to use as their board, and as I was watching, I thought "Maybe there's something I can build that would make that process easier for them".

So in my mind, I broke down what was needed:
-A way to randomize what Pokemon are played with
-A way to deselect Pokemon that are invalid
-A way to choose the Pokemon you want
-A way for the opponent to see the same board that you have

All of this I felt was achievable through vanilla JavaScript and my good ol' buddy Lumen. The part I felt that was the most challenging was figuring out a way to have that connectivity with your opponent. Luckily, I came up with the solution of saving and loading games based on IDs. When a board is generated, it will save all of the generated Pokemon (and if they're shiny or not) to the database via a function that is automatically called when you generate a board. Where it's being saved is in a separate table that saves all of the Pokedex numbers of the Pokemon and a universal value if "Shiny?" was selected or not. Once it's done saving, it will display the id of that game onto the screen, and then all you do is communicate that ID to your opponent and the load function will populate the page using the same Pokedex numbers as what was saved.

One of the issues I encountered was that, if someone wanted to play Guess Who and use those results the same way that Patterz did, then my setup wasn't the most optimal as some Pokemon aren't in some games. Xerneas and Yveltal aren't in Scarlet and Violet, and any of the new Pokemon aren't in older games. So I had to create a filter to serve those needs if anyone needed.

Luckily, the solution I came up with was to create a parameter in the database and give it a value (my choice for most of those values was y meaning yes) to make it relevant to that need. Then, in the Lumen files, I created a new function in the controller that only returns those relevant results. Then it's as simple as making a new route to access that function and calling upon it using an API Call.

Once I did that for Scarlet and Violet, I knew I could do it for anything, which eventually led to the creation of multiple modes for the user to enjoy with. Generation, Typing, Games, even some special modes like Pokemon that Ash Ketchum had caught or my favourites. All I needed to do was just make a new function in the controller, add a new route, and add that mode to the select list I made that saves the mode's keyword as a data-member to reference for the API Call.

↑ To Top

Mobile Menu

X