j

apps/frontend/src/app/(pages)/api/player/history/route.ts

@@ -0,0 +1,35 @@
+import { NextRequest, NextResponse } from "next/server";
+import { connectMongo } from "@/common/mongo";
+import { IPlayer, PlayerModel } from "@/common/schema/player-schema";
+import { seedPlayerHistory } from "@/common/player-utils";
+import { scoresaberService } from "@/common/service/impl/scoresaber";
+
+export async function GET(request: NextRequest) {
+  const playerIdCookie = request.cookies.get("playerId");
+  const id = request.nextUrl.searchParams.get("id");
+  if (id == null) {
+    return NextResponse.json({ error: "Unknown player. Missing: ?id=" }, { status: 400 });
+  }
+  const shouldCreatePlayer = playerIdCookie?.value === id;
+
+  await connectMongo(); // Connect to Mongo
+
+  // Fetch the player and return their statistic history
+  let foundPlayer: IPlayer | null = await PlayerModel.findById(id);
+  if (shouldCreatePlayer && foundPlayer == null) {
+    foundPlayer = await PlayerModel.create({
+      _id: id,
+      trackedSince: new Date().toISOString(),
+    });
+    const response = await scoresaberService.lookupPlayer(id, true);
+    if (response != undefined) {
+      const { player, rawPlayer } = response;
+      await seedPlayerHistory(foundPlayer!, player, rawPlayer);
+    }
+  }
+  if (foundPlayer == null) {
+    return NextResponse.json({ error: "Player not found" }, { status: 404 });
+  }
+
+  return NextResponse.json(foundPlayer.getHistoryPrevious(50));
+}

apps/frontend/src/app/(pages)/api/player/isbeingtracked/route.ts

@@ -0,0 +1,22 @@
+import { NextRequest, NextResponse } from "next/server";
+import { connectMongo } from "@/common/mongo";
+import { IPlayer, PlayerModel } from "@/common/schema/player-schema";
+import { PlayerTrackedSince } from "@/common/player/player-tracked-since";
+
+export async function GET(request: NextRequest) {
+  const id = request.nextUrl.searchParams.get("id");
+  if (id == null) {
+    return NextResponse.json({ error: "Unknown player. Missing: ?id=" }, { status: 400 });
+  }
+  await connectMongo(); // Connect to Mongo
+
+  const foundPlayer: IPlayer | null = await PlayerModel.findById(id);
+  const response: PlayerTrackedSince = {
+    tracked: foundPlayer != null,
+  };
+  if (foundPlayer != null) {
+    response["trackedSince"] = foundPlayer.trackedSince?.toUTCString();
+    response["daysTracked"] = foundPlayer.getStatisticHistory().size;
+  }
+  return NextResponse.json(response);
+}

apps/frontend/src/app/(pages)/api/proxy/route.ts

@@ -0,0 +1,47 @@
+import { validateUrl } from "@/common/utils";
+import ky from "ky";
+import { NextRequest, NextResponse } from "next/server";
+
+export async function GET(request: NextRequest) {
+  const url = request.nextUrl.searchParams.get("url");
+  if (url == null) {
+    return NextResponse.json({ error: "Missing URL. ?url=" }, { status: 400 });
+  }
+
+  if (!validateUrl(url)) {
+    return NextResponse.json({ error: "Invalid URL" }, { status: 400 });
+  }
+
+  try {
+    const response = await ky.get(url, {
+      next: {
+        revalidate: 30, // 30 seconds
+      },
+    });
+    const { status, headers } = response;
+    if (
+      !headers.has("content-type") ||
+      (headers.has("content-type") && !headers.get("content-type")?.includes("application/json"))
+    ) {
+      return NextResponse.json({
+        error: "We only support proxying JSON responses",
+      });
+    }
+
+    const body = await response.json();
+    return NextResponse.json(body, {
+      status: status,
+    });
+  } catch (err) {
+    console.error(`Error fetching data from ${url}:`, err);
+    return NextResponse.json(
+      { error: "Failed to proxy this request." },
+      {
+        status: 500,
+        headers: {
+          "Access-Control-Allow-Origin": "*",
+        },
+      }
+    );
+  }
+}

apps/frontend/src/app/(pages)/api/trigger/route.ts

@@ -0,0 +1,10 @@
+import { createAppRoute } from "@trigger.dev/nextjs";
+import { client } from "@/trigger";
+
+import "@/jobs";
+
+//this route is used to send and receive data with Trigger.dev
+export const { POST, dynamic } = createAppRoute(client);
+
+//uncomment this to set a higher max duration (it must be inside your plan limits). Full docs: https://vercel.com/docs/functions/serverless-functions/runtimes#max-duration
+//export const maxDuration = 60;

apps/frontend/src/app/(pages)/page.tsx

@@ -0,0 +1,5 @@
+"use client";
+
+export default function Home() {
+  return <main>hi</main>;
+}

apps/frontend/src/app/(pages)/player/[...slug]/page.tsx

@@ -0,0 +1,127 @@
+import { formatNumberWithCommas, formatPp } from "@/common/number-utils";
+import { scoresaberService } from "@/common/service/impl/scoresaber";
+import { ScoreSort } from "@/common/model/score/score-sort";
+import PlayerData from "@/components/player/player-data";
+import { format } from "@formkit/tempo";
+import { Metadata, Viewport } from "next";
+import { redirect } from "next/navigation";
+import { Colors } from "@/common/colors";
+import ScoreSaberPlayerScoresPageToken from "@/common/model/token/scoresaber/score-saber-player-scores-page-token";
+import { getAverageColor } from "@/common/image-utils";
+import { cache } from "react";
+
+const UNKNOWN_PLAYER = {
+  title: "ScoreSaber Reloaded - Unknown Player",
+  description: "The player you were looking for could not be found.",
+};
+
+type Props = {
+  params: Promise<{
+    slug: string[];
+  }>;
+  searchParams: Promise<{
+    [key: string]: string | undefined;
+  }>;
+};
+
+/**
+ * Gets the player data and scores
+ *
+ * @param params the params
+ * @param fetchScores whether to fetch the scores
+ * @returns the player data and scores
+ */
+const getPlayerData = cache(async ({ params }: Props, fetchScores: boolean = true) => {
+  const { slug } = await params;
+  const id = slug[0]; // The players id
+  const sort: ScoreSort = (slug[1] as ScoreSort) || "recent"; // The sorting method
+  const page = parseInt(slug[2]) || 1; // The page number
+  const search = (slug[3] as string) || ""; // The search query
+
+  const player = (await scoresaberService.lookupPlayer(id, false))?.player;
+  let scores: ScoreSaberPlayerScoresPageToken | undefined;
+  if (fetchScores) {
+    scores = await scoresaberService.lookupPlayerScores({
+      playerId: id,
+      sort,
+      page,
+      search,
+    });
+  }
+
+  return {
+    sort: sort,
+    page: page,
+    search: search,
+    player: player,
+    scores: scores,
+  };
+});
+
+export async function generateMetadata(props: Props): Promise<Metadata> {
+  const { player } = await getPlayerData(props, false);
+  if (player === undefined) {
+    return {
+      title: UNKNOWN_PLAYER.title,
+      description: UNKNOWN_PLAYER.description,
+      openGraph: {
+        title: UNKNOWN_PLAYER.title,
+        description: UNKNOWN_PLAYER.description,
+      },
+    };
+  }
+
+  return {
+    title: `${player.name}`,
+    openGraph: {
+      title: `ScoreSaber Reloaded - ${player.name}`,
+      description: `
+      PP: ${formatPp(player.pp)}pp
+      Rank: #${formatNumberWithCommas(player.rank)} (#${formatNumberWithCommas(player.countryRank)} ${player.country})
+      Joined ScoreSaber: ${format(player.joinedDate, { date: "medium", time: "short" })}
+      
+      View the scores for ${player.name}!`,
+      images: [
+        {
+          url: player.avatar,
+        },
+      ],
+    },
+    twitter: {
+      card: "summary",
+    },
+  };
+}
+
+export async function generateViewport(props: Props): Promise<Viewport> {
+  const { player } = await getPlayerData(props, false);
+  if (player === undefined) {
+    return {
+      themeColor: Colors.primary,
+    };
+  }
+
+  const color = await getAverageColor(player.avatar);
+  if (color === undefined) {
+    return {
+      themeColor: Colors.primary,
+    };
+  }
+
+  return {
+    themeColor: color?.hex,
+  };
+}
+
+export default async function Search(props: 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} page={page} />
+    </div>
+  );
+}

apps/frontend/src/app/(pages)/search/page.tsx

@@ -0,0 +1,22 @@
+import SearchPlayer from "@/components/input/search-player";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Search",
+};
+
+export default function Search() {
+  return (
+    <div className="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>
+
+      <div className="flex flex-col items-center text-center">
+        <p className="font-bold text-2xl">Search Player</p>
+        <p className="text-gray-400">Find yourself or a friend</p>
+      </div>
+      <SearchPlayer />
+    </div>
+  );
+}

apps/frontend/src/app/global-error.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import * as Sentry from "@sentry/nextjs";
+import NextError from "next/error";
+import { useEffect } from "react";
+
+export default function GlobalError({ error }: { error: Error & { digest?: string } }) {
+  useEffect(() => {
+    Sentry.captureException(error);
+  }, [error]);
+
+  return (
+    <html>
+      <body>
+        {/* `NextError` is the default Next.js error page component. Its type
+        definition requires a `statusCode` prop. However, since the App Router
+        does not expose status codes for errors, we simply pass 0 to render a
+        generic error message. */}
+        <NextError statusCode={0} />
+      </body>
+    </html>
+  );
+}

apps/frontend/src/app/globals.css

@@ -0,0 +1,84 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  color: var(--foreground);
+  background: var(--background);
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 20 14.3% 4.1%;
+    --card: 0 0% 100%;
+    --card-foreground: 20 14.3% 4.1%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 20 14.3% 4.1%;
+    --primary: 24 9.8% 10%;
+    --primary-foreground: 60 9.1% 97.8%;
+    --secondary: 60 4.8% 95.9%;
+    --secondary-foreground: 24 9.8% 10%;
+    --muted: 60 4.8% 95.9%;
+    --muted-foreground: 25 5.3% 44.7%;
+    --accent: 60 4.8% 95.9%;
+    --accent-foreground: 24 9.8% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 60 9.1% 97.8%;
+    --border: 20 5.9% 90%;
+    --input: 20 5.9% 90%;
+    --ring: 20 14.3% 4.1%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 20 14.3% 4.1%;
+    --foreground: 60 9.1% 97.8%;
+    --card: 20 14.3% 4.1%;
+    --card-foreground: 60 9.1% 97.8%;
+    --popover: 20 14.3% 4.1%;
+    --popover-foreground: 60 9.1% 97.8%;
+    --primary: 60 9.1% 97.8%;
+    --primary-foreground: 24 9.8% 10%;
+    --secondary: 12 6.5% 9.5%;
+    --secondary-foreground: 60 9.1% 97.8%;
+    --muted: 12 6.5% 15.1%;
+    --muted-foreground: 24 5.4% 63.9%;
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 60 9.1% 97.8%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 60 9.1% 97.8%;
+    --border: 12 6.5% 15.1%;
+    --input: 12 6.5% 45.1%;
+    --ring: 24 5.7% 82.9%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}

apps/frontend/src/app/layout.tsx

@@ -0,0 +1,96 @@
+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";
+import { Toaster } from "@/components/ui/toaster";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { AnimatePresence } from "framer-motion";
+import type { Metadata, Viewport } from "next";
+import localFont from "next/font/local";
+import BackgroundImage from "../components/background-image";
+import DatabaseLoader from "../components/loaders/database-loader";
+import NavBar from "../components/navbar/navbar";
+import { Colors } from "@/common/colors";
+import OfflineNetwork from "@/components/offline-network";
+
+const siteFont = localFont({
+  src: "./fonts/JetBrainsMono.ttf",
+  weight: "100 300",
+});
+
+export const metadata: Metadata = {
+  title: {
+    default: "ScoreSaber Reloaded",
+    template: "%s - SSR",
+  },
+  applicationName: "ScoreSaber Reloaded",
+  authors: [
+    {
+      name: "Fascinated",
+      url: "https://git.fascinated.cc/Fascinated",
+    },
+  ],
+  robots: {
+    index: true,
+    follow: true,
+    nocache: false,
+    googleBot: {
+      index: true,
+      follow: true,
+    },
+  },
+  keywords:
+    "scoresaber, score saber, scoresaber stats, score saber stats, beatleader, beat leader," +
+    "scoresaber reloaded, ssr, github, score aggregation, scoresaber api, score saber api, scoresaber api," +
+    "BeatSaber, Overlay, OBS, Twitch, YouTube, BeatSaber Overlay, Github, Beat Saber overlay, ScoreSaber, BeatLeader," +
+    "VR gaming, Twitch stream enhancement, Customizable overlay, Real-time scores, Rankings, Leaderboard information," +
+    "Stream enhancement, Professional overlay, Easy to use overlay builder.",
+  openGraph: {
+    title: "Scoresaber Reloaded",
+    description: "Scoresaber Reloaded is a new way to view your scores and get more stats about your and your plays",
+    url: "https://ssr.fascinated.cc",
+    locale: "en_US",
+    type: "website",
+  },
+  description: "Scoresaber Reloaded is a new way to view your scores and get more stats about your and your plays",
+};
+
+export const viewport: Viewport = {
+  themeColor: Colors.primary,
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={`${siteFont.className} antialiased w-full h-full`}>
+        <DatabaseLoader>
+          <Toaster />
+          <BackgroundImage />
+          <PreloadResources />
+          <TooltipProvider delayDuration={100}>
+            <OfflineNetwork>
+              <ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange>
+                <QueryProvider>
+                  <AnimatePresence>
+                    <main className="flex flex-col min-h-screen gap-2 text-white">
+                      <NavBar />
+                      <div className="z-[1] m-auto flex flex-col flex-grow items-center md:max-w-[1600px]">
+                        {children}
+                      </div>
+                      <Footer />
+                    </main>
+                  </AnimatePresence>
+                </QueryProvider>
+              </ThemeProvider>
+            </OfflineNetwork>
+          </TooltipProvider>
+        </DatabaseLoader>
+      </body>
+    </html>
+  );
+}

apps/frontend/src/common/browser-utils.ts

@@ -0,0 +1,18 @@
+/**
+ * Copies the given string to the clipboard
+ *
+ * @param str the string to copy
+ */
+export function copyToClipboard(str: string) {
+  navigator.clipboard.writeText(str);
+}
+
+/**
+ * Checks if the current context is a worker
+ */
+export function isRunningAsWorker() {
+  if (typeof window === "undefined") {
+    return false;
+  }
+  return navigator.constructor.name === "WorkerNavigator";
+}

apps/frontend/src/common/colors.ts

@@ -0,0 +1,3 @@
+export const Colors = {
+  primary: "#0070f3",
+};

apps/frontend/src/common/database/database.ts

@@ -0,0 +1,75 @@
+import Dexie, { EntityTable } from "dexie";
+import { setPlayerIdCookie } from "../website-utils";
+import BeatSaverMap from "./types/beatsaver-map";
+import Settings from "./types/settings";
+
+const SETTINGS_ID = "SSR"; // DO NOT CHANGE
+
+export default class Database extends Dexie {
+  /**
+   * The settings for the website.
+   */
+  settings!: EntityTable<Settings, "id">;
+
+  /**
+   * BeatSaver maps
+   */
+  beatSaverMaps!: EntityTable<BeatSaverMap, "hash">;
+
+  constructor() {
+    super("ScoreSaberReloaded");
+
+    // Stores
+    this.version(1).stores({
+      settings: "id",
+      beatSaverMaps: "hash",
+    });
+
+    // Mapped tables
+    this.settings.mapToClass(Settings);
+    this.beatSaverMaps.mapToClass(BeatSaverMap);
+
+    // Populate default settings if the table is empty
+    this.on("populate", () => this.populateDefaults());
+
+    this.on("ready", async () => {
+      const settings = await this.getSettings();
+      // If the settings are not found, return
+      if (settings == undefined || settings.playerId == undefined) {
+        return;
+      }
+      setPlayerIdCookie(settings.playerId);
+    });
+  }
+
+  /**
+   * Populates the default settings
+   */
+  async populateDefaults() {
+    await this.settings.add({
+      id: SETTINGS_ID, // Fixed ID for the single settings object
+      backgroundImage: "/assets/background.jpg",
+    });
+  }
+
+  /**
+   * Gets the settings from the database
+   *
+   * @returns the settings
+   */
+  async getSettings(): Promise<Settings | undefined> {
+    return await this.settings.get(SETTINGS_ID);
+  }
+
+  /**
+   * Sets the settings in the database
+   *
+   * @param settings the settings to set
+   * @returns the settings
+   */
+  async setSettings(settings: Settings) {
+    return await this.settings.update(SETTINGS_ID, settings);
+  }
+}
+
+export const db = new Database();

apps/frontend/src/common/database/types/beatsaver-map.ts

@@ -0,0 +1,23 @@
+import { BeatSaverMapToken as BSMap } from "@/common/model/token/beatsaver/beat-saver-map-token";
+import { Entity } from "dexie";
+import Database from "../database";
+
+/**
+ * A beat saver map.
+ */
+export default class BeatSaverMap extends Entity<Database> {
+  /**
+   * The hash of the map.
+   */
+  hash!: string;
+
+  /**
+   * The bsr code for the map.
+   */
+  bsr!: string;
+
+  /**
+   * The full data for the map.
+   */
+  fullData!: BSMap;
+}

apps/frontend/src/common/database/types/settings.ts

@@ -0,0 +1,42 @@
+import { Entity } from "dexie";
+import Database from "../database";
+
+/**
+ * The website settings.
+ */
+export default class Settings extends Entity<Database> {
+  /**
+   * This is just so we can fetch the settings
+   */
+  id!: string;
+
+  /**
+   * The ID of the tracked player
+   */
+  playerId?: string;
+
+  /**
+   * The background image to use
+   */
+  backgroundImage?: string;
+
+  /**
+   * Sets the players id
+   *
+   * @param id the new player id
+   */
+  public setPlayerId(id: string) {
+    this.playerId = id;
+    this.db.setSettings(this);
+  }
+
+  /**
+   * Sets the background image
+   *
+   * @param image the new background image
+   */
+  public setBackgroundImage(image: string) {
+    this.backgroundImage = image;
+    this.db.setSettings(this);
+  }
+}

apps/frontend/src/common/image-utils.ts

@@ -0,0 +1,24 @@
+import { cache } from "react";
+import { config } from "../../config";
+
+/**
+ * Proxies all non-localhost images to make them load faster.
+ *
+ * @param originalUrl the original image url
+ * @returns the new image url
+ */
+export function getImageUrl(originalUrl: string) {
+  return `${!config.siteUrl.includes("localhost") ? "https://img.fascinated.cc/upload/q_70/" : ""}${originalUrl}`;
+}
+
+/**
+ * Gets the average color of an image
+ *
+ * @param src the image url
+ * @returns the average color
+ */
+export const getAverageColor = cache(async (src: string) => {
+  return {
+    hex: "#fff",
+  };
+});

apps/frontend/src/common/model/player/impl/scoresaber-player.ts

@@ -0,0 +1,239 @@
+import Player, { StatisticChange } from "../player";
+import ScoreSaberPlayerToken from "@/common/model/token/scoresaber/score-saber-player-token";
+import { PlayerHistory } from "@/common/player/player-history";
+import { config } from "../../../../../config";
+import ky from "ky";
+import { formatDateMinimal, getDaysAgoDate, getMidnightAlignedDate } from "@/common/time-utils";
+
+/**
+ * A ScoreSaber player.
+ */
+export default interface ScoreSaberPlayer extends Player {
+  /**
+   * The bio of the player.
+   */
+  bio: ScoreSaberBio;
+
+  /**
+   * The amount of pp the player has.
+   */
+  pp: number;
+
+  /**
+   * The change in pp compared to yesterday.
+   */
+  statisticChange: StatisticChange | undefined;
+
+  /**
+   * The role the player has.
+   */
+  role: ScoreSaberRole | undefined;
+
+  /**
+   * The badges the player has.
+   */
+  badges: ScoreSaberBadge[];
+
+  /**
+   * The rank history for this player.
+   */
+  statisticHistory: { [date: string]: PlayerHistory };
+
+  /**
+   * The statistics for this player.
+   */
+  statistics: ScoreSaberPlayerStatistics;
+
+  /**
+   * The permissions the player has.
+   */
+  permissions: number;
+
+  /**
+   * Whether the player is banned or not.
+   */
+  banned: boolean;
+
+  /**
+   * Whether the player is inactive or not.
+   */
+  inactive: boolean;
+}
+
+export async function getScoreSaberPlayerFromToken(token: ScoreSaberPlayerToken): Promise<ScoreSaberPlayer> {
+  const bio: ScoreSaberBio = {
+    lines: token.bio?.split("\n") || [],
+    linesStripped: token.bio?.replace(/<[^>]+>/g, "")?.split("\n") || [],
+  };
+  const role = token.role == null ? undefined : (token.role as ScoreSaberRole);
+  const badges: ScoreSaberBadge[] =
+    token.badges?.map(badge => {
+      return {
+        url: badge.image,
+        description: badge.description,
+      };
+    }) || [];
+
+  const todayDate = formatDateMinimal(getMidnightAlignedDate(new Date()));
+  let statisticHistory: { [key: string]: PlayerHistory } = {};
+  try {
+    const history = await ky
+      .get<{
+        [key: string]: PlayerHistory;
+      }>(`${config.siteUrl}/api/player/history?id=${token.id}`)
+      .json();
+    if (history === undefined || Object.entries(history).length === 0) {
+      console.log("Player has no history, using fallback");
+      throw new Error();
+    }
+    if (history) {
+      // Use the latest data for today
+      history[todayDate] = {
+        rank: token.rank,
+        countryRank: token.countryRank,
+        pp: token.pp,
+      };
+    }
+    statisticHistory = history;
+  } catch (error) {
+    // Fallback to ScoreSaber History if the player has no history
+    const playerRankHistory = token.histories.split(",").map(value => {
+      return parseInt(value);
+    });
+    playerRankHistory.push(token.rank);
+
+    let daysAgo = 0; // Start from current day
+    for (let i = playerRankHistory.length - 1; i >= 0; i--) {
+      const rank = playerRankHistory[i];
+      const date = getMidnightAlignedDate(getDaysAgoDate(daysAgo));
+      daysAgo += 1; // Increment daysAgo for each earlier rank
+
+      statisticHistory[formatDateMinimal(date)] = {
+        rank: rank,
+      };
+    }
+  }
+  // Sort the fallback history
+  statisticHistory = Object.entries(statisticHistory)
+    .sort((a, b) => Date.parse(b[0]) - Date.parse(a[0]))
+    .reduce((obj, [key, value]) => ({ ...obj, [key]: value }), {});
+
+  const yesterdayDate = formatDateMinimal(getMidnightAlignedDate(getDaysAgoDate(1)));
+  const todayStats = statisticHistory[todayDate];
+  const yesterdayStats = statisticHistory[yesterdayDate];
+  const hasChange = !!(todayStats && yesterdayStats);
+
+  /**
+   * Gets the change in the given stat
+   *
+   * @param statType the stat to check
+   * @return the change
+   */
+  const getChange = (statType: "rank" | "countryRank" | "pp"): number => {
+    if (!hasChange) {
+      return 0;
+    }
+    const statToday = todayStats[`${statType}`];
+    const statYesterday = yesterdayStats[`${statType}`];
+    return !!(statToday && statYesterday) ? statToday - statYesterday : 0;
+  };
+
+  // Calculate the changes
+  const rankChange = getChange("rank");
+  const countryRankChange = getChange("countryRank");
+  const ppChange = getChange("pp");
+
+  return {
+    id: token.id,
+    name: token.name,
+    avatar: token.profilePicture,
+    country: token.country,
+    rank: token.rank,
+    countryRank: token.countryRank,
+    joinedDate: new Date(token.firstSeen),
+    bio: bio,
+    pp: token.pp,
+    statisticChange: {
+      rank: rankChange * -1, // Reverse the rank change
+      countryRank: countryRankChange * -1, // Reverse the country rank change
+      pp: ppChange,
+    },
+    role: role,
+    badges: badges,
+    statisticHistory: statisticHistory,
+    statistics: token.scoreStats,
+    permissions: token.permissions,
+    banned: token.banned,
+    inactive: token.inactive,
+  };
+}
+
+/**
+ * A bio of a player.
+ */
+export type ScoreSaberBio = {
+  /**
+   * The lines of the bio including any html tags.
+   */
+  lines: string[];
+
+  /**
+   * The lines of the bio stripped of all html tags.
+   */
+  linesStripped: string[];
+};
+
+/**
+ * The ScoreSaber account roles.
+ */
+export type ScoreSaberRole = "Admin";
+
+/**
+ * A badge for a player.
+ */
+export type ScoreSaberBadge = {
+  /**
+   * The URL to the badge.
+   */
+  url: string;
+
+  /**
+   * The description of the badge.
+   */
+  description: string;
+};
+
+/**
+ * The statistics for a player.
+ */
+export type ScoreSaberPlayerStatistics = {
+  /**
+   * The total amount of score accumulated over all scores.
+   */
+  totalScore: number;
+
+  /**
+   * The total amount of ranked score accumulated over all scores.
+   */
+  totalRankedScore: number;
+
+  /**
+   * The average ranked accuracy for all ranked scores.
+   */
+  averageRankedAccuracy: number;
+
+  /**
+   * The total amount of scores set.
+   */
+  totalPlayCount: number;
+
+  /**
+   * The total amount of ranked score set.
+   */
+  rankedPlayCount: number;
+
+  /**
+   * The amount of times their replays were watched.
+   */
+  replaysWatched: number;
+};

apps/frontend/src/common/model/player/player.ts

@@ -0,0 +1,58 @@
+import { PlayerHistory } from "@/common/player/player-history";
+
+export default class Player {
+  /**
+   * The ID of this player.
+   */
+  id: string;
+
+  /**
+   * The name of this player.
+   */
+  name: string;
+
+  /**
+   * The avatar url for this player.
+   */
+  avatar: string;
+
+  /**
+   * The country of this player.
+   */
+  country: string;
+
+  /**
+   * The rank of the player.
+   */
+  rank: number;
+
+  /**
+   * The rank the player has in their country.
+   */
+  countryRank: number;
+
+  /**
+   * The date the player joined the playform.
+   */
+  joinedDate: Date;
+
+  constructor(
+    id: string,
+    name: string,
+    avatar: string,
+    country: string,
+    rank: number,
+    countryRank: number,
+    joinedDate: Date
+  ) {
+    this.id = id;
+    this.name = name;
+    this.avatar = avatar;
+    this.country = country;
+    this.rank = rank;
+    this.countryRank = countryRank;
+    this.joinedDate = joinedDate;
+  }
+}
+
+export type StatisticChange = PlayerHistory;

apps/frontend/src/common/model/score/impl/scoresaber-score.ts

@@ -0,0 +1,47 @@
+import Score from "@/common/model/score/score";
+import { Modifier } from "@/common/model/score/modifier";
+import ScoreSaberScoreToken from "@/common/model/token/scoresaber/score-saber-score-token";
+
+export default class ScoreSaberScore extends Score {
+  constructor(
+    score: number,
+    weight: number | undefined,
+    rank: number,
+    worth: number,
+    modifiers: Modifier[],
+    misses: number,
+    badCuts: number,
+    fullCombo: boolean,
+    timestamp: Date
+  ) {
+    super(score, weight, rank, worth, modifiers, misses, badCuts, fullCombo, timestamp);
+  }
+
+  /**
+   * Gets a {@link ScoreSaberScore} from a {@link ScoreSaberScoreToken}.
+   *
+   * @param token the token to convert
+   */
+  public static fromToken(token: ScoreSaberScoreToken): ScoreSaberScore {
+    const modifiers: Modifier[] = token.modifiers.split(",").map(mod => {
+      mod = mod.toUpperCase();
+      const modifier = Modifier[mod as keyof typeof Modifier];
+      if (modifier === undefined) {
+        throw new Error(`Unknown modifier: ${mod}`);
+      }
+      return modifier;
+    });
+
+    return new ScoreSaberScore(
+      token.baseScore,
+      token.weight,
+      token.rank,
+      token.pp,
+      modifiers,
+      token.missedNotes,
+      token.badCuts,
+      token.fullCombo,
+      new Date(token.timeSet)
+    );
+  }
+}

apps/frontend/src/common/model/score/modifier.ts

@@ -0,0 +1,18 @@
+/**
+ * The score modifiers.
+ */
+export enum Modifier {
+  DA = "Disappearing Arrows",
+  FS = "Faster Song",
+  SF = "Super Fast Song",
+  SS = "Slower Song",
+  GN = "Ghost Notes",
+  NA = "No Arrows",
+  NO = "No Obstacles",
+  SA = "Strict Angles",
+  SC = "Small Notes",
+  PM = "Pro Mode",
+  CS = "Fail on Saber Clash",
+  IF = "One Life",
+  BE = "Battery Energy",
+}

apps/frontend/src/common/model/score/score-sort.ts

@@ -0,0 +1,4 @@
+export enum ScoreSort {
+  top = "top",
+  recent = "recent",
+}

apps/frontend/src/common/model/score/score.ts

@@ -0,0 +1,116 @@
+import { Modifier } from "@/common/model/score/modifier";
+
+export default class Score {
+  /**
+   * The base score for the score.
+   * @private
+   */
+  private readonly _score: number;
+
+  /**
+   * The weight of the score, or undefined if not ranked.s
+   * @private
+   */
+  private readonly _weight: number | undefined;
+
+  /**
+   * The rank for the score.
+   * @private
+   */
+  private readonly _rank: number;
+
+  /**
+   * The worth of the score (this could be pp, ap, cr, etc.),
+   * or undefined if not ranked.
+   * @private
+   */
+  private readonly _worth: number;
+
+  /**
+   * The modifiers used on the score.
+   * @private
+   */
+  private readonly _modifiers: Modifier[];
+
+  /**
+   * The amount missed notes.
+   * @private
+   */
+  private readonly _misses: number;
+
+  /**
+   * The amount of bad cuts.
+   * @private
+   */
+  private readonly _badCuts: number;
+
+  /**
+   * Whether every note was hit.
+   * @private
+   */
+  private readonly _fullCombo: boolean;
+
+  /**
+   * The time the score was set.
+   * @private
+   */
+  private readonly _timestamp: Date;
+
+  constructor(
+    score: number,
+    weight: number | undefined,
+    rank: number,
+    worth: number,
+    modifiers: Modifier[],
+    misses: number,
+    badCuts: number,
+    fullCombo: boolean,
+    timestamp: Date
+  ) {
+    this._score = score;
+    this._weight = weight;
+    this._rank = rank;
+    this._worth = worth;
+    this._modifiers = modifiers;
+    this._misses = misses;
+    this._badCuts = badCuts;
+    this._fullCombo = fullCombo;
+    this._timestamp = timestamp;
+  }
+
+  get score(): number {
+    return this._score;
+  }
+
+  get weight(): number | undefined {
+    return this._weight;
+  }
+
+  get rank(): number {
+    return this._rank;
+  }
+
+  get worth(): number {
+    return this._worth;
+  }
+
+  get modifiers(): Modifier[] {
+    return this._modifiers;
+  }
+
+  get misses(): number {
+    return this._misses;
+  }
+
+  get badCuts(): number {
+    return this._badCuts;
+  }
+
+  get fullCombo(): boolean {
+    return this._fullCombo;
+  }
+
+  get timestamp(): Date {
+    return this._timestamp;
+  }
+}

apps/frontend/src/common/model/token/beatsaver/beat-saver-account-token.ts

@@ -0,0 +1,51 @@
+export default interface BeatSaverAccountToken {
+  /**
+   * The id of the mapper
+   */
+  id: number;
+
+  /**
+   * The name of the mapper.
+   */
+  name: string;
+
+  /**
+   * The account hash of the mapper.
+   */
+  hash: string;
+
+  /**
+   * The avatar url for the mapper.
+   */
+  avatar: string;
+
+  /**
+   * The way the account was created
+   */
+  type: string;
+
+  /**
+   * Whether the account is an admin or not.
+   */
+  admin: boolean;
+
+  /**
+   * Whether the account is a curator or not.
+   */
+  curator: boolean;
+
+  /**
+   * Whether the account is a senior curator or not.
+   */
+  seniorCurator: boolean;
+
+  /**
+   * Whether the account is a verified mapper or not.
+   */
+  verifiedMapper: boolean;
+
+  /**
+   * The playlist for the mappers songs.
+   */
+  playlistUrl: string;
+}

apps/frontend/src/common/model/token/beatsaver/beat-saver-map-metadata-token.ts

@@ -0,0 +1,36 @@
+export default interface BeatSaverMapMetadataToken {
+  /**
+   * The bpm of the song.
+   */
+  bpm: number;
+
+  /**
+   * The song's length in seconds.
+   */
+  duration: number;
+
+  /**
+   * The song's name.
+   */
+  songName: string;
+
+  /**
+   * The songs sub name.
+   */
+  songSubName: string;
+
+  /**
+   * The artist(s) name.
+   */
+  songAuthorName: string;
+
+  /**
+   * The song's author's url.
+   */
+  songAuthorUrl: string;
+
+  /**
+   * The level mapper(s) name.
+   */
+  levelAuthorName: string;
+}

apps/frontend/src/common/model/token/beatsaver/beat-saver-map-stats-token.ts

@@ -0,0 +1,31 @@
+export default interface BeatSaverMapStatsToken {
+  /**
+   * The amount of time the map has been played.
+   */
+  plays: number;
+
+  /**
+   * The amount of times the map has been downloaded.
+   */
+  downloads: number;
+
+  /**
+   * The amount of times the map has been upvoted.
+   */
+  upvotes: number;
+
+  /**
+   * The amount of times the map has been downvoted.
+   */
+  downvotes: number;
+
+  /**
+   * The score for the map
+   */
+  score: number;
+
+  /**
+   * The amount of reviews for the map.
+   */
+  reviews: number;
+}

apps/frontend/src/common/model/token/beatsaver/beat-saver-map-token.ts

@@ -0,0 +1,24 @@
+import BeatSaverAccountToken from "./beat-saver-account-token";
+import BeatSaverMapMetadataToken from "./beat-saver-map-metadata-token";
+import BeatSaverMapStatsToken from "./beat-saver-map-stats-token";
+
+export interface BeatSaverMapToken {
+  id: string;
+  name: string;
+  description: string;
+  uploader: BeatSaverAccountToken;
+  metadata: BeatSaverMapMetadataToken;
+  stats: BeatSaverMapStatsToken;
+  uploaded: string;
+  automapper: boolean;
+  ranked: boolean;
+  qualified: boolean;
+  // todo: versions
+  createdAt: string;
+  updatedAt: string;
+  lastPublishedAt: string;
+  tags: string[];
+  declaredAi: string;
+  blRanked: boolean;
+  blQualified: boolean;
+}

apps/frontend/src/common/model/token/scoresaber/score-saber-badge-token.ts

@@ -0,0 +1,11 @@
+export interface ScoreSaberBadgeToken {
+  /**
+   * The description of the badge.
+   */
+  description: string;
+
+  /**
+   * The image of the badge.
+   */
+  image: string;
+}

apps/frontend/src/common/model/token/scoresaber/score-saber-difficulty-token.ts

@@ -0,0 +1,6 @@
+export default interface ScoreSaberDifficultyToken {
+  leaderboardId: number;
+  difficulty: number;
+  gameMode: string;
+  difficultyRaw: string;
+}

apps/frontend/src/common/model/token/scoresaber/score-saber-leaderboard-player-info-token.ts

@@ -0,0 +1,8 @@
+export default interface ScoreSaberLeaderboardPlayerInfoToken {
+  id: string;
+  name: string;
+  profilePicture: string;
+  country: string;
+  permissions: number;
+  role: string;
+}

apps/frontend/src/common/model/token/scoresaber/score-saber-leaderboard-scores-page-token.ts

@@ -0,0 +1,14 @@
+import ScoreSaberMetadataToken from "./score-saber-metadata-token";
+import ScoreSaberScoreToken from "./score-saber-score-token";
+
+export default interface ScoreSaberLeaderboardScoresPageToken {
+  /**
+   * The scores on this page.
+   */
+  scores: ScoreSaberScoreToken[];
+
+  /**
+   * The metadata for the page.
+   */
+  metadata: ScoreSaberMetadataToken;
+}

apps/frontend/src/common/model/token/scoresaber/score-saber-leaderboard-token.ts

@@ -0,0 +1,26 @@
+import ScoreSaberDifficultyToken from "./score-saber-difficulty-token";
+
+export default interface ScoreSaberLeaderboardToken {
+  id: number;
+  songHash: string;
+  songName: string;
+  songSubName: string;
+  songAuthorName: string;
+  levelAuthorName: string;
+  difficulty: ScoreSaberDifficultyToken;
+  maxScore: number;
+  createdDate: string;
+  rankedDate: string;
+  qualifiedDate: string;
+  lovedDate: string;
+  ranked: boolean;
+  qualified: boolean;
+  loved: boolean;
+  maxPP: number;
+  stars: number;
+  positiveModifiers: boolean;
+  plays: boolean;
+  dailyPlays: boolean;
+  coverImage: string;
+  difficulties: ScoreSaberDifficultyToken[];
+}

apps/frontend/src/common/model/token/scoresaber/score-saber-metadata-token.ts

@@ -0,0 +1,16 @@
+export default interface ScoreSaberMetadataToken {
+  /**
+   * The total amount of returned results.
+   */
+  total: number;
+
+  /**
+   * The current page
+   */
+  page: number;
+
+  /**
+   * The amount of results per page
+   */
+  itemsPerPage: number;
+}

apps/frontend/src/common/model/token/scoresaber/score-saber-player-score-token.ts

@@ -0,0 +1,14 @@
+import ScoreSaberLeaderboardToken from "./score-saber-leaderboard-token";
+import ScoreSaberScoreToken from "./score-saber-score-token";
+
+export default interface ScoreSaberPlayerScoreToken {
+  /**
+   * The score of the player score.
+   */
+  score: ScoreSaberScoreToken;
+
+  /**
+   * The leaderboard the score was set on.
+   */
+  leaderboard: ScoreSaberLeaderboardToken;
+}

apps/frontend/src/common/model/token/scoresaber/score-saber-player-scores-page-token.ts

@@ -0,0 +1,14 @@
+import ScoreSaberMetadataToken from "./score-saber-metadata-token";
+import ScoreSaberPlayerScoreToken from "./score-saber-player-score-token";
+
+export default interface ScoreSaberPlayerScoresPageToken {
+  /**
+   * The scores on this page.
+   */
+  playerScores: ScoreSaberPlayerScoreToken[];
+
+  /**
+   * The metadata for the page.
+   */
+  metadata: ScoreSaberMetadataToken;
+}

apps/frontend/src/common/model/token/scoresaber/score-saber-player-search-token.ts

@@ -0,0 +1,8 @@
+import ScoreSaberPlayerToken from "./score-saber-player-token";
+
+export interface ScoreSaberPlayerSearchToken {
+  /**
+   * The players that were found
+   */
+  players: ScoreSaberPlayerToken[];
+}

apps/frontend/src/common/model/token/scoresaber/score-saber-player-token.ts

@@ -0,0 +1,84 @@
+import { ScoreSaberBadgeToken } from "./score-saber-badge-token";
+import ScoreSaberScoreStatsToken from "./score-saber-score-stats-token";
+
+export default interface ScoreSaberPlayerToken {
+  /**
+   * The ID of the player.
+   */
+  id: string;
+
+  /**
+   * The name of the player.
+   */
+  name: string;
+
+  /**
+   * The profile picture of the player.
+   */
+  profilePicture: string;
+
+  /**
+   * The bio of the player.
+   */
+  bio: string | null;
+
+  /**
+   * The country of the player.
+   */
+  country: string;
+
+  /**
+   * The amount of pp the player has.
+   */
+  pp: number;
+
+  /**
+   * The rank of the player.
+   */
+  rank: number;
+
+  /**
+   * The rank the player has in their country.
+   */
+  countryRank: number;
+
+  /**
+   * The role of the player.
+   */
+  role: string | null;
+
+  /**
+   * The badges the player has.
+   */
+  badges: ScoreSaberBadgeToken[] | null;
+
+  /**
+   * The previous 50 days of rank history.
+   */
+  histories: string;
+
+  /**
+   * The score stats of the player.
+   */
+  scoreStats: ScoreSaberScoreStatsToken;
+
+  /**
+   * The permissions of the player. (bitwise)
+   */
+  permissions: number;
+
+  /**
+   * Whether the player is banned or not.
+   */
+  banned: boolean;
+
+  /**
+   * Whether the player is inactive or not.
+   */
+  inactive: boolean;
+
+  /**
+   * The date the player joined ScoreSaber.
+   */
+  firstSeen: string;
+}

apps/frontend/src/common/model/token/scoresaber/score-saber-players-page-token.ts

@@ -0,0 +1,14 @@
+import ScoreSaberMetadataToken from "./score-saber-metadata-token";
+import ScoreSaberPlayerToken from "./score-saber-player-token";
+
+export interface ScoreSaberPlayersPageToken {
+  /**
+   * The players that were found
+   */
+  players: ScoreSaberPlayerToken[];
+
+  /**
+   * The metadata for the page.
+   */
+  metadata: ScoreSaberMetadataToken;
+}

apps/frontend/src/common/model/token/scoresaber/score-saber-score-stats-token.ts

@@ -0,0 +1,31 @@
+export default interface ScoreSaberScoreStatsToken {
+  /**
+   * The total amount of score accumulated over all scores.
+   */
+  totalScore: number;
+
+  /**
+   * The total amount of ranked score accumulated over all scores.
+   */
+  totalRankedScore: number;
+
+  /**
+   * The average ranked accuracy for all ranked scores.
+   */
+  averageRankedAccuracy: number;
+
+  /**
+   * The total amount of scores set.
+   */
+  totalPlayCount: number;
+
+  /**
+   * The total amount of ranked score set.
+   */
+  rankedPlayCount: number;
+
+  /**
+   * The amount of times their replays were watched.
+   */
+  replaysWatched: number;
+}

apps/frontend/src/common/model/token/scoresaber/score-saber-score-token.ts

@@ -0,0 +1,25 @@
+import ScoreSaberLeaderboardToken from "./score-saber-leaderboard-token";
+import ScoreSaberLeaderboardPlayerInfoToken from "./score-saber-leaderboard-player-info-token";
+
+export default interface ScoreSaberScoreToken {
+  id: string;
+  leaderboardPlayerInfo: ScoreSaberLeaderboardPlayerInfoToken;
+  rank: number;
+  baseScore: number;
+  modifiedScore: number;
+  pp: number;
+  weight: number;
+  modifiers: string;
+  multiplier: number;
+  badCuts: number;
+  missedNotes: number;
+  maxCombo: number;
+  fullCombo: boolean;
+  hmd: number;
+  hasReplay: boolean;
+  timeSet: string;
+  deviceHmd: string;
+  deviceControllerLeft: string;
+  deviceControllerRight: string;
+  leaderboard: ScoreSaberLeaderboardToken;
+}

apps/frontend/src/common/mongo.ts

@@ -0,0 +1,12 @@
+import * as mongoose from "mongoose";
+
+/**
+ * Connects to the mongo database
+ */
+export async function connectMongo() {
+  const connectionUri = process.env.MONGO_URI;
+  if (!connectionUri) {
+    throw new Error("Missing MONGO_URI");
+  }
+  await mongoose.connect(connectionUri);
+}

apps/frontend/src/common/number-utils.ts

@@ -0,0 +1,19 @@
+/**
+ * Formats a number without trailing zeros.
+ *
+ * @param num the number to format
+ * @returns the formatted number
+ */
+export function formatNumberWithCommas(num: number) {
+  return num.toLocaleString();
+}
+
+/**
+ * Formats the pp value
+ *
+ * @param num the pp to format
+ * @returns the formatted pp
+ */
+export function formatPp(num: number) {
+  return num.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+}

apps/frontend/src/common/player-utils.ts

@@ -0,0 +1,117 @@
+import { PlayerHistory } from "@/common/player/player-history";
+import { IPlayer } from "@/common/schema/player-schema";
+import ScoreSaberPlayerToken from "@/common/model/token/scoresaber/score-saber-player-token";
+import ScoreSaberPlayer from "@/common/model/player/impl/scoresaber-player";
+import { getDaysAgoDate, getMidnightAlignedDate } from "@/common/time-utils";
+import { scoresaberService } from "@/common/service/impl/scoresaber";
+import { IO } from "@trigger.dev/sdk";
+
+const INACTIVE_CHECK_AGAIN_TIME = 3 * 24 * 60 * 60 * 1000; // 3 days
+
+/**
+ * Sorts the player history based on date,
+ * so the most recent date is first
+ *
+ * @param history the player history
+ */
+export function sortPlayerHistory(history: Map<string, PlayerHistory>) {
+  return Array.from(history.entries()).sort(
+    (a, b) => Date.parse(b[0]) - Date.parse(a[0]) // Sort in descending order
+  );
+}
+
+/**
+ * Sorts the player history based on date,
+ * so the most recent date is first
+ *
+ * @param foundPlayer the player
+ * @param player the scoresaber player
+ * @param rawPlayer the raw scoresaber player
+ */
+export async function seedPlayerHistory(
+  foundPlayer: IPlayer,
+  player: ScoreSaberPlayer,
+  rawPlayer: ScoreSaberPlayerToken
+): Promise<Map<string, PlayerHistory>> {
+  // Loop through rankHistory in reverse, from current day backwards
+  const playerRankHistory = rawPlayer.histories.split(",").map(value => {
+    return parseInt(value);
+  });
+  playerRankHistory.push(player.rank);
+
+  let daysAgo = 0; // Start from current day
+  for (let i = playerRankHistory.length - 1; i >= 0; i--) {
+    const rank = playerRankHistory[i];
+    const date = getMidnightAlignedDate(getDaysAgoDate(daysAgo));
+    foundPlayer.setStatisticHistory(date, {
+      rank: rank,
+    });
+    daysAgo += 1; // Increment daysAgo for each earlier rank
+  }
+
+  foundPlayer.sortStatisticHistory();
+  await foundPlayer.save();
+  return foundPlayer.getStatisticHistory();
+}
+
+/**
+ * Tracks a players statistics
+ *
+ * This is ONLY to be used in Trigger.
+ *
+ * @param io the io from Trigger
+ * @param dateToday the date to use
+ * @param foundPlayer the player to track
+ */
+export async function trackScoreSaberPlayer(dateToday: Date, foundPlayer: IPlayer, io?: IO) {
+  io && (await io.logger.info(`Updating statistics for ${foundPlayer.id}...`));
+
+  // Check if the player is inactive and if we check their inactive status again
+  if (
+    foundPlayer.rawPlayer &&
+    foundPlayer.rawPlayer.inactive &&
+    Date.now() - foundPlayer.getLastTracked().getTime() > INACTIVE_CHECK_AGAIN_TIME
+  ) {
+    io && (await io.logger.warn(`Player ${foundPlayer.id} is inactive, skipping...`));
+    return;
+  }
+
+  // Lookup player data from the ScoreSaber service
+  const response = await scoresaberService.lookupPlayer(foundPlayer.id, true);
+  if (response == undefined) {
+    io && (await io.logger.warn(`Player ${foundPlayer.id} not found on ScoreSaber`));
+    return;
+  }
+  const { player, rawPlayer } = response;
+  foundPlayer.rawPlayer = player; // Update the raw player data
+
+  if (player.inactive) {
+    io && (await io.logger.warn(`Player ${foundPlayer.id} is inactive`));
+    await foundPlayer.save(); // Save the player
+    return;
+  }
+
+  const statisticHistory = foundPlayer.getStatisticHistory();
+
+  // Seed the history with ScoreSaber data if no history exists
+  if (statisticHistory.size === 0) {
+    io && (await io.logger.info(`Seeding history for ${foundPlayer.id}...`));
+    await seedPlayerHistory(foundPlayer, player, rawPlayer);
+    io && (await io.logger.info(`Seeded history for ${foundPlayer.id}`));
+  }
+
+  // Update current day's statistics
+  let history = foundPlayer.getHistoryByDate(dateToday);
+  if (history == undefined) {
+    history = {}; // Initialize if history is not found
+  }
+  // Set the history data
+  history.pp = player.pp;
+  history.countryRank = player.countryRank;
+  history.rank = player.rank;
+  foundPlayer.setStatisticHistory(dateToday, history);
+  foundPlayer.sortStatisticHistory();
+  await foundPlayer.save();
+
+  io && (await io.logger.info(`Updated statistics for ${foundPlayer.id}`));
+}

apps/frontend/src/common/player/player-history.ts

@@ -0,0 +1,16 @@
+export interface PlayerHistory {
+  /**
+   * The player's rank.
+   */
+  rank?: number;
+
+  /**
+   * The player's country rank.
+   */
+  countryRank?: number;
+
+  /**
+   * The pp of the player.
+   */
+  pp?: number;
+}

apps/frontend/src/common/player/player-tracked-since.ts

@@ -0,0 +1,16 @@
+export interface PlayerTrackedSince {
+  /**
+   * Whether the player statistics are being tracked
+   */
+  tracked: boolean;
+
+  /**
+   * The date the player was first tracked
+   */
+  trackedSince?: string;
+
+  /**
+   * The amount of days the player has been tracked
+   */
+  daysTracked?: number;
+}

apps/frontend/src/common/schema/player-schema.ts

@@ -0,0 +1,145 @@
+import mongoose, { Document, Schema } from "mongoose";
+import { PlayerHistory } from "@/common/player/player-history";
+import { formatDateMinimal, getDaysAgo, getMidnightAlignedDate } from "@/common/time-utils";
+import ScoreSaberPlayer from "@/common/model/player/impl/scoresaber-player";
+import { sortPlayerHistory } from "@/common/player-utils";
+
+// Interface for Player Document
+export interface IPlayer extends Document {
+  /**
+   * The player's id
+   */
+  id: string;
+
+  /**
+   * The player's statistic history
+   */
+  statisticHistory: Map<string, PlayerHistory>;
+
+  /**
+   * The last time the player was tracked
+   */
+  lastTracked: Date;
+
+  /**
+   * The raw player data.
+   */
+  rawPlayer: ScoreSaberPlayer;
+
+  /**
+   * The first time the player was tracked
+   */
+  trackedSince: Date;
+
+  /**
+   * Gets when this player was last tracked.
+   *
+   * @returns the date when the player was last tracked
+   */
+  getLastTracked(): Date;
+
+  /**
+   * Gets the history for the given date
+   *
+   * @param date
+   * @returns the player history
+   */
+  getHistoryByDate(date: Date): PlayerHistory;
+
+  /**
+   * Gets the history for the previous X days
+   *
+   * @param amount the amount of days
+   * @returns the player history
+   */
+  getHistoryPrevious(amount: number): { [key: string]: PlayerHistory };
+
+  /**
+   * Gets all the statistic history
+   *
+   * @returns the statistic history
+   */
+  getStatisticHistory(): Map<string, PlayerHistory>;
+
+  /**
+   * Sets the statistic history for the given date
+   *
+   * @param date the date to set it on
+   * @param data the data to set
+   */
+  setStatisticHistory(date: Date, data: PlayerHistory): void;
+
+  /**
+   * Sorts the statistic history
+   *
+   * @returns the sorted statistic history
+   */
+  sortStatisticHistory(): Map<string, PlayerHistory>;
+}
+
+// Mongoose Schema definition for Player
+const PlayerSchema = new Schema<IPlayer>({
+  _id: { type: String, required: true },
+  lastTracked: { type: Date, default: new Date(), required: false },
+  rawPlayer: { type: Object, required: false },
+  statisticHistory: { type: Map, default: () => new Map(), required: false },
+  trackedSince: { type: Date, default: new Date(), required: false },
+});
+
+PlayerSchema.methods.getLastTracked = function (): Date {
+  return this.ked || new Date();
+};
+
+PlayerSchema.methods.getHistoryByDate = function (date: Date): PlayerHistory {
+  return this.statisticHistory.get(formatDateMinimal(getMidnightAlignedDate(date))) || {};
+};
+
+PlayerSchema.methods.getHistoryPrevious = function (amount: number): {
+  [key: string]: PlayerHistory;
+} {
+  const toReturn: { [key: string]: PlayerHistory } = {};
+  const history = sortPlayerHistory(this.getStatisticHistory());
+
+  for (const [date, stat] of history) {
+    const parsedDate = new Date(date);
+    if (getDaysAgo(parsedDate) + 1 <= amount) {
+      toReturn[date] = stat;
+    }
+  }
+
+  return toReturn;
+};
+
+PlayerSchema.methods.getStatisticHistory = function (): Map<Date, PlayerHistory> {
+  if (!this.statisticHistory) {
+    this.statisticHistory = new Map();
+  }
+  return this.statisticHistory;
+};
+
+PlayerSchema.methods.setStatisticHistory = function (date: Date, data: PlayerHistory): void {
+  if (!this.statisticHistory) {
+    this.statisticHistory = new Map();
+  }
+  return this.statisticHistory.set(formatDateMinimal(getMidnightAlignedDate(date)), data);
+};
+
+PlayerSchema.methods.sortStatisticHistory = function (): Map<Date, PlayerHistory> {
+  if (!this.statisticHistory) {
+    this.statisticHistory = new Map();
+  }
+
+  // Sort the player's history
+  this.statisticHistory = new Map(
+    Array.from(this.statisticHistory.entries() as [string, PlayerHistory][])
+      .sort((a: [string, PlayerHistory], b: [string, PlayerHistory]) => Date.parse(b[0]) - Date.parse(a[0]))
+      // Convert the date strings back to Date objects for the resulting Map
+      .map(([date, history]) => [formatDateMinimal(new Date(date)), history])
+  );
+  return this.statisticHistory;
+};
+
+// Mongoose Model for Player
+const PlayerModel = mongoose.models.Player || mongoose.model<IPlayer>("Player", PlayerSchema);
+
+export { PlayerModel };

apps/frontend/src/common/scoresaber-utils.ts

@@ -0,0 +1,27 @@
+/**
+ * Formats the ScoreSaber difficulty number
+ *
+ * @param diff the diffuiclity number
+ */
+export function getDifficultyFromScoreSaberDifficulty(diff: number) {
+  switch (diff) {
+    case 1: {
+      return "Easy";
+    }
+    case 3: {
+      return "Normal";
+    }
+    case 5: {
+      return "Hard";
+    }
+    case 7: {
+      return "Expert";
+    }
+    case 9: {
+      return "Expert+";
+    }
+    default: {
+      return "Unknown";
+    }
+  }
+}

apps/frontend/src/common/service/impl/beatsaver.ts

@@ -0,0 +1,55 @@
+import BeatSaverMap from "@/common/database/types/beatsaver-map";
+import { db } from "../../database/database";
+import Service from "../service";
+import { BeatSaverMapToken as BSMap } from "@/common/model/token/beatsaver/beat-saver-map-token";
+
+const API_BASE = "https://api.beatsaver.com";
+const LOOKUP_MAP_BY_HASH_ENDPOINT = `${API_BASE}/maps/hash/:query`;
+
+class BeatSaverService extends Service {
+  constructor() {
+    super("BeatSaver");
+  }
+
+  /**
+   * Gets the map that match the query.
+   *
+   * @param query the query to search for
+   * @param useProxy whether to use the proxy or not
+   * @returns the map that match the query, or undefined if no map were found
+   */
+  async lookupMap(query: string, useProxy = true): Promise<BeatSaverMap | undefined> {
+    const before = performance.now();
+    this.log(`Looking up map "${query}"...`);
+
+    let map = await db.beatSaverMaps.get(query);
+    // The map is cached
+    if (map != undefined) {
+      this.log(`Found cached map "${query}" in ${(performance.now() - before).toFixed(0)}ms`);
+      return map;
+    }
+
+    const response = await this.fetch<BSMap>(useProxy, LOOKUP_MAP_BY_HASH_ENDPOINT.replace(":query", query));
+    // Map not found
+    if (response == undefined) {
+      return undefined;
+    }
+
+    const bsr = response.id;
+    if (bsr == undefined) {
+      return undefined;
+    }
+
+    // Save map the the db
+    await db.beatSaverMaps.add({
+      hash: query,
+      bsr: bsr,
+      fullData: response,
+    });
+    map = await db.beatSaverMaps.get(query);
+    this.log(`Found map "${query}" in ${(performance.now() - before).toFixed(0)}ms`);
+    return map;
+  }
+}
+
+export const beatsaverService = new BeatSaverService();

apps/frontend/src/common/service/impl/scoresaber.ts

@@ -0,0 +1,198 @@
+import ScoreSaberLeaderboardScoresPageToken from "@/common/model/token/scoresaber/score-saber-leaderboard-scores-page-token";
+import ScoreSaberPlayerScoresPageToken from "@/common/model/token/scoresaber/score-saber-player-scores-page-token";
+import { ScoreSaberPlayerSearchToken } from "@/common/model/token/scoresaber/score-saber-player-search-token";
+import ScoreSaberPlayerToken from "@/common/model/token/scoresaber/score-saber-player-token";
+import { ScoreSaberPlayersPageToken } from "@/common/model/token/scoresaber/score-saber-players-page-token";
+import { ScoreSort } from "../../model/score/score-sort";
+import Service from "../service";
+import ScoreSaberPlayer, { getScoreSaberPlayerFromToken } from "@/common/model/player/impl/scoresaber-player";
+
+const API_BASE = "https://scoresaber.com/api";
+const SEARCH_PLAYERS_ENDPOINT = `${API_BASE}/players?search=:query`;
+const LOOKUP_PLAYER_ENDPOINT = `${API_BASE}/player/:id/full`;
+const LOOKUP_PLAYERS_ENDPOINT = `${API_BASE}/players?page=:page`;
+const LOOKUP_PLAYERS_BY_COUNTRY_ENDPOINT = `${API_BASE}/players?page=:page&countries=:country`;
+const LOOKUP_PLAYER_SCORES_ENDPOINT = `${API_BASE}/player/:id/scores?limit=:limit&sort=:sort&page=:page`;
+const LOOKUP_LEADERBOARD_SCORES_ENDPOINT = `${API_BASE}/leaderboard/by-id/:id/scores?page=:page`;
+
+class ScoreSaberService extends Service {
+  constructor() {
+    super("ScoreSaber");
+  }
+
+  /**
+   * Gets the players that match the query.
+   *
+   * @param query the query to search for
+   * @param useProxy whether to use the proxy or not
+   * @returns the players that match the query, or undefined if no players were found
+   */
+  async searchPlayers(query: string, useProxy = true): Promise<ScoreSaberPlayerSearchToken | undefined> {
+    const before = performance.now();
+    this.log(`Searching for players matching "${query}"...`);
+    const results = await this.fetch<ScoreSaberPlayerSearchToken>(
+      useProxy,
+      SEARCH_PLAYERS_ENDPOINT.replace(":query", query)
+    );
+    if (results === undefined) {
+      return undefined;
+    }
+    if (results.players.length === 0) {
+      return undefined;
+    }
+    results.players.sort((a, b) => a.rank - b.rank);
+    this.log(`Found ${results.players.length} players in ${(performance.now() - before).toFixed(0)}ms`);
+    return results;
+  }
+
+  /**
+   * Looks up a player by their ID.
+   *
+   * @param playerId the ID of the player to look up
+   * @param useProxy whether to use the proxy or not
+   * @returns the player that matches the ID, or undefined
+   */
+  async lookupPlayer(
+    playerId: string,
+    useProxy = true
+  ): Promise<
+    | {
+        player: ScoreSaberPlayer;
+        rawPlayer: ScoreSaberPlayerToken;
+      }
+    | undefined
+  > {
+    const before = performance.now();
+    this.log(`Looking up player "${playerId}"...`);
+    const token = await this.fetch<ScoreSaberPlayerToken>(useProxy, LOOKUP_PLAYER_ENDPOINT.replace(":id", playerId));
+    if (token === undefined) {
+      return undefined;
+    }
+    this.log(`Found player "${playerId}" in ${(performance.now() - before).toFixed(0)}ms`);
+    return {
+      player: await getScoreSaberPlayerFromToken(token),
+      rawPlayer: token,
+    };
+  }
+
+  /**
+   * Lookup players on a specific page
+   *
+   * @param page the page to get players for
+   * @param useProxy whether to use the proxy or not
+   * @returns the players on the page, or undefined
+   */
+  async lookupPlayers(page: number, useProxy = true): Promise<ScoreSaberPlayersPageToken | undefined> {
+    const before = performance.now();
+    this.log(`Looking up players on page "${page}"...`);
+    const response = await this.fetch<ScoreSaberPlayersPageToken>(
+      useProxy,
+      LOOKUP_PLAYERS_ENDPOINT.replace(":page", page.toString())
+    );
+    if (response === undefined) {
+      return undefined;
+    }
+    this.log(`Found ${response.players.length} players in ${(performance.now() - before).toFixed(0)}ms`);
+    return response;
+  }
+
+  /**
+   * Lookup players on a specific page and country
+   *
+   * @param page the page to get players for
+   * @param country the country to get players for
+   * @param useProxy whether to use the proxy or not
+   * @returns the players on the page, or undefined
+   */
+  async lookupPlayersByCountry(
+    page: number,
+    country: string,
+    useProxy = true
+  ): Promise<ScoreSaberPlayersPageToken | undefined> {
+    const before = performance.now();
+    this.log(`Looking up players on page "${page}" for country "${country}"...`);
+    const response = await this.fetch<ScoreSaberPlayersPageToken>(
+      useProxy,
+      LOOKUP_PLAYERS_BY_COUNTRY_ENDPOINT.replace(":page", page.toString()).replace(":country", country)
+    );
+    if (response === undefined) {
+      return undefined;
+    }
+    this.log(`Found ${response.players.length} players in ${(performance.now() - before).toFixed(0)}ms`);
+    return response;
+  }
+
+  /**
+   * Looks up a page of scores for a player
+   *
+   * @param playerId the ID of the player to look up
+   * @param sort the sort to use
+   * @param page the page to get scores for
+   * @param search
+   * @param useProxy whether to use the proxy or not
+   * @returns the scores of the player, or undefined
+   */
+  async lookupPlayerScores({
+    playerId,
+    sort,
+    page,
+    search,
+    useProxy = true,
+  }: {
+    playerId: string;
+    sort: ScoreSort;
+    page: number;
+    search?: string;
+    useProxy?: boolean;
+  }): Promise<ScoreSaberPlayerScoresPageToken | undefined> {
+    const before = performance.now();
+    this.log(
+      `Looking up scores for player "${playerId}", sort "${sort}", page "${page}"${search ? `, search "${search}"` : ""}...`
+    );
+    const response = await this.fetch<ScoreSaberPlayerScoresPageToken>(
+      useProxy,
+      LOOKUP_PLAYER_SCORES_ENDPOINT.replace(":id", playerId)
+        .replace(":limit", 8 + "")
+        .replace(":sort", sort)
+        .replace(":page", page + "") + (search ? `&search=${search}` : "")
+    );
+    if (response === undefined) {
+      return undefined;
+    }
+    this.log(
+      `Found ${response.playerScores.length} scores for player "${playerId}" in ${(performance.now() - before).toFixed(0)}ms`
+    );
+    return response;
+  }
+
+  /**
+   * Looks up a page of scores for a leaderboard
+   *
+   * @param leaderboardId the ID of the leaderboard to look up
+   * @param sort the sort to use
+   * @param page the page to get scores for
+   * @param useProxy whether to use the proxy or not
+   * @returns the scores of the leaderboard, or undefined
+   */
+  async lookupLeaderboardScores(
+    leaderboardId: string,
+    page: number,
+    useProxy = true
+  ): Promise<ScoreSaberLeaderboardScoresPageToken | undefined> {
+    const before = performance.now();
+    this.log(`Looking up scores for leaderboard "${leaderboardId}", page "${page}"...`);
+    const response = await this.fetch<ScoreSaberLeaderboardScoresPageToken>(
+      useProxy,
+      LOOKUP_LEADERBOARD_SCORES_ENDPOINT.replace(":id", leaderboardId).replace(":page", page.toString())
+    );
+    if (response === undefined) {
+      return undefined;
+    }
+    this.log(
+      `Found ${response.scores.length} scores for leaderboard "${leaderboardId}" in ${(performance.now() - before).toFixed(0)}ms`
+    );
+    return response;
+  }
+}
+
+export const scoresaberService = new ScoreSaberService();

apps/frontend/src/common/service/service.ts

@@ -0,0 +1,56 @@
+import ky from "ky";
+import { isRunningAsWorker } from "@/common/browser-utils";
+
+export default class Service {
+  /**
+   * The name of the service.
+   */
+  private name: string;
+
+  constructor(name: string) {
+    this.name = name;
+  }
+
+  /**
+   * Logs a message to the console.
+   *
+   * @param data the data to log
+   */
+  public log(data: unknown) {
+    console.log(`[${isRunningAsWorker() ? "Worker - " : ""}${this.name}]: ${data}`);
+  }
+
+  /**
+   * Builds a request url.
+   *
+   * @param useProxy whether to use proxy or not
+   * @param url the url to fetch
+   * @returns the request url
+   */
+  private buildRequestUrl(useProxy: boolean, url: string): string {
+    return (useProxy ? "https://proxy.fascinated.cc/" : "") + url;
+    // return (useProxy ? config.siteUrl + "/api/proxy?url=" : "") + url;
+  }
+
+  /**
+   * Fetches data from the given url.
+   *
+   * @param useProxy whether to use proxy or not
+   * @param url the url to fetch
+   * @returns the fetched data
+   */
+  public async fetch<T>(useProxy: boolean, url: string): Promise<T | undefined> {
+    try {
+      return await ky
+        .get<T>(this.buildRequestUrl(useProxy, url), {
+          next: {
+            revalidate: 60, // 1 minute
+          },
+        })
+        .json();
+    } catch (error) {
+      console.error(`Error fetching data from ${url}:`, error);
+      return undefined;
+    }
+  }
+}

apps/frontend/src/common/song-utils.ts

@@ -0,0 +1,61 @@
+const diffColors: Record<string, string> = {
+  easy: "#3CB371",
+  normal: "#59b0f4",
+  hard: "#FF6347",
+  expert: "#bf2a42",
+  expertplus: "#8f48db",
+};
+
+export type ScoreBadge = {
+  name: string;
+  min: number | null;
+  max: number | null;
+  color: string;
+};
+
+const scoreBadges: ScoreBadge[] = [
+  { name: "SS+", min: 95, max: null, color: diffColors.expertplus },
+  { name: "SS", min: 90, max: 95, color: diffColors.expert },
+  { name: "S+", min: 85, max: 90, color: diffColors.hard },
+  { name: "S", min: 80, max: 85, color: diffColors.normal },
+  { name: "A", min: 70, max: 80, color: diffColors.easy },
+  { name: "-", min: null, max: 70, color: "hsl(var(--accent))" },
+];
+
+/**
+ * Returns the color based on the accuracy provided.
+ *
+ * @param acc - The accuracy for the score
+ * @returns The corresponding color for the accuracy.
+ */
+export function getScoreBadgeFromAccuracy(acc: number): ScoreBadge {
+  // Check for SS+ first since it has no upper limit
+  if (acc >= 95) {
+    return scoreBadges[0]; // SS+ color
+  }
+
+  // Iterate through the rest of the badges
+  for (const badge of scoreBadges) {
+    const min = badge.min ?? -Infinity; // Treat null `min` as -Infinity
+    const max = badge.max ?? Infinity; // Treat null `max` as Infinity
+
+    // Check if the accuracy falls within the badge's range
+    if (acc >= min && acc < (max === null ? Infinity : max)) {
+      return badge; // Return the color of the matching badge
+    }
+  }
+
+  // Fallback color if no badge matches (should not happen)
+  return scoreBadges[scoreBadges.length - 1];
+}
+
+/**
+ * Turns the difficulty of a song into a color
+ *
+ * @param diff the difficulty to get the color for
+ * @returns the color for the difficulty
+ */
+export function songDifficultyToColor(diff: string) {
+  diff = diff.replace("+", "Plus");
+  return diffColors[diff.toLowerCase() as keyof typeof diffColors];
+}

apps/frontend/src/common/string-utils.ts

@@ -0,0 +1,9 @@
+/**
+ * Capitalizes the first letter of a string.
+ *
+ * @param str the string to capitalize
+ * @returns the capitalized string
+ */
+export function capitalizeFirstLetter(str: string) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}

apps/frontend/src/common/time-utils.ts

@@ -0,0 +1,82 @@
+/**
+ * This function returns the time ago of the input date
+ *
+ * @param input Date | number
+ * @returns the format of the time ago
+ */
+export function timeAgo(input: Date | number) {
+  const date = input instanceof Date ? input : new Date(input);
+  const formatter = new Intl.RelativeTimeFormat("en");
+  const ranges: { [key: string]: number } = {
+    year: 3600 * 24 * 365,
+    month: 3600 * 24 * 30,
+    week: 3600 * 24 * 7,
+    day: 3600 * 24,
+    hour: 3600,
+    minute: 60,
+    second: 1,
+  };
+  const secondsElapsed = (date.getTime() - Date.now()) / 1000;
+  for (const key in ranges) {
+    if (ranges[key] < Math.abs(secondsElapsed)) {
+      const delta = secondsElapsed / ranges[key];
+      return formatter.format(Math.round(delta), key as Intl.RelativeTimeFormatUnit);
+    }
+  }
+}
+
+/**
+ * Formats the date in the format "DD MMMM YYYY"
+ *
+ * @param date the date
+ */
+export function formatDateMinimal(date: Date) {
+  return date.toLocaleString("en-US", {
+    timeZone: "Europe/London",
+    day: "numeric",
+    month: "short",
+    year: "numeric",
+  });
+}
+
+/**
+ * Gets the midnight aligned date
+ *
+ * @param date the date
+ */
+export function getMidnightAlignedDate(date: Date) {
+  return new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate()));
+}
+
+/**
+ * Gets the date X days ago
+ *
+ * @param days the number of days to go back
+ * @returns {Date} A Date object representing the date X days ago
+ */
+export function getDaysAgoDate(days: number): Date {
+  const date = new Date();
+  date.setDate(date.getDate() - days);
+  return date;
+}
+
+/**
+ * Gets the amount of days ago a date was
+ *
+ * @param date the date
+ * @returns the amount of days
+ */
+export function getDaysAgo(date: Date): number {
+  const now = new Date();
+  const diffTime = Math.abs(now.getTime() - date.getTime());
+  return Math.ceil(diffTime / (1000 * 60 * 60 * 24)) - 1;
+}
+
+/**
+ * Parses a date from a string
+ *
+ * @param date the date
+ */
+export function parseDate(date: string): Date {
+  return new Date(date);
+}

apps/frontend/src/common/utils.ts

@@ -0,0 +1,21 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+/**
+ * Validates if the url is valid
+ *
+ * @param url the url to validate
+ * @returns true if the url is valid, false otherwise
+ */
+export function validateUrl(url: string) {
+  try {
+    new URL(url);
+    return true;
+  } catch {
+    return false;
+  }
+}

apps/frontend/src/common/website-utils.ts

@@ -0,0 +1,34 @@
+import Cookies from "js-cookie";
+
+/**
+ * Sets the player id cookie
+ *
+ * @param playerId the player id to set
+ */
+export function setPlayerIdCookie(playerId: string) {
+  Cookies.set("playerId", playerId, { path: "/" });
+}
+
+/**
+ * Gets if we're in production
+ */
+export function isProduction() {
+  return process.env.NODE_ENV === "production";
+}
+
+/**
+ * Gets the build information
+ *
+ * @returns the build information
+ */
+export function getBuildInformation() {
+  const buildId = process.env.NEXT_PUBLIC_BUILD_ID
+    ? isProduction()
+      ? process.env.NEXT_PUBLIC_BUILD_ID.slice(0, 7)
+      : "dev"
+    : "";
+  const buildTime = process.env.NEXT_PUBLIC_BUILD_TIME;
+  const buildTimeShort = process.env.NEXT_PUBLIC_BUILD_TIME_SHORT;
+
+  return { buildId, buildTime, buildTimeShort };
+}

apps/frontend/src/common/worker/worker.ts

@@ -0,0 +1,16 @@
+import * as Comlink from "comlink";
+import { scoresaberService } from "@/common/service/impl/scoresaber";
+
+export interface WorkerApi {
+  getPlayerExample: typeof getPlayerExample;
+}
+
+const workerApi: WorkerApi = {
+  getPlayerExample: getPlayerExample,
+};
+
+async function getPlayerExample() {
+  return await scoresaberService.lookupPlayer("76561198449412074");
+}
+
+Comlink.expose(workerApi);

apps/frontend/src/common/worker/workers.ts

@@ -0,0 +1,5 @@
+import * as Comlink from "comlink";
+import { WorkerApi } from "@/common/worker/worker";
+
+export const scoresaberReloadedWorker = () =>
+  Comlink.wrap<WorkerApi>(new Worker(new URL("./worker.ts", import.meta.url)));

apps/frontend/src/common/youtube-utils.ts

@@ -0,0 +1,22 @@
+/**
+ * Turns a song name and author into a YouTube link
+ *
+ * @param name the name of the song
+ * @param songSubName the sub name of the song
+ * @param author the author of the song
+ * @returns the YouTube link for the song
+ */
+export function songNameToYouTubeLink(name: string, songSubName: string, author: string) {
+  const baseUrl = "https://www.youtube.com/results?search_query=";
+  let query = "";
+  if (name) {
+    query += `${name} `;
+  }
+  if (songSubName) {
+    query += `${songSubName} `;
+  }
+  if (author) {
+    query += `${author} `;
+  }
+  return encodeURI(baseUrl + query.trim().replaceAll(" ", "+"));
+}

apps/frontend/src/components/background-image.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { useLiveQuery } from "dexie-react-hooks";
+import { config } from "../../config";
+import { getImageUrl } from "@/common/image-utils";
+import useDatabase from "../hooks/use-database";
+
+export default function BackgroundImage() {
+  const database = useDatabase();
+  const settings = useLiveQuery(() => database.getSettings());
+
+  if (settings == undefined || settings?.backgroundImage == undefined || settings?.backgroundImage == "") {
+    return null; // Don't render anything if the background image is not set
+  }
+
+  let backgroundImage = settings.backgroundImage;
+  let prependWebsiteUrl = false;
+
+  // Remove the prepending slash
+  if (backgroundImage.startsWith("/")) {
+    prependWebsiteUrl = true;
+    backgroundImage = backgroundImage.substring(1);
+  }
+  if (prependWebsiteUrl) {
+    backgroundImage = config.siteUrl + "/" + backgroundImage;
+  }
+
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      src={getImageUrl(backgroundImage)}
+      alt="Background image"
+      fetchPriority="high"
+      className={`fixed -z-50 object-cover w-screen h-screen blur-sm brightness-[33%] pointer-events-none select-none`}
+    />
+  );
+}

apps/frontend/src/components/card.tsx

@@ -0,0 +1,10 @@
+import clsx, { ClassValue } from "clsx";
+
+type Props = {
+  children: React.ReactNode;
+  className?: ClassValue;
+};
+
+export default function Card({ children, className }: Props) {
+  return <div className={clsx("flex flex-col bg-secondary/90 p-3 rounded-md", className)}>{children}</div>;
+}

apps/frontend/src/components/chart/customized-axis-tick.tsx

@@ -0,0 +1,20 @@
+export const CustomizedAxisTick = ({
+  x,
+  y,
+  payload,
+  rotateAngle = -45,
+}: {
+  x?: number;
+  y?: number;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  payload?: any;
+  rotateAngle?: number;
+}) => {
+  return (
+    <g transform={`translate(${x},${y})`}>
+      <text x={0} y={0} dy={16} textAnchor="end" fill="#666" transform={`rotate(${rotateAngle})`}>
+        {payload.value}
+      </text>
+    </g>
+  );
+};

apps/frontend/src/components/country-flag.tsx

@@ -0,0 +1,17 @@
+type Props = {
+  code: string;
+  size?: number;
+};
+
+export default function CountryFlag({ code, size = 24 }: Props) {
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      alt="Player Country"
+      src={`/assets/flags/${code.toLowerCase()}.png`}
+      width={size * 2}
+      height={size}
+      className={`w-[${size * 2}px] h-[${size}px] object-contain`}
+    />
+  );
+}

apps/frontend/src/components/fallback-link.tsx

@@ -0,0 +1,23 @@
+import NextLink from "next/link";
+
+type Props = {
+  /**
+   * The link to open in a new tab.
+   */
+  href?: string;
+
+  /**
+   * The children to render.
+   */
+  children: React.ReactNode;
+};
+
+export default function FallbackLink({ href, children }: Props) {
+  return href ? (
+    <NextLink href={href} target="_blank">
+      {children}
+    </NextLink>
+  ) : (
+    <>{children}</>
+  );
+}

apps/frontend/src/components/footer.tsx

@@ -0,0 +1,48 @@
+import { getBuildInformation } from "@/common/website-utils";
+import Link from "next/link";
+
+type NavbarItem = {
+  name: string;
+  link: string;
+  openInNewTab?: boolean;
+};
+
+const items: NavbarItem[] = [
+  {
+    name: "Home",
+    link: "/",
+  },
+  {
+    name: "Source",
+    link: "https://git.fascinated.cc/Fascinated/scoresaber-reloadedv3",
+    openInNewTab: true,
+  },
+];
+
+export default function Footer() {
+  const { buildId, buildTime, buildTimeShort } = getBuildInformation();
+
+  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>
+      </div>
+      <div className="h-12 w-full flex flex-wrap items-center justify-center bg-secondary/95 divide-x divide-input">
+        {items.map((item, index) => {
+          return (
+            <Link
+              key={index}
+              className="px-2 text-pp hover:brightness-75 transition-all transform-gpu"
+              href={item.link}
+              target={item.openInNewTab ? "_blank" : undefined}
+            >
+              {item.name}
+            </Link>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

apps/frontend/src/components/input/pagination.tsx

@@ -0,0 +1,153 @@
+import { ArrowPathIcon } from "@heroicons/react/24/solid";
+import clsx from "clsx";
+import { useEffect, useState } from "react";
+import {
+  Pagination as ShadCnPagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "../ui/pagination";
+
+type PaginationItemWrapperProps = {
+  /**
+   * Whether a page is currently loading.
+   */
+  isLoadingPage: boolean;
+
+  /**
+   * The children to render.
+   */
+  children: React.ReactNode;
+};
+
+function PaginationItemWrapper({ isLoadingPage, children }: PaginationItemWrapperProps) {
+  return (
+    <PaginationItem
+      className={clsx(isLoadingPage ? "cursor-not-allowed" : "cursor-pointer")}
+      aria-disabled={isLoadingPage}
+      tabIndex={isLoadingPage ? -1 : undefined}
+    >
+      {children}
+    </PaginationItem>
+  );
+}
+
+type Props = {
+  /**
+   * If true, the pagination will be rendered as a mobile-friendly pagination.
+   */
+  mobilePagination: boolean;
+
+  /**
+   * The current page.
+   */
+  page: number;
+
+  /**
+   * The total number of pages.
+   */
+  totalPages: number;
+
+  /**
+   * The page to show a loading icon on.
+   */
+  loadingPage: number | undefined;
+
+  /**
+   * Callback function that is called when the user clicks on a page number.
+   */
+  onPageChange: (page: number) => void;
+};
+
+export default function Pagination({ mobilePagination, page, totalPages, loadingPage, onPageChange }: Props) {
+  totalPages = Math.round(totalPages);
+  const isLoading = loadingPage !== undefined;
+  const [currentPage, setCurrentPage] = useState(page);
+
+  useEffect(() => {
+    setCurrentPage(page);
+  }, [page]);
+
+  const handlePageChange = (newPage: number) => {
+    if (newPage < 1 || newPage > totalPages || newPage == currentPage || isLoading) {
+      return;
+    }
+
+    setCurrentPage(newPage);
+    onPageChange(newPage);
+  };
+
+  const renderPageNumbers = () => {
+    const pageNumbers = [];
+    const maxPagesToShow = mobilePagination ? 3 : 4;
+    let startPage = Math.max(1, currentPage - Math.floor(maxPagesToShow / 2));
+    const endPage = Math.min(totalPages, startPage + maxPagesToShow - 1);
+
+    if (endPage - startPage < maxPagesToShow - 1) {
+      startPage = Math.max(1, endPage - maxPagesToShow + 1);
+    }
+
+    // Show "Jump to Start" with Ellipsis if currentPage is greater than 3 in desktop view
+    if (startPage > 1 && !mobilePagination) {
+      pageNumbers.push(
+        <>
+          <PaginationItemWrapper key="start" isLoadingPage={isLoading}>
+            <PaginationLink onClick={() => handlePageChange(1)}>1</PaginationLink>
+          </PaginationItemWrapper>
+          {/* Only show ellipsis if more than 2 pages from the start */}
+          {startPage > 2 && (
+            <PaginationItemWrapper key="ellipsis-start" isLoadingPage={isLoading}>
+              <PaginationEllipsis />
+            </PaginationItemWrapper>
+          )}
+        </>
+      );
+    }
+
+    // Generate page numbers between startPage and endPage for desktop view
+    for (let i = startPage; i <= endPage; i++) {
+      pageNumbers.push(
+        <PaginationItemWrapper key={i} isLoadingPage={isLoading}>
+          <PaginationLink isActive={i === currentPage} onClick={() => handlePageChange(i)}>
+            {loadingPage === i ? <ArrowPathIcon className="w-4 h-4 animate-spin" /> : i}
+          </PaginationLink>
+        </PaginationItemWrapper>
+      );
+    }
+
+    return pageNumbers;
+  };
+
+  return (
+    <ShadCnPagination className="select-none">
+      <PaginationContent>
+        {/* Previous button for mobile and desktop */}
+        <PaginationItemWrapper isLoadingPage={isLoading}>
+          <PaginationPrevious onClick={() => handlePageChange(currentPage - 1)} />
+        </PaginationItemWrapper>
+
+        {renderPageNumbers()}
+
+        {/* For desktop, show ellipsis and link to the last page */}
+        {!mobilePagination && currentPage < totalPages && totalPages - currentPage > 2 && (
+          <>
+            <PaginationItemWrapper key="ellipsis-end" isLoadingPage={isLoading}>
+              <PaginationEllipsis className="cursor-default" />
+            </PaginationItemWrapper>
+            <PaginationItemWrapper key="end" isLoadingPage={isLoading}>
+              <PaginationLink onClick={() => handlePageChange(totalPages)}>{totalPages}</PaginationLink>
+            </PaginationItemWrapper>
+          </>
+        )}
+
+        {/* Next button for mobile and desktop */}
+        <PaginationItemWrapper isLoadingPage={isLoading}>
+          <PaginationNext onClick={() => handlePageChange(currentPage + 1)} />
+        </PaginationItemWrapper>
+      </PaginationContent>
+    </ShadCnPagination>
+  );
+}

apps/frontend/src/components/input/search-player.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import { scoresaberService } from "@/common/service/impl/scoresaber";
+import ScoreSaberPlayerToken from "@/common/model/token/scoresaber/score-saber-player-token";
+import { formatNumberWithCommas } from "@/common/number-utils";
+import { zodResolver } from "@hookform/resolvers/zod";
+import Link from "next/link";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { Avatar, AvatarFallback, AvatarImage } from "../ui/avatar";
+import { Button } from "../ui/button";
+import { Form, FormControl, FormField, FormItem, FormLabel } from "../ui/form";
+import { Input } from "../ui/input";
+import { ScrollArea } from "../ui/scroll-area";
+
+const formSchema = z.object({
+  username: z.string().min(3).max(50),
+});
+
+export default function SearchPlayer() {
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      username: "",
+    },
+  });
+  const [results, setResults] = useState<ScoreSaberPlayerToken[] | undefined>();
+  const [loading, setLoading] = useState(false);
+
+  async function onSubmit({ username }: z.infer<typeof formSchema>) {
+    setLoading(true);
+    setResults(undefined); // Reset results
+    const results = await scoresaberService.searchPlayers(username);
+    setResults(results?.players);
+    setLoading(false);
+  }
+
+  return (
+    <div className="flex flex-col gap-3">
+      {/* Search */}
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="flex items-end gap-2">
+          <FormField
+            control={form.control}
+            name="username"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>Username</FormLabel>
+                <FormControl>
+                  <Input className="w-full sm:w-72 text-sm" placeholder="Query..." {...field} />
+                </FormControl>
+              </FormItem>
+            )}
+          />
+          <Button type="submit">Search</Button>
+        </form>
+      </Form>
+
+      {/* Results */}
+      {loading == true && (
+        <div className="flex items-center justify-center">
+          <p>Loading...</p>
+        </div>
+      )}
+      {results !== undefined && (
+        <ScrollArea>
+          <div className="flex flex-col gap-1 max-h-60">
+            {results?.map(player => {
+              return (
+                <Link
+                  href={`/player/${player.id}`}
+                  key={player.id}
+                  className="bg-secondary p-2 rounded-md flex gap-2 items-center hover:brightness-75 transition-all transform-gpu"
+                >
+                  <Avatar>
+                    <AvatarImage src={player.profilePicture} />
+                    <AvatarFallback>{player.name.at(0)}</AvatarFallback>
+                  </Avatar>
+                  <div>
+                    <p>{player.name}</p>
+                    <p className="text-gray-400 text-sm">#{formatNumberWithCommas(player.rank)}</p>
+                  </div>
+                </Link>
+              );
+            })}
+          </div>
+        </ScrollArea>
+      )}
+    </div>
+  );
+}

apps/frontend/src/components/leaderboard/leaderboard-player.tsx

@@ -0,0 +1,32 @@
+import ScoreSaberScoreToken from "@/common/model/token/scoresaber/score-saber-score-token";
+import Image from "next/image";
+import Link from "next/link";
+
+type Props = {
+  score: ScoreSaberScoreToken;
+};
+
+export default function LeaderboardPlayer({ score }: Props) {
+  const player = score.leaderboardPlayerInfo;
+
+  return (
+    <div className="flex gap-2">
+      <Image
+        unoptimized
+        src={player.profilePicture}
+        width={48}
+        height={48}
+        alt="Song Artwork"
+        className="rounded-md min-w-[48px]"
+        priority
+      />
+      <Link
+        href={`/player/${player.id}`}
+        target="_blank"
+        className="h-fit hover:brightness-75 transition-all transform-gpu"
+      >
+        <p>{player.name}</p>
+      </Link>
+    </div>
+  );
+}

apps/frontend/src/components/leaderboard/leaderboard-score-stats.tsx

@@ -0,0 +1,67 @@
+import ScoreSaberLeaderboardToken from "@/common/model/token/scoresaber/score-saber-leaderboard-token";
+import ScoreSaberScoreToken from "@/common/model/token/scoresaber/score-saber-score-token";
+import { formatNumberWithCommas } from "@/common/number-utils";
+import StatValue from "@/components/stat-value";
+import { XMarkIcon } from "@heroicons/react/24/solid";
+import clsx from "clsx";
+
+type Badge = {
+  name: string;
+  create: (
+    score: ScoreSaberScoreToken,
+    leaderboard: ScoreSaberLeaderboardToken
+  ) => string | React.ReactNode | undefined;
+};
+
+const badges: Badge[] = [
+  {
+    name: "PP",
+    create: (score: ScoreSaberScoreToken) => {
+      const pp = score.pp;
+      if (pp === 0) {
+        return undefined;
+      }
+      return `${score.pp.toFixed(2)}pp`;
+    },
+  },
+  {
+    name: "Accuracy",
+    create: (score: ScoreSaberScoreToken, leaderboard: ScoreSaberLeaderboardToken) => {
+      const acc = (score.baseScore / leaderboard.maxScore) * 100;
+      return `${acc.toFixed(2)}%`;
+    },
+  },
+  {
+    name: "Full Combo",
+    create: (score: ScoreSaberScoreToken) => {
+      const fullCombo = score.missedNotes === 0;
+
+      return (
+        <>
+          <p>{fullCombo ? <span className="text-green-400">FC</span> : formatNumberWithCommas(score.missedNotes)}</p>
+          <XMarkIcon className={clsx("w-5 h-5", fullCombo ? "hidden" : "text-red-400")} />
+        </>
+      );
+    },
+  },
+];
+
+type Props = {
+  score: ScoreSaberScoreToken;
+  leaderboard: ScoreSaberLeaderboardToken;
+};
+
+export default function LeaderboardScoreStats({ score, leaderboard }: Props) {
+  return (
+    <div className={`grid grid-cols-3 grid-rows-1 gap-1 ml-0 lg:ml-2`}>
+      {badges.map((badge, index) => {
+        const toRender = badge.create(score, leaderboard);
+        if (toRender === undefined) {
+          return <div key={index} />;
+        }
+
+        return <StatValue key={index} value={toRender} />;
+      })}
+    </div>
+  );
+}

apps/frontend/src/components/leaderboard/leaderboard-score.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import ScoreSaberLeaderboardToken from "@/common/model/token/scoresaber/score-saber-leaderboard-token";
+import ScoreSaberScoreToken from "@/common/model/token/scoresaber/score-saber-score-token";
+import LeaderboardPlayer from "./leaderboard-player";
+import LeaderboardScoreStats from "./leaderboard-score-stats";
+import ScoreRankInfo from "@/components/score/score-rank-info";
+
+type Props = {
+  /**
+   * The score to display.
+   */
+  score: ScoreSaberScoreToken;
+
+  /**
+   * The leaderboard to display.
+   */
+  leaderboard: ScoreSaberLeaderboardToken;
+};
+
+export default function LeaderboardScore({ score, leaderboard }: Props) {
+  return (
+    <div className="grid items-center w-full pb-2 pt-2 gap-2 lg:gap-0 first:pt-0 last:pb-0 grid-cols-[20px 1fr_1fr] lg:grid-cols-[130px_4fr_300px]">
+      <ScoreRankInfo score={score} />
+      <LeaderboardPlayer score={score} />
+      <LeaderboardScoreStats score={score} leaderboard={leaderboard} />
+    </div>
+  );
+}

apps/frontend/src/components/leaderboard/leaderboard-scores.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { scoresaberService } from "@/common/service/impl/scoresaber";
+import ScoreSaberLeaderboardToken from "@/common/model/token/scoresaber/score-saber-leaderboard-token";
+import ScoreSaberLeaderboardScoresPageToken from "@/common/model/token/scoresaber/score-saber-leaderboard-scores-page-token";
+import useWindowDimensions from "@/hooks/use-window-dimensions";
+import { useQuery } from "@tanstack/react-query";
+import { motion } from "framer-motion";
+import { useEffect, useState } from "react";
+import Card from "../card";
+import Pagination from "../input/pagination";
+import LeaderboardScore from "./leaderboard-score";
+
+type Props = {
+  leaderboard: ScoreSaberLeaderboardToken;
+};
+
+export default function LeaderboardScores({ leaderboard }: Props) {
+  const { width } = useWindowDimensions();
+
+  const [currentPage, setCurrentPage] = useState(1);
+  const [currentScores, setCurrentScores] = useState<ScoreSaberLeaderboardScoresPageToken | undefined>();
+
+  const {
+    data: scores,
+    isError,
+    isLoading,
+    refetch,
+  } = useQuery({
+    queryKey: ["playerScores", leaderboard.id, currentPage],
+    queryFn: () => scoresaberService.lookupLeaderboardScores(leaderboard.id + "", currentPage),
+    staleTime: 30 * 1000, // Cache data for 30 seconds
+  });
+
+  useEffect(() => {
+    if (scores) {
+      setCurrentScores(scores);
+    }
+  }, [scores]);
+
+  useEffect(() => {
+    refetch();
+  }, [leaderboard, currentPage, refetch]);
+
+  if (currentScores === undefined) {
+    return undefined;
+  }
+
+  return (
+    <motion.div initial={{ opacity: 0, y: -50 }} exit={{ opacity: 0, y: -50 }} animate={{ opacity: 1, y: 0 }}>
+      <Card className="flex gap-2 border border-input mt-2">
+        <div className="text-center">
+          {isError && <p>Oopsies! Something went wrong.</p>}
+          {currentScores.scores.length === 0 && <p>No scores found. Invalid Page?</p>}
+        </div>
+
+        <div className="grid min-w-full grid-cols-1 divide-y divide-border">
+          {currentScores.scores.map((playerScore, index) => (
+            <LeaderboardScore key={index} score={playerScore} leaderboard={leaderboard} />
+          ))}
+        </div>
+
+        <Pagination
+          mobilePagination={width < 768}
+          page={currentPage}
+          totalPages={Math.ceil(currentScores.metadata.total / currentScores.metadata.itemsPerPage)}
+          loadingPage={isLoading ? currentPage : undefined}
+          onPageChange={setCurrentPage}
+        />
+      </Card>
+    </motion.div>
+  );
+}

apps/frontend/src/components/loaders/database-loader.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { createContext, useEffect, useState } from "react";
+import Database, { db } from "../../common/database/database";
+import FullscreenLoader from "./fullscreen-loader";
+import { useToast } from "@/hooks/use-toast";
+
+/**
+ * The context for the database. This is used to access the database from within the app.
+ */
+export const DatabaseContext = createContext<Database | undefined>(undefined);
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export default function DatabaseLoader({ children }: Props) {
+  const { toast } = useToast();
+  const [database, setDatabase] = useState<Database | undefined>(undefined);
+
+  useEffect(() => {
+    const before = performance.now();
+    setDatabase(db);
+    console.log(`Loaded database in ${performance.now() - before}ms`);
+
+    db.on("ready", err => {
+      toast({
+        title: "Database loaded",
+        description: "The database was loaded successfully.",
+      });
+    });
+  }, [toast]);
+
+  return (
+    <DatabaseContext.Provider value={database}>
+      {database == undefined ? <FullscreenLoader reason="Loading database..." /> : children}
+    </DatabaseContext.Provider>
+  );
+}

apps/frontend/src/components/loaders/fullscreen-loader.tsx

@@ -0,0 +1,19 @@
+import ScoreSaberLogo from "../logos/scoresaber-logo";
+
+type Props = {
+  reason: string;
+};
+
+export default function FullscreenLoader({ reason }: Props) {
+  return (
+    <div className="absolute w-screen h-screen bg-background brightness-75 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">{reason}</p>
+      </div>
+      <div className="animate-spin">
+        <ScoreSaberLogo />
+      </div>
+    </div>
+  );
+}

apps/frontend/src/components/logos/beatsaver-logo.tsx

@@ -0,0 +1,24 @@
+type BeatSaverLogoProps = {
+  size?: number;
+  className?: string;
+};
+
+export default function BeatSaverLogo({ size = 32, className }: BeatSaverLogoProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 200 200"
+      version="1.1"
+      className={className}
+    >
+      <g fill="none" stroke="#fff" strokeWidth="10">
+        <path d="M 100,7 189,47 100,87 12,47 Z" strokeLinejoin="round"></path>
+        <path d="M 189,47 189,155 100,196 12,155 12,47" strokeLinejoin="round"></path>
+        <path d="M 100,87 100,196" strokeLinejoin="round"></path>
+        <path d="M 26,77 85,106 53,130 Z" strokeLinejoin="round"></path>
+      </g>
+    </svg>
+  );
+}

apps/frontend/src/components/logos/scoresaber-logo.tsx

@@ -0,0 +1,7 @@
+import Image from "next/image";
+
+export default function ScoreSaberLogo() {
+  return (
+    <Image width={32} height={32} unoptimized src={"/assets/logos/scoresaber.png"} alt={"ScoreSaber Logo"}></Image>
+  );
+}

apps/frontend/src/components/logos/youtube-logo.tsx

@@ -0,0 +1,30 @@
+type YouTubeLogoProps = {
+  size?: number;
+  className?: string;
+};
+
+export default function YouTubeLogo({ size = 32, className }: YouTubeLogoProps) {
+  return (
+    <svg
+      height={size}
+      width={size}
+      version="1.1"
+      id="Layer_1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      viewBox="0 0 461.001 461.001"
+      xmlSpace="preserve"
+      className={className}
+    >
+      <g>
+        <path
+          fill="#F61C0D"
+          d="M365.257,67.393H95.744C42.866,67.393,0,110.259,0,163.137v134.728
+		c0,52.878,42.866,95.744,95.744,95.744h269.513c52.878,0,95.744-42.866,95.744-95.744V163.137
+		C461.001,110.259,418.135,67.393,365.257,67.393z M300.506,237.056l-126.06,60.123c-3.359,1.602-7.239-0.847-7.239-4.568V168.607
+		c0-3.774,3.982-6.22,7.348-4.514l126.06,63.881C304.363,229.873,304.298,235.248,300.506,237.056z"
+        />
+      </g>
+    </svg>
+  );
+}

apps/frontend/src/components/navbar/navbar-button.tsx

@@ -0,0 +1,11 @@
+type Props = {
+  children: React.ReactNode;
+};
+
+export default function NavbarButton({ children }: Props) {
+  return (
+    <div className="px-2 gap-2 rounded-md hover:bg-blue-500 transform-gpu transition-all h-full flex items-center">
+      {children}
+    </div>
+  );
+}

apps/frontend/src/components/navbar/navbar.tsx

@@ -0,0 +1,59 @@
+import { HomeIcon } from "@heroicons/react/24/solid";
+import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
+import Link from "next/link";
+import React from "react";
+import NavbarButton from "./navbar-button";
+import ProfileButton from "./profile-button";
+
+type NavbarItem = {
+  name: string;
+  link: string;
+  icon: React.ReactNode;
+};
+
+const items: NavbarItem[] = [
+  {
+    name: "Home",
+    link: "/",
+    icon: <HomeIcon className="h-5 w-5" />, // Add your home icon here
+  },
+  {
+    name: "Search",
+    link: "/search",
+    icon: <MagnifyingGlassIcon className="h-5 w-5" />, // Add your search icon here
+  },
+];
+
+// Helper function to render each navbar item
+const renderNavbarItem = (item: NavbarItem) => (
+  <div className="flex items-center">
+    {item.icon && <div className="mr-2">{item.icon}</div>}
+    <div>{item.name}</div>
+  </div>
+);
+
+export default function Navbar() {
+  const rightItem = items[items.length - 1];
+
+  return (
+    <div className="w-full sticky top-0 z-[999]">
+      <div className="h-10 items-center flex justify-between bg-secondary/95">
+        {/* Left-aligned items */}
+        <div className="flex items-center h-full">
+          <ProfileButton />
+
+          {items.slice(0, -1).map((item, index) => (
+            <Link href={item.link} key={index} className="h-full">
+              <NavbarButton key={index}>{renderNavbarItem(item)}</NavbarButton>
+            </Link>
+          ))}
+        </div>
+
+        {/* Right-aligned item */}
+        <Link href={rightItem.link} className="h-full">
+          <NavbarButton>{renderNavbarItem(rightItem)}</NavbarButton>
+        </Link>
+      </div>
+    </div>
+  );
+}

apps/frontend/src/components/navbar/profile-button.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import useDatabase from "@/hooks/use-database";
+import { useLiveQuery } from "dexie-react-hooks";
+import Link from "next/link";
+import { Avatar, AvatarImage } from "../ui/avatar";
+import NavbarButton from "./navbar-button";
+
+export default function ProfileButton() {
+  const database = useDatabase();
+  const settings = useLiveQuery(() => database.getSettings());
+
+  if (settings == undefined) {
+    return; // Settings hasn't loaded yet
+  }
+
+  if (settings.playerId == null) {
+    return; // No player profile claimed
+  }
+
+  return (
+    <Link href={`/player/${settings.playerId}`} className="flex items-center gap-2 h-full">
+      <NavbarButton>
+        <Avatar className="w-6 h-6">
+          <AvatarImage
+            alt="Profile Picture"
+            src={`https://img.fascinated.cc/upload/w_24,h_24/https://cdn.scoresaber.com/avatars/${settings.playerId}.jpg`}
+          />
+        </Avatar>
+        <p>You</p>
+      </NavbarButton>
+    </Link>
+  );
+}

apps/frontend/src/components/offline-network.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import FullscreenLoader from "@/components/loaders/fullscreen-loader";
+import { useNetworkState } from "@uidotdev/usehooks";
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export default function OfflineNetwork({ children }: Props) {
+  const network = useNetworkState();
+
+  return !network.online ? (
+    <FullscreenLoader reason="Your device is offline. Check your internet connection." />
+  ) : (
+    children
+  );
+}

apps/frontend/src/components/player/claim-profile.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { CheckIcon } from "@heroicons/react/24/solid";
+import { useLiveQuery } from "dexie-react-hooks";
+import { setPlayerIdCookie } from "@/common/website-utils";
+import useDatabase from "../../hooks/use-database";
+import { useToast } from "@/hooks/use-toast";
+import Tooltip from "../tooltip";
+import { Button } from "../ui/button";
+
+type Props = {
+  /**
+   * The ID of the players profile to claim.
+   */
+  playerId: string;
+};
+
+export default function ClaimProfile({ playerId }: Props) {
+  const database = useDatabase();
+  const { toast } = useToast();
+  const settings = useLiveQuery(() => database.getSettings());
+
+  /**
+   * Claims the profile.
+   */
+  async function claimProfile() {
+    const settings = await database.getSettings();
+
+    settings?.setPlayerId(playerId);
+    setPlayerIdCookie(playerId);
+    toast({
+      title: "Profile Claimed",
+      description: "You have claimed this profile.",
+    });
+  }
+
+  if (settings?.playerId == playerId || settings == undefined) {
+    return null; // Don't show the claim button if it's the same user.
+  }
+
+  return (
+    <Tooltip display={<p>Set as your profile</p>} side={"bottom"}>
+      <Button variant={"outline"} onClick={claimProfile}>
+        <CheckIcon className="size-6 text-green-500" />
+      </Button>
+    </Tooltip>
+  );
+}

apps/frontend/src/components/player/player-badges.tsx

@@ -0,0 +1,23 @@
+import ScoreSaberPlayer from "@/common/model/player/impl/scoresaber-player";
+import Image from "next/image";
+import Tooltip from "@/components/tooltip";
+
+type Props = {
+  player: ScoreSaberPlayer;
+};
+
+export default function PlayerBadges({ player }: Props) {
+  return (
+    <div className="flex flex-wrap gap-2 w-full items-center justify-center">
+      {player.badges?.map((badge, index) => {
+        return (
+          <Tooltip key={index} display={<p className="cursor-default pointer-events-none">{badge.description}</p>}>
+            <div>
+              <Image src={badge.url} alt={badge.description} width={80} height={30} unoptimized />
+            </div>
+          </Tooltip>
+        );
+      })}
+    </div>
+  );
+}

apps/frontend/src/components/player/player-data.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import ScoreSaberPlayerScoresPageToken from "@/common/model/token/scoresaber/score-saber-player-scores-page-token";
+import { scoresaberService } from "@/common/service/impl/scoresaber";
+import { ScoreSort } from "@/common/model/score/score-sort";
+import { useQuery } from "@tanstack/react-query";
+import Mini from "../ranking/mini";
+import PlayerHeader from "./player-header";
+import PlayerRankChart from "./player-rank-chart";
+import PlayerScores from "./player-scores";
+import ScoreSaberPlayer from "@/common/model/player/impl/scoresaber-player";
+import Card from "@/components/card";
+import PlayerBadges from "@/components/player/player-badges";
+import { useIsMobile } from "@/hooks/use-is-mobile";
+
+type Props = {
+  initialPlayerData: ScoreSaberPlayer;
+  initialScoreData?: ScoreSaberPlayerScoresPageToken;
+  initialSearch?: string;
+  sort: ScoreSort;
+  page: number;
+};
+
+export default function PlayerData({
+  initialPlayerData: initalPlayerData,
+  initialScoreData,
+  initialSearch,
+  sort,
+  page,
+}: Props) {
+  const isMobile = useIsMobile();
+  console.log("mobile", isMobile);
+
+  let player = initalPlayerData;
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ["player", player.id],
+    queryFn: () => scoresaberService.lookupPlayer(player.id),
+    staleTime: 1000 * 60 * 5, // Cache data for 5 minutes
+  });
+
+  if (data && (!isLoading || !isError)) {
+    player = data.player;
+  }
+
+  return (
+    <div className="flex gap-2">
+      <article className="flex flex-col gap-2">
+        <PlayerHeader player={player} />
+        {!player.inactive && (
+          <Card className="gap-1">
+            <PlayerBadges player={player} />
+            <PlayerRankChart player={player} />
+          </Card>
+        )}
+        <PlayerScores
+          initialScoreData={initialScoreData}
+          initialSearch={initialSearch}
+          player={player}
+          sort={sort}
+          page={page}
+        />
+      </article>
+      {!isMobile && (
+        <aside className="w-[600px] hidden 2xl:flex flex-col gap-2">
+          <Mini type="Global" player={player} />
+          <Mini type="Country" player={player} />
+        </aside>
+      )}
+    </div>
+  );
+}

apps/frontend/src/components/player/player-header.tsx

@@ -0,0 +1,136 @@
+import { formatNumberWithCommas, formatPp } from "@/common/number-utils";
+import { GlobeAmericasIcon } from "@heroicons/react/24/solid";
+import Card from "../card";
+import CountryFlag from "../country-flag";
+import { Avatar, AvatarImage } from "../ui/avatar";
+import ClaimProfile from "./claim-profile";
+import PlayerStats from "./player-stats";
+import ScoreSaberPlayer from "@/common/model/player/impl/scoresaber-player";
+import Tooltip from "@/components/tooltip";
+import { ReactElement } from "react";
+import PlayerTrackedStatus from "@/components/player/player-tracked-status";
+
+/**
+ * Renders the change for a stat.
+ *
+ * @param change the amount of change
+ * @param tooltip the tooltip to display
+ * @param format the function to format the value
+ */
+const renderChange = (change: number, tooltip: ReactElement, format?: (value: number) => string) => {
+  format = format ?? formatNumberWithCommas;
+
+  return (
+    <Tooltip display={tooltip}>
+      <p className={`text-sm ${change > 0 ? "text-green-400" : "text-red-400"}`}>
+        {change > 0 ? "+" : ""}
+        {format(change)}
+      </p>
+    </Tooltip>
+  );
+};
+
+const playerData = [
+  {
+    showWhenInactiveOrBanned: false,
+    icon: () => {
+      return <GlobeAmericasIcon className="h-5 w-5" />;
+    },
+    render: (player: ScoreSaberPlayer) => {
+      const statisticChange = player.statisticChange;
+      const rankChange = statisticChange?.rank ?? 0;
+
+      return (
+        <div className="text-gray-300 flex gap-1 items-center">
+          <p>#{formatNumberWithCommas(player.rank)}</p>
+          {rankChange != 0 && renderChange(rankChange, <p>The change in your rank compared to yesterday</p>)}
+        </div>
+      );
+    },
+  },
+  {
+    showWhenInactiveOrBanned: false,
+    icon: (player: ScoreSaberPlayer) => {
+      return <CountryFlag code={player.country} size={15} />;
+    },
+    render: (player: ScoreSaberPlayer) => {
+      const statisticChange = player.statisticChange;
+      const rankChange = statisticChange?.countryRank ?? 0;
+
+      return (
+        <div className="text-gray-300 flex gap-1 items-center">
+          <p>#{formatNumberWithCommas(player.countryRank)}</p>
+          {rankChange != 0 && renderChange(rankChange, <p>The change in your rank compared to yesterday</p>)}
+        </div>
+      );
+    },
+  },
+  {
+    showWhenInactiveOrBanned: true,
+    render: (player: ScoreSaberPlayer) => {
+      const statisticChange = player.statisticChange;
+      const ppChange = statisticChange?.pp ?? 0;
+
+      return (
+        <div className="text-pp flex gap-1 items-center">
+          <p>{formatPp(player.pp)}pp</p>
+          {ppChange != 0 &&
+            renderChange(ppChange, <p>The change in your pp compared to yesterday</p>, number => {
+              return `${formatPp(number)}pp`;
+            })}
+        </div>
+      );
+    },
+  },
+];
+
+type Props = {
+  player: ScoreSaberPlayer;
+};
+
+export default function PlayerHeader({ player }: Props) {
+  return (
+    <Card>
+      <div className="flex gap-3 flex-col items-center text-center lg:flex-row lg:items-start lg:text-start relative select-none">
+        <Avatar className="w-32 h-32 pointer-events-none">
+          <AvatarImage alt="Profile Picture" src={`https://img.fascinated.cc/upload/w_128,h_128/${player.avatar}`} />
+        </Avatar>
+        <div className="w-full flex gap-2 flex-col justify-center items-center lg:justify-start lg:items-start">
+          <div>
+            <div className="flex gap-2 items-center justify-center lg:justify-start">
+              <p className="font-bold text-2xl">{player.name}</p>
+              <PlayerTrackedStatus player={player} />
+            </div>
+            <div className="flex flex-col">
+              <div>
+                {player.inactive && <p className="text-gray-400">Inactive Account</p>}
+                {player.banned && <p className="text-red-500">Banned Account</p>}
+              </div>
+              <div className="flex gap-2">
+                {playerData.map((subName, index) => {
+                  // Check if the player is inactive or banned and if the data should be shown
+                  if (!subName.showWhenInactiveOrBanned && (player.inactive || player.banned)) {
+                    return null;
+                  }
+
+                  return (
+                    <div key={index} className="flex gap-1 items-center">
+                      {subName.icon && subName.icon(player)}
+                      {subName.render && subName.render(player)}
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+
+          <PlayerStats player={player} />
+
+          <div className="absolute top-0 right-0">
+            <ClaimProfile playerId={player.id} />
+          </div>
+        </div>
+      </div>
+    </Card>
+  );
+}

apps/frontend/src/components/player/player-rank-chart.tsx

@@ -0,0 +1,294 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+"use client";
+
+import { formatNumberWithCommas } from "@/common/number-utils";
+import { CategoryScale, Chart, Legend, LinearScale, LineElement, PointElement, Title, Tooltip } from "chart.js";
+import { Line } from "react-chartjs-2";
+import ScoreSaberPlayer from "@/common/model/player/impl/scoresaber-player";
+import { getDaysAgo, parseDate } from "@/common/time-utils";
+import { useIsMobile } from "@/hooks/use-is-mobile";
+
+Chart.register(LinearScale, CategoryScale, PointElement, LineElement, Title, Tooltip, Legend);
+
+type AxisPosition = "left" | "right";
+
+/**
+ * A ChartJS axis
+ */
+type Axis = {
+  id?: string;
+  position?: AxisPosition;
+  display?: boolean;
+  grid?: { color?: string; drawOnChartArea?: boolean };
+  title?: { display: boolean; text: string; color?: string };
+  ticks?: {
+    stepSize?: number;
+  };
+  reverse?: boolean;
+};
+
+/**
+ * A ChartJS dataset
+ */
+type Dataset = {
+  label: string;
+  data: (number | null)[]; // Allow null values for gaps
+  borderColor: string;
+  fill: boolean;
+  lineTension: number;
+  spanGaps: boolean;
+  yAxisID: string;
+};
+
+/**
+ * Generate an axis
+ *
+ * @param id the id of the axis
+ * @param reverse if the axis should be reversed
+ * @param display if the axis should be displayed
+ * @param position the position of the axis
+ * @param displayName the optional name to display for the axis
+ */
+const generateAxis = (
+  id: string,
+  reverse: boolean,
+  display: boolean,
+  position: AxisPosition,
+  displayName: string
+): Axis => ({
+  id,
+  position,
+  display,
+  grid: {
+    drawOnChartArea: id === "y",
+    color: id === "y" ? "#252525" : "",
+  },
+  title: {
+    display: true,
+    text: displayName,
+    color: "#ffffff",
+  },
+  ticks: {
+    stepSize: 10,
+  },
+  reverse,
+});
+
+/**
+ * Generate a dataset
+ *
+ * @param label the label of the dataset
+ * @param data the data of the dataset
+ * @param borderColor the border color of the dataset
+ * @param yAxisID the ID of the y-axis
+ */
+const generateDataset = (label: string, data: (number | null)[], borderColor: string, yAxisID: string): Dataset => ({
+  label,
+  data,
+  borderColor,
+  fill: false,
+  lineTension: 0.5,
+  spanGaps: false, // Set to false, so we can allow gaps
+  yAxisID,
+});
+
+type DatasetConfig = {
+  title: string;
+  field: string;
+  color: string;
+  axisId: string;
+  axisConfig: {
+    reverse: boolean;
+    display: boolean;
+    hideOnMobile?: boolean;
+    displayName: string;
+    position: AxisPosition;
+  };
+  labelFormatter: (value: number) => string;
+};
+
+// Configuration array for datasets and axes with label formatters
+const datasetConfig: DatasetConfig[] = [
+  {
+    title: "Rank",
+    field: "rank",
+    color: "#3EC1D3",
+    axisId: "y",
+    axisConfig: {
+      reverse: true,
+      display: true,
+      displayName: "Global Rank",
+      position: "left",
+    },
+    labelFormatter: (value: number) => `Rank #${formatNumberWithCommas(value)}`,
+  },
+  {
+    title: "Country Rank",
+    field: "countryRank",
+    color: "#FFEA00",
+    axisId: "y1",
+    axisConfig: {
+      reverse: true,
+      display: false,
+      displayName: "Country Rank",
+      position: "left",
+    },
+    labelFormatter: (value: number) => `Country Rank #${formatNumberWithCommas(value)}`,
+  },
+  {
+    title: "PP",
+    field: "pp",
+    color: "#606fff",
+    axisId: "y2",
+    axisConfig: {
+      reverse: false,
+      display: true,
+      hideOnMobile: true,
+      displayName: "PP",
+      position: "right",
+    },
+    labelFormatter: (value: number) => `PP ${formatNumberWithCommas(value)}pp`,
+  },
+];
+
+type Props = {
+  player: ScoreSaberPlayer;
+};
+
+export default function PlayerRankChart({ player }: Props) {
+  const isMobile = useIsMobile();
+
+  if (!player.statisticHistory || Object.keys(player.statisticHistory).length === 0) {
+    return (
+      <div className="flex justify-center">
+        <p>Unable to load player rank chart, missing data...</p>
+      </div>
+    );
+  }
+
+  const labels: string[] = [];
+  const histories: Record<string, (number | null)[]> = {
+    rank: [],
+    countryRank: [],
+    pp: [],
+  };
+
+  const statisticEntries = Object.entries(player.statisticHistory).sort(
+    ([a], [b]) => parseDate(a).getTime() - parseDate(b).getTime()
+  );
+
+  let previousDate: Date | null = null;
+
+  // Create labels and history data
+  for (const [dateString, history] of statisticEntries) {
+    const currentDate = parseDate(dateString);
+
+    // Insert nulls for missing days
+    if (previousDate) {
+      const diffDays = Math.floor((currentDate.getTime() - previousDate.getTime()) / (1000 * 60 * 60 * 24));
+
+      for (let i = 1; i < diffDays; i++) {
+        labels.push(`${getDaysAgo(new Date(currentDate.getTime() - i * 24 * 60 * 60 * 1000))} days ago`);
+        datasetConfig.forEach(config => {
+          histories[config.field].push(null);
+        });
+      }
+    }
+
+    const daysAgo = getDaysAgo(currentDate);
+    labels.push(daysAgo === 0 ? "Today" : `${daysAgo} days ago`);
+
+    // stupid typescript crying wahh wahh wahh - https://youtu.be/hBEKgHDzm_s?si=ekOdMMdb-lFnA1Yz&t=11
+    datasetConfig.forEach(config => {
+      (histories as any)[config.field].push((history as any)[config.field] ?? null);
+    });
+
+    previousDate = currentDate;
+  }
+
+  // Dynamically create axes and datasets based on datasetConfig
+  const axes: Record<string, Axis> = {
+    x: {
+      grid: {
+        color: "#252525", // gray grid lines
+      },
+      reverse: false,
+    },
+  };
+
+  const datasets: Dataset[] = datasetConfig
+    .map(config => {
+      if (histories[config.field].some(value => value !== null)) {
+        axes[config.axisId] = generateAxis(
+          config.axisId,
+          config.axisConfig.reverse,
+          isMobile && config.axisConfig.hideOnMobile ? false : config.axisConfig.display,
+          config.axisConfig.position,
+          config.axisConfig.displayName
+        );
+        return generateDataset(config.title, histories[config.field], config.color, config.axisId);
+      }
+      return null;
+    })
+    .filter(Boolean) as Dataset[];
+
+  const options: any = {
+    maintainAspectRatio: false,
+    responsive: true,
+    interaction: {
+      mode: "index",
+      intersect: false,
+    },
+    scales: axes,
+    elements: {
+      point: {
+        radius: 0,
+      },
+    },
+    plugins: {
+      legend: {
+        position: "top" as const,
+        labels: {
+          color: "white",
+        },
+      },
+      tooltip: {
+        callbacks: {
+          label(context: any) {
+            const value = Number(context.parsed.y);
+            const config = datasetConfig.find(cfg => cfg.title === context.dataset.label);
+            return config?.labelFormatter(value) ?? "";
+          },
+        },
+      },
+    },
+  };
+
+  const data = {
+    labels,
+    datasets,
+  };
+
+  return (
+    <div className="block h-[320px] w-full relative">
+      <Line
+        className="max-w-[100%]"
+        options={options}
+        data={data}
+        plugins={[
+          {
+            id: "legend-padding",
+            beforeInit: (chart: any) => {
+              const originalFit = chart.legend.fit;
+
+              chart.legend.fit = function fit() {
+                originalFit.bind(chart.legend)();
+                this.height += 2;
+              };
+            },
+          },
+        ]}
+      />
+    </div>
+  );
+}

apps/frontend/src/components/player/player-scores.tsx

@@ -0,0 +1,233 @@
+import { capitalizeFirstLetter } from "@/common/string-utils";
+import useWindowDimensions from "@/hooks/use-window-dimensions";
+import { ClockIcon, TrophyIcon, XMarkIcon } from "@heroicons/react/24/solid";
+import { useQuery } from "@tanstack/react-query";
+import { motion, useAnimation, Variants } from "framer-motion";
+import { useCallback, useEffect, useRef, useState } from "react";
+import Card from "../card";
+import Pagination from "../input/pagination";
+import { Button } from "../ui/button";
+import { ScoreSort } from "@/common/model/score/score-sort";
+import ScoreSaberPlayerScoresPageToken from "@/common/model/token/scoresaber/score-saber-player-scores-page-token";
+import Score from "@/components/score/score";
+import ScoreSaberPlayer from "@/common/model/player/impl/scoresaber-player";
+import { scoresaberService } from "@/common/service/impl/scoresaber";
+import { Input } from "@/components/ui/input";
+import { clsx } from "clsx";
+import { useDebounce } from "@uidotdev/usehooks";
+
+type Props = {
+  initialScoreData?: ScoreSaberPlayerScoresPageToken;
+  initialSearch?: string;
+  player: ScoreSaberPlayer;
+  sort: ScoreSort;
+  page: number;
+};
+
+type PageState = {
+  page: number;
+  sort: ScoreSort;
+};
+
+const scoreSort = [
+  {
+    name: "Top",
+    value: ScoreSort.top,
+    icon: <TrophyIcon className="w-5 h-5" />,
+  },
+  {
+    name: "Recent",
+    value: ScoreSort.recent,
+    icon: <ClockIcon className="w-5 h-5" />,
+  },
+];
+
+const scoreAnimation: Variants = {
+  hiddenRight: { opacity: 0, x: 50 },
+  hiddenLeft: { opacity: 0, x: -50 },
+  visible: { opacity: 1, x: 0, transition: { staggerChildren: 0.03 } },
+};
+
+export default function PlayerScores({ initialScoreData, initialSearch, player, sort, page }: Props) {
+  const { width } = useWindowDimensions();
+  const controls = useAnimation();
+
+  const [pageState, setPageState] = useState<PageState>({ page, sort });
+  const [previousPage, setPreviousPage] = useState(page);
+  const [currentScores, setCurrentScores] = useState<ScoreSaberPlayerScoresPageToken | undefined>(initialScoreData);
+  const [searchTerm, setSearchTerm] = useState(initialSearch || "");
+  const debouncedSearchTerm = useDebounce(searchTerm, 250);
+  const [shouldFetch, setShouldFetch] = useState(false); // New state to control fetching
+  const topOfScoresRef = useRef(null);
+
+  const isSearchActive = debouncedSearchTerm.length >= 3;
+  const {
+    data: scores,
+    isError,
+    isLoading,
+  } = useQuery({
+    queryKey: ["playerScores", player.id, pageState, debouncedSearchTerm],
+    queryFn: () => {
+      return scoresaberService.lookupPlayerScores({
+        playerId: player.id,
+        page: pageState.page,
+        sort: pageState.sort,
+        ...(isSearchActive && { search: debouncedSearchTerm }),
+      });
+    },
+    staleTime: 30 * 1000, // 30 seconds
+    enabled: shouldFetch && (debouncedSearchTerm.length >= 3 || debouncedSearchTerm.length === 0), // Only enable if we set shouldFetch to true
+  });
+
+  /**
+   * Starts the animation for the scores.
+   */
+  const handleScoreAnimation = useCallback(async () => {
+    await controls.start(previousPage >= pageState.page ? "hiddenRight" : "hiddenLeft");
+    setCurrentScores(scores);
+    await controls.start("visible");
+  }, [scores, controls, previousPage, pageState.page]);
+
+  /**
+   * Change the score sort.
+   *
+   * @param newSort the new sort
+   */
+  const handleSortChange = (newSort: ScoreSort) => {
+    if (newSort !== pageState.sort) {
+      setPageState({ page: 1, sort: newSort });
+      setShouldFetch(true); // Set to true to trigger fetch
+    }
+  };
+
+  /**
+   * Change the score search term.
+   *
+   * @param query the new search term
+   */
+  const handleSearchChange = (query: string) => {
+    setSearchTerm(query);
+    if (query.length >= 3) {
+      setShouldFetch(true); // Set to true to trigger fetch
+    } else {
+      setShouldFetch(false); // Disable fetch if the search query is less than 3 characters
+    }
+  };
+
+  /**
+   * Clears the score search term.
+   */
+  const clearSearch = () => {
+    setSearchTerm("");
+  };
+
+  /**
+   * Handle score animation.
+   */
+  useEffect(() => {
+    if (scores) handleScoreAnimation();
+  }, [scores, handleScoreAnimation]);
+
+  /**
+   * Handle updating the URL when the page number,
+   * sort, or search term changes.
+   */
+  useEffect(() => {
+    const newUrl = `/player/${player.id}/${pageState.sort}/${pageState.page}${isSearchActive ? `?search=${debouncedSearchTerm}` : ""}`;
+    window.history.replaceState({ ...window.history.state, as: newUrl, url: newUrl }, "", newUrl);
+  }, [pageState, debouncedSearchTerm, player.id, isSearchActive]);
+
+  /**
+   * Handle scrolling to the top of the
+   * scores when new scores are loaded.
+   */
+  useEffect(() => {
+    if (topOfScoresRef.current && shouldFetch) {
+      const topOfScoresPosition = (topOfScoresRef.current as any).getBoundingClientRect().top + window.scrollY;
+      window.scrollTo({
+        top: topOfScoresPosition - 55, // Navbar height (plus some padding)
+        behavior: "smooth",
+      });
+    }
+  }, [pageState, topOfScoresRef, shouldFetch]);
+
+  const invalidSearch = searchTerm.length >= 1 && searchTerm.length < 3;
+  return (
+    <Card className="flex gap-1">
+      <div className="flex flex-col items-center w-full gap-2 relative">
+        {/* Where to scroll to when new scores are loaded */}
+        <div ref={topOfScoresRef} className="absolute flex h-11 p-11" />
+
+        <div className="flex gap-2">
+          {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">
+          <Input
+            type="search"
+            placeholder="Search..."
+            className={clsx(
+              "pr-10", // Add padding right for the clear button
+              invalidSearch && "border-red-500"
+            )}
+            value={searchTerm}
+            onChange={e => handleSearchChange(e.target.value)}
+          />
+          {searchTerm && ( // Show clear button only if there's a query
+            <button
+              onClick={clearSearch}
+              className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-300 hover:brightness-75 transform-gpu transition-all cursor-default"
+              aria-label="Clear search"
+            >
+              <XMarkIcon className="w-5 h-5" />
+            </button>
+          )}
+        </div>
+      </div>
+
+      {currentScores && (
+        <>
+          <div className="text-center">
+            {isError || (currentScores.playerScores.length === 0 && <p>No scores found. Invalid Page or Search?</p>)}
+          </div>
+
+          <motion.div
+            initial="hidden"
+            animate={controls}
+            variants={scoreAnimation}
+            className="grid min-w-full grid-cols-1 divide-y divide-border"
+          >
+            {currentScores.playerScores.map((playerScore, index) => (
+              <motion.div key={index} variants={scoreAnimation}>
+                <Score playerScore={playerScore} />
+              </motion.div>
+            ))}
+          </motion.div>
+
+          <Pagination
+            mobilePagination={width < 768}
+            page={pageState.page}
+            totalPages={Math.ceil(currentScores.metadata.total / currentScores.metadata.itemsPerPage)}
+            loadingPage={isLoading ? pageState.page : undefined}
+            onPageChange={newPage => {
+              setPreviousPage(pageState.page);
+              setPageState({ ...pageState, page: newPage });
+              setShouldFetch(true); // Set to true to trigger fetch on page change
+            }}
+          />
+        </>
+      )}
+    </Card>
+  );
+}

apps/frontend/src/components/player/player-stats.tsx

@@ -0,0 +1,70 @@
+import { formatNumberWithCommas } from "@/common/number-utils";
+import StatValue from "@/components/stat-value";
+import ScoreSaberPlayer from "@/common/model/player/impl/scoresaber-player";
+
+type Badge = {
+  name: string;
+  color?: string;
+  create: (player: ScoreSaberPlayer) => string | React.ReactNode | undefined;
+};
+
+const badges: Badge[] = [
+  {
+    name: "Ranked Play Count",
+    color: "bg-pp",
+    create: (player: ScoreSaberPlayer) => {
+      return formatNumberWithCommas(player.statistics.rankedPlayCount);
+    },
+  },
+  {
+    name: "Total Ranked Score",
+    color: "bg-pp",
+    create: (player: ScoreSaberPlayer) => {
+      return formatNumberWithCommas(player.statistics.totalRankedScore);
+    },
+  },
+  {
+    name: "Average Ranked Accuracy",
+    color: "bg-pp",
+    create: (player: ScoreSaberPlayer) => {
+      return player.statistics.averageRankedAccuracy.toFixed(2) + "%";
+    },
+  },
+  {
+    name: "Total Play Count",
+    create: (player: ScoreSaberPlayer) => {
+      return formatNumberWithCommas(player.statistics.totalPlayCount);
+    },
+  },
+  {
+    name: "Total Score",
+    create: (player: ScoreSaberPlayer) => {
+      return formatNumberWithCommas(player.statistics.totalScore);
+    },
+  },
+  {
+    name: "Total Replays Watched",
+    create: (player: ScoreSaberPlayer) => {
+      return formatNumberWithCommas(player.statistics.replaysWatched);
+    },
+  },
+];
+
+type Props = {
+  player: ScoreSaberPlayer;
+};
+
+export default function PlayerStats({ player }: Props) {
+  return (
+    <div className={`flex flex-wrap gap-2 w-full justify-center lg:justify-start`}>
+      {badges.map((badge, index) => {
+        const toRender = badge.create(player);
+        if (toRender === undefined) {
+          return <div key={index} />;
+        }
+
+        return <StatValue key={index} color={badge.color} name={badge.name} value={toRender} />;
+      })}
+    </div>
+  );
+}

apps/frontend/src/components/player/player-tracked-status.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import ScoreSaberPlayer from "@/common/model/player/impl/scoresaber-player";
+import ky from "ky";
+import { config } from "../../../config";
+import Tooltip from "@/components/tooltip";
+import { InformationCircleIcon } from "@heroicons/react/16/solid";
+import { format } from "@formkit/tempo";
+import { PlayerTrackedSince } from "@/common/player/player-tracked-since";
+import { getDaysAgo } from "@/common/time-utils";
+import { formatNumberWithCommas } from "@/common/number-utils";
+
+type Props = {
+  player: ScoreSaberPlayer;
+};
+
+export default function PlayerTrackedStatus({ player }: Props) {
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ["playerIsBeingTracked", player.id],
+    queryFn: () => ky.get<PlayerTrackedSince>(`${config.siteUrl}/api/player/isbeingtracked?id=${player.id}`).json(),
+  });
+
+  if (isLoading || isError || !data?.tracked) {
+    return undefined;
+  }
+
+  const trackedSince = new Date(data.trackedSince!);
+  const daysAgo = getDaysAgo(trackedSince) + 1;
+  let daysAgoFormatted = `${formatNumberWithCommas(daysAgo)} day${daysAgo > 1 ? "s" : ""} ago`;
+  if (daysAgo === 1) {
+    daysAgoFormatted = "Today";
+  }
+  if (daysAgo === 2) {
+    daysAgoFormatted = "Yesterday";
+  }
+
+  return (
+    <div className="flex gap-2">
+      <Tooltip
+        display={
+          <div className="flex flex-col justify-center items-center">
+            <p>This player is having their statistics tracked!</p>
+            <p>
+              Tracked Since: {format(trackedSince)} ({daysAgoFormatted})
+            </p>
+            <p>Days Tracked: {formatNumberWithCommas(data.daysTracked!)}</p>
+          </div>
+        }
+        side="bottom"
+      >
+        <InformationCircleIcon className="w-6 h-6 text-neutral-200" />
+      </Tooltip>
+    </div>
+  );
+}

apps/frontend/src/components/preload-resources.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import ReactDOM from "react-dom";
+
+export function PreloadResources() {
+  ReactDOM.prefetchDNS("https://proxy.fascinated.cc");
+  ReactDOM.prefetchDNS("https://scoresber.com");
+  return undefined;
+}

apps/frontend/src/components/providers/query-provider.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+type Props = {
+  children: React.ReactNode;
+};
+
+const queryClient = new QueryClient();
+
+export function QueryProvider({ children }: Props) {
+  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+}

apps/frontend/src/components/providers/theme-provider.tsx

@@ -0,0 +1,8 @@
+"use client";
+
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { type ThemeProviderProps } from "next-themes/dist/types";
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}

apps/frontend/src/components/ranking/mini.tsx

@@ -0,0 +1,144 @@
+import ScoreSaberPlayerToken from "@/common/model/token/scoresaber/score-saber-player-token";
+import { ScoreSaberPlayersPageToken } from "@/common/model/token/scoresaber/score-saber-players-page-token";
+import { formatNumberWithCommas, formatPp } from "@/common/number-utils";
+import { GlobeAmericasIcon } from "@heroicons/react/24/solid";
+import { useQuery } from "@tanstack/react-query";
+import Link from "next/link";
+import { ReactElement } from "react";
+import Card from "../card";
+import CountryFlag from "../country-flag";
+import { Avatar, AvatarImage } from "../ui/avatar";
+import ScoreSaberPlayer from "@/common/model/player/impl/scoresaber-player";
+import { scoresaberService } from "@/common/service/impl/scoresaber";
+
+const PLAYER_NAME_MAX_LENGTH = 18;
+
+type MiniProps = {
+  type: "Global" | "Country";
+  player: ScoreSaberPlayer;
+};
+
+type Variants = {
+  [key: string]: {
+    itemsPerPage: number;
+    icon: (player: ScoreSaberPlayer) => ReactElement;
+    getPage: (player: ScoreSaberPlayer, itemsPerPage: number) => number;
+    query: (page: number, country: string) => Promise<ScoreSaberPlayersPageToken | undefined>;
+  };
+};
+
+const miniVariants: Variants = {
+  Global: {
+    itemsPerPage: 50,
+    icon: () => <GlobeAmericasIcon className="w-6 h-6" />,
+    getPage: (player: ScoreSaberPlayer, itemsPerPage: number) => {
+      return Math.floor((player.rank - 1) / itemsPerPage) + 1;
+    },
+    query: (page: number) => {
+      return scoresaberService.lookupPlayers(page);
+    },
+  },
+  Country: {
+    itemsPerPage: 50,
+    icon: (player: ScoreSaberPlayer) => {
+      return <CountryFlag code={player.country} size={12} />;
+    },
+    getPage: (player: ScoreSaberPlayer, itemsPerPage: number) => {
+      return Math.floor((player.countryRank - 1) / itemsPerPage) + 1;
+    },
+    query: (page: number, country: string) => {
+      return scoresaberService.lookupPlayersByCountry(page, country);
+    },
+  },
+};
+
+export default function Mini({ type, player }: MiniProps) {
+  const variant = miniVariants[type];
+  const icon = variant.icon(player);
+
+  const itemsPerPage = variant.itemsPerPage;
+  const page = variant.getPage(player, itemsPerPage);
+  const rankWithinPage = player.rank % itemsPerPage;
+
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ["player-" + type, player.id, type, page],
+    queryFn: async () => {
+      // Determine pages to search based on player's rank within the page
+      const pagesToSearch = [page];
+      if (rankWithinPage < 5 && page > 0) {
+        // Player is near the start of the page, so search the previous page too
+        pagesToSearch.push(page - 1);
+      }
+      if (rankWithinPage > itemsPerPage - 5) {
+        // Player is near the end of the page, so search the next page too
+        pagesToSearch.push(page + 1);
+      }
+
+      // Fetch players from the determined pages
+      const players: ScoreSaberPlayerToken[] = [];
+      for (const p of pagesToSearch) {
+        const response = await variant.query(p, player.country);
+        if (response === undefined) {
+          return undefined;
+        }
+
+        players.push(...response.players);
+      }
+
+      return players;
+    },
+  });
+
+  let players = data; // So we can update it later
+  if (players && (!isLoading || !isError)) {
+    // Find the player's position and show 3 players above and 1 below
+    const playerPosition = players.findIndex(p => p.id === player.id);
+    players = players.slice(playerPosition - 3, playerPosition + 2);
+  }
+
+  return (
+    <Card className="w-full flex gap-2 sticky select-none">
+      <div className="flex gap-2">
+        {icon}
+        <p>{type} Ranking</p>
+      </div>
+      <div className="flex flex-col text-sm">
+        {isLoading && <p className="text-gray-400">Loading...</p>}
+        {isError && <p className="text-red-500">Error</p>}
+        {players?.map((playerRanking, index) => {
+          const rank = type == "Global" ? playerRanking.rank : playerRanking.countryRank;
+          const playerName =
+            playerRanking.name.length > PLAYER_NAME_MAX_LENGTH
+              ? playerRanking.name.substring(0, PLAYER_NAME_MAX_LENGTH) + "..."
+              : playerRanking.name;
+          const ppDifference = playerRanking.pp - player.pp;
+
+          return (
+            <Link
+              key={index}
+              href={`/player/${playerRanking.id}`}
+              className="grid gap-2 grid-cols-[auto_1fr_auto] items-center bg-accent px-2 py-1.5 cursor-pointer transform-gpu transition-all hover:brightness-75 first:rounded-t last:rounded-b"
+            >
+              <p className="text-gray-400">#{formatNumberWithCommas(rank)}</p>
+              <div className="flex gap-1 items-center">
+                <Avatar className="w-6 h-6 pointer-events-none">
+                  <AvatarImage alt="Profile Picture" src={playerRanking.profilePicture} />
+                </Avatar>
+                <p className={playerRanking.id === player.id ? "text-pp font-semibold" : ""}>{playerName}</p>
+              </div>
+              <div className="inline-flex min-w-[10.75em] gap-1 items-center">
+                <p className="text-pp text-right">{formatPp(playerRanking.pp)}pp</p>
+                {playerRanking.id !== player.id && (
+                  <p className={`text-xs text-right ${ppDifference > 0 ? "text-green-400" : "text-red-400"}`}>
+                    {ppDifference > 0 ? "+" : ""}
+                    {formatPp(ppDifference)}
+                  </p>
+                )}
+              </div>
+            </Link>
+          );
+        })}
+      </div>
+    </Card>
+  );
+}

apps/frontend/src/components/score/leaderboard-button.tsx

@@ -0,0 +1,25 @@
+import { Button } from "@/components/ui/button";
+import { ArrowDownIcon } from "@heroicons/react/24/solid";
+import clsx from "clsx";
+import { Dispatch, SetStateAction } from "react";
+
+type Props = {
+  isLeaderboardExpanded: boolean;
+  setIsLeaderboardExpanded: Dispatch<SetStateAction<boolean>>;
+};
+
+export default function LeaderboardButton({ isLeaderboardExpanded, setIsLeaderboardExpanded }: Props) {
+  return (
+    <div className="pr-2 flex items-center justify-center h-full cursor-default">
+      <Button
+        className="p-0 hover:bg-transparent"
+        variant="ghost"
+        onClick={() => setIsLeaderboardExpanded(!isLeaderboardExpanded)}
+      >
+        <ArrowDownIcon
+          className={clsx("w-6 h-6 transition-all transform-gpu", isLeaderboardExpanded ? "" : "rotate-180")}
+        />
+      </Button>
+    </div>
+  );
+}

apps/frontend/src/components/score/score-button.tsx

@@ -0,0 +1,40 @@
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+
+type Props = {
+  /**
+   * The button content.
+   */
+  children: React.ReactNode;
+
+  /**
+   * The tooltip content.
+   */
+  tooltip?: React.ReactNode;
+
+  /**
+   * Callback for when the button is clicked.
+   */
+  onClick: () => void;
+};
+
+export default function ScoreButton({ children, tooltip, onClick }: Props) {
+  const button = (
+    <button
+      className="bg-accent rounded-md flex justify-center items-center p-1 w-[28px] h-[28px] hover:brightness-75 transform-gpu transition-all cursor-default"
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+
+  if (tooltip) {
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>{button}</TooltipTrigger>
+        <TooltipContent>{tooltip}</TooltipContent>
+      </Tooltip>
+    );
+  }
+
+  return button;
+}

apps/frontend/src/components/score/score-buttons.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { copyToClipboard } from "@/common/browser-utils";
+import ScoreSaberPlayerScoreToken from "@/common/model/token/scoresaber/score-saber-player-score-token";
+import BeatSaverMap from "@/common/database/types/beatsaver-map";
+import { songNameToYouTubeLink } from "@/common/youtube-utils";
+import BeatSaverLogo from "@/components/logos/beatsaver-logo";
+import YouTubeLogo from "@/components/logos/youtube-logo";
+import { useToast } from "@/hooks/use-toast";
+import { Dispatch, SetStateAction } from "react";
+import LeaderboardButton from "./leaderboard-button";
+import ScoreButton from "./score-button";
+
+type Props = {
+  playerScore: ScoreSaberPlayerScoreToken;
+  beatSaverMap?: BeatSaverMap;
+  isLeaderboardExpanded: boolean;
+  setIsLeaderboardExpanded: Dispatch<SetStateAction<boolean>>;
+};
+
+export default function ScoreButtons({
+  playerScore,
+  beatSaverMap,
+  isLeaderboardExpanded,
+  setIsLeaderboardExpanded,
+}: Props) {
+  const { leaderboard } = playerScore;
+  const { toast } = useToast();
+
+  return (
+    <div className="flex justify-end">
+      <LeaderboardButton
+        isLeaderboardExpanded={isLeaderboardExpanded}
+        setIsLeaderboardExpanded={setIsLeaderboardExpanded}
+      />
+      <div className="flex flex-row justify-center flex-wrap gap-1 lg:justify-end">
+        {beatSaverMap != undefined && (
+          <>
+            {/* Copy BSR */}
+            <ScoreButton
+              onClick={() => {
+                toast({
+                  title: "Copied!",
+                  description: `Copied "!bsr ${beatSaverMap.bsr}" to your clipboard!`,
+                });
+                copyToClipboard(`!bsr ${beatSaverMap.bsr}`);
+              }}
+              tooltip={<p>Click to copy the bsr code</p>}
+            >
+              <p>!</p>
+            </ScoreButton>
+
+            {/* Open map in BeatSaver */}
+            <ScoreButton
+              onClick={() => {
+                window.open(`https://beatsaver.com/maps/${beatSaverMap.bsr}`, "_blank");
+              }}
+              tooltip={<p>Click to open the map</p>}
+            >
+              <BeatSaverLogo />
+            </ScoreButton>
+          </>
+        )}
+
+        {/* Open song in YouTube */}
+        <ScoreButton
+          onClick={() => {
+            window.open(
+              songNameToYouTubeLink(leaderboard.songName, leaderboard.songSubName, leaderboard.songAuthorName),
+              "_blank"
+            );
+          }}
+          tooltip={<p>Click to open the song in YouTube</p>}
+        >
+          <YouTubeLogo />
+        </ScoreButton>
+      </div>
+    </div>
+  );
+}

apps/frontend/src/components/score/score-info.tsx

@@ -0,0 +1,79 @@
+import BeatSaverMap from "@/common/database/types/beatsaver-map";
+import ScoreSaberLeaderboardToken from "@/common/model/token/scoresaber/score-saber-leaderboard-token";
+import { getDifficultyFromScoreSaberDifficulty } from "@/common/scoresaber-utils";
+import FallbackLink from "@/components/fallback-link";
+import Tooltip from "@/components/tooltip";
+import { StarIcon } from "@heroicons/react/24/solid";
+import clsx from "clsx";
+import Image from "next/image";
+import { songDifficultyToColor } from "@/common/song-utils";
+
+type Props = {
+  leaderboard: ScoreSaberLeaderboardToken;
+  beatSaverMap?: BeatSaverMap;
+};
+
+export default function ScoreSongInfo({ leaderboard, beatSaverMap }: Props) {
+  const diff = getDifficultyFromScoreSaberDifficulty(leaderboard.difficulty.difficulty);
+  const mappersProfile =
+    beatSaverMap != undefined ? `https://beatsaver.com/profile/${beatSaverMap?.fullData.uploader.id}` : undefined;
+
+  return (
+    <div className="flex gap-3 items-center">
+      <div className="relative flex justify-center h-[64px]">
+        <Tooltip
+          display={
+            <>
+              <p>
+                Difficulty: <span className="font-bold">{diff}</span>
+              </p>
+              {leaderboard.stars > 0 && (
+                <p>
+                  Stars: <span className="font-bold">{leaderboard.stars}</span>
+                </p>
+              )}
+            </>
+          }
+        >
+          <div
+            className="absolute w-full h-[20px] bottom-0 right-0 rounded-sm flex justify-center items-center text-xs cursor-default"
+            style={{
+              backgroundColor: songDifficultyToColor(diff) + "f0", // Transparency value (in hex 0-255)
+            }}
+          >
+            {leaderboard.stars > 0 ? (
+              <div className="flex gap-1 items-center justify-center">
+                <p>{leaderboard.stars}</p>
+                <StarIcon className="w-4 h-4" />
+              </div>
+            ) : (
+              <p>{diff}</p>
+            )}
+          </div>
+        </Tooltip>
+        <Image
+          unoptimized
+          src={`https://img.fascinated.cc/upload/w_64,h_64/${leaderboard.coverImage}`}
+          width={64}
+          height={64}
+          alt="Song Artwork"
+          className="rounded-md min-w-[64px]"
+          priority
+        />
+      </div>
+      <div className="flex">
+        <div className="overflow-y-clip">
+          <p className="text-pp">
+            {leaderboard.songName} {leaderboard.songSubName}
+          </p>
+          <p className="text-sm text-gray-400">{leaderboard.songAuthorName}</p>
+          <FallbackLink href={mappersProfile}>
+            <p className={clsx("text-sm", mappersProfile && "hover:brightness-75 transform-gpu transition-all")}>
+              {leaderboard.levelAuthorName}
+            </p>
+          </FallbackLink>
+        </div>
+      </div>
+    </div>
+  );
+}

apps/frontend/src/components/score/score-rank-info.tsx

@@ -0,0 +1,33 @@
+import ScoreSaberScoreToken from "@/common/model/token/scoresaber/score-saber-score-token";
+import { formatNumberWithCommas } from "@/common/number-utils";
+import { timeAgo } from "@/common/time-utils";
+import { format } from "@formkit/tempo";
+import { GlobeAmericasIcon } from "@heroicons/react/24/solid";
+import Tooltip from "../tooltip";
+
+type Props = {
+  score: ScoreSaberScoreToken;
+};
+
+export default function ScoreRankInfo({ score }: Props) {
+  return (
+    <div className="flex w-full flex-row justify-between lg:w-[125px] lg:flex-col lg:justify-center items-center">
+      <div className="flex gap-1 items-center">
+        <GlobeAmericasIcon className="w-5 h-5" />
+        <p className="text-pp">#{formatNumberWithCommas(score.rank)}</p>
+      </div>
+      <Tooltip
+        display={
+          <p>
+            {format({
+              date: new Date(score.timeSet),
+              format: "DD MMMM YYYY HH:mm a",
+            })}
+          </p>
+        }
+      >
+        <p className="text-sm cursor-default">{timeAgo(new Date(score.timeSet))}</p>
+      </Tooltip>
+    </div>
+  );
+}

apps/frontend/src/components/score/score-stats.tsx

@@ -0,0 +1,113 @@
+import ScoreSaberLeaderboardToken from "@/common/model/token/scoresaber/score-saber-leaderboard-token";
+import ScoreSaberScoreToken from "@/common/model/token/scoresaber/score-saber-score-token";
+import { formatNumberWithCommas, formatPp } from "@/common/number-utils";
+import { getScoreBadgeFromAccuracy } from "@/common/song-utils";
+import StatValue from "@/components/stat-value";
+import { XMarkIcon } from "@heroicons/react/24/solid";
+import clsx from "clsx";
+import Tooltip from "@/components/tooltip";
+
+type Badge = {
+  name: string;
+  color?: (score: ScoreSaberScoreToken, leaderboard: ScoreSaberLeaderboardToken) => string | undefined;
+  create: (
+    score: ScoreSaberScoreToken,
+    leaderboard: ScoreSaberLeaderboardToken
+  ) => string | React.ReactNode | undefined;
+};
+
+const badges: Badge[] = [
+  {
+    name: "PP",
+    color: () => {
+      return "bg-pp";
+    },
+    create: (score: ScoreSaberScoreToken) => {
+      const pp = score.pp;
+      if (pp === 0) {
+        return undefined;
+      }
+      return `${formatPp(pp)}pp`;
+    },
+  },
+  {
+    name: "Accuracy",
+    color: (score: ScoreSaberScoreToken, leaderboard: ScoreSaberLeaderboardToken) => {
+      const acc = (score.baseScore / leaderboard.maxScore) * 100;
+      return getScoreBadgeFromAccuracy(acc).color;
+    },
+    create: (score: ScoreSaberScoreToken, leaderboard: ScoreSaberLeaderboardToken) => {
+      const acc = (score.baseScore / leaderboard.maxScore) * 100;
+      const scoreBadge = getScoreBadgeFromAccuracy(acc);
+      let accDetails = `Accuracy ${scoreBadge.name != "-" ? scoreBadge.name : ""}`;
+      if (scoreBadge.max == null) {
+        accDetails += ` (> ${scoreBadge.min}%)`;
+      } else if (scoreBadge.min == null) {
+        accDetails += ` (< ${scoreBadge.max}%)`;
+      } else {
+        accDetails += ` (${scoreBadge.min}% - ${scoreBadge.max}%)`;
+      }
+
+      return (
+        <>
+          <Tooltip
+            display={
+              <div>
+                <p>{accDetails}</p>
+              </div>
+            }
+          >
+            <p className="cursor-default">{acc.toFixed(2)}%</p>
+          </Tooltip>
+        </>
+      );
+    },
+  },
+  {
+    name: "Score",
+    create: (score: ScoreSaberScoreToken) => {
+      return `${formatNumberWithCommas(score.baseScore)}`;
+    },
+  },
+  {
+    name: "",
+    create: () => undefined,
+  },
+  {
+    name: "",
+    create: () => undefined,
+  },
+  {
+    name: "Full Combo",
+    create: (score: ScoreSaberScoreToken) => {
+      const fullCombo = score.missedNotes === 0;
+
+      return (
+        <>
+          <p>{fullCombo ? <span className="text-green-400">FC</span> : formatNumberWithCommas(score.missedNotes)}</p>
+          <XMarkIcon className={clsx("w-5 h-5", fullCombo ? "hidden" : "text-red-400")} />
+        </>
+      );
+    },
+  },
+];
+
+type Props = {
+  score: ScoreSaberScoreToken;
+  leaderboard: ScoreSaberLeaderboardToken;
+};
+
+export default function ScoreStats({ score, leaderboard }: Props) {
+  return (
+    <div className={`grid grid-cols-3 grid-rows-2 gap-1 ml-0 lg:ml-2`}>
+      {badges.map((badge, index) => {
+        const toRender = badge.create(score, leaderboard);
+        const color = badge.color?.(score, leaderboard);
+        if (toRender === undefined) {
+          return <div key={index} />;
+        }
+        return <StatValue key={index} color={color} value={toRender} />;
+      })}
+    </div>
+  );
+}

apps/frontend/src/components/score/score.tsx

@@ -0,0 +1,52 @@
+"use client";
+
+import BeatSaverMap from "@/common/database/types/beatsaver-map";
+import ScoreSaberPlayerScoreToken from "@/common/model/token/scoresaber/score-saber-player-score-token";
+import { beatsaverService } from "@/common/service/impl/beatsaver";
+import LeaderboardScores from "@/components/leaderboard/leaderboard-scores";
+import { useCallback, useEffect, useState } from "react";
+import ScoreButtons from "./score-buttons";
+import ScoreSongInfo from "./score-info";
+import ScoreRankInfo from "./score-rank-info";
+import ScoreStats from "./score-stats";
+
+type Props = {
+  /**
+   * The score to display.
+   */
+  playerScore: ScoreSaberPlayerScoreToken;
+};
+
+export default function Score({ playerScore }: Props) {
+  const { score, leaderboard } = playerScore;
+  const [beatSaverMap, setBeatSaverMap] = useState<BeatSaverMap | undefined>();
+  const [isLeaderboardExpanded, setIsLeaderboardExpanded] = useState(false);
+
+  const fetchBeatSaverData = useCallback(async () => {
+    const beatSaverMap = await beatsaverService.lookupMap(leaderboard.songHash);
+    setBeatSaverMap(beatSaverMap);
+  }, [leaderboard.songHash]);
+
+  useEffect(() => {
+    fetchBeatSaverData();
+  }, [fetchBeatSaverData]);
+
+  return (
+    <div className="pb-2 pt-2">
+      <div
+        className={`grid w-full gap-2 lg:gap-0 first:pt-0 last:pb-0 grid-cols-[20px 1fr_1fr] lg:grid-cols-[0.5fr_4fr_1fr_300px]`}
+      >
+        <ScoreRankInfo score={score} />
+        <ScoreSongInfo leaderboard={leaderboard} beatSaverMap={beatSaverMap} />
+        <ScoreButtons
+          playerScore={playerScore}
+          beatSaverMap={beatSaverMap}
+          isLeaderboardExpanded={isLeaderboardExpanded}
+          setIsLeaderboardExpanded={setIsLeaderboardExpanded}
+        />
+        <ScoreStats score={score} leaderboard={leaderboard} />
+      </div>
+      {isLeaderboardExpanded && <LeaderboardScores leaderboard={leaderboard} />}
+    </div>
+  );
+}

apps/frontend/src/components/stat-value.tsx

@@ -0,0 +1,40 @@
+import clsx from "clsx";
+
+type Props = {
+  /**
+   * The stat name.
+   */
+  name?: string;
+
+  /**
+   * The background color of the stat.
+   */
+  color?: string;
+
+  /**
+   * The value of the stat.
+   */
+  value: React.ReactNode;
+};
+
+export default function StatValue({ name, color, value }: Props) {
+  return (
+    <div
+      className={clsx(
+        "flex min-w-16 gap-2 h-[28px] p-1 items-center justify-center rounded-md text-sm",
+        color ? color : "bg-accent"
+      )}
+      style={{
+        backgroundColor: (!color?.includes("bg") && color) || undefined,
+      }}
+    >
+      {name && (
+        <>
+          <p>{name}</p>
+          <div className="h-4 w-[1px] bg-primary" />
+        </>
+      )}
+      <div className="flex gap-1 items-center">{typeof value === "string" ? <p>{value}</p> : value}</div>
+    </div>
+  );
+}

apps/frontend/src/components/tooltip.tsx

@@ -0,0 +1,27 @@
+import { Tooltip as ShadCnTooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
+
+type Props = {
+  /**
+   * What will trigger the tooltip
+   */
+  children: React.ReactNode;
+
+  /**
+   * What will be displayed in the tooltip
+   */
+  display: React.ReactNode;
+
+  /**
+   * Where the tooltip will be displayed
+   */
+  side?: "top" | "bottom" | "left" | "right";
+};
+
+export default function Tooltip({ children, display, side = "top" }: Props) {
+  return (
+    <ShadCnTooltip>
+      <TooltipTrigger asChild>{children}</TooltipTrigger>
+      <TooltipContent side={side}>{display}</TooltipContent>
+    </ShadCnTooltip>
+  );
+}