FPL Plus 0.2.0 - Improved classic league tables

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

A couple of days ago I posted about the new Chrome extension FPL Plus that I've been creating. Since then I have gotten sick, fixed a bug and added a new feature!

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

New feature

All players of the Fantasy Premier League compete in global leagues, while some also compete in public and private leagues made by other players. This is a huge part of what makes the game so fun, as you'll more than likely be competing against friends or family to see who has the best team (or of course leagues like the Steem Fantasy Premier League).

^{Default league table}

When clicking on a league on the Fantasy Premier League website you are greeted with a very simple table, showing only each manager's position in the league's table, their score in the current game week and their total score. Obviously this doesn't contain much useful information, as you more than likely want to know who your rivals have captained (and vice-captained), if they have activated a chip this week and what chips they have already used.

Some of this information, like who they have captained, is available when you go to their team, while other information, like which chips they have already used isn't. It's also not very user friendly to have to go to each player's team page to see who they captained for example. To remedy this I've added a new feature to FPL Plus which shows each manager's captain, active chip etc. and a button which actually shows their current team.

^{League table when using FPL Plus}

With the "Show team" button showing each player's team, I think there isn't actually a reason to visit anyone else's team page.

^{Showing team without leaving league table}

How did I implement it?

When a user goes to a URL that matches a classic league's URL pattern, then it loads all managers (or those on the current page) in the league. It then fetches each manager's picks (contains their current team) and their history (contains their chip usage) and sets these both as a property of the already fetched managers.

Once it has all the information needed then it simply builds the table. Every column is added in its shown order, so first the overall rank and finally the used chips.

One of the problems I encountered was that for leagues that have more than ~25 managers per page the API will apparently hit a rate limit (there isn't any documentation for the API, so I have no idea what the limit actually is). To solve this I use the async-retry package, which automatically retries when a fetch fails. Currently it will take a little while for the entire table to load if there are a lot of managers, so I'll probably end up adding a loading circle in the future and think of ways to improve its speed, since I am obviously not doing everything perfectly.

Another thing I was struggling with was the fact that the website is a SPA, which means when going to a different page, e.g. the "My Team" page, the subsequent navigation doesn't load the page from the server entirely, but instead it fetches the data, changes portions of the page and alters the displayed URL. I was originally planning on separating each content script and having them in their own file, but in the end I had to put everything in contentScript.js and check document.URL each time - if anyone knows a better solution for this, then please let me know!

Fixing some stuff

Before	After

I somehow missed this for the previous version, but when swapping a starting player with a bench player, the fixtures and expected points would disappear. I've managed to sort of fix it by reloading the fixtures after swapping a player, but it's still not exactly how I want it to be. There must be a way where you don't have to reload the fixtures and expected points after they have initially loaded, but I couldn't figure it out just yet. This will be improved in a future version.

What's next?

I'm not going to optimise or refactor anything yet (I think the loading of the classic leagues could definitely be sped up, and maybe use the background script to preload stuff), so instead I will be working on the transfers page. There are quite a lot of things that can be implemented here that I really want to have available myself, so will definitely be trying to implement them all ASAP.

Usage & installation

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

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.