add diff names to scores
All checks were successful
deploy / deploy (push) Successful in 53s

This commit is contained in:
Lee 2023-10-26 17:37:35 +01:00
parent 9d5bc819e8
commit 8a4ec7d153
3 changed files with 67 additions and 11 deletions

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

@ -2,6 +2,10 @@ import { ScoresaberLeaderboardInfo } from "@/schemas/scoresaber/leaderboard";
import { ScoresaberPlayer } from "@/schemas/scoresaber/player"; import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
import { ScoresaberScore } from "@/schemas/scoresaber/score"; import { ScoresaberScore } from "@/schemas/scoresaber/score";
import { formatNumber } from "@/utils/number"; import { formatNumber } from "@/utils/number";
import {
scoresaberDifficultyNumberToName,
songDifficultyToColor,
} from "@/utils/songUtils";
import { formatDate, formatTimeAgo } from "@/utils/timeUtils"; import { formatDate, formatTimeAgo } from "@/utils/timeUtils";
import { import {
CheckIcon, CheckIcon,
@ -20,6 +24,9 @@ type ScoreProps = {
export default function Score({ score, player, leaderboard }: ScoreProps) { export default function Score({ score, player, leaderboard }: ScoreProps) {
const isFullCombo = score.missedNotes + score.badCuts === 0; const isFullCombo = score.missedNotes + score.badCuts === 0;
const diffName = scoresaberDifficultyNumberToName(
leaderboard.difficulty.difficulty,
);
return ( 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]"> <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,6 +44,7 @@ export default function Score({ score, player, leaderboard }: ScoreProps) {
</div> </div>
{/* Song Image */} {/* Song Image */}
<div className="flex w-full items-center gap-2"> <div className="flex w-full items-center gap-2">
<div className="flex justify-end">
<Image <Image
src={leaderboard.coverImage} src={leaderboard.coverImage}
alt={leaderboard.songName} alt={leaderboard.songName}
@ -44,8 +52,21 @@ export default function Score({ score, player, leaderboard }: ScoreProps) {
width={60} width={60}
height={60} height={60}
loading="lazy" loading="lazy"
placeholder="blur"
/> />
<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 */} {/* Song Info */}
<div className="w-fit truncate text-blue-500"> <div className="w-fit truncate text-blue-500">
<p>{leaderboard.songName}</p> <p>{leaderboard.songName}</p>

37
src/utils/songUtils.ts Normal file

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