350 lines
14 KiB
TypeScript
350 lines
14 KiB
TypeScript
import { useMemo, useState } from "react";
|
||
import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
|
||
import { Link, useParams, useSearchParams } from "react-router-dom";
|
||
import { api } from "../api/client";
|
||
import { HISTORY_PAGE, PLAYER_MAPS_PAGE, SERVERS, type HistoryEntry, type Player, type PlayerMapRow } from "../api/types";
|
||
import {
|
||
hideBroken,
|
||
BonusChip,
|
||
CategoryName,
|
||
InvalidatedBy,
|
||
InvalidChip,
|
||
PointsValue,
|
||
LoadMore,
|
||
RecordedAt,
|
||
ServerTagChip,
|
||
} from "../components/Bits";
|
||
import { TimeChart } from "../components/TimeChart";
|
||
import { AdminToggle } from "../components/AdminToggle";
|
||
import { Empty, ErrorBox, isNotFound, Loading, NotFound } from "../components/States";
|
||
import { formatNumber, formatTime, serverLabel } from "../format";
|
||
import { useServer } from "../server";
|
||
|
||
type Tab = "records" | "history";
|
||
|
||
export function PlayerPage() {
|
||
const { steamid = "" } = useParams();
|
||
const { server } = useServer();
|
||
const [params, setParams] = useSearchParams();
|
||
const tab: Tab = params.get("tab") === "history" ? "history" : "records";
|
||
const categoryId = Number(params.get("category")) || undefined;
|
||
|
||
const player = useQuery({ queryKey: ["player", steamid, server], queryFn: () => api.player(steamid, server) });
|
||
|
||
if (player.isPending) return <Loading />;
|
||
if (player.isError) {
|
||
return isNotFound(player.error) ? (
|
||
<NotFound what="player" />
|
||
) : (
|
||
<ErrorBox error={player.error} onRetry={() => player.refetch()} />
|
||
);
|
||
}
|
||
const p = player.data;
|
||
|
||
const setTab = (t: Tab, category?: number) => {
|
||
const next = new URLSearchParams();
|
||
if (t === "history") next.set("tab", "history");
|
||
if (category) next.set("category", String(category));
|
||
setParams(next, { replace: false });
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<ProfileHeader p={p} />
|
||
<div className="tabs" role="tablist">
|
||
<button role="tab" aria-selected={tab === "records"} className={tab === "records" ? "on" : ""} onClick={() => setTab("records")}>
|
||
Records
|
||
</button>
|
||
<button role="tab" aria-selected={tab === "history"} className={tab === "history" ? "on" : ""} onClick={() => setTab("history")}>
|
||
Improvement history
|
||
</button>
|
||
</div>
|
||
{tab === "records" ? (
|
||
<RecordsTab steamid={p.steamID} onShowHistory={(id) => setTab("history", id)} />
|
||
) : (
|
||
<HistoryTab steamid={p.steamID} categoryId={categoryId} onCategory={(id) => setTab("history", id)} />
|
||
)}
|
||
</>
|
||
);
|
||
}
|
||
|
||
function ProfileHeader({ p }: { p: Player }) {
|
||
const { server } = useServer();
|
||
return (
|
||
<section className="profile">
|
||
<img src={p.Avatar} alt="" className="profile-avatar" width={96} height={96} onError={hideBroken} />
|
||
<div className="profile-main">
|
||
<h1>{p.name}</h1>
|
||
<div className="profile-ids">
|
||
<code>{p.steamID}</code>
|
||
{p.steamID64 && (
|
||
<a href={`https://steamcommunity.com/profiles/${p.steamID64}`} target="_blank" rel="noreferrer">
|
||
Steam profile ↗
|
||
</a>
|
||
)}
|
||
</div>
|
||
{p.badges.length > 0 && (
|
||
<div className="profile-badges">
|
||
{p.badges.map((b) => (
|
||
<span key={b.url} className="badge-pill">
|
||
<img src={b.url} alt="" onError={hideBroken} />
|
||
{b.name}
|
||
</span>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
<div className="stat-row">
|
||
{SERVERS.map((s) => {
|
||
const st = p.servers[s];
|
||
return (
|
||
<div key={s} className={`stat ${s === server ? "stat-on" : ""}`}>
|
||
<div className="stat-label">{serverLabel(s)} points</div>
|
||
<div className="stat-value">{formatNumber(st.points)}</div>
|
||
<div className="stat-sub">
|
||
{st.times > 0 ? (
|
||
<>
|
||
Rank #{formatNumber(st.rank)} · {formatNumber(st.times)} records
|
||
</>
|
||
) : (
|
||
"No records yet"
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|
||
|
||
function RecordsTab({ steamid, onShowHistory }: { steamid: string; onShowHistory: (categoryId: number) => void }) {
|
||
const [serverFilter, setServerFilter] = useState<"all" | "ze1" | "ze2">("all");
|
||
const [text, setText] = useState("");
|
||
const q = useInfiniteQuery({
|
||
queryKey: ["playerMaps", steamid],
|
||
queryFn: ({ pageParam }) => api.playerMaps(steamid, pageParam),
|
||
initialPageParam: 0,
|
||
getNextPageParam: (last, all) => (last.length < PLAYER_MAPS_PAGE ? undefined : all.length * PLAYER_MAPS_PAGE),
|
||
});
|
||
const rows: PlayerMapRow[] = q.data?.pages.flat() ?? [];
|
||
const shown = rows.filter(
|
||
(r) =>
|
||
(serverFilter === "all" || r.serverTag === serverFilter) &&
|
||
(text === "" || r.mapName.toLowerCase().includes(text.toLowerCase())),
|
||
);
|
||
|
||
if (q.isPending) return <Loading />;
|
||
if (q.isError) return <ErrorBox error={q.error} onRetry={() => q.refetch()} />;
|
||
if (rows.length === 0) return <Empty>This player has no records yet.</Empty>;
|
||
|
||
return (
|
||
<>
|
||
<div className="toolbar">
|
||
<div className="segmented" role="group" aria-label="Server filter">
|
||
{(["all", "ze1", "ze2"] as const).map((s) => (
|
||
<button key={s} aria-pressed={serverFilter === s} className={serverFilter === s ? "on" : ""} onClick={() => setServerFilter(s)}>
|
||
{s === "all" ? "All" : serverLabel(s)}
|
||
</button>
|
||
))}
|
||
</div>
|
||
<input
|
||
className="input"
|
||
type="search"
|
||
placeholder="Filter maps"
|
||
value={text}
|
||
onChange={(e) => setText(e.target.value)}
|
||
aria-label="Filter maps"
|
||
/>
|
||
</div>
|
||
<div className="table-wrap">
|
||
<table className="table">
|
||
<thead>
|
||
<tr>
|
||
<th>Map</th>
|
||
<th className="num">Time</th>
|
||
<th className="num">Place</th>
|
||
<th className="hide-sm">Bonus</th>
|
||
<th className="num">Points</th>
|
||
<th className="hide-sm">Set</th>
|
||
<th className="hide-sm" />
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{shown.map((r) => (
|
||
<tr key={r.recordId} className={r.categoryInvalid || r.isInvalid ? "row-invalid" : ""}>
|
||
<td className="map-cell">
|
||
<Link to={`/map/${encodeURIComponent(r.mapName)}?stage=${r.stage}&category=${r.categoryId}`} className="map-link">
|
||
{r.mapName}
|
||
</Link>
|
||
<div className="map-meta">
|
||
<span className="sub">
|
||
Stage {r.stage} · <CategoryName number={r.categoryNumber} legacy={r.isLegacy} />
|
||
</span>
|
||
<ServerTagChip tag={r.serverTag} />
|
||
{r.isInvalid && <InvalidChip label="Run invalidated" />}
|
||
{r.categoryInvalid && <InvalidChip label="Category invalid" />}
|
||
</div>
|
||
{r.isInvalid && <InvalidatedBy info={r.invalidation} what="Run invalidated" className="small" />}
|
||
{r.categoryInvalid && (
|
||
<InvalidatedBy info={r.categoryInvalidation} what="Category invalidated" className="small" />
|
||
)}
|
||
</td>
|
||
<td className={r.isInvalid ? "num mono strike" : "num mono"}>{formatTime(r.time)}</td>
|
||
<td className="num">
|
||
{r.isInvalid ? (
|
||
<span className="muted" title="Invalidated runs have no position">
|
||
–
|
||
</span>
|
||
) : (
|
||
<>
|
||
#{formatNumber(r.position)}
|
||
<span className="sub"> / {formatNumber(r.completions)}</span>
|
||
</>
|
||
)}
|
||
</td>
|
||
<td className="hide-sm">
|
||
{!r.isInvalid && (
|
||
<BonusChip multiplier={r.bonusMultiplier} position={r.position} completions={r.completions} />
|
||
)}
|
||
</td>
|
||
<td className={r.isInvalid ? "num muted" : "num strong"}>
|
||
<PointsValue points={r.points} raised={r.pointsRaised} />
|
||
</td>
|
||
<td className="hide-sm">
|
||
<RecordedAt at={r.recordedAt} legacy={r.isLegacy} />
|
||
</td>
|
||
<td className="hide-sm">
|
||
<div className="row-actions">
|
||
{!r.isLegacy && (
|
||
<button className="btn btn-sm btn-ghost" onClick={() => onShowHistory(r.categoryId)}>
|
||
History
|
||
</button>
|
||
)}
|
||
<AdminToggle kind="record" id={r.recordId} invalid={r.isInvalid} what={`this ${formatTime(r.time)} run`} />
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
{shown.length === 0 && <Empty>No records match the filter.</Empty>}
|
||
<LoadMore hasMore={!!q.hasNextPage} loading={q.isFetchingNextPage} onClick={() => q.fetchNextPage()} />
|
||
</>
|
||
);
|
||
}
|
||
|
||
function HistoryTab({
|
||
steamid,
|
||
categoryId,
|
||
onCategory,
|
||
}: {
|
||
steamid: string;
|
||
categoryId?: number;
|
||
onCategory: (id?: number) => void;
|
||
}) {
|
||
const maps = useQuery({
|
||
queryKey: ["playerMapsAll", steamid],
|
||
// Every category the player has a time in, for the filter drop-down.
|
||
queryFn: async () => {
|
||
const out: PlayerMapRow[] = [];
|
||
for (let offset = 0; ; offset += PLAYER_MAPS_PAGE) {
|
||
const page = await api.playerMaps(steamid, offset);
|
||
out.push(...page);
|
||
if (page.length < PLAYER_MAPS_PAGE) return out;
|
||
}
|
||
},
|
||
});
|
||
const q = useInfiniteQuery({
|
||
queryKey: ["history", steamid, categoryId ?? 0],
|
||
queryFn: ({ pageParam }) => api.playerHistory(steamid, pageParam, categoryId),
|
||
initialPageParam: 0,
|
||
getNextPageParam: (last, all) => (last.length < HISTORY_PAGE ? undefined : all.length * HISTORY_PAGE),
|
||
});
|
||
const entries: HistoryEntry[] = q.data?.pages.flat() ?? [];
|
||
|
||
const options = useMemo(
|
||
() =>
|
||
(maps.data ?? [])
|
||
.filter((r) => !r.isLegacy)
|
||
.sort((a, b) => a.mapName.localeCompare(b.mapName) || a.stage - b.stage || a.categoryNumber - b.categoryNumber),
|
||
[maps.data],
|
||
);
|
||
|
||
return (
|
||
<>
|
||
<div className="toolbar">
|
||
<label className="field">
|
||
<span>Category</span>
|
||
<select
|
||
className="input"
|
||
value={categoryId ?? ""}
|
||
onChange={(e) => onCategory(e.target.value ? Number(e.target.value) : undefined)}
|
||
>
|
||
<option value="">All categories</option>
|
||
{options.map((r) => (
|
||
<option key={r.categoryId} value={r.categoryId}>
|
||
{r.mapName} · Stage {r.stage} · Category {r.categoryNumber} · {serverLabel(r.serverTag)}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</label>
|
||
</div>
|
||
<p className="hint">
|
||
Every saved run was a new personal best when it was set. Classic (migrated) records have no date and are listed last.
|
||
</p>
|
||
{q.isPending && <Loading />}
|
||
{q.isError && <ErrorBox error={q.error} onRetry={() => q.refetch()} />}
|
||
{q.isSuccess && entries.length === 0 && <Empty>No improvements to show.</Empty>}
|
||
{categoryId && entries.length > 0 && <TimeChart entries={entries} />}
|
||
{entries.length > 0 && (
|
||
<ol className="timeline">
|
||
{entries.map((e) => (
|
||
<li key={e.recordId} className={e.isInvalid ? "tl-invalid" : ""}>
|
||
<div className="tl-when">
|
||
<RecordedAt at={e.recordedAt} legacy={e.isLegacy} />
|
||
</div>
|
||
<div className="tl-body">
|
||
<div className="tl-title">
|
||
<span className="mono strong">{formatTime(e.time)}</span>
|
||
{e.improvedBy !== null && e.improvedBy > 0 && (
|
||
<span className="good">
|
||
{" "}
|
||
improved by {formatTime(e.improvedBy)}s
|
||
</span>
|
||
)}
|
||
{e.previousTime === null && !e.isInvalid && <span className="muted"> first time</span>}
|
||
{e.isCurrentBest && <span className="chip chip-best">Current best</span>}
|
||
{e.isInvalid && <InvalidChip label="Run invalidated" />}
|
||
</div>
|
||
<div className="sub">
|
||
{!categoryId ? (
|
||
<button className="linklike" onClick={() => onCategory(e.categoryId)}>
|
||
{e.mapName} · Stage {e.stage} · Category {e.categoryNumber}
|
||
</button>
|
||
) : (
|
||
<>
|
||
{e.mapName} · Stage {e.stage} · Category {e.categoryNumber}
|
||
</>
|
||
)}{" "}
|
||
· {serverLabel(e.serverTag)}
|
||
{e.previousTime !== null && <> · previous best {formatTime(e.previousTime)}</>}
|
||
</div>
|
||
{e.isInvalid && <InvalidatedBy info={e.invalidation} what="Run invalidated" className="small" />}
|
||
{e.categoryInvalid && (
|
||
<InvalidatedBy info={e.categoryInvalidation} what="Category invalidated" className="small" />
|
||
)}
|
||
</div>
|
||
<div className="tl-admin">
|
||
<AdminToggle kind="record" id={e.recordId} invalid={e.isInvalid} what={`this ${formatTime(e.time)} run`} />
|
||
</div>
|
||
</li>
|
||
))}
|
||
</ol>
|
||
)}
|
||
<LoadMore hasMore={!!q.hasNextPage} loading={q.isFetchingNextPage} onClick={() => q.fetchNextPage()} />
|
||
</>
|
||
);
|
||
}
|