feat(qualification): add aim trainer leaderboard
Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent) Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
This commit is contained in:
parent
320fe4b36e
commit
d04b2d3ecb
2 changed files with 330 additions and 0 deletions
220
src/components/frontend/qualification/AimTrainerLeaderboard.tsx
Normal file
220
src/components/frontend/qualification/AimTrainerLeaderboard.tsx
Normal file
|
|
@ -0,0 +1,220 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { Trophy } from "lucide-react";
|
||||||
|
|
||||||
|
import type { AimTrainerDifficulty } from "@/lib/aim-trainer";
|
||||||
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||||
|
import { Skeleton } from "@/components/ui/skeleton";
|
||||||
|
import type { PresenceParticipant } from "@/hooks/useRealtimePresence";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import {
|
||||||
|
AIM_TRAINER_LEADERBOARD_FIELDS,
|
||||||
|
readAimTrainerProfiles,
|
||||||
|
} from "./aimTrainerLeaderboardData";
|
||||||
|
|
||||||
|
type LeaderboardRow = {
|
||||||
|
readonly id: number;
|
||||||
|
readonly name: string;
|
||||||
|
readonly gamesPlayed: number;
|
||||||
|
readonly bestScore: number;
|
||||||
|
readonly bestAccuracy: number;
|
||||||
|
readonly isCurrentUser: boolean;
|
||||||
|
readonly isOutsideTopTen?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
function rankClass(index: number): string {
|
||||||
|
if (index === 0) return "font-bold text-primary";
|
||||||
|
if (index === 1) return "font-semibold text-foreground";
|
||||||
|
if (index === 2) return "font-semibold text-muted-foreground";
|
||||||
|
return "text-muted-foreground";
|
||||||
|
}
|
||||||
|
|
||||||
|
export function AimTrainerLeaderboard({
|
||||||
|
refreshKey = 0,
|
||||||
|
difficulty,
|
||||||
|
currentUserId,
|
||||||
|
activeTrainees = [],
|
||||||
|
}: {
|
||||||
|
readonly refreshKey?: number;
|
||||||
|
readonly difficulty: AimTrainerDifficulty;
|
||||||
|
readonly currentUserId?: number | string;
|
||||||
|
readonly activeTrainees?: readonly PresenceParticipant[];
|
||||||
|
}) {
|
||||||
|
const [rows, setRows] = useState<readonly LeaderboardRow[] | null>(null);
|
||||||
|
const [failed, setFailed] = useState<string | null>(null);
|
||||||
|
const tier = AIM_TRAINER_LEADERBOARD_FIELDS[difficulty];
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let cancelled = false;
|
||||||
|
setFailed(null);
|
||||||
|
setRows(null);
|
||||||
|
const field = `progression.minigames.aimTrainer.${tier.scoreField}`;
|
||||||
|
const params = new URLSearchParams({
|
||||||
|
sort: `-${field}`,
|
||||||
|
limit: "100",
|
||||||
|
depth: "1",
|
||||||
|
});
|
||||||
|
|
||||||
|
fetch(`/api/profiles?${params.toString()}`)
|
||||||
|
.then(async (response) => {
|
||||||
|
if (!response.ok) throw new Error("leaderboard fetch failed");
|
||||||
|
const payload: unknown = await response.json();
|
||||||
|
return readAimTrainerProfiles(payload);
|
||||||
|
})
|
||||||
|
.then((profiles) => {
|
||||||
|
if (cancelled) return;
|
||||||
|
const mapped: LeaderboardRow[] = profiles.map((profile) => {
|
||||||
|
const user =
|
||||||
|
typeof profile.user === "object" && profile.user !== null ? profile.user : null;
|
||||||
|
const userId = user?.id ?? (typeof profile.user === "number" ? profile.user : null);
|
||||||
|
const name =
|
||||||
|
user?.displayName ||
|
||||||
|
user?.payloadDisplayName ||
|
||||||
|
profile.profileTitle ||
|
||||||
|
user?.username ||
|
||||||
|
`Operator #${profile.id}`;
|
||||||
|
const aimTrainer = profile.aimTrainer;
|
||||||
|
return {
|
||||||
|
id: profile.id,
|
||||||
|
name,
|
||||||
|
gamesPlayed: aimTrainer?.gamesPlayed ?? 0,
|
||||||
|
bestScore: aimTrainer?.[tier.scoreField] ?? 0,
|
||||||
|
bestAccuracy: aimTrainer?.[tier.accuracyField] ?? 0,
|
||||||
|
isCurrentUser: userId !== null && String(userId) === String(currentUserId),
|
||||||
|
};
|
||||||
|
});
|
||||||
|
const scored = mapped
|
||||||
|
.filter((row) => row.bestScore > 0)
|
||||||
|
.sort(
|
||||||
|
(left, right) =>
|
||||||
|
right.bestScore - left.bestScore || right.bestAccuracy - left.bestAccuracy,
|
||||||
|
);
|
||||||
|
const visible = scored.slice(0, 10);
|
||||||
|
const current = mapped.find((row) => row.isCurrentUser);
|
||||||
|
if (current && !visible.some((row) => row.id === current.id)) {
|
||||||
|
visible.push({ ...current, isOutsideTopTen: true });
|
||||||
|
}
|
||||||
|
setRows(visible);
|
||||||
|
})
|
||||||
|
.catch((error: unknown) => {
|
||||||
|
if (cancelled) return;
|
||||||
|
setFailed(error instanceof Error ? error.message : "leaderboard fetch failed");
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
cancelled = true;
|
||||||
|
};
|
||||||
|
}, [currentUserId, difficulty, refreshKey, tier.accuracyField, tier.scoreField]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card className="w-full max-w-3xl overflow-hidden">
|
||||||
|
<CardHeader className="gap-1 border-b border-border px-4 py-3">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Trophy aria-hidden="true" className="size-4 text-primary" />
|
||||||
|
<CardTitle className="text-sm">Qualification leaderboard</CardTitle>
|
||||||
|
<span className="ml-auto text-xs text-muted-foreground">{tier.label} · Top 10</span>
|
||||||
|
</div>
|
||||||
|
<CardDescription>Best score for the selected qualification lane.</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<div
|
||||||
|
className="border-b border-border px-4 py-2 text-xs text-muted-foreground"
|
||||||
|
aria-live="polite"
|
||||||
|
>
|
||||||
|
<span className="font-medium text-primary">{activeTrainees.length}</span>{" "}
|
||||||
|
{activeTrainees.length === 1 ? "trainee is" : "trainees are"} on the line
|
||||||
|
{activeTrainees.length > 0 && (
|
||||||
|
<span className="ml-1 text-foreground">
|
||||||
|
({activeTrainees.map((trainee) => trainee.name).join(", ")})
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<CardContent className="p-0">
|
||||||
|
{failed !== null ? (
|
||||||
|
<p className="px-4 py-4 text-sm text-muted-foreground">Could not load the leaderboard.</p>
|
||||||
|
) : rows === null ? (
|
||||||
|
<div className="flex flex-col gap-2 px-4 py-4">
|
||||||
|
<Skeleton className="h-4 w-full motion-reduce:animate-none" />
|
||||||
|
<Skeleton className="h-4 w-3/4 motion-reduce:animate-none" />
|
||||||
|
<Skeleton className="h-4 w-1/2 motion-reduce:animate-none" />
|
||||||
|
</div>
|
||||||
|
) : rows.length === 0 ? (
|
||||||
|
<p className="px-4 py-4 text-sm text-muted-foreground">
|
||||||
|
No scores logged for this lane yet — take the first qualification slot.
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="w-full min-w-lg text-sm">
|
||||||
|
<thead>
|
||||||
|
<tr className="text-left text-xs uppercase tracking-wider text-muted-foreground">
|
||||||
|
<th className="px-4 py-2 font-medium">#</th>
|
||||||
|
<th className="px-2 py-2 font-medium">Operator</th>
|
||||||
|
<th className="px-2 py-2 text-right font-medium">Games</th>
|
||||||
|
<th
|
||||||
|
aria-sort="descending"
|
||||||
|
className="px-2 py-2 text-right font-medium text-foreground"
|
||||||
|
>
|
||||||
|
Score
|
||||||
|
</th>
|
||||||
|
<th className="px-4 py-2 text-right font-medium">Accuracy</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="divide-y divide-border">
|
||||||
|
{rows.map((row, index) => (
|
||||||
|
<tr
|
||||||
|
key={row.id}
|
||||||
|
className={cn(
|
||||||
|
row.isCurrentUser && "bg-accent/40",
|
||||||
|
row.isOutsideTopTen && "text-muted-foreground opacity-70",
|
||||||
|
)}
|
||||||
|
title={
|
||||||
|
row.isOutsideTopTen
|
||||||
|
? "Operator status — not currently ranked in the top 10"
|
||||||
|
: undefined
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<td className="px-4 py-2">
|
||||||
|
<span className={rankClass(index)}>
|
||||||
|
{row.isOutsideTopTen ? "—" : index + 1}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td className="px-2 py-2 font-medium">
|
||||||
|
<span className="flex items-center gap-2">
|
||||||
|
<span className="max-w-48 truncate">{row.name}</span>
|
||||||
|
{row.isCurrentUser && (
|
||||||
|
<span className="shrink-0 text-xs text-muted-foreground">(you)</span>
|
||||||
|
)}
|
||||||
|
{row.isOutsideTopTen && (
|
||||||
|
<span className="shrink-0 text-xs font-normal uppercase tracking-wide text-muted-foreground">
|
||||||
|
unranked
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{activeTrainees.some((trainee) => trainee.id === row.id) && (
|
||||||
|
<span
|
||||||
|
className="size-2 rounded-full bg-primary"
|
||||||
|
title="Playing now"
|
||||||
|
aria-label="Playing now"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td className="px-2 py-2 text-right font-mono tabular-nums text-muted-foreground">
|
||||||
|
{row.gamesPlayed}
|
||||||
|
</td>
|
||||||
|
<td className="px-2 py-2 text-right font-mono font-semibold tabular-nums">
|
||||||
|
{row.bestScore}
|
||||||
|
</td>
|
||||||
|
<td className="px-4 py-2 text-right font-mono font-semibold tabular-nums">
|
||||||
|
{Math.round(row.bestAccuracy * 100)}%
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,110 @@
|
||||||
|
import type { AimTrainerDifficulty } from "@/lib/aim-trainer";
|
||||||
|
|
||||||
|
export type AimTrainerLeaderboardFields = {
|
||||||
|
readonly label: string;
|
||||||
|
readonly scoreField: keyof AimTrainerApiStats;
|
||||||
|
readonly accuracyField: keyof AimTrainerApiStats;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type AimTrainerApiStats = {
|
||||||
|
readonly gamesPlayed: number | null;
|
||||||
|
readonly recruitBestScore: number | null;
|
||||||
|
readonly veteranBestScore: number | null;
|
||||||
|
readonly eliteBestScore: number | null;
|
||||||
|
readonly recruitBestAccuracy: number | null;
|
||||||
|
readonly veteranBestAccuracy: number | null;
|
||||||
|
readonly eliteBestAccuracy: number | null;
|
||||||
|
};
|
||||||
|
|
||||||
|
type ApiUser = {
|
||||||
|
readonly id: number;
|
||||||
|
readonly username: string | null;
|
||||||
|
readonly displayName: string | null;
|
||||||
|
readonly payloadDisplayName: string | null;
|
||||||
|
};
|
||||||
|
|
||||||
|
type ApiProfile = {
|
||||||
|
readonly id: number;
|
||||||
|
readonly profileTitle: string | null;
|
||||||
|
readonly user: ApiUser | number | null;
|
||||||
|
readonly aimTrainer: AimTrainerApiStats | null;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const AIM_TRAINER_LEADERBOARD_FIELDS = {
|
||||||
|
recruit: {
|
||||||
|
label: "Recruit",
|
||||||
|
scoreField: "recruitBestScore",
|
||||||
|
accuracyField: "recruitBestAccuracy",
|
||||||
|
},
|
||||||
|
veteran: {
|
||||||
|
label: "Veteran",
|
||||||
|
scoreField: "veteranBestScore",
|
||||||
|
accuracyField: "veteranBestAccuracy",
|
||||||
|
},
|
||||||
|
elite: {
|
||||||
|
label: "Elite",
|
||||||
|
scoreField: "eliteBestScore",
|
||||||
|
accuracyField: "eliteBestAccuracy",
|
||||||
|
},
|
||||||
|
} as const satisfies Record<AimTrainerDifficulty, AimTrainerLeaderboardFields>;
|
||||||
|
|
||||||
|
function isRecord(value: unknown): value is Readonly<Record<string, unknown>> {
|
||||||
|
return typeof value === "object" && value !== null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function readNumber(value: unknown): number | null {
|
||||||
|
return typeof value === "number" && Number.isFinite(value) ? value : null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function readString(value: unknown): string | null {
|
||||||
|
return typeof value === "string" ? value : null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function readUser(value: unknown): ApiUser | number | null {
|
||||||
|
const numericId = readNumber(value);
|
||||||
|
if (numericId !== null) return numericId;
|
||||||
|
if (!isRecord(value)) return null;
|
||||||
|
const id = readNumber(value.id);
|
||||||
|
if (id === null) return null;
|
||||||
|
return {
|
||||||
|
id,
|
||||||
|
username: readString(value.username),
|
||||||
|
displayName: readString(value.displayName),
|
||||||
|
payloadDisplayName: readString(value.payloadDisplayName),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function readAimTrainer(value: unknown): AimTrainerApiStats | null {
|
||||||
|
if (!isRecord(value)) return null;
|
||||||
|
return {
|
||||||
|
gamesPlayed: readNumber(value.gamesPlayed),
|
||||||
|
recruitBestScore: readNumber(value.recruitBestScore),
|
||||||
|
veteranBestScore: readNumber(value.veteranBestScore),
|
||||||
|
eliteBestScore: readNumber(value.eliteBestScore),
|
||||||
|
recruitBestAccuracy: readNumber(value.recruitBestAccuracy),
|
||||||
|
veteranBestAccuracy: readNumber(value.veteranBestAccuracy),
|
||||||
|
eliteBestAccuracy: readNumber(value.eliteBestAccuracy),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function readProfile(value: unknown): ApiProfile | null {
|
||||||
|
if (!isRecord(value)) return null;
|
||||||
|
const id = readNumber(value.id);
|
||||||
|
if (id === null) return null;
|
||||||
|
const progression = isRecord(value.progression) ? value.progression : null;
|
||||||
|
const minigames = progression && isRecord(progression.minigames) ? progression.minigames : null;
|
||||||
|
return {
|
||||||
|
id,
|
||||||
|
profileTitle: readString(value.profileTitle),
|
||||||
|
user: readUser(value.user),
|
||||||
|
aimTrainer: minigames ? readAimTrainer(minigames.aimTrainer) : null,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function readAimTrainerProfiles(value: unknown): readonly ApiProfile[] {
|
||||||
|
if (!isRecord(value) || !Array.isArray(value.docs)) return [];
|
||||||
|
return value.docs.flatMap((item) => {
|
||||||
|
const profile = readProfile(item);
|
||||||
|
return profile ? [profile] : [];
|
||||||
|
});
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue