FPL Plus 0.6.0 - Complete popup revamp!

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

Before posting the last update I wasn't completely happy with the popup I had just implemented. Because of this I randomly decided to ask @tobias-g for help with the popup's design. Thankfully the design God himself gracefully agreed to help me out and made a complete design specification (with AdobeXD) for the popup! I've spent the entirety of last week making this popup into a reality, and I'm very happy to finally share it.

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

• Update popup style (thanks @tobias-g1!)
• Add features popup page
• Update login, overview, team and points popup pages
• Add league overview popup page
• Add popup header menu with logout and refresh data functionality
• A new logo!

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

A new logo

Thanks to @podanrj FPL Plus now has a new logo! If you install FPL Plus you will now see this logo in your browser instead of my own shitty one, yay!

I'll switch it to the one where the lion's face is green and the outside is purple in the future, since I think I prefer that one over the one that is currently uploaded to the project.

Login

The login page's functionality has stayed the same as you can see. Currently the user can still only login using their user ID, but this will be changed to their actual FPL email address and password in the future.

Main overview

Probably the biggest change design-wise. The top part includes the user's name, their team name and statistics related to the current gameweek. It also now includes the deadline for the next gameweek, which is sometimes easy to forget and can easily catch you off guard (like me last week). It also still includes two buttons to the previously implemented team and points pages, which will be shown next. Finally, the bottom part contains statistics for the current season and a link to the league overview, which is a completely new page.

Team & points

Similar to the login page, the functionality has stayed the same, but both pages have also had a face-lift. I've made some minor underlying improvements to the HTML (obviously), so I'm happy with how it turned out.

League overview

A brand new page showing each league the user is currently participating in. I'm actually really proud of this page, as it works exactly as I'd envisioned it to work, which isn't normally the case. The private classic league table is expanded by default, as that normally contains the leagues a user is most interested in (at least that's the case for me). If a user isn't participating in a private H2H league for example, then the dropdown can't be expanded (maybe it won't be rendered at all in the future). If it does exist however, then clicking on one league section will expand its league table and close the currently open one, which makes sure that the user will never have to scroll in the popup.

The last bit I mentioned is done on purpose. I really wanted to make sure all information that is needed is always available to the user. Because of this I decided to only show 5 leagues per table, with dynamic pagination. This took the longest to implement, by far. Thankfully I found this answer about how to show the ... when there's a certain number of pages. The rest of the code was all made iteratively, and because of this I think it probably could be improved, but as I mentioned before; it works exactly as expected, so I'm really happy about that.

Header menu

The header now includes a menu that can be opened that has a number of options. Some of them haven't been implemented yet (statistics, feature overview and fixtures), while some of them have (refresh data and logging out).

Because one of my goals was to prevent the user from having to scroll in the popup some options had to be hidden here. Previously the user couldn't log out, so that has been added here. It's very simple, it just removes the user's data from localStorage and redirects the user to the login page.

Furthermore, as I mentioned in the previous update, sometimes certain data wasn't being updated correctly. This has probably been resolved with the addition of alarms that update the data every 30 minutes, but just in case this isn't happening correctly, the user now has an option to manually refresh it.

Switching pages

In the last update I also mentioned I didn't think the way of "switching" between pages (hiding the <div> of pages the user currently isn't on) wasn't the best. When looking for a solution I found out you could do the following

function toX() {
  chrome.browserAction.setPopup({ popup: 'x.html' });
  window.location.href = 'x.html';
}

So after separating all pages to their own HTML and JavaScript files I started using this as a way to navigate between pages. Unfortunately I found out towards the end of finishing this update that there isn't really a way to prevent the popup from "flickering" when using this method (it basically reloads the popup every time you visit a new page). So I had to rework the entire thing again... I had the following options:

1. Go back to hiding all <div>s the user is currently not on
2. Use an <iframe>
3. Use a JavaScript framework with routing

I was really hesitant to go back to option 1, and option 3 seemed like too much work, so I decided to try out option 2. Unfortunately after trying <iframe>s out for a while it didn't really seem to work properly, so I eventually decided to revert back to option 1, but do it properly this time. This also took a long while to refactor, but thankfully I'm also really happy with how it works. I created one helper function for hiding all <div>s, which can be used everywhere, which still allows me to separate the JavaScript of each "page".

The only problem that remained was remembering where the user was before they closed the popup, so once they open it again, it takes them back to where they were. When using the chrome.browserAction.setPopup function this was all done for me, so now I had to implement it myself. I decided to simply store the most recent page in the extension's localStorage. This way I could also keep track if the extension was newly installed (should show them the features page) and if they are simply logged out (show them the login page, not the previously visited one).

In the end it's pretty simple, but it works exactly how I want it to (I've been saying this a lot, haha). I'm very happy with how this update turned out, and I hope the same will be true for future updates!

What's next?

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.

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.