XP and Class Leaderboard

Overview

Experience levels displayed in player info card, and a toggleable class leaderboard showing the top 3 students in the class by experience

Display the student's experience level as an MUI progress bar in the player info card, along with a numerical fraction. This fraction (and the fraction of the progress bar) should represent the amount of XP acquired for the next level out of the total amount of XP required for the next level. (So not total XP)
Backend
Add an xp field to the player document in the database and update the Player object typing in types.ts
Player xp field should be set to 0 by default when the player is initially created. You'll want to modify the existing joinClassroom mutation.
Player level should just be calculated from xp using some function that you can store in utils
Go through existing mutations for money. Whenever money is incremented

In class page, make a leaderboard section that displays the top 3 players and their level
- Rank the top 3 students by total XP but do not display their total XP
In teacher settings page, add a toggle to turn the leaderboard on/off.
- If you want, you can also let the teacher specify how many students to show on the leaderboard (try select between 3 and 5 for now).
  Backend
Leaderboard toggle should toggle a doLeaderboard boolean field in the classroom's document
If you want, the number of students to show on the leaderboard can be kept as a leaderboardSize field in the classroom document.
Both of these fields should be added as defaults when a new classroom is created in the createClassroom mutation (doLeaderboard is true by default and leaderboardSize is 3 by default)
In order to display the leaderboard, you should subscribe to the doLeaderboard and leaderboardSize fields in the classroom document. The state variables that you use to track these two variables should be null at first, and you should conditionally display the leaderboard only when both exist.