add tooltip and diff colors

src/common/song-utils.ts

@@ -1,22 +1,22 @@
 /**
- * Turns a song name and author into a YouTube link
+ * Turns the difficulty of a song into a color
  *
- * @param name the name of the song
+ * @param diff the difficulty to get the color for
- * @param songSubName the sub name of the song
+ * @returns the color for the difficulty
- * @param author the author of the song
- * @returns the YouTube link for the song
  */
-export function songNameToYouTubeLink(name: string, songSubName: string, author: string) {
+export function songDifficultyToColor(diff: string) {
-  const baseUrl = "https://www.youtube.com/results?search_query=";
+  switch (diff.toLowerCase()) {
-  let query = "";
+    case "easy":
-  if (name) {
+      return "#3cb371";
-    query += `${name} `;
+    case "normal":
+      return "#59b0f4";
+    case "hard":
+      return "#FF6347";
+    case "expert":
+      return "#bf2a42";
+    case "expert+":
+      return "#8f48db";
+    default:
+      return "gray";
   }
-  if (songSubName) {
-    query += `${songSubName} `;
-  }
-  if (author) {
-    query += `${author} `;
-  }
-  return encodeURI(baseUrl + query.trim().replaceAll(" ", "+"));
 }

src/common/youtube-utils.ts

@@ -0,0 +1,22 @@
+/**
+ * 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/components/player/score/score.tsx

@@ -5,9 +5,11 @@ 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 { songDifficultyToColor } from "@/common/song-utils";
 import { timeAgo } from "@/common/time-utils";
+import { songNameToYouTubeLink } from "@/common/youtube-utils";
 import YouTubeLogo from "@/components/logos/youtube-logo";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { useToast } from "@/hooks/use-toast";
 import { GlobeAmericasIcon, StarIcon } from "@heroicons/react/24/solid";
 import Image from "next/image";
@@ -34,6 +36,8 @@ export default function Score({ playerScore }: Props) {
     })();
   }, [playerScore, leaderboard.songHash]);
 
+  const diff = getDifficultyFromScoreSaberDifficulty(leaderboard.difficulty.difficulty);
+
   return (
     <div className="grid gap-2 md:gap-0 pb-2 pt-2 first:pt-0 last:pb-0 grid-cols-[20px 1fr_1fr] md:grid-cols-[0.85fr_5fr_1fr_1.2fr]">
       <div className="flex w-full flex-row justify-between items-center md:w-[125px] md:justify-center md:flex-col">
@@ -45,16 +49,34 @@ export default function Score({ playerScore }: Props) {
       </div>
       <div className="flex gap-3">
         <div className="relative flex justify-center">
-          <div className="absolute bg-pp/95 w-[85%] h-[20px] bottom-0 mb-[-5px] rounded-sm flex justify-center items-center text-xs">
+          <Tooltip>
-            {leaderboard.stars > 0 ? (
+            <TooltipTrigger
-              <div className="flex gap-1 items-center justify-center">
+              asChild
-                <p>{leaderboard.stars}</p>
+              className="absolute w-[85%] h-[20px] bottom-0 mb-[-5px] rounded-sm flex justify-center items-center text-xs"
-                <StarIcon className="w-4 h-4" />
+              style={{
-              </div>
+                backgroundColor: songDifficultyToColor(diff) + "f0", // Transparency value (in hex 0-255)
-            ) : (
+              }}
-              <p>{getDifficultyFromScoreSaberDifficulty(leaderboard.difficulty.difficulty)}</p>
+            >
-            )}
+              {leaderboard.stars > 0 ? (
-          </div>
+                <div className="flex gap-1 items-center justify-center">
+                  <p>{leaderboard.stars}</p>
+                  <StarIcon className="w-4 h-4" />
+                </div>
+              ) : (
+                <p>{diff}</p>
+              )}
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>
+                Difficulty: <span className="font-bold">{diff}</span>
+              </p>
+              {leaderboard.stars > 0 && (
+                <p>
+                  Stars: <span className="font-bold">{leaderboard.stars}</span>
+                </p>
+              )}
+            </TooltipContent>
+          </Tooltip>
           <Image
             unoptimized
             src={leaderboard.coverImage}