Merge branch 'master' of https://git.fascinated.cc/Fascinated/scoresaber-reloadedv3

.gitea/workflows/deploy-website.yml

@@ -9,6 +9,7 @@ on:
       - projects/website/**
       - projects/common/**
       - .gitea/workflows/deploy-website.yml
+      - bun.lockb
 
 jobs:
   docker:

README.md

@@ -4,4 +4,4 @@ This is the 3rd re-code of this project. The first one was a mess, the second on
 
 ## meow
 
-meow
+meow

projects/backend/src/bot/bot.ts

@@ -2,14 +2,15 @@ import { Client, MetadataStorage } from "discordx";
 import { ActivityType, EmbedBuilder } from "discord.js";
 import { Config } from "@ssr/common/config";
 
+export const guildId = "1295984874942894100";
 export enum DiscordChannels {
   trackedPlayerLogs = "1295985197262569512",
   numberOneFeed = "1295988063817830430",
   backendLogs = "1296524935237468250",
 }
 
-const DiscordBot = new Client({
-  intents: [],
+const client = new Client({
+  intents: ["Guilds", "GuildMessages"],
   presence: {
     status: "online",
 
@@ -23,15 +24,26 @@ const DiscordBot = new Client({
   },
 });
 
-DiscordBot.once("ready", () => {
+client.once("ready", () => {
   console.log("Discord bot ready!");
 });
 
-export function initDiscordBot() {
+export async function initDiscordBot() {
   console.log("Initializing discord bot...");
 
+  // We will now build our application to load all the commands/events for both bots.
   MetadataStorage.instance.build().then(async () => {
-    await DiscordBot.login(Config.discordBotToken!).then();
+    // Setup slash commands
+    client.once("ready", async () => {
+      await client.initApplicationCommands();
+      console.log(client.applicationCommands);
+    });
+    client.on("interactionCreate", interaction => {
+      client.executeInteraction(interaction);
+    });
+
+    // Login
+    await client.login(Config.discordBotToken!);
   });
 }
 
@@ -42,13 +54,12 @@ export function initDiscordBot() {
  * @param message the message to log
  */
 export async function logToChannel(channelId: DiscordChannels, message: EmbedBuilder) {
-  const channel = await DiscordBot.channels.fetch(channelId);
-  if (channel == undefined) {
-    throw new Error(`Channel "${channelId}" not found`);
+  try {
+    const channel = await client.channels.fetch(channelId);
+    if (channel != undefined && channel.isSendable()) {
+      channel.send({ embeds: [message] });
+    }
+  } catch {
+    /* empty */
   }
-  if (!channel.isSendable()) {
-    throw new Error(`Channel "${channelId}" is not sendable`);
-  }
-
-  channel.send({ embeds: [message] });
 }

projects/backend/src/bot/command/refresh-player-scores-command.ts

@@ -0,0 +1,20 @@
+import { Discord, Guild, Slash } from "discordx";
+import { CommandInteraction } from "discord.js";
+import { PlayerService } from "../../service/player.service";
+import { guildId } from "../bot";
+
+@Discord()
+export class RefreshPlayerScoresCommand {
+  @Guild(guildId)
+  @Slash({
+    description: "Refreshes scores for all tracked players",
+    name: "refresh-player-scores",
+    defaultMemberPermissions: ["Administrator"],
+  })
+  hello(interaction: CommandInteraction) {
+    interaction.reply("Updating player scores...").then(async response => {
+      await PlayerService.refreshPlayerScores();
+      await response.edit("Done!");
+    });
+  }
+}

projects/backend/src/common/cache.util.ts

@@ -1,5 +1,5 @@
 import { SSRCache } from "@ssr/common/cache";
-import { InternalServerError } from "../error/internal-server-error";
+import { InternalServerError } from "@ssr/common/error/internal-server-error";
 import { isProduction } from "@ssr/common/utils/utils";
 
 /**

projects/backend/src/common/embds.ts

@@ -0,0 +1,37 @@
+import ScoreSaberPlayerToken from "@ssr/common/types/token/scoresaber/score-saber-player-token";
+import { DiscordChannels, logToChannel } from "../bot/bot";
+import { EmbedBuilder } from "discord.js";
+import { formatPp } from "@ssr/common/utils/number-utils";
+
+/**
+ * Logs that a new player is being tracked
+ *
+ * @param player the player being tracked
+ */
+export async function logNewTrackedPlayer(player: ScoreSaberPlayerToken) {
+  await logToChannel(
+    DiscordChannels.trackedPlayerLogs,
+    new EmbedBuilder()
+      .setTitle("New Player Tracked")
+      .setDescription(`https://ssr.fascinated.cc/player/${player.id}`)
+      .addFields([
+        {
+          name: "Username",
+          value: player.name,
+          inline: true,
+        },
+        {
+          name: "ID",
+          value: player.id,
+          inline: true,
+        },
+        {
+          name: "PP",
+          value: formatPp(player.pp) + "pp",
+          inline: true,
+        },
+      ])
+      .setThumbnail(player.profilePicture)
+      .setColor("#00ff00")
+  );
+}

projects/backend/src/controller/scores.controller.ts

@@ -1,39 +1,37 @@
 import { Controller, Get } from "elysia-decorators";
 import { t } from "elysia";
 import { Leaderboards } from "@ssr/common/leaderboard";
+import { TopScoresResponse } from "@ssr/common/response/top-scores-response";
 import { ScoreService } from "../service/score.service";
-import { ScoreSortType } from "@ssr/common/sorter/sort-type";
-import { SortDirection } from "@ssr/common/sorter/sort-direction";
+import { Timeframe } from "@ssr/common/timeframe";
 
 @Controller("/scores")
 export default class ScoresController {
-  @Get("/player/:leaderboard/:id/:page/:sort/:direction", {
+  @Get("/player/:leaderboard/:id/:page/:sort", {
     config: {},
     params: t.Object({
       leaderboard: t.String({ required: true }),
       id: t.String({ required: true }),
       page: t.Number({ required: true }),
       sort: t.String({ required: true }),
-      direction: t.String({ required: true }),
     }),
     query: t.Object({
       search: t.Optional(t.String()),
     }),
   })
   public async getScores({
-    params: { leaderboard, id, page, sort, direction },
+    params: { leaderboard, id, page, sort },
     query: { search },
   }: {
     params: {
       leaderboard: Leaderboards;
       id: string;
       page: number;
-      sort: ScoreSortType;
-      direction: SortDirection;
+      sort: string;
     };
     query: { search?: string };
   }): Promise<unknown> {
-    return await ScoreService.getPlayerScores(leaderboard, id, page, sort, direction, search);
+    return await ScoreService.getPlayerScores(leaderboard, id, page, sort, search);
   }
 
   @Get("/leaderboard/:leaderboard/:id/:page", {
@@ -56,4 +54,51 @@ export default class ScoresController {
   }): Promise<unknown> {
     return await ScoreService.getLeaderboardScores(leaderboard, id, page);
   }
+
+  @Get("/history/:playerId/:leaderboardId/:page", {
+    config: {},
+    params: t.Object({
+      playerId: t.String({ required: true }),
+      leaderboardId: t.String({ required: true }),
+      page: t.Number({ required: true }),
+    }),
+  })
+  public async getScoreHistory({
+    params: { playerId, leaderboardId, page },
+  }: {
+    params: {
+      playerId: string;
+      leaderboardId: string;
+      page: number;
+    };
+    query: { search?: string };
+  }): Promise<unknown> {
+    return (await ScoreService.getScoreHistory(playerId, leaderboardId, page)).toJSON();
+  }
+
+  @Get("/top", {
+    config: {},
+    query: t.Object({
+      limit: t.Number({ required: true }),
+      timeframe: t.String({ required: true }),
+    }),
+  })
+  public async getTopScores({
+    query: { limit, timeframe },
+  }: {
+    query: { limit: number; timeframe: Timeframe };
+  }): Promise<TopScoresResponse> {
+    if (limit <= 0) {
+      limit = 1;
+    } else if (limit > 100) {
+      limit = 100;
+    }
+
+    const scores = await ScoreService.getTopScores(limit, timeframe);
+    return {
+      scores,
+      timeframe,
+      limit,
+    };
+  }
 }

projects/backend/src/index.ts

@@ -11,12 +11,10 @@ import mongoose from "mongoose";
 import PlayerController from "./controller/player.controller";
 import { PlayerService } from "./service/player.service";
 import { cron } from "@elysiajs/cron";
-import { scoresaberService } from "@ssr/common/service/impl/scoresaber";
-import { delay, isProduction } from "@ssr/common/utils/utils";
+import { isProduction } from "@ssr/common/utils/utils";
 import ImageController from "./controller/image.controller";
 import { ScoreService } from "./service/score.service";
 import { Config } from "@ssr/common/config";
-import { PlayerDocument, PlayerModel } from "@ssr/common/model/player";
 import ScoresController from "./controller/scores.controller";
 import LeaderboardController from "./controller/leaderboard.controller";
 import { getAppVersion } from "./common/app.util";
@@ -24,7 +22,6 @@ import { connectScoresaberWebsocket } from "@ssr/common/websocket/scoresaber-web
 import { connectBeatLeaderWebsocket } from "@ssr/common/websocket/beatleader-websocket";
 import { DiscordChannels, initDiscordBot, logToChannel } from "./bot/bot";
 import { EmbedBuilder } from "discord.js";
-import { ScoreSort } from "@ssr/common/score/score-sort";
 
 // Load .env file
 dotenv.config({
@@ -67,84 +64,22 @@ export const app = new Elysia();
 app.use(
   cron({
     name: "player-statistics-tracker-cron",
-    pattern: "1 0 * * *", // Every day at 00:01
+    pattern: "0 1 * * *", // Every day at 00:01
     timezone: "Europe/London", // UTC time
+    protect: true,
     run: async () => {
-      const pages = 20; // top 1000 players
-      const cooldown = 60_000 / 250; // 250 requests per minute
-
-      let toTrack: PlayerDocument[] = await PlayerModel.find({});
-      const toRemoveIds: string[] = [];
-
-      // loop through pages to fetch the top players
-      console.log(`Fetching ${pages} pages of players from ScoreSaber...`);
-      for (let i = 0; i < pages; i++) {
-        const pageNumber = i + 1;
-        console.log(`Fetching page ${pageNumber}...`);
-        const page = await scoresaberService.lookupPlayers(pageNumber);
-        if (page === undefined) {
-          console.log(`Failed to fetch players on page ${pageNumber}, skipping page...`);
-          await delay(cooldown);
-          continue;
-        }
-        for (const player of page.players) {
-          const foundPlayer = await PlayerService.getPlayer(player.id, true, player);
-          await PlayerService.trackScoreSaberPlayer(foundPlayer, player);
-          toRemoveIds.push(foundPlayer.id);
-        }
-        await delay(cooldown);
-      }
-      console.log(`Finished tracking player statistics for ${pages} pages, found ${toRemoveIds.length} players.`);
-
-      // remove all players that have been tracked
-      toTrack = toTrack.filter(player => !toRemoveIds.includes(player.id));
-
-      console.log(`Tracking ${toTrack.length} player statistics...`);
-      for (const player of toTrack) {
-        await PlayerService.trackScoreSaberPlayer(player);
-        await delay(cooldown);
-      }
-      console.log("Finished tracking player statistics.");
+      await PlayerService.updatePlayerStatistics();
     },
   })
 );
-
 app.use(
   cron({
-    name: "scores-background-refresh",
-    pattern: "*/1 * * * *",
+    name: "player-scores-tracker-cron",
+    pattern: "0 4 * * *", // Every day at 04:00
+    timezone: "Europe/London", // UTC time
     protect: true,
     run: async () => {
-      console.log(`Refreshing player score data...`);
-      const players = await PlayerModel.find({});
-      console.log(`Found ${players.length} players to refresh.`);
-
-      for (const player of players) {
-        console.log(`Refreshing scores for ${player.id}...`);
-        let page = 1;
-        let hasMorePages = true;
-
-        while (hasMorePages) {
-          const scoresPage = await scoresaberService.lookupPlayerScores({
-            playerId: player.id,
-            page: page,
-            limit: 100,
-            sort: ScoreSort.recent,
-          });
-          if (!scoresPage) {
-            break;
-          }
-          if (scoresPage.metadata.total <= page * 100) {
-            hasMorePages = false;
-          }
-          page++;
-
-          for (const score of scoresPage.playerScores) {
-            await ScoreService.trackScoreSaberScore(score.score, score.leaderboard, player.id);
-          }
-        }
-        console.log(`Finished refreshing scores for ${player.id}, total pages refreshed: ${page - 1}.`);
-      }
+      await PlayerService.refreshPlayerScores();
     },
   })
 );
@@ -228,11 +163,14 @@ app.use(
   })
 );
 
-app.onStart(() => {
+app.onStart(async () => {
   console.log("Listening on port http://localhost:8080");
   if (isProduction()) {
-    initDiscordBot();
+    await initDiscordBot();
   }
 });
 
-app.listen(8080);
+app.listen({
+  port: 8080,
+  idleTimeout: 120, // 2 minutes
+});

projects/backend/src/service/app.service.ts

@@ -3,22 +3,36 @@ import { AppStatistics } from "@ssr/common/types/backend/app-statistics";
 import { ScoreSaberScoreModel } from "@ssr/common/model/score/impl/scoresaber-score";
 import { AdditionalScoreDataModel } from "@ssr/common/model/additional-score-data/additional-score-data";
 import { BeatSaverMapModel } from "@ssr/common/model/beatsaver/map";
+import { ScoreSaberLeaderboardModel } from "@ssr/common/model/leaderboard/impl/scoresaber-leaderboard";
+import { SSRCache } from "@ssr/common/cache";
+
+const statisticsCache = new SSRCache({
+  ttl: 120 * 1000, // 2 minutes
+});
 
 export class AppService {
   /**
    * Gets the app statistics.
    */
   public static async getAppStatistics(): Promise<AppStatistics> {
+    if (statisticsCache.has("app-statistics")) {
+      return statisticsCache.get<AppStatistics>("app-statistics")!;
+    }
+
     const trackedPlayers = await PlayerModel.countDocuments();
     const trackedScores = await ScoreSaberScoreModel.countDocuments();
     const additionalScoresData = await AdditionalScoreDataModel.countDocuments();
     const cachedBeatSaverMaps = await BeatSaverMapModel.countDocuments();
+    const cachedScoreSaberLeaderboards = await ScoreSaberLeaderboardModel.countDocuments();
 
-    return {
+    const response = {
       trackedPlayers,
       trackedScores,
       additionalScoresData,
       cachedBeatSaverMaps,
+      cachedScoreSaberLeaderboards,
     };
+    statisticsCache.set("app-statistics", response);
+    return response;
   }
 }

projects/backend/src/service/image.service.tsx

@@ -2,10 +2,8 @@ import { ImageResponse } from "@vercel/og";
 import { scoresaberService } from "@ssr/common/service/impl/scoresaber";
 import React from "react";
 import { formatNumberWithCommas, formatPp } from "@ssr/common/utils/number-utils";
-import { getDifficultyFromScoreSaberDifficulty } from "@ssr/common/utils/scoresaber-utils";
 import { StarIcon } from "../../components/star-icon";
 import { GlobeIcon } from "../../components/globe-icon";
-import ScoreSaberLeaderboardToken from "@ssr/common/types/token/scoresaber/score-saber-leaderboard-token";
 import ScoreSaberPlayer from "@ssr/common/player/impl/scoresaber-player";
 import { Jimp } from "jimp";
 import { extractColors } from "extract-colors";
@@ -13,6 +11,8 @@ import { Config } from "@ssr/common/config";
 import { fetchWithCache } from "../common/cache.util";
 import { SSRCache } from "@ssr/common/cache";
 import { getScoreSaberPlayerFromToken } from "@ssr/common/token-creators";
+import LeaderboardService from "./leaderboard.service";
+import ScoreSaberLeaderboard from "@ssr/common/model/leaderboard/impl/scoresaber-leaderboard";
 
 const cache = new SSRCache({
   ttl: 1000 * 60 * 60, // 1 hour
@@ -176,12 +176,11 @@ export class ImageService {
    * @param id the leaderboard's id
    */
   public static async generateLeaderboardImage(id: string) {
-    const leaderboard = await fetchWithCache<ScoreSaberLeaderboardToken>(cache, `leaderboard-${id}`, () =>
-      scoresaberService.lookupLeaderboard(id)
-    );
-    if (!leaderboard) {
+    const response = await LeaderboardService.getLeaderboard<ScoreSaberLeaderboard>("scoresaber", id);
+    if (!response) {
       return undefined;
     }
+    const { leaderboard } = response;
 
     const ranked = leaderboard.stars > 0;
 
@@ -189,7 +188,7 @@ export class ImageService {
       (
         <ImageService.BaseImage>
           {/* Leaderboard Cover Image */}
-          <img src={leaderboard.coverImage} width={256} height={256} alt="Leaderboard Cover" tw="rounded-full mb-3" />
+          <img src={leaderboard.songArt} width={256} height={256} alt="Leaderboard Cover" tw="rounded-full mb-3" />
 
           {/* Leaderboard Name */}
           <p tw="font-bold text-6xl m-0">
@@ -206,9 +205,7 @@ export class ImageService {
             )}
 
             {/* Leaderboard Difficulty */}
-            <p tw={"font-bold m-0 text-4xl" + (ranked ? " pl-3" : "")}>
-              {getDifficultyFromScoreSaberDifficulty(leaderboard.difficulty.difficulty)}
-            </p>
+            <p tw={"font-bold m-0 text-4xl" + (ranked ? " pl-3" : "")}>{leaderboard.difficulty.difficulty}</p>
           </div>
 
           {/* Leaderboard Author */}

projects/backend/src/service/leaderboard.service.ts

@@ -1,17 +1,16 @@
 import { Leaderboards } from "@ssr/common/leaderboard";
 import { scoresaberService } from "@ssr/common/service/impl/scoresaber";
-import { SSRCache } from "@ssr/common/cache";
 import { LeaderboardResponse } from "@ssr/common/response/leaderboard-response";
-import Leaderboard from "@ssr/common/leaderboard/leaderboard";
 import ScoreSaberLeaderboardToken from "@ssr/common/types/token/scoresaber/score-saber-leaderboard-token";
 import { NotFoundError } from "elysia";
 import BeatSaverService from "./beatsaver.service";
 import { BeatSaverMap } from "@ssr/common/model/beatsaver/map";
 import { getScoreSaberLeaderboardFromToken } from "@ssr/common/token-creators";
-
-const leaderboardCache = new SSRCache({
-  ttl: 1000 * 60 * 60 * 24,
-});
+import {
+  ScoreSaberLeaderboard,
+  ScoreSaberLeaderboardModel,
+} from "@ssr/common/model/leaderboard/impl/scoresaber-leaderboard";
+import Leaderboard from "@ssr/common/model/leaderboard/leaderboard";
 
 export default class LeaderboardService {
   /**
@@ -21,16 +20,9 @@ export default class LeaderboardService {
    * @param id the id
    */
   private static async getLeaderboardToken<T>(leaderboard: Leaderboards, id: string): Promise<T | undefined> {
-    const cacheKey = `${leaderboard}-${id}`;
-    if (leaderboardCache.has(cacheKey)) {
-      return leaderboardCache.get(cacheKey) as T;
-    }
-
     switch (leaderboard) {
       case "scoresaber": {
-        const leaderboard = (await scoresaberService.lookupLeaderboard(id)) as T;
-        leaderboardCache.set(cacheKey, leaderboard);
-        return leaderboard;
+        return (await scoresaberService.lookupLeaderboard(id)) as T;
       }
       default: {
         return undefined;
@@ -49,16 +41,45 @@ export default class LeaderboardService {
     let leaderboard: Leaderboard | undefined;
     let beatSaverMap: BeatSaverMap | undefined;
 
+    const now = new Date();
     switch (leaderboardName) {
       case "scoresaber": {
-        const leaderboardToken = await LeaderboardService.getLeaderboardToken<ScoreSaberLeaderboardToken>(
-          leaderboardName,
-          id
-        );
-        if (leaderboardToken == undefined) {
+        let foundLeaderboard = false;
+        const cachedLeaderboard = await ScoreSaberLeaderboardModel.findById(id);
+        if (cachedLeaderboard != null) {
+          leaderboard = cachedLeaderboard.toObject() as unknown as ScoreSaberLeaderboard;
+          if (
+            leaderboard &&
+            (leaderboard.ranked || // Never refresh ranked leaderboards (it will get refreshed every night)
+              leaderboard.lastRefreshed == undefined || // Refresh if it has never been refreshed
+              now.getTime() - leaderboard.lastRefreshed.getTime() > 1000 * 60 * 60 * 24) // Refresh every day
+          ) {
+            foundLeaderboard = true;
+          }
+        }
+
+        if (!foundLeaderboard) {
+          const leaderboardToken = await LeaderboardService.getLeaderboardToken<ScoreSaberLeaderboardToken>(
+            leaderboardName,
+            id
+          );
+          if (leaderboardToken == undefined) {
+            throw new NotFoundError(`Leaderboard not found for "${id}"`);
+          }
+
+          leaderboard = getScoreSaberLeaderboardFromToken(leaderboardToken);
+          leaderboard.lastRefreshed = new Date();
+
+          await ScoreSaberLeaderboardModel.findOneAndUpdate({ _id: id }, leaderboard, {
+            upsert: true,
+            new: true,
+            setDefaultsOnInsert: true,
+          });
+        }
+        if (leaderboard == undefined) {
           throw new NotFoundError(`Leaderboard not found for "${id}"`);
         }
-        leaderboard = getScoreSaberLeaderboardFromToken(leaderboardToken);
+
         beatSaverMap = await BeatSaverService.getMap(leaderboard.songHash);
         break;
       }

projects/backend/src/service/player.service.ts

@@ -1,79 +1,82 @@
 import { PlayerDocument, PlayerModel } from "@ssr/common/model/player";
-import { NotFoundError } from "../error/not-found-error";
+import { NotFoundError } from "@ssr/common/error/not-found-error";
 import { getDaysAgoDate, getMidnightAlignedDate } from "@ssr/common/utils/time-utils";
 import { scoresaberService } from "@ssr/common/service/impl/scoresaber";
 import ScoreSaberPlayerToken from "@ssr/common/types/token/scoresaber/score-saber-player-token";
-import { InternalServerError } from "../error/internal-server-error";
-import { formatPp } from "@ssr/common/utils/number-utils";
-import { getPageFromRank, isProduction } from "@ssr/common/utils/utils";
-import { DiscordChannels, logToChannel } from "../bot/bot";
-import { EmbedBuilder } from "discord.js";
+import { InternalServerError } from "@ssr/common/error/internal-server-error";
+import { delay, getPageFromRank, isProduction } from "@ssr/common/utils/utils";
 import { AroundPlayer } from "@ssr/common/types/around-player";
+import { ScoreSort } from "@ssr/common/score/score-sort";
+import { getScoreSaberLeaderboardFromToken } from "@ssr/common/token-creators";
+import { ScoreService } from "./score.service";
+import { logNewTrackedPlayer } from "../common/embds";
+
+const SCORESABER_REQUEST_COOLDOWN = 60_000 / 250; // 250 requests per minute
+const accountCreationLock: { [id: string]: Promise<PlayerDocument> } = {};
 
 export class PlayerService {
-  /**
-   * Get a player from the database.
-   *
-   * @param id the player to fetch
-   * @param create if true, create the player if it doesn't exist
-   * @param playerToken an optional player token for the player
-   * @returns the player
-   * @throws NotFoundError if the player is not found
-   */
   public static async getPlayer(
     id: string,
     create: boolean = false,
     playerToken?: ScoreSaberPlayerToken
   ): Promise<PlayerDocument> {
+    // Wait for the existing lock if it's in progress
+    if (accountCreationLock[id] !== undefined) {
+      await accountCreationLock[id];
+    }
+
     let player: PlayerDocument | null = await PlayerModel.findById(id);
+
     if (player === null) {
-      // If create is on, create the player, otherwise return unknown player
-      playerToken = create ? (playerToken ? playerToken : await scoresaberService.lookupPlayer(id)) : undefined;
-      if (playerToken === undefined) {
+      if (!create) {
         throw new NotFoundError(`Player "${id}" not found`);
       }
 
-      console.log(`Creating player "${id}"...`);
-      try {
-        player = (await PlayerModel.create({ _id: id })) as PlayerDocument;
-        player.trackedSince = new Date();
-        await this.seedPlayerHistory(player, playerToken);
+      playerToken = playerToken || (await scoresaberService.lookupPlayer(id));
 
-        // Only notify in production
-        if (isProduction()) {
-          await logToChannel(
-            DiscordChannels.trackedPlayerLogs,
-            new EmbedBuilder()
-              .setTitle("New Player Tracked")
-              .setDescription(`https://ssr.fascinated.cc/player/${playerToken.id}`)
-              .addFields([
-                {
-                  name: "Username",
-                  value: playerToken.name,
-                  inline: true,
-                },
-                {
-                  name: "ID",
-                  value: playerToken.id,
-                  inline: true,
-                },
-                {
-                  name: "PP",
-                  value: formatPp(playerToken.pp) + "pp",
-                  inline: true,
-                },
-              ])
-              .setThumbnail(playerToken.profilePicture)
-              .setColor("#00ff00")
-          );
+      if (!playerToken) {
+        throw new NotFoundError(`Player "${id}" not found`);
+      }
+
+      // Create a new lock promise and assign it
+      accountCreationLock[id] = (async () => {
+        let newPlayer: PlayerDocument;
+        try {
+          console.log(`Creating player "${id}"...`);
+          newPlayer = (await PlayerModel.create({ _id: id })) as PlayerDocument;
+          newPlayer.trackedSince = new Date();
+          await newPlayer.save();
+
+          await this.seedPlayerHistory(newPlayer, playerToken);
+          await this.refreshAllPlayerScores(newPlayer);
+
+          // Notify in production
+          if (isProduction()) {
+            await logNewTrackedPlayer(playerToken);
+          }
+        } catch (err) {
+          console.log(`Failed to create player document for "${id}"`, err);
+          throw new InternalServerError(`Failed to create player document for "${id}"`);
+        } finally {
+          // Ensure the lock is always removed
+          delete accountCreationLock[id];
         }
-      } catch (err) {
-        const message = `Failed to create player document for "${id}"`;
-        console.log(message, err);
-        throw new InternalServerError(message);
+
+        return newPlayer;
+      })();
+
+      // Wait for the player creation to complete
+      player = await accountCreationLock[id];
+
+      // Update player name
+      if (player.name !== playerToken.name) {
+        player.name = playerToken.name;
+        await player.save();
       }
     }
-    return player;
+
+    // Ensure that the player is now of type PlayerDocument
+    return player as PlayerDocument;
   }
 
   /**
@@ -90,7 +93,7 @@ export class PlayerService {
     });
     playerRankHistory.push(playerToken.rank);
 
-    let daysAgo = 1; // Start from yesterday
+    let daysAgo = 0; // Start from today
     for (let i = playerRankHistory.length - daysAgo - 1; i >= 0; i--) {
       const rank = playerRankHistory[i];
       // Skip inactive days
@@ -131,7 +134,7 @@ export class PlayerService {
 
     // Seed the history with ScoreSaber data if no history exists
     if (foundPlayer.getDaysTracked() === 0) {
-      await this.seedPlayerHistory(foundPlayer, player);
+      await this.seedPlayerHistory(foundPlayer.id, player);
     }
 
     // Update current day's statistics
@@ -243,4 +246,126 @@ export class PlayerService {
 
     return players.slice(start, end);
   }
+
+  /**
+   * Refreshes all the players scores.
+   *
+   * @param player the player to refresh
+   */
+  public static async refreshAllPlayerScores(player: PlayerDocument) {
+    await this.refreshPlayerScoreSaberScores(player);
+  }
+
+  /**
+   * Ensures that all the players scores from the
+   * ScoreSaber API are up-to-date.
+   *
+   * @param player the player to refresh
+   * @private
+   */
+  private static async refreshPlayerScoreSaberScores(player: PlayerDocument) {
+    console.log(`Refreshing scores for ${player.id}...`);
+    let page = 1;
+    let hasMorePages = true;
+
+    while (hasMorePages) {
+      const scoresPage = await scoresaberService.lookupPlayerScores({
+        playerId: player.id,
+        page: page,
+        limit: 100,
+        sort: ScoreSort.recent,
+      });
+
+      if (!scoresPage) {
+        console.warn(`Failed to fetch scores for ${player.id} on page ${page}.`);
+        break;
+      }
+
+      let missingScores = 0;
+      for (const score of scoresPage.playerScores) {
+        const leaderboard = getScoreSaberLeaderboardFromToken(score.leaderboard);
+        const scoreSaberScore = await ScoreService.getScoreSaberScore(
+          player.id,
+          leaderboard.id + "",
+          leaderboard.difficulty.difficulty,
+          leaderboard.difficulty.characteristic,
+          score.score.baseScore
+        );
+
+        if (scoreSaberScore == null) {
+          missingScores++;
+        }
+        await ScoreService.trackScoreSaberScore(score.score, score.leaderboard, player.id);
+      }
+
+      // Stop paginating if no scores are missing OR if player has seededScores marked true
+      if ((missingScores === 0 && player.seededScores) || page >= Math.ceil(scoresPage.metadata.total / 100)) {
+        hasMorePages = false;
+      }
+
+      page++;
+      await delay(SCORESABER_REQUEST_COOLDOWN); // Cooldown between page requests
+    }
+
+    // Mark player as seeded
+    player.seededScores = true;
+    await player.save();
+
+    console.log(`Finished refreshing scores for ${player.id}, total pages refreshed: ${page - 1}.`);
+  }
+
+  /**
+   * Ensures all player scores are up-to-date.
+   */
+  public static async refreshPlayerScores() {
+    console.log(`Refreshing player score data...`);
+
+    const players = await PlayerModel.find({});
+    console.log(`Found ${players.length} players to refresh.`);
+
+    for (const player of players) {
+      await this.refreshAllPlayerScores(player);
+      await delay(SCORESABER_REQUEST_COOLDOWN); // Cooldown between players
+    }
+  }
+
+  /**
+   * Updates the player statistics for all players.
+   */
+  public static async updatePlayerStatistics() {
+    const pages = 20; // top 1000 players
+
+    let toTrack: PlayerDocument[] = await PlayerModel.find({});
+    const toRemoveIds: string[] = [];
+
+    // loop through pages to fetch the top players
+    console.log(`Fetching ${pages} pages of players from ScoreSaber...`);
+    for (let i = 0; i < pages; i++) {
+      const pageNumber = i + 1;
+      console.log(`Fetching page ${pageNumber}...`);
+      const page = await scoresaberService.lookupPlayers(pageNumber);
+      if (page === undefined) {
+        console.log(`Failed to fetch players on page ${pageNumber}, skipping page...`);
+        await delay(SCORESABER_REQUEST_COOLDOWN);
+        continue;
+      }
+      for (const player of page.players) {
+        const foundPlayer = await PlayerService.getPlayer(player.id, true, player);
+        await PlayerService.trackScoreSaberPlayer(foundPlayer, player);
+        toRemoveIds.push(foundPlayer.id);
+      }
+      await delay(SCORESABER_REQUEST_COOLDOWN);
+    }
+    console.log(`Finished tracking player statistics for ${pages} pages, found ${toRemoveIds.length} players.`);
+
+    // remove all players that have been tracked
+    toTrack = toTrack.filter(player => !toRemoveIds.includes(player.id));
+
+    console.log(`Tracking ${toTrack.length} player statistics...`);
+    for (const player of toTrack) {
+      await PlayerService.trackScoreSaberPlayer(player);
+      await delay(SCORESABER_REQUEST_COOLDOWN);
+    }
+    console.log("Finished tracking player statistics.");
+  }
 }

projects/backend/src/service/score.service.ts

@@ -3,9 +3,10 @@ import { formatNumberWithCommas, formatPp } from "@ssr/common/utils/number-utils
 import { isProduction } from "@ssr/common/utils/utils";
 import { Metadata } from "@ssr/common/types/metadata";
 import { NotFoundError } from "elysia";
+import BeatSaverService from "./beatsaver.service";
 import { scoresaberService } from "@ssr/common/service/impl/scoresaber";
+import { ScoreSort } from "@ssr/common/score/score-sort";
 import { Leaderboards } from "@ssr/common/leaderboard";
-import Leaderboard from "@ssr/common/leaderboard/leaderboard";
 import LeaderboardService from "./leaderboard.service";
 import { BeatSaverMap } from "@ssr/common/model/beatsaver/map";
 import { PlayerScore } from "@ssr/common/score/player-score";
@@ -23,24 +24,23 @@ import {
   AdditionalScoreDataModel,
 } from "@ssr/common/model/additional-score-data/additional-score-data";
 import { BeatLeaderScoreImprovementToken } from "@ssr/common/types/token/beatleader/score/score-improvement";
-import Score, { ScoreType } from "@ssr/common/model/score/score";
+import { ScoreType } from "@ssr/common/model/score/score";
 import { getScoreSaberLeaderboardFromToken, getScoreSaberScoreFromToken } from "@ssr/common/token-creators";
 import {
+  ScoreSaberPreviousScore,
   ScoreSaberScore,
-  ScoreSaberScoreInternal,
   ScoreSaberScoreModel,
 } from "@ssr/common/model/score/impl/scoresaber-score";
-import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard";
-import { ScoreSorters } from "@ssr/common/sorter/sorters";
-import { ScoreSortType } from "@ssr/common/sorter/sort-type";
-import { SortDirection } from "@ssr/common/sorter/sort-direction";
-import { Pagination } from "../../../common/src/pagination";
-import { PlayerService } from "./player.service";
-import { ScoreSort } from "@ssr/common/score/score-sort";
-import BeatSaverService from "./beatsaver.service";
-import ScoreSaberPlayerToken from "@ssr/common/types/token/scoresaber/score-saber-player-token";
 import ScoreSaberScoreToken from "@ssr/common/types/token/scoresaber/score-saber-score-token";
 import ScoreSaberLeaderboardToken from "@ssr/common/types/token/scoresaber/score-saber-leaderboard-token";
+import { MapDifficulty } from "@ssr/common/score/map-difficulty";
+import { MapCharacteristic } from "@ssr/common/types/map-characteristic";
+import { Page, Pagination } from "@ssr/common/pagination";
+import ScoreSaberLeaderboard from "@ssr/common/model/leaderboard/impl/scoresaber-leaderboard";
+import Leaderboard from "@ssr/common/model/leaderboard/leaderboard";
+import { Timeframe } from "@ssr/common/timeframe";
+import { getDaysAgoDate } from "@ssr/common/utils/time-utils";
+import { PlayerService } from "./player.service";
 
 const playerScoresCache = new SSRCache({
   ttl: 1000 * 60, // 1 minute
@@ -50,8 +50,6 @@ const leaderboardScoresCache = new SSRCache({
   ttl: 1000 * 60, // 1 minute
 });
 
-const ITEMS_PER_PAGE = 8;
-
 export class ScoreService {
   /**
    * Notifies the number one score in Discord.
@@ -163,6 +161,7 @@ export class ScoreService {
 
     history.scores = scores;
     player.setStatisticHistory(today, history);
+    player.markModified("statisticHistory");
     await player.save();
   }
 
@@ -178,7 +177,13 @@ export class ScoreService {
     leaderboardToken: ScoreSaberLeaderboardToken,
     playerId?: string
   ) {
-    playerId = playerId || scoreToken.leaderboardPlayerInfo.id;
+    playerId = (scoreToken.leaderboardPlayerInfo && scoreToken.leaderboardPlayerInfo.id) || playerId;
+    if (!playerId) {
+      console.error(`Player ID is undefined, unable to track score: ${scoreToken.id}`);
+      return;
+    }
+
+    const playerName = (scoreToken.leaderboardPlayerInfo && scoreToken.leaderboardPlayerInfo.name) || "Unknown";
 
     const leaderboard = getScoreSaberLeaderboardFromToken(leaderboardToken);
     const score = getScoreSaberScoreFromToken(scoreToken, leaderboard, playerId);
@@ -188,11 +193,36 @@ export class ScoreService {
       return;
     }
 
+    // Update player name
+    if (playerName !== "Unknown") {
+      player.name = playerName;
+      await player.save();
+    }
+
+    // The score has already been tracked, so ignore it.
+    if (
+      (await this.getScoreSaberScore(
+        playerId,
+        leaderboard.id + "",
+        leaderboard.difficulty.difficulty,
+        leaderboard.difficulty.characteristic,
+        score.score
+      )) !== null
+    ) {
+      console.log(
+        `ScoreSaber score already tracked for "${playerName}"(${playerId}), difficulty: ${score.difficulty}, score: ${score.score}, leaderboard: ${leaderboard.id}, ignoring...`
+      );
+      return;
+    }
+
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-expect-error
     delete score.playerInfo;
 
     await ScoreSaberScoreModel.create(score);
+    console.log(
+      `Tracked ScoreSaber score for "${playerName}"(${playerId}), difficulty: ${score.difficulty}, score: ${score.score}, pp: ${score.pp.toFixed(2)}pp, leaderboard: ${leaderboard.id}`
+    );
   }
 
   /**
@@ -274,6 +304,90 @@ export class ScoreService {
     );
   }
 
+  /**
+   * Gets the top tracked scores.
+   *
+   * @param amount the amount of scores to get
+   * @param timeframe the timeframe to filter by
+   * @returns the top scores
+   */
+  public static async getTopScores(amount: number = 100, timeframe: Timeframe) {
+    console.log(`Getting top scores for timeframe: ${timeframe}, limit: ${amount}...`);
+    const before = Date.now();
+
+    let daysAgo = -1;
+    if (timeframe === "daily") {
+      daysAgo = 1;
+    } else if (timeframe === "weekly") {
+      daysAgo = 8;
+    } else if (timeframe === "monthly") {
+      daysAgo = 31;
+    }
+    const date: Date = daysAgo == -1 ? new Date(0) : getDaysAgoDate(daysAgo);
+    const foundScores = await ScoreSaberScoreModel.aggregate([
+      { $match: { timestamp: { $gte: date } } },
+      {
+        $group: {
+          _id: { leaderboardId: "$leaderboardId", playerId: "$playerId" },
+          score: { $first: "$$ROOT" },
+        },
+      },
+      { $sort: { "score.pp": -1 } },
+      { $limit: amount },
+    ]);
+
+    const scores: PlayerScore<ScoreSaberScore, ScoreSaberLeaderboard>[] = [];
+    for (const { score: scoreData } of foundScores) {
+      const score = new ScoreSaberScoreModel(scoreData).toObject() as ScoreSaberScore;
+      const leaderboardResponse = await LeaderboardService.getLeaderboard<ScoreSaberLeaderboard>(
+        "scoresaber",
+        score.leaderboardId + ""
+      );
+      if (!leaderboardResponse) {
+        continue;
+      }
+      const { leaderboard, beatsaver } = leaderboardResponse;
+
+      try {
+        const player = await PlayerService.getPlayer(score.playerId);
+        if (player !== undefined) {
+          score.playerInfo = {
+            id: player.id,
+            name: player.name,
+          };
+        }
+      } catch {
+        score.playerInfo = {
+          id: score.playerId,
+        };
+      }
+
+      const [additionalData, previousScore] = await Promise.all([
+        this.getAdditionalScoreData(
+          score.playerId,
+          leaderboard.songHash,
+          `${leaderboard.difficulty.difficulty}-${leaderboard.difficulty.characteristic}`,
+          score.score
+        ),
+        this.getPreviousScore(score.playerId, leaderboard.id + "", score.timestamp),
+      ]);
+      if (additionalData) {
+        score.additionalData = additionalData;
+      }
+      if (previousScore) {
+        score.previousScore = previousScore;
+      }
+
+      scores.push({
+        score: score,
+        leaderboard: leaderboard,
+        beatSaver: beatsaver,
+      });
+    }
+    console.log(`Got ${scores.length} scores in ${Date.now() - before}ms (timeframe: ${timeframe}, limit: ${amount})`);
+    return scores;
+  }
+
   /**
    * Gets the additional score data for a player's score.
    *
@@ -302,146 +416,100 @@ export class ScoreService {
   }
 
   /**
-   * Gets scores for a player.
+   * Gets a ScoreSaber score.
    *
-   * @param leaderboardName the leaderboard to get the scores from
-   * @param playerId the players id
-   * @param page the page to get
-   * @param sort the sort type to use
-   * @param direction the direction to sort the scores
-   * @param search the search to use
-   * @returns the scores
+   * @param playerId the player who set the score
+   * @param leaderboardId the leaderboard id the score was set on
+   * @param difficulty the difficulty played
+   * @param characteristic the characteristic played
+   * @param score the score of the score set
    */
+  public static async getScoreSaberScore(
+    playerId: string,
+    leaderboardId: string,
+    difficulty: MapDifficulty,
+    characteristic: MapCharacteristic,
+    score: number
+  ) {
+    return ScoreSaberScoreModel.findOne({
+      playerId: playerId,
+      leaderboardId: leaderboardId,
+      difficulty: difficulty,
+      characteristic: characteristic,
+      score: score,
+    });
+  }
+
   public static async getPlayerScores(
     leaderboardName: Leaderboards,
     playerId: string,
     page: number,
-    sort: ScoreSortType,
-    direction: SortDirection,
+    sort: string,
     search?: string
   ): Promise<PlayerScoresResponse<unknown, unknown> | undefined> {
-    console.log(
-      `Fetching scores for ${playerId} on ${leaderboardName}, page: ${page}, sort: ${sort}, direction: ${direction}, search: ${search}`
-    );
-
     return fetchWithCache(
       playerScoresCache,
       `player-scores-${leaderboardName}-${playerId}-${page}-${sort}-${search}`,
       async () => {
-        const toReturn: PlayerScore<unknown, unknown>[] | undefined = [];
+        const scores: PlayerScore<unknown, unknown>[] = [];
         let metadata: Metadata = new Metadata(0, 0, 0, 0); // Default values
 
         switch (leaderboardName) {
           case "scoresaber": {
-            let isPlayerTracked = false;
-            try {
-              isPlayerTracked = (await PlayerService.getPlayer(playerId, false)) != undefined;
-            } catch {
-              /* ignored */
+            const leaderboardScores = await scoresaberService.lookupPlayerScores({
+              playerId,
+              page,
+              sort: sort as ScoreSort,
+              search,
+            });
+            if (leaderboardScores == undefined) {
+              break;
             }
-            if (isPlayerTracked) {
-              const rawScores = ScoreSorters.scoreSaber.sort(
-                sort,
-                direction,
-                (await ScoreSaberScoreModel.find({ playerId: playerId }).exec()) as unknown as ScoreSaberScore[]
-              );
-              if (!rawScores || rawScores.length === 0) {
-                break;
-              }
 
-              const pagination = new Pagination<ScoreSaberScore>().setItemsPerPage(ITEMS_PER_PAGE).setItems(rawScores);
-              const paginatedPage = pagination.getPage(page);
-              metadata = paginatedPage.metadata;
+            metadata = new Metadata(
+              Math.ceil(leaderboardScores.metadata.total / leaderboardScores.metadata.itemsPerPage),
+              leaderboardScores.metadata.total,
+              leaderboardScores.metadata.page,
+              leaderboardScores.metadata.itemsPerPage
+            );
 
-              for (const score of paginatedPage.items) {
-                const { leaderboard, beatsaver } = await LeaderboardService.getLeaderboard<ScoreSaberLeaderboard>(
-                  "scoresaber",
-                  String(score.leaderboardId)
-                );
-                if (leaderboard == undefined) {
-                  continue;
-                }
+            const scorePromises = leaderboardScores.playerScores.map(async token => {
+              const leaderboard = getScoreSaberLeaderboardFromToken(token.leaderboard);
+              if (!leaderboard) return undefined;
 
-                const additionalData = await this.getAdditionalScoreData(
+              const score = getScoreSaberScoreFromToken(token.score, leaderboard, playerId);
+              if (!score) return undefined;
+
+              // Fetch additional data, previous score, and BeatSaver map concurrently
+              const [additionalData, previousScore, beatSaverMap] = await Promise.all([
+                this.getAdditionalScoreData(
                   playerId,
                   leaderboard.songHash,
                   `${leaderboard.difficulty.difficulty}-${leaderboard.difficulty.characteristic}`,
                   score.score
-                );
-                if (additionalData == undefined) {
-                  continue;
-                }
+                ),
+                this.getPreviousScore(playerId, leaderboard.id + "", score.timestamp),
+                BeatSaverService.getMap(leaderboard.songHash),
+              ]);
 
-                toReturn.push({
-                  score: score,
-                  leaderboard: leaderboard,
-                  beatSaver: beatsaver,
-                });
+              if (additionalData) {
+                score.additionalData = additionalData;
               }
-            } else {
-              // Convert the sort type
-              let scoreSaberSort: ScoreSort;
-              switch (sort) {
-                case ScoreSortType.date: {
-                  scoreSaberSort = ScoreSort.recent;
-                  break;
-                }
-                case ScoreSortType.pp: {
-                  scoreSaberSort = ScoreSort.top;
-                  break;
-                }
-                default: {
-                  scoreSaberSort = ScoreSort.recent;
-                  break;
-                }
+              if (previousScore) {
+                score.previousScore = previousScore;
               }
 
-              const rawScores = await scoresaberService.lookupPlayerScores({
-                playerId: playerId,
-                page: page,
-                sort: scoreSaberSort,
-                search: search,
-              });
-              if (!rawScores || rawScores.playerScores.length === 0) {
-                break;
-              }
-
-              metadata = new Metadata(
-                Math.ceil(rawScores.metadata.total / rawScores.metadata.itemsPerPage),
-                rawScores.metadata.total,
-                rawScores.metadata.page,
-                rawScores.metadata.itemsPerPage
-              );
-
-              for (const token of rawScores.playerScores) {
-                const leaderboard = getScoreSaberLeaderboardFromToken(token.leaderboard);
-                if (leaderboard == undefined) {
-                  continue;
-                }
-
-                const score = getScoreSaberScoreFromToken(token.score, leaderboard, playerId);
-                if (score == undefined) {
-                  continue;
-                }
-
-                const additionalData = await this.getAdditionalScoreData(
-                  playerId,
-                  leaderboard.songHash,
-                  `${leaderboard.difficulty.difficulty}-${leaderboard.difficulty.characteristic}`,
-                  score.score
-                );
-                if (additionalData !== undefined) {
-                  score.additionalData = additionalData;
-                }
-
-                toReturn.push({
-                  score: score,
-                  leaderboard: leaderboard,
-                  beatSaver: await BeatSaverService.getMap(leaderboard.songHash),
-                });
-              }
-            }
+              return {
+                score: score,
+                leaderboard: leaderboard,
+                beatSaver: beatSaverMap,
+              } as PlayerScore<ScoreSaberScore, ScoreSaberLeaderboard>;
+            });
 
+            const resolvedScores = (await Promise.all(scorePromises)).filter(
+              (s): s is PlayerScore<ScoreSaberScore, ScoreSaberLeaderboard> => s !== undefined
+            );
+            scores.push(...resolvedScores);
             break;
           }
           default: {
@@ -449,9 +517,8 @@ export class ScoreService {
           }
         }
 
-        console.log(metadata);
         return {
-          scores: toReturn,
+          scores: scores,
           metadata: metadata,
         };
       }
@@ -531,4 +598,117 @@ export class ScoreService {
       }
     );
   }
+
+  /**
+   * Gets the player's score history for a map.
+   *
+   * @param playerId the player's id to get the previous scores for
+   * @param leaderboardId the leaderboard to get the previous scores on
+   * @param page the page to get
+   */
+  public static async getScoreHistory(
+    playerId: string,
+    leaderboardId: string,
+    page: number
+  ): Promise<Page<PlayerScore<ScoreSaberScore, ScoreSaberLeaderboard>>> {
+    const scores = await ScoreSaberScoreModel.find({ playerId: playerId, leaderboardId: leaderboardId })
+      .sort({ timestamp: -1 })
+      .skip(1);
+    if (scores == null || scores.length == 0) {
+      throw new NotFoundError(`No previous scores found for ${playerId} in ${leaderboardId}`);
+    }
+
+    return new Pagination<PlayerScore<ScoreSaberScore, ScoreSaberLeaderboard>>()
+      .setItemsPerPage(8)
+      .setTotalItems(scores.length)
+      .getPage(page, async () => {
+        const toReturn: PlayerScore<ScoreSaberScore, ScoreSaberLeaderboard>[] = [];
+        for (const score of scores) {
+          const leaderboardResponse = await LeaderboardService.getLeaderboard<ScoreSaberLeaderboard>(
+            "scoresaber",
+            leaderboardId
+          );
+          if (leaderboardResponse == undefined) {
+            throw new NotFoundError(`Leaderboard "${leaderboardId}" not found`);
+          }
+          const { leaderboard, beatsaver } = leaderboardResponse;
+
+          const additionalData = await this.getAdditionalScoreData(
+            playerId,
+            leaderboard.songHash,
+            `${leaderboard.difficulty.difficulty}-${leaderboard.difficulty.characteristic}`,
+            score.score
+          );
+          if (additionalData !== undefined) {
+            score.additionalData = additionalData;
+          }
+          const previousScore = await this.getPreviousScore(playerId, leaderboardId, score.timestamp);
+          if (previousScore !== undefined) {
+            score.previousScore = previousScore;
+          }
+
+          toReturn.push({
+            score: score as unknown as ScoreSaberScore,
+            leaderboard: leaderboard,
+            beatSaver: beatsaver,
+          });
+        }
+
+        return toReturn;
+      });
+  }
+
+  /**
+   * Gets the player's previous score for a map.
+   *
+   * @param playerId the player's id to get the previous score for
+   * @param leaderboardId the leaderboard to get the previous score on
+   * @param timestamp the score's timestamp to get the previous score for
+   * @returns the score, or undefined if none
+   */
+  public static async getPreviousScore(
+    playerId: string,
+    leaderboardId: string,
+    timestamp: Date
+  ): Promise<ScoreSaberPreviousScore | undefined> {
+    const scores = await ScoreSaberScoreModel.find({ playerId: playerId, leaderboardId: leaderboardId }).sort({
+      timestamp: -1,
+    });
+    if (scores == null || scores.length == 0) {
+      return undefined;
+    }
+
+    const scoreIndex = scores.findIndex(score => score.timestamp.getTime() == timestamp.getTime());
+    const score = scores.find(score => score.timestamp.getTime() == timestamp.getTime());
+    if (scoreIndex == -1 || score == undefined) {
+      return undefined;
+    }
+    const previousScore = scores[scoreIndex + 1];
+    if (previousScore == undefined) {
+      return undefined;
+    }
+    return {
+      score: previousScore.score,
+      accuracy: previousScore.accuracy,
+      modifiers: previousScore.modifiers,
+      misses: previousScore.misses,
+      missedNotes: previousScore.missedNotes,
+      badCuts: previousScore.badCuts,
+      fullCombo: previousScore.fullCombo,
+      pp: previousScore.pp,
+      weight: previousScore.weight,
+      maxCombo: previousScore.maxCombo,
+      timestamp: previousScore.timestamp,
+      change: {
+        score: score.score - previousScore.score,
+        accuracy: score.accuracy - previousScore.accuracy,
+        misses: score.misses - previousScore.misses,
+        missedNotes: score.missedNotes - previousScore.missedNotes,
+        badCuts: score.badCuts - previousScore.badCuts,
+        pp: score.pp - previousScore.pp,
+        weight: score.weight && previousScore.weight && score.weight - previousScore.weight,
+        maxCombo: score.maxCombo - previousScore.maxCombo,
+      },
+    } as ScoreSaberPreviousScore;
+  }
 }

projects/backend/tsconfig.json

@@ -11,5 +11,6 @@
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true,
     "jsx": "react",
-  },
+    "incremental": true
+  }
 }

projects/common/src/cache.ts

@@ -1,6 +1,6 @@
 type CacheOptions = {
   /**
-   * The time the cached object will be valid for
+   * The time (in ms) the cached object will be valid for
    */
   ttl?: number;
 

projects/common/src/error/internal-server-error.ts

@@ -1,4 +1,4 @@
-import { HttpCode } from "../common/http-codes";
+import { HttpCode } from "../http-codes";
 
 export class InternalServerError extends Error {
   constructor(

projects/common/src/error/not-found-error.ts

@@ -1,4 +1,4 @@
-import { HttpCode } from "../common/http-codes";
+import { HttpCode } from "../http-codes";
 
 export class NotFoundError extends Error {
   constructor(

projects/common/src/error/rate-limit-error.ts

@@ -1,4 +1,4 @@
-import { HttpCode } from "../common/http-codes";
+import { HttpCode } from "../http-codes";
 
 export class RateLimitError extends Error {
   constructor(

projects/common/src/leaderboard/impl/scoresaber-leaderboard.ts

@@ -1,29 +0,0 @@
-import Leaderboard from "../leaderboard";
-import { LeaderboardStatus } from "../leaderboard-status";
-
-export default interface ScoreSaberLeaderboard extends Leaderboard {
-  /**
-   * The star count for the leaderboard.
-   */
-  readonly stars: number;
-
-  /**
-   * The total amount of plays.
-   */
-  readonly plays: number;
-
-  /**
-   * The amount of plays today.
-   */
-  readonly dailyPlays: number;
-
-  /**
-   * Whether this leaderboard is qualified to be ranked.
-   */
-  readonly qualified: boolean;
-
-  /**
-   * The status of the map.
-   */
-  readonly status: LeaderboardStatus;
-}

projects/common/src/leaderboard/leaderboard-difficulty.ts

@@ -1,24 +0,0 @@
-import { MapDifficulty } from "../score/map-difficulty";
-import { MapCharacteristic } from "../types/map-characteristic";
-
-export default interface LeaderboardDifficulty {
-  /**
-   * The id of the leaderboard.
-   */
-  leaderboardId: number;
-
-  /**
-   * The difficulty of the leaderboard.
-   */
-  difficulty: MapDifficulty;
-
-  /**
-   * The characteristic of the leaderboard.
-   */
-  characteristic: MapCharacteristic;
-
-  /**
-   * The raw difficulty of the leaderboard.
-   */
-  difficultyRaw: string;
-}

projects/common/src/leaderboard/leaderboard.ts

@@ -1,75 +0,0 @@
-import LeaderboardDifficulty from "./leaderboard-difficulty";
-
-export default interface Leaderboard {
-  /**
-   * The id of the leaderboard.
-   * @private
-   */
-  readonly id: number;
-
-  /**
-   * The hash of the song this leaderboard is for.
-   * @private
-   */
-  readonly songHash: string;
-
-  /**
-   * The name of the song this leaderboard is for.
-   * @private
-   */
-  readonly songName: string;
-
-  /**
-   * The sub name of the leaderboard.
-   * @private
-   */
-  readonly songSubName: string;
-
-  /**
-   * The author of the song this leaderboard is for.
-   * @private
-   */
-  readonly songAuthorName: string;
-
-  /**
-   * The author of the level this leaderboard is for.
-   * @private
-   */
-  readonly levelAuthorName: string;
-
-  /**
-   * The difficulty of the leaderboard.
-   * @private
-   */
-  readonly difficulty: LeaderboardDifficulty;
-
-  /**
-   * The difficulties of the leaderboard.
-   * @private
-   */
-  readonly difficulties: LeaderboardDifficulty[];
-
-  /**
-   * The maximum score of the leaderboard.
-   * @private
-   */
-  readonly maxScore: number;
-
-  /**
-   * Whether the leaderboard is ranked.
-   * @private
-   */
-  readonly ranked: boolean;
-
-  /**
-   * The link to the song art.
-   * @private
-   */
-  readonly songArt: string;
-
-  /**
-   * The date the leaderboard was created.
-   * @private
-   */
-  readonly timestamp: Date;
-}

projects/common/src/model/leaderboard/impl/scoresaber-leaderboard.ts

@@ -0,0 +1,56 @@
+import Leaderboard from "../leaderboard";
+import { type LeaderboardStatus } from "../leaderboard-status";
+import { getModelForClass, modelOptions, Prop, ReturnModelType, Severity } from "@typegoose/typegoose";
+import { Document } from "mongoose";
+
+@modelOptions({
+  options: { allowMixed: Severity.ALLOW },
+  schemaOptions: {
+    collection: "scoresaber-leaderboards",
+    toObject: {
+      virtuals: true,
+      transform: function (_, ret) {
+        ret.id = ret._id;
+        delete ret._id;
+        delete ret.__v;
+        return ret;
+      },
+    },
+  },
+})
+export default class ScoreSaberLeaderboardInternal extends Leaderboard {
+  /**
+   * The star count for the leaderboard.
+   */
+  @Prop({ required: true })
+  readonly stars!: number;
+
+  /**
+   * The total amount of plays.
+   */
+  @Prop({ required: true })
+  readonly plays!: number;
+
+  /**
+   * The amount of plays today.
+   */
+  @Prop({ required: true })
+  readonly dailyPlays!: number;
+
+  /**
+   * Whether this leaderboard is qualified to be ranked.
+   */
+  @Prop({ required: true })
+  readonly qualified!: boolean;
+
+  /**
+   * The status of the map.
+   */
+  @Prop({ required: true })
+  readonly status!: LeaderboardStatus;
+}
+
+export type ScoreSaberLeaderboard = InstanceType<typeof ScoreSaberLeaderboardInternal>;
+export type ScoreSaberLeaderboardDocument = ScoreSaberLeaderboard & Document;
+export const ScoreSaberLeaderboardModel: ReturnModelType<typeof ScoreSaberLeaderboardInternal> =
+  getModelForClass(ScoreSaberLeaderboardInternal);

projects/common/src/model/leaderboard/leaderboard-difficulty.ts

@@ -0,0 +1,29 @@
+import { type MapDifficulty } from "../../score/map-difficulty";
+import { type MapCharacteristic } from "../../types/map-characteristic";
+import { Prop } from "@typegoose/typegoose";
+
+export default class LeaderboardDifficulty {
+  /**
+   * The id of the leaderboard.
+   */
+  @Prop({ required: true })
+  leaderboardId!: number;
+
+  /**
+   * The difficulty of the leaderboard.
+   */
+  @Prop({ required: true })
+  difficulty!: MapDifficulty;
+
+  /**
+   * The characteristic of the leaderboard.
+   */
+  @Prop({ required: true })
+  characteristic!: MapCharacteristic;
+
+  /**
+   * The raw difficulty of the leaderboard.
+   */
+  @Prop({ required: true })
+  difficultyRaw!: string;
+}

projects/common/src/model/leaderboard/leaderboard.ts

@@ -0,0 +1,99 @@
+import LeaderboardDifficulty from "./leaderboard-difficulty";
+import { Prop } from "@typegoose/typegoose";
+
+export default class Leaderboard {
+  /**
+   * The id of the leaderboard.
+   * @private
+   */
+  @Prop({ required: true })
+  private readonly _id?: number;
+
+  /**
+   * The hash of the song this leaderboard is for.
+   * @private
+   */
+  @Prop({ required: true })
+  readonly songHash!: string;
+
+  /**
+   * The name of the song this leaderboard is for.
+   * @private
+   */
+  @Prop({ required: true })
+  readonly songName!: string;
+
+  /**
+   * The sub name of the leaderboard.
+   * @private
+   */
+  @Prop({ required: true })
+  readonly songSubName!: string;
+
+  /**
+   * The author of the song this leaderboard is for.
+   * @private
+   */
+  @Prop({ required: true })
+  readonly songAuthorName!: string;
+
+  /**
+   * The author of the level this leaderboard is for.
+   * @private
+   */
+  @Prop({ required: true })
+  readonly levelAuthorName!: string;
+
+  /**
+   * The difficulty of the leaderboard.
+   * @private
+   */
+  @Prop({ required: true, _id: false, type: () => LeaderboardDifficulty })
+  readonly difficulty!: LeaderboardDifficulty;
+
+  /**
+   * The difficulties of the leaderboard.
+   * @private
+   */
+  @Prop({ required: true, _id: false, type: () => [LeaderboardDifficulty] })
+  readonly difficulties!: LeaderboardDifficulty[];
+
+  /**
+   * The maximum score of the leaderboard.
+   * @private
+   */
+  @Prop({ required: true })
+  readonly maxScore!: number;
+
+  /**
+   * Whether the leaderboard is ranked.
+   * @private
+   */
+  @Prop({ required: true })
+  readonly ranked!: boolean;
+
+  /**
+   * The link to the song art.
+   * @private
+   */
+  @Prop({ required: true })
+  readonly songArt!: string;
+
+  /**
+   * The date the leaderboard was created.
+   * @private
+   */
+  @Prop({ required: true })
+  readonly timestamp!: Date;
+
+  /**
+   * The date the leaderboard was last refreshed.
+   * @private
+   */
+  @Prop({ required: true })
+  lastRefreshed?: Date;
+
+  get id(): number {
+    return this._id ?? 0;
+  }
+}

projects/common/src/model/player.ts

@@ -14,12 +14,24 @@ export class Player {
   @prop()
   public _id!: string;
 
+  /**
+   * The player's name.
+   */
+  @prop()
+  public name?: string;
+
   /**
    * The player's statistic history.
    */
   @prop()
   private statisticHistory?: Record<string, PlayerHistory>;
 
+  /**
+   * Whether the player has their scores seeded.
+   */
+  @prop()
+  public seededScores?: boolean;
+
   /**
    * The date the player was last tracked.
    */

projects/common/src/model/score/impl/scoresaber-score.ts

@@ -3,6 +3,7 @@ import Score from "../score";
 import { type ScoreSaberLeaderboardPlayerInfoToken } from "../../../types/token/scoresaber/score-saber-leaderboard-player-info-token";
 import { Document } from "mongoose";
 import { AutoIncrementID } from "@typegoose/auto-increment";
+import { PreviousScore } from "../previous-score";
 
 @modelOptions({
   options: { allowMixed: Severity.ALLOW },
@@ -43,8 +44,8 @@ export class ScoreSaberScoreInternal extends Score {
    * The amount of pp for the score.
    * @private
    */
-  @Prop({ required: true })
-  public readonly pp!: number;
+  @Prop({ required: true, index: true })
+  public pp!: number;
 
   /**
    * The weight of the score, or undefined if not ranked.
@@ -58,6 +59,11 @@ export class ScoreSaberScoreInternal extends Score {
    */
   @Prop({ required: true })
   public readonly maxCombo!: number;
+
+  /**
+   * The previous score, if any.
+   */
+  public previousScore?: ScoreSaberPreviousScore;
 }
 
 class ScoreSaberScorePublic extends ScoreSaberScoreInternal {
@@ -67,6 +73,28 @@ class ScoreSaberScorePublic extends ScoreSaberScoreInternal {
   public playerInfo!: ScoreSaberLeaderboardPlayerInfoToken;
 }
 
+export type ScoreSaberPreviousScore = PreviousScore & {
+  /**
+   * The pp of the previous score.
+   */
+  pp: number;
+
+  /**
+   * The weight of the previous score.
+   */
+  weight: number;
+
+  /**
+   * The max combo of the previous score.
+   */
+  maxCombo: number;
+
+  /**
+   * The change between the previous score and the current score.
+   */
+  change?: ScoreSaberPreviousScore;
+};
+
 export type ScoreSaberScore = InstanceType<typeof ScoreSaberScorePublic>;
 export type ScoreSaberScoreDocument = ScoreSaberScore & Document;
 export const ScoreSaberScoreModel: ReturnModelType<typeof ScoreSaberScoreInternal> =

projects/common/src/model/score/previous-score.ts

@@ -0,0 +1,43 @@
+import { Modifier } from "../../score/modifier";
+
+export type PreviousScore = {
+  /**
+   * The score of the previous score.
+   */
+  score: number;
+
+  /**
+   * The accuracy of the previous score.
+   */
+  accuracy: number;
+
+  /**
+   * The modifiers of the previous score.
+   */
+  modifiers?: Modifier[];
+
+  /**
+   * The misses of the previous score.
+   */
+  misses: number;
+
+  /**
+   * The missed notes of the previous score.
+   */
+  missedNotes: number;
+
+  /**
+   * The bad cuts of the previous score.
+   */
+  badCuts: number;
+
+  /**
+   * The full combo of the previous score.
+   */
+  fullCombo?: boolean;
+
+  /**
+   * When the previous score was set.
+   */
+  timestamp: Date;
+};

projects/common/src/model/score/score.ts

@@ -12,7 +12,7 @@ export default class Score {
    * The internal score id.
    */
   @prop()
-  private _id?: number;
+  public _id?: number;
 
   /**
    * The id of the player who set the score.
@@ -95,7 +95,7 @@ export default class Score {
    * The time the score was set.
    * @private
    */
-  @prop({ required: true })
+  @prop({ required: true, index: true })
   public readonly timestamp!: Date;
 }
 

projects/common/src/pagination.ts

@@ -1,28 +1,15 @@
-import { NotFoundError } from "backend/src/error/not-found-error";
 import { Metadata } from "./types/metadata";
+import { NotFoundError } from "./error/not-found-error";
+
+type FetchItemsFunction<T> = (fetchItems: FetchItems) => Promise<T[]>;
 
 export class Pagination<T> {
-  /**
-   * The amount of items per page.
-   * @private
-   */
   private itemsPerPage: number = 0;
-
-  /**
-   * The amount of items in total.
-   * @private
-   */
   private totalItems: number = 0;
-
-  /**
-   * The items to paginate.
-   * @private
-   */
-  private items: T[] = [];
+  private items: T[] | null = null; // Optional array to hold set items
 
   /**
    * Sets the number of items per page.
-   *
    * @param itemsPerPage - The number of items per page.
    * @returns the pagination
    */
@@ -33,8 +20,7 @@ export class Pagination<T> {
 
   /**
    * Sets the items to paginate.
-   *
-   * @param items the items to paginate
+   * @param items - The items to paginate.
    * @returns the pagination
    */
   setItems(items: T[]): Pagination<T> {
@@ -44,25 +30,59 @@ export class Pagination<T> {
   }
 
   /**
-   * Gets a page of items.
-   *
-   * @param page the page number to retrieve.
-   * @returns the page of items.
+   * Sets the total number of items.
+   * @param totalItems - Total number of items.
+   * @returns the pagination
+   */
+  setTotalItems(totalItems: number): Pagination<T> {
+    this.totalItems = totalItems;
+    return this;
+  }
+
+  /**
+   * Gets a page of items, using either static items or a dynamic fetchItems callback.
+   * @param page - The page number to retrieve.
+   * @param fetchItems - The async function to fetch items if setItems was not used.
+   * @returns A promise resolving to the page of items.
    * @throws throws an error if the page number is invalid.
    */
-  getPage(page: number): Page<T> {
+  async getPage(page: number, fetchItems?: FetchItemsFunction<T>): Promise<Page<T>> {
     const totalPages = Math.ceil(this.totalItems / this.itemsPerPage);
 
     if (page < 1 || page > totalPages) {
       throw new NotFoundError("Invalid page number");
     }
 
-    const items = this.items.slice((page - 1) * this.itemsPerPage, page * this.itemsPerPage);
-    return new Page<T>(items, new Metadata(totalPages, this.totalItems, page, this.itemsPerPage));
+    // Calculate the range of items to fetch for the current page
+    const start = (page - 1) * this.itemsPerPage;
+    const end = start + this.itemsPerPage;
+
+    let pageItems: T[];
+
+    // Use set items if they are present, otherwise use fetchItems callback
+    if (this.items) {
+      pageItems = this.items.slice(start, end);
+    } else if (fetchItems) {
+      pageItems = await fetchItems(new FetchItems(start, end));
+    } else {
+      throw new Error("Items function is not set and no fetchItems callback provided");
+    }
+
+    return new Page<T>(pageItems, new Metadata(totalPages, this.totalItems, page, this.itemsPerPage));
   }
 }
 
-class Page<T> {
+class FetchItems {
+  readonly start: number;
+  readonly end: number;
+
+  constructor(start: number, end: number) {
+    this.start = start;
+    this.end = end;
+  }
+}
+
+export class Page<T> {
   readonly items: T[];
   readonly metadata: Metadata;
 
@@ -70,4 +90,14 @@ class Page<T> {
     this.items = items;
     this.metadata = metadata;
   }
+
+  /**
+   * Converts the page to a JSON object.
+   */
+  toJSON() {
+    return {
+      items: this.items,
+      metadata: this.metadata,
+    };
+  }
 }

projects/common/src/player/player-stat-change.ts

@@ -1,5 +1,5 @@
 import ScoreSaberPlayer from "./impl/scoresaber-player";
-import { ChangeRange } from "./player";
+import { StatisticRange } from "./player";
 
 export type PlayerStatValue = {
   /**
@@ -10,7 +10,7 @@ export type PlayerStatValue = {
   /**
    * The value of the stat.
    */
-  value: (player: ScoreSaberPlayer, range: ChangeRange) => number | undefined;
+  value: (player: ScoreSaberPlayer, range: StatisticRange) => number | undefined;
 };
 
 export type PlayerStatChangeType =

projects/common/src/player/player.ts

@@ -55,7 +55,7 @@ export default class Player {
   }
 }
 
-export type ChangeRange = "daily" | "weekly" | "monthly";
+export type StatisticRange = "daily" | "weekly" | "monthly";
 export type StatisticChange = {
-  [key in ChangeRange]: PlayerHistory;
+  [key in StatisticRange]: PlayerHistory;
 };

projects/common/src/response/top-scores-response.ts

@@ -0,0 +1,21 @@
+import { ScoreSaberLeaderboard } from "src/model/leaderboard/impl/scoresaber-leaderboard";
+import { ScoreSaberScore } from "../model/score/impl/scoresaber-score";
+import { PlayerScore } from "../score/player-score";
+import { Timeframe } from "../timeframe";
+
+export type TopScoresResponse = {
+  /**
+   * The top scores.
+   */
+  scores: PlayerScore<ScoreSaberScore, ScoreSaberLeaderboard>[];
+
+  /**
+   * The timeframe returned.
+   */
+  timeframe: Timeframe;
+
+  /**
+   * The amount of scores to fetch.
+   */
+  limit: number;
+};

projects/common/src/service/impl/scoresaber.ts

@@ -7,7 +7,7 @@ import ScoreSaberPlayerScoresPageToken from "../../types/token/scoresaber/score-
 import ScoreSaberLeaderboardToken from "../../types/token/scoresaber/score-saber-leaderboard-token";
 import ScoreSaberLeaderboardScoresPageToken from "../../types/token/scoresaber/score-saber-leaderboard-scores-page-token";
 import { clamp, lerp } from "../../utils/math-utils";
-import { CurvePoint } from "../../utils/curve-point";
+import { CurvePoint } from "../../curve-point";
 import { SSRCache } from "../../cache";
 
 const API_BASE = "https://scoresaber.com/api";
@@ -30,7 +30,7 @@ const LOOKUP_LEADERBOARD_SCORES_ENDPOINT = `${API_BASE}/leaderboard/by-id/:id/sc
 const STAR_MULTIPLIER = 42.117208413;
 
 const playerCache = new SSRCache({
-  ttl: 60 * 30, // 30 minutes
+  ttl: 60, // 1 minute
 });
 
 class ScoreSaberService extends Service {
@@ -167,22 +167,22 @@ class ScoreSaberService extends Service {
    *
    * @param playerId the ID of the player to look up
    * @param sort the sort to use
+   * @param limit the amount of sores to fetch
    * @param page the page to get scores for
-   * @param limit the amount of scores to fetch
-   * @param search
+   * @param search the query to search for
    * @returns the scores of the player, or undefined
    */
   public async lookupPlayerScores({
     playerId,
     sort,
-    page,
     limit = 8,
+    page,
     search,
   }: {
     playerId: string;
     sort: ScoreSort;
-    page: number;
     limit?: number;
+    page: number;
     search?: string;
     useProxy?: boolean;
   }): Promise<ScoreSaberPlayerScoresPageToken | undefined> {

projects/common/src/sorter/impl/scoresaber-sorter.ts

@@ -1,69 +0,0 @@
-import { ScoreSorter } from "../score-sorter";
-import { ScoreSaberScore } from "../../model/score/impl/scoresaber-score";
-import { ScoreSortType } from "../sort-type";
-import { SortDirection } from "../sort-direction";
-
-export class ScoreSaberScoreSorter extends ScoreSorter<ScoreSaberScore> {
-  sort(type: ScoreSortType, direction: SortDirection, items: ScoreSaberScore[]): ScoreSaberScore[] {
-    switch (type) {
-      case ScoreSortType.date:
-        return this.sortRecent(direction, items);
-      case ScoreSortType.pp:
-        return this.sortPp(direction, items);
-      case ScoreSortType.accuracy:
-        return this.sortAccuracy(direction, items);
-      case ScoreSortType.misses:
-        return this.sortMisses(direction, items);
-      default:
-        return items;
-    }
-  }
-
-  /**
-   * Sorts the scores by the time they were set.
-   *
-   * @param direction the direction to sort the scores
-   * @param items the scores to sort
-   * @returns the sorted scores
-   */
-  sortRecent(direction: SortDirection, items: ScoreSaberScore[]): ScoreSaberScore[] {
-    return items.sort((a, b) =>
-      direction === SortDirection.ASC
-        ? a.timestamp.getTime() - b.timestamp.getTime()
-        : b.timestamp.getTime() - a.timestamp.getTime()
-    );
-  }
-
-  /**
-   * Sorts the scores by their pp value
-   *
-   * @param direction the direction to sort the scores
-   * @param items the scores to sort
-   * @returns the sorted scores
-   */
-  sortPp(direction: SortDirection, items: ScoreSaberScore[]): ScoreSaberScore[] {
-    return items.sort((a, b) => (direction === SortDirection.ASC ? a.pp - b.pp : b.pp - a.pp));
-  }
-
-  /**
-   * Sorts the scores by their accuracy value
-   *
-   * @param direction the direction to sort the scores
-   * @param items the scores to sort
-   * @returns the sorted scores
-   */
-  sortAccuracy(direction: SortDirection, items: ScoreSaberScore[]): ScoreSaberScore[] {
-    return items.sort((a, b) => (direction === SortDirection.ASC ? a.accuracy - b.accuracy : b.accuracy - a.accuracy));
-  }
-
-  /**
-   * Sorts the scores by their misses
-   *
-   * @param direction the direction to sort the scores
-   * @param items the scores to sort
-   * @returns the sorted scores
-   */
-  sortMisses(direction: SortDirection, items: ScoreSaberScore[]): ScoreSaberScore[] {
-    return items.sort((a, b) => (direction === SortDirection.ASC ? a.misses - b.misses : b.misses - a.misses));
-  }
-}

projects/common/src/sorter/score-sorter.ts

@@ -1,14 +0,0 @@
-import { ScoreSortType } from "./sort-type";
-import { SortDirection } from "./sort-direction";
-
-export abstract class ScoreSorter<T> {
-  /**
-   * Sorts the items
-   *
-   * @param type the type of sort
-   * @param direction the direction of the sort
-   * @param items the items to sort
-   * @returns the sorted items
-   */
-  public abstract sort(type: ScoreSortType, direction: SortDirection, items: T[]): T[];
-}

projects/common/src/sorter/sort-direction.ts

@@ -1,4 +0,0 @@
-export enum SortDirection {
-  ASC = "asc",
-  DESC = "desc",
-}

projects/common/src/sorter/sort-type.ts

@@ -1,6 +0,0 @@
-export enum ScoreSortType {
-  date = "date",
-  pp = "pp",
-  accuracy = "accuracy",
-  misses = "misses",
-}

projects/common/src/sorter/sorters.ts

@@ -1,5 +0,0 @@
-import { ScoreSaberScoreSorter } from "./impl/scoresaber-sorter";
-
-export const ScoreSorters = {
-  scoreSaber: new ScoreSaberScoreSorter(),
-};

projects/common/src/timeframe.ts

@@ -0,0 +1 @@
+export type Timeframe = "daily" | "weekly" | "monthly";

projects/common/src/token-creators.ts

@@ -1,9 +1,9 @@
-import ScoreSaberLeaderboard from "./leaderboard/impl/scoresaber-leaderboard";
+import ScoreSaberLeaderboard from "./model/leaderboard/impl/scoresaber-leaderboard";
 import ScoreSaberLeaderboardToken from "./types/token/scoresaber/score-saber-leaderboard-token";
-import LeaderboardDifficulty from "./leaderboard/leaderboard-difficulty";
+import LeaderboardDifficulty from "./model/leaderboard/leaderboard-difficulty";
 import { getDifficultyFromScoreSaberDifficulty } from "./utils/scoresaber-utils";
 import { MapCharacteristic } from "./types/map-characteristic";
-import { LeaderboardStatus } from "./leaderboard/leaderboard-status";
+import { LeaderboardStatus } from "./model/leaderboard/leaderboard-status";
 import { formatDateMinimal, getDaysAgoDate, getMidnightAlignedDate, parseDate } from "./utils/time-utils";
 import ScoreSaberPlayerToken from "./types/token/scoresaber/score-saber-player-token";
 import ScoreSaberPlayer, { ScoreSaberBadge, ScoreSaberBio } from "./player/impl/scoresaber-player";
@@ -97,7 +97,7 @@ export function getScoreSaberScoreFromToken(
     difficulty: leaderboard.difficulty.difficulty,
     characteristic: leaderboard.difficulty.characteristic,
     score: token.baseScore,
-    accuracy: (token.baseScore / leaderboard.maxScore) * 100,
+    accuracy: leaderboard.maxScore ? (token.baseScore / leaderboard.maxScore) * 100 : Infinity,
     rank: token.rank,
     modifiers: modifiers,
     misses: token.missedNotes + token.badCuts,

projects/common/src/types/backend/app-statistics.ts

@@ -18,4 +18,9 @@ export type AppStatistics = {
    * The amount of cached BeatSaver maps.
    */
   cachedBeatSaverMaps: number;
+
+  /**
+   * The amount of cached ScoreSaber leaderboards.
+   */
+  cachedScoreSaberLeaderboards: number;
 };

projects/common/src/types/token/scoresaber/score-saber-leaderboard-player-info-token.ts

@@ -1,8 +1,8 @@
 export type ScoreSaberLeaderboardPlayerInfoToken = {
   id: string;
-  name: string;
-  profilePicture: string;
-  country: string;
-  permissions: number;
-  role: string;
+  name?: string;
+  profilePicture?: string;
+  country?: string;
+  permissions?: number;
+  role?: string;
 };

projects/common/src/utils/cookie-utils.ts

@@ -1,6 +1,6 @@
 import { isServer } from "./utils";
 
-export type CookieName = "playerId" | "lastScoreSort" | "lastScoreSortDirection";
+export type CookieName = "playerId" | "lastScoreSort";
 
 /**
  * Gets the value of a cookie

projects/common/src/utils/score-utils.ts

@@ -4,8 +4,23 @@ import PlayerScoresResponse from "../response/player-scores-response";
 import { Config } from "../config";
 import { ScoreSort } from "../score/score-sort";
 import LeaderboardScoresResponse from "../response/leaderboard-scores-response";
-import { ScoreSortType } from "../sorter/sort-type";
-import { SortDirection } from "../sorter/sort-direction";
+import { Page } from "../pagination";
+import { ScoreSaberScore } from "src/model/score/impl/scoresaber-score";
+import { PlayerScore } from "../score/player-score";
+import ScoreSaberLeaderboard from "../model/leaderboard/impl/scoresaber-leaderboard";
+
+/**
+ * Fetches the player's scores
+ *
+ * @param playerId the id of the player
+ * @param leaderboardId the id of the leaderboard
+ * @param page the page
+ */
+export async function fetchPlayerScoresHistory(playerId: string, leaderboardId: string, page: number) {
+  return kyFetch<Page<PlayerScore<ScoreSaberScore, ScoreSaberLeaderboard>>>(
+    `${Config.apiUrl}/scores/history/${playerId}/${leaderboardId}/${page}`
+  );
+}
 
 /**
  * Fetches the player's scores
@@ -14,19 +29,17 @@ import { SortDirection } from "../sorter/sort-direction";
  * @param id the player id
  * @param page the page
  * @param sort the sort
- * @param direction the direction to sort
  * @param search the search
  */
 export async function fetchPlayerScores<S, L>(
   leaderboard: Leaderboards,
   id: string,
   page: number,
-  sort: ScoreSortType,
-  direction: SortDirection,
+  sort: ScoreSort,
   search?: string
 ) {
   return kyFetch<PlayerScoresResponse<S, L>>(
-    `${Config.apiUrl}/scores/player/${leaderboard}/${id}/${page}/${sort}/${direction}${search ? `?search=${search}` : ""}`
+    `${Config.apiUrl}/scores/player/${leaderboard}/${id}/${page}/${sort}${search ? `?search=${search}` : ""}`
   );
 }
 

projects/common/src/utils/string.util.ts

@@ -0,0 +1,14 @@
+/**
+ * Generates a random string
+ *
+ * @param length the length of the string
+ * @returns the random string
+ */
+export function randomString(length: number) {
+  const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+  let result = "";
+  for (let i = 0; i < length; i++) {
+    result += chars.charAt(Math.floor(Math.random() * chars.length));
+  }
+  return result;
+}

projects/common/src/utils/utils.ts

@@ -43,7 +43,6 @@ export async function kyFetch<T>(url: string): Promise<T | undefined> {
   try {
     return await ky.get<T>(url).json();
   } catch (error) {
-    console.error(`Error fetching data from ${url}:`, error);
     return undefined;
   }
 }

projects/website/Dockerfile

@@ -14,6 +14,8 @@ WORKDIR /app
 ENV NODE_ENV production
 ARG GIT_REV
 ENV GIT_REV=${GIT_REV}
+ARG SENTRY_AUTH_TOKEN
+ENV SENTRY_AUTH_TOKEN=${SENTRY_AUTH_TOKEN}
 
 # Copy the depends
 COPY --from=depends /app/package.json* /app/bun.lockb* ./

projects/website/next.config.ts

@@ -1,12 +1,16 @@
 import { withSentryConfig } from "@sentry/nextjs";
 import { format } from "@formkit/tempo";
+import nextBundleAnalyzer from "@next/bundle-analyzer";
+import type { NextConfig } from "next";
+import { isProduction } from "@/common/website-utils";
 
-/** @type {import('next').NextConfig} */
-const nextConfig = {
+const nextConfig: NextConfig = {
   experimental: {
+    webpackMemoryOptimizations: true,
     optimizePackageImports: ["@ssr/common", "@radix-ui/react-icons", "chart.js", "react-chartjs-2"],
   },
   images: {
+    unoptimized: true,
     remotePatterns: [
       {
         protocol: "https",
@@ -34,22 +38,21 @@ const nextConfig = {
   },
 };
 
-export default withSentryConfig(nextConfig, {
-  org: "scoresaber-reloaded",
-  project: "frontend",
-  sentryUrl: "https://glitchtip.fascinated.cc/",
-  silent: !process.env.CI,
-  reactComponentAnnotation: {
-    enabled: true,
-  },
-  tunnelRoute: "/monitoring",
-  hideSourceMaps: true,
-  disableLogger: true,
-  sourcemaps: {
-    disable: true,
-  },
-  release: {
-    create: false,
-    finalize: false,
-  },
+const withBundleAnalyzer = nextBundleAnalyzer({
+  enabled: process.env.ANALYZE === "true",
 });
+
+const config = withBundleAnalyzer(nextConfig);
+export default isProduction()
+  ? withSentryConfig(config, {
+      org: "fascinatedcc",
+      project: "scoresaber-reloaded",
+      silent: !process.env.CI,
+      widenClientFileUpload: true,
+      reactComponentAnnotation: {
+        enabled: true,
+      },
+      hideSourceMaps: true,
+      disableLogger: true,
+    })
+  : config;

projects/website/package.json

@@ -6,6 +6,7 @@
     "dev": "next dev --turbo",
     "dev-debug": "cross-env NODE_OPTIONS='--inspect' next dev --turbo",
     "build": "next build",
+    "build:analyze": "cross-env ANALYZE=true next build",
     "start": "next start",
     "lint": "next lint"
   },
@@ -13,16 +14,18 @@
     "@formkit/tempo": "^0.1.2",
     "@heroicons/react": "^2.1.5",
     "@hookform/resolvers": "^3.9.0",
+    "@next/bundle-analyzer": "^15.0.1",
     "@radix-ui/react-avatar": "^1.1.0",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-scroll-area": "^1.1.0",
+    "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slider": "^1.2.1",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-toast": "^1.2.1",
     "@radix-ui/react-tooltip": "^1.1.2",
-    "@sentry/nextjs": "8.35.0",
+    "@sentry/nextjs": "8",
     "@ssr/common": "workspace:*",
     "@tanstack/react-query": "^5.55.4",
     "@uidotdev/usehooks": "^2.4.1",
@@ -30,16 +33,17 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "comlink": "^4.4.1",
+    "cross-env": "^7.0.3",
     "dexie": "^4.0.8",
     "dexie-react-hooks": "^1.1.7",
-    "framer-motion": "^11.5.4",
+    "framer-motion": "^11.11.10",
     "js-cookie": "^3.0.5",
     "ky": "^1.7.2",
     "lucide-react": "^0.453.0",
-    "next": "^15.0.0",
+    "next": "^15.0.1",
     "next-build-id": "^3.0.0",
     "next-themes": "^0.3.0",
-    "react": "18.3.1",
+    "react": "^18.3.1",
     "react-chartjs-2": "^5.2.0",
     "react-countup": "^6.5.3",
     "react-dom": "18.3.1",

projects/website/public/assets/logos/discord.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 127.14 96.36">
+    <path fill="#fff"
+          d="M107.7,8.07A105.15,105.15,0,0,0,81.47,0a72.06,72.06,0,0,0-3.36,6.83A97.68,97.68,0,0,0,49,6.83,72.37,72.37,0,0,0,45.64,0,105.89,105.89,0,0,0,19.39,8.09C2.79,32.65-1.71,56.6.54,80.21h0A105.73,105.73,0,0,0,32.71,96.36,77.7,77.7,0,0,0,39.6,85.25a68.42,68.42,0,0,1-10.85-5.18c.91-.66,1.8-1.34,2.66-2a75.57,75.57,0,0,0,64.32,0c.87.71,1.76,1.39,2.66,2a68.68,68.68,0,0,1-10.87,5.19,77,77,0,0,0,6.89,11.1A105.25,105.25,0,0,0,126.6,80.22h0C129.24,52.84,122.09,29.11,107.7,8.07ZM42.45,65.69C36.18,65.69,31,60,31,53s5-12.74,11.43-12.74S54,46,53.89,53,48.84,65.69,42.45,65.69Zm42.24,0C78.41,65.69,73.25,60,73.25,53s5-12.74,11.44-12.74S96.23,46,96.12,53,91.08,65.69,84.69,65.69Z"/>
+</svg>

projects/website/sentry.client.config.ts

@@ -5,8 +5,24 @@
 import * as Sentry from "@sentry/nextjs";
 
 Sentry.init({
-  dsn: "https://69aed8b4a32e45db8fcb1b4285b4370f@glitchtip.fascinated.cc/13",
-  tracesSampleRate: 0.1,
+  dsn: "https://2b0d6c2e72099dee7db2ce9c030651bd@o4508202509205504.ingest.de.sentry.io/4508202511302736",
+
+  // Add optional integrations for additional features
+  integrations: [
+    Sentry.replayIntegration(),
+  ],
+
+  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
+  tracesSampleRate: 1,
+
+  // Define how likely Replay events are sampled.
+  // This sets the sample rate to be 10%. You may want this to be 100% while
+  // in development and sample at a lower rate in production
+  replaysSessionSampleRate: 0.1,
+
+  // Define how likely Replay events are sampled when an error occurs.
+  replaysOnErrorSampleRate: 1.0,
+
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
   debug: false,
-  enabled: process.env.NODE_ENV === "production",
 });

projects/website/sentry.edge.config.ts

@@ -6,8 +6,11 @@
 import * as Sentry from "@sentry/nextjs";
 
 Sentry.init({
-  dsn: "https://69aed8b4a32e45db8fcb1b4285b4370f@glitchtip.fascinated.cc/13",
-  tracesSampleRate: 0.1,
+  dsn: "https://2b0d6c2e72099dee7db2ce9c030651bd@o4508202509205504.ingest.de.sentry.io/4508202511302736",
+
+  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
+  tracesSampleRate: 1,
+
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
   debug: false,
-  enabled: process.env.NODE_ENV === "production",
 });

projects/website/sentry.server.config.ts

@@ -5,8 +5,11 @@
 import * as Sentry from "@sentry/nextjs";
 
 Sentry.init({
-  dsn: "https://69aed8b4a32e45db8fcb1b4285b4370f@glitchtip.fascinated.cc/13",
-  tracesSampleRate: 0.1,
+  dsn: "https://2b0d6c2e72099dee7db2ce9c030651bd@o4508202509205504.ingest.de.sentry.io/4508202511302736",
+
+  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
+  tracesSampleRate: 1,
+
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
   debug: false,
-  enabled: process.env.NODE_ENV === "production",
 });

projects/website/src/app/(pages)/leaderboard/[...slug]/page.tsx

@@ -6,7 +6,7 @@ import { LeaderboardData } from "@/components/leaderboard/leaderboard-data";
 import { Config } from "@ssr/common/config";
 import { ScoreSaberScore } from "@ssr/common/model/score/impl/scoresaber-score";
 import { LeaderboardResponse } from "@ssr/common/response/leaderboard-response";
-import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard";
+import ScoreSaberLeaderboard from "@ssr/common/model/leaderboard/impl/scoresaber-leaderboard";
 import { fetchLeaderboard } from "@ssr/common/utils/leaderboard.util";
 import { fetchLeaderboardScores } from "@ssr/common/utils/score-utils";
 import LeaderboardScoresResponse from "@ssr/common/response/leaderboard-scores-response";

projects/website/src/app/(pages)/page.tsx

@@ -1,40 +1,20 @@
-import { Button } from "@/components/ui/button";
-import Link from "next/link";
-import { AppStatistics } from "@ssr/common/types/backend/app-statistics";
-import Statistic from "@/components/home/statistic";
-import { kyFetch } from "@ssr/common/utils/utils";
-import { Config } from "@ssr/common/config";
-
-export const dynamic = "force-dynamic"; // Always generate the page on load
+import HeroSection from "@/components/home/hero";
+import DataCollection from "@/components/home/data-collection";
+import Friends from "@/components/home/friends";
+import SiteStats from "@/components/home/site-stats";
+import RealtimeScores from "@/components/home/realtime-scores";
 
 export default async function HomePage() {
-  const statistics = await kyFetch<AppStatistics>(Config.apiUrl + "/statistics");
-
   return (
-    <main className="flex flex-col items-center w-full gap-6 text-center">
-      <div className="flex items-center flex-col">
-        <p className="font-semibold text-2xl">ScoreSaber Reloaded</p>
-        <p className="text-center">Welcome to the ScoreSaber Reloaded website.</p>
-      </div>
-
-      <div className="flex items-center flex-col">
-        <p>ScoreSaber Reloaded is a website that allows you to track your ScoreSaber data over time.</p>
-      </div>
-
-      {statistics && (
-        <div className="flex items-center flex-col">
-          <p className="font-semibold">Site Statistics</p>
-          <Statistic title="Tracked Players" value={statistics.trackedPlayers} />
-          <Statistic title="Tracked Scores" value={statistics.trackedScores} />
-          <Statistic title="Additional Scores Data" value={statistics.additionalScoresData} />
-          <Statistic title="Cached BeatSaver Maps" value={statistics.cachedBeatSaverMaps} />
+    <main className="-mt-3 w-screen min-h-screen bg-gradient-to-b from-[#0f0f0f] via-[#1a1a1a] to-[#0f0f0f]">
+      <div className="flex flex-col items-center">
+        <div className="max-w-screen-2xl mt-48 mb-14 flex flex-col gap-64">
+          <HeroSection />
+          <DataCollection />
+          <Friends />
+          <SiteStats />
+          <RealtimeScores />
         </div>
-      )}
-
-      <div className="flex gap-2 flex-wrap">
-        <Link href="/search">
-          <Button className="w-fit">Get started</Button>
-        </Link>
       </div>
     </main>
   );

projects/website/src/app/(pages)/player/[...slug]/page.tsx

@@ -7,14 +7,14 @@ import { scoresaberService } from "@ssr/common/service/impl/scoresaber";
 import { getCookieValue } from "@ssr/common/utils/cookie-utils";
 import { Config } from "@ssr/common/config";
 import ScoreSaberPlayer from "@ssr/common/player/impl/scoresaber-player";
+import { ScoreSort } from "@ssr/common/score/score-sort";
 import { ScoreSaberScore } from "@ssr/common/model/score/impl/scoresaber-score";
-import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard";
+import ScoreSaberLeaderboard from "@ssr/common/model/leaderboard/impl/scoresaber-leaderboard";
 import { fetchPlayerScores } from "@ssr/common/utils/score-utils";
 import PlayerScoresResponse from "@ssr/common/response/player-scores-response";
-import { SSRCache } from "@ssr/common/cache";
 import { getScoreSaberPlayerFromToken } from "@ssr/common/token-creators";
-import { ScoreSortType } from "@ssr/common/sorter/sort-type";
-import { SortDirection } from "@ssr/common/sorter/sort-direction";
+import { cache } from "react";
+import { randomString } from "@ssr/common/utils/string.util";
 
 const UNKNOWN_PLAYER = {
   title: "ScoreSaber Reloaded - Unknown Player",
@@ -33,14 +33,14 @@ type Props = {
 type PlayerData = {
   player: ScoreSaberPlayer | undefined;
   scores: PlayerScoresResponse<ScoreSaberScore, ScoreSaberLeaderboard> | undefined;
-  sort: ScoreSortType;
-  direction: SortDirection;
+  sort: ScoreSort;
   page: number;
   search: string;
 };
 
-const playerCache = new SSRCache({
-  ttl: 1000 * 60, // 1 minute
+const getPlayer = cache(async (id: string): Promise<ScoreSaberPlayer | undefined> => {
+  const playerToken = await scoresaberService.lookupPlayer(id, true);
+  return playerToken && (await getScoreSaberPlayerFromToken(playerToken, await getCookieValue("playerId")));
 });
 
 /**
@@ -50,45 +50,27 @@ const playerCache = new SSRCache({
  * @param fetchScores whether to fetch the scores
  * @returns the player data and scores
  */
-const getPlayerData = async ({ params }: Props, fetchScores: boolean = true): Promise<PlayerData> => {
+const getPlayerData = cache(async ({ params }: Props, fetchScores: boolean = true): Promise<PlayerData> => {
   const { slug } = await params;
   const id = slug[0]; // The players id
-  const sort: ScoreSortType = (slug[1] as ScoreSortType) || (await getCookieValue("lastScoreSort", ScoreSortType.date)); // The sorting method
-  const direction: SortDirection =
-    (slug[2] as SortDirection) || (await getCookieValue("lastScoreSortDirection", SortDirection.DESC)); // The sorting direction
-  const page = parseInt(slug[3]) || 1; // The page number
-  const search = (slug[4] as string) || ""; // The search query
+  const sort: ScoreSort = (slug[1] as ScoreSort) || (await getCookieValue("lastScoreSort", "recent")); // The sorting method
+  const page = parseInt(slug[2]) || 1; // The page number
+  const search = (slug[3] as string) || ""; // The search query
 
-  const cacheId = `${id}-${sort}-${page}-${search}-${fetchScores}`;
-  if (playerCache.has(cacheId)) {
-    return playerCache.get(cacheId) as PlayerData;
-  }
-
-  const playerToken = await scoresaberService.lookupPlayer(id);
-  const player = playerToken && (await getScoreSaberPlayerFromToken(playerToken, await getCookieValue("playerId")));
+  const player = await getPlayer(id);
   let scores: PlayerScoresResponse<ScoreSaberScore, ScoreSaberLeaderboard> | undefined;
-  if (fetchScores) {
-    scores = await fetchPlayerScores<ScoreSaberScore, ScoreSaberLeaderboard>(
-      "scoresaber",
-      id,
-      page,
-      sort,
-      direction,
-      search
-    );
+  if (fetchScores && player !== undefined) {
+    scores = await fetchPlayerScores<ScoreSaberScore, ScoreSaberLeaderboard>("scoresaber", id, page, sort, search);
   }
 
-  const playerData = {
+  return {
     sort: sort,
-    direction: direction,
     page: page,
     search: search,
     player: player,
     scores: scores,
   };
-  playerCache.set(cacheId, playerData);
-  return playerData;
-};
+});
 
 export async function generateMetadata(props: Props): Promise<Metadata> {
   const { player } = await getPlayerData(props, false);
@@ -110,7 +92,7 @@ export async function generateMetadata(props: Props): Promise<Metadata> {
       description: `Click here to view the scores for ${player.name}!`,
       images: [
         {
-          url: `${Config.apiUrl}/image/player/${player.id}`,
+          url: `${Config.apiUrl}/image/player/${player.id}?id=${randomString(8)}`,
         },
       ],
     },
@@ -135,21 +117,14 @@ export async function generateViewport(props: Props): Promise<Viewport> {
 }
 
 export default async function PlayerPage(props: Props) {
-  const { player, scores, sort, direction, page, search } = await getPlayerData(props);
+  const { player, scores, sort, page, search } = await getPlayerData(props);
   if (player == undefined) {
     return redirect("/");
   }
 
   return (
     <div className="flex flex-col h-full w-full">
-      <PlayerData
-        initialPlayerData={player}
-        initialScoreData={scores}
-        initialSearch={search}
-        sort={sort}
-        direction={direction}
-        page={page}
-      />
+      <PlayerData initialPlayerData={player} initialScoreData={scores} initialSearch={search} sort={sort} page={page} />
     </div>
   );
 }

projects/website/src/app/(pages)/ranking/[[...slug]]/page.tsx

@@ -1,11 +1,11 @@
 import { Metadata } from "next";
 import { scoresaberService } from "@ssr/common/service/impl/scoresaber";
-import NodeCache from "node-cache";
 import { ScoreSaberPlayersPageToken } from "@ssr/common/types/token/scoresaber/score-saber-players-page-token";
 import Card from "@/components/card";
 import RankingData from "@/components/ranking/ranking-data";
 import CountryFlag from "@/components/country-flag";
 import { normalizedRegionName } from "@ssr/common/utils/region-utils";
+import { cache } from "react";
 
 const UNKNOWN_PAGE = {
   title: "ScoreSaber Reloaded - Unknown Page",
@@ -24,36 +24,27 @@ type RankingPageData = {
   country: string | undefined;
 };
 
-const rankingCache = new NodeCache({ stdTTL: 60, checkperiod: 120 });
-
 /**
  * Gets the ranking data.
  *
  * @param params the params
  * @returns the ranking data
  */
-const getRankingData = async ({ params }: Props): Promise<RankingPageData> => {
+const getRankingData = cache(async ({ params }: Props): Promise<RankingPageData> => {
   const { slug } = await params;
   const country = (slug && slug.length > 1 && (slug[0] as string).toUpperCase()) || undefined; // The country query
   const page = (slug && parseInt(slug[country != undefined ? 1 : 0])) || 1; // The page number
 
-  const cacheId = `${country === undefined ? "global" : country}-${page}`;
-  if (rankingCache.has(cacheId)) {
-    return rankingCache.get(cacheId) as RankingPageData;
-  }
-
   const players =
     country == undefined
       ? await scoresaberService.lookupPlayers(page)
       : await scoresaberService.lookupPlayersByCountry(page, country);
-  const rankingData = {
+  return {
     players: players && players.players.length > 0 ? players : undefined,
     page,
     country,
   };
-  rankingCache.set(cacheId, rankingData);
-  return rankingData;
-};
+});
 
 export async function generateMetadata(props: Props): Promise<Metadata> {
   const { players, page, country } = await getRankingData(props);

projects/website/src/app/(pages)/scores/live/page.tsx

@@ -0,0 +1,26 @@
+import { Metadata } from "next";
+import ScoreFeed from "@/components/score/score-feed/score-feed";
+import Card from "@/components/card";
+
+export const metadata: Metadata = {
+  title: "Score Feed",
+  openGraph: {
+    title: "ScoreSaber Reloaded - Live Scores",
+    description: "View the live scores set by players on ScoreSaber.",
+  },
+};
+
+export default function ScoresPage() {
+  return (
+    <main className="w-full min-h-screen flex justify-center">
+      <Card className="flex flex-col gap-2 w-full h-fit xl:w-[75%]">
+        <div>
+          <p className="font-semibold'">Live Score Feed</p>
+          <p className="text-gray-400">This is the real-time scores being set on ScoreSaber.</p>
+        </div>
+
+        <ScoreFeed />
+      </Card>
+    </main>
+  );
+}

projects/website/src/app/(pages)/scores/page.tsx

@@ -1,20 +0,0 @@
-import { Metadata } from "next";
-import ScoreFeed from "@/components/score/score-feed/score-feed";
-import Card from "@/components/card";
-
-export const metadata: Metadata = {
-  title: "Score Feed",
-};
-
-export default function ScoresPage() {
-  return (
-    <Card className="flex flex-col gap-2 w-full xl:w-[75%]">
-      <div>
-        <p className="font-semibold'">Live Score Feed</p>
-        <p className="text-gray-400">This is the real-time scores being set on ScoreSaber.</p>
-      </div>
-
-      <ScoreFeed />
-    </Card>
-  );
-}

projects/website/src/app/(pages)/scores/top/[timeframe]/page.tsx

@@ -0,0 +1,23 @@
+import { Metadata } from "next";
+import { Timeframe } from "@ssr/common/timeframe";
+import { TopScoresData } from "@/components/score/top/top-scores-data";
+
+export const metadata: Metadata = {
+  title: "Top Scores",
+  openGraph: {
+    title: "ScoreSaber Reloaded - Top Scores",
+    description: "View the top 50 scores set by players on ScoreSaber.",
+  },
+};
+
+type TopScoresPageProps = {
+  params: Promise<{
+    timeframe: Timeframe;
+  }>;
+};
+
+export default async function TopScoresPage({ params }: TopScoresPageProps) {
+  const { timeframe } = await params;
+
+  return <TopScoresData timeframe={timeframe} />;
+}

projects/website/src/app/(pages)/search/page.tsx

@@ -7,7 +7,7 @@ export const metadata: Metadata = {
 
 export default function SearchPage() {
   return (
-    <div className="flex flex-col items-center justify-center gap-2">
+    <div className="min-h-screen flex flex-col items-center justify-center gap-2">
       <div className="mb-4 mt-2 flex h-[150px] w-[150px] items-center justify-center rounded-full select-none bg-gray-600">
         <p className="text-9xl">?</p>
       </div>

projects/website/src/app/(pages)/settings/page.tsx

@@ -3,7 +3,7 @@ import Settings from "@/components/settings/settings";
 
 export default function SettingsPage() {
   return (
-    <main className="w-full">
+    <main className="min-h-screen w-full">
       <Card className="w-full gap-4">
         <div>
           <p className="font-semibold">Settings</p>

projects/website/src/app/layout.tsx

@@ -1,5 +1,4 @@
 import "./globals.css";
-import Footer from "@/components/footer";
 import { PreloadResources } from "@/components/preload-resources";
 import { QueryProvider } from "@/components/providers/query-provider";
 import { ThemeProvider } from "@/components/providers/theme-provider";
@@ -14,6 +13,8 @@ import { Colors } from "@/common/colors";
 import OfflineNetwork from "@/components/offline-network";
 import Script from "next/script";
 import { ApiHealth } from "@/components/api/api-health";
+import Footer from "@/components/footer";
+import { getBuildInformation } from "@/common/website-utils";
 
 const siteFont = localFont({
   src: "./fonts/JetBrainsMono.ttf",
@@ -66,6 +67,7 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  const { buildId, buildTimeShort } = getBuildInformation();
   return (
     <html lang="en">
       <body className={`${siteFont.className} antialiased w-full h-full`}>
@@ -79,12 +81,13 @@ export default function RootLayout({
               <ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange>
                 <QueryProvider>
                   <ApiHealth />
-                  <main className="flex flex-col min-h-screen gap-2 text-white w-full">
+                  <main className="flex flex-col min-h-screen text-white w-full">
                     <NavBar />
-                    <div className="z-[1] m-auto flex flex-col flex-grow items-center w-full md:max-w-[1600px]">
+                    <div className="mt-3 z-[1] m-auto flex flex-col flex-grow items-center w-full md:max-w-[1600px]">
                       {children}
                     </div>
-                    <Footer />
+                    {/*<Footer />*/}
+                    <Footer buildId={buildId} buildTimeShort={buildTimeShort} />
                   </main>
                 </QueryProvider>
               </ThemeProvider>

projects/website/src/common/database/database.ts

@@ -5,9 +5,14 @@ import ScoreSaberPlayerToken from "@ssr/common/types/token/scoresaber/score-sabe
 import { scoresaberService } from "@ssr/common/service/impl/scoresaber";
 import { setCookieValue } from "@ssr/common/utils/cookie-utils";
 import { trackPlayer } from "@ssr/common/utils/player-utils";
+import { SSRCache } from "@ssr/common/cache";
 
 const SETTINGS_ID = "SSR"; // DO NOT CHANGE
 
+const playerCache = new SSRCache({
+  ttl: 60 * 30, // 30 minutes
+});
+
 export default class Database extends Dexie {
   /**
    * The settings for the website.
@@ -79,7 +84,15 @@ export default class Database extends Dexie {
     if (settings == undefined || settings.playerId == undefined) {
       return;
     }
-    return scoresaberService.lookupPlayer(settings.playerId, true);
+    if (playerCache.has(settings.playerId)) {
+      return playerCache.get(settings.playerId);
+    }
+    const player = scoresaberService.lookupPlayer(settings.playerId);
+    if (player == undefined) {
+      return undefined;
+    }
+    playerCache.set(settings.playerId, player);
+    return player;
   }
 
   /**
@@ -119,10 +132,15 @@ export default class Database extends Dexie {
     const friends = await this.friends.toArray();
     const players = await Promise.all(
       friends.map(async ({ id }) => {
-        const token = await scoresaberService.lookupPlayer(id, true);
+        if (playerCache.has(id)) {
+          return playerCache.get(id);
+        }
+
+        const token = await scoresaberService.lookupPlayer(id);
         if (token == undefined) {
           return undefined;
         }
+        playerCache.set(id, token);
         await trackPlayer(id); // Track the player
         return token;
       })

projects/website/src/common/song-utils.ts

@@ -1,6 +1,6 @@
 import { MapDifficulty } from "@ssr/common/score/map-difficulty";
 
-type Difficulty = {
+export type Difficulty = {
   /**
    * The name of the difficulty
    */
@@ -63,14 +63,21 @@ export function getScoreBadgeFromAccuracy(acc: number): ScoreBadge {
   return scoreBadges[scoreBadges.length - 1];
 }
 
+/**
+ * Get a random difficulty, except ExpertPlus.
+ */
+export function getRandomDifficulty(): Difficulty {
+  return difficulties[Math.floor(Math.random() * (difficulties.length - 1))];
+}
+
 /**
  * Gets a {@link Difficulty} from its name
  *
  * @param diff the name of the difficulty
  * @returns the difficulty
  */
-export function getDifficulty(diff: MapDifficulty) {
-  const difficulty = difficulties.find(d => d.name === diff);
+export function getDifficulty(diff: Difficulty | MapDifficulty) {
+  const difficulty = difficulties.find(d => d.name === (typeof diff === "string" ? diff : diff.name));
   if (!difficulty) {
     throw new Error(`Unknown difficulty: ${diff}`);
   }

projects/website/src/common/utils.ts

@@ -19,3 +19,10 @@ export function validateUrl(url: string) {
     return false;
   }
 }
+
+export function getRandomInteger(min: number, max: number): number {
+  min = Math.ceil(min);
+  max = Math.floor(max);
+
+  return Math.floor(Math.random() * (max - min)) + min;
+}

projects/website/src/components/app-statistics.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import Statistic from "@/components/home/statistic";
+import { AppStatistics } from "@ssr/common/types/backend/app-statistics";
+import { useQuery } from "@tanstack/react-query";
+import { kyFetch } from "@ssr/common/utils/utils";
+import { Config } from "@ssr/common/config";
+import { useEffect, useState } from "react";
+import { User } from "lucide-react";
+
+type AppStatisticsProps = {
+  /**
+   * The app statistics.
+   */
+  initialStatistics: AppStatistics;
+};
+
+export function AppStats({ initialStatistics }: AppStatisticsProps) {
+  const [statistics, setStatistics] = useState(initialStatistics);
+
+  const { data } = useQuery({
+    queryKey: ["app-statistics"],
+    queryFn: () => kyFetch<AppStatistics>(Config.apiUrl + "/statistics"),
+  });
+
+  useEffect(() => {
+    if (data) {
+      setStatistics(data);
+    }
+  }, [data]);
+
+  return (
+    <div className="grid grid-cols-2 gap-5 sm:grid-cols-3 sm:gap-7 md:grid-cols-4 md:gap-12 lg:grid-cols-5">
+      <Statistic icon={<User className="size-10" />} title="Tracked Players" value={statistics.trackedPlayers} />
+      <Statistic icon={<User className="size-10" />} title="Tracked Scores" value={statistics.trackedScores} />
+      <Statistic
+        icon={<User className="size-10" />}
+        title="Additional Scores Data"
+        value={statistics.additionalScoresData}
+      />
+      <Statistic
+        icon={<User className="size-10" />}
+        title="Cached BeatSaver Maps"
+        value={statistics.cachedBeatSaverMaps}
+      />
+      <Statistic
+        icon={<User className="size-10" />}
+        title="Cached ScoreSaber Leaderboards"
+        value={statistics.cachedScoreSaberLeaderboards}
+      />
+    </div>
+  );
+}

projects/website/src/components/footer.tsx

@@ -1,68 +1,176 @@
-import { getBuildInformation } from "@/common/website-utils";
-import Link from "next/link";
+"use client";
 
-type NavbarItem = {
+import Link from "next/link";
+import { ExternalLink } from "lucide-react";
+import { cn } from "@/common/utils";
+import { ReactElement } from "react";
+import { SiGithub, SiX } from "react-icons/si";
+import { usePathname } from "next/navigation";
+
+type FooterLink = {
+  /**
+   * The name of this link.
+   */
   name: string;
-  link: string;
-  openInNewTab?: boolean;
+
+  /**
+   * The href for this link.
+   */
+  href: string;
+
+  /**
+   * The optional name to show
+   * when the screen size is small.
+   */
+  shortName?: string;
 };
 
-const items: NavbarItem[] = [
-  {
-    name: "Home",
-    link: "/",
-  },
-  {
-    name: "Source",
-    link: "https://git.fascinated.cc/Fascinated/scoresaber-reloadedv3",
-    openInNewTab: true,
-  },
+type SocialLinkType = {
+  /**
+   * The name of this social link.
+   */
+  name: string;
+
+  /**
+   * The logo for this social link.
+   */
+  logo: ReactElement;
+
+  /**
+   * The href for this social link.
+   */
+  href: string;
+};
+
+const links: {
+  [category: string]: FooterLink[];
+} = {
+  Resources: [
+    {
+      name: "Swagger Docs",
+      shortName: "Swagger",
+      href: "/swagger",
+    },
+    {
+      name: "Source Code",
+      shortName: "Source",
+      href: "https://git.fascinated.cc/Fascinated/scoresaber-reloadedv3",
+    },
+    {
+      name: "System Status",
+      shortName: "Status",
+      href: "https://status.fascinated.cc/status/scoresaber-reloaded",
+    },
+  ],
+  App: [
+    {
+      name: "Score Feed",
+      href: "/scores/live",
+    },
+    {
+      name: "Top Scores",
+      href: "/scores/top/weekly",
+    },
+  ],
+};
+
+const socialLinks: SocialLinkType[] = [
   {
     name: "Twitter",
-    link: "https://x.com/ssr_reloaded",
-    openInNewTab: true,
+    logo: <SiX className="size-5 lg:size-6" />,
+    href: "https://x.com/ssr_reloaded",
   },
   {
     name: "Discord",
-    link: "https://discord.gg/kmNfWGA4A8",
-    openInNewTab: true,
+    logo: <img className="size-6 lg:size-7" src="/assets/logos/discord.svg" />,
+    href: "https://discord.gg/kmNfWGA4A8",
   },
   {
-    name: "Status",
-    link: "https://status.fascinated.cc/status/scoresaber-reloaded",
-    openInNewTab: true,
-  },
-  {
-    name: "Swagger",
-    link: "/swagger",
-    openInNewTab: true,
+    name: "GitHub",
+    logo: <SiGithub className="size-5 lg:size-6" />,
+    href: "https://git.fascinated.cc/Fascinated/scoresaber-reloadedv3",
   },
 ];
 
-export default function Footer() {
-  const { buildId, buildTime, buildTimeShort } = getBuildInformation();
-
+export default function Footer({ buildId, buildTimeShort }: { buildId: string; buildTimeShort: string | undefined }) {
+  const isHome: boolean = usePathname() === "/";
   return (
-    <div className="flex items-center w-full flex-col gap-1 mt-6">
-      <div className="flex items-center gap-2 text-input text-sm">
-        <p>Build: {buildId}</p>
-        <p className="hidden md:block">({buildTime})</p>
-        <p className="none md:hidden">({buildTimeShort})</p>
+    <footer
+      className={cn(
+        "px-10 min-h-80 py-5 flex flex-col gap-10 lg:gap-0 justify-between border-t border-muted select-none",
+        isHome ? "bg-[#121212]" : "mt-5 bg-[#121212]/60"
+      )}
+    >
+      {/* Top Section */}
+      <div className="flex justify-center">
+        {/* Branding & Social Links */}
+        <div className="w-full max-w-screen-2xl flex flex-col gap-7 lg:flex-row justify-between items-center lg:items-start">
+          <div className="flex flex-col gap-5">
+            {/* Branding */}
+            <div className="flex flex-col gap-2 text-center items-center lg:text-left lg:items-start">
+              <Link
+                className="flex gap-3 items-center hover:opacity-75 transition-all transform-gpu"
+                href="/"
+                draggable={false}
+              >
+                <img className="size-9" src="/assets/logos/scoresaber.png" alt="Scoresaber Logo" />
+                <h1 className="text-xl font-bold text-pp">ScoreSaber Reloaded</h1>
+              </Link>
+              <p className="max-w-md text-sm opacity-85">
+                ScoreSaber Reloaded is a new way to view your scores and get more stats about you and your plays
+              </p>
+            </div>
+
+            {/* Social Links */}
+            <div className="flex gap-4 justify-center lg:justify-start items-center">
+              {socialLinks.map(link => (
+                <Link
+                  key={link.name}
+                  className="hover:opacity-75 transition-all transform-gpu"
+                  href={link.href}
+                  target="_blank"
+                  draggable={false}
+                >
+                  {link.logo}
+                </Link>
+              ))}
+            </div>
+          </div>
+
+          {/* Links */}
+          <div className="flex gap-20 md:gap-32 transition-all transform-gpu">
+            {Object.entries(links).map(([title, links]) => (
+              <div key={title} className="flex flex-col gap-0.5">
+                <h1 className="pb-1 text-lg font-semibold text-ssr">{title}</h1>
+                {links.map(link => {
+                  const external: boolean = !link.href.startsWith("/");
+                  return (
+                    <Link
+                      key={link.name}
+                      className="flex gap-2 items-center hover:opacity-75 transition-all transform-gpu"
+                      href={link.href}
+                      target={external ? "_blank" : undefined}
+                      draggable={false}
+                    >
+                      <span className={cn("hidden sm:flex", !link.shortName && "flex")}>{link.name}</span>
+                      {link.shortName && <span className="flex sm:hidden">{link.shortName}</span>}
+                      {external && <ExternalLink className="w-3.5 h-3.5" />}
+                    </Link>
+                  );
+                })}
+              </div>
+            ))}
+          </div>
+        </div>
       </div>
-      <div className="w-full flex flex-wrap items-center justify-center bg-secondary/95 divide-x divide-input text-sm py-2">
-        {items.map((item, index) => {
-          return (
-            <Link
-              key={index}
-              className="px-2 text-ssr hover:brightness-[66%] transition-all transform-gpu"
-              href={item.link}
-              target={item.openInNewTab ? "_blank" : undefined}
-            >
-              {item.name}
-            </Link>
-          );
-        })}
+
+      {/* Bottom Section */}
+      <div className="flex justify-center">
+        {/* Build Info */}
+        <p className="text-sm opacity-50">
+          Build {buildId} ({buildTimeShort})
+        </p>
       </div>
-    </div>
+    </footer>
   );
 }

projects/website/src/components/home/data-collection.tsx

@@ -0,0 +1,28 @@
+import { Database } from "lucide-react";
+
+export default function DataCollection() {
+  return (
+    <div className="px-5 -mt-40 flex flex-col gap-10 select-none">
+      {/* Header */}
+      <div className="flex flex-col gap-2.5">
+        <div className="flex gap-3 items-center text-pp">
+          <Database className="p-2 size-11 bg-ssr/15 rounded-lg" />
+          <h1 className="text-3xl sm:text-4xl font-bold">Data Collection</h1>
+        </div>
+        <p className="max-w-5xl text-sm sm:text-base opacity-85">
+          posidonium novum ancillae ius conclusionemque splendide vel.
+        </p>
+      </div>
+
+      {/* Content */}
+      <div className="max-w-[900px]">
+        <img
+          className="w-full h-full rounded-2xl border border-ssr/20"
+          src="/assets/home/data-collection.png"
+          alt="Data Collection"
+          draggable={false}
+        />
+      </div>
+    </div>
+  );
+}

projects/website/src/components/home/friends.tsx

@@ -0,0 +1,36 @@
+import { UsersRound } from "lucide-react";
+import { cn } from "@/common/utils";
+
+export default function Friends() {
+  return (
+    <div className="px-5 -mt-20 flex flex-col gap-10 items-end select-none">
+      {/* Header */}
+      <div className="flex flex-col gap-2.5 text-right items-end">
+        <div className="flex flex-row-reverse gap-3 items-center text-purple-600">
+          <UsersRound className="p-2 size-11 bg-purple-800/15 rounded-lg" />
+          <h1 className="text-3xl sm:text-4xl font-bold">Friends</h1>
+        </div>
+        <p className="max-w-5xl text-sm sm:text-base opacity-85">
+          posidonium novum ancillae ius conclusionemque splendide vel.
+        </p>
+      </div>
+
+      {/* Content */}
+      <div
+        className={cn(
+          "relative",
+          "before:absolute before:-left-36 before:-top-28 before:size-[32rem] before:bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] before:from-purple-600 before:rounded-full before:blur-3xl before:opacity-30 before:z-[1]"
+        )}
+      >
+        <div className={cn("relative max-w-[900px] z-20")}>
+          <img
+            className="w-full h-full rounded-2xl border border-ssr/20"
+            src="/assets/home/friends.png"
+            alt="Friends"
+            draggable={false}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

projects/website/src/components/home/hero.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import AnimatedShinyText from "@/components/ui/animated-shiny-text";
+import { ArrowRight, UserSearch } from "lucide-react";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { SiGithub } from "react-icons/si";
+import { BorderBeam } from "@/components/ui/border-beam";
+import { Separator } from "@/components/ui/separator";
+import { motion } from "framer-motion";
+
+export default function HeroSection() {
+  return (
+    <div className="flex flex-col gap-3.5 text-center items-center select-none">
+      <motion.div
+        className="flex flex-col gap-3.5 text-center items-center"
+        initial={{ opacity: 0, y: -40 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5, ease: "easeOut" }}
+      >
+        <Alert />
+        <Title />
+      </motion.div>
+      <Buttons />
+      <AppPreview />
+      <Separator className="my-12 w-screen" />
+    </div>
+  );
+}
+
+function Alert() {
+  return (
+    <Link
+      className="group mb-1.5 bg-neutral-900 hover:opacity-85 border border-white/5 rounded-full transition-all transform-gpu"
+      href="https://git.fascinated.cc/Fascinated/scoresaber-reloadedv3"
+      target="_blank"
+      draggable={false}
+    >
+      <AnimatedShinyText className="px-3.5 py-1 flex gap-2 items-center justify-center">
+        <SiGithub className="size-5" />
+        <span>Check out our Source Code</span>
+        <ArrowRight className="size-4 group-hover:translate-x-0.5 transition-all transform-gpu" />
+      </AnimatedShinyText>
+    </Link>
+  );
+}
+
+function Title() {
+  return (
+    <>
+      <h1 className="text-4xl sm:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-ssr to-pp/85">
+        ScoreSaber Reloaded
+      </h1>
+      <p className="max-w-sm md:max-w-xl md:text-lg opacity-85">
+        ScoreSaber Reloaded is a new way to view your scores and get more stats about you and your plays
+      </p>
+    </>
+  );
+}
+
+function Buttons() {
+  return (
+    <motion.div
+      className="mt-4 flex flex-col xs:flex-row gap-4 items-center"
+      initial={{ opacity: 0, y: -20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ delay: 0.35, duration: 0.7, ease: "easeOut" }}
+    >
+      <Link href="/search" target="_blank">
+        <Button className="max-w-52 flex gap-2.5 bg-pp hover:bg-pp/85 text-white text-base">
+          <UserSearch className="size-6" />
+          <span>Player Search</span>
+        </Button>
+      </Link>
+
+      <Link href="https://discord.gg/kmNfWGA4A8" target="_blank">
+        <Button className="max-w-52 flex gap-2.5 bg-[#5865F2] hover:bg-[#5865F2]/85 text-white text-base">
+          <img className="size-6" src="/assets/logos/discord.svg" />
+          <span>Join our Discord</span>
+        </Button>
+      </Link>
+    </motion.div>
+  );
+}
+
+function AppPreview() {
+  return (
+    <motion.div
+      className="mx-5 my-20 relative max-w-[1280px] shadow-[0_3rem_20rem_-15px_rgba(15,15,15,0.6)] shadow-pp/50 rounded-2xl overflow-hidden"
+      initial={{ opacity: 0, y: -35 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ delay: 0.45, duration: 0.7, ease: "easeOut" }}
+    >
+      <BorderBeam colorFrom="#6773ff" colorTo="#4858ff" />
+      <img
+        className="w-full h-full border-4 border-pp/20 rounded-2xl"
+        src="/assets/home/app-preview.png"
+        draggable={false}
+      />
+    </motion.div>
+  );
+}

projects/website/src/components/home/realtime-scores.tsx

@@ -0,0 +1,122 @@
+import { ChartNoAxesCombined, Database, Flame } from "lucide-react";
+import { cn, getRandomInteger } from "@/common/utils";
+import { GlobeAmericasIcon } from "@heroicons/react/24/solid";
+import { Difficulty, getDifficulty, getRandomDifficulty } from "@/common/song-utils";
+import { AnimatedList } from "@/components/ui/animated-list";
+
+type ScoreProps = {
+  songArt: string;
+  songName: string;
+  songAuthor: string;
+  setBy: string;
+};
+
+let scores: ScoreProps[] = [
+  {
+    songArt: "https://cdn.scoresaber.com/covers/B1D3FA6D5305837DF59B5E629A412DEBC68BBB46.png",
+    songName: "LORELEI",
+    songAuthor: "Camellia",
+    setBy: "ImFascinated",
+  },
+  {
+    songArt: "https://cdn.scoresaber.com/covers/7C44CDC1E33E2F5F929867B29CEB3860C3716DDC.png",
+    songName: "Time files",
+    songAuthor: "xi",
+    setBy: "Minion",
+  },
+  {
+    songArt: "https://cdn.scoresaber.com/covers/8E4B7917C01E5987A5B3FF13FAA3CA8F27D21D34.png",
+    songName: "RATATA",
+    songAuthor: "Skrillex, Missy Elliot & Mr. Oizo",
+    setBy: "Rainnny",
+  },
+  {
+    songArt: "https://cdn.scoresaber.com/covers/98F73BD330852EAAEBDC695140EAC8F2027AEEC8.png",
+    songName: "Invasion of Amorphous Trepidation",
+    songAuthor: "Diabolic Phantasma",
+    setBy: "Bello",
+  },
+  {
+    songArt: "https://cdn.scoresaber.com/covers/666EEAC0F3EEE2278DCB971AC1D27421A0335801.png",
+    songName: "Yotsuya-san ni Yoroshiku",
+    songAuthor: "Eight",
+    setBy: "ACC | NoneTaken",
+  },
+];
+scores = Array.from({ length: 32 }, () => scores).flat();
+
+export default function RealtimeScores() {
+  return (
+    <div
+      className={cn(
+        "relative px-5 -mt-20 flex flex-col lg:flex-row-reverse gap-10 select-none",
+        "before:absolute before:-left-40 before:-bottom-36 before:size-[28rem] before:bg-[radial-gradient(ellipse_at_center,_var(--tw-gradient-stops))] before:from-yellow-600 before:rounded-full before:blur-3xl before:opacity-30"
+      )}
+    >
+      {/* Header */}
+      <div className="flex flex-col gap-2.5 text-right items-end">
+        <div className="flex flex-row-reverse gap-3 items-center text-yellow-400">
+          <Flame className="p-2 size-11 bg-yellow-800/15 rounded-lg" />
+          <h1 className="text-3xl sm:text-4xl font-bold">Realtime Scores</h1>
+        </div>
+        <p className="max-w-2xl lg:max-w-5xl text-sm sm:text-base opacity-85">
+          <span className="text-lg font-semibold text-yellow-500">Nec detracto voluptatibus!</span> Vulputate duis
+          dolorum iuvaret disputationi ceteros te noluisse himenaeos bibendum dolores molestiae lorem elaboraret porro
+          brute tation simul laudem netus odio has in tibique.
+        </p>
+      </div>
+
+      {/* Content */}
+      <div className="w-full flex flex-col justify-center items-center overflow-hidden">
+        <AnimatedList className="w-full max-w-[32rem] h-96 divide-y divide-muted" delay={1500}>
+          {scores.map((score, index) => (
+            <Score key={index} {...score} />
+          ))}
+        </AnimatedList>
+      </div>
+    </div>
+  );
+}
+
+function Score({ songArt, songName, songAuthor, setBy }: ScoreProps) {
+  const difficulty: Difficulty = getRandomDifficulty();
+  return (
+    <figure className="py-2 flex flex-col text-sm">
+      {/* Set By */}
+      <span>
+        Set by <span className="text-ssr">{setBy}</span>
+      </span>
+
+      {/* Score */}
+      <div className="py-3 flex gap-5 items-center">
+        {/* Position & Time */}
+        <div className="w-24 flex flex-col gap-1 text-center items-center">
+          <div className="flex gap-2 items-center">
+            <GlobeAmericasIcon className="size-5" />
+            <span className="text-ssr">#{getRandomInteger(1, 900)}</span>
+          </div>
+          <span>just now</span>
+        </div>
+
+        {/* Song Art & Difficulty */}
+        <div className="relative">
+          <img className="size-16 rounded-md" src={songArt} alt={`Song art for ${songName} by ${songAuthor}`} />
+          <div
+            className="absolute inset-x-0 bottom-0 py-px flex justify-center text-xs rounded-t-lg"
+            style={{
+              backgroundColor: getDifficulty(difficulty).color + "f0", // Transparency value (in hex 0-255)
+            }}
+          >
+            {difficulty.name}
+          </div>
+        </div>
+
+        {/* Song Name & Author */}
+        <div className="flex flex-col gap-1">
+          <h1 className="text-ssr">{songName}</h1>
+          <p className="opacity-75">{songAuthor}</p>
+        </div>
+      </div>
+    </figure>
+  );
+}

projects/website/src/components/home/site-stats.tsx

@@ -0,0 +1,26 @@
+import { ChartNoAxesCombined, Database } from "lucide-react";
+import { kyFetch } from "@ssr/common/utils/utils";
+import { AppStatistics } from "@ssr/common/types/backend/app-statistics";
+import { Config } from "@ssr/common/config";
+import { AppStats } from "@/components/app-statistics";
+
+export default async function SiteStats() {
+  const statistics = await kyFetch<AppStatistics>(Config.apiUrl + "/statistics");
+  return (
+    <div className="px-5 -mt-20 flex flex-col gap-10 select-none">
+      {/* Header */}
+      <div className="flex flex-col gap-2.5">
+        <div className="flex gap-3 items-center text-orange-600">
+          <ChartNoAxesCombined className="p-2 size-11 bg-orange-800/15 rounded-lg" />
+          <h1 className="text-3xl sm:text-4xl font-bold">Site Statistics</h1>
+        </div>
+        <p className="max-w-5xl text-sm sm:text-base opacity-85">
+          posidonium novum ancillae ius conclusionemque splendide vel.
+        </p>
+      </div>
+
+      {/* Content */}
+      {statistics && <AppStats initialStatistics={statistics} />}
+    </div>
+  );
+}

projects/website/src/components/home/statistic.tsx

@@ -1,16 +1,22 @@
 "use client";
 
 import CountUp from "react-countup";
+import { ReactElement } from "react";
 
 type Statistic = {
+  icon: ReactElement;
   title: string;
   value: number;
 };
 
-export default function Statistic({ title, value }: Statistic) {
+export default function Statistic({ icon, title, value }: Statistic) {
   return (
-    <p className="text-center">
-      {title}: <CountUp end={value} duration={1.2} />
-    </p>
+    <div className="flex flex-col gap-2 text-center items-center text-lg">
+      {icon}
+      <h1 className="font-semibold text-orange-400/85">{title}</h1>
+      <span>
+        <CountUp end={value} duration={1.2} enableScrollSpy scrollSpyOnce />
+      </span>
+    </div>
   );
 }

projects/website/src/components/leaderboard/chart/leaderboard-pp-chart.tsx

@@ -6,7 +6,7 @@ import Card from "@/components/card";
 import { DualRangeSlider } from "@/components/ui/dual-range-slider";
 import { useDebounce } from "@uidotdev/usehooks";
 import { scoresaberService } from "@ssr/common/service/impl/scoresaber";
-import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard";
+import ScoreSaberLeaderboard from "@ssr/common/model/leaderboard/impl/scoresaber-leaderboard";
 
 type Props = {
   /**

projects/website/src/components/leaderboard/chart/player-score-accuracy-chart.tsx

@@ -3,28 +3,35 @@
 import { ScoreStatsToken } from "@ssr/common/types/token/beatleader/score-stats/score-stats";
 import { formatTime } from "@ssr/common/utils/time-utils";
 import GenericChart, { DatasetConfig } from "@/components/chart/generic-chart";
+import { scoresaberService } from "@ssr/common/service/impl/scoresaber";
+import { ScoreSaberLeaderboard } from "@ssr/common/model/leaderboard/impl/scoresaber-leaderboard";
 
 type Props = {
   /**
-   * The score stats to use in the chart
+   * The score stats to use in the chart.
    */
   scoreStats: ScoreStatsToken;
+
+  /**
+   * The leaderboard to the score was set on.
+   */
+  leaderboard: ScoreSaberLeaderboard;
 };
 
-export default function PlayerScoreAccuracyChart({ scoreStats }: Props) {
+export default function PlayerScoreAccuracyChart({ scoreStats, leaderboard }: Props) {
   const graph = scoreStats.scoreGraphTracker.graph;
 
-  const histories: Record<string, (number | null)[]> = {};
+  const histories: Record<string, (number | null)[]> = {
+    accuracy: [],
+    pp: [],
+  };
   const labels: string[] = [];
 
   for (let seconds = 0; seconds < graph.length; seconds++) {
     labels.push(formatTime(seconds));
-
-    const history = histories["accuracy"];
-    if (!history) {
-      histories["accuracy"] = [];
-    }
-    histories["accuracy"].push(graph[seconds] * 100);
+    const acc = graph[seconds] * 100;
+    histories["accuracy"].push(acc);
+    histories["pp"].push(scoresaberService.getPp(leaderboard.stars, acc));
   }
 
   const datasetConfig: DatasetConfig[] = [
@@ -39,7 +46,21 @@ export default function PlayerScoreAccuracyChart({ scoreStats }: Props) {
         displayName: "Accuracy",
         position: "left",
       },
-      labelFormatter: (value: number) => `${value.toFixed(2)}%`,
+      labelFormatter: (value: number) => `Accuracy: ${value.toFixed(2)}%`,
+    },
+    {
+      title: "PP",
+      field: "pp",
+      color: "#4858ff",
+      axisId: "y1",
+      axisConfig: {
+        reverse: false,
+        display: true,
+        hideOnMobile: true,
+        displayName: "PP",
+        position: "right",
+      },
+      labelFormatter: (value: number) => `PP: ${value.toFixed(2)}pp`,
     },
   ];
 

projects/website/src/components/leaderboard/leaderboard-data.tsx

@@ -3,7 +3,7 @@
 import LeaderboardScores from "@/components/leaderboard/leaderboard-scores";
 import { LeaderboardInfo } from "@/components/leaderboard/leaderboard-info";
 import { ScoreSaberScore } from "@ssr/common/model/score/impl/scoresaber-score";
-import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard";
+import ScoreSaberLeaderboard from "@ssr/common/model/leaderboard/impl/scoresaber-leaderboard";
 import { LeaderboardResponse } from "@ssr/common/response/leaderboard-response";
 import { useQuery } from "@tanstack/react-query";
 import { useEffect, useState } from "react";

projects/website/src/components/leaderboard/leaderboard-info.tsx

@@ -2,7 +2,7 @@ import Card from "@/components/card";
 import Image from "next/image";
 import { LeaderboardSongStarCount } from "@/components/leaderboard/leaderboard-song-star-count";
 import ScoreButtons from "@/components/score/score-buttons";
-import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard";
+import ScoreSaberLeaderboard from "@ssr/common/model/leaderboard/impl/scoresaber-leaderboard";
 import { BeatSaverMap } from "@ssr/common/model/beatsaver/map";
 import { getBeatSaverMapperProfileUrl } from "@ssr/common/utils/beatsaver.util";
 import FallbackLink from "@/components/fallback-link";

projects/website/src/components/leaderboard/leaderboard-score.tsx

@@ -1,13 +1,13 @@
 import { ScoreSaberScore } from "@ssr/common/model/score/impl/scoresaber-score";
 import { formatNumberWithCommas, formatPp } from "@ssr/common/utils/number-utils";
-import ScoreSaberPlayerToken from "@ssr/common/types/token/scoresaber/score-saber-player-token";
 import { PlayerInfo } from "@/components/player/player-info";
 import { clsx } from "clsx";
 import Tooltip from "@/components/tooltip";
 import { ScoreTimeSet } from "@/components/score/score-time-set";
 import { ScoreModifiers } from "@/components/score/score-modifiers";
-import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard";
-import ScoreMissesBadge from "@/components/score/badges/score-misses";
+import ScoreSaberLeaderboard from "@ssr/common/model/leaderboard/impl/scoresaber-leaderboard";
+import ScoreMissesAndPausesBadge from "@/components/score/badges/score-misses-and-pauses";
+import ScoreSaberPlayer from "@ssr/common/player/impl/scoresaber-player";
 
 type Props = {
   /**
@@ -23,10 +23,10 @@ type Props = {
   /**
    * The claimed player.
    */
-  claimedPlayer?: ScoreSaberPlayerToken;
+  highlightedPlayer?: ScoreSaberPlayer;
 };
 
-export default function LeaderboardScore({ score, leaderboard, claimedPlayer }: Props) {
+export default function LeaderboardScore({ score, leaderboard, highlightedPlayer }: Props) {
   const scorePlayer = score.playerInfo;
 
   return (
@@ -36,7 +36,7 @@ export default function LeaderboardScore({ score, leaderboard, claimedPlayer }:
 
       {/* Player */}
       <td className="px-4 py-2 flex gap-2 whitespace-nowrap">
-        <PlayerInfo player={scorePlayer} highlightedPlayer={claimedPlayer} />
+        <PlayerInfo player={scorePlayer} highlightedPlayer={highlightedPlayer} useLink />
       </td>
 
       {/* Time Set */}
@@ -57,7 +57,7 @@ export default function LeaderboardScore({ score, leaderboard, claimedPlayer }:
           score.misses > 0 ? "text-red-500" : "text-green-500"
         )}
       >
-        <ScoreMissesBadge score={score} hideXMark />
+        <ScoreMissesAndPausesBadge score={score} hideXMark />
       </td>
 
       {/* Score PP */}

projects/website/src/components/leaderboard/leaderboard-scores.tsx

@@ -11,11 +11,10 @@ import { Button } from "@/components/ui/button";
 import { getDifficulty } from "@/common/song-utils";
 import { fetchLeaderboardScores } from "@ssr/common/utils/score-utils";
 import { ScoreSaberScore } from "@ssr/common/model/score/impl/scoresaber-score";
-import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard";
+import ScoreSaberLeaderboard from "@ssr/common/model/leaderboard/impl/scoresaber-leaderboard";
 import LeaderboardScoresResponse from "@ssr/common/response/leaderboard-scores-response";
-import useDatabase from "@/hooks/use-database";
-import { useLiveQuery } from "dexie-react-hooks";
 import LeaderboardScoresSkeleton from "@/components/leaderboard/skeleton/leaderboard-scores-skeleton";
+import ScoreSaberPlayer from "@ssr/common/player/impl/scoresaber-player";
 
 type LeaderboardScoresProps = {
   initialPage?: number;
@@ -25,6 +24,7 @@ type LeaderboardScoresProps = {
   isLeaderboardPage?: boolean;
   leaderboardChanged?: (id: number) => void;
   disableUrlChanging?: boolean;
+  highlightedPlayer?: ScoreSaberPlayer;
 };
 
 export default function LeaderboardScores({
@@ -35,12 +35,11 @@ export default function LeaderboardScores({
   isLeaderboardPage,
   leaderboardChanged,
   disableUrlChanging,
+  highlightedPlayer,
 }: LeaderboardScoresProps) {
   if (!initialPage) {
     initialPage = 1;
   }
-  const database = useDatabase();
-  const claimedPlayer = useLiveQuery(() => database.getClaimedPlayer());
 
   const { width } = useWindowDimensions();
   const controls = useAnimation();
@@ -65,6 +64,8 @@ export default function LeaderboardScores({
     enabled: shouldFetch,
   });
 
+  console.log(leaderboard);
+
   /**
    * Starts the animation for the scores, but only after the initial load.
    */
@@ -119,6 +120,8 @@ export default function LeaderboardScores({
       return;
     }
 
+    console.log(selectedLeaderboardId);
+
     // Update the URL
     window.history.replaceState(null, "", `/leaderboard/${selectedLeaderboardId}/${currentPage}`);
   }, [selectedLeaderboardId, currentPage, disableUrlChanging]);
@@ -158,7 +161,7 @@ export default function LeaderboardScores({
                   borderColor: getDifficulty(difficulty).color,
                 }}
               >
-                {difficulty}
+                {difficulty.replace("Plus", "+")}
               </Button>
             );
           })}
@@ -182,7 +185,7 @@ export default function LeaderboardScores({
           <motion.tbody initial="hidden" animate={controls} className="border-none" variants={scoreAnimation}>
             {currentScores.scores.map((playerScore, index) => (
               <motion.tr key={index} className="border-b border-border" variants={scoreAnimation}>
-                <LeaderboardScore score={playerScore} leaderboard={leaderboard} claimedPlayer={claimedPlayer} />
+                <LeaderboardScore score={playerScore} leaderboard={leaderboard} highlightedPlayer={highlightedPlayer} />
               </motion.tr>
             ))}
           </motion.tbody>

projects/website/src/components/leaderboard/leaderboard-song-star-count.tsx

@@ -1,6 +1,6 @@
 import { getDifficulty } from "@/common/song-utils";
 import { StarIcon } from "@heroicons/react/24/solid";
-import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard";
+import ScoreSaberLeaderboard from "@ssr/common/model/leaderboard/impl/scoresaber-leaderboard";
 
 type LeaderboardSongStarCountProps = {
   /**

projects/website/src/components/loaders/fullscreen-loader.tsx

@@ -10,7 +10,7 @@ export default function FullscreenLoader({ reason }: Props) {
     <div className="absolute w-screen h-screen bg-background brightness-[66%] flex flex-col gap-6 items-center justify-center">
       <div className="flex flex-col items-center justify-center">
         <p className="text-white text-xl font-bold">ScoreSaber Reloaded</p>
-        <p className="text-gray-300 text-md text-center">{reason}</p>
+        <div className="text-gray-300 text-md text-center">{reason}</div>
       </div>
       <div className="animate-spin">
         <ScoreSaberLogo />

projects/website/src/components/loading-icon.tsx

@@ -0,0 +1,6 @@
+import { ArrowPathIcon } from "@heroicons/react/24/solid";
+import * as React from "react";
+
+export function LoadingIcon() {
+  return <ArrowPathIcon className="w-5 h-5 animate-spin" />;
+}

projects/website/src/components/navbar/navbar.tsx

@@ -6,7 +6,6 @@ import NavbarButton from "./navbar-button";
 import ProfileButton from "./profile-button";
 import { TrendingUpIcon } from "lucide-react";
 import FriendsButton from "@/components/navbar/friends-button";
-import { PiSwordFill } from "react-icons/pi";
 
 type NavbarItem = {
   name: string;
@@ -22,12 +21,6 @@ const items: NavbarItem[] = [
     align: "left",
     icon: <TrendingUpIcon className="h-5 w-5" />,
   },
-  {
-    name: "Score Feed",
-    link: "/scores",
-    align: "left",
-    icon: <PiSwordFill className="h-5 w-5" />,
-  },
   {
     name: "Search",
     link: "/search",

projects/website/src/components/player/claim-profile.tsx

@@ -6,7 +6,6 @@ import useDatabase from "../../hooks/use-database";
 import { useToast } from "@/hooks/use-toast";
 import Tooltip from "../tooltip";
 import { Button } from "../ui/button";
-import { revalidatePath } from "next/cache";
 import { setCookieValue } from "@ssr/common/utils/cookie-utils";
 
 type Props = {
@@ -33,7 +32,6 @@ export default function ClaimProfile({ playerId }: Props) {
       title: "Profile Claimed",
       description: "You have claimed this profile.",
     });
-    revalidatePath("/player/[...slug]");
   }
 
   // Database is not ready

projects/website/src/components/player/player-data.tsx

@@ -16,29 +16,19 @@ import { useLiveQuery } from "dexie-react-hooks";
 import ScoreSaberPlayer from "@ssr/common/player/impl/scoresaber-player";
 import { ScoreSort } from "@ssr/common/score/score-sort";
 import { ScoreSaberScore } from "@ssr/common/model/score/impl/scoresaber-score";
-import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard";
+import ScoreSaberLeaderboard from "@ssr/common/model/leaderboard/impl/scoresaber-leaderboard";
 import PlayerScoresResponse from "@ssr/common/response/player-scores-response";
 import { getScoreSaberPlayerFromToken } from "@ssr/common/token-creators";
-import { ScoreSortType } from "@ssr/common/sorter/sort-type";
-import { SortDirection } from "@ssr/common/sorter/sort-direction";
 
 type Props = {
   initialPlayerData: ScoreSaberPlayer;
   initialScoreData?: PlayerScoresResponse<ScoreSaberScore, ScoreSaberLeaderboard>;
   initialSearch?: string;
-  sort: ScoreSortType;
-  direction: SortDirection;
+  sort: ScoreSort;
   page: number;
 };
 
-export default function PlayerData({
-  initialPlayerData,
-  initialScoreData,
-  initialSearch,
-  sort,
-  direction,
-  page,
-}: Props) {
+export default function PlayerData({ initialPlayerData, initialScoreData, initialSearch, sort, page }: Props) {
   const isMobile = useIsMobile();
   const miniRankingsRef = useRef<HTMLDivElement>(null);
   const isMiniRankingsVisible = useIsVisible(miniRankingsRef);
@@ -75,7 +65,6 @@ export default function PlayerData({
           initialSearch={initialSearch}
           player={player}
           sort={sort}
-          direction={direction}
           page={page}
         />
       </article>

projects/website/src/components/player/player-info.tsx

@@ -71,7 +71,7 @@ export function PlayerInfo({
           src={`https://img.fascinated.cc/upload/w_128,h_128/${player.profilePicture}`}
         />
       </Avatar>
-      {!hideCountryFlag && <CountryFlag code={player.country} size={12} />}
+      {!hideCountryFlag && <CountryFlag code={player.country!} size={12} />}
       {useLink ? <Link href={`/player/${player.id}`}>{name}</Link> : name}
     </div>
   );

projects/website/src/components/player/player-scores.tsx

@@ -1,6 +1,6 @@
 import { capitalizeFirstLetter } from "@/common/string-utils";
 import useWindowDimensions from "@/hooks/use-window-dimensions";
-import { ArrowDownIcon, ClockIcon, TrophyIcon, XMarkIcon } from "@heroicons/react/24/solid";
+import { ClockIcon, TrophyIcon, XMarkIcon } from "@heroicons/react/24/solid";
 import { useQuery } from "@tanstack/react-query";
 import { motion, useAnimation } from "framer-motion";
 import { useCallback, useEffect, useRef, useState } from "react";
@@ -13,55 +13,44 @@ import { clsx } from "clsx";
 import { useDebounce } from "@uidotdev/usehooks";
 import { scoreAnimation } from "@/components/score/score-animation";
 import ScoreSaberPlayer from "@ssr/common/player/impl/scoresaber-player";
+import { ScoreSort } from "@ssr/common/score/score-sort";
 import { setCookieValue } from "@ssr/common/utils/cookie-utils";
 import { ScoreSaberScore } from "@ssr/common/model/score/impl/scoresaber-score";
-import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard";
+import ScoreSaberLeaderboard from "@ssr/common/model/leaderboard/impl/scoresaber-leaderboard";
 import { fetchPlayerScores } from "@ssr/common/utils/score-utils";
 import PlayerScoresResponse from "@ssr/common/response/player-scores-response";
-import { SortDirection } from "@ssr/common/sorter/sort-direction";
-import { ScoreSortType } from "@ssr/common/sorter/sort-type";
 
 type Props = {
   initialScoreData?: PlayerScoresResponse<ScoreSaberScore, ScoreSaberLeaderboard>;
   initialSearch?: string;
   player: ScoreSaberPlayer;
-  sort: ScoreSortType;
-  direction: SortDirection;
+  sort: ScoreSort;
   page: number;
 };
 
 type PageState = {
   page: number;
-  sort: ScoreSortType;
-  direction: SortDirection;
+  sort: ScoreSort;
 };
 
 const scoreSort = [
   {
-    name: "PP",
-    value: ScoreSortType.pp,
+    name: "Top",
+    value: ScoreSort.top,
+    icon: <TrophyIcon className="w-5 h-5" />,
   },
   {
-    name: "Date",
-    value: ScoreSortType.date,
-  },
-  {
-    name: "Acc",
-    value: ScoreSortType.accuracy,
-    requiresTrackedPlayer: true,
-  },
-  {
-    name: "Misses",
-    value: ScoreSortType.misses,
-    requiresTrackedPlayer: true,
+    name: "Recent",
+    value: ScoreSort.recent,
+    icon: <ClockIcon className="w-5 h-5" />,
   },
 ];
 
-export default function PlayerScores({ initialScoreData, initialSearch, player, sort, direction, page }: Props) {
+export default function PlayerScores({ initialScoreData, initialSearch, player, sort, page }: Props) {
   const { width } = useWindowDimensions();
   const controls = useAnimation();
 
-  const [pageState, setPageState] = useState<PageState>({ page, sort, direction });
+  const [pageState, setPageState] = useState<PageState>({ page, sort });
   const [previousPage, setPreviousPage] = useState(page);
   const [scores, setScores] = useState<PlayerScoresResponse<ScoreSaberScore, ScoreSaberLeaderboard> | undefined>(
     initialScoreData
@@ -80,7 +69,6 @@ export default function PlayerScores({ initialScoreData, initialSearch, player,
         player.id,
         pageState.page,
         pageState.sort,
-        pageState.direction,
         debouncedSearchTerm
       ),
     enabled: shouldFetch && (debouncedSearchTerm.length >= 3 || debouncedSearchTerm.length === 0),
@@ -100,30 +88,14 @@ export default function PlayerScores({ initialScoreData, initialSearch, player,
    *
    * @param newSort the new sort
    */
-  const handleSortChange = async (newSort: ScoreSortType) => {
+  const handleSortChange = async (newSort: ScoreSort) => {
     if (newSort !== pageState.sort) {
-      setPageState({ ...pageState, page: 1, sort: newSort, direction: SortDirection.DESC });
+      setPageState({ page: 1, sort: newSort });
       setShouldFetch(true); // Set to true to trigger fetch
       await setCookieValue("lastScoreSort", newSort); // Set the default score sort
     }
   };
 
-  /**
-   * Change the score sort direction.
-   *
-   * @param newDirection the new sort direction
-   */
-  const handleSortDirectionChange = async (newDirection: SortDirection) => {
-    // Player doesn't have scores tracked anyway, so no need to change this.
-    if (!player.isBeingTracked) {
-      return;
-    }
-
-    setPageState({ ...pageState, page: 1, direction: newDirection });
-    setShouldFetch(true); // Set to true to trigger fetch
-    await setCookieValue("lastScoreSortDirection", newDirection); // Set the default score sort
-  };
-
   /**
    * Change the score search term.
    *
@@ -159,9 +131,9 @@ export default function PlayerScores({ initialScoreData, initialSearch, player,
    */
   const getUrl = useCallback(
     (page: number) => {
-      return `/player/${player.id}/${pageState.sort}/${pageState.direction}/${page}${isSearchActive ? `?search=${debouncedSearchTerm}` : ""}`;
+      return `/player/${player.id}/${pageState.sort}/${page}${isSearchActive ? `?search=${debouncedSearchTerm}` : ""}`;
     },
-    [player.id, pageState.sort, pageState.direction, isSearchActive, debouncedSearchTerm]
+    [debouncedSearchTerm, player.id, pageState.sort, isSearchActive]
   );
 
   /**
@@ -195,32 +167,18 @@ export default function PlayerScores({ initialScoreData, initialSearch, player,
         <div ref={topOfScoresRef} className="absolute" />
 
         <div className="flex gap-2">
-          {scoreSort
-            .filter(sort => !(!player.isBeingTracked && sort.requiresTrackedPlayer))
-            .map(sortOption => (
-              <Button
-                key={sortOption.value}
-                variant={sortOption.value === pageState.sort ? "default" : "outline"}
-                onClick={async () => {
-                  if (sortOption.value !== pageState.sort) {
-                    await handleSortChange(sortOption.value);
-                  } else {
-                    await handleSortDirectionChange(
-                      pageState.direction === SortDirection.ASC ? SortDirection.DESC : SortDirection.ASC
-                    );
-                  }
-                }}
-                size="sm"
-                className="flex items-center justify-center gap-1"
-              >
-                {`${capitalizeFirstLetter(sortOption.name)}`}
-                {player.isBeingTracked && (
-                  <ArrowDownIcon
-                    className={`w-4 h-4 ${pageState.direction === SortDirection.ASC && pageState.sort === sortOption.value ? "rotate-180" : ""}`}
-                  />
-                )}
-              </Button>
-            ))}
+          {scoreSort.map(sortOption => (
+            <Button
+              key={sortOption.value}
+              variant={sortOption.value === pageState.sort ? "default" : "outline"}
+              onClick={() => handleSortChange(sortOption.value)}
+              size="sm"
+              className="flex items-center gap-1"
+            >
+              {sortOption.icon}
+              {`${capitalizeFirstLetter(sortOption.name)} Scores`}
+            </Button>
+          ))}
         </div>
 
         <div className="relative w-72 lg:absolute right-0 top-0">
@@ -260,12 +218,17 @@ export default function PlayerScores({ initialScoreData, initialSearch, player,
           >
             {scores.scores.map((score, index) => (
               <motion.div key={index} variants={scoreAnimation}>
-                <Score score={score.score} leaderboard={score.leaderboard} beatSaverMap={score.beatSaver} />
+                <Score
+                  score={score.score}
+                  leaderboard={score.leaderboard}
+                  beatSaverMap={score.beatSaver}
+                  highlightedPlayer={player}
+                />
               </motion.div>
             ))}
           </motion.div>
 
-          {scores.metadata.totalPages >= 1 && (
+          {scores.metadata.totalPages > 1 && (
             <Pagination
               mobilePagination={width < 768}
               page={pageState.page}

projects/website/src/components/score/badges/hand-accuracy.tsx

@@ -16,16 +16,33 @@ export function HandAccuracyBadge({ score, hand }: HandAccuracyProps) {
   }
   const { handAccuracy } = score.additionalData;
   const scoreImprovement = score.additionalData.scoreImprovement;
+  const currentHandAccuracy = handAccuracy[hand];
   const previousHandAccuracy = scoreImprovement ? handAccuracy[hand] - scoreImprovement.handAccuracy[hand] : undefined;
   const formattedHand = capitalizeFirstLetter(hand);
 
   return (
-    <div className="flex flex-col items-center justify-center">
-      <Tooltip display={`${formattedHand} Hand Accuracy`}>
-        <p>{handAccuracy[hand].toFixed(2)}</p>
+    <div className="flex gap-1 items-center justify-center">
+      <Tooltip
+        display={
+          <>
+            <p className="font-semibold">{formattedHand} Hand Accuracy</p>
+            <p>Hand Accuracy: {currentHandAccuracy.toFixed(2)}</p>
+            <p>Accuracy: {((currentHandAccuracy / 115) * 100).toFixed(2)}%</p>
+          </>
+        }
+      >
+        <p>{currentHandAccuracy.toFixed(2)}</p>
       </Tooltip>
       {scoreImprovement && previousHandAccuracy && (
-        <Tooltip display={`Previous ${formattedHand} Hand Accuracy: ${previousHandAccuracy.toFixed(2)}`}>
+        <Tooltip
+          display={
+            <>
+              <p className="font-semibold">{formattedHand} Hand Accuracy</p>
+              <p>Hand Accuracy: {previousHandAccuracy.toFixed(2)}</p>
+              <p>Accuracy: {((previousHandAccuracy / 115) * 100).toFixed(2)}%</p>
+            </>
+          }
+        >
           <Change
             className="text-xs"
             change={scoreImprovement.handAccuracy[hand]}

projects/website/src/components/score/badges/score-accuracy.tsx

@@ -4,7 +4,7 @@ import Tooltip from "@/components/tooltip";
 import { ScoreModifiers } from "@/components/score/score-modifiers";
 import { Change } from "@/common/change";
 import { ScoreBadgeProps } from "@/components/score/badges/badge-props";
-import ScoreSaberLeaderboard from "@ssr/common/leaderboard/impl/scoresaber-leaderboard";
+import ScoreSaberLeaderboard from "@ssr/common/model/leaderboard/impl/scoresaber-leaderboard";
 
 type ScoreAccuracyProps = ScoreBadgeProps & {
   /**
@@ -14,8 +14,7 @@ type ScoreAccuracyProps = ScoreBadgeProps & {
 };
 
 export function ScoreAccuracyBadge({ score, leaderboard }: ScoreAccuracyProps) {
-  const scoreImprovement = score.additionalData?.scoreImprovement;
-  const previousAccuracy = scoreImprovement ? score.accuracy - scoreImprovement.accuracy : undefined;
+  const previousScore = score.previousScore;
 
   const fcAccuracy = score.additionalData?.fcAccuracy;
   const scoreBadge = getScoreBadgeFromAccuracy(score.accuracy);
@@ -57,9 +56,13 @@ export function ScoreAccuracyBadge({ score, leaderboard }: ScoreAccuracyProps) {
             {modCount > 0 && <ScoreModifiers type="simple" limit={1} score={score} />}
           </p>
         </Tooltip>
-        {scoreImprovement && previousAccuracy && (
-          <Tooltip display={`Previous Accuracy: ${previousAccuracy.toFixed(2)}%`}>
-            <Change className="text-xs" change={scoreImprovement.accuracy} formatValue={num => `${num.toFixed(2)}%`} />
+        {previousScore && previousScore.change && (
+          <Tooltip display={`Previous Accuracy: ${previousScore.accuracy.toFixed(2)}%`}>
+            <Change
+              className="text-xs"
+              change={previousScore.change.accuracy}
+              formatValue={num => `${num.toFixed(2)}%`}
+            />
           </Tooltip>
         )}
       </div>

projects/website/src/components/score/badges/score-misses-and-pauses.tsx

@@ -0,0 +1,113 @@
+import { formatNumberWithCommas } from "@ssr/common/utils/number-utils";
+import { ScoreBadgeProps } from "@/components/score/badges/badge-props";
+import { ScoreMissesTooltip } from "@/components/score/score-misses-tooltip";
+import { Misses } from "@ssr/common/model/additional-score-data/misses";
+
+type ScoreMissesBadgeProps = ScoreBadgeProps & {
+  /**
+   * Hide the "X" mark for misses.
+   */
+  hideXMark?: boolean;
+};
+
+export default function ScoreMissesAndPausesBadge({ score, hideXMark }: ScoreMissesBadgeProps) {
+  const additionalData = score.additionalData;
+  const scoreImprovement = additionalData?.scoreImprovement;
+
+  const misses = additionalData?.misses;
+  const previousScoreMisses: Misses | undefined = misses &&
+    additionalData &&
+    scoreImprovement && {
+      misses: (scoreImprovement.misses.misses - misses.misses) * -1,
+      missedNotes: (scoreImprovement.misses.missedNotes - misses.missedNotes) * -1,
+      badCuts: (scoreImprovement.misses.badCuts - misses.badCuts) * -1,
+      bombCuts: (scoreImprovement.misses.bombCuts - misses.bombCuts) * -1,
+      wallsHit: (scoreImprovement.misses.wallsHit - misses.wallsHit) * -1,
+    };
+  const previousScoreFc = previousScoreMisses?.misses == 0;
+  const isMissImprovement =
+    previousScoreMisses && scoreImprovement && previousScoreMisses.misses > scoreImprovement.misses.misses;
+
+  const pauses = additionalData?.pauses;
+  return (
+    <div className="flex flex-col justify-center items-center w-full">
+      <div className="flex items-center gap-1">
+        <div className="flex items-center gap-1">
+          <ScoreMissesTooltip
+            missedNotes={score.missedNotes}
+            badCuts={score.badCuts}
+            bombCuts={misses?.bombCuts}
+            wallsHit={misses?.wallsHit}
+            fullCombo={score.fullCombo}
+          >
+            <p>
+              {score.fullCombo ? <span className="text-green-400">FC</span> : formatNumberWithCommas(score.misses)}
+              {!hideXMark && !score.fullCombo && <span>x</span>}
+            </p>
+          </ScoreMissesTooltip>
+          {additionalData && previousScoreMisses && scoreImprovement && misses && isMissImprovement && (
+            <ScoreMissesTooltip
+              missedNotes={previousScoreMisses.missedNotes}
+              badCuts={previousScoreMisses.badCuts}
+              bombCuts={previousScoreMisses.bombCuts}
+              wallsHit={previousScoreMisses.wallsHit}
+              fullCombo={previousScoreFc}
+            >
+              <div className="text-xs flex flex-row gap-1">
+                <p>(vs {previousScoreFc ? "FC" : formatNumberWithCommas(previousScoreMisses.misses)}x)</p>
+              </div>
+            </ScoreMissesTooltip>
+          )}
+        </div>
+        {/*{additionalData && !!pauses && pauses > 0 && (*/}
+        {/*  <>*/}
+        {/*    <p>|</p>*/}
+        {/*    <Tooltip*/}
+        {/*      display={*/}
+        {/*        <p>*/}
+        {/*          {pauses}x Pause{pauses > 1 ? "s" : ""}*/}
+        {/*        </p>*/}
+        {/*      }*/}
+        {/*    >*/}
+        {/*      <div className="flex gap-1 items-center">*/}
+        {/*        <p>{pauses && pauses}</p>*/}
+        {/*        <PauseIcon className="w-4 h-4" />*/}
+        {/*      </div>*/}
+        {/*    </Tooltip>*/}
+        {/*  </>*/}
+        {/*)}*/}
+      </div>
+      {/*{additionalData && previousScoreMisses && scoreImprovement && misses && isMissImprovement && (*/}
+      {/*  <div className="flex gap-2 items-center justify-center">*/}
+      {/*    <ScoreMissesTooltip*/}
+      {/*      missedNotes={previousScoreMisses.missedNotes}*/}
+      {/*      badCuts={previousScoreMisses.badCuts}*/}
+      {/*      bombCuts={previousScoreMisses.bombCuts}*/}
+      {/*      wallsHit={previousScoreMisses.wallsHit}*/}
+      {/*      fullCombo={previousScoreFc}*/}
+      {/*    >*/}
+      {/*      <div className="flex gap-1 items-center text-xs">*/}
+      {/*        {previousScoreFc ? (*/}
+      {/*          <p className="text-green-400">FC</p>*/}
+      {/*        ) : (*/}
+      {/*          formatNumberWithCommas(previousScoreMisses.misses)*/}
+      {/*        )}*/}
+      {/*      </div>*/}
+      {/*    </ScoreMissesTooltip>*/}
+      {/*    <p>-&gt;</p>*/}
+      {/*    <ScoreMissesTooltip*/}
+      {/*      missedNotes={misses.missedNotes}*/}
+      {/*      badCuts={misses.badCuts}*/}
+      {/*      bombCuts={misses.bombCuts}*/}
+      {/*      wallsHit={misses.wallsHit}*/}
+      {/*      fullCombo={additionalData.fullCombo}*/}
+      {/*    >*/}
+      {/*      <div className="flex gap-1 items-center text-xs">*/}
+      {/*        {additionalData.fullCombo ? <p className="text-green-400">FC</p> : formatNumberWithCommas(misses.misses)}*/}
+      {/*      </div>*/}
+      {/*    </ScoreMissesTooltip>*/}
+      {/*  </div>*/}
+      {/*)}*/}
+    </div>
+  );
+}

projects/website/src/components/score/badges/score-misses.tsx

@@ -1,80 +0,0 @@
-import { formatNumberWithCommas } from "@ssr/common/utils/number-utils";
-import { XMarkIcon } from "@heroicons/react/24/solid";
-import clsx from "clsx";
-import { ScoreBadgeProps } from "@/components/score/badges/badge-props";
-import { ScoreMissesTooltip } from "@/components/score/score-misses-tooltip";
-import { Misses } from "@ssr/common/model/additional-score-data/misses";
-
-type ScoreMissesBadgeProps = ScoreBadgeProps & {
-  /**
-   * Hide the "X" mark for misses.
-   */
-  hideXMark?: boolean;
-};
-
-export default function ScoreMissesBadge({ score, hideXMark }: ScoreMissesBadgeProps) {
-  const additionalData = score.additionalData;
-  const scoreImprovement = additionalData?.scoreImprovement;
-
-  const misses = additionalData?.misses;
-  const previousScoreMisses: Misses | undefined = misses &&
-    additionalData &&
-    scoreImprovement && {
-      misses: (scoreImprovement.misses.misses - misses.misses) * -1,
-      missedNotes: (scoreImprovement.misses.missedNotes - misses.missedNotes) * -1,
-      badCuts: (scoreImprovement.misses.badCuts - misses.badCuts) * -1,
-      bombCuts: (scoreImprovement.misses.bombCuts - misses.bombCuts) * -1,
-      wallsHit: (scoreImprovement.misses.wallsHit - misses.wallsHit) * -1,
-    };
-  const previousScoreFc = previousScoreMisses?.misses == 0;
-  const isMissImprovement =
-    previousScoreMisses && scoreImprovement && previousScoreMisses.misses > scoreImprovement.misses.misses;
-
-  return (
-    <div className="flex flex-col justify-center items-center">
-      <ScoreMissesTooltip
-        missedNotes={score.missedNotes}
-        badCuts={score.badCuts}
-        bombCuts={misses?.bombCuts}
-        wallsHit={misses?.wallsHit}
-        fullCombo={score.fullCombo}
-      >
-        <div className="flex gap-1 items-center">
-          <p>{score.fullCombo ? <span className="text-green-400">FC</span> : formatNumberWithCommas(score.misses)}</p>
-          {!hideXMark && <XMarkIcon className={clsx("w-5 h-5", score.fullCombo ? "hidden" : "text-red-400")} />}
-        </div>
-      </ScoreMissesTooltip>
-      {additionalData && previousScoreMisses && scoreImprovement && misses && isMissImprovement && (
-        <div className="flex gap-2 items-center justify-center">
-          <ScoreMissesTooltip
-            missedNotes={previousScoreMisses.missedNotes}
-            badCuts={previousScoreMisses.badCuts}
-            bombCuts={previousScoreMisses.bombCuts}
-            wallsHit={previousScoreMisses.wallsHit}
-            fullCombo={previousScoreFc}
-          >
-            <div className="flex gap-1 items-center text-xs">
-              {previousScoreFc ? (
-                <p className="text-green-400">FC</p>
-              ) : (
-                formatNumberWithCommas(previousScoreMisses.misses)
-              )}
-            </div>
-          </ScoreMissesTooltip>
-          <p>-&gt;</p>
-          <ScoreMissesTooltip
-            missedNotes={misses.missedNotes}
-            badCuts={misses.badCuts}
-            bombCuts={misses.bombCuts}
-            wallsHit={misses.wallsHit}
-            fullCombo={additionalData.fullCombo}
-          >
-            <div className="flex gap-1 items-center text-xs">
-              {additionalData.fullCombo ? <p className="text-green-400">FC</p> : formatNumberWithCommas(misses.misses)}
-            </div>
-          </ScoreMissesTooltip>
-        </div>
-      )}
-    </div>
-  );
-}