FPL Plus 0.5.0 - Live points, working popup and more!

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

I've been busy (and slacking) a lot lately, so I haven't been able to work on FPL Plus consistently. Because of this it has nearly been two weeks since the last update, which is quite bad to be honest. Over the next few weeks I'll try and improve this and release updates more frequently, as Christmas is coming and I'll definitely be too busy then!

In this update I've improved the classic league table, implemented a usable popup and added an "alarm" which will update player, team and user data every 30 minutes to make sure it's not outdated.

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

• Add live points and players played to classic league table
• Implement popup with login functionality using user ID
• Add index popup page
• Add myTeam popup page
• Add points popup page
• Implement alarm for updating team, player and user data

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

Live points & players played

^{As you can see only 10 of my 11 starting players played :(}

When checking out a league's table some things might be a bit misleading. First of all, it only shows an updated version of the player's gameweek points once the day is over and they have finished updating everything. Because of this it might seem that you are having a great week compared to your rivals, but in reality they might have more points than you (you won't know without visiting their team page)! To remedy this I've added a column showing each player's live points. The difference between the live points and the gameweek points is also added to the player's total points, so you can easily compare between players.

Another thing that can be misleading is that the table doesn't show how many of the player's team has actually played a game yet. For example, you might be even on points with the player below you, but still have 5 players left who still have a game to play, while he has 1. Seeing this you can rest easy that you probably won't be overtaken just yet!

The popup

Sometimes it might be a hassle to visit the website, so I've implemented a popup that you can access from every page, that will show you some information you might be interested in! To see this information you must first "log in" with your user ID, which can be found on the points page on the main website, for example: "fantasy.premierleague.com/a/team/3808385/event/15".

^{Logging in}

Once logged in you you can see your overall rank, overall points, gameweek rank and gameweek points. There are also two buttons that will take you to a page showing your team and your picks for the gameweek respectively. Of course there is also a "log out" button that will take you back to the login page, where you can simply enter someone else's user ID to check out their team.

^{Checking my team and points}

I didn't really know how to implement multiple pages in the popup, so I looked at the source code of Steem Keychain and tried implementing it in a similar way. Although thinking about it I don't really think that the way they do it is the correct way, and it's pretty annoying having to hide certain elements when "switching" pages. I'm sure there must be a better way and I'll look into that for the next version!

I'm also pretty bad at UX / design as you may have noticed... If anyone can help me out with this that would be highly appreciated! I might make a task request for this, or just try and copy the mobile version of the official site with some tweaks (or something like that).

Updating data

In one of the previous versions I mentioned that the extension tries to retrieve live data, but if fetching it fails, it falls back to data saved in Chrome's localStorage. Since I've been using the extension a lot myself, I noticed that sometimes it was showing outdated data. This is caused by the fact that the data was only initialised on install.

To prevent data from being outdated I did some research and found out that there is a chrome.alarms API with which you can schedule certain events. I've used this to schedule an update every 30 minutes, which updates:

• all players
• all teams
• the teamToFixture object
• the user's data (if logged in)

It was thankfully very simple to implement, as you can see by the code snippet below!

What's next?

Improving the popup! As I mentioned, I want to find out if there is a better way of switching between pages. I also want to implement login using an email address and password (I've managed to do this for my Python package), but I'm not exactly sure how to do this. Also improving the look and feel of the popup will be pretty important, but I probably also need some help with this (@tobias-g please?!).

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.