FPL Plus 0.3.0 - Transfers in/out, total expected points and more

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

I've been quite busy over the last few days trying to improve the extension's performance while also adding new features. In this post I'll show you guys some GIFs that show its improved performance and also show off the added new features, which I'm sure will be pretty useful for people who spend a lot of time planning their transfers.

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

Improved performance

Before	After

I noticed that the performance when loading each player's fixtures and expected points wasn't that great. This was because each time a change occurred it had to fetch the players, get their fixtures and then add those elements. Even if this was happening asynchronously, it was still not fast enough.

I spent a while trying to figure this out (you might have seen me asking for help in #web-developers on Discord). First of all I started by adding a background script, which would fetch the players, teams and whatnot when the extension is installed. It would then save these to the extension's storage so it could be used later. Unfortunately this still wasn't fast enough, as fetching the players and teams from the storage apparently is pretty slow.

The next thing I did was, instead of getting a player's fixtures I could simply create a Map containing each team's name and short name as the keys and their fixtures as the values and use that instead. Even if this was slightly faster, it still wasn't fast enough, but it was a start.

In the end the solution turned out to be very simple... embarrassingly so. Simply adding the following code to the top of the content script allowed the fixtures and expected points to be loaded seamlessly after initially visiting the page

^{The simple solution}

Thankfully the implementation of the background script and the storage still comes in handy, as it is now used as a back up in case the above code fails, which sometimes was happening. There is probably a much better way of doing this, but I am just glad it works!

Total expected points

/team/my	/transfers

In version 0.1.0 I added the expected points of each player to their respective element. With version 0.3.0 I have implemented a slight improvement! There is now a header that shows

• The total expected points for your starting players on /team/my
• The total expected points for your entire team on /transfers

I tried to keep it so that it blends in with the rest of the page and doesn't look out of place. It should be useful for quickly seeing how much points you are expected to score in total for the upcoming gameweek. From what I can tell it's very optimistic, so don't put too much weight on it, haha.

Adding fixtures and expected points to /transfers

Before	After

The extension already had fixtures and expected points on the /team/my page, which isn't too dissimilar from the /transfers page. This meant that it wasn't that difficult to add the fixtures and expected points to the main team on /transfers, since I just had to add a boolean indicating whether or not we were on the /transfers page, as seen below:

^{Example of using the transfers boolean}

I also realised that some performance was being lost by iterating over all players and all elements when that wasn't needed, so I refactored parts of the code to improve that as well.

Before	After

However, on the transfers page's sidebar you can also see other players that you might want to transfer in. It's obviously pretty important to know what a player's upcoming fixtures are, since you won't want to transfer someone in who is facing 3 teams in the top 5 in their next 5 fixtures for example. To help with this I also added the fixtures of the players in the sidebar, as seen in the image above.

Transfers in/out

If you have a sharp eye you might've seen a new icon on each player's element. One of the most important things when playing FPL is keeping track of a player's price and how it changes. This is dependent on the number of transfers in (player is in demand, price will rise) or out (player is not in demand, price will fall). To help with this I decided to add a small icon that shows whether or not the player is being transferred in/out a lot. I split it up like this

• Player's ownership has increased by > 7.5% = green double arrow up, otherwise green arrow up
• Player's ownership has decreased by > 7.5% = red double arrow down, otherwise red arrow down

which results in the following:

^{Transfers in and out}

As you can see the player on the left has been transferred in 35333 times and so has a green arrow pointing up, whereas the player on the right has been transferred out 167313 times, resulting in a red double arrow pointing down. I think it's pretty great! I do need to think of a way to make the arrows stand out more (especially the green one), but increasing the font weight didn't really help with that, so I'm not sure how to.

What's next?

I want to improve the transfers page so you can filter players by any range and also by expected points. To do this I need to figure out how to use the website's JavaScript (if that is even possible), so it will probably require quite a lot of research since I know nothing about it. Maybe, and hopefully, this will be done by the time the international break is over!

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.