Adding 'Favorite' System to Pokemon Showdown: External Pull Request and Final Week of OSD600

Despite saying I wanted to work on a new repo for my final external pull request, after not being able to find a suitable issue, I ended up contributing to the Pokemon Showdown Client again. This time, I added an even larger feature than my last one: a 'favoriting' system that lets users quickly access users they play with frequently.

The Issue

Currently, the only way to match up with specific users on Pokemon Showdown is to either search them by username, or to find them in the chatrooms. However, the username search system requires an exact username, and turns up a result even if no user exists under that name. You'd only find out the account doesn't exist once you try to send a message or start a match.
Opened chat even though user doesn't exist

The Fix

The solution I decided on was to allow users to 'Favorite' other users, allowing them to be quickly found later.

Toggling favorite/unfavorite
The first thing I did was add the 'favorite/unfavorite' button to the user popup menu. Initially, the user popup would close when favorite/unfavorite was clicked, as I didn't know I could update the HTML without reloading the popup. Eventually, I learned that the values of the button could be toggled on the fly using code I found elsewhere in the Pokemon Showdown Client.

Code to toggle button value on the fly
Once I made sure the favorite button was working as intended, I added the functions to save and load the favorited users' usernames. I decided I would store them in an array, then save the array as a JSON object in the user's local storage. When I wanted to access the data, I would parse the JSON object back into the array, then make any modifications to the array before overwriting the data in local storage.
Function to save names to local storage

Functions to remove and get items from the list
Once the logic for loading and storing data was working, I added the logic to change the favorite button to an unfavorite button if the selected user's name was already on the list, allowing the user to remove someone from the list easily.

With the data handling logic complete, the last step was to allow users to access the data. Initially, I couldn't decide how I wanted to display the data, but eventually I decided to add a button on the main screen under the 'Find a user' button that would bring up a window similar to the chat and news windows, which would display all the clickable usernames.

'Favorited users' button brings up list of favorited users

List of favorited users; clicking brings up the user popup
When creating the button on the menu, I found unused style data for another button, so I decided to copy it to save myself from having to style the button. With the button added, I needed to figure out how the pm and news windows were created in order to use the logic for my favorited users window. After some struggle, I got my window's HTML to append properly and got all the data to display properly.

Displaying the window
In order to have the list update itself whenever the data changed, I had to find a way to access the refreshFavUsers() function from the user popup, but I had a hard time figuring out which functions could and couldn't be accessed externally in this layout. Eventually, I figured out that I had to move the refreshFavUsers() function outside of the main menu button functions, allowing it to be called with MainMenuRoom.refreshFavUsers(). With the list updating automatically, I had finished my feature and I created a pull request for it.

The refresh function clears the displayed data and inserts the modified data

Community Interaction

As I created the pull request very last minute, it hasn't been seen by the owners of the repo yet. However, in the process of trying to find a good issue to work on, I found and filed a bug involving the desktop client crashing when a panel was hidden.

Final Thoughts

While the last few weeks of this course were stressful, with the open ended nature making it difficult to decide what to work on, I found this course very interesting. It was a lot easier to get involved in projects that interested me than I thought, even if some of the owners were more difficult to work with than others. It also made me realize that open source software is a much bigger industry than I had initially thought, with me finding a lot of software I never thought was open source on GitHub. As an extension to this, coming up with an idea for an improvement to a piece of software you use, then creating it and having it get implemented feels great.

On a more technical level, I learned a lot about using Git for source control and versioning: something I think will come in handy in the future, whether for work or personal projects. Finally, and I feel most importantly, it exposed me to many different programming styles and showed me solutions to problems that I've carried over to my own projects. A lot of the time, its difficult to envision the possibilities without being exposed to some of it, and I after having worked on projects with much better programmer than myself I feel like I've gotten new ideas and a new perspective on how and what I can code.


Popular posts from this blog

The Real Time Voice Cloning Toolbox

Preparing For Hacktoberfest

The Whiteboard Note Taking App