fix avatar and show more data

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

@@ -100,10 +100,10 @@ export default function Player({ params }: { params: { id: string } }) {
   return (
     <main>
       <Container>
-        <div className="mt-2 flex w-full flex-row justify-center rounded-sm bg-neutral-800 md:flex-col">
-          <div className="flex flex-col items-center gap-3 p-3 md:flex-row md:items-start">
+        <div className="mt-2 flex w-full flex-row justify-center rounded-sm bg-neutral-800 xs:flex-col">
+          <div className="flex flex-col items-center gap-3 p-3 xs:flex-row xs:items-start">
             <Avatar url={playerData.profilePicture} label="Avatar" />
-            <div className="flex flex-col items-center gap-2 md:items-start">
+            <div className="flex flex-col items-center gap-2 xs:items-start">
               <p className="text-2xl">{playerData.name}</p>
 
               <div className="flex gap-3 text-xl">
@@ -129,11 +129,32 @@ export default function Player({ params }: { params: { id: string } }) {
                 </div>
               </div>
               {/* Labels */}
-              <div>
-                <Label
-                  title="Total play count"
-                  value={formatNumber(playerData.scoreStats.totalPlayCount)}
-                />
+              <div className="flex flex-col gap-2">
+                <div className="flex gap-2">
+                  <Label
+                    title="Total play count"
+                    className="bg-blue-500"
+                    value={formatNumber(playerData.scoreStats.totalPlayCount)}
+                  />
+                  <Label
+                    title="Total score"
+                    className="bg-blue-500"
+                    value={formatNumber(playerData.scoreStats.totalScore)}
+                  />
+                  <Label
+                    title="Avg ranked acc"
+                    className="bg-blue-500"
+                    value={`${playerData.scoreStats.averageRankedAccuracy.toFixed(
+                      2,
+                    )}%`}
+                  />
+                </div>
+                <div className="flex gap-2">
+                  <Label
+                    title="Replays watched"
+                    value={formatNumber(playerData.scoreStats.replaysWatched)}
+                  />
+                </div>
               </div>
             </div>
           </div>

src/components/Label.tsx

@@ -1,11 +1,18 @@
+import clsx from "clsx";
+
 type LabelProps = {
   title: string;
   value: string;
+  className?: string;
 };
 
-export default function Label({ title, value }: LabelProps) {
+export default function Label({
+  title,
+  value,
+  className = "bg-neutral-700",
+}: LabelProps) {
   return (
-    <div className="flex flex-col justify-center rounded-md bg-neutral-700">
+    <div className={clsx("flex flex-col justify-center rounded-md", className)}>
       <div className="flex items-center gap-2 p-[0.3rem]">
         <p>{title}</p>
         <div className="h-4 w-[1px] bg-neutral-100"></div>

src/store/settingsStore.ts

@@ -0,0 +1,19 @@
+"use client";
+
+import { create } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
+
+export const useSettingsStore = create(
+  persist(
+    (set: any, get: any) => ({
+      userId: null,
+
+      setUserId: (userId: string) => set({ userId: userId }),
+    }),
+    {
+      name: "settings", // name of the item in the storage (must be unique)
+      storage: createJSONStorage(() => sessionStorage), // (optional) by default, 'localStorage' is used
+      skipHydration: true,
+    },
+  ),
+);

src/utils/scoresaber/api.ts

@@ -1,5 +1,4 @@
 import { connectMongo } from "@/database/mongo";
-import { PlayerSchema } from "@/database/schemas/player";
 import { logger } from "@/logger";
 import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
 import { ScoresaberPlayerScore } from "@/schemas/scoresaber/playerScore";
@@ -55,12 +54,6 @@ export async function getPlayerInfo(
   apiOnly = false,
 ): Promise<ScoresaberPlayer | undefined | null> {
   await connectMongo();
-  const isPlayerInDb = await PlayerSchema.exists({ _id: playerId });
-  if (isPlayerInDb && !apiOnly) {
-    const player = await PlayerSchema.findById({ _id: playerId });
-    return player.scoresaber;
-  }
-
   const response = await fetchQueue.fetch(
     formatString(GET_PLAYER_DATA_FULL, playerId),
   );