42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
import { useParty } from "#/hooks/use-party";
|
|
|
|
export function Results() {
|
|
const { party, members } = useParty();
|
|
if (!party?.data) return null;
|
|
|
|
const leaderboard = members
|
|
.map((member) => ({
|
|
member,
|
|
score: party.data.scores[member.userId] ?? 0,
|
|
}))
|
|
.sort(
|
|
(a, b) =>
|
|
b.score - a.score ||
|
|
Number(a.member.joinedAt) - Number(b.member.joinedAt),
|
|
);
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<h2 className="text-2xl font-semibold text-foreground">Leaderboard</h2>
|
|
<div className="space-y-2">
|
|
{leaderboard.length === 0 ? (
|
|
<p className="text-sm text-muted-foreground">No scores yet.</p>
|
|
) : (
|
|
leaderboard.map(({ member, score }, index) => (
|
|
<div
|
|
key={member.id}
|
|
className="flex items-center justify-between rounded-xl border border-foreground/10 bg-card px-4 py-3"
|
|
>
|
|
<div>
|
|
<p className="font-medium text-foreground">
|
|
{index + 1}. {member.user?.name ?? "Unknown player"}
|
|
</p>
|
|
</div>
|
|
<p className="text-sm text-muted-foreground">{score} points</p>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|