Objectives
- Use Firebase Authentication to authenticate users of a web app
- Use Firebase Firestore to store data of a web app
- Apply basic data operations to a cloud database
- Explore new feature VueJS 3.x features: lifecycle functions, watchers
- Apply (page) routing in a web app
- Incorporate third-party libraries into a web app
WARNING
If your Wordle implementation in the previous homework did not use VueJS 3.x setup script, you have to convert it first.
Overview
In this assignment you will enhance your implementation of the Wordle game with the following features:
Allow the user to login using email/password
When an authenticated user plays the game, the statistics will be recorded on a cloud database. Information collected from each round should include (at least):
The secret word
The words used by the user in their attempts to find the secret word
If the player won/lost the game
The total time (in seconds) for the user to win (or lose) the game
The date/time of the player starts the game
WARNING
In a typical webapp, storing date/time data using local time creates ambiguity for users in different time zone. Hence, saving the date/time on the cloud database in UTC format is necessary. However, on the page the date/time should be displayed as local time.
There are many libraries for date/time manipulations:
DayJS,Luxon,Date-Fns, and many others. Look for a date/time library that supports the ISO8601 format so it can handle timezones correctly.
When an authenticated user is playing the game, the main page should should show the user name (or email address)
Part A: Update The Main Page
The landing page of your app should be the same page that shows the game board (as in the previous assignment). To enable users manage/use their accounts (Sign In/Up/Out), you should add a Login button (for users who already have accounts) and a Signup button (for users who need to create accounts).
- Clicking the Login button should prompt the user for email and password. Once authenticated, the main page should also show the user identification and an icon that will let the users see their past game statistics
- Clicking the Signup button should prompt the user for email and password which will be used to create a new account.
All screen transitions among these pages (Login, Account Signup, Game Play, Game Statistics) shall be managed using Vue router (v4.x).
Part B: Store Game Statistics in Firestore
To isolate game statistics of one user from the others, the game statistics of each user should be saved in a Firebase document using the user ID as the document ID.
TIP
- After authentication by Firebase, you can obtain the unique UID associated with each user. Using the user UID as the document ID in your Firestore collection will guarantee that personalized user data will not interfere which each other. The game statistics of each individual user can then be saved as a (sub)collection under each user document.
- Be sure to test your implementation by using at least two different login accounts.
Other than this, you may design the (internal) structure of your Firestore documents as you see fit.
Part C: Display Game Statistics
Use a separate Vue component to show past game statistics (retrieved from Firestore) in a table format. Add at least two few basic sorting features for displaying the game statistics:
- Sort by date/time (most recent first)
- Sort by game duration
- Sort by the number of attempts to guess the secret word
Assuming the data source of your table is an array, sorting the array itself will automatically trigger VueJS to refresh the table.
Extra Credits
Several options for extra credits:
- (5 pts) In the game page statistics, show a histogram of the number of attempts. Look for third party libraries to show 2D charts
- (3 pts) Add additional login provider (Google or GitHub) to let the user login to your game in additional to email/password combo
Grading Rubrics
| Grading Item | Point |
|---|---|
| Login screen & logic authentication | 4 |
| Signup screen & creating new accounts | 4 |
| Account management using Firebase Authentication | 3 |
| Isolate individual user data in Firestore by userid | 3 |
| Manage game statistics of each user as a subcollection | 3 |
| Save/Load game statistics into/from Firestore | 3 |
| Show game statistics in a table format | 6 |
| Sort game statistics data | 4 |