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

in fpl-plus •  4 days ago


fpl050.png
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.

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  
  • Good post, with animated gifs, code and explanations.
  • Great feature this chrome.alarm.
  • Good idea to reach out to the other Fantasy League communities.

Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.


Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]

·

Thank you for your review, @helo! Keep up the good work!

Happy to help with the pop up and the UX where I can :)

I have installed it and going to have a play to get a feel for the features, i'll give you a message on Discord tomorrow :). I've seriously neglected my team this season, so might be a good time to have a go.

One of the dependencies returns a 404 btw, "har-validator": "5.1.2" I switched it to 5.1.3 and works fine.

·

That's really great! Whenever I was trying to think about people on here with good design skills and my mind defaulted to you, haha.

I'm been doing pretty well recently. About 2 points off 1st place in the Steem Fantasy League, but who knows what will happen over Christmas since it's always hectic.

Didn't have any problems with the dependencies myself, so that's weird. Thanks for letting me know, though!

Hi, @amosbastian!

You just got a 0.15% upvote from SteemPlus!
To get higher upvotes, earn more SteemPlus Points (SPP). On your Steemit wallet, check your SPP balance and click on "How to earn SPP?" to find out all the ways to earn.
If you're not using SteemPlus yet, please check our last posts in here to see the many ways in which SteemPlus can improve your Steem experience on Steemit and Busy.

Congratulations! Your post has been selected as a daily Steemit truffle! It is listed on rank 1 of all contributions awarded today. You can find the TOP DAILY TRUFFLE PICKS HERE.

I upvoted your contribution because to my mind your post is at least 11 SBD worth and should receive 122 votes. It's now up to the lovely Steemit community to make this come true.

I am TrufflePig, an Artificial Intelligence Bot that helps minnows and content curators using Machine Learning. If you are curious how I select content, you can find an explanation here!

Have a nice day and sincerely yours,
trufflepig
TrufflePig

Hey, @amosbastian!

Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!

Get higher incentives and support Utopian.io!
Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!