add diff labels and star count
All checks were successful
Deploy SSR / deploy (push) Successful in 1m10s

This commit is contained in:
Lee 2024-09-12 00:20:50 +01:00
parent ea06a282ae
commit aca00aa7c8
4 changed files with 55 additions and 12 deletions

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

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

@ -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";
}
}
}

@ -4,11 +4,12 @@ import { copyToClipboard } from "@/common/browser-utils";
import { beatsaverFetcher } from "@/common/data-fetcher/impl/beatsaver"; import { beatsaverFetcher } from "@/common/data-fetcher/impl/beatsaver";
import ScoreSaberPlayerScore from "@/common/data-fetcher/types/scoresaber/scoresaber-player-score"; import ScoreSaberPlayerScore from "@/common/data-fetcher/types/scoresaber/scoresaber-player-score";
import { formatNumberWithCommas } from "@/common/number-utils"; import { formatNumberWithCommas } from "@/common/number-utils";
import { getDifficultyFromScoreSaberDifficulty } from "@/common/scoresaber-utils";
import { songNameToYouTubeLink } from "@/common/song-utils"; import { songNameToYouTubeLink } from "@/common/song-utils";
import { timeAgo } from "@/common/time-utils"; import { timeAgo } from "@/common/time-utils";
import YouTubeLogo from "@/components/logos/youtube-logo"; import YouTubeLogo from "@/components/logos/youtube-logo";
import { useToast } from "@/hooks/use-toast"; 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 Image from "next/image";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import BeatSaverLogo from "../../logos/beatsaver-logo"; 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> <p className="text-sm">{timeAgo(new Date(score.timeSet))}</p>
</div> </div>
<div className="flex gap-3"> <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">
<div className="flex flex-col"> <div className="flex flex-col">
<p className="text-pp text-ellipsis">{leaderboard.songName}</p> <p className="text-pp text-ellipsis">{leaderboard.songName}</p>