This commit is contained in:
2026-06-22 15:44:54 -05:00
parent f5ab324cca
commit 73d07e7f18
12 changed files with 385 additions and 42 deletions

View File

@@ -3,15 +3,20 @@
import { GroupTable, Match, Team, ThirdPlaceRow } from "@/lib/types";
import { ThirdAssignment } from "@/lib/bracket";
import { resolveBracket, ResolvedSide, ResolvedTie } from "@/lib/resolve-bracket";
import Flag from "./Flag";
function Side({ s, prob }: { s: ResolvedSide; prob?: number | null }) {
function Side({
s, prob, teams,
}: { s: ResolvedSide; prob?: number | null; teams: Team[] }) {
const team = s.teamId ? teams.find((t) => t.id === s.teamId) : undefined;
return (
<div className={`side ${s.isWinner ? "win" : ""}`}>
<div className={`side ${s.isWinner ? "win" : ""} ${s.provisional ? "prov" : ""}`}>
<span className="nm">
{s.teamId ? (
<>
<Flag team={team} size={18} />
<span>{s.label}</span>
{s.code && <span className="c">{s.code}</span>}
{s.provisional && <span className="prov-mark" title="vorläufig Gruppe/Zuordnung noch nicht fix"></span>}
</>
) : (
<span className="lbl">{s.label}</span>
@@ -25,12 +30,12 @@ function Side({ s, prob }: { s: ResolvedSide; prob?: number | null }) {
);
}
function Tie({ tie, isFinal }: { tie: ResolvedTie; isFinal?: boolean }) {
function Tie({ tie, teams, isFinal }: { tie: ResolvedTie; teams: Team[]; 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} />
<span className="tie-num">Spiel {tie.matchNumber}</span>
<Side s={tie.home} prob={tie.prob?.home} teams={teams} />
<Side s={tie.away} prob={tie.prob?.away} teams={teams} />
</div>
);
}
@@ -41,7 +46,9 @@ export default function Bracket({
matches: Match[]; teams: Team[]; tables: GroupTable[];
thirds: ThirdPlaceRow[]; assignment: ThirdAssignment | null; annexResolved: boolean;
}) {
const { r32, later } = resolveBracket(matches, teams, tables, thirds, assignment);
const { r32, later } = resolveBracket(
matches, teams, tables, thirds, assignment, annexResolved,
);
const pick = (nums: number[]) => nums.map((n) => later[n]).filter(Boolean);
const r16 = pick([89, 90, 91, 92, 93, 94, 95, 96]);
@@ -66,35 +73,35 @@ export default function Bracket({
<div className="round">
<div className="round-label">Letzte 32</div>
<div className="round-matches">
{r32.map((t) => <Tie key={t.matchNumber} tie={t} />)}
{r32.map((t) => <Tie key={t.matchNumber} tie={t} teams={teams} />)}
</div>
</div>
<div className="round">
<div className="round-label">Achtelfinale</div>
<div className="round-matches">
{r16.map((t) => <Tie key={t.matchNumber} tie={t} />)}
{r16.map((t) => <Tie key={t.matchNumber} tie={t} teams={teams} />)}
</div>
</div>
<div className="round">
<div className="round-label">Viertelfinale</div>
<div className="round-matches">
{qf.map((t) => <Tie key={t.matchNumber} tie={t} />)}
{qf.map((t) => <Tie key={t.matchNumber} tie={t} teams={teams} />)}
</div>
</div>
<div className="round">
<div className="round-label">Halbfinale</div>
<div className="round-matches">
{sf.map((t) => <Tie key={t.matchNumber} tie={t} />)}
{sf.map((t) => <Tie key={t.matchNumber} tie={t} teams={teams} />)}
</div>
</div>
<div className="round">
<div className="round-label">Finale</div>
<div className="round-matches">
{fin && <Tie tie={fin} isFinal />}
{fin && <Tie tie={fin} teams={teams} isFinal />}
{third && (
<div style={{ marginTop: 20 }}>
<div className="round-label" style={{ marginBottom: 8 }}>Spiel um Platz 3</div>
<Tie tie={third} />
<Tie tie={third} teams={teams} />
</div>
)}
</div>
@@ -105,6 +112,8 @@ export default function Bracket({
<div className="legend">
<span><i style={{ background: "var(--turf)" }} />Sieger / weiter</span>
<span><i style={{ background: "var(--gold)" }} />Finale</span>
<span><i className="leg-fix" />fix qualifiziert</span>
<span><i className="leg-prov" />vorläufig (, nach aktueller Tabelle)</span>
<span><i style={{ background: "var(--ink-faint)" }} />Platzhalter offen</span>
<span>%-Werte: Polymarket-Wahrscheinlichkeit (falls verfügbar)</span>
</div>