chore(deps): update dependency autoprefixer to v10.4.18

Reviewed-on: #42

.env-example

@@ -1 +1,4 @@
-SENTRY_AUTH_TOKEN=hi
+INFISICAL_TOKEN=hi
+
+# Redis
+REDIS_URL=redis://localhost:6379/0

.eslintrc.js

@@ -0,0 +1,5 @@
+const path = require("path");
+
+module.exports = {
+  extends: ["next/core-web-vitals"],
+};

.eslintrc.json

@@ -1,3 +0,0 @@
-{
-  "extends": "next/core-web-vitals"
-}

.gitignore

@@ -5,8 +5,9 @@
 /.pnp
 .pnp.js
 
-# yarn
+# lock files
 yarn.lock
+package-lock.json
 
 # testing
 /coverage
@@ -42,3 +43,8 @@ next-env.d.ts
 
 # Webpack bundle analyzer
 analyze
+
+# Sitemap
+public/sitemap*
+
+.env

.infisical.json

@@ -0,0 +1,5 @@
+{
+    "workspaceId": "6551ad1ded9edd83540488e0",
+    "defaultEnvironment": "",
+    "gitBranchToEnvironmentMapping": null
+}

Dockerfile

@@ -1,11 +1,11 @@
-FROM fascinated/docker-images:node-latest AS base
+FROM fascinated/docker-images:node-pnpm-latest AS base
 
 # Install depends
 FROM base AS deps
 RUN apk add --no-cache libc6-compat
 WORKDIR /app
-COPY package.json* package-lock.yaml* ./
+COPY package.json* pnpm-lock.yaml* ./
-RUN npm install --frozen-lockfile --quiet
+RUN pnpm install --frozen-lockfile --quiet
 
 # Build from source
 FROM base AS builder
@@ -17,7 +17,14 @@ ENV NEXT_TELEMETRY_DISABLED 1
 ARG GIT_REV
 ENV GIT_REV ${GIT_REV}
 
-RUN npm run build
+# ARG REDIS_URL
+ENV REDIS_URL redis://:bigtitsyes7@10.0.0.203:30004
+
+# Build the app
+RUN pnpm run build
+
+# Generate sitemap
+RUN pnpm run generate-sitemap
 
 # Run the app
 FROM base AS runner
@@ -42,4 +49,4 @@ USER nextjs
 EXPOSE 80
 ENV HOSTNAME "0.0.0.0"
 ENV PORT 80
-CMD ["npm", "run", "start"]
+CMD ["pnpm", "start"]

next-sitemap.config.js

@@ -0,0 +1,74 @@
+const ssrSettings = require("./src/ssrSettings");
+const { getCodeList } = require("country-list");
+
+const SS_API_URL = ssrSettings.proxy + "/https://scoresaber.com/api";
+const SS_GET_PLAYERS_URL = SS_API_URL + "/players?page={}";
+
+// todo: cache this on a file somehow?
+async function getTopPlayers() {
+  console.log("Fetching top players...");
+  const players = [];
+  const pagesToFetch = 10;
+  for (let i = 0; i < pagesToFetch; i++) {
+    console.log(`Fetching page ${i + 1} of ${pagesToFetch}...`);
+    try {
+      const response = await fetch(SS_GET_PLAYERS_URL.replace("{}", i));
+      const data = await response.json();
+      players.push(...data.players);
+    } catch (e) {
+      console.log(`Error fetching page ${i + 1} of ${pagesToFetch}: ${e}`);
+    }
+  }
+  console.log("Done fetching top players.");
+  return players;
+}
+
+const additionalData = {
+  priority: 0.5,
+  changefreq: "monthly",
+  lastmod: new Date().toISOString(),
+};
+
+/** @type {import('next-sitemap').IConfig} */
+module.exports = {
+  siteUrl: ssrSettings.siteUrl,
+  generateRobotsTxt: true,
+  additionalPaths: async (config) => {
+    const paths = [];
+    // Add the top 50 global ranking pages
+    for (let i = 0; i < 50; i++) {
+      paths.push({
+        loc: `/ranking/global/${i + 1}`,
+        ...additionalData,
+      });
+    }
+
+    // Add the top 50 pages for all countries
+    const countries = Object.keys(getCodeList());
+    for (const country of countries) {
+      for (let i = 0; i < 50; i++) {
+        paths.push({
+          loc: `/ranking/country/${country}/${i + 1}`,
+          ...additionalData,
+        });
+      }
+    }
+
+    const sortTypes = ["top", "recent"];
+
+    // Add top players
+    const players = await getTopPlayers();
+    for (const sortType of sortTypes) {
+      for (const player of players) {
+        for (let i = 0; i < 5; i++) {
+          paths.push({
+            loc: `/player/${player.id}/${sortType}/${i + 1}`,
+            ...additionalData,
+          });
+        }
+      }
+    }
+
+    return paths;
+  },
+};

next.config.js

@@ -1,12 +1,45 @@
 const nextBuildId = require("next-build-id");
-const withBundleAnalyzer = require("@next/bundle-analyzer")({
+const withBundleAnalyzer = require("@next/bundle-analyzer")({ enabled: false });
-  enabled: false,
+
-});
+// Define remote patterns for images
+const remotePatterns = [
+  { protocol: "https", hostname: "cdn.fascinated.cc", pathname: "/**" },
+  { protocol: "https", hostname: "cdn.scoresaber.com", pathname: "/**" },
+  { protocol: "https", hostname: "cdn.jsdelivr.net", pathname: "/**" },
+  { protocol: "https", hostname: "eu.cdn.beatsaver.com", pathname: "/**" },
+  { protocol: "https", hostname: "na.cdn.beatsaver.com", pathname: "/**" },
+  {
+    protocol: "https",
+    hostname: "avatars.akamai.steamstatic.com",
+    pathname: "/**",
+  },
+];
+
+// Define optimized package imports
+const optimizePackageImports = [
+  "react",
+  "react-dom",
+  "next-themes",
+  "react-tostify",
+  "websocket",
+  "cslx",
+  "chart.js",
+  "react-chartjs-2",
+  "country-list",
+  "@sentry/nextjs",
+];
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   generateEtags: true,
+  reactStrictMode: true,
+  swcMinify: true,
   compress: true,
+  poweredByHeader: false,
+  experimental: {
+    webpackBuildWorker: true,
+    optimizePackageImports,
+  },
   env: {
     NEXT_PUBLIC_BUILD_ID:
       process.env.GIT_REV || nextBuildId.sync({ dir: __dirname }),
@@ -18,84 +51,7 @@ const nextConfig = {
       minute: "numeric",
     }),
   },
-  images: {
+  images: { remotePatterns },
-    remotePatterns: [
-      {
-        protocol: "https",
-        hostname: "cdn.fascinated.cc",
-        port: "",
-        pathname: "/**",
-      },
-      {
-        protocol: "https",
-        hostname: "cdn.scoresaber.com",
-        port: "",
-        pathname: "/**",
-      },
-      {
-        protocol: "https",
-        hostname: "cdn.jsdelivr.net",
-        port: "",
-        pathname: "/**",
-      },
-      {
-        protocol: "https",
-        hostname: "eu.cdn.beatsaver.com",
-        port: "",
-        pathname: "/**",
-      },
-      {
-        protocol: "https",
-        hostname: "na.cdn.beatsaver.com",
-        port: "",
-        pathname: "/**",
-      },
-      {
-        protocol: "https",
-        hostname: "avatars.akamai.steamstatic.com",
-        port: "",
-        pathname: "/**",
-      },
-    ],
-  },
 };
 
 module.exports = withBundleAnalyzer(nextConfig);
-
-// // Injected content via Sentry wizard below
-
-const { withSentryConfig } = require("@sentry/nextjs");
-const { format } = require("path");
-
-module.exports = withSentryConfig(
-  module.exports,
-  {
-    // For all available options, see:
-    // https://github.com/getsentry/sentry-webpack-plugin#options
-
-    // Suppresses source map uploading logs during build
-    silent: true,
-    org: "sentry",
-    project: "scoresaber-reloaded",
-    url: "https://sentry.fascinated.cc/",
-  },
-  {
-    // For all available options, see:
-    // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
-
-    // Upload a larger set of source maps for prettier stack traces (increases build time)
-    widenClientFileUpload: false,
-
-    // Transpiles SDK to be compatible with IE11 (increases bundle size)
-    transpileClientSDK: false,
-
-    // Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers (increases server load)
-    tunnelRoute: "/monitoring",
-
-    // Hides source maps from generated client bundles
-    hideSourceMaps: true,
-
-    // Automatically tree-shake Sentry logger statements to reduce bundle size
-    disableLogger: true,
-  },
-);

package.json

@@ -2,15 +2,17 @@
   "name": "scoresaber-reloadedv2",
   "version": "0.1.0",
   "private": true,
+  "sideEffects": false,
   "scripts": {
     "dev": "next dev",
     "build": "next build",
+    "generate-sitemap": "next-sitemap",
     "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
-    "@boiseitguru/cookie-cutter": "^0.2.1",
+    "@boiseitguru/cookie-cutter": "^0.2.3",
-    "@heroicons/react": "^2.0.18",
+    "@heroicons/react": "^2.1.1",
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-radio-group": "^1.1.3",
@@ -19,44 +21,45 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tooltip": "^1.0.7",
-    "@sentry/nextjs": "^7.74.1",
+    "chart.js": "^4.4.1",
-    "bluebird": "^3.7.2",
-    "chart.js": "^4.4.0",
     "class-variance-authority": "^0.7.0",
-    "clsx": "^2.0.0",
+    "clsx": "^2.1.0",
-    "date-fns": "^2.30.0",
+    "country-list": "^2.3.0",
+    "critters": "^0.0.20",
+    "date-fns": "^3.0.0",
     "encoding": "^0.1.13",
     "idb-keyval": "^6.2.1",
-    "lucide-react": "^0.292.0",
+    "infisical-node": "^1.5.1",
-    "next": "14.0.1",
+    "lucide-react": "^0.320.0",
+    "next": "^14.1.0",
     "next-build-id": "^3.0.0",
+    "next-sitemap": "^4.2.3",
     "next-themes": "^0.2.1",
-    "node-fetch-cache": "^3.1.3",
+    "react": "^18.2.0",
-    "react": "^18",
     "react-chartjs-2": "^5.2.0",
-    "react-dom": "^18",
+    "react-dom": "^18.2.0",
-    "react-toastify": "^9.1.3",
+    "react-toastify": "^10.0.4",
-    "sharp": "^0.32.6",
+    "redis": "^4.6.12",
-    "tailwind-merge": "^2.0.0",
+    "sharp": "^0.33.0",
+    "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7",
     "websocket": "^1.0.34",
-    "zustand": "^4.4.3"
+    "zustand": "^4.5.0"
   },
   "devDependencies": {
-    "@next/bundle-analyzer": "^14.0.0",
+    "@next/bundle-analyzer": "^14.1.0",
-    "@types/node": "^20",
+    "@types/node": "^20.11.14",
-    "@types/node-fetch-cache": "^3.0.3",
+    "@types/react": "^18.2.48",
-    "@types/react": "^18",
+    "@types/react-dom": "^18.2.18",
-    "@types/react-dom": "^18",
+    "@types/websocket": "^1.0.10",
-    "@types/websocket": "^1.0.8",
+    "autoprefixer": "^10.4.17",
-    "autoprefixer": "^10.4.16",
     "cross-env": "^7.0.3",
-    "eslint": "^8",
+    "eslint": "^8.56.0",
-    "eslint-config-next": "14.0.1",
+    "eslint-config-next": "14.1.0",
-    "postcss": "^8.4.31",
+    "postcss": "^8.4.33",
-    "prettier": "^3.0.3",
+    "prettier": "^3.2.4",
-    "prettier-plugin-tailwindcss": "^0.5.6",
+    "prettier-plugin-tailwindcss": "^0.5.11",
-    "tailwindcss": "^3.3.3",
+    "tailwindcss": "^3.4.1",
-    "typescript": "^5"
+    "typescript": "^5.3.3"
   }
 }

public/BingSiteAuth.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<users>
+	<user>8100264FFBFADD8CD0134169A492D34B</user>
+</users>

public/robots.txt

@@ -1,2 +1,9 @@
+# *
 User-agent: *
 Allow: /
+
+# Host
+Host: https://ssr.fascinated.cc
+
+# Sitemaps
+Sitemap: https://ssr.fascinated.cc/sitemap.xml

sentry.client.config.ts

@@ -1,15 +0,0 @@
-// This file configures the initialization of Sentry on the client.
-// The config you add here will be used whenever a users loads a page in their browser.
-// https://docs.sentry.io/platforms/javascript/guides/nextjs/
-
-import * as Sentry from "@sentry/nextjs";
-
-Sentry.init({
-  dsn: "https://1922e9d5b729f1568ad1e9537a118056@sentry.fascinated.cc/2",
-
-  // 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,
-});

sentry.edge.config.ts

@@ -1,16 +0,0 @@
-// This file configures the initialization of Sentry for edge features (middleware, edge routes, and so on).
-// The config you add here will be used whenever one of the edge features is loaded.
-// Note that this config is unrelated to the Vercel Edge Runtime and is also required when running locally.
-// https://docs.sentry.io/platforms/javascript/guides/nextjs/
-
-import * as Sentry from "@sentry/nextjs";
-
-Sentry.init({
-  dsn: "https://1922e9d5b729f1568ad1e9537a118056@sentry.fascinated.cc/2",
-
-  // 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,
-});

sentry.server.config.ts

@@ -1,15 +0,0 @@
-// This file configures the initialization of Sentry on the server.
-// The config you add here will be used whenever the server handles a request.
-// https://docs.sentry.io/platforms/javascript/guides/nextjs/
-
-import * as Sentry from "@sentry/nextjs";
-
-Sentry.init({
-  dsn: "https://1922e9d5b729f1568ad1e9537a118056@sentry.fascinated.cc/2",
-
-  // 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,
-});

src/app/analytics/page.tsx

@@ -1,87 +0,0 @@
-import AnalyticsChart from "@/components/AnalyticsChart";
-import Card from "@/components/Card";
-import Container from "@/components/Container";
-import { ScoresaberMetricsHistory } from "@/schemas/fascinated/scoresaberMetricsHistory";
-import { ssrSettings } from "@/ssrSettings";
-import { formatNumber } from "@/utils/numberUtils";
-import { isProduction } from "@/utils/utils";
-import { Metadata } from "next";
-import Link from "next/link";
-
-async function getData() {
-  const response = await fetch(
-    "https://bs-tracker.fascinated.cc/analytics?time=30d",
-    {
-      next: {
-        revalidate: isProduction() ? 600 : 0, // 10 minutes (0 seconds in dev)
-      },
-    },
-  );
-
-  const json = await response.json();
-  return {
-    data: json as ScoresaberMetricsHistory,
-  };
-}
-
-export async function generateMetadata(): Promise<Metadata> {
-  const { data } = await getData();
-
-  const description =
-    "View Scoresaber metrics and statistics over the last 30 days.";
-
-  const lastActivePlayers =
-    data.activePlayersHistory[data.activePlayersHistory.length - 1].value;
-  const lastScoreCount =
-    data.scoreCountHistory[data.scoreCountHistory.length - 1].value;
-
-  return {
-    title: `Analytics`,
-    description: description,
-    openGraph: {
-      siteName: ssrSettings.siteName,
-      title: `Analytics`,
-      description:
-        description +
-        `
-
-        Players currently online: ${formatNumber(lastActivePlayers)}
-        Scores set Today: ${formatNumber(lastScoreCount)}`,
-    },
-  };
-}
-
-export default async function Analytics() {
-  const { data } = await getData();
-
-  return (
-    <main>
-      <Container>
-        <Card
-          outerClassName="mt-2"
-          className="flex flex-col items-center justify-center"
-        >
-          <h1 className="text-center text-3xl font-bold">Analytics</h1>
-          <p className="text-center">
-            Scoresaber metrics and statistics over the last 30 days.
-          </p>
-          <p className="text-gray-300">
-            Want more in-depth data? Click{" "}
-            <span className="text-pp-blue">
-              <Link
-                href="https://grafana.fascinated.cc/d/b3c6c28d-39e9-4fa9-8e2b-b0ddb10f875e/beatsaber-metrics"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                here
-              </Link>
-            </span>
-          </p>
-          <div className="mt-3 h-[400px] w-full">
-            <AnalyticsChart historyData={data} />
-          </div>
-        </Card>
-      </Container>
-    </main>
-  );
-}

src/app/api/beatsaver/mapdata/route.ts

@@ -0,0 +1,100 @@
+import { Redis } from "@/lib/db/redis";
+import { BeatsaverMap } from "@/schemas/beatsaver/BeatsaverMap";
+import { BeatsaverAPI } from "@/utils/beatsaver/api";
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+  const mapHashes = searchParams.get("hashes");
+
+  if (!mapHashes) {
+    return new Response("mapHashes parameter is required", { status: 400 });
+  }
+  let toFetch: any[] = [];
+  if (mapHashes.includes(",")) {
+    const parts = mapHashes.substring(0, mapHashes.length - 1).split(",");
+    toFetch.push(...parts);
+  } else {
+    toFetch.push(mapHashes);
+  }
+  // Convert all hashes to uppercase
+  for (const hash of toFetch) {
+    toFetch[toFetch.indexOf(hash)] = hash.toUpperCase();
+  }
+  // Remove duplicates
+  toFetch = toFetch.filter((hash, index) => toFetch.indexOf(hash) === index);
+
+  const idOnly = searchParams.get("idonly") === "true";
+  let totalInCache = 0;
+
+  const maps: Record<string, BeatsaverMap | { id: string }> = {};
+
+  const fetchMapFromCache = async (mapHash: string) => {
+    const cachedMap = await (
+      await Redis.client
+    ).get(`beatsaver:map:${mapHash}`);
+    return cachedMap;
+  };
+
+  const fetchAndCacheMap = async (mapHash: string) => {
+    const beatSaverMap = await BeatsaverAPI.fetchMapByHash(mapHash);
+
+    if (beatSaverMap) {
+      addMap(mapHash, beatSaverMap);
+      await cacheMap(mapHash, beatSaverMap);
+    }
+  };
+
+  const cacheMap = async (mapHash: string, map: BeatsaverMap) => {
+    await (
+      await Redis.client
+    ).set(
+      `beatsaver:map:${mapHash}`,
+      JSON.stringify(idOnly ? { id: map.id } : map),
+      "EX",
+      60 * 60 * 24 * 7,
+    );
+  };
+
+  const addMap = (mapHash: string, map: any) => {
+    maps[mapHash] = idOnly ? { id: map.id } : map;
+  };
+
+  for (const mapHash of toFetch) {
+    const map = await fetchMapFromCache(mapHash);
+    if (map !== null) {
+      const json = JSON.parse(map);
+      addMap(mapHash, json);
+      totalInCache++;
+    }
+  }
+
+  if (totalInCache === 0 && toFetch.length > 1) {
+    const beatSaverMaps = await BeatsaverAPI.fetchMapsByHash(...toFetch);
+    if (beatSaverMaps) {
+      for (const mapHash of toFetch) {
+        const beatSaverMap = beatSaverMaps[mapHash.toLowerCase()];
+
+        if (beatSaverMap) {
+          await cacheMap(mapHash, beatSaverMap);
+          addMap(mapHash, beatSaverMap);
+        }
+      }
+    }
+  } else {
+    for (const mapHash of toFetch) {
+      if (!maps[mapHash]) {
+        await fetchAndCacheMap(mapHash);
+      }
+    }
+  }
+
+  return new Response(
+    JSON.stringify({
+      maps,
+      totalInCache,
+    }),
+    {
+      headers: { "content-type": "application/json;charset=UTF-8" },
+    },
+  );
+}

src/app/layout.tsx

@@ -1,30 +1,33 @@
 import AppProvider from "@/components/AppProvider";
-import { ssrSettings } from "@/ssrSettings";
+import { ThemeProvider } from "@/components/ui/theme-provider";
+import ssrSettings from "@/ssrSettings.json";
 import clsx from "clsx";
-import { Metadata } from "next";
+import { Metadata, Viewport } from "next";
 import { Inter } from "next/font/google";
 import Script from "next/script";
+
 import "react-toastify/dist/ReactToastify.css";
 import "./globals.css";
 
 const font = Inter({ subsets: ["latin-ext"], weight: "500" });
 
-// TODO: use type when NextJS fixes the type:
+export const viewport: Viewport = {
-// export const viewport: Viewport = {
-export const viewport: any = {
   themeColor: "#3B82F6",
 };
 
 export const metadata: Metadata = {
   metadataBase: new URL(ssrSettings.siteUrl),
   title: {
-    template: ssrSettings.siteName + " - %s",
+    template: ssrSettings.siteNameShort + " - %s",
     default: ssrSettings.siteName,
   },
   description: ssrSettings.description,
   keywords:
-    "scoresaber, score saber, scoresaber stats, score saber stats, beatleader, beat leader, " +
+    "scoresaber, score saber, scoresaber stats, score saber stats, beatleader, beat leader," +
-    "scoresaber reloaded, ssr, github, score aggregation, scoresaber api, score saber api, scoresaber api",
+    "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: ssrSettings.siteName,
     description: ssrSettings.description,
@@ -43,13 +46,20 @@ export default function RootLayout({
     <html lang="en">
       <Script
         id="plausible"
-        defer
         data-domain="ssr.fascinated.cc"
         src="https://analytics.fascinated.cc/js/script.js"
+        defer
       />
 
       <body className={clsx(font.className, "text-primary")}>
+        <ThemeProvider
+          storageKey="ssr-theme"
+          attribute="class"
+          defaultTheme="dark"
+          enableSystem
+        >
           <AppProvider>{children}</AppProvider>
+        </ThemeProvider>
       </body>
     </html>
   );

src/app/not-found.tsx

@@ -4,7 +4,10 @@ import Container from "@/components/Container";
 export default async function NotFound() {
   return (
     <Container>
-      <Card className="flex h-full items-center justify-center">
+      <Card
+        outerClassName="mt-2"
+        className="flex h-full flex-col items-center justify-center"
+      >
         <p className="text-xl font-bold text-red-500">404 Not Found</p>
         <p className="text-lg text-gray-300">
           The page you requested does not exist.

src/app/overlay/builder/page.tsx

@@ -10,13 +10,14 @@ import { Label } from "@/components/ui/label";
 import { useOverlaySettingsStore } from "@/store/overlaySettingsStore";
 import useStore from "@/utils/useStore";
 import Link from "next/link";
+import { toast } from "react-toastify";
 
 /**
  * Opens the overlay with the current settings
  *
  * @param settings the settings to pass to the overlay
  */
-function goToOverlay(settings: any) {
+function openOverlay(settings: any) {
   window.open(`/overlay?data=${JSON.stringify(settings)}`, "_blank");
 }
 
@@ -120,7 +121,15 @@ export default function Analytics() {
             <Button
               className="mt-3"
               onClick={() => {
-                goToOverlay(settingsStore);
+                if (!settingsStore.ipAddress) {
+                  toast.error("No IP Address provided");
+                  return;
+                }
+                if (!settingsStore.accountId) {
+                  toast.error("No Account ID provided");
+                  return;
+                }
+                openOverlay(settingsStore);
               }}
             >
               Open Overlay

src/app/overlay/page.tsx

@@ -1,13 +1,11 @@
 "use client";
 
-import Container from "@/components/Container";
 import Spinner from "@/components/Spinner";
 import PlayerStats from "@/components/overlay/PlayerStats";
 import ScoreStats from "@/components/overlay/ScoreStats";
 import SongInfo from "@/components/overlay/SongInfo";
-import { Card, CardDescription, CardTitle } from "@/components/ui/card";
+import { HttpSiraStatus } from "@/lib/overlay/httpSiraStatus";
-import { HttpSiraStatus } from "@/overlay/httpSiraStatus";
+import { OverlayPlayer } from "@/lib/overlay/type/overlayPlayer";
-import { OverlayPlayer } from "@/overlay/type/overlayPlayer";
 import { BeatLeaderAPI } from "@/utils/beatleader/api";
 import { ScoreSaberAPI } from "@/utils/scoresaber/api";
 import { Component } from "react";
@@ -19,7 +17,7 @@ interface OverlayProps {}
 interface OverlayState {
   mounted: boolean;
   player: OverlayPlayer | undefined;
-  settings: any | undefined;
+  config: any | undefined;
 }
 
 export default class Overlay extends Component<OverlayProps, OverlayState> {
@@ -28,7 +26,7 @@ export default class Overlay extends Component<OverlayProps, OverlayState> {
     this.state = {
       mounted: false,
       player: undefined,
-      settings: undefined,
+      config: undefined,
     };
   }
 
@@ -77,9 +75,6 @@ export default class Overlay extends Component<OverlayProps, OverlayState> {
       return;
     }
     this.setState({ mounted: true });
-    if (!this.state.mounted) {
-      HttpSiraStatus.connectWebSocket();
-    }
 
     const url = new URL(window.location.href);
     const searchParams = url.searchParams;
@@ -88,24 +83,33 @@ export default class Overlay extends Component<OverlayProps, OverlayState> {
     if (!data) {
       return;
     }
-    const settings = JSON.parse(data);
+    const config = JSON.parse(data);
-    this.setState({ settings: settings });
+    this.setState({ config: config });
+    const settings = config.settings;
 
-    if (settings.settings.showPlayerStats) {
+    if (settings.showPlayerStats) {
-      this.updatePlayer(settings.accountId, settings.platform);
+      this.updatePlayer(config.accountId, config.platform);
       setInterval(() => {
-        this.updatePlayer(settings.accountId, settings.platform);
+        this.updatePlayer(config.accountId, config.platform);
       }, UPDATE_INTERVAL);
     }
+
+    if (settings.showScoreStats || settings.showSongInfo) {
+      HttpSiraStatus.connectWebSocket();
+    }
   }
 
   render() {
-    const { player } = this.state;
+    const { player, config, mounted } = this.state;
 
-    if (
+    // Redirect to builder if no config is set
-      !this.state.mounted ||
+    if (mounted && !config) {
-      (!player && this.state.settings.settings.showPlayerStats)
+      window.location.href = "/overlay/builder";
-    ) {
+      return null;
+    }
+
+    // Show loading screen if player stats are enabled and not loaded yet
+    if (!mounted || (!player && config.settings.showPlayerStats)) {
       return (
         <main className="flex items-center !bg-transparent p-3">
           <Spinner />
@@ -114,42 +118,16 @@ export default class Overlay extends Component<OverlayProps, OverlayState> {
       );
     }
 
-    if (!this.state.settings) {
+    // The overlay
-      return (
-        <main>
-          <Container>
-            <Card className="mt-2 p-3">
-              <CardTitle>Overlay</CardTitle>
-              <CardDescription className="mt-2">
-                <p>
-                  This page is meant to be used as an overlay for streaming.
-                </p>
-                <p>
-                  To generate an overlay, go to the builder{" "}
-                  <a
-                    className="transform-gpu text-pp-blue transition-all hover:opacity-80"
-                    href="/overlay/builder"
-                  >
-                    here
-                  </a>
-                  .
-                </p>
-              </CardDescription>
-            </Card>
-          </Container>
-        </main>
-      );
-    }
-
     return (
       <main>
         <div>
-          {this.state.settings.settings.showPlayerStats && player && (
+          {config.settings.showPlayerStats && player && (
-            <PlayerStats player={player} settings={this.state.settings} />
+            <PlayerStats player={player} config={config} />
           )}
-          {this.state.settings.settings.showScoreStats && <ScoreStats />}
+          {config.settings.showScoreStats && <ScoreStats />}
         </div>
-        {this.state.settings.settings.showSongInfo && (
+        {config.settings.showSongInfo && (
           <div className="absolute bottom-0 left-0">
             <SongInfo />
           </div>

src/app/player/[id]/[sort]/[page]/page.tsx

@@ -1,9 +1,23 @@
-import PlayerPage from "@/components/player/PlayerPage";
+import Card from "@/components/Card";
-import { ssrSettings } from "@/ssrSettings";
+import Container from "@/components/Container";
+import PlayerChart from "@/components/player/PlayerChart";
+import PlayerInfo from "@/components/player/PlayerInfo";
+import Scores from "@/components/player/Scores";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/Tooltip";
+import ssrSettings from "@/ssrSettings.json";
+import { SortTypes } from "@/types/SortTypes";
 import { formatNumber } from "@/utils/numberUtils";
 import { ScoreSaberAPI } from "@/utils/scoresaber/api";
 import { normalizedRegionName } from "@/utils/utils";
+import clsx from "clsx";
 import { Metadata } from "next";
+import Image from "next/image";
+
+const DEFAULT_SORT_TYPE = SortTypes.top;
 
 type Props = {
   params: { id: string; sort: string; page: string };
@@ -47,6 +61,85 @@ export async function generateMetadata({
   };
 }
 
-export default function Player({ params: { id, sort, page } }: Props) {
+/**
-  return <PlayerPage id={id} sort={sort} page={page} />;
+ * Gets the player's data on the server side.
+ *
+ * @param id the player's id
+ * @returns the player's data
+ */
+async function getData(id: string, page: number, sort: string) {
+  const playerData = await ScoreSaberAPI.fetchPlayerData(id);
+  const playerScores = await ScoreSaberAPI.fetchScores(id, page, sort, 10);
+  return {
+    playerData: playerData,
+    playerScores: playerScores,
+  };
+}
+
+export default async function Player({ params: { id, sort, page } }: Props) {
+  const { playerData: player, playerScores } = await getData(
+    id,
+    Number(page),
+    sort,
+  );
+  if (!player) {
+    return (
+      <main>
+        <Container>
+          <Card outerClassName="mt-2">
+            <h1 className="text-2xl font-bold">Player not found</h1>
+          </Card>
+        </Container>
+      </main>
+    );
+  }
+
+  const sortType = SortTypes[sort] || DEFAULT_SORT_TYPE;
+  const badges = player.badges;
+
+  return (
+    <main>
+      <Container>
+        <PlayerInfo playerData={player} />
+        {/* Chart */}
+        <Card outerClassName="mt-2 min-h-[320px]">
+          {/* Badges */}
+          <div
+            className={clsx(
+              "mb-2 mt-2 flex flex-wrap items-center justify-center gap-2",
+              badges.length > 0 ? "block" : "hidden",
+            )}
+          >
+            {badges.map((badge) => {
+              return (
+                <Tooltip key={badge.image}>
+                  <TooltipTrigger>
+                    <Image
+                      src={badge.image}
+                      alt={badge.description}
+                      width={80}
+                      height={30}
+                    />
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>{badge.description}</p>
+                  </TooltipContent>
+                </Tooltip>
+              );
+            })}
+          </div>
+          <div className="h-[320px] w-full">
+            <PlayerChart scoresaber={player} />
+          </div>
+        </Card>
+        <Scores
+          initalScores={playerScores?.scores}
+          initalPage={Number(page)}
+          initalSortType={sortType}
+          initalTotalPages={playerScores?.pageInfo.totalPages}
+          playerData={player}
+        />
+      </Container>
+    </main>
+  );
 }

src/app/ranking/country/[country]/[page]/page.tsx

@@ -1,4 +1,8 @@
+import Card from "@/components/Card";
+import Container from "@/components/Container";
+import Error from "@/components/Error";
 import GlobalRanking from "@/components/GlobalRanking";
+import { ScoreSaberAPI } from "@/utils/scoresaber/api";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
@@ -9,6 +13,43 @@ type Props = {
   params: { page: string; country: string };
 };
 
-export default function RankingGlobal({ params: { page, country } }: Props) {
+async function getData(page: number, country: string) {
-  return <GlobalRanking page={Number(page)} country={country} />;
+  const response = await ScoreSaberAPI.fetchTopPlayers(page, country);
+  return {
+    data: response,
+  };
+}
+
+export default async function RankingGlobal({
+  params: { page, country },
+}: Props) {
+  const { data } = await getData(Number(page), country);
+  if (!data) {
+    return (
+      <main>
+        <Container>
+          <Card outerClassName="mt-2" className="mt-2">
+            <div className="p-3 text-center">
+              <div role="status">
+                <div className="flex flex-col items-center justify-center gap-2">
+                  <Error errorMessage="Unable to find this page or country" />
+                </div>
+              </div>
+            </div>
+          </Card>
+        </Container>
+      </main>
+    );
+  }
+
+  return (
+    <GlobalRanking
+      pageInfo={{
+        page: Number(page),
+        totalPages: data.pageInfo.totalPages,
+      }}
+      players={data.players}
+      country={country}
+    />
+  );
 }

src/app/ranking/global/[page]/page.tsx

@@ -1,4 +1,8 @@
+import Card from "@/components/Card";
+import Container from "@/components/Container";
+import Error from "@/components/Error";
 import GlobalRanking from "@/components/GlobalRanking";
+import { ScoreSaberAPI } from "@/utils/scoresaber/api";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
@@ -9,6 +13,40 @@ type Props = {
   params: { page: string };
 };
 
-export default function RankingGlobal({ params: { page } }: Props) {
+async function getData(page: number) {
-  return <GlobalRanking page={Number(page)} />;
+  const response = await ScoreSaberAPI.fetchTopPlayers(page);
+  return {
+    data: response,
+  };
+}
+
+export default async function RankingGlobal({ params: { page } }: Props) {
+  const { data } = await getData(Number(page));
+  if (!data) {
+    return (
+      <main>
+        <Container>
+          <Card outerClassName="mt-2" className="mt-2">
+            <div className="p-3 text-center">
+              <div role="status">
+                <div className="flex flex-col items-center justify-center gap-2">
+                  <Error errorMessage="Unable to find this page" />
+                </div>
+              </div>
+            </div>
+          </Card>
+        </Container>
+      </main>
+    );
+  }
+
+  return (
+    <GlobalRanking
+      pageInfo={{
+        page: Number(page),
+        totalPages: data.pageInfo.totalPages,
+      }}
+      players={data.players}
+    />
+  );
 }

src/app/search/page.tsx

@@ -19,8 +19,8 @@ export default function Home() {
         >
           <UnknownAvatar />
 
-          <p className="text-xl">Stranger</p>
+          <h1 className="text-xl">Search Player</h1>
-          <p className="text mt-2">Find a player profile</p>
+          <p className="text mt-2 text-gray-300">Find yourself or a friend</p>
 
           <SearchPlayer />
         </Card>

src/components/AppProvider.tsx

@@ -5,7 +5,6 @@ import { useSettingsStore } from "@/store/settingsStore";
 import React from "react";
 import { ToastContainer } from "react-toastify";
 import { TooltipProvider } from "./ui/Tooltip";
-import { ThemeProvider } from "./ui/theme-provider";
 
 const UPDATE_INTERVAL = 1000 * 60 * 5; // 5 minutes
 
@@ -52,7 +51,6 @@ export default class AppProvider extends React.Component {
     const props: any = this.props;
 
     return (
-      <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
       <TooltipProvider>
         <ToastContainer
           className="z-50"
@@ -62,7 +60,6 @@ export default class AppProvider extends React.Component {
         />
         {props.children}
       </TooltipProvider>
-      </ThemeProvider>
     );
   }
 }

src/components/Button.tsx

@@ -3,38 +3,38 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/Tooltip";
 
 interface ButtonProps {
   text?: JSX.Element | string;
-  url?: string;
   icon?: JSX.Element;
   color?: string;
   tooltip?: React.ReactNode;
   className?: string;
+  ariaLabel?: string;
   onClick?: () => void;
 }
 
 export default function Button({
   text,
-  url,
   icon,
   color,
   tooltip,
   className,
+  ariaLabel = "Default button label",
   onClick,
 }: ButtonProps) {
   if (!color) color = "bg-blue-500";
 
   const base = (
-    <a href={url} onClick={onClick}>
+    <button
-      <p
       className={clsx(
-          "font-md flex w-fit transform-gpu flex-row items-center gap-1 rounded-md p-1 transition-all hover:opacity-80",
+        "flex items-center justify-center gap-2 rounded-md p-1",
-          className,
         color,
+        className,
       )}
+      onClick={onClick}
+      aria-label={ariaLabel}
     >
       {icon}
       {text}
-      </p>
+    </button>
-    </a>
   );
 
   if (tooltip) {

src/components/Card.tsx

@@ -14,7 +14,7 @@ export default function Card({
 }: CardProps) {
   return (
     <CardBase className={outerClassName}>
-      <CardContent className={clsx(className, "pb-4 pt-2")}>
+      <CardContent className={clsx(className, "p-3 pb-4 pt-2")}>
         {children}
       </CardContent>
     </CardBase>

src/components/Container.tsx

@@ -1,6 +1,6 @@
 import Image from "next/image";
 import Footer from "./Footer";
-import Navbar from "./Navbar";
+import Navbar from "./navbar/Navbar";
 
 export default function Container({ children }: { children: React.ReactNode }) {
   return (

src/components/Footer.tsx

@@ -1,4 +1,4 @@
-import { ssrSettings } from "@/ssrSettings";
+import ssrSettings from "@/ssrSettings.json";
 import { isProduction } from "@/utils/utils";
 import Link from "next/link";
 import Card from "./Card";
@@ -22,7 +22,7 @@ const buildId = process.env.NEXT_PUBLIC_BUILD_ID
 const buildTime = process.env.NEXT_PUBLIC_BUILD_TIME;
 const gitUrl = isProduction()
   ? `https://git.fascinated.cc/Fascinated/scoresaber-reloaded-v2/commit/${buildId}`
-  : "https://git.fascinated.cc/Fascinated/scoresaber-reloaded-v2";
+  : "https://s.fascinated.cc/s/ssr-gitea";
 
 export default function Footer() {
   return (
@@ -31,7 +31,7 @@ export default function Footer() {
         <div className="flex flex-col items-center gap-1 md:flex-row md:items-start md:gap-3">
           <a
             className="transform-gpu transition-all hover:text-blue-500"
-            href="https://git.fascinated.cc/Fascinated/scoresaber-reloaded-v2"
+            href="https://s.fascinated.cc/s/ssr-gitea"
           >
             {ssrSettings.siteName}
           </a>

src/components/GlobalRanking.tsx

@@ -1,122 +1,32 @@
 "use client";
 
 import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
-import { ScoreSaberAPI } from "@/utils/scoresaber/api";
 import { normalizedRegionName } from "@/utils/utils";
-import dynamic from "next/dynamic";
-import Link from "next/link";
-import { useRouter, useSearchParams } from "next/navigation";
-import { useCallback, useEffect, useState } from "react";
 import Card from "./Card";
 import Container from "./Container";
 import CountyFlag from "./CountryFlag";
 import Pagination from "./Pagination";
-import Spinner from "./Spinner";
 import PlayerRanking from "./player/PlayerRanking";
-import PlayerRankingMobile from "./player/PlayerRankingMobile";
 import { Separator } from "./ui/separator";
 
-const Error = dynamic(() => import("@/components/Error"));
+type GlobalRankingProps = {
-
+  players: ScoresaberPlayer[];
-type PageInfo = {
+  country?: string;
-  loading: boolean;
+  pageInfo: {
     page: number;
     totalPages: number;
-  players: ScoresaberPlayer[];
+  };
 };
 
-type GlobalRankingProps = {
+export default function GlobalRanking({
-  page: number;
+  players,
-  country?: string;
+  country,
-};
+  pageInfo,
-
+}: GlobalRankingProps) {
-export default function GlobalRanking({ page, country }: GlobalRankingProps) {
-  const router = useRouter();
-  const searchQuery = useSearchParams();
-  const isMobile = searchQuery.get("mobile") == "true";
-
-  const [error, setError] = useState(false);
-  const [errorMessage, setErrorMessage] = useState("");
-
-  const [pageInfo, setPageInfo] = useState<PageInfo>({
-    loading: true,
-    page: page,
-    totalPages: 1,
-    players: [],
-  });
-
-  const updatePage = useCallback(
-    (page: any) => {
-      const windowSize = document.documentElement.clientWidth;
-      if (windowSize < 768 && !isMobile) {
-        router.push(`/ranking/global/${page}?mobile=true`);
-        router.refresh();
-        return;
-      }
-
-      console.log("Switching page to", page);
-      ScoreSaberAPI.fetchTopPlayers(page, country).then((response) => {
-        if (!response) {
-          setError(true);
-          setErrorMessage("No players found");
-          setPageInfo({ ...pageInfo, loading: false });
-          return;
-        }
-        setPageInfo({
-          ...pageInfo,
-          players: response.players,
-          totalPages: response.pageInfo.totalPages,
-          loading: false,
-          page: page,
-        });
-        window.history.pushState(
-          {},
-          "",
-          country
-            ? `/ranking/country/${country}/${page}`
-            : `/ranking/global/${page}`,
-        );
-      });
-    },
-    [country, isMobile, pageInfo, router],
-  );
-
-  useEffect(() => {
-    if (!pageInfo.loading || error) return;
-
-    updatePage(pageInfo.page);
-  }, [error, country, updatePage, pageInfo.page, pageInfo.loading]);
-
-  if (pageInfo.loading || error) {
   return (
     <main>
       <Container>
         <Card outerClassName="mt-2" className="mt-2">
-            <div className="p-3 text-center">
-              <div role="status">
-                <div className="flex flex-col items-center justify-center gap-2">
-                  {error && <Error errorMessage={errorMessage} />}
-                  {!error && <Spinner />}
-                </div>
-              </div>
-            </div>
-          </Card>
-        </Container>
-      </main>
-    );
-  }
-
-  const players = pageInfo.players;
-
-  return (
-    <main>
-      <Container>
-        <Card outerClassName="mt-2" className="mt-2">
-          {pageInfo.loading ? (
-            <div className="flex justify-center">
-              <Spinner />
-            </div>
-          ) : (
           <div className="flex flex-col gap-2">
             <div className="flex items-center gap-2 p-2">
               {country && (
@@ -125,14 +35,13 @@ export default function GlobalRanking({ page, country }: GlobalRankingProps) {
               <p>
                 You are viewing{" "}
                 {country
-                    ? "scores from " + normalizedRegionName(country)
+                  ? "scores from " + normalizedRegionName(country.toUpperCase())
                   : "Global scores"}
               </p>
             </div>
 
             <Separator />
 
-              {!isMobile && (
             <table className="table w-full table-auto border-spacing-2 border-none text-left">
               <thead>
                 <tr>
@@ -148,29 +57,13 @@ export default function GlobalRanking({ page, country }: GlobalRankingProps) {
                 {players.map((player) => (
                   <tr key={player.rank} className="border-b border-border">
                     <PlayerRanking
-                          showCountryFlag={country ? false : true}
+                      isCountry={country == undefined ? false : true}
                       player={player}
                     />
                   </tr>
                 ))}
               </tbody>
             </table>
-              )}
-
-              {isMobile && (
-                <div className="flex flex-col gap-2">
-                  {players.map((player) => (
-                    <div
-                      key={player.rank}
-                      className="flex flex-col gap-2 rounded-md bg-background"
-                    >
-                      <Link href={`/player/${player.id}/top/1`}>
-                        <PlayerRankingMobile player={player} />
-                      </Link>
-                    </div>
-                  ))}
-                </div>
-              )}
 
             {/* Pagination */}
             <div className="flex w-full flex-row justify-center">
@@ -178,14 +71,11 @@ export default function GlobalRanking({ page, country }: GlobalRankingProps) {
                 <Pagination
                   currentPage={pageInfo.page}
                   totalPages={pageInfo.totalPages}
-                    onPageChange={(page) => {
+                  useHref
-                      updatePage(page);
-                    }}
                 />
               </div>
             </div>
           </div>
-          )}
         </Card>
       </Container>
     </main>

src/components/Navbar.tsx

@@ -1,162 +0,0 @@
-"use client";
-
-import { useSettingsStore } from "@/store/settingsStore";
-import useStore from "@/utils/useStore";
-import {
-  CogIcon,
-  MagnifyingGlassIcon,
-  ServerIcon,
-  UserIcon,
-} from "@heroicons/react/20/solid";
-import { GlobeAltIcon, TvIcon } from "@heroicons/react/24/outline";
-import Link from "next/link";
-import Avatar from "./Avatar";
-import { Button } from "./ui/button";
-import { Card } from "./ui/card";
-import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
-
-interface ButtonProps {
-  text: string;
-  icon?: JSX.Element;
-  href?: string;
-  ariaLabel: string;
-}
-
-function NavbarButton({ text, icon, href, ariaLabel }: ButtonProps) {
-  return (
-    <a
-      aria-label={ariaLabel}
-      className="flex h-full w-fit transform-gpu items-center justify-center gap-1 rounded-md p-[8px] transition-all hover:cursor-pointer hover:bg-blue-500"
-      href={href}
-    >
-      <>
-        {icon}
-        <p className="hidden md:block">{text}</p>
-      </>
-    </a>
-  );
-}
-
-function FriendsButton() {
-  const settingsStore = useStore(useSettingsStore, (state) => state);
-
-  return (
-    <Popover>
-      <PopoverTrigger>
-        <NavbarButton
-          ariaLabel="View your friends"
-          text="Friends"
-          icon={<UserIcon height={23} width={23} />}
-        />
-      </PopoverTrigger>
-      <PopoverContent className="p-2">
-        {settingsStore?.friends.length == 0 ? (
-          <div className="flex flex-col gap-2">
-            <div>
-              <p className="text-md font-bold">No friends</p>
-              <p className="text-sm text-gray-400">
-                Add new friends by clicking below
-              </p>
-            </div>
-
-            <Link href={"/search"}>
-              <Button className="w-full" size={"sm"}>
-                Search
-              </Button>
-            </Link>
-          </div>
-        ) : (
-          settingsStore?.friends.map((friend) => {
-            return (
-              <Link
-                key={friend.id}
-                href={`/player/${friend.id}/top/1`}
-                className="w-full"
-              >
-                <div className="flex transform-gpu gap-2 rounded-md p-2 text-left transition-all hover:bg-background">
-                  <Avatar
-                    url={friend.profilePicture}
-                    label="Friend avatar"
-                    size={48}
-                  />
-                  <div>
-                    <p className="text-sm text-gray-400">#{friend.rank}</p>
-                    <p>{friend.name}</p>
-                  </div>
-                </div>
-              </Link>
-            );
-          })
-        )}
-      </PopoverContent>
-    </Popover>
-  );
-}
-
-export default function Navbar() {
-  const settingsStore = useStore(useSettingsStore, (state) => state);
-
-  return (
-    <>
-      <Card className="flex h-fit w-full rounded-md">
-        {settingsStore !== undefined && settingsStore.player && (
-          <NavbarButton
-            ariaLabel="Your profile"
-            text="You"
-            icon={
-              <Avatar
-                url={settingsStore.player.profilePicture}
-                label="Your avatar"
-                size={23}
-              />
-            }
-            href={`/player/${settingsStore.player.id}/top/1`}
-          />
-        )}
-
-        <FriendsButton />
-        {/* TODO: fix hydration error? */}
-        {/* <Tooltip>
-          <TooltipTrigger>
-            <FriendsButton />
-          </TooltipTrigger>
-          <TooltipContent>Click to view your friends</TooltipContent>
-        </Tooltip> */}
-
-        <NavbarButton
-          ariaLabel="View the global ranking"
-          text="Ranking"
-          icon={<GlobeAltIcon height={23} width={23} />}
-          href="/ranking/global/1"
-        />
-        <NavbarButton
-          ariaLabel="View the overlay builder"
-          text="Overlay"
-          icon={<TvIcon height={23} width={23} />}
-          href="/overlay/builder"
-        />
-        <NavbarButton
-          ariaLabel="View analytics for Scoresaber"
-          text="Analytics"
-          icon={<ServerIcon height={23} width={23} />}
-          href="/analytics"
-        />
-
-        <div className="m-auto" />
-
-        <NavbarButton
-          ariaLabel="Search for a player"
-          text="Search"
-          icon={<MagnifyingGlassIcon height={23} width={23} />}
-          href="/search"
-        />
-        <NavbarButton
-          ariaLabel="View your settings"
-          text="Settings"
-          icon={<CogIcon height={23} width={23} />}
-          href="/settings"
-        />
-      </Card>
-    </>
-  );
-}

src/components/Pagination.tsx

@@ -2,15 +2,17 @@ import {
   ArrowUturnLeftIcon,
   ArrowUturnRightIcon,
 } from "@heroicons/react/20/solid";
+import Link from "next/link";
 
 type PaginationProps = {
   currentPage: number;
   totalPages: number;
-  onPageChange: (pageNumber: number) => void;
+  useHref?: boolean;
+  onPageChange?: (pageNumber: number) => void;
 };
 
 export default function Pagination(props: PaginationProps) {
-  const { currentPage, totalPages, onPageChange } = props;
+  const { currentPage, totalPages, useHref, onPageChange } = props;
 
   // Calculate the range of page numbers to display
   const rangeStart = Math.max(1, currentPage - 2);
@@ -28,26 +30,48 @@ export default function Pagination(props: PaginationProps) {
         <ul className="flex items-center gap-2">
           {currentPage > 1 && (
             <li className="rounded-md bg-neutral-700 hover:opacity-80">
+              {useHref ? (
+                <Link href={`${currentPage - 1}`}>
+                  <p
+                    className="px-3 py-1"
+                    aria-label={`Page ${currentPage - 1} (previous page)`}
+                  >
+                    <ArrowUturnLeftIcon width={20} height={20} />
+                  </p>
+                </Link>
+              ) : (
                 <button
                   className="px-3 py-1"
-                onClick={() => onPageChange(currentPage - 1)}
+                  onClick={() => onPageChange && onPageChange(currentPage - 1)}
                   aria-label={`Page ${currentPage - 1} (previous page)`}
                 >
                   <ArrowUturnLeftIcon width={20} height={20} />
                 </button>
+              )}
             </li>
           )}
 
           {currentPage !== 1 && currentPage - 2 > 1 && (
             <>
               <li>
+                {useHref ? (
+                  <Link href={`${1}`}>
+                    <p
+                      className="rounded-md bg-neutral-700 px-3 py-1 hover:opacity-80"
+                      aria-label="Page 1 (first page)"
+                    >
+                      1
+                    </p>
+                  </Link>
+                ) : (
                   <button
                     className="rounded-md bg-neutral-700 px-3 py-1 hover:opacity-80"
-                  onClick={() => onPageChange(1)}
+                    onClick={() => onPageChange && onPageChange(1)}
                     aria-label="Page 1 (first page)"
                   >
                     1
                   </button>
+                )}
               </li>
               <li>
                 <p>...</p>
@@ -57,17 +81,32 @@ export default function Pagination(props: PaginationProps) {
 
           {pageNumbers.map((pageNumber) => (
             <li key={pageNumber}>
+              {useHref ? (
+                <Link href={`${pageNumber}`}>
+                  <p
+                    className={`rounded-md px-3 py-1 ${
+                      pageNumber === currentPage
+                        ? "bg-blue-500 text-primary"
+                        : "bg-neutral-700 hover:opacity-80"
+                    }`}
+                    aria-label={`Page ${pageNumber}`}
+                  >
+                    {pageNumber}
+                  </p>
+                </Link>
+              ) : (
                 <button
                   className={`rounded-md px-3 py-1 ${
                     pageNumber === currentPage
                       ? "bg-blue-500 text-primary"
                       : "bg-neutral-700 hover:opacity-80"
                   }`}
-                onClick={() => onPageChange(pageNumber)}
+                  onClick={() => onPageChange && onPageChange(pageNumber)}
                   aria-label={`Page ${pageNumber}`}
                 >
                   {pageNumber}
                 </button>
+              )}
             </li>
           ))}
 
@@ -78,26 +117,48 @@ export default function Pagination(props: PaginationProps) {
               </li>
 
               <li>
+                {useHref ? (
+                  <Link href={`${totalPages}`}>
+                    <p
+                      className="rounded-md bg-neutral-700 px-3 py-1 hover:opacity-80"
+                      aria-label={`Page ${totalPages} (last page)`}
+                    >
+                      {totalPages}
+                    </p>
+                  </Link>
+                ) : (
                   <button
                     className="rounded-md bg-neutral-700 px-3 py-1 hover:opacity-80"
-                  onClick={() => onPageChange(totalPages)}
+                    onClick={() => onPageChange && onPageChange(totalPages)}
                     aria-label={`Page ${totalPages} (last page)`}
                   >
                     {totalPages}
                   </button>
+                )}
               </li>
             </>
           )}
 
           {currentPage < totalPages && (
             <li className="rounded-md bg-neutral-700 hover:opacity-80">
+              {useHref ? (
+                <Link href={`${currentPage + 1}`}>
+                  <p
+                    className="px-3 py-1"
+                    aria-label={`Page ${currentPage + 1} (next page)`}
+                  >
+                    <ArrowUturnRightIcon width={20} height={20} />
+                  </p>
+                </Link>
+              ) : (
                 <button
                   className="px-3 py-1"
-                onClick={() => onPageChange(currentPage + 1)}
+                  onClick={() => onPageChange && onPageChange(currentPage + 1)}
                   aria-label={`Page ${currentPage + 1} (next page)`}
                 >
                   <ArrowUturnRightIcon width={20} height={20} />
                 </button>
+              )}
             </li>
           )}
         </ul>

src/components/SearchPlayer.tsx

@@ -5,12 +5,15 @@ import { formatNumber } from "@/utils/numberUtils";
 import { ScoreSaberAPI } from "@/utils/scoresaber/api";
 import { MagnifyingGlassIcon } from "@heroicons/react/20/solid";
 import clsx from "clsx";
+import Link from "next/link";
 import { useEffect, useState } from "react";
 import Avatar from "./Avatar";
 
 export default function SearchPlayer() {
   const [search, setSearch] = useState("");
-  const [players, setPlayers] = useState([] as ScoresaberPlayer[]);
+  const [players, setPlayers] = useState(
+    undefined as ScoresaberPlayer[] | undefined,
+  );
 
   useEffect(() => {
     // Don't search if the query is too short
@@ -28,14 +31,20 @@ export default function SearchPlayer() {
       if (id == undefined) return;
 
       const player = await ScoreSaberAPI.fetchPlayerData(id);
-      if (player == undefined) return;
+      if (player == undefined) {
+        setPlayers([]);
+        return;
+      }
 
       setPlayers([player]);
     }
 
     // Search by name
     const players = await ScoreSaberAPI.searchByName(search);
-    if (players == undefined) return;
+    if (players == undefined) {
+      setPlayers([]);
+      return;
+    }
 
     setPlayers(players);
   }
@@ -44,7 +53,7 @@ export default function SearchPlayer() {
     e.preventDefault();
 
     // Take the user to the first account
-    if (players.length > 0) {
+    if (players && players.length > 0) {
       window.location.href = `/player/${players[0].id}/top/1`;
     }
   }
@@ -68,11 +77,12 @@ export default function SearchPlayer() {
       <div
         className={clsx(
           "absolute z-20 mt-7 flex max-h-[200px] min-w-[14rem] flex-col divide-y overflow-y-auto rounded-md bg-popover shadow-sm md:max-h-[300px]",
-          players.length > 0 ? "flex" : "hidden",
+          players ? "flex" : "hidden",
         )}
       >
-        {players.map((player: ScoresaberPlayer) => (
+        {players && players.length > 0
-          <a
+          ? players.map((player: ScoresaberPlayer) => (
+              <Link
                 key={player.id}
                 className="flex min-w-[14rem] items-center gap-2 p-2 transition-all hover:bg-background"
                 href={`/player/${player.id}/top/1`}
@@ -85,8 +95,9 @@ export default function SearchPlayer() {
                   </p>
                   <p className="text-sm">{player.name}</p>
                 </div>
-          </a>
+              </Link>
-        ))}
+            ))
+          : search.length > 0 && <div className="p-2">No players found</div>}
       </div>
     </form>
   );

src/components/icons/BeatSaverLogo.tsx

@@ -16,14 +16,14 @@ export default function BeatSaverLogo({
       version="1.1"
       className={className}
     >
-      <g fill="none" stroke="#000000" stroke-width="10">
+      <g fill="none" stroke="#000000" strokeWidth="10">
-        <path d="M 100,7 189,47 100,87 12,47 Z" stroke-linejoin="round"></path>
+        <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"
-          stroke-linejoin="round"
+          strokeLinejoin="round"
         ></path>
-        <path d="M 100,87 100,196" stroke-linejoin="round"></path>
+        <path d="M 100,87 100,196" strokeLinejoin="round"></path>
-        <path d="M 26,77 85,106 53,130 Z" stroke-linejoin="round"></path>
+        <path d="M 26,77 85,106 53,130 Z" strokeLinejoin="round"></path>
       </g>
     </svg>
   );

src/components/icons/YouTubeLogo.tsx

@@ -0,0 +1,33 @@
+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>
+  );
+}

src/components/leaderboard/Leaderboard.tsx

@@ -98,7 +98,7 @@ export default function Leaderboard({ id, page }: LeaderboardProps) {
     <Container>
       <div className="mt-2 flex flex-col gap-2 xl:flex-row">
         <Card outerClassName="h-fit pt-3" className="flex">
-          <div className="flex min-w-[320px] flex-wrap justify-between gap-2 md:justify-start">
+          <div className="flex min-w-[300px] flex-wrap justify-between gap-2 md:justify-start">
             <div className="flex gap-2">
               <Image
                 src={coverImage}
@@ -109,17 +109,19 @@ export default function Leaderboard({ id, page }: LeaderboardProps) {
               />
               <div className="flex flex-col">
                 <p className="text-xl font-bold">{songName}</p>
-                <p className="text-lg">{songSubName}</p>
+                {/* <p className="text-lg">{songSubName}</p> */}
-                <p>Mapped By: {levelAuthorName}</p>
+                <p className="text-gray-400">{levelAuthorName}</p>
               </div>
             </div>
             <div className="flex flex-col gap-1">
               <p>Status: {ranked ? "Ranked" : "Unranked"}</p>
+              {ranked && (
                 <div className="flex">
                   <p>Stars:</p>
                   <StarIcon width={20} height={20} className="ml-1" />
                   <p className="text-pp-blue">{stars}</p>
                 </div>
+              )}
               <p>
                 Plays: {formatNumber(plays)} ({dailyPlays} in the last day)
               </p>

src/components/navbar/FriendsButton.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { useSettingsStore } from "@/store/settingsStore";
+import useStore from "@/utils/useStore";
+import { UserIcon } from "@heroicons/react/20/solid";
+import Link from "next/link";
+import Avatar from "../Avatar";
+import { Button } from "../ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
+import NavbarButton from "./NavbarButton";
+
+export default function FriendsButton() {
+  const settingsStore = useStore(useSettingsStore, (state) => state);
+
+  return (
+    <Popover>
+      <PopoverTrigger>
+        <NavbarButton
+          ariaLabel="View your friends"
+          text="Friends"
+          icon={<UserIcon height={23} width={23} />}
+        />
+      </PopoverTrigger>
+      <PopoverContent className="p-2">
+        {settingsStore?.friends.length == 0 ? (
+          <div className="flex flex-col gap-2">
+            <div>
+              <p className="text-md font-bold">No friends</p>
+              <p className="text-sm text-gray-400">
+                Add new friends by clicking below
+              </p>
+            </div>
+
+            <Link href={"/search"}>
+              <Button className="w-full" size={"sm"}>
+                Search
+              </Button>
+            </Link>
+          </div>
+        ) : (
+          settingsStore?.friends.map((friend) => {
+            return (
+              <Link
+                key={friend.id}
+                href={`/player/${friend.id}/top/1`}
+                className="w-full"
+              >
+                <div className="flex transform-gpu gap-2 rounded-md p-2 text-left transition-all hover:bg-background">
+                  <Avatar
+                    url={friend.profilePicture}
+                    label="Friend avatar"
+                    size={48}
+                  />
+                  <div>
+                    <p className="text-sm text-gray-400">#{friend.rank}</p>
+                    <p>{friend.name}</p>
+                  </div>
+                </div>
+              </Link>
+            );
+          })
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+}

src/components/navbar/Navbar.tsx

@@ -0,0 +1,46 @@
+import { MagnifyingGlassIcon } from "@heroicons/react/20/solid";
+import { GlobeAltIcon, TvIcon } from "@heroicons/react/24/outline";
+import { Card } from "../ui/card";
+import FriendsButton from "./FriendsButton";
+import NavbarButton from "./NavbarButton";
+import YouButton from "./YouButton";
+
+export default function Navbar() {
+  return (
+    <>
+      <Card className="flex h-fit w-full rounded-md">
+        <YouButton />
+
+        <FriendsButton />
+
+        <NavbarButton
+          ariaLabel="View the global ranking"
+          text="Ranking"
+          icon={<GlobeAltIcon height={23} width={23} />}
+          href="/ranking/global/1"
+        />
+        <NavbarButton
+          ariaLabel="View the overlay builder"
+          text="Overlay"
+          icon={<TvIcon height={23} width={23} />}
+          href="/overlay/builder"
+        />
+
+        <div className="m-auto" />
+
+        <NavbarButton
+          ariaLabel="Search for a player"
+          text="Search"
+          icon={<MagnifyingGlassIcon height={23} width={23} />}
+          href="/search"
+        />
+        {/* <NavbarButton
+          ariaLabel="View your settings"
+          text="Settings"
+          icon={<CogIcon height={23} width={23} />}
+          href="/settings"
+        /> */}
+      </Card>
+    </>
+  );
+}

src/components/navbar/NavbarButton.tsx

@@ -0,0 +1,26 @@
+interface ButtonProps {
+  text: string;
+  icon?: JSX.Element;
+  href?: string;
+  ariaLabel: string;
+}
+
+export default function NavbarButton({
+  text,
+  icon,
+  href,
+  ariaLabel,
+}: ButtonProps) {
+  return (
+    <a
+      aria-label={ariaLabel}
+      className="flex h-full w-fit transform-gpu items-center justify-center gap-1 rounded-md p-[8px] transition-all hover:cursor-pointer hover:bg-blue-500"
+      href={href}
+    >
+      <>
+        {icon}
+        <p className="hidden md:block">{text}</p>
+      </>
+    </a>
+  );
+}

src/components/navbar/YouButton.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { useSettingsStore } from "@/store/settingsStore";
+import { useStore } from "zustand";
+import Avatar from "../Avatar";
+import NavbarButton from "./NavbarButton";
+
+export default function YouButton() {
+  const settingsStore = useStore(useSettingsStore, (state) => state);
+
+  if (!settingsStore || !settingsStore.player) {
+    return null;
+  }
+
+  return (
+    <NavbarButton
+      ariaLabel="Your profile"
+      text="You"
+      icon={
+        <Avatar
+          url={settingsStore.player.profilePicture}
+          label="Your avatar"
+          size={23}
+        />
+      }
+      href={`/player/${settingsStore.player.id}/top/1`}
+    />
+  );
+}

src/components/overlay/PlayerStats.tsx

@@ -1,4 +1,4 @@
-import { OverlayPlayer } from "@/overlay/type/overlayPlayer";
+import { OverlayPlayer } from "@/lib/overlay/type/overlayPlayer";
 import { formatNumber } from "@/utils/numberUtils";
 import { GlobeAltIcon } from "@heroicons/react/20/solid";
 import Image from "next/image";
@@ -6,7 +6,7 @@ import CountyFlag from "../CountryFlag";
 
 type PlayerStatsProps = {
   player: OverlayPlayer;
-  settings: any;
+  config: any;
 };
 
 const leaderboardImages: Record<string, string> = {
@@ -14,25 +14,27 @@ const leaderboardImages: Record<string, string> = {
   beatleader: "/assets/logos/beatleader.png",
 };
 
-export default function PlayerStats({ player, settings }: PlayerStatsProps) {
+export default function PlayerStats({ player, config }: PlayerStatsProps) {
   return (
     <div className="flex gap-2 p-2">
       <Image
         alt="Player profile picture"
-        className="rounded-md"
+        className="rounded-lg"
         src={player.profilePicture}
         width={180}
         height={180}
+        priority
       />
       <div>
-        <div className="flex gap-2">
+        <div className="flex gap-1">
           <Image
             alt="Leaderboard logo"
-            src={leaderboardImages[settings.platform]}
+            src={leaderboardImages[config.platform]}
             width={36}
             height={36}
+            priority
           />
-          <p className="text-3xl font-bold">{formatNumber(player.pp, 2)}pp</p>
+          <p className="text-3xl">{formatNumber(player.pp, 2)}pp</p>
         </div>
         <div className="flex items-center gap-2">
           <GlobeAltIcon width={25} height={25} />

src/components/overlay/ScoreStats.tsx

@@ -12,7 +12,7 @@ export default function ScoreStats() {
   return (
     <div className="flex flex-col pl-2">
       <p className="text-2xl font-bold">{formatNumber(scoreStats.score)}</p>
-      <p className="text-2xl">Combo: {formatNumber(scoreStats.combo)}x</p>
+      <p className="text-2xl">{formatNumber(scoreStats.combo)}x</p>
       <p className="text-2xl">
         <span
           style={{

src/components/overlay/SongInfo.tsx

@@ -18,7 +18,7 @@ export default function SongInfo() {
       )}
     >
       <Image
-        className="rounded-md"
+        className="rounded-lg"
         alt="Song Image"
         src={songInfo.art}
         width={140}
@@ -26,10 +26,8 @@ export default function SongInfo() {
       />
       <div className="flex flex-col justify-between pb-2 pt-1">
         <div>
-          <p className="text-2xl font-bold">
+          <p className="text-2xl font-bold">{songInfo.songName}</p>
-            {songInfo.songName} {songInfo.songSubName}
+          <p className="text-2xl text-gray-300">{songInfo.songMapper}</p>
-          </p>
-          <p className="text-xl">{songInfo.songMapper}</p>
         </div>
         <div className="mt-1 flex items-center gap-2">
           <p

src/components/player/PlayerChart.tsx

@@ -1,5 +1,9 @@
+"use client";
+
 import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
 import { formatNumber } from "@/utils/numberUtils";
+
+// chartjs
 import {
   CategoryScale,
   Chart as ChartJS,

src/components/player/PlayerInfo.tsx

@@ -1,113 +1,22 @@
 import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
-import { useScoresaberScoresStore } from "@/store/scoresaberScoresStore";
-import { useSettingsStore } from "@/store/settingsStore";
 import { formatNumber } from "@/utils/numberUtils";
-import { getAveragePp, getHighestPpPlay } from "@/utils/scoresaber/scores";
 import { normalizedRegionName } from "@/utils/utils";
-import {
+import { GlobeAsiaAustraliaIcon } from "@heroicons/react/20/solid";
-  GlobeAsiaAustraliaIcon,
-  HomeIcon,
-  UserIcon,
-  XMarkIcon,
-} from "@heroicons/react/20/solid";
 import dynamic from "next/dynamic";
-import { useRef } from "react";
+import { Fragment, Suspense } from "react";
-import { toast } from "react-toastify";
-import { useStore } from "zustand";
 import Avatar from "../Avatar";
-import Button from "../Button";
 import Card from "../Card";
 import CountyFlag from "../CountryFlag";
 import Label from "../Label";
 
-const PPGainLabel = dynamic(() => import("./PPGainLabel"));
+const PlayerInfoExtraLabels = dynamic(() => import("./PlayerInfoExtraLabels"));
+const PlayerSettingsButtons = dynamic(() => import("./PlayerSettingsButtons"));
 
 type PlayerInfoProps = {
   playerData: ScoresaberPlayer;
 };
 
 export default function PlayerInfo({ playerData }: PlayerInfoProps) {
-  const playerId = playerData.id;
-  const settingsStore = useStore(useSettingsStore, (store) => store);
-  const playerScoreStore = useStore(useScoresaberScoresStore, (store) => store);
-
-  // Whether we have scores for this player in the local database
-  const hasLocalScores = playerScoreStore?.exists(playerId);
-
-  const toastId: any = useRef(null);
-
-  async function claimProfile() {
-    settingsStore?.setProfile(playerData);
-    addProfile(false);
-  }
-
-  async function addFriend() {
-    const friend = await settingsStore?.addFriend(playerData.id);
-    if (!friend) {
-      toast.error(`Failed to add ${playerData.name} as a friend`);
-      return;
-    }
-    addProfile(true);
-  }
-
-  async function removeFriend() {
-    settingsStore?.removeFriend(playerData.id);
-
-    toast.success(`Successfully removed ${playerData.name} as a friend`);
-  }
-
-  async function addProfile(isFriend: boolean) {
-    if (!useScoresaberScoresStore.getState().exists(playerId)) {
-      if (!isFriend) {
-        toast.success(`Successfully set ${playerData.name} as your profile`);
-      } else {
-        toast.success(`Successfully added ${playerData.name} as a friend`);
-      }
-
-      const reponse = await playerScoreStore?.addOrUpdatePlayer(
-        playerId,
-        (page, totalPages) => {
-          const autoClose = page == totalPages ? 5000 : false;
-
-          if (page == 1) {
-            toastId.current = toast.info(
-              `Fetching scores for ${playerData.name} page ${page}/${totalPages}`,
-              {
-                autoClose: autoClose,
-                progress: page / totalPages,
-              },
-            );
-          } else {
-            if (page != totalPages) {
-              toast.update(toastId.current, {
-                progress: page / totalPages,
-                render: `Fetching scores for ${playerData.name} page ${page}/${totalPages}`,
-                autoClose: autoClose,
-              });
-            } else {
-              toast.update(toastId.current, {
-                progress: 0,
-                render: `Successfully fetched scores for ${playerData.name}`,
-                autoClose: autoClose,
-                type: "success",
-              });
-            }
-          }
-
-          console.log(
-            `Fetching scores for ${playerId} (${page}/${totalPages})`,
-          );
-        },
-      );
-      if (reponse?.error) {
-        toast.error("Failed to fetch scores");
-        console.log(reponse.message);
-        return;
-      }
-    }
-  }
-
-  const isOwnProfile = settingsStore.player?.id == playerId;
   const scoreStats = playerData.scoreStats;
 
   return (
@@ -122,35 +31,11 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
 
           {/* Settings Buttons */}
           <div className="absolute right-3 top-20 flex flex-col justify-end gap-2 md:relative md:right-0 md:top-0 md:mt-2 md:flex-row md:justify-center">
-            {!isOwnProfile && (
+            <Fragment>
-              <Button
+              <Suspense>
-                onClick={claimProfile}
+                <PlayerSettingsButtons playerData={playerData} />
-                tooltip={<p>Set as your Profile</p>}
+              </Suspense>
-                icon={<HomeIcon width={24} height={24} />}
+            </Fragment>
-              />
-            )}
-
-            {!isOwnProfile && (
-              <>
-                {!settingsStore?.isFriend(playerId) && (
-                  <Button
-                    onClick={addFriend}
-                    tooltip={<p>Add as Friend</p>}
-                    icon={<UserIcon width={24} height={24} />}
-                    color="bg-green-500"
-                  />
-                )}
-
-                {settingsStore.isFriend(playerId) && (
-                  <Button
-                    onClick={removeFriend}
-                    tooltip={<p>Remove Friend</p>}
-                    icon={<XMarkIcon width={24} height={24} />}
-                    color="bg-red-500"
-                  />
-                )}
-              </>
-            )}
           </div>
         </div>
 
@@ -165,7 +50,10 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
 
               <a
                 className="flex transform-gpu items-center gap-1 transition-all hover:text-blue-500"
-                href={`/ranking/global/${Math.round(playerData.rank / 50)}`}
+                href={`/ranking/global/${Math.max(
+                  Math.round(playerData.rank / 50),
+                  1,
+                )}`}
               >
                 <p>#{formatNumber(playerData.rank)}</p>
               </a>
@@ -175,8 +63,9 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
             <div className="text-gray-300">
               <a
                 className="flex transform-gpu items-center gap-1 transition-all hover:text-blue-500"
-                href={`/ranking/country/${playerData.country}/${Math.round(
+                href={`/ranking/country/${playerData.country}/${Math.max(
-                  playerData.countryRank / 50,
+                  Math.round(playerData.countryRank / 50),
+                  1,
                 )}`}
               >
                 <CountyFlag
@@ -243,30 +132,11 @@ export default function PlayerInfo({ playerData }: PlayerInfoProps) {
               value={formatNumber(scoreStats.replaysWatched)}
             />
 
-            {hasLocalScores && (
+            <Fragment>
-              <>
+              <Suspense>
-                <Label
+                <PlayerInfoExtraLabels playerId={playerData.id} />
-                  title="Top PP"
+              </Suspense>
-                  className="bg-pp-blue"
+            </Fragment>
-                  tooltip={<p>Their highest pp play</p>}
-                  value={`${formatNumber(
-                    getHighestPpPlay(playerId)?.toFixed(2),
-                  )}pp`}
-                />
-                <Label
-                  title="Avg PP"
-                  className="bg-pp-blue"
-                  tooltip={
-                    <p>Average amount of pp per play (best 50 scores)</p>
-                  }
-                  value={`${formatNumber(
-                    getAveragePp(playerId)?.toFixed(2),
-                  )}pp`}
-                />
-
-                <PPGainLabel playerId={playerId} />
-              </>
-            )}
           </div>
         </div>
       </div>

src/components/player/PlayerInfoExtraLabels.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { useScoresaberScoresStore } from "@/store/scoresaberScoresStore";
+import { formatNumber } from "@/utils/numberUtils";
+import { getAveragePp, getHighestPpPlay } from "@/utils/scoresaber/scores";
+import { useStore } from "zustand";
+import Label from "../Label";
+import PPGainLabel from "./PPGainLabel";
+
+type PlayerInfoExtraLabelsProps = {
+  playerId: string;
+};
+
+export default function PlayerInfoExtraLabels({
+  playerId,
+}: PlayerInfoExtraLabelsProps) {
+  const playerScoreStore = useStore(useScoresaberScoresStore, (store) => store);
+  const hasLocalScores = playerScoreStore.exists(playerId);
+
+  if (!hasLocalScores) {
+    return null;
+  }
+
+  return (
+    <>
+      <Label
+        title="Top PP"
+        className="bg-pp-blue"
+        tooltip={<p>Their highest pp play</p>}
+        value={`${formatNumber(getHighestPpPlay(playerId)?.toFixed(2))}pp`}
+      />
+      <Label
+        title="Avg PP"
+        className="bg-pp-blue"
+        tooltip={<p>Average amount of pp per play (best 50 scores)</p>}
+        value={`${formatNumber(getAveragePp(playerId)?.toFixed(2))}pp`}
+      />
+
+      <PPGainLabel playerId={playerId} />
+    </>
+  );
+}

src/components/player/PlayerPage.tsx

@@ -1,131 +0,0 @@
-"use client";
-
-import Card from "@/components/Card";
-import Container from "@/components/Container";
-import Spinner from "@/components/Spinner";
-import Scores from "@/components/player/Scores";
-import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
-import { SortTypes } from "@/types/SortTypes";
-import { ScoreSaberAPI } from "@/utils/scoresaber/api";
-import clsx from "clsx";
-import dynamic from "next/dynamic";
-import Image from "next/image";
-import { useEffect, useState } from "react";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/Tooltip";
-import PlayerChart from "./PlayerChart";
-import PlayerInfo from "./PlayerInfo";
-
-const Error = dynamic(() => import("@/components/Error"));
-
-type PlayerInfo = {
-  loading: boolean;
-  player: ScoresaberPlayer | undefined;
-};
-
-type PlayerPageProps = {
-  id: string;
-  sort: string;
-  page: string;
-};
-
-const DEFAULT_SORT_TYPE = SortTypes.top;
-
-export default function PlayerPage({ id, sort, page }: PlayerPageProps) {
-  const [mounted, setMounted] = useState(false);
-  const [error, setError] = useState(false);
-  const [errorMessage, setErrorMessage] = useState("");
-
-  const [player, setPlayer] = useState<PlayerInfo>({
-    loading: true,
-    player: undefined,
-  });
-
-  const sortType = SortTypes[sort] || DEFAULT_SORT_TYPE;
-
-  useEffect(() => {
-    setMounted(true);
-    if (error || !player.loading) {
-      return;
-    }
-
-    if (mounted == true) {
-      return;
-    }
-
-    ScoreSaberAPI.fetchPlayerData(id).then((playerResponse) => {
-      if (!playerResponse) {
-        setError(true);
-        setErrorMessage("Failed to fetch player. Is the ID correct?");
-        setPlayer({ ...player, loading: false });
-        return;
-      }
-      setPlayer({ ...player, player: playerResponse, loading: false });
-    });
-  }, [error, mounted, id, player]);
-
-  if (player.loading || error || !player.player) {
-    return (
-      <main>
-        <Container>
-          <Card outerClassName="mt-2" className="mt-2">
-            <div className="p-3 text-center">
-              <div role="status">
-                <div className="flex flex-col items-center justify-center gap-2">
-                  {error && <Error errorMessage={errorMessage} />}
-                  {!error && <Spinner />}
-                </div>
-              </div>
-            </div>
-          </Card>
-        </Container>
-      </main>
-    );
-  }
-
-  const playerData = player.player;
-  const badges = playerData.badges;
-
-  return (
-    <main>
-      <Container>
-        <PlayerInfo playerData={playerData} />
-        {/* Chart */}
-        <Card outerClassName="mt-2">
-          {/* Badges */}
-          <div
-            className={clsx(
-              "mb-2 mt-2 flex flex-wrap items-center justify-center gap-2",
-              badges.length > 0 ? "block" : "hidden",
-            )}
-          >
-            {badges.map((badge) => {
-              return (
-                <Tooltip key={badge.image}>
-                  <TooltipTrigger>
-                    <Image
-                      src={badge.image}
-                      alt={badge.description}
-                      width={80}
-                      height={30}
-                    />
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <p>{badge.description}</p>
-                  </TooltipContent>
-                </Tooltip>
-              );
-            })}
-          </div>
-          <div className="h-[320px] w-full">
-            <PlayerChart scoresaber={playerData} />
-          </div>
-        </Card>
-        <Scores
-          playerData={playerData}
-          page={Number(page)}
-          sortType={sortType}
-        />
-      </Container>
-    </main>
-  );
-}

src/components/player/PlayerRanking.tsx

@@ -8,25 +8,26 @@ import CountyFlag from "../CountryFlag";
 
 type PlayerRankingProps = {
   player: ScoresaberPlayer;
-  showCountryFlag?: boolean;
+  isCountry?: boolean;
 };
 
 const Avatar = dynamic(() => import("@/components/Avatar"));
 
 export default function PlayerRanking({
   player,
-  showCountryFlag,
+  isCountry,
 }: PlayerRankingProps) {
   const settingsStore = useStore(useSettingsStore, (store) => store);
 
   return (
     <>
-      <td className="px-4 py-2">#{formatNumber(player.rank)}</td>
+      <td className="px-4 py-2">
+        #{formatNumber(isCountry ? player.countryRank : player.rank)}{" "}
+        <span className="text-sm">{isCountry && "(#" + player.rank + ")"}</span>
+      </td>
       <td className="flex items-center gap-2 px-4 py-2">
         <Avatar url={player.profilePicture} label="Avatar" size={24} />
-        {showCountryFlag && (
         <CountyFlag countryCode={player.country} className="!h-5 !w-5" />
-        )}
         <Link
           className="transform-gpu transition-all hover:text-blue-500"
           href={`/player/${player.id}/top/1`}

src/components/player/PlayerRankingMobile.tsx

@@ -1,54 +0,0 @@
-import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
-import { useSettingsStore } from "@/store/settingsStore";
-import { formatNumber } from "@/utils/numberUtils";
-import { useStore } from "zustand";
-import Avatar from "../Avatar";
-import CountyFlag from "../CountryFlag";
-import Label from "../Label";
-
-type PlayerRankingProps = {
-  player: ScoresaberPlayer;
-  showCountryFlag?: boolean;
-};
-
-export default function PlayerRankingMobile({
-  player,
-  showCountryFlag = true,
-}: PlayerRankingProps) {
-  const settingsStore = useStore(useSettingsStore, (store) => store);
-
-  return (
-    <div>
-      <div className="m-3 flex flex-col gap-2">
-        <p className="flex items-center gap-2">
-          <p>#{formatNumber(player.rank)}</p>
-          <Avatar url={player.profilePicture} label="Avatar" size={24} />
-          {showCountryFlag && (
-            <CountyFlag countryCode={player.country} className="!h-5 !w-5" />
-          )}
-          <p
-            className={
-              player.id == settingsStore.player?.id
-                ? "transform-gpu text-red-500 transition-all hover:text-blue-500"
-                : ""
-            }
-          >
-            {player.name}
-          </p>
-        </p>
-        <div className="flex flex-wrap justify-center gap-2">
-          <Label
-            title="PP"
-            tooltip={<p>The total amount of pp this player has</p>}
-            value={`${formatNumber(player.pp)}`}
-          />
-          <Label
-            title="Total play count"
-            tooltip={<p>The total amount of plays this player has</p>}
-            value={formatNumber(player.scoreStats.totalPlayCount)}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}

src/components/player/PlayerSettingsButtons.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
+import { useScoresaberScoresStore } from "@/store/scoresaberScoresStore";
+import { useSettingsStore } from "@/store/settingsStore";
+import { HomeIcon, UserIcon, XMarkIcon } from "@heroicons/react/20/solid";
+import { useEffect, useRef, useState } from "react";
+import { toast } from "react-toastify";
+import { useStore } from "zustand";
+import Button from "../Button";
+
+type PlayerSettingsButtonsProps = {
+  playerData: ScoresaberPlayer;
+};
+
+export default function PlayerSettingsButtons({
+  playerData,
+}: PlayerSettingsButtonsProps) {
+  const [mounted, setMounted] = useState(false);
+  const playerId = playerData.id;
+
+  const settingsStore = useStore(useSettingsStore, (store) => store);
+  const playerScoreStore = useStore(useScoresaberScoresStore, (store) => store);
+
+  const isOwnProfile = settingsStore.player?.id == playerId;
+  const toastId: any = useRef(null);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted || isOwnProfile) {
+    return null;
+  }
+
+  async function claimProfile() {
+    settingsStore?.setProfile(playerData);
+    addProfile(false);
+  }
+
+  async function addFriend() {
+    const friend = await settingsStore?.addFriend(playerData.id);
+    if (!friend) {
+      toast.error(`Failed to add ${playerData.name} as a friend`);
+      return;
+    }
+    addProfile(true);
+  }
+
+  async function removeFriend() {
+    settingsStore?.removeFriend(playerData.id);
+
+    toast.success(`Successfully removed ${playerData.name} as a friend`);
+  }
+
+  async function addProfile(isFriend: boolean) {
+    if (!useScoresaberScoresStore.getState().exists(playerId)) {
+      if (!isFriend) {
+        toast.success(`Successfully set ${playerData.name} as your profile`);
+      } else {
+        toast.success(`Successfully added ${playerData.name} as a friend`);
+      }
+
+      const reponse = await playerScoreStore?.addOrUpdatePlayer(
+        playerId,
+        (page, totalPages) => {
+          const autoClose = page == totalPages ? 5000 : false;
+
+          if (page == 1) {
+            toastId.current = toast.info(
+              `Fetching scores for ${playerData.name} page ${page}/${totalPages}`,
+              {
+                autoClose: autoClose,
+                progress: page / totalPages,
+              },
+            );
+          } else {
+            if (page != totalPages) {
+              toast.update(toastId.current, {
+                progress: page / totalPages,
+                render: `Fetching scores for ${playerData.name} page ${page}/${totalPages}`,
+                autoClose: autoClose,
+              });
+            } else {
+              toast.update(toastId.current, {
+                progress: 0,
+                render: `Successfully fetched scores for ${playerData.name}`,
+                autoClose: autoClose,
+                type: "success",
+              });
+            }
+          }
+
+          console.log(
+            `Fetching scores for ${playerId} (${page}/${totalPages})`,
+          );
+        },
+      );
+      if (reponse?.error) {
+        toast.error("Failed to fetch scores");
+        console.log(reponse.message);
+        return;
+      }
+    }
+  }
+
+  return (
+    <>
+      <Button
+        onClick={claimProfile}
+        tooltip={<p>Set as your Profile</p>}
+        icon={<HomeIcon width={24} height={24} />}
+        ariaLabel="Set as your Profile"
+      />
+
+      {!settingsStore?.isFriend(playerId) && (
+        <Button
+          onClick={addFriend}
+          tooltip={<p>Add as Friend</p>}
+          icon={<UserIcon width={24} height={24} />}
+          color="bg-green-500"
+          ariaLabel="Add Friend"
+        />
+      )}
+
+      {settingsStore.isFriend(playerId) && (
+        <Button
+          onClick={removeFriend}
+          tooltip={<p>Remove Friend</p>}
+          icon={<XMarkIcon width={24} height={24} />}
+          color="bg-red-500"
+          ariaLabel="Remove Friend"
+        />
+      )}
+    </>
+  );
+}

src/components/player/Scores.tsx

@@ -1,33 +1,39 @@
+"use client";
+
 import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
 import { ScoresaberPlayerScore } from "@/schemas/scoresaber/playerScore";
 import { useSettingsStore } from "@/store/settingsStore";
 import { SortType, SortTypes } from "@/types/SortTypes";
 import { ScoreSaberAPI } from "@/utils/scoresaber/api";
 import useStore from "@/utils/useStore";
-import dynamic from "next/dynamic";
 import { useCallback, useEffect, useState } from "react";
 import Card from "../Card";
 import Error from "../Error";
 import Pagination from "../Pagination";
-import Score from "./Score";
+import Score from "./score/Score";
-
-const Spinner = dynamic(() => import("@/components/Spinner"));
 
 type PageInfo = {
-  loading: boolean;
   page: number;
   totalPages: number;
   sortType: SortType;
-  scores: ScoresaberPlayerScore[];
+  scores: ScoresaberPlayerScore[] | undefined;
 };
 
 type ScoresProps = {
+  initalScores: ScoresaberPlayerScore[] | undefined;
+  initalPage: number;
+  initalSortType: SortType;
+  initalTotalPages?: number;
   playerData: ScoresaberPlayer;
-  page: number;
-  sortType: SortType;
 };
 
-export default function Scores({ playerData, page, sortType }: ScoresProps) {
+export default function Scores({
+  initalScores,
+  initalPage,
+  initalSortType,
+  initalTotalPages,
+  playerData,
+}: ScoresProps) {
   const settingsStore = useStore(useSettingsStore, (store) => store);
   const playerId = playerData.id;
 
@@ -36,28 +42,37 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
   const [errorMessage, setErrorMessage] = useState("");
 
   const [scores, setScores] = useState<PageInfo>({
-    loading: true,
+    page: initalPage,
-    page: page,
+    totalPages: initalTotalPages || 1,
-    totalPages: 1,
+    sortType: initalSortType,
-    sortType: sortType,
+    scores: initalScores,
-    scores: [],
   });
+  const [changedPage, setChangedPage] = useState(false);
 
   const updateScoresPage = useCallback(
     (sortType: SortType, page: any) => {
+      if (
+        page == initalPage &&
+        sortType == initalSortType &&
+        initalScores &&
+        !changedPage
+      ) {
+        console.log("Already loaded scores, not fetching");
+        return;
+      }
+
       ScoreSaberAPI.fetchScores(playerId, page, sortType.value, 10).then(
         (scoresResponse) => {
           if (!scoresResponse) {
             setError(true);
             setErrorMessage("No Scores");
-            setScores({ ...scores, loading: false });
+            setScores({ ...scores });
             return;
           }
           setScores({
             ...scores,
             scores: scoresResponse.scores,
             totalPages: scoresResponse.pageInfo.totalPages,
-            loading: false,
             page: page,
             sortType: sortType,
           });
@@ -67,12 +82,21 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
             "",
             `/player/${playerId}/${sortType.value}/${page}`,
           );
+          setChangedPage(true);
 
           console.log(`Switched page to ${page} with sort ${sortType.value}`);
         },
       );
     },
-    [playerId, scores, settingsStore],
+    [
+      changedPage,
+      initalPage,
+      initalScores,
+      initalSortType,
+      playerId,
+      scores,
+      settingsStore,
+    ],
   );
 
   useEffect(() => {
@@ -122,17 +146,12 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
         </div>
       </div>
 
-      <div className="w-full p-1">
+      <div className="flex h-full w-full flex-col items-center justify-center">
-        {scores.loading ? (
+        <>
-          <div className="flex justify-center">
+          {scores.scores ? (
-            <Spinner />
+            <>
-          </div>
+              <div className="grid min-w-full grid-cols-1 divide-y divide-border">
-        ) : (
+                {scores.scores.map((scoreData, id) => {
-          <div className="grid grid-cols-1 divide-y divide-border">
-            {!scores.loading && scores.scores.length == 0 ? (
-              <p className="text-red-400">{errorMessage}</p>
-            ) : (
-              scores.scores.map((scoreData, id) => {
                   const { score, leaderboard } = scoreData;
 
                   return (
@@ -141,17 +160,11 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
                       player={playerData}
                       score={score}
                       leaderboard={leaderboard}
-                    ownProfile={settingsStore?.player}
                     />
                   );
-              })
+                })}
-            )}
               </div>
-        )}
-      </div>
-
               {/* Pagination */}
-      <div>
               <div className="pt-3">
                 <Pagination
                   currentPage={scores.page}
@@ -161,6 +174,11 @@ export default function Scores({ playerData, page, sortType }: ScoresProps) {
                   }}
                 />
               </div>
+            </>
+          ) : (
+            <p>No Scores!</p>
+          )}
+        </>
       </div>
     </Card>
   );

src/components/player/score/CopyBsrButton.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { toast } from "react-toastify";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../ui/Tooltip";
+import { Button } from "../../ui/button";
+
+type CopyBsrButtonProps = {
+  mapId: string;
+};
+
+export default function CopyBsrButton({ mapId }: CopyBsrButtonProps) {
+  return (
+    <Tooltip>
+      <TooltipTrigger>
+        <Button
+          className="h-[30px] w-[30px] bg-neutral-700 p-1"
+          variant={"secondary"}
+          onClick={() => {
+            navigator.clipboard.writeText(`!bsr ${mapId}`);
+            toast.success("Copied BSR code to clipboard");
+          }}
+        >
+          <p>!</p>
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <div>
+          <p>Click to copy the BSR code</p>
+          <p>!bsr {mapId}</p>
+        </div>
+      </TooltipContent>
+    </Tooltip>
+  );
+}

src/components/player/score/MapButtons.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import BeatSaverLogo from "@/components/icons/BeatSaverLogo";
+import YouTubeLogo from "@/components/icons/YouTubeLogo";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/Tooltip";
+import { Button } from "@/components/ui/button";
+import { ScoresaberLeaderboardInfo } from "@/schemas/scoresaber/leaderboard";
+import { songNameToYouTubeLink } from "@/utils/songUtils";
+import Link from "next/link";
+import { useCallback, useEffect, useState } from "react";
+import CopyBsrButton from "./CopyBsrButton";
+
+type MapButtonsProps = {
+  leaderboard: ScoresaberLeaderboardInfo;
+};
+
+export default function MapButtons({ leaderboard }: MapButtonsProps) {
+  const [mapId, setMapId] = useState<string | undefined>(undefined);
+  const hash = leaderboard.songHash;
+
+  const getMapId = useCallback(async () => {
+    const beatSaberMap = await fetch(
+      `/api/beatsaver/mapdata?hashes=${hash}&idonly=true`,
+    );
+    if (!beatSaberMap) {
+      return;
+    }
+    const json = await beatSaberMap.json();
+    if (json.maps[hash] == null || json.maps[hash] == undefined) {
+      return;
+    }
+    console.log(json);
+    setMapId(json.maps[hash].id);
+  }, [hash]);
+
+  useEffect(() => {
+    getMapId();
+  }, [getMapId]);
+
+  return (
+    <div className="hidden flex-col items-center gap-2 p-1 md:flex md:items-start">
+      {mapId && (
+        <>
+          <div className="flex gap-2">
+            <Tooltip>
+              <TooltipTrigger>
+                <Link
+                  href={`https://beatsaver.com/maps/${mapId}`}
+                  target="_blank"
+                >
+                  <Button
+                    className="h-[30px] w-[30px] bg-neutral-700 p-1"
+                    variant={"secondary"}
+                  >
+                    <BeatSaverLogo size={20} />
+                  </Button>
+                </Link>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Click to open the map page</p>
+              </TooltipContent>
+            </Tooltip>
+
+            <CopyBsrButton mapId={mapId} />
+          </div>
+          <div className="flex gap-2">
+            <Tooltip>
+              <TooltipTrigger>
+                <Link
+                  href={`${songNameToYouTubeLink(
+                    leaderboard.songName,
+                    leaderboard.songSubName,
+                    leaderboard.songAuthorName,
+                  )}`}
+                  target="_blank"
+                >
+                  <Button
+                    className="h-[30px] w-[30px] bg-neutral-700 p-1"
+                    variant={"secondary"}
+                  >
+                    <YouTubeLogo size={20} />
+                  </Button>
+                </Link>
+              </TooltipTrigger>
+              <TooltipContent>
+                <p>Click to view the song on YouTube</p>
+              </TooltipContent>
+            </Tooltip>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

src/components/player/score/Score.tsx

@@ -17,23 +17,19 @@ import {
 import clsx from "clsx";
 import Image from "next/image";
 import Link from "next/link";
-import HeadsetIcon from "../icons/HeadsetIcon";
+import { Suspense } from "react";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/Tooltip";
+import HeadsetIcon from "../../icons/HeadsetIcon";
-import ScoreStatLabel from "./ScoreStatLabel";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../../ui/Tooltip";
+import ScoreStatLabel from "../ScoreStatLabel";
+import MapButtons from "./MapButtons";
 
 type ScoreProps = {
   score: ScoresaberScore;
   player: ScoresaberPlayer;
   leaderboard: ScoresaberLeaderboardInfo;
-  ownProfile?: ScoresaberPlayer;
 };
 
-export default function Score({
+export default function Score({ score, player, leaderboard }: ScoreProps) {
-  score,
-  player,
-  leaderboard,
-  ownProfile,
-}: ScoreProps) {
   const isFullCombo = score.missedNotes + score.badCuts === 0;
   const diffName = scoresaberDifficultyNumberToName(
     leaderboard.difficulty.difficulty,
@@ -44,7 +40,7 @@ export default function Score({
   const weightedPp = formatNumber(getPpGainedFromScore(player.id, score), 2);
 
   return (
-    <div className="grid grid-cols-1 pb-2 pt-2 first:pt-0 last:pb-0 md:grid-cols-[0.85fr_6fr_1.3fr]">
+    <div className="grid grid-cols-1 pb-2 pt-2 first:pt-0 last:pb-0 md:grid-cols-[0.85fr_6fr_0.5fr_1.3fr]">
       <div className="flex flex-col items-center justify-center">
         <div className="hidden w-fit flex-row items-center justify-center gap-1 md:flex">
           <GlobeAsiaAustraliaIcon width={20} height={20} />
@@ -74,7 +70,7 @@ export default function Score({
             className="h-fit min-w-[60px] rounded-md"
             width={60}
             height={60}
-            loading="lazy"
+            priority
           />
           <div
             className="absolute mt-12 flex w-[55px] cursor-default items-center justify-center divide-x divide-y rounded-sm pl-[3px] pr-[3px] text-[0.8rem] opacity-90"
@@ -117,6 +113,10 @@ export default function Score({
         </Link>
       </div>
 
+      <Suspense fallback={<div />}>
+        <MapButtons leaderboard={leaderboard} />
+      </Suspense>
+
       <div className="flex items-center justify-between p-1 md:items-start md:justify-end">
         <div className="flex flex-col md:hidden">
           {/* Score rank */}

src/lib/db/redis.ts

@@ -0,0 +1,26 @@
+import { createClient } from "redis";
+
+let redisClient = await connectRedis();
+
+async function connectRedis(): Promise<any> {
+  // console.log("Connecting to redis");
+  const client = createClient({
+    url: process.env.REDIS_URL,
+  });
+  await client.connect();
+  console.log("Connected to redis");
+
+  client.on("error", (error) => {
+    console.error("There was an error connecting to redis: " + error);
+    setTimeout(async () => {
+      redisClient = await connectRedis();
+    }, 30_000); // 30 seconds
+  });
+
+  return client;
+}
+
+export const Redis = {
+  client: redisClient,
+  connectRedis,
+};

src/lib/overlay/httpSiraStatus.ts

@@ -16,6 +16,7 @@ async function loadIntoSong(data: any) {
     beatsaverMapData.versions[beatsaverMapData.versions.length - 1].coverURL;
 
   overlayDataStore.setState({
+    paused: false,
     scoreStats: {
       accuracy: performance.relativeScore * 100,
       score: performance.rawScore,
@@ -33,6 +34,16 @@ async function loadIntoSong(data: any) {
   });
 }
 
+/**
+ * Reset the state of the overlay
+ */
+function resetState() {
+  overlayDataStore.setState({
+    scoreStats: undefined,
+    songInfo: undefined,
+  });
+}
+
 type Handlers = {
   [key: string]: (data: any) => void;
 };
@@ -64,16 +75,10 @@ const handlers: Handlers = {
 
   // Left the song
   finished: (data: any) => {
-    overlayDataStore.setState({
+    resetState();
-      scoreStats: undefined,
-      songInfo: undefined,
-    });
   },
   menu: (data: any) => {
-    overlayDataStore.setState({
+    resetState();
-      scoreStats: undefined,
-      songInfo: undefined,
-    });
   },
 
   // pause & resume
@@ -106,6 +111,7 @@ function connectWebSocket() {
     console.log(
       "Lost connection to HttpSiraStatus, reconnecting in 5 seconds...",
     );
+    resetState();
     setTimeout(() => {
       connectWebSocket();
     }, 5000); // 5 seconds

src/middleware.ts

@@ -15,15 +15,6 @@ export function middleware(request: NextRequest) {
       return NextResponse.redirect(new URL("/search", request.url));
     }
   }
-
-  const requestHeaders = new Headers(request.headers);
-  requestHeaders.set("x-url", request.url);
-  return NextResponse.next({
-    request: {
-      // New request headers
-      headers: requestHeaders,
-    },
-  });
 }
 
 export const config = {

src/schemas/scoresaber/scoreWithBeatsaverData.ts

@@ -0,0 +1,10 @@
+import { ScoresaberLeaderboardInfo } from "./leaderboard";
+import { ScoresaberScore } from "./score";
+
+export type ScoresaberScoreWithBeatsaverData = {
+  score: ScoresaberScore;
+  leaderboard: ScoresaberLeaderboardInfo;
+
+  // Beatsaver data
+  mapId: string;
+};

src/secrets.ts

@@ -0,0 +1,8 @@
+import InfisicalClient from "infisical-node";
+
+const infisicalClient = new InfisicalClient({
+  token: process.env.INFISICAL_TOKEN,
+  siteURL: "https://secrets.fascinated.cc",
+});
+
+export default infisicalClient;

src/ssrSettings.json

@@ -0,0 +1,7 @@
+{
+  "siteName": "ScoreSaber Reloaded",
+  "siteNameShort": "SSR",
+  "description": "Scoresaber Reloaded is a new way to view your scores and get more stats about your and your plays",
+  "siteUrl": "https://ssr.fascinated.cc",
+  "proxy": "https://proxy.fascinated.cc"
+}

src/ssrSettings.ts

@@ -1,7 +0,0 @@
-export const ssrSettings = {
-  siteName: "ScoreSaber Reloaded",
-  description:
-    "Scoresaber Reloaded is a new way to view your scores and get more stats about your and your plays",
-  siteUrl: "https://ssr.fascinated.cc",
-  proxy: "https://proxy.fascinated.cc",
-};

src/store/IndexedDBStorage.ts

@@ -9,15 +9,34 @@ if (typeof window !== "undefined") {
 }
 
 export const IDBStorage: StateStorage = {
+  /**
+   * Fetch an item from the storage
+   *
+   * @param name name of the item to be fetched
+   * @returns the value of the item or null if it doesn't exist
+   */
   getItem: async (name: string): Promise<string | null> => {
     //console.log(name, "has been retrieved");
 
     return (await get(name, storage)) || null;
   },
+
+  /**
+   * Save an item to the storage
+   *
+   * @param name name of the item to be saved
+   * @param value value of the item to be saved
+   */
   setItem: async (name: string, value: string): Promise<void> => {
     //console.log(name, "with value", value, "has been saved");
     await set(name, value, storage);
   },
+
+  /**
+   * Delete an item from the storage
+   *
+   * @param name name of the item to be deleted
+   */
   removeItem: async (name: string): Promise<void> => {
     //console.log(name, "has been deleted");
     await del(name, storage);

src/utils/beatleader/api.ts

@@ -1,6 +1,6 @@
 import { BeatLeaderPlayer } from "@/schemas/beatleader/player";
 import { BeatleaderScore } from "@/schemas/beatleader/score";
-import { ssrSettings } from "@/ssrSettings";
+import ssrSettings from "@/ssrSettings.json";
 import { FetchQueue } from "../fetchWithQueue";
 import { formatString } from "../string";
 
@@ -28,9 +28,6 @@ async function fetchPlayerData(
   );
   const json = await response.json();
 
-  // Check if there was an error fetching the user data
-  console.log(json);
-
   return json as BeatLeaderPlayer;
 }
 
@@ -67,9 +64,6 @@ async function fetchScores(
   );
   const json = await response.json();
 
-  // Check if there was an error fetching the user data
-  console.log(json);
-
   const metadata = json.metadata;
   return {
     scores: json.data as BeatleaderScore[],

src/utils/beatsaver/api.ts

@@ -1,5 +1,5 @@
 import { BeatsaverMap } from "@/schemas/beatsaver/BeatsaverMap";
-import { ssrSettings } from "@/ssrSettings";
+import ssrSettings from "@/ssrSettings.json";
 import { FetchQueue } from "../fetchWithQueue";
 import { formatString } from "../string";
 
@@ -11,16 +11,21 @@ const BS_API_URL = ssrSettings.proxy + "/https://api.beatsaver.com";
 export const BS_GET_MAP_BY_HASH_URL = BS_API_URL + "/maps/hash/{}";
 
 /**
- * Returns the map info for the provided hash
+ * Returns the map info for the provided hashes
  *
- * @param hash the hash of the map
+ * @param hash the hashes for the maps
  * @returns the map info
  */
-async function fetchMapByHash(
+async function fetchMapsByHash(
-  hash: string,
+  ...hash: string[]
-): Promise<BeatsaverMap | undefined | null> {
+): Promise<{ [key: string]: BeatsaverMap } | undefined> {
+  const hashes = hash.join(",");
   const response = await BeatsaverFetchQueue.fetch(
-    formatString(BS_GET_MAP_BY_HASH_URL, true, hash),
+    formatString(
+      BS_GET_MAP_BY_HASH_URL,
+      true,
+      hashes.substring(0, hashes.length - 1),
+    ),
   );
   const json = await response.json();
 
@@ -29,9 +34,31 @@ async function fetchMapByHash(
     return undefined;
   }
 
-  return json as BeatsaverMap;
+  return json;
+}
+
+/**
+ * Returns the map info for the provided hash
+ *
+ * @param hash the hash of the map
+ * @returns the map info
+ */
+async function fetchMapByHash(hash: string): Promise<BeatsaverMap | undefined> {
+  const response = await BeatsaverFetchQueue.fetch(
+    formatString(BS_GET_MAP_BY_HASH_URL, true, hash),
+  );
+  console.log(formatString(BS_GET_MAP_BY_HASH_URL, true, hash));
+  const json = await response.json();
+
+  // Check if there was an error fetching the user data
+  if (json.error) {
+    return undefined;
+  }
+
+  return json;
 }
 
 export const BeatsaverAPI = {
+  fetchMapsByHash,
   fetchMapByHash,
 };

src/utils/fetchWithQueue.ts

@@ -13,7 +13,7 @@ export class FetchQueue {
    * @param url - The URL to fetch.
    * @returns The response.
    */
-  public async fetch(url: string, options?: any): Promise<any> {
+  public async fetch(url: string, options?: any): Promise<Response> {
     const now = Date.now();
 
     if (now < this.rateLimitReset) {
@@ -23,7 +23,12 @@ export class FetchQueue {
       );
     }
 
-    const response = await fetch(url, options);
+    const response = await fetch(url, {
+      ...options,
+      next: {
+        revalidate: 300, // 5 minutes
+      },
+    });
     if (response.status === 429) {
       const hasRetryAfterHeader = response.headers.has("retry-after");
       let retryAfter = hasRetryAfterHeader

src/utils/scoresaber/api.ts

@@ -2,9 +2,11 @@ import { ScoresaberLeaderboardInfo } from "@/schemas/scoresaber/leaderboard";
 import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
 import { ScoresaberPlayerScore } from "@/schemas/scoresaber/playerScore";
 import { ScoresaberScore } from "@/schemas/scoresaber/score";
-import { ssrSettings } from "@/ssrSettings";
+import { ScoresaberScoreWithBeatsaverData } from "@/schemas/scoresaber/scoreWithBeatsaverData";
+import ssrSettings from "@/ssrSettings.json";
 import { FetchQueue } from "../fetchWithQueue";
 import { formatString } from "../string";
+import { isProduction } from "../utils";
 
 // Create a fetch instance with a cache
 export const ScoresaberFetchQueue = new FetchQueue();
@@ -123,6 +125,88 @@ async function fetchScores(
   };
 }
 
+/**
+ * Gets the players scores with beatsaver data from the given page
+ *
+ * @param playerId the id of the player
+ * @param page the page to get the scores from
+ * @param searchType the type of search to perform
+ * @param limit the limit of scores to get
+ * @returns the scores with beatsaver data
+ */
+async function fetchScoresWithBeatsaverData(
+  playerId: string,
+  page: number = 1,
+  searchType: string = SearchType.RECENT,
+  limit: number = 100,
+): Promise<
+  | {
+      scores: Record<string, ScoresaberScoreWithBeatsaverData>;
+      pageInfo: {
+        totalScores: number;
+        page: number;
+        totalPages: number;
+      };
+    }
+  | undefined
+> {
+  if (limit > 100) {
+    throw new Error("Limit cannot be greater than 100");
+  }
+  const response = await ScoresaberFetchQueue.fetch(
+    formatString(SS_PLAYER_SCORES, true, playerId, limit, searchType, page),
+  );
+  const json = await response.json();
+
+  // Check if there was an error fetching the user data
+  if (json.errorMessage) {
+    return undefined;
+  }
+
+  const scores = json.playerScores as ScoresaberPlayerScore[];
+  const metadata = json.metadata;
+
+  // Fetch the beatsaver data for each score
+  const scoresWithBeatsaverData: Record<
+    string,
+    ScoresaberScoreWithBeatsaverData
+  > = {};
+
+  let url = `${
+    isProduction() ? ssrSettings.siteUrl : "http://localhost:3000"
+  }/api/beatsaver/mapdata?hashes=`;
+  for (const score of scores) {
+    url += `${score.leaderboard.songHash},`;
+  }
+  url = url.substring(0, url.length - 1);
+  url += "&idonly=true";
+  const mapResponse = await fetch(url, {
+    next: {
+      revalidate: 60 * 60 * 24 * 7, // 1 week
+    },
+  });
+  const mapJson = await mapResponse.json();
+  for (const score of scores) {
+    const mapData = mapJson.maps[score.leaderboard.songHash];
+    if (mapData) {
+      scoresWithBeatsaverData[score.leaderboard.songHash] = {
+        score: score.score,
+        leaderboard: score.leaderboard,
+        mapId: mapData.id,
+      };
+    }
+  }
+
+  return {
+    scores: scoresWithBeatsaverData,
+    pageInfo: {
+      totalScores: metadata.total,
+      page: metadata.page,
+      totalPages: Math.ceil(metadata.total / metadata.itemsPerPage),
+    },
+  };
+}
+
 /**
  * Gets all of the players for the given player id
  *
@@ -275,6 +359,7 @@ export const ScoreSaberAPI = {
   searchByName,
   fetchPlayerData,
   fetchScores,
+  fetchScoresWithBeatsaverData,
   fetchAllScores,
   fetchTopPlayers,
   fetchLeaderboardInfo,

src/utils/scoresaber/scores.ts

@@ -113,13 +113,6 @@ function calcRawPpAtIdx(
   );
 }
 
-/**
- * Gets the amount of raw pp needed to gain the expected pp
- *
- * @param playerId the player id
- * @param expectedPp the expected pp
- * @returns the pp boundary (+ per raw pp)
- */
 /**
  * Gets the amount of raw pp needed to gain the expected pp
  *

src/utils/songUtils.ts

@@ -48,3 +48,30 @@ export function scoresaberDifficultyNumberToName(
       return "unknown";
   }
 }
+
+/**
+ * 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(" ", "+"));
+}

src/utils/timeUtils.ts

@@ -31,7 +31,7 @@ export function formatTimeAgo(timestamp: string) {
  * @param timestamp the timestamp to format
  * @returns the formatted timestamp
  */
-export function formatDate(timestamp: string) {
+export function formatDate(timestamp: any) {
   const date = parseISO(timestamp);
   return date.toLocaleDateString("en-US", {
     year: "numeric",

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "ES2016",
+    "target": "ES2022",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
@@ -13,6 +13,7 @@
     "isolatedModules": true,
     "jsx": "preserve",
     "incremental": true,
+    "removeComments": true,
     "plugins": [
       {
         "name": "next"
@@ -22,6 +23,12 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    "src/secrets.ts"
+  ],
   "exclude": ["node_modules"]
 }