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
|
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.
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.
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.
Comments
Post a Comment