Week 3 of Hacktoberfest

For the third week of Hacktoberfest, I submitted my own issue for the Pokemon Showdown Client, the client for Pokemon Showdown, a competitive Pokemon battling simulator. I then worked on and created a pull request for that issue.

Pokemon Showdown's main menu

The Issue

While searching for a good project to contribute to, I was playing matches against a friend in Pokemon Showdown. After each match, I had to search for his username in order to rematch which I thought was inconvenient. I later learned that clicking on usernames outside the private message window's header lets you challenge a player more quickly, as well as that selecting rematch after a match still allows you to modify your team before entering a match. However, I still thought it was odd that you couldn't challenge someone from the private message window.

No option to challenge without messages in the private message window
After looking over the source code, I determined that implementing this feature was probably within the scope of my skills and submitted an issue.

The Fix

Initially, I checked Pokemon Showdown's server repo but realized the repo I should be working on was the client repo. After forking the client repo, I built and opened the html file, then used Firefox's Inspector tool to find the class associated with the private message window.

Private Message widow is div with class pm-window, buttons and username are in h3 tag
After finding where the html for private message windows was being generated, I placed the username in a span tag with the class header-username. I then created a click event for the span, and gave it the same function as clicking usernames in messages. With the event made, clicking the username in the header brings up the Challenge popup.

Placing the username in a span, click event was declared at top of file

Challenge popup appears when username is clicked
Once I confirmed that the new feature was working, I started work on the css. I wanted to have the username change to a darker color when the user hovers their cursor over it. While I did get this to work, I ran into trouble getting the minimize button to un-highlight when the username is hovered, as the minimize button is highlighted whenever anything in the header besides the close button is hovered.
Hovering the username highlight it, but doesn't un-highlight the minimize button
I tried numerous solutions, but could not get the header bar to work properly. I decided to push what I had working and create a pull request asking if anyone had any suggestions.

Community Interactions and Next Steps

After I created the pull request, the owner of the repo, Zarel, suggested that I add a challenge button in the header of the private message window instead of having a popup appear when clicking the username. He also informed me of easier ways to re-challenge a player without having to search for them by name again, but agreed that there should be a Challenge button in the private message window.

For now the fix is a work in progress. Over the course of the next 2 weeks, I intend to keep working on this fix, changing it from a popup window to a button as per Zarel's suggestion.

Issues and Lessons

While working on this feature, I learned how to use Firefox's inspector tool to make it easier to find elements in the source code. I also relearned web design concepts that I had forgotten, like calling functions with events and css events. On a less technical level, I learned that working on products that I'm personally invested in is more interesting than working with projects I'm not as invested in, and that if I encounter something that I feel could be improved while using software, it's worthwhile to check if that project is open source.


Popular posts from this blog

The Real Time Voice Cloning Toolbox

Preparing For Hacktoberfest

The Whiteboard Note Taking App