56 lines
2.0 KiB
TypeScript
56 lines
2.0 KiB
TypeScript
import { useNavigate } from "react-router-dom";
|
|
|
|
import { formatDuration } from "../domain/format";
|
|
import { winReasonLabel } from "../domain/winReasons";
|
|
import type { MatchListItem } from "../domain/types";
|
|
|
|
export function MatchListView({ items }: { items: MatchListItem[] }) {
|
|
const navigate = useNavigate();
|
|
if (items.length === 0) return <div className="muted small">Партий пока нет.</div>;
|
|
|
|
return (
|
|
<div className="stack">
|
|
{items.map((m) => {
|
|
const inProgress = m.status === "in_progress";
|
|
const sorted = [...m.participants].sort((a, b) => (a.place ?? 99) - (b.place ?? 99));
|
|
return (
|
|
<button
|
|
key={m.id}
|
|
className="card"
|
|
style={{ textAlign: "left", width: "100%", margin: 0 }}
|
|
onClick={() => navigate(`/match/${m.id}`)}
|
|
>
|
|
<div className="row-between">
|
|
<span className="muted small">{m.played_at}</span>
|
|
{inProgress ? (
|
|
<span className="badge" style={{ color: "var(--accent-2)" }}>идёт</span>
|
|
) : (
|
|
<span className="muted small">
|
|
{formatDuration(m.duration_minutes)} · {winReasonLabel(m.win_reason)}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="stack" style={{ marginTop: 6, gap: 4 }}>
|
|
{sorted.map((p) => (
|
|
<div key={p.user_id} className="row" style={{ gap: 8 }}>
|
|
<span
|
|
className={
|
|
"place-badge" +
|
|
(p.place === 1 && !p.eliminated ? " first" : "") +
|
|
(p.eliminated ? " eliminated" : "")
|
|
}
|
|
>
|
|
{p.eliminated ? "✕" : (p.place ?? "—")}
|
|
</span>
|
|
<span>{p.nickname}</span>
|
|
<span className="muted small">· {p.faction_name}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|