75 lines
2.5 KiB
TypeScript
75 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import { GroupId, GroupTable, Match, Team } from "@/lib/types";
|
|
import Flag from "./Flag";
|
|
|
|
function teamById(teams: Team[], id: string) {
|
|
return teams.find((t) => t.id === id);
|
|
}
|
|
|
|
function liveMatchFor(group: string, matches: Match[]) {
|
|
return matches.find(
|
|
(m) => m.group === group && (m.status === "LIVE" || m.status === "IN_PLAY" || m.status === "PAUSED"),
|
|
);
|
|
}
|
|
|
|
export default function Groups({
|
|
tables, teams, matches, onOpenGroup,
|
|
}: {
|
|
tables: GroupTable[]; teams: Team[]; matches: Match[];
|
|
onOpenGroup: (g: GroupId) => void;
|
|
}) {
|
|
return (
|
|
<div className="group-grid">
|
|
{tables.map((t) => {
|
|
const live = liveMatchFor(t.group, matches);
|
|
return (
|
|
<div className="group-card" key={t.group}>
|
|
<button
|
|
className="group-head group-head-btn"
|
|
onClick={() => onOpenGroup(t.group)}
|
|
title={`Spiele der Gruppe ${t.group} ansehen`}
|
|
>
|
|
<span className="group-name">Gruppe {t.group}</span>
|
|
<span className="group-tag">
|
|
{live ? "● LIVE" : "Spiele ansehen →"}
|
|
</span>
|
|
</button>
|
|
<table className="standings">
|
|
<thead>
|
|
<tr>
|
|
<th className="team">Mannschaft</th>
|
|
<th>Sp</th><th>S</th><th>U</th><th>N</th>
|
|
<th>Tore</th><th>±</th><th>Pkt</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{t.rows.map((r) => {
|
|
const team = teamById(teams, r.teamId);
|
|
const cls = r.rank <= 2 ? `q${r.rank}` : r.rank === 3 ? "q3" : "";
|
|
return (
|
|
<tr key={r.teamId}>
|
|
<td className="team">
|
|
<span className={`rankdot ${cls}`}>{r.rank}</span>
|
|
<Flag team={team} size={20} />
|
|
<span className="team-name">{team?.name ?? r.teamId}</span>
|
|
</td>
|
|
<td>{r.played}</td>
|
|
<td>{r.won}</td>
|
|
<td>{r.drawn}</td>
|
|
<td>{r.lost}</td>
|
|
<td>{r.goalsFor}:{r.goalsAgainst}</td>
|
|
<td>{r.goalDiff > 0 ? `+${r.goalDiff}` : r.goalDiff}</td>
|
|
<td className="pts">{r.points}</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|