init
This commit is contained in:
113
app/components/Bracket.tsx
Normal file
113
app/components/Bracket.tsx
Normal file
@@ -0,0 +1,113 @@
|
||||
"use client";
|
||||
|
||||
import { GroupTable, Match, Team, ThirdPlaceRow } from "@/lib/types";
|
||||
import { ThirdAssignment } from "@/lib/bracket";
|
||||
import { resolveBracket, ResolvedSide, ResolvedTie } from "@/lib/resolve-bracket";
|
||||
|
||||
function Side({ s, prob }: { s: ResolvedSide; prob?: number | null }) {
|
||||
return (
|
||||
<div className={`side ${s.isWinner ? "win" : ""}`}>
|
||||
<span className="nm">
|
||||
{s.teamId ? (
|
||||
<>
|
||||
<span>{s.label}</span>
|
||||
{s.code && <span className="c">{s.code}</span>}
|
||||
</>
|
||||
) : (
|
||||
<span className="lbl">{s.label}</span>
|
||||
)}
|
||||
{prob != null && prob > 0 && (
|
||||
<span className="prob">{Math.round(prob * 100)}%</span>
|
||||
)}
|
||||
</span>
|
||||
<span className="sc">{s.score != null ? s.score : "–"}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Tie({ tie, isFinal }: { tie: ResolvedTie; isFinal?: boolean }) {
|
||||
return (
|
||||
<div className={`tie ${isFinal ? "final-tie" : ""}`}>
|
||||
<span className="tie-num">#{tie.matchNumber}</span>
|
||||
<Side s={tie.home} prob={tie.prob?.home} />
|
||||
<Side s={tie.away} prob={tie.prob?.away} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function Bracket({
|
||||
matches, teams, tables, thirds, assignment, annexResolved,
|
||||
}: {
|
||||
matches: Match[]; teams: Team[]; tables: GroupTable[];
|
||||
thirds: ThirdPlaceRow[]; assignment: ThirdAssignment | null; annexResolved: boolean;
|
||||
}) {
|
||||
const { r32, later } = resolveBracket(matches, teams, tables, thirds, assignment);
|
||||
|
||||
const pick = (nums: number[]) => nums.map((n) => later[n]).filter(Boolean);
|
||||
const r16 = pick([89, 90, 91, 92, 93, 94, 95, 96]);
|
||||
const qf = pick([97, 98, 99, 100]);
|
||||
const sf = pick([101, 102]);
|
||||
const fin = later[104];
|
||||
const third = later[103];
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="bracket-banner">
|
||||
<span className="k">Annex-C-Zuordnung der Drittplatzierten:</span>
|
||||
<span className="v">
|
||||
{annexResolved
|
||||
? "aufgelöst — die acht Dritten sind den Gruppensiegern fest zugeteilt"
|
||||
: "noch offen — sobald die 8 besten Dritten feststehen, verbindet sich der Baum automatisch"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="bracket-scroll">
|
||||
<div className="bracket">
|
||||
<div className="round">
|
||||
<div className="round-label">Letzte 32</div>
|
||||
<div className="round-matches">
|
||||
{r32.map((t) => <Tie key={t.matchNumber} tie={t} />)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="round">
|
||||
<div className="round-label">Achtelfinale</div>
|
||||
<div className="round-matches">
|
||||
{r16.map((t) => <Tie key={t.matchNumber} tie={t} />)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="round">
|
||||
<div className="round-label">Viertelfinale</div>
|
||||
<div className="round-matches">
|
||||
{qf.map((t) => <Tie key={t.matchNumber} tie={t} />)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="round">
|
||||
<div className="round-label">Halbfinale</div>
|
||||
<div className="round-matches">
|
||||
{sf.map((t) => <Tie key={t.matchNumber} tie={t} />)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="round">
|
||||
<div className="round-label">Finale</div>
|
||||
<div className="round-matches">
|
||||
{fin && <Tie tie={fin} isFinal />}
|
||||
{third && (
|
||||
<div style={{ marginTop: 20 }}>
|
||||
<div className="round-label" style={{ marginBottom: 8 }}>Spiel um Platz 3</div>
|
||||
<Tie tie={third} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="legend">
|
||||
<span><i style={{ background: "var(--turf)" }} />Sieger / weiter</span>
|
||||
<span><i style={{ background: "var(--gold)" }} />Finale</span>
|
||||
<span><i style={{ background: "var(--ink-faint)" }} />Platzhalter offen</span>
|
||||
<span>%-Werte: Polymarket-Wahrscheinlichkeit (falls verfügbar)</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
66
app/components/Groups.tsx
Normal file
66
app/components/Groups.tsx
Normal file
@@ -0,0 +1,66 @@
|
||||
"use client";
|
||||
|
||||
import { GroupTable, Match, Team } from "@/lib/types";
|
||||
|
||||
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,
|
||||
}: { tables: GroupTable[]; teams: Team[]; matches: Match[] }) {
|
||||
return (
|
||||
<div className="group-grid">
|
||||
{tables.map((t) => {
|
||||
const live = liveMatchFor(t.group, matches);
|
||||
return (
|
||||
<div className="group-card" key={t.group}>
|
||||
<div className="group-head">
|
||||
<span className="group-name">Gruppe {t.group}</span>
|
||||
<span className="group-tag">
|
||||
{live ? "● LIVE" : `${t.rows.reduce((a, r) => a + r.played, 0)} Spiele`}
|
||||
</span>
|
||||
</div>
|
||||
<table className="standings">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="team">Team</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>
|
||||
<span className="team-name">{team?.name ?? r.teamId}</span>
|
||||
{team?.code && <span className="team-code">{team.code}</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>
|
||||
);
|
||||
}
|
||||
52
app/components/ThirdPlace.tsx
Normal file
52
app/components/ThirdPlace.tsx
Normal file
@@ -0,0 +1,52 @@
|
||||
"use client";
|
||||
|
||||
import { Team, ThirdPlaceRow } from "@/lib/types";
|
||||
|
||||
export default function ThirdPlace({
|
||||
rows, teams,
|
||||
}: { rows: ThirdPlaceRow[]; teams: Team[] }) {
|
||||
const name = (id: string) => teams.find((t) => t.id === id)?.name ?? id;
|
||||
|
||||
return (
|
||||
<div className="third-wrap">
|
||||
<p className="notice" style={{ marginBottom: 16 }}>
|
||||
Acht der zwölf Gruppendritten erreichen die Runde der letzten 32. Gewertet wird
|
||||
gruppenübergreifend nach Punkten, Tordifferenz und Toren — der Direktvergleich
|
||||
entfällt, weil diese Teams nie gegeneinander gespielt haben. Die Trennlinie markiert
|
||||
den Schnitt zwischen Platz 8 und 9.
|
||||
</p>
|
||||
<table className="third-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th><th>Gruppe</th><th>Team</th>
|
||||
<th>Sp</th><th>Pkt</th><th>±</th><th>Tore</th><th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rows.map((r, i) => {
|
||||
const isCut = i === 8; // erste nicht-qualifizierte Zeile
|
||||
return (
|
||||
<tr
|
||||
key={r.teamId}
|
||||
className={`third-row ${r.qualifies ? "qual" : ""} ${isCut ? "cut" : ""}`}
|
||||
>
|
||||
<td>{r.overallRank}</td>
|
||||
<td>{r.group}</td>
|
||||
<td style={{ fontWeight: 600 }}>{name(r.teamId)}</td>
|
||||
<td>{r.played}</td>
|
||||
<td className="pts">{r.points}</td>
|
||||
<td>{r.goalDiff > 0 ? `+${r.goalDiff}` : r.goalDiff}</td>
|
||||
<td>{r.goalsFor}:{r.goalsAgainst}</td>
|
||||
<td>
|
||||
<span className={`qual-badge ${r.qualifies ? "yes" : "no"}`}>
|
||||
{r.qualifies ? "weiter" : "raus"}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user