+
);
}
diff --git a/src/app/components/input/search-player.tsx b/src/app/components/input/search-player.tsx
index 395f8ae..94ddefd 100644
--- a/src/app/components/input/search-player.tsx
+++ b/src/app/components/input/search-player.tsx
@@ -69,7 +69,7 @@ export default function SearchPlayer() {
{results?.map((player) => {
return (
diff --git a/src/app/components/navbar/navbar-button.tsx b/src/app/components/navbar/navbar-button.tsx
new file mode 100644
index 0000000..1acabba
--- /dev/null
+++ b/src/app/components/navbar/navbar-button.tsx
@@ -0,0 +1,11 @@
+type Props = {
+ children: React.ReactNode;
+};
+
+export default function NavbarButton({ children }: Props) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/src/app/components/navbar.tsx b/src/app/components/navbar/navbar.tsx
similarity index 59%
rename from src/app/components/navbar.tsx
rename to src/app/components/navbar/navbar.tsx
index 652388f..541334d 100644
--- a/src/app/components/navbar.tsx
+++ b/src/app/components/navbar/navbar.tsx
@@ -1,5 +1,9 @@
+import { HomeIcon } from "@heroicons/react/24/solid";
+import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
import Link from "next/link";
import React from "react";
+import NavbarButton from "./navbar-button";
+import ProfileButton from "./profile-button";
type NavbarItem = {
name: string;
@@ -11,12 +15,12 @@ const items: NavbarItem[] = [
{
name: "Home",
link: "/",
- icon: undefined, // Add your home icon here
+ icon:
-
+
+
+
+
+
+ );
+}
diff --git a/src/app/components/player/player-data.tsx b/src/app/components/player/player-data.tsx
new file mode 100644
index 0000000..a3afc49
--- /dev/null
+++ b/src/app/components/player/player-data.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import { scoresaberLeaderboard } from "@/app/common/leaderboard/impl/scoresaber";
+import ScoreSaberPlayer from "@/app/common/leaderboard/types/scoresaber/scoresaber-player";
+import { useQuery } from "@tanstack/react-query";
+import PlayerHeader from "./player-header";
+
+const REFRESH_INTERVAL = 5 * 60 * 1000; // 5 minutes
+
+type Props = {
+ initalPlayerData: ScoreSaberPlayer;
+};
+
+export default function PlayerData({ initalPlayerData }: Props) {
+ let player = initalPlayerData;
+ const { data, isLoading, isError } = useQuery({
+ queryKey: ["player", player.id],
+ queryFn: () => scoresaberLeaderboard.lookupPlayer(player.id),
+ refetchInterval: REFRESH_INTERVAL,
+ });
+
+ if (data && (!isLoading || !isError)) {
+ player = data;
+ }
+
+ return (
+ {children} ;
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 82fed7e..8b7ef48 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,7 +2,8 @@ import type { Metadata } from "next";
import localFont from "next/font/local";
import BackgroundImage from "./components/background-image";
import DatabaseLoader from "./components/loaders/database-loader";
-import NavBar from "./components/navbar";
+import NavBar from "./components/navbar/navbar";
+import { QueryProvider } from "./components/providers/query-provider";
import { ThemeProvider } from "./components/providers/theme-provider";
import { Toaster } from "./components/ui/toaster";
import { TooltipProvider } from "./components/ui/tooltip";
@@ -63,10 +64,12 @@ export default function RootLayout({
-
-
+
+
+
+
diff --git a/src/middleware.ts b/src/middleware.ts
deleted file mode 100644
index 28b1e81..0000000
--- a/src/middleware.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import type { NextRequest } from "next/server";
-import { NextResponse } from "next/server";
-
-export function middleware(request: NextRequest) {
- const { pathname } = request.nextUrl;
- const cookies = request.cookies;
-
- const playerIdCookie = cookies.get("playerId");
- if (pathname == "/") {
- if (playerIdCookie) {
- return NextResponse.redirect(new URL(`/player/${playerIdCookie.value}`, request.url));
- } else {
- return NextResponse.redirect(new URL("/search", request.url));
- }
- }
-}
-
-export const config = {
- matcher: "/((?!api|_next/static|_next/image|favicon.ico).*)",
-};
{/* Left-aligned items */}
-
);
diff --git a/src/app/components/navbar/profile-button.tsx b/src/app/components/navbar/profile-button.tsx
new file mode 100644
index 0000000..47a54c8
--- /dev/null
+++ b/src/app/components/navbar/profile-button.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import useDatabase from "@/app/hooks/use-database";
+import { useLiveQuery } from "dexie-react-hooks";
+import Link from "next/link";
+import { Avatar, AvatarImage } from "../ui/avatar";
+import NavbarButton from "./navbar-button";
+
+export default function ProfileButton() {
+ const database = useDatabase();
+ const settings = useLiveQuery(() => database.getSettings());
+
+ if (settings == undefined) {
+ return; // Settings hasn't loaded yet
+ }
+
+ return (
+
+
+
{/* Right-aligned item */}
-
+
{renderNavbarItem(item)}
-
+
))}
+
{renderNavbarItem(items[items.length - 1])}
-
+
You
+ +
+
+ );
+}
diff --git a/src/app/components/player/player-header.tsx b/src/app/components/player/player-header.tsx
new file mode 100644
index 0000000..918e0f2
--- /dev/null
+++ b/src/app/components/player/player-header.tsx
@@ -0,0 +1,62 @@
+import ScoreSaberPlayer from "@/app/common/leaderboard/types/scoresaber/scoresaber-player";
+import { formatNumberWithCommas } from "@/app/common/number-utils";
+import { GlobeAmericasIcon } from "@heroicons/react/24/solid";
+import CountryFlag from "../country-flag";
+import { Avatar, AvatarImage } from "../ui/avatar";
+import ClaimProfile from "./claim-profile";
+import PlayerSubName from "./player-sub-name";
+
+const playerSubNames = [
+ {
+ icon: () => {
+ return #{formatNumberWithCommas(player.rank)}
; + }, + }, + { + icon: (player: ScoreSaberPlayer) => { + return#{formatNumberWithCommas(player.countryRank)}
; + }, + }, + { + render: (player: ScoreSaberPlayer) => { + return{formatNumberWithCommas(player.pp)}pp
; + }, + }, +]; + +type Props = { + player: ScoreSaberPlayer; +}; + +export default function PlayerHeader({ player }: Props) { + return ( +
+
+ );
+}
diff --git a/src/app/components/providers/query-provider.tsx b/src/app/components/providers/query-provider.tsx
new file mode 100644
index 0000000..c19f40e
--- /dev/null
+++ b/src/app/components/providers/query-provider.tsx
@@ -0,0 +1,13 @@
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+type Props = {
+ children: React.ReactNode;
+};
+
+const queryClient = new QueryClient();
+
+export function QueryProvider({ children }: Props) {
+ return
+
+
+
+
+
+ {player.name}
+
+ {playerSubNames.map((subName, index) => {
+ return (
+
+ {subName.render(player)}
+
+ );
+ })}
+
+
+
+