add diff names to scores

src/components/Avatar.tsx

@@ -22,8 +22,6 @@ export default function Avatar({
         src={url}
         width={size}
         height={size}
-        loading="lazy"
-        placeholder="blur"
         priority
       />
     </>

src/components/player/Score.tsx

@@ -2,6 +2,10 @@ import { ScoresaberLeaderboardInfo } from "@/schemas/scoresaber/leaderboard";
 import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
 import { ScoresaberScore } from "@/schemas/scoresaber/score";
 import { formatNumber } from "@/utils/number";
+import {
+  scoresaberDifficultyNumberToName,
+  songDifficultyToColor,
+} from "@/utils/songUtils";
 import { formatDate, formatTimeAgo } from "@/utils/timeUtils";
 import {
   CheckIcon,
@@ -20,6 +24,9 @@ type ScoreProps = {
 
 export default function Score({ score, player, leaderboard }: ScoreProps) {
   const isFullCombo = score.missedNotes + score.badCuts === 0;
+  const diffName = scoresaberDifficultyNumberToName(
+    leaderboard.difficulty.difficulty,
+  );
 
   return (
     <div className="grid grid-cols-1 pb-2 pt-2 first:pt-0 last:pb-0 md:grid-cols-[1.2fr_6fr_3fr] xl:grid-cols-[1fr_6fr_3fr]">
@@ -37,15 +44,29 @@ export default function Score({ score, player, leaderboard }: ScoreProps) {
       </div>
       {/* Song Image */}
       <div className="flex w-full items-center gap-2">
-        <Image
+        <div className="flex justify-end">
-          src={leaderboard.coverImage}
+          <Image
-          alt={leaderboard.songName}
+            src={leaderboard.coverImage}
-          className="h-fit rounded-md"
+            alt={leaderboard.songName}
-          width={60}
+            className="h-fit rounded-md"
-          height={60}
+            width={60}
-          loading="lazy"
+            height={60}
-          placeholder="blur"
+            loading="lazy"
-        />
+          />
+          <div
+            className="absolute mt-9 cursor-default divide-x divide-y rounded-sm p-[1px] text-sm opacity-90"
+            style={{
+              backgroundColor: songDifficultyToColor(diffName),
+            }}
+          >
+            <p className="text-white" title={diffName}>
+              {scoresaberDifficultyNumberToName(
+                leaderboard.difficulty.difficulty,
+                true,
+              )}
+            </p>
+          </div>
+        </div>
         {/* Song Info */}
         <div className="w-fit truncate text-blue-500">
           <p>{leaderboard.songName}</p>

src/utils/songUtils.ts

@@ -0,0 +1,37 @@
+export function songDifficultyToColor(diff: string) {
+  console.log(diff);
+  switch (diff.toLowerCase()) {
+    case "easy":
+      return "#3cb371";
+    case "normal":
+      return "#59b0f4";
+    case "hard":
+      return "#FF6347";
+    case "expert":
+      return "#bf2a42";
+    case "expert+":
+      return "#8f48db";
+    default:
+      return "gray";
+  }
+}
+
+export function scoresaberDifficultyNumberToName(
+  diff: number,
+  shortened: boolean = false,
+) {
+  switch (diff) {
+    case 1:
+      return !shortened ? "Easy" : "E";
+    case 3:
+      return !shortened ? "Normal" : "N";
+    case 5:
+      return !shortened ? "Hard" : "H";
+    case 7:
+      return !shortened ? "Expert" : "Ex";
+    case 9:
+      return !shortened ? "Expert+" : "Ex+";
+    default:
+      return "unknown";
+  }
+}