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

.gitea/workflows/deploy-website.yml

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

README.md

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

projects/backend/src/bot/bot.ts

@@ -56,15 +56,10 @@ export async function initDiscordBot() {
 export async function logToChannel(channelId: DiscordChannels, message: EmbedBuilder) {
   try {
     const channel = await client.channels.fetch(channelId);
-    if (channel == undefined) {
-      throw new Error(`Channel "${channelId}" not found`);
+    if (channel != undefined && channel.isSendable()) {
+      channel.send({ embeds: [message] });
     }
-    if (!channel.isSendable()) {
-      throw new Error(`Channel "${channelId}" is not sendable`);
-    }
-
-    channel.send({ embeds: [message] });
-  } catch (error) {
-    console.error(error);
+  } catch {
+    /* empty */
   }
 }

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

@@ -3,6 +3,7 @@ import { t } from "elysia";
 import { Leaderboards } from "@ssr/common/leaderboard";
 import { TopScoresResponse } from "@ssr/common/response/top-scores-response";
 import { ScoreService } from "../service/score.service";
+import { Timeframe } from "@ssr/common/timeframe";
 
 @Controller("/scores")
 export default class ScoresController {
@@ -77,11 +78,27 @@ export default class ScoresController {
 
   @Get("/top", {
     config: {},
+    query: t.Object({
+      limit: t.Number({ required: true }),
+      timeframe: t.String({ required: true }),
+    }),
   })
-  public async getTopScores(): Promise<TopScoresResponse> {
-    const scores = await ScoreService.getTopScores();
+  public async getTopScores({
+    query: { limit, timeframe },
+  }: {
+    query: { limit: number; timeframe: Timeframe };
+  }): Promise<TopScoresResponse> {
+    if (limit <= 0) {
+      limit = 1;
+    } else if (limit > 100) {
+      limit = 100;
+    }
+
+    const scores = await ScoreService.getTopScores(limit, timeframe);
     return {
       scores,
+      timeframe,
+      limit,
     };
   }
 }

projects/backend/src/index.ts

@@ -64,7 +64,7 @@ export const app = new Elysia();
 app.use(
   cron({
     name: "player-statistics-tracker-cron",
-    pattern: "0 1 * * * *", // Every day at 00:01
+    pattern: "0 1 * * *", // Every day at 00:01
     timezone: "Europe/London", // UTC time
     protect: true,
     run: async () => {

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

@@ -324,7 +324,7 @@ export class PlayerService {
     console.log(`Found ${players.length} players to refresh.`);
 
     for (const player of players) {
-      await this.refreshAllPlayerScores(player.id);
+      await this.refreshAllPlayerScores(player);
       await delay(SCORESABER_REQUEST_COOLDOWN); // Cooldown between players
     }
   }

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

@@ -38,6 +38,9 @@ import { MapCharacteristic } from "@ssr/common/types/map-characteristic";
 import { Page, Pagination } from "@ssr/common/pagination";
 import ScoreSaberLeaderboard from "@ssr/common/model/leaderboard/impl/scoresaber-leaderboard";
 import Leaderboard from "@ssr/common/model/leaderboard/leaderboard";
+import { Timeframe } from "@ssr/common/timeframe";
+import { getDaysAgoDate } from "@ssr/common/utils/time-utils";
+import { PlayerService } from "./player.service";
 
 const playerScoresCache = new SSRCache({
   ttl: 1000 * 60, // 1 minute
@@ -189,9 +192,12 @@ export class ScoreService {
     if (player == undefined) {
       return;
     }
+
     // Update player name
-    player.name = playerName;
-    await player.save();
+    if (playerName !== "Unknown") {
+      player.name = playerName;
+      await player.save();
+    }
 
     // The score has already been tracked, so ignore it.
     if (
@@ -203,9 +209,8 @@ export class ScoreService {
         score.score
       )) !== null
     ) {
-      await logToChannel(
-        DiscordChannels.backendLogs,
-        new EmbedBuilder().setDescription(`Score ${score.scoreId} already tracked`)
+      console.log(
+        `ScoreSaber score already tracked for "${playerName}"(${playerId}), difficulty: ${score.difficulty}, score: ${score.score}, leaderboard: ${leaderboard.id}, ignoring...`
       );
       return;
     }
@@ -303,43 +308,60 @@ export class ScoreService {
    * Gets the top tracked scores.
    *
    * @param amount the amount of scores to get
+   * @param timeframe the timeframe to filter by
    * @returns the top scores
    */
-  public static async getTopScores(amount: number = 100) {
+  public static async getTopScores(amount: number = 100, timeframe: Timeframe) {
+    console.log(`Getting top scores for timeframe: ${timeframe}, limit: ${amount}...`);
+    const before = Date.now();
+
+    let daysAgo = -1;
+    if (timeframe === "daily") {
+      daysAgo = 1;
+    } else if (timeframe === "weekly") {
+      daysAgo = 8;
+    } else if (timeframe === "monthly") {
+      daysAgo = 31;
+    }
+    const date: Date = daysAgo == -1 ? new Date(0) : getDaysAgoDate(daysAgo);
     const foundScores = await ScoreSaberScoreModel.aggregate([
-      // Start sorting by timestamp descending using the new compound index
-      { $sort: { leaderboardId: 1, playerId: 1, timestamp: -1 } },
+      { $match: { timestamp: { $gte: date } } },
       {
         $group: {
           _id: { leaderboardId: "$leaderboardId", playerId: "$playerId" },
-          latestScore: { $first: "$$ROOT" }, // Retrieve the latest score per group
+          score: { $first: "$$ROOT" },
         },
       },
-      // Sort by pp of the latest scores in descending order
-      { $sort: { "latestScore.pp": -1 } },
+      { $sort: { "score.pp": -1 } },
       { $limit: amount },
     ]);
 
-    // Collect unique leaderboard IDs
-    const leaderboardIds = [...new Set(foundScores.map(s => s.latestScore.leaderboardId))];
-    const leaderboardMap = await this.fetchLeaderboardsInBatch(leaderboardIds);
-
-    // Collect player IDs for batch retrieval
-    const playerIds = foundScores.map(result => result.latestScore.playerId);
-    const players = await PlayerModel.find({ _id: { $in: playerIds } }).exec();
-    const playerMap = new Map(players.map(player => [player._id.toString(), player]));
-
-    // Prepare to fetch additional data concurrently
-    const scoreDataPromises = foundScores.map(async result => {
-      const score: ScoreSaberScore = result.latestScore;
-      const leaderboardResponse = leaderboardMap[score.leaderboardId];
+    const scores: PlayerScore<ScoreSaberScore, ScoreSaberLeaderboard>[] = [];
+    for (const { score: scoreData } of foundScores) {
+      const score = new ScoreSaberScoreModel(scoreData).toObject() as ScoreSaberScore;
+      const leaderboardResponse = await LeaderboardService.getLeaderboard<ScoreSaberLeaderboard>(
+        "scoresaber",
+        score.leaderboardId + ""
+      );
       if (!leaderboardResponse) {
-        return null; // Skip if leaderboard data is not available
+        continue;
       }
-
       const { leaderboard, beatsaver } = leaderboardResponse;
 
-      // Fetch additional data concurrently
+      try {
+        const player = await PlayerService.getPlayer(score.playerId);
+        if (player !== undefined) {
+          score.playerInfo = {
+            id: player.id,
+            name: player.name,
+          };
+        }
+      } catch {
+        score.playerInfo = {
+          id: score.playerId,
+        };
+      }
+
       const [additionalData, previousScore] = await Promise.all([
         this.getAdditionalScoreData(
           score.playerId,
@@ -349,51 +371,21 @@ export class ScoreService {
         ),
         this.getPreviousScore(score.playerId, leaderboard.id + "", score.timestamp),
       ]);
-
-      // Attach additional and previous score data if available
-      if (additionalData) score.additionalData = additionalData;
-      if (previousScore) score.previousScore = previousScore;
-
-      // Attach player info if available
-      const player = playerMap.get(score.playerId.toString());
-      if (player) {
-        score.playerInfo = {
-          id: player._id,
-          name: player.name,
-        };
+      if (additionalData) {
+        score.additionalData = additionalData;
+      }
+      if (previousScore) {
+        score.previousScore = previousScore;
       }
 
-      return {
-        score: score as ScoreSaberScore,
+      scores.push({
+        score: score,
         leaderboard: leaderboard,
         beatSaver: beatsaver,
-      };
-    });
-    return (await Promise.all(scoreDataPromises)).filter(score => score !== null);
-  }
-
-  /**
-   * Fetches leaderboards in a batch.
-   *
-   * @param leaderboardIds the ids of the leaderboards
-   * @returns the fetched leaderboards
-   * @private
-   */
-  private static async fetchLeaderboardsInBatch(leaderboardIds: string[]) {
-    // Remove duplicates from leaderboardIds
-    const uniqueLeaderboardIds = Array.from(new Set(leaderboardIds));
-
-    const leaderboardResponses = await Promise.all(
-      uniqueLeaderboardIds.map(id => LeaderboardService.getLeaderboard<ScoreSaberLeaderboard>("scoresaber", id))
-    );
-
-    return leaderboardResponses.reduce(
-      (map, response) => {
-        if (response) map[response.leaderboard.id] = response;
-        return map;
-      },
-      {} as Record<string, { leaderboard: ScoreSaberLeaderboard; beatsaver?: BeatSaverMap }>
-    );
+      });
+    }
+    console.log(`Got ${scores.length} scores in ${Date.now() - before}ms (timeframe: ${timeframe}, limit: ${amount})`);
+    return scores;
   }
 
   /**
@@ -679,7 +671,9 @@ export class ScoreService {
     leaderboardId: string,
     timestamp: Date
   ): Promise<ScoreSaberPreviousScore | undefined> {
-    const scores = await ScoreSaberScoreModel.find({ playerId: playerId, leaderboardId: leaderboardId });
+    const scores = await ScoreSaberScoreModel.find({ playerId: playerId, leaderboardId: leaderboardId }).sort({
+      timestamp: -1,
+    });
     if (scores == null || scores.length == 0) {
       return undefined;
     }
@@ -689,7 +683,7 @@ export class ScoreService {
     if (scoreIndex == -1 || score == undefined) {
       return undefined;
     }
-    const previousScore = scores[scoreIndex - 1];
+    const previousScore = scores[scoreIndex + 1];
     if (previousScore == undefined) {
       return undefined;
     }
@@ -704,6 +698,7 @@ export class ScoreService {
       pp: previousScore.pp,
       weight: previousScore.weight,
       maxCombo: previousScore.maxCombo,
+      timestamp: previousScore.timestamp,
       change: {
         score: score.score - previousScore.score,
         accuracy: score.accuracy - previousScore.accuracy,

projects/backend/tsconfig.json

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

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

@@ -1,4 +1,4 @@
-import { getModelForClass, index, modelOptions, plugin, Prop, ReturnModelType, Severity } from "@typegoose/typegoose";
+import { getModelForClass, modelOptions, plugin, Prop, ReturnModelType, Severity } from "@typegoose/typegoose";
 import Score from "../score";
 import { type ScoreSaberLeaderboardPlayerInfoToken } from "../../../types/token/scoresaber/score-saber-leaderboard-player-info-token";
 import { Document } from "mongoose";
@@ -20,7 +20,6 @@ import { PreviousScore } from "../previous-score";
     },
   },
 })
-@index({ leaderboardId: 1, playerId: 1, timestamp: -1 }) // Compound index for optimized queries
 @plugin(AutoIncrementID, {
   field: "_id",
   startAt: 1,

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

@@ -35,4 +35,9 @@ export type PreviousScore = {
    * The full combo of the previous score.
    */
   fullCombo?: boolean;
+
+  /**
+   * When the previous score was set.
+   */
+  timestamp: Date;
 };

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

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

projects/common/src/player/player.ts

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

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

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

projects/common/src/timeframe.ts

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

projects/website/Dockerfile

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

projects/website/next.config.ts

@@ -1,6 +1,8 @@
 import { withSentryConfig } from "@sentry/nextjs";
 import { format } from "@formkit/tempo";
+import nextBundleAnalyzer from "@next/bundle-analyzer";
 import type { NextConfig } from "next";
+import { isProduction } from "@/common/website-utils";
 
 const nextConfig: NextConfig = {
   experimental: {
@@ -36,22 +38,21 @@ const nextConfig: NextConfig = {
   },
 };
 
-export default withSentryConfig(nextConfig, {
-  org: "scoresaber-reloaded",
-  project: "frontend",
-  sentryUrl: "https://glitchtip.fascinated.cc/",
-  silent: !process.env.CI,
-  reactComponentAnnotation: {
-    enabled: true,
-  },
-  tunnelRoute: "/monitoring",
-  hideSourceMaps: true,
-  disableLogger: true,
-  sourcemaps: {
-    disable: true,
-  },
-  release: {
-    create: false,
-    finalize: false,
-  },
+const withBundleAnalyzer = nextBundleAnalyzer({
+  enabled: process.env.ANALYZE === "true",
 });
+
+const config = withBundleAnalyzer(nextConfig);
+export default isProduction()
+  ? withSentryConfig(config, {
+      org: "fascinatedcc",
+      project: "scoresaber-reloaded",
+      silent: !process.env.CI,
+      widenClientFileUpload: true,
+      reactComponentAnnotation: {
+        enabled: true,
+      },
+      hideSourceMaps: true,
+      disableLogger: true,
+    })
+  : config;

projects/website/package.json

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

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

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

projects/website/sentry.client.config.ts

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

projects/website/sentry.edge.config.ts

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

projects/website/sentry.server.config.ts

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

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

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

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

@@ -12,13 +12,15 @@ export const metadata: Metadata = {
 
 export default function ScoresPage() {
   return (
-    <Card className="flex flex-col gap-2 w-full xl:w-[75%]">
-      <div>
-        <p className="font-semibold'">Live Score Feed</p>
-        <p className="text-gray-400">This is the real-time scores being set on ScoreSaber.</p>
-      </div>
+    <main className="w-full min-h-screen flex justify-center">
+      <Card className="flex flex-col gap-2 w-full h-fit xl:w-[75%]">
+        <div>
+          <p className="font-semibold'">Live Score Feed</p>
+          <p className="text-gray-400">This is the real-time scores being set on ScoreSaber.</p>
+        </div>
 
-      <ScoreFeed />
-    </Card>
+        <ScoreFeed />
+      </Card>
+    </main>
   );
 }

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

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

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

@@ -1,59 +0,0 @@
-import { Metadata } from "next";
-import Card from "@/components/card";
-import { kyFetch } from "@ssr/common/utils/utils";
-import { Config } from "@ssr/common/config";
-import { TopScoresResponse } from "@ssr/common/response/top-scores-response";
-import Score from "@/components/score/score";
-import Link from "next/link";
-
-export const metadata: Metadata = {
-  title: "Top Scores",
-  openGraph: {
-    title: "ScoreSaber Reloaded - Top Scores",
-    description: "View the top 100 scores set by players on ScoreSaber.",
-  },
-};
-
-export default async function TopScoresPage() {
-  const scores = await kyFetch<TopScoresResponse>(`${Config.apiUrl}/scores/top`);
-
-  return (
-    <Card className="flex flex-col gap-2 w-full xl:w-[75%]">
-      <div>
-        <p className="font-semibold'">Top 100 ScoreSaber Scores</p>
-        <p className="text-gray-400">This will only show scores that have been tracked.</p>
-      </div>
-
-      {!scores ? (
-        <p>No scores found</p>
-      ) : (
-        <div className="flex flex-col gap-2 divide-y divide-border">
-          {scores.scores.map(({ score, leaderboard, beatSaver }, index) => {
-            const player = score.playerInfo;
-            const name = score.playerInfo ? player.name || player.id : score.playerId;
-
-            return (
-              <div key={index} className="flex flex-col pt-2">
-                <p className="text-sm">
-                  Set by{" "}
-                  <Link href={`/player/${player.id}`}>
-                    <span className="text-ssr hover:brightness-[66%] transition-all transform-gpu">{name}</span>
-                  </Link>
-                </p>
-                <Score
-                  score={score}
-                  leaderboard={leaderboard}
-                  beatSaverMap={beatSaver}
-                  settings={{
-                    hideLeaderboardDropdown: true,
-                    hideAccuracyChanger: true,
-                  }}
-                />
-              </div>
-            );
-          })}
-        </div>
-      )}
-    </Card>
-  );
-}

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

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

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

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

projects/website/src/app/layout.tsx

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

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

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

projects/website/src/common/utils.ts

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

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

@@ -6,6 +6,7 @@ import { useQuery } from "@tanstack/react-query";
 import { kyFetch } from "@ssr/common/utils/utils";
 import { Config } from "@ssr/common/config";
 import { useEffect, useState } from "react";
+import { User } from "lucide-react";
 
 type AppStatisticsProps = {
   /**
@@ -29,13 +30,24 @@ export function AppStats({ initialStatistics }: AppStatisticsProps) {
   }, [data]);
 
   return (
-    <div className="flex items-center flex-col">
-      <p className="font-semibold">Site Statistics</p>
-      <Statistic title="Tracked Players" value={statistics.trackedPlayers} />
-      <Statistic title="Tracked Scores" value={statistics.trackedScores} />
-      <Statistic title="Additional Scores Data" value={statistics.additionalScoresData} />
-      <Statistic title="Cached BeatSaver Maps" value={statistics.cachedBeatSaverMaps} />
-      <Statistic title="Cached ScoreSaber Leaderboards" value={statistics.cachedScoreSaberLeaderboards} />
+    <div className="grid grid-cols-2 gap-5 sm:grid-cols-3 sm:gap-7 md:grid-cols-4 md:gap-12 lg:grid-cols-5">
+      <Statistic icon={<User className="size-10" />} title="Tracked Players" value={statistics.trackedPlayers} />
+      <Statistic icon={<User className="size-10" />} title="Tracked Scores" value={statistics.trackedScores} />
+      <Statistic
+        icon={<User className="size-10" />}
+        title="Additional Scores Data"
+        value={statistics.additionalScoresData}
+      />
+      <Statistic
+        icon={<User className="size-10" />}
+        title="Cached BeatSaver Maps"
+        value={statistics.cachedBeatSaverMaps}
+      />
+      <Statistic
+        icon={<User className="size-10" />}
+        title="Cached ScoreSaber Leaderboards"
+        value={statistics.cachedScoreSaberLeaderboards}
+      />
     </div>
   );
 }

projects/website/src/components/footer.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -56,6 +56,7 @@ export default function PlayerScoreAccuracyChart({ scoreStats, leaderboard }: Pr
       axisConfig: {
         reverse: false,
         display: true,
+        hideOnMobile: true,
         displayName: "PP",
         position: "right",
       },

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

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

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

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

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

@@ -6,7 +6,6 @@ import NavbarButton from "./navbar-button";
 import ProfileButton from "./profile-button";
 import { TrendingUpIcon } from "lucide-react";
 import FriendsButton from "@/components/navbar/friends-button";
-import { PiSwordFill } from "react-icons/pi";
 
 type NavbarItem = {
   name: string;

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

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

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

@@ -21,7 +21,7 @@ export function HandAccuracyBadge({ score, hand }: HandAccuracyProps) {
   const formattedHand = capitalizeFirstLetter(hand);
 
   return (
-    <div className="flex flex-col items-center justify-center">
+    <div className="flex gap-1 items-center justify-center">
       <Tooltip
         display={
           <>

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

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

projects/website/src/components/score/button/beat-saver-map-button.tsx

@@ -0,0 +1,21 @@
+import BeatSaverLogo from "@/components/logos/beatsaver-logo";
+import ScoreButton from "@/components/score/button/score-button";
+import * as React from "react";
+import { BeatSaverMap } from "@ssr/common/model/beatsaver/map";
+
+type BeatSaverMapProps = {
+  beatSaverMap: BeatSaverMap;
+};
+
+export function BeatSaverMapButton({ beatSaverMap }: BeatSaverMapProps) {
+  return (
+    <ScoreButton
+      onClick={() => {
+        window.open(`https://beatsaver.com/maps/${beatSaverMap.bsr}`, "_blank");
+      }}
+      tooltip={<p>Click to open the map</p>}
+    >
+      <BeatSaverLogo />
+    </ScoreButton>
+  );
+}

projects/website/src/components/score/button/score-bsr-button.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { copyToClipboard } from "@/common/browser-utils";
+import ScoreButton from "@/components/score/button/score-button";
+import { BeatSaverMap } from "@ssr/common/model/beatsaver/map";
+import * as React from "react";
+import { toast } from "@/hooks/use-toast";
+
+type ScoreBsrButtonProps = {
+  beatSaverMap: BeatSaverMap;
+};
+
+export function ScoreBsrButton({ beatSaverMap }: ScoreBsrButtonProps) {
+  return (
+    <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>
+  );
+}

projects/website/src/components/score/button/score-editor-button.tsx

@@ -6,8 +6,8 @@ import { Slider } from "@/components/ui/slider";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { ResetIcon } from "@radix-ui/react-icons";
 import Tooltip from "@/components/tooltip";
+import { ScoreSaberLeaderboard } from "@ssr/common/model/leaderboard/impl/scoresaber-leaderboard";
 import { ScoreSaberScore } from "@ssr/common/model/score/impl/scoresaber-score";
-import ScoreSaberLeaderboard from "@ssr/common/model/leaderboard/impl/scoresaber-leaderboard";
 
 type ScoreEditorButtonProps = {
   score: ScoreSaberScore;

projects/website/src/components/score/button/score-replay-button.tsx

@@ -0,0 +1,21 @@
+import BeatSaberPepeLogo from "@/components/logos/beatsaber-pepe-logo";
+import ScoreButton from "@/components/score/button/score-button";
+import * as React from "react";
+import { AdditionalScoreData } from "@ssr/common/model/additional-score-data/additional-score-data";
+
+type ScoreReplayButton = {
+  additionalData: AdditionalScoreData;
+};
+
+export function ScoreReplayButton({ additionalData }: ScoreReplayButton) {
+  return (
+    <ScoreButton
+      onClick={() => {
+        window.open(`https://replay.beatleader.xyz/?scoreId=${additionalData.scoreId}`, "_blank");
+      }}
+      tooltip={<p>Click to view the score replay!</p>}
+    >
+      <BeatSaberPepeLogo />
+    </ScoreButton>
+  );
+}

projects/website/src/components/score/button/song-open-in-youtube-button.tsx

@@ -0,0 +1,25 @@
+import { songNameToYouTubeLink } from "@/common/youtube-utils";
+import YouTubeLogo from "@/components/logos/youtube-logo";
+import ScoreButton from "@/components/score/button/score-button";
+import { ScoreSaberLeaderboard } from "@ssr/common/model/leaderboard/impl/scoresaber-leaderboard";
+import * as React from "react";
+
+type SongOpenInYoutubeButtonProps = {
+  leaderboard: ScoreSaberLeaderboard;
+};
+
+export function SongOpenInYoutubeButton({ leaderboard }: SongOpenInYoutubeButtonProps) {
+  return (
+    <ScoreButton
+      onClick={() => {
+        window.open(
+          songNameToYouTubeLink(leaderboard.songName, leaderboard.songSubName, leaderboard.songAuthorName),
+          "_blank"
+        );
+      }}
+      tooltip={<p>Click to open the song in YouTube</p>}
+    >
+      <YouTubeLogo />
+    </ScoreButton>
+  );
+}

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

@@ -1,6 +1,6 @@
-import StatValue from "@/components/stat-value";
 import { ScoreSaberScore } from "@ssr/common/model/score/impl/scoresaber-score";
 import ScoreSaberLeaderboard from "@ssr/common/model/leaderboard/impl/scoresaber-leaderboard";
+import clsx from "clsx";
 
 /**
  * A badge to display in the score stats.
@@ -27,6 +27,19 @@ export function ScoreBadges({ badges, score, leaderboard }: ScoreBadgeProps) {
     if (toRender === undefined) {
       return <div key={index} />;
     }
-    return <StatValue key={index} color={color} value={toRender} />;
+    return (
+      <div
+        key={index}
+        className={clsx(
+          "flex h-fit p-1 items-center justify-center rounded-md text-sm cursor-default",
+          color ? color : "bg-accent"
+        )}
+        style={{
+          backgroundColor: (!color?.includes("bg") && color) || undefined,
+        }}
+      >
+        {toRender}
+      </div>
+    );
   });
 }

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

@@ -1,20 +1,17 @@
 "use client";
 
-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 * as React from "react";
 import { useState } from "react";
-import ScoreButton from "./score-button";
-import { copyToClipboard } from "@/common/browser-utils";
 import { ArrowDownIcon, ArrowPathIcon } from "@heroicons/react/24/solid";
 import clsx from "clsx";
-import ScoreEditorButton from "@/components/score/score-editor-button";
+import ScoreEditorButton from "@/components/score/button/score-editor-button";
+import { ScoreBsrButton } from "@/components/score/button/score-bsr-button";
+import { BeatSaverMapButton } from "@/components/score/button/beat-saver-map-button";
+import { SongOpenInYoutubeButton } from "@/components/score/button/song-open-in-youtube-button";
 import { ScoreSaberScore } from "@ssr/common/model/score/impl/scoresaber-score";
-import ScoreSaberLeaderboard from "@ssr/common/model/leaderboard/impl/scoresaber-leaderboard";
+import { ScoreSaberLeaderboard } from "@ssr/common/model/leaderboard/impl/scoresaber-leaderboard";
 import { BeatSaverMap } from "@ssr/common/model/beatsaver/map";
-import BeatSaberPepeLogo from "@/components/logos/beatsaber-pepe-logo";
+import { ScoreReplayButton } from "@/components/score/button/score-replay-button";
 
 type Props = {
   score?: ScoreSaberScore;
@@ -33,78 +30,39 @@ export default function ScoreButtons({
   leaderboard,
   beatSaverMap,
   alwaysSingleLine,
+  setIsLeaderboardExpanded,
+  isLeaderboardLoading,
+  updateScore,
   hideLeaderboardDropdown,
   hideAccuracyChanger,
-  isLeaderboardLoading,
-  setIsLeaderboardExpanded,
-  updateScore,
 }: Props) {
   const [leaderboardExpanded, setLeaderboardExpanded] = useState(false);
-  const { toast } = useToast();
 
   const additionalData = score?.additionalData;
   return (
-    <div className={`flex justify-end gap-2 items-center`}>
-      <div
-        className={`flex ${alwaysSingleLine ? "flex-nowrap" : "flex-wrap"} items-center lg:items-start justify-center lg:justify-end gap-1`}
-      >
+    <div className={`flex justify-end gap-2 items-center mr-1`}>
+      <div className={`flex lg:grid grid-cols-3 gap-1 items-center justify-center min-w-[92px]`}>
         {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>
+            <ScoreBsrButton beatSaverMap={beatSaverMap} />
+            <BeatSaverMapButton beatSaverMap={beatSaverMap} />
           </>
         )}
 
-        {/* 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>
+        <SongOpenInYoutubeButton leaderboard={leaderboard} />
+
+        <div className="hidden lg:block" />
+        <div className="hidden lg:block" />
 
         {additionalData != undefined && (
           <>
-            {/* Open score replay */}
-            <ScoreButton
-              onClick={() => {
-                window.open(`https://replay.beatleader.xyz/?scoreId=${additionalData.scoreId}`, "_blank");
-              }}
-              tooltip={<p>Click to view the score replay!</p>}
-            >
-              <BeatSaberPepeLogo />
-            </ScoreButton>
+            <ScoreReplayButton additionalData={additionalData} />
           </>
         )}
       </div>
+
       <div
-        className={`flex gap-2 ${alwaysSingleLine ? "flex-row" : "flex-row lg:flex-col"} items-center justify-center`}
+        className={`flex gap-2 ${alwaysSingleLine ? "flex-row" : "flex-row lg:flex-col"} items-center justify-center pr-1`}
       >
         {/* Edit score button */}
         {score && leaderboard && updateScore && !hideAccuracyChanger && (

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

@@ -8,6 +8,7 @@ import useWebSocket, { ReadyState } from "react-use-websocket";
 import { ScoreSaberWebsocketMessageToken } from "@ssr/common/types/token/scoresaber/websocket/scoresaber-websocket-message";
 import Score from "@/components/score/score";
 import { getScoreSaberLeaderboardFromToken, getScoreSaberScoreFromToken } from "@ssr/common/token-creators";
+import { Avatar, AvatarImage } from "@/components/ui/avatar";
 
 export default function ScoreFeed() {
   const { readyState, lastJsonMessage } = useWebSocket<ScoreSaberWebsocketMessageToken>("wss://scoresaber.com/ws");
@@ -51,12 +52,15 @@ export default function ScoreFeed() {
 
         return (
           <div key={score.scoreId} className="flex flex-col py-2">
-            <p className="text-sm">
-              Set by{" "}
+            <div className="flex flex-row gap-2 items-center">
+              <Avatar className="w-6 h-6">
+                <AvatarImage src={player.profilePicture} />
+              </Avatar>
               <Link href={`/player/${player.id}`}>
                 <span className="text-ssr hover:brightness-[66%] transition-all transform-gpu">{player.name}</span>
               </Link>
-            </p>
+              <p className="text-gray-400 text-xs"> on {scoreToken.score.deviceHmd || "Unknown Device"}</p>
+            </div>
             <Score
               score={score}
               leaderboard={leaderboard}

projects/website/src/components/score/score-rank-and-date-info.tsx

@@ -5,13 +5,14 @@ import { getPageFromRank } from "@ssr/common/utils/utils";
 import { ScoreSaberScore } from "@ssr/common/model/score/impl/scoresaber-score";
 import ScoreSaberLeaderboard from "@ssr/common/model/leaderboard/impl/scoresaber-leaderboard";
 import { ScoreTimeSet } from "@/components/score/score-time-set";
+import { ScoreTimeSetVs } from "@/components/score/score-time-set-vs";
 
 type Props = {
   score: ScoreSaberScore;
   leaderboard: ScoreSaberLeaderboard;
 };
 
-export default function ScoreRankInfo({ score, leaderboard }: Props) {
+export default function ScoreRankAndDateInfo({ score, leaderboard }: 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">
@@ -22,7 +23,10 @@ export default function ScoreRankInfo({ score, leaderboard }: Props) {
           </p>
         </Link>
       </div>
-      <ScoreTimeSet score={score} />
+      <div className="flex items-center gap-2 lg:flex-col lg:gap-0">
+        <ScoreTimeSet score={score} />
+        <ScoreTimeSetVs score={score} />
+      </div>
     </div>
   );
 }

projects/website/src/components/score/score-song-info.tsx

@@ -56,18 +56,20 @@ export default function ScoreSongInfo({ leaderboard, beatSaverMap }: Props) {
         />
       </div>
       <div className="flex">
-        <div className="overflow-y-clip">
+        <div className="overflow-y-clip flex flex-col gap-1">
           <Link
             href={`/leaderboard/${leaderboard.id}`}
             className="cursor-pointer select-none hover:brightness-[66%] transform-gpu transition-all text-ssr w-fit"
           >
             {leaderboard.songName} {leaderboard.songSubName}
           </Link>
-          <div className="flex flex-col text-sm">
+          <div className="flex flex-row text-sm gap-1.5 items-end leading-none">
             <p className="text-gray-400">{leaderboard.songAuthorName}</p>
             <FallbackLink
               href={mappersProfile}
-              className={mappersProfile && "hover:brightness-[66%] transform-gpu transition-all w-fit"}
+              className={
+                mappersProfile && "hover:brightness-[66%] transform-gpu transition-all w-fit text-xs leading-none"
+              }
             >
               {leaderboard.levelAuthorName}
             </FallbackLink>

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

@@ -72,8 +72,10 @@ type Props = {
 
 export default function ScoreStats({ score, leaderboard }: Props) {
   return (
-    <div className={`grid grid-cols-3 grid-rows-2 gap-1 ml-0 lg:ml-2 `}>
-      <ScoreBadges badges={badges} score={score} leaderboard={leaderboard} />
+    <div className="flex flex-col justify-center h-full">
+      <div className={`grid grid-cols-3 gap-1 justify-center`}>
+        <ScoreBadges badges={badges} score={score} leaderboard={leaderboard} />
+      </div>
     </div>
   );
 }

projects/website/src/components/score/score-time-set-vs.tsx

@@ -0,0 +1,37 @@
+import { format } from "@formkit/tempo";
+import { timeAgo } from "@ssr/common/utils/time-utils";
+import Tooltip from "@/components/tooltip";
+import { ScoreSaberScore } from "@ssr/common/model/score/impl/scoresaber-score";
+
+type ScoreTimeSetProps = {
+  /**
+   * The score that was set.
+   */
+  score: ScoreSaberScore;
+};
+
+export function ScoreTimeSetVs({ score }: ScoreTimeSetProps) {
+  if (!score.previousScore) {
+    return undefined;
+  }
+
+  return (
+    <Tooltip
+      display={
+        <p>
+          {format({
+            date: new Date(score.previousScore.timestamp),
+            format: "DD MMMM YYYY HH:mm a",
+          })}
+        </p>
+      }
+    >
+      <div>
+        <div className="text-xs text-gray-400 flex flex-row gap-2 items-center">
+          <p>vs</p>
+          <p>{timeAgo(new Date(score.previousScore.timestamp))}</p>
+        </div>
+      </div>
+    </Tooltip>
+  );
+}

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

@@ -7,7 +7,7 @@ import { CubeIcon } from "@heroicons/react/24/solid";
 import { TrendingUpIcon } from "lucide-react";
 import ScoreButtons from "./score-buttons";
 import ScoreSongInfo from "./score-song-info";
-import ScoreRankInfo from "./score-rank-info";
+import ScoreRankAndDateInfo from "./score-rank-and-date-info";
 import ScoreStats from "./score-stats";
 import Card from "@/components/card";
 import { MapStats } from "@/components/score/map-stats";
@@ -120,13 +120,13 @@ export default function Score({ leaderboard, beatSaverMap, score, settings, high
   };
 
   const gridColsClass = settings?.noScoreButtons
-    ? "grid-cols-[20px 1fr_1fr] lg:grid-cols-[0.5fr_4fr_300px]" // Fewer columns if no buttons
-    : "grid-cols-[20px 1fr_1fr] lg:grid-cols-[0.5fr_4fr_1fr_300px]"; // Original with buttons
+    ? "grid-cols-[20px 1fr_1fr] lg:grid-cols-[0.5fr_4fr_350px]" // Fewer columns if no buttons
+    : "grid-cols-[20px 1fr_1fr] lg:grid-cols-[0.5fr_4fr_1fr_350px]"; // Original with buttons
 
   return (
     <div className="pb-2 pt-2">
       <div className={`grid w-full gap-2 lg:gap-0 ${gridColsClass}`}>
-        <ScoreRankInfo score={score} leaderboard={leaderboard} />
+        <ScoreRankAndDateInfo score={score} leaderboard={leaderboard} />
         <ScoreSongInfo leaderboard={leaderboard} beatSaverMap={beatSaverMap} />
         {!settings?.noScoreButtons && (
           <ScoreButtons

projects/website/src/components/score/top/top-scores-data.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import Card from "@/components/card";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import Score from "@/components/score/score";
+import { useEffect, useState } from "react";
+import { Timeframe } from "@ssr/common/timeframe";
+import { TopScoresResponse } from "@ssr/common/response/top-scores-response";
+import { Config } from "@ssr/common/config";
+import { kyFetch } from "@ssr/common/utils/utils";
+import { useQuery } from "@tanstack/react-query";
+import { LoadingIcon } from "@/components/loading-icon";
+import { capitalizeFirstLetter } from "@/common/string-utils";
+
+type TimeframesType = {
+  timeframe: Timeframe;
+  display: string;
+};
+const timeframes: TimeframesType[] = [
+  {
+    timeframe: "daily",
+    display: "Today",
+  },
+  {
+    timeframe: "weekly",
+    display: "This Week",
+  },
+  {
+    timeframe: "monthly",
+    display: "This Month",
+  },
+];
+
+type TopScoresDataProps = {
+  timeframe: Timeframe;
+};
+
+export function TopScoresData({ timeframe }: TopScoresDataProps) {
+  const [selectedTimeframe, setSelectedTimeframe] = useState<Timeframe>(timeframe);
+  const [scores, setScores] = useState<TopScoresResponse | null>(null);
+
+  const { data, isLoading } = useQuery({
+    queryKey: ["top-scores", selectedTimeframe],
+    queryFn: async () => {
+      return kyFetch<TopScoresResponse>(`${Config.apiUrl}/scores/top?limit=50&timeframe=${selectedTimeframe}`);
+    },
+  });
+
+  useEffect(() => {
+    // Update the URL
+    window.history.replaceState(null, "", `/scores/top/${selectedTimeframe}`);
+  }, [selectedTimeframe]);
+
+  useEffect(() => {
+    if (data) {
+      setScores(data);
+    }
+  }, [data]);
+
+  return (
+    <Card className="flex flex-col gap-2 w-full xl:w-[75%] justify-center">
+      <div className="flex flex-row flex-wrap gap-2 justify-center">
+        {timeframes.map((timeframe, index) => {
+          return (
+            <Button
+              key={index}
+              className="w-32"
+              variant={selectedTimeframe === timeframe.timeframe ? "default" : "outline"}
+              onClick={() => {
+                setScores(null);
+                setSelectedTimeframe(timeframe.timeframe);
+              }}
+            >
+              {timeframe.display}
+            </Button>
+          );
+        })}
+      </div>
+
+      <div className="flex justify-center flex-col text-center">
+        <p className="font-semibold'">Top 50 ScoreSaber Scores ({capitalizeFirstLetter(selectedTimeframe)})</p>
+        <p className="text-gray-400">This will only show scores that have been tracked.</p>
+      </div>
+
+      {(isLoading || !scores) && (
+        <div className="flex justify-center items-center">
+          <LoadingIcon />
+        </div>
+      )}
+      {scores && !isLoading && (
+        <div className="flex flex-col gap-2 divide-y divide-border">
+          {scores.scores.map(({ score, leaderboard, beatSaver }, index) => {
+            const player = score.playerInfo;
+            const name = score.playerInfo ? player.name || player.id : score.playerId;
+
+            return (
+              <div key={index} className="flex flex-col pt-2">
+                <p className="text-sm">
+                  Set by{" "}
+                  <Link href={`/player/${player.id}`}>
+                    <span className="text-ssr hover:brightness-[66%] transition-all transform-gpu">{name}</span>
+                  </Link>
+                </p>
+                <Score
+                  score={score}
+                  leaderboard={leaderboard}
+                  beatSaverMap={beatSaver}
+                  settings={{
+                    hideLeaderboardDropdown: true,
+                    hideAccuracyChanger: true,
+                  }}
+                />
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </Card>
+  );
+}

projects/website/src/components/stat-value.tsx

@@ -16,18 +16,24 @@ type Props = {
    */
   color?: string;
 
+  /**
+   * The additional classes for the stat.
+   */
+  className?: string;
+
   /**
    * The value of the stat.
    */
   value: React.ReactNode;
 };
 
-export default function StatValue({ name, icon, color, value }: Props) {
+export default function StatValue({ name, icon, color, className, value }: Props) {
   return (
     <div
       className={clsx(
         "flex min-w-16 gap-2 h-full p-1 items-center justify-center rounded-md text-sm cursor-default",
-        color ? color : "bg-accent"
+        color ? color : "bg-accent",
+        className
       )}
       style={{
         backgroundColor: (!color?.includes("bg") && color) || undefined,

projects/website/src/components/statistic/change-over-time.tsx

@@ -3,8 +3,8 @@ import { formatNumberWithCommas, formatPp } from "@ssr/common/utils/number-utils
 import { capitalizeFirstLetter } from "@/common/string-utils";
 import Tooltip from "@/components/tooltip";
 import { ReactElement } from "react";
-import { ChangeRange } from "@ssr/common/player/player";
 import { PlayerStatValue } from "@ssr/common/player/player-stat-change";
+import { StatisticRange } from "@ssr/common/player/player";
 
 type ChangeOverTimeProps = {
   /**
@@ -40,7 +40,7 @@ export function ChangeOverTime({ player, type, children }: ChangeOverTimeProps)
   };
 
   // Renders the change for a given time frame
-  const renderChange = (value: number | undefined, range: ChangeRange) => (
+  const renderChange = (value: number | undefined, range: StatisticRange) => (
     <p>
       {capitalizeFirstLetter(range)} Change:{" "}
       <span className={value === undefined ? "" : value >= 0 ? (value === 0 ? "" : "text-green-500") : "text-red-500"}>

projects/website/src/components/tooltip.tsx

@@ -2,7 +2,7 @@
 
 import { Tooltip as ShadCnTooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
 import { useState } from "react";
-import { cn } from "@/common/utils";
+import { clsx } from "clsx";
 
 type Props = {
   /**
@@ -36,16 +36,15 @@ export default function Tooltip({ children, display, asChild = true, side = "top
 
   return (
     <ShadCnTooltip open={open}>
-      <TooltipTrigger className={className} asChild={asChild}>
-        <div
-          className={cn("cursor-default", className)}
-          onMouseEnter={() => setOpen(true)}
-          onMouseLeave={() => setOpen(false)}
-          onTouchStart={() => setOpen(!open)}
-          onTouchEnd={() => setOpen(!open)}
-        >
-          {children}
-        </div>
+      <TooltipTrigger
+        className={clsx("cursor-default", className)}
+        asChild={asChild}
+        onMouseEnter={() => setOpen(true)}
+        onMouseLeave={() => setOpen(false)}
+        onTouchStart={() => setOpen(!open)}
+        onTouchEnd={() => setOpen(!open)}
+      >
+        {children}
       </TooltipTrigger>
       <TooltipContent className="max-w-[350px]" side={side}>
         {display}

projects/website/src/components/ui/animated-list.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import React, { ReactElement, useEffect, useMemo, useState } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+
+export interface AnimatedListProps {
+  className?: string;
+  children: React.ReactNode;
+  delay?: number;
+}
+
+export const AnimatedList = React.memo(
+  ({ className, children, delay = 1000 }: AnimatedListProps) => {
+    const [index, setIndex] = useState(0);
+    const childrenArray = React.Children.toArray(children);
+
+    useEffect(() => {
+      const interval = setInterval(() => {
+        setIndex((prevIndex) => (prevIndex + 1) % childrenArray.length);
+      }, delay);
+
+      return () => clearInterval(interval);
+    }, [childrenArray.length, delay]);
+
+    const itemsToShow = useMemo(
+      () => childrenArray.slice(0, index + 1).reverse(),
+      [index, childrenArray],
+    );
+
+    return (
+      <div className={`flex flex-col items-center gap-4 ${className}`}>
+        <AnimatePresence>
+          {itemsToShow.map((item) => (
+            <AnimatedListItem key={(item as ReactElement).key}>
+              {item}
+            </AnimatedListItem>
+          ))}
+        </AnimatePresence>
+      </div>
+    );
+  },
+);
+
+AnimatedList.displayName = "AnimatedList";
+
+export function AnimatedListItem({ children }: { children: React.ReactNode }) {
+  const animations = {
+    initial: { scale: 0, opacity: 0 },
+    animate: { scale: 1, opacity: 1, originY: 0 },
+    exit: { scale: 0, opacity: 0 },
+    transition: { type: "spring", stiffness: 350, damping: 40 },
+  };
+
+  return (
+    <motion.div {...animations} layout className="mx-auto w-full">
+      {children}
+    </motion.div>
+  );
+}

projects/website/src/components/ui/animated-shiny-text.tsx

@@ -0,0 +1,35 @@
+import { CSSProperties, FC, ReactNode } from "react";
+import { cn } from "@/common/utils";
+
+interface AnimatedShinyTextProps {
+  children: ReactNode;
+  className?: string;
+  shimmerWidth?: number;
+}
+
+const AnimatedShinyText: FC<AnimatedShinyTextProps> = ({ children, className, shimmerWidth = 100 }) => {
+  return (
+    <p
+      style={
+        {
+          "--shiny-width": `${shimmerWidth}px`,
+        } as CSSProperties
+      }
+      className={cn(
+        "mx-auto max-w-md text-neutral-600/70 dark:text-neutral-400/70",
+
+        // Shine effect
+        "animate-shiny-text bg-clip-text bg-no-repeat [background-position:0_0] [background-size:var(--shiny-width)_100%] [transition:background-position_1s_cubic-bezier(.6,.6,0,1)_infinite]",
+
+        // Shine gradient
+        "bg-gradient-to-r from-transparent via-black/80 via-50% to-transparent  dark:via-white/80",
+
+        className
+      )}
+    >
+      {children}
+    </p>
+  );
+};
+
+export default AnimatedShinyText;

projects/website/src/components/ui/border-beam.tsx

@@ -0,0 +1,49 @@
+import { cn } from "@/common/utils";
+
+interface BorderBeamProps {
+  className?: string;
+  size?: number;
+  duration?: number;
+  borderWidth?: number;
+  anchor?: number;
+  colorFrom?: string;
+  colorTo?: string;
+  delay?: number;
+}
+
+export const BorderBeam = ({
+  className,
+  size = 200,
+  duration = 15,
+  anchor = 90,
+  borderWidth = 1.5,
+  colorFrom = "#ffaa40",
+  colorTo = "#9c40ff",
+  delay = 0,
+}: BorderBeamProps) => {
+  return (
+    <div
+      style={
+        {
+          "--size": size,
+          "--duration": duration,
+          "--anchor": anchor,
+          "--border-width": borderWidth,
+          "--color-from": colorFrom,
+          "--color-to": colorTo,
+          "--delay": `-${delay}s`,
+        } as React.CSSProperties
+      }
+      className={cn(
+        "pointer-events-none absolute inset-0 rounded-[inherit] [border:calc(var(--border-width)*1px)_solid_transparent]",
+
+        // mask styles
+        "![mask-clip:padding-box,border-box] ![mask-composite:intersect] [mask:linear-gradient(transparent,transparent),linear-gradient(white,white)]",
+
+        // pseudo styles
+        "after:absolute after:aspect-square after:w-[calc(var(--size)*1px)] after:animate-border-beam after:[animation-delay:var(--delay)] after:[background:linear-gradient(to_left,var(--color-from),var(--color-to),transparent)] after:[offset-anchor:calc(var(--anchor)*1%)_50%] after:[offset-path:rect(0_auto_auto_0_round_calc(var(--size)*1px))]",
+        className
+      )}
+    />
+  );
+};

projects/website/src/components/ui/separator.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { cn } from "@/common/utils";
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
+  <SeparatorPrimitive.Root
+    ref={ref}
+    decorative={decorative}
+    orientation={orientation}
+    className={cn("shrink-0 bg-border", orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", className)}
+    {...props}
+  />
+));
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };

projects/website/src/hooks/use-is-mobile.ts

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 
 export function useIsMobile() {
   const checkMobile = () => {
-    return window.innerWidth < 768;
+    return window.innerWidth <= 1024;
   };
   const [isMobile, setIsMobile] = useState(checkMobile());
 

projects/website/tailwind.config.ts

@@ -1,5 +1,8 @@
 import type { Config } from "tailwindcss";
 
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+const defaultTheme = require("tailwindcss/defaultTheme");
+
 const config: Config = {
   darkMode: ["class"],
   content: [
@@ -8,6 +11,10 @@ const config: Config = {
     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
+    screens: {
+      xs: "475px",
+      ...defaultTheme.screens,
+    },
     extend: {
       colors: {
         pp: "#4858ff",
@@ -64,6 +71,25 @@ const config: Config = {
         md: "calc(var(--radius) - 2px)",
         sm: "calc(var(--radius) - 4px)",
       },
+      animation: {
+        "shiny-text": "shiny-text 8s infinite",
+        "border-beam": "border-beam calc(var(--duration)*1s) infinite linear",
+      },
+      keyframes: {
+        "shiny-text": {
+          "0%, 90%, 100%": {
+            "background-position": "calc(-100% - var(--shiny-width)) 0",
+          },
+          "30%, 60%": {
+            "background-position": "calc(100% + var(--shiny-width)) 0",
+          },
+        },
+        "border-beam": {
+          "100%": {
+            "offset-distance": "100%",
+          },
+        },
+      },
     },
   },
   plugins: [require("tailwindcss-animate")],