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 WhoDescription:
A browser based version of Guess Who, featuring Pokemon!
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.
Thumbnail
The display of the board, once a game has been loaded.
A select list is populated with all of the options on the board. You select which Pokemon you want to play with!
There's over 41 different modes to choose from! A special selector in the database is what determines if a Pokemon is applicable to that mode.
Thumbnail
Thumbnail
Thumbnail