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.

Comments

Post a Comment

Popular posts from this blog

External Pull Request and Creating a Spam Checker for Telescope

Image
This week I was working on two projects: fixing an error with Pokemon Showdown's downloaded match replays, and creating a spam checker for Telescope Pokemon Showdown Client The Issue   Resume button appears under Play button on launch The external issue I worked on was preventing the Resume button from appearing behind the Play button when viewing a downloaded replay from Pokemon Showdown: something I thought would be more complex than it ended up being, having worked with Pokemon Showdown before. The Fix After finding the class I had to work on, replay-embed.js,  I had to figure out how downloaded replays worked with replay-embed. While waiting for a response from Zarel, I tried generating a replay using my cloned version for Pokemon Showdown Client to no avail. Eventually, I learned from Zarel that the replay file has to be edited so that the script source points to my version of replay-embed. I changed the path to the filepath to my copy of replay-embed, but th...
Read more

Setting Up for Second External Pull Request and Contribution to Telescope

Image
Our assignment for this week is the same as the assignment we had last week; to make a large contribution to one external project and to make a contribution to Telescope; our internal project. While I am still trying to decide on what issues I will tackle, I worked on a small fix for my contribution to Telescope from last week: spam-checker.js . The Issue In my last contribution, I created a spam checker that determined whether or no a post was spam using a combination of rules and a spam filter function. In my function, the blog post's body content was parsed before any of the checks were run, but if the blog's title was empty or marked as spam the body contents didn't need to be checked. A classmate suggested that I move the blog body parsing to after the title checks to save on resources if title checks failed and the body didn't need to be loaded. The original order of checks, body is parsed before any checks are run The Fix After moving the content par...
Read more

Second Contribution of Hacktoberfest

Image
For the second week of Hacktoberfest, I contributed to Fast Read , a React App created by Hamzaolak. The Fast Read Application The Issue   As I was having issues with the other projects I was planning to work on, I settled on another simple fix; changing the names of the custom colors defined in the code. The Fix After finding the color definitions, all I had to do was change the names in the definitions, as well as in the files that use those colors. The color names being in the issue description was helpful, especially with them being in the same order as the original colors. Creating the Pull Request After confirming that everything works as intended, I switched the origin remote to my forked version of the repo. Then I created a new branch and pushed my commit to it. Finally, I created a pull request to merge my code into the original project. Issues and Lessons Learned While searching for projects to contribute to for this week, I noticed ...
Read more