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!
- Add individual league tables to popup (shows top 50)
- Add phase selection to individual league tables
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.
MutationObserverfor 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!
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
Code used to update the league table when selecting a new phase
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.
- Clone the repository
- Install Node.js
npm installto install dependencies
npm run buildto watch code changes and build the unpacked extension
- Navigate to chrome://extensions/, activate developer mode, click "load unpacked" and select the
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.