amatthews91 / world-cup-sweepstake

Application to track the results of Scott Logic Newcastle's 2018 World Cup Sweepstake

Table of Contents

• Table of Contents
• What is this?
• Technical Specifications
• Running Locally
  • Setting up the code
  • Data Storage
    • Players
    • Last API Lookup

What is this?

This is a sweepstake competition which will run alongside the 2020 Euros, but with a twist: Players will be drawn 5 teams from a hat, the first 2 teams will be the "goal" teams, the subsequent 3 teams will be the "outcome" teams. The team names will then be returned to the hat for the next player. They will also be asked to predict the total goals that will be scored over the competition.

During the competition points are rewarded as follows:

• 1 Point for every goal scored by a "goal" team.
• 3 Points for every win achieved by an "outcome" team.
• 1 Point for every draw achieved by an "outcome" team.

At the end of the competition the player with the most points will claim the top prize. In the even of a tie, it will come down to whichever player guessed closest to the correct number of goals (under or over).

During the competition this application will display the teams picked by each player, along with the total goals they predicted and their current points tally. It will also display the total goals, wins and draws for each team along with the actual current total goals.

Technical Specifications

The app is fairly barebones as it was thrown together quite quickly to be ready in time for the cup, and then once again to be ready for the Euros on a new platform.

The UI is a standard React (no Redux or other addons/middleware) app. It is served by an express app running as a cloud function on Google Firebase backed by Firestore.

The data is served by: http://api.football-data.org/ which will be updated during the competition.

Running Locally

Setting up the code

1. Clone this repository.
2. Run npm install in the root.
3. Install the firebase cli with npm install -g firebase-tools enabling global use of the firebase command.
4. Grab your API key from football-data.org. Run firebase functions:config:set footballapi.key="THE API KEY"
5. Run npm run serve to run the firebase emulators for hosting, firestore and functions.
   1. Functions will live reload but hosting will require npm run build to be run from /hosting to update.
6. Run local:addplayers to add some example players for the application.

Data Storage

The database is driven by Google Firestore. and the structure is as follows:

|
+-- competition
|   +-- fixtures
|   +-- teams
|   +-- lastApiLookup
+-- players

Collection.document	Usage
competition.fixtures	Data of all fixtures past and present for the tournament
competition.teams	Data of all the teams in the tournament and whether they are eliminated
competition.lastApiLookup	The last time fixture data was pulled from the API in ISO 8601
players	Data of all the players in the sweepstake.

Players

The players documents are in the format:

{
  name: "Player name",
  goalsPredicted: 60,
  teams: {
    goals: [country1, country2],
    outcomes: [country3, country4, country5]
  }
}

Last API Lookup

The last-api-lookup document is in the form

{ lookupTime: "2014-09-08T08:02:17-05:00" }

world-cup-sweepstake's Issues

Fix MongoDB deprecation warnings.

A few things have changed in the last 2 years, mainly just the methods used to read/write.

• current Server Discovery and Monitoring engine is deprecated, and will be removed in a future version. To use the new Server Discover and Monitoring engine, pass option { useUnifiedTopology: true } to the MongoClient constructor.
• (node:7112) DeprecationWarning: collection.remove is deprecated. Use deleteOne, deleteMany, or bulkWrite instead.
• (node:7112) DeprecationWarning: collection.insert is deprecated. Use insertOne, insertMany or bulkWrite instead.

UI Error handling.

Currently the UI just displays nothing when there are service errors, handle them more appropriately.

Re-draw teams after the group stage.

Experiment with what would happen if players were given fresh teams after the group stage ended. How would we display this information on the UI? Would we use the same number of teams in the second round of drawing? Would we do another re-draw later in the knockouts?

Move database operations to web server.

This also means properly securing the database so it cannot be accessed from the webapp AND should require a logged in user (doesn't need to be permissioned for now, just logged in through Google)

Automated sign-up

Allow users who have logged in with their Scott Logic Google account to sign up for the sweepstake.

This means:

• This is dependent on #21 being complete.

• Users will see their five randomized teams and will be offered a mulligan.

• A mulligan means they will see 5 more teams but will have to pick the second option.

• Alternative to above, generate two options from the start and allow the user to pick one.

• These generated teams must be stored against the user so that they can return and finish this process if they leave during signup but are NOT shown a new set of teams so they cannot keep refreshing to get a better set.

• Upon confirmation they are persisted as a player with their teams set and can be seen in the leaderboard.

Use seeding when drawing teams.

Experiment using a seeding system when drawing teams for players. Example system could be the same seeding used by the organising body to draw teams for the group stages.

Display losses on the competition table.

Properly handle errors when talking to the API.

Currently this seems to just make requests hang and perpetually load as there's no proper error handling, this will be worse in the future if Node is updated past this warning's deprecation:

(node:13948) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was 
not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
(node:13948) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Investigate new API

v2 of the football data API was released during the last tournament, check the following:

• What is new?
• Does v1 still exist?

Add authentication.

Add support for Google SSO (only google) and store a record of emails that have logged in at least one time in the DB.

Deploy app as-is to Firebase.

This means porting everything and moving database solution to Firestore.

Grey out teams on the competition table who have been eliminated.

Rather than writing some algorithm to do this it's probably just going to be quicker/easier to add the field and update the DB manually - teams are never reloaded from the API after the initial load anyway.

Refactor UI to use newer React features.

The main change will be to refactor components into functional components and make use of hooks.

Automated onboarding

This time would be nice to let the app pick users' teams for them.

Options:

• Endpoint to add a user.
• Locally running app where users can come and see their teams being chosen
• • Potentially a single re-roll.
• Hosted APP with some sort of authentication so they cannot enter twice, perhaps using their SL email? How can we make sure nobody uses someone else's email? GAuth?