FPL Plus 0.7.0 - Popup league tables!

^{https://github.com/amosbastian/fpl-plus}

As I mentioned in FPL Plus' last update I wanted to start adding the individual league table pages next. The biggest reason for this being that the code I've used to implement the league tables overview would be similar, so it would be better to implement the individual league table pages while it was still fresh in my mind. I also want to get as much done as possible before I go back to England to visit my family for Christmas, so I've been hard at work!

https://github.com/amosbastian/fpl-plus/releases/tag/v0.7.0

• Add individual league tables to popup (shows top 50)
• Add phase selection to individual league tables

https://github.com/amosbastian/fpl-plus/pull/7

League table

^{League table}

Clicking on one of the leagues in the league tables overview will now take you to the individual league table! It currently shows the top 50 managers of the league (and the logged in user). Of course it includes some basic information like their current rank, an indicator showing whether or not their rank changed (up, down or stayed the same), the manager's team name and username, their points in the most recent gameweek of the selected phase, and finally their total points up until the selected phase.

One of the biggest problems was definitely making sure that league tables are reloaded or changed when clicking on a league. My solution for this was once again using a MutationObserver. Basically it monitors the <div> where I show the league table for mutations. Once there is a mutation, it checks if the mutation was a change of style from display: none; to display: grid; (since that is what I use to show/hide pages). If this is the case, then it reloads the league table! Pretty simple, but very effective.

MutationObserver for league tables

The pagination used is similar to the one used in the leagues overview, but was thankfully much easier to implement. The biggest reason for this was that instead of there being multiple pagination elements, now I only needed to take one into account. Also, if you (the logged in user) aren't in the top 50 of the league, then your entry will be shown as the last element of the league table, so you can easily see how you compare to the best users of the league!

Phase selection

^{Phase selection}

I've also added phase selection, so you can see who performed the best in e.g. the month of December! To implement this I had to adapt some of my previously implemented code to make it more dynamic (as seen below)

^{Adapted function for retrieving a classic league table}

and of course implement some new functions. Since I'm still very new to JavaScript I am learning new things every day. One of the things I learned recently is to add event listeners to a parent element (e.g. select element) and then catch the events that bubble from the child elements (e.g. the select element's options). Using this I could easily use the element's value to get the phase, and then use that to retrieve the current league standings and update the league table. I'm very glad with how this works, but it's probably something that is very commonplace for experienced developers, haha.

^{Code used to update the league table when selecting a new phase}

What's next?

Implementing the remaining pages of the popup. I think I'll start adding the individual league table pages next, since I spent a lot of time working on the league overview, so I want to start on this while it's still fresh in my mind.

Usage & installation

FPL Plus is currently not available on the Chrome store, so you must install it locally and then unpack the extension manually, or download the release from here.

1. Clone the repository
2. Install Node.js
3. Run npm install to install dependencies
4. Run npm run build to watch code changes and build the unpacked extension
5. Navigate to chrome://extensions/, activate developer mode, click "load unpacked" and select the build/ folder

Once I have added a couple more features I will try and add compatibility with other browsers like Firefox and add it to their respective stores for easy installation. I have no idea how difficult that is, but time will tell.

Contributing

Looking at the number of people participating in the Steem Fantasy Premier League I am sure there are quite a few JavaScript developers on here that play FPL, so if you want to help then you can contact me either on Discord (Amos#4622), GitHub or here.