add diff labels and star count

src/common/data-fetcher/data-fetcher.ts

@@ -37,7 +37,7 @@ export default class DataFetcher {
    * @param url the url to fetch
    * @returns the fetched data
    */
-  public async fetch<T>(useProxy: boolean, url: string): Promise<T> {
+  public async fetch<T>(useProxy: boolean, url: string): Promise<T | undefined> {
     try {
       return await ky
         .get<T>(this.buildRequestUrl(useProxy, url), {
@@ -47,8 +47,8 @@ export default class DataFetcher {
         })
         .json();
     } catch (error) {
-      console.error(error);
+      console.error(`Error fetching data from ${url}:`, error);
-      throw error;
+      return undefined;
     }
   }
 }

src/common/data-fetcher/impl/scoresaber.ts

@@ -27,6 +27,9 @@ class ScoreSaberFetcher extends DataFetcher {
       useProxy,
       SEARCH_PLAYERS_ENDPOINT.replace(":query", query)
     );
+    if (results === undefined) {
+      return undefined;
+    }
     if (results.players.length === 0) {
       return undefined;
     }

src/common/scoresaber-utils.ts

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

src/components/player/score/score.tsx

@@ -4,11 +4,12 @@ import { copyToClipboard } from "@/common/browser-utils";
 import { beatsaverFetcher } from "@/common/data-fetcher/impl/beatsaver";
 import ScoreSaberPlayerScore from "@/common/data-fetcher/types/scoresaber/scoresaber-player-score";
 import { formatNumberWithCommas } from "@/common/number-utils";
+import { getDifficultyFromScoreSaberDifficulty } from "@/common/scoresaber-utils";
 import { songNameToYouTubeLink } from "@/common/song-utils";
 import { timeAgo } from "@/common/time-utils";
 import YouTubeLogo from "@/components/logos/youtube-logo";
 import { useToast } from "@/hooks/use-toast";
-import { GlobeAmericasIcon } from "@heroicons/react/24/solid";
+import { GlobeAmericasIcon, StarIcon } from "@heroicons/react/24/solid";
 import Image from "next/image";
 import { useEffect, useState } from "react";
 import BeatSaverLogo from "../../logos/beatsaver-logo";
@@ -43,14 +44,26 @@ export default function Score({ playerScore }: Props) {
         <p className="text-sm">{timeAgo(new Date(score.timeSet))}</p>
       </div>
       <div className="flex gap-3">
-        <Image
+        <div className="relative flex justify-center">
-          unoptimized
+          <div className="absolute bg-pp/95 w-[85%] h-[20px] bottom-0 mb-[-5px] rounded-sm flex justify-center items-center text-xs">
-          src={leaderboard.coverImage}
+            {leaderboard.stars > 0 ? (
-          width={64}
+              <div className="flex gap-1 items-center justify-center">
-          height={64}
+                <p>{leaderboard.stars}</p>
-          alt="Song Artwork"
+                <StarIcon className="w-4 h-4" />
-          className="rounded-md"
+              </div>
-        />
+            ) : (
+              <p>{getDifficultyFromScoreSaberDifficulty(leaderboard.difficulty.difficulty)}</p>
+            )}
+          </div>
+          <Image
+            unoptimized
+            src={leaderboard.coverImage}
+            width={64}
+            height={64}
+            alt="Song Artwork"
+            className="rounded-md"
+          />
+        </div>
         <div className="flex">
           <div className="flex flex-col">
             <p className="text-pp text-ellipsis">{leaderboard.songName}</p>