This commit is contained in:
parent
9d5bc819e8
commit
8a4ec7d153
@ -22,8 +22,6 @@ export default function Avatar({
|
||||
src={url}
|
||||
width={size}
|
||||
height={size}
|
||||
loading="lazy"
|
||||
placeholder="blur"
|
||||
priority
|
||||
/>
|
||||
</>
|
||||
|
@ -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
|
||||
src={leaderboard.coverImage}
|
||||
alt={leaderboard.songName}
|
||||
className="h-fit rounded-md"
|
||||
width={60}
|
||||
height={60}
|
||||
loading="lazy"
|
||||
placeholder="blur"
|
||||
/>
|
||||
<div className="flex justify-end">
|
||||
<Image
|
||||
src={leaderboard.coverImage}
|
||||
alt={leaderboard.songName}
|
||||
className="h-fit rounded-md"
|
||||
width={60}
|
||||
height={60}
|
||||
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>
|
||||
|
37
src/utils/songUtils.ts
Normal file
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";
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user