Create bracket look.
This commit is contained in:
Chris Parsons
parent
a9c01fb66e
commit
207fc21d67
3 changed files with 820 additions and 195 deletions
525
app/components/scoring/BracketTreeView.tsx
Normal file
525
app/components/scoring/BracketTreeView.tsx
Normal file
|
|
@ -0,0 +1,525 @@
|
|||
import { useState } from "react";
|
||||
import { ChevronLeft, ChevronRight } from "lucide-react";
|
||||
import { Button } from "~/components/ui/button";
|
||||
|
||||
export interface BracketMatch {
|
||||
id: string;
|
||||
round: string;
|
||||
matchNumber: number;
|
||||
participant1Id: string | null;
|
||||
participant2Id: string | null;
|
||||
winnerId: string | null;
|
||||
loserId: string | null;
|
||||
isComplete: boolean;
|
||||
participant1Score: string | null;
|
||||
participant2Score: string | null;
|
||||
isScoring?: boolean;
|
||||
participant1?: { id: string; name: string } | null;
|
||||
participant2?: { id: string; name: string } | null;
|
||||
winner?: { id: string; name: string } | null;
|
||||
loser?: { id: string; name: string } | null;
|
||||
}
|
||||
|
||||
export interface BracketOwnership {
|
||||
participantId: string;
|
||||
teamName: string;
|
||||
teamId: string;
|
||||
ownerName?: string;
|
||||
}
|
||||
|
||||
const COLUMN_WIDTH = 152;
|
||||
const CONNECTOR_WIDTH = 24;
|
||||
const LABEL_HEIGHT = 32;
|
||||
const CARD_GAP = 14; // vertical gap between cards (split top/bottom)
|
||||
const DESIRED_CARD_HEIGHT = 112; // target card height — tall enough to show owner info
|
||||
const MAX_CARD_HEIGHT = 140; // cap for sparse later rounds
|
||||
|
||||
// Avatar color palette (matches TeamOwnerBadge)
|
||||
const AVATAR_COLORS = ["#adf661", "#2ce1c1", "#8b5cf6", "#f59e0b", "#ef4444", "#3b82f6"];
|
||||
function hashName(name: string): number {
|
||||
let h = 0;
|
||||
for (let i = 0; i < name.length; i++) h = (h * 31 + name.charCodeAt(i)) & 0xffff;
|
||||
return h;
|
||||
}
|
||||
function avatarColor(name: string) {
|
||||
return AVATAR_COLORS[hashName(name) % AVATAR_COLORS.length];
|
||||
}
|
||||
|
||||
function formatScore(score: string | null): string | null {
|
||||
if (!score) return null;
|
||||
const n = parseFloat(score);
|
||||
if (isNaN(n)) return null;
|
||||
return Number.isInteger(n) ? String(n) : n.toFixed(1);
|
||||
}
|
||||
|
||||
// ─── Match Slot ──────────────────────────────────────────────────────────────
|
||||
|
||||
interface ParticipantRowProps {
|
||||
name: string | null;
|
||||
isTbd: boolean;
|
||||
isWinner: boolean;
|
||||
isLoser: boolean;
|
||||
isOwned: boolean;
|
||||
ownership: BracketOwnership | null;
|
||||
score: string | null;
|
||||
rowHeight: number;
|
||||
showScore: boolean;
|
||||
showOwner: boolean;
|
||||
showText: boolean;
|
||||
}
|
||||
|
||||
function ParticipantRow({
|
||||
name,
|
||||
isTbd,
|
||||
isWinner,
|
||||
isLoser,
|
||||
isOwned,
|
||||
ownership,
|
||||
score,
|
||||
rowHeight,
|
||||
showScore,
|
||||
showOwner,
|
||||
showText,
|
||||
}: ParticipantRowProps) {
|
||||
const formattedScore = formatScore(score);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="relative flex items-center overflow-hidden"
|
||||
style={{ height: rowHeight }}
|
||||
>
|
||||
{showText && (
|
||||
<div className={[
|
||||
"flex items-center flex-1 min-w-0 gap-1 px-2 pl-[7px] ml-2",
|
||||
isWinner ? "border border-white/15 bg-white/5 rounded-md mr-2 my-0.5 self-stretch py-1" : "",
|
||||
].filter(Boolean).join(" ")}>
|
||||
{/* Electric dot for user's pick (when not winner) */}
|
||||
{isOwned && !isWinner && showText && (
|
||||
<span
|
||||
className="shrink-0 rounded-full"
|
||||
style={{ width: 5, height: 5, background: "#2ce1c1" }}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<span
|
||||
className={[
|
||||
"text-[13px] leading-tight block truncate",
|
||||
isTbd ? "text-muted-foreground/50 italic" : "",
|
||||
isLoser ? "text-muted-foreground line-through" : "",
|
||||
isOwned && !isLoser ? "text-electric font-medium" : "",
|
||||
isWinner ? "font-semibold" : "",
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" ")}
|
||||
>
|
||||
{name ?? "TBD"}
|
||||
</span>
|
||||
|
||||
{/* Owner info row */}
|
||||
{showOwner && !isTbd && ownership && (
|
||||
<div className="flex items-center gap-1 mt-0.5">
|
||||
<div
|
||||
className="shrink-0 rounded-[2px] flex items-center justify-center text-[8px] font-bold"
|
||||
style={{
|
||||
width: 14,
|
||||
height: 14,
|
||||
background: "#000",
|
||||
color: avatarColor(ownership.teamName),
|
||||
}}
|
||||
>
|
||||
{ownership.teamName
|
||||
.split(/\s+/)
|
||||
.slice(0, 2)
|
||||
.map((w) => w[0]?.toUpperCase() ?? "")
|
||||
.join("")}
|
||||
</div>
|
||||
<span className="text-[10px] text-muted-foreground truncate">
|
||||
{ownership.ownerName ?? ownership.teamName}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Score */}
|
||||
{showScore && formattedScore && (
|
||||
<span
|
||||
className={[
|
||||
"shrink-0 text-xs tabular-nums font-medium ml-auto pl-1",
|
||||
isLoser ? "text-muted-foreground/60" : "",
|
||||
isWinner ? "text-yellow-400" : "",
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" ")}
|
||||
>
|
||||
{formattedScore}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface BracketMatchSlotProps {
|
||||
match: BracketMatch;
|
||||
slotHeight: number;
|
||||
ownershipMap: Map<string, BracketOwnership>;
|
||||
userParticipantIds: Set<string>;
|
||||
}
|
||||
|
||||
function BracketMatchSlot({
|
||||
match,
|
||||
slotHeight,
|
||||
ownershipMap,
|
||||
userParticipantIds,
|
||||
}: BracketMatchSlotProps) {
|
||||
const rowHeight = slotHeight / 2;
|
||||
const showText = rowHeight >= 10;
|
||||
const showScore = rowHeight >= 20 && (!!match.participant1Score || match.isComplete);
|
||||
const showOwner = rowHeight >= 36;
|
||||
|
||||
const p1Id = match.participant1Id;
|
||||
const p2Id = match.participant2Id;
|
||||
const p1IsWinner = match.isComplete && match.winnerId === p1Id;
|
||||
const p2IsWinner = match.isComplete && match.winnerId === p2Id;
|
||||
const p1IsLoser = match.isComplete && match.loserId === p1Id;
|
||||
const p2IsLoser = match.isComplete && match.loserId === p2Id;
|
||||
const p1IsOwned = !!(p1Id && userParticipantIds.has(p1Id));
|
||||
const p2IsOwned = !!(p2Id && userParticipantIds.has(p2Id));
|
||||
const matchHasOwned = p1IsOwned || p2IsOwned;
|
||||
const isTbd1 = !p1Id;
|
||||
const isTbd2 = !p2Id;
|
||||
|
||||
const p1Ownership = p1Id ? ownershipMap.get(p1Id) ?? null : null;
|
||||
const p2Ownership = p2Id ? ownershipMap.get(p2Id) ?? null : null;
|
||||
|
||||
// Corona glow: gradient for complete matches, electric for user's picks, subtle white for pending
|
||||
const coronaStyle: React.CSSProperties = match.isComplete
|
||||
? { background: "linear-gradient(to bottom, #adf661, #2ce1c1)" }
|
||||
: matchHasOwned
|
||||
? { background: "rgba(44, 225, 193, 0.4)" }
|
||||
: { background: "rgba(255, 255, 255, 0.07)" };
|
||||
|
||||
const INSET = Math.max(1, Math.min(2, Math.floor(slotHeight / 20)));
|
||||
|
||||
return (
|
||||
<div className="relative overflow-hidden" style={{ height: slotHeight }}>
|
||||
{/* Corona layer — left-2 matches card borderRadius to prevent gradient bleed at left corners */}
|
||||
<div className="absolute left-2 right-0 rounded-lg" style={{ ...coronaStyle, top: INSET - 2, bottom: INSET - 2 }} />
|
||||
|
||||
{/* Inner card, inset on right to expose corona glow strip */}
|
||||
<div
|
||||
className="absolute flex flex-col overflow-hidden"
|
||||
style={{
|
||||
top: 0,
|
||||
right: INSET + 2,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
borderRadius: 8,
|
||||
background: "var(--color-muted)",
|
||||
paddingTop: INSET,
|
||||
paddingBottom: INSET,
|
||||
}}
|
||||
>
|
||||
<ParticipantRow
|
||||
name={match.participant1?.name ?? null}
|
||||
isTbd={isTbd1}
|
||||
isWinner={p1IsWinner}
|
||||
isLoser={p1IsLoser}
|
||||
isOwned={p1IsOwned}
|
||||
ownership={showOwner ? p1Ownership : null}
|
||||
score={match.participant1Score}
|
||||
rowHeight={rowHeight - INSET}
|
||||
showScore={showScore}
|
||||
showOwner={showOwner}
|
||||
showText={showText}
|
||||
/>
|
||||
<ParticipantRow
|
||||
name={match.participant2?.name ?? null}
|
||||
isTbd={isTbd2}
|
||||
isWinner={p2IsWinner}
|
||||
isLoser={p2IsLoser}
|
||||
isOwned={p2IsOwned}
|
||||
ownership={showOwner ? p2Ownership : null}
|
||||
score={match.participant2Score}
|
||||
rowHeight={rowHeight - INSET}
|
||||
showScore={showScore}
|
||||
showOwner={showOwner}
|
||||
showText={showText}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Per-pair connector column ────────────────────────────────────────────────
|
||||
|
||||
interface ConnectorColumnProps {
|
||||
currentMatches: BracketMatch[];
|
||||
nextMatches: BracketMatch[];
|
||||
bracketHeight: number;
|
||||
}
|
||||
|
||||
function ConnectorColumn({ currentMatches, nextMatches, bracketHeight }: ConnectorColumnProps) {
|
||||
const mid = CONNECTOR_WIDTH / 2;
|
||||
const paths: string[] = [];
|
||||
|
||||
if (nextMatches.length === Math.ceil(currentMatches.length / 2)) {
|
||||
const currentSlotH = bracketHeight / Math.max(currentMatches.length, 1);
|
||||
const nextSlotH = bracketHeight / Math.max(nextMatches.length, 1);
|
||||
|
||||
for (let k = 0; k < nextMatches.length; k++) {
|
||||
const topY = (2 * k) * currentSlotH + currentSlotH / 2;
|
||||
const midY = k * nextSlotH + nextSlotH / 2;
|
||||
const botIdx = 2 * k + 1;
|
||||
|
||||
if (botIdx < currentMatches.length) {
|
||||
const botY = botIdx * currentSlotH + currentSlotH / 2;
|
||||
// U-shape from two source midpoints; horizontal out to next column
|
||||
paths.push(`M 0 ${topY} H ${mid} V ${botY} H 0`);
|
||||
paths.push(`M ${mid} ${midY} H ${CONNECTOR_WIDTH}`);
|
||||
} else {
|
||||
// Odd last match: straight line through
|
||||
paths.push(`M 0 ${topY} H ${CONNECTOR_WIDTH}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{ flex: `0 0 ${CONNECTOR_WIDTH}px`, position: "relative" }}>
|
||||
<svg
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: LABEL_HEIGHT,
|
||||
left: 0,
|
||||
width: CONNECTOR_WIDTH,
|
||||
height: bracketHeight,
|
||||
overflow: "visible",
|
||||
pointerEvents: "none",
|
||||
}}
|
||||
>
|
||||
{paths.map((d) => (
|
||||
<path key={d} d={d} fill="none" stroke="hsl(var(--border))" strokeWidth={1} />
|
||||
))}
|
||||
</svg>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Tree columns (shared by full + paginated) ───────────────────────────────
|
||||
|
||||
interface TreeColumnsProps {
|
||||
visibleRounds: string[];
|
||||
matchesByRound: Map<string, BracketMatch[]>;
|
||||
ownershipMap: Map<string, BracketOwnership>;
|
||||
userParticipantIds: Set<string>;
|
||||
bracketHeight: number;
|
||||
}
|
||||
|
||||
function TreeColumns({
|
||||
visibleRounds,
|
||||
matchesByRound,
|
||||
ownershipMap,
|
||||
userParticipantIds,
|
||||
bracketHeight,
|
||||
}: TreeColumnsProps) {
|
||||
return (
|
||||
<div style={{ display: "flex", width: "100%", height: bracketHeight + LABEL_HEIGHT }}>
|
||||
{visibleRounds.map((round, ri) => {
|
||||
const roundMatches = matchesByRound.get(round) ?? [];
|
||||
const slotHeight = bracketHeight / Math.max(roundMatches.length, 1);
|
||||
const cardHeight = Math.min(slotHeight - CARD_GAP, MAX_CARD_HEIGHT);
|
||||
const cardTop = (slotHeight - cardHeight) / 2;
|
||||
const nextRound = ri < visibleRounds.length - 1 ? visibleRounds[ri + 1] : null;
|
||||
const nextMatches = nextRound ? (matchesByRound.get(nextRound) ?? []) : [];
|
||||
|
||||
return (
|
||||
<div key={round} style={{ display: "contents" }}>
|
||||
{/* Round column */}
|
||||
<div style={{ flex: "1 1 0", minWidth: COLUMN_WIDTH, position: "relative" }}>
|
||||
<div
|
||||
className="text-[10px] font-semibold uppercase tracking-wider text-muted-foreground truncate text-center"
|
||||
style={{ height: LABEL_HEIGHT, display: "flex", alignItems: "center", justifyContent: "center" }}
|
||||
>
|
||||
{round}
|
||||
</div>
|
||||
|
||||
<div style={{ position: "relative", height: bracketHeight }}>
|
||||
{roundMatches.map((match, matchIdx) => (
|
||||
<div
|
||||
key={match.id}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: matchIdx * slotHeight + cardTop,
|
||||
left: 0,
|
||||
right: 0,
|
||||
height: cardHeight,
|
||||
}}
|
||||
>
|
||||
<BracketMatchSlot
|
||||
match={match}
|
||||
slotHeight={cardHeight}
|
||||
ownershipMap={ownershipMap}
|
||||
userParticipantIds={userParticipantIds}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Connector between this column and the next */}
|
||||
{nextRound && (
|
||||
<ConnectorColumn
|
||||
currentMatches={roundMatches}
|
||||
nextMatches={nextMatches}
|
||||
bracketHeight={bracketHeight}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Full desktop tree ────────────────────────────────────────────────────────
|
||||
|
||||
interface BracketTreeViewProps {
|
||||
rounds: string[];
|
||||
matchesByRound: Map<string, BracketMatch[]>;
|
||||
ownershipMap: Map<string, BracketOwnership>;
|
||||
userParticipantIds: Set<string>;
|
||||
}
|
||||
|
||||
export function BracketTreeView({
|
||||
rounds,
|
||||
matchesByRound,
|
||||
ownershipMap,
|
||||
userParticipantIds,
|
||||
}: BracketTreeViewProps) {
|
||||
const maxMatches = Math.max(...rounds.map((r) => matchesByRound.get(r)?.length ?? 0), 1);
|
||||
const bracketHeight = maxMatches * (DESIRED_CARD_HEIGHT + CARD_GAP);
|
||||
const minWidth = rounds.length * COLUMN_WIDTH + Math.max(0, rounds.length - 1) * CONNECTOR_WIDTH;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="w-full overflow-x-auto"
|
||||
style={{ minHeight: bracketHeight + LABEL_HEIGHT + 2 }}
|
||||
>
|
||||
<div style={{ minWidth }}>
|
||||
<TreeColumns
|
||||
visibleRounds={rounds}
|
||||
matchesByRound={matchesByRound}
|
||||
ownershipMap={ownershipMap}
|
||||
userParticipantIds={userParticipantIds}
|
||||
bracketHeight={bracketHeight}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Paginated mobile tree ────────────────────────────────────────────────────
|
||||
|
||||
interface BracketTreePaginatedProps {
|
||||
rounds: string[];
|
||||
matchesByRound: Map<string, BracketMatch[]>;
|
||||
ownershipMap: Map<string, BracketOwnership>;
|
||||
userParticipantIds: Set<string>;
|
||||
/** Index of the first scoring round — default page starts here */
|
||||
firstScoringRoundIdx?: number;
|
||||
}
|
||||
|
||||
export function BracketTreePaginated({
|
||||
rounds,
|
||||
matchesByRound,
|
||||
ownershipMap,
|
||||
userParticipantIds,
|
||||
firstScoringRoundIdx,
|
||||
}: BracketTreePaginatedProps) {
|
||||
// Default to showing around the first scoring round
|
||||
const defaultPage = Math.max(
|
||||
0,
|
||||
Math.min(
|
||||
firstScoringRoundIdx !== undefined
|
||||
? Math.max(0, firstScoringRoundIdx - 1)
|
||||
: rounds.length - 2,
|
||||
rounds.length - 2,
|
||||
),
|
||||
);
|
||||
const [pageStart, setPageStart] = useState(defaultPage);
|
||||
|
||||
const visibleRounds = rounds.slice(pageStart, pageStart + 2);
|
||||
const canGoLeft = pageStart > 0;
|
||||
const canGoRight = pageStart + 2 < rounds.length;
|
||||
|
||||
const maxMatchesInView = Math.max(...visibleRounds.map((r) => matchesByRound.get(r)?.length ?? 0), 1);
|
||||
const bracketHeight = maxMatchesInView * (DESIRED_CARD_HEIGHT + CARD_GAP);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Round tab navigation */}
|
||||
<div className="flex items-center gap-1 mb-3 overflow-x-auto pb-1">
|
||||
{rounds.map((round, ri) => {
|
||||
const isActive = ri >= pageStart && ri < pageStart + 2;
|
||||
return (
|
||||
<button
|
||||
key={round}
|
||||
onClick={() => setPageStart(Math.min(ri, rounds.length - 2))}
|
||||
className={[
|
||||
"shrink-0 px-2 py-1 rounded text-[10px] font-medium uppercase tracking-wide transition-colors",
|
||||
isActive
|
||||
? "bg-electric/15 text-electric border border-electric/30"
|
||||
: "text-muted-foreground border border-transparent hover:text-foreground hover:border-border",
|
||||
].join(" ")}
|
||||
>
|
||||
{round}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Bracket columns */}
|
||||
<div style={{ minHeight: bracketHeight + LABEL_HEIGHT + 2 }}>
|
||||
<TreeColumns
|
||||
visibleRounds={visibleRounds}
|
||||
matchesByRound={matchesByRound}
|
||||
ownershipMap={ownershipMap}
|
||||
userParticipantIds={userParticipantIds}
|
||||
bracketHeight={bracketHeight}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Prev / Next navigation */}
|
||||
<div className="flex items-center justify-between mt-3">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setPageStart((p) => Math.max(0, p - 1))}
|
||||
disabled={!canGoLeft}
|
||||
className="gap-1 text-xs"
|
||||
>
|
||||
<ChevronLeft className="h-3 w-3" />
|
||||
{canGoLeft ? rounds[pageStart - 1] : "—"}
|
||||
</Button>
|
||||
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{visibleRounds[0]}
|
||||
{visibleRounds[1] ? ` → ${visibleRounds[1]}` : ""}
|
||||
</span>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setPageStart((p) => Math.min(rounds.length - 2, p + 1))}
|
||||
disabled={!canGoRight}
|
||||
className="gap-1 text-xs"
|
||||
>
|
||||
{canGoRight ? rounds[pageStart + 2] : "—"}
|
||||
<ChevronRight className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
import { useState } from "react";
|
||||
import { Badge } from "~/components/ui/badge";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
|
||||
import {
|
||||
|
|
@ -8,15 +9,22 @@ import {
|
|||
TableHeader,
|
||||
TableRow,
|
||||
} from "~/components/ui/table";
|
||||
import { Trophy, Star } from "lucide-react";
|
||||
import { Button } from "~/components/ui/button";
|
||||
import { Trophy, Star, Columns2, LayoutList } from "lucide-react";
|
||||
import { TeamOwnerBadge } from "~/components/ui/team-owner-badge";
|
||||
import {
|
||||
BracketTreeView,
|
||||
BracketTreePaginated,
|
||||
type BracketMatch,
|
||||
type BracketOwnership,
|
||||
} from "./BracketTreeView";
|
||||
|
||||
interface Participant {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
interface Match {
|
||||
export interface Match {
|
||||
id: string;
|
||||
round: string;
|
||||
matchNumber: number;
|
||||
|
|
@ -27,13 +35,14 @@ interface Match {
|
|||
isComplete: boolean;
|
||||
participant1Score: string | null;
|
||||
participant2Score: string | null;
|
||||
isScoring?: boolean;
|
||||
participant1?: Participant | null;
|
||||
participant2?: Participant | null;
|
||||
winner?: Participant | null;
|
||||
loser?: Participant | null;
|
||||
}
|
||||
|
||||
interface TeamOwnership {
|
||||
export interface TeamOwnership {
|
||||
participantId: string;
|
||||
teamName: string;
|
||||
teamId: string;
|
||||
|
|
@ -43,9 +52,9 @@ interface TeamOwnership {
|
|||
interface PlayoffBracketProps {
|
||||
matches: Match[];
|
||||
rounds: string[]; // Ordered list of round names (earliest first)
|
||||
preEliminatedParticipants?: { id: string; name: string }[]; // Eliminated before bracket (e.g. group stage)
|
||||
participantPoints?: { participantId: string; points: number }[]; // Computed fantasy points per participant
|
||||
partialScoreParticipantIds?: string[]; // Still-competing participants with provisional floor scores
|
||||
preEliminatedParticipants?: { id: string; name: string }[];
|
||||
participantPoints?: { participantId: string; points: number }[];
|
||||
partialScoreParticipantIds?: string[];
|
||||
teamOwnerships?: TeamOwnership[];
|
||||
userParticipantIds?: string[];
|
||||
showOwnership?: boolean;
|
||||
|
|
@ -164,6 +173,25 @@ export function computeEliminatedByRound(
|
|||
return result;
|
||||
}
|
||||
|
||||
/** Returns true if every adjacent round pair has exactly ceil(prev/2) matches — pure single-elimination. */
|
||||
function isSingleElimination(matchesByRound: Map<string, Match[]>, rounds: string[]): boolean {
|
||||
if (rounds.length < 2) return true;
|
||||
for (let i = 1; i < rounds.length; i++) {
|
||||
const prev = matchesByRound.get(rounds[i - 1])?.length ?? 0;
|
||||
const curr = matchesByRound.get(rounds[i])?.length ?? 0;
|
||||
if (curr !== Math.ceil(prev / 2)) return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
/** Find the index of the first round that has scoring matches. */
|
||||
function firstScoringRoundIdx(matchesByRound: Map<string, Match[]>, rounds: string[]): number {
|
||||
for (let i = 0; i < rounds.length; i++) {
|
||||
if (matchesByRound.get(rounds[i])?.some((m) => m.isScoring)) return i;
|
||||
}
|
||||
return 0;
|
||||
}
|
||||
|
||||
export function PlayoffBracket({
|
||||
matches,
|
||||
rounds,
|
||||
|
|
@ -181,21 +209,23 @@ export function PlayoffBracket({
|
|||
teamOwnerships.forEach((o) => ownershipMap.set(o.participantId, o));
|
||||
const pointsMap = new Map(participantPoints.map((p) => [p.participantId, p.points]));
|
||||
|
||||
// Group matches once; reused for feeder map and rendering
|
||||
const matchesByRound = groupMatchesByRound(matches);
|
||||
const feederMap = buildFeederMap(matchesByRound, rounds);
|
||||
|
||||
// Determine if the bracket supports the visual tree view
|
||||
const supportsTreeView = matches.length > 0 && isSingleElimination(matchesByRound, rounds);
|
||||
const scoringRoundIdx = firstScoringRoundIdx(matchesByRound, rounds);
|
||||
|
||||
const [viewMode, setViewMode] = useState<"tree" | "cards">("tree");
|
||||
|
||||
const getTbdLabel = (round: string, matchNumber: number, slot: "p1" | "p2") => {
|
||||
const feeder = feederMap.get(`${round}:${matchNumber}:${slot}`);
|
||||
if (!feeder) return "TBD";
|
||||
return `Winner of ${feeder.round} M${feeder.matchNumber}`;
|
||||
};
|
||||
|
||||
// Build elimination rankings: collect losers per round, then assign rank labels.
|
||||
// In double-chance brackets (e.g. AFL), a participant may lose one round but
|
||||
// win a later one — only count them as eliminated at their FINAL losing match.
|
||||
// Build elimination rankings
|
||||
const losersByRound = new Map<string, Array<{ participant: Participant; score: string | null; ownership: TeamOwnership | null }>>();
|
||||
let _hasScore = false;
|
||||
let bracketWinner: Participant | null = null;
|
||||
|
||||
const lastRound = rounds[rounds.length - 1];
|
||||
|
|
@ -204,7 +234,6 @@ export function PlayoffBracket({
|
|||
: null;
|
||||
if (finalMatch?.winner) bracketWinner = finalMatch.winner;
|
||||
|
||||
// Compute which participants are eliminated in which round, handling double-chance.
|
||||
const eliminatedByRound = computeEliminatedByRound(matches, rounds);
|
||||
|
||||
for (const match of matches) {
|
||||
|
|
@ -215,7 +244,6 @@ export function PlayoffBracket({
|
|||
match.loserId === match.participant1Id
|
||||
? match.participant1Score
|
||||
: match.participant2Score;
|
||||
if (loserScore) _hasScore = true;
|
||||
if (!losersByRound.has(match.round)) losersByRound.set(match.round, []);
|
||||
losersByRound.get(match.round)?.push({
|
||||
participant: match.loser,
|
||||
|
|
@ -224,17 +252,13 @@ export function PlayoffBracket({
|
|||
});
|
||||
}
|
||||
|
||||
// Walk rounds latest→earliest to assign rank labels.
|
||||
// Use TOTAL match count per round (not eliminated-so-far) so that partial scoring
|
||||
// shows the correct eventual rank. E.g. R64 losers in NCAAM 68 always show T33
|
||||
// even while other R64 games are still pending.
|
||||
const allBracketParticipantIds = new Set<string>();
|
||||
for (const match of matches) {
|
||||
if (match.participant1Id) allBracketParticipantIds.add(match.participant1Id);
|
||||
if (match.participant2Id) allBracketParticipantIds.add(match.participant2Id);
|
||||
}
|
||||
const rankedEntries: EliminatedEntry[] = [];
|
||||
let nextRank = 2; // rank 1 = champion (even if not yet decided)
|
||||
let nextRank = 2;
|
||||
for (let ri = rounds.length - 1; ri >= 0; ri--) {
|
||||
const roundName = rounds[ri];
|
||||
const roundLosers = losersByRound.get(roundName) || [];
|
||||
|
|
@ -248,7 +272,6 @@ export function PlayoffBracket({
|
|||
nextRank += totalMatchesInRound;
|
||||
}
|
||||
|
||||
// Exclude pre-eliminated participants already ranked via bracket match losers
|
||||
const rankedParticipantIds = new Set(rankedEntries.map((e) => e.participant.id));
|
||||
if (bracketWinner) rankedParticipantIds.add(bracketWinner.id);
|
||||
const filteredPreEliminated = preEliminatedParticipants.filter(
|
||||
|
|
@ -257,7 +280,6 @@ export function PlayoffBracket({
|
|||
|
||||
const showRankings = rankedEntries.length > 0 || bracketWinner !== null || filteredPreEliminated.length > 0;
|
||||
|
||||
// Build participant lookup from match data for the "In Contention" table
|
||||
const participantMap = new Map<string, Participant>();
|
||||
for (const match of matches) {
|
||||
if (match.participant1) participantMap.set(match.participant1.id, match.participant1);
|
||||
|
|
@ -268,17 +290,17 @@ export function PlayoffBracket({
|
|||
.map((id) => participantMap.get(id))
|
||||
.filter((p): p is Participant => p !== undefined);
|
||||
|
||||
// Hide participants with 0 points that nobody drafted — they add noise without value.
|
||||
const isDraftedOrScoring = (participantId: string) =>
|
||||
ownershipMap.has(participantId) || (pointsMap.get(participantId) ?? 0) > 0;
|
||||
|
||||
// Hoist winner row lookups so we don't need an IIFE in JSX
|
||||
const winnerIsOwned = bracketWinner ? userParticipantSet.has(bracketWinner.id) : false;
|
||||
const winnerOwnership = bracketWinner ? ownershipMap.get(bracketWinner.id) : undefined;
|
||||
const winnerPts = bracketWinner ? pointsMap.get(bracketWinner.id) : undefined;
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold">{title}</h2>
|
||||
{description && (
|
||||
|
|
@ -286,6 +308,31 @@ export function PlayoffBracket({
|
|||
)}
|
||||
</div>
|
||||
|
||||
{/* View toggle — desktop only, when tree view is supported */}
|
||||
{supportsTreeView && (
|
||||
<div className="hidden md:flex items-center gap-1 rounded-md border border-border p-0.5">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className={`h-7 px-2 ${viewMode === "tree" ? "bg-muted" : ""}`}
|
||||
onClick={() => setViewMode("tree")}
|
||||
title="Bracket tree"
|
||||
>
|
||||
<Columns2 className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className={`h-7 px-2 ${viewMode === "cards" ? "bg-muted" : ""}`}
|
||||
onClick={() => setViewMode("cards")}
|
||||
title="Card list"
|
||||
>
|
||||
<LayoutList className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{matches.length === 0 ? (
|
||||
<div className="text-center py-8 text-muted-foreground">
|
||||
<p className="text-sm">No bracket matches available yet.</p>
|
||||
|
|
@ -295,176 +342,56 @@ export function PlayoffBracket({
|
|||
</div>
|
||||
) : (
|
||||
<div className="space-y-8">
|
||||
{rounds.map((round) => {
|
||||
const roundMatches = matchesByRound.get(round) || [];
|
||||
if (roundMatches.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div key={round}>
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
|
||||
{round}
|
||||
</h3>
|
||||
<div className="flex-1 border-t border-border" />
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{roundMatches.length}{" "}
|
||||
{roundMatches.length === 1 ? "match" : "matches"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-2">
|
||||
{roundMatches.map((match) => {
|
||||
const p1IsWinner =
|
||||
match.isComplete && match.winnerId === match.participant1Id;
|
||||
const p2IsWinner =
|
||||
match.isComplete && match.winnerId === match.participant2Id;
|
||||
const p1IsLoser =
|
||||
match.isComplete && match.loserId === match.participant1Id;
|
||||
const p2IsLoser =
|
||||
match.isComplete && match.loserId === match.participant2Id;
|
||||
|
||||
const p1Name =
|
||||
match.participant1?.name ||
|
||||
(match.participant1Id
|
||||
? "TBD"
|
||||
: getTbdLabel(round, match.matchNumber, "p1"));
|
||||
const p2Name =
|
||||
match.participant2?.name ||
|
||||
(match.participant2Id
|
||||
? "TBD"
|
||||
: getTbdLabel(round, match.matchNumber, "p2"));
|
||||
|
||||
const p1IsTbd = !match.participant1Id;
|
||||
const p2IsTbd = !match.participant2Id;
|
||||
|
||||
const p1IsOwned = !p1IsTbd && userParticipantSet.has(match.participant1Id ?? "");
|
||||
const p2IsOwned = !p2IsTbd && userParticipantSet.has(match.participant2Id ?? "");
|
||||
const matchHasOwned = p1IsOwned || p2IsOwned;
|
||||
|
||||
const p1Ownership =
|
||||
showOwnership && match.participant1Id
|
||||
? ownershipMap.get(match.participant1Id) || null
|
||||
: null;
|
||||
const p2Ownership =
|
||||
showOwnership && match.participant2Id
|
||||
? ownershipMap.get(match.participant2Id) || null
|
||||
: null;
|
||||
|
||||
return (
|
||||
<div
|
||||
key={match.id}
|
||||
className={`rounded-lg border bg-card px-3 py-2 ${matchHasOwned ? "border-electric/50" : "border-border"}`}
|
||||
>
|
||||
{/* Match label row */}
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-xs font-mono text-muted-foreground">
|
||||
M{match.matchNumber}
|
||||
</span>
|
||||
{match.isComplete && (
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
Done
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Participants: left vs right (stacks on mobile) */}
|
||||
<div className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2">
|
||||
{/* Participant 1 — left-aligned */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-1">
|
||||
{p1IsOwned && !p1IsWinner && (
|
||||
<span className="inline-block w-1.5 h-1.5 rounded-full bg-electric shrink-0" />
|
||||
)}
|
||||
{p1IsWinner && (
|
||||
<Trophy className="h-3.5 w-3.5 text-yellow-500 shrink-0" />
|
||||
)}
|
||||
<span
|
||||
className={[
|
||||
"text-sm font-medium truncate",
|
||||
p1IsLoser ? "text-muted-foreground line-through" : "",
|
||||
p1IsTbd ? "text-muted-foreground italic font-normal" : "",
|
||||
p1IsWinner ? "font-semibold" : "",
|
||||
p1IsOwned && !p1IsLoser ? "text-electric" : "",
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" ")}
|
||||
>
|
||||
{p1Name}
|
||||
</span>
|
||||
</div>
|
||||
{!p1IsTbd && p1Ownership && (
|
||||
<div className="mt-1">
|
||||
<TeamOwnerBadge
|
||||
teamName={p1Ownership.teamName}
|
||||
ownerName={p1Ownership.ownerName}
|
||||
{/* ── Desktop: visual tree or card list ── */}
|
||||
{supportsTreeView && viewMode === "tree" ? (
|
||||
<div className="hidden md:block">
|
||||
<BracketTreeView
|
||||
rounds={rounds}
|
||||
matchesByRound={matchesByRound as Map<string, BracketMatch[]>}
|
||||
ownershipMap={ownershipMap as Map<string, BracketOwnership>}
|
||||
userParticipantIds={userParticipantSet}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Center: scores + vs */}
|
||||
<div className="shrink-0 flex sm:flex-col items-center gap-1 sm:gap-0.5 min-w-[2.5rem]">
|
||||
{match.participant1Score ? (
|
||||
<>
|
||||
<span className="text-xs tabular-nums font-medium">
|
||||
{parseFloat(match.participant1Score)}
|
||||
</span>
|
||||
<span className="text-[10px] text-muted-foreground/60 uppercase tracking-wider">
|
||||
vs
|
||||
</span>
|
||||
<span className="text-xs tabular-nums font-medium">
|
||||
{match.participant2Score
|
||||
? parseFloat(match.participant2Score)
|
||||
: "—"}
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<span className="text-xs text-muted-foreground">vs</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="hidden md:block">
|
||||
<CardListView
|
||||
rounds={rounds}
|
||||
matchesByRound={matchesByRound}
|
||||
|
||||
{/* Participant 2 — right-aligned on sm+, left-aligned on mobile */}
|
||||
<div className="flex-1 min-w-0 flex flex-col sm:items-end">
|
||||
<div className="flex items-center gap-1 sm:justify-end">
|
||||
<span
|
||||
className={[
|
||||
"text-sm font-medium truncate",
|
||||
p2IsLoser ? "text-muted-foreground line-through" : "",
|
||||
p2IsTbd ? "text-muted-foreground italic font-normal" : "",
|
||||
p2IsWinner ? "font-semibold" : "",
|
||||
p2IsOwned && !p2IsLoser ? "text-electric" : "",
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" ")}
|
||||
>
|
||||
{p2Name}
|
||||
</span>
|
||||
{p2IsWinner && (
|
||||
<Trophy className="h-3.5 w-3.5 text-yellow-500 shrink-0" />
|
||||
)}
|
||||
{p2IsOwned && !p2IsWinner && (
|
||||
<span className="inline-block w-1.5 h-1.5 rounded-full bg-electric shrink-0" />
|
||||
)}
|
||||
</div>
|
||||
{!p2IsTbd && p2Ownership && (
|
||||
<div className="mt-1">
|
||||
<TeamOwnerBadge
|
||||
teamName={p2Ownership.teamName}
|
||||
ownerName={p2Ownership.ownerName}
|
||||
ownershipMap={ownershipMap}
|
||||
userParticipantSet={userParticipantSet}
|
||||
showOwnership={showOwnership}
|
||||
getTbdLabel={getTbdLabel}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
{/* In Contention */}
|
||||
{/* ── Mobile: paginated tree or card list ── */}
|
||||
{supportsTreeView ? (
|
||||
<div className="md:hidden">
|
||||
<BracketTreePaginated
|
||||
rounds={rounds}
|
||||
matchesByRound={matchesByRound as Map<string, BracketMatch[]>}
|
||||
ownershipMap={ownershipMap as Map<string, BracketOwnership>}
|
||||
userParticipantIds={userParticipantSet}
|
||||
firstScoringRoundIdx={scoringRoundIdx}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="md:hidden">
|
||||
<CardListView
|
||||
rounds={rounds}
|
||||
matchesByRound={matchesByRound}
|
||||
|
||||
ownershipMap={ownershipMap}
|
||||
userParticipantSet={userParticipantSet}
|
||||
showOwnership={showOwnership}
|
||||
getTbdLabel={getTbdLabel}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── In Contention ── */}
|
||||
{activeParticipants.length > 0 && (
|
||||
<Card className="border-green-500/30">
|
||||
<CardHeader>
|
||||
|
|
@ -525,7 +452,7 @@ export function PlayoffBracket({
|
|||
</Card>
|
||||
)}
|
||||
|
||||
{/* Final Rankings / Eliminated Teams */}
|
||||
{/* ── Final Rankings ── */}
|
||||
{showRankings && (
|
||||
<Card className="border-electric/30">
|
||||
<CardHeader>
|
||||
|
|
@ -661,3 +588,177 @@ export function PlayoffBracket({
|
|||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Card list view (existing style, used as fallback) ───────────────────────
|
||||
|
||||
interface CardListViewProps {
|
||||
rounds: string[];
|
||||
matchesByRound: Map<string, Match[]>;
|
||||
ownershipMap: Map<string, TeamOwnership>;
|
||||
userParticipantSet: Set<string>;
|
||||
showOwnership: boolean;
|
||||
getTbdLabel: (round: string, matchNumber: number, slot: "p1" | "p2") => string;
|
||||
}
|
||||
|
||||
function CardListView({
|
||||
rounds,
|
||||
matchesByRound,
|
||||
ownershipMap,
|
||||
userParticipantSet,
|
||||
showOwnership,
|
||||
getTbdLabel,
|
||||
}: CardListViewProps) {
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
{rounds.map((round) => {
|
||||
const roundMatches = matchesByRound.get(round) || [];
|
||||
if (roundMatches.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div key={round}>
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
|
||||
{round}
|
||||
</h3>
|
||||
<div className="flex-1 border-t border-border" />
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{roundMatches.length}{" "}
|
||||
{roundMatches.length === 1 ? "match" : "matches"}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-2">
|
||||
{roundMatches.map((match) => {
|
||||
const p1IsWinner = match.isComplete && match.winnerId === match.participant1Id;
|
||||
const p2IsWinner = match.isComplete && match.winnerId === match.participant2Id;
|
||||
const p1IsLoser = match.isComplete && match.loserId === match.participant1Id;
|
||||
const p2IsLoser = match.isComplete && match.loserId === match.participant2Id;
|
||||
|
||||
const p1Name =
|
||||
match.participant1?.name ||
|
||||
(match.participant1Id ? "TBD" : getTbdLabel(round, match.matchNumber, "p1"));
|
||||
const p2Name =
|
||||
match.participant2?.name ||
|
||||
(match.participant2Id ? "TBD" : getTbdLabel(round, match.matchNumber, "p2"));
|
||||
|
||||
const p1IsTbd = !match.participant1Id;
|
||||
const p2IsTbd = !match.participant2Id;
|
||||
|
||||
const p1IsOwned = !p1IsTbd && userParticipantSet.has(match.participant1Id ?? "");
|
||||
const p2IsOwned = !p2IsTbd && userParticipantSet.has(match.participant2Id ?? "");
|
||||
const matchHasOwned = p1IsOwned || p2IsOwned;
|
||||
|
||||
const p1Ownership = showOwnership && match.participant1Id
|
||||
? ownershipMap.get(match.participant1Id) || null
|
||||
: null;
|
||||
const p2Ownership = showOwnership && match.participant2Id
|
||||
? ownershipMap.get(match.participant2Id) || null
|
||||
: null;
|
||||
|
||||
// Corona: gradient for complete, electric for user's pick, subtle for pending
|
||||
const coronaStyle: React.CSSProperties = match.isComplete
|
||||
? { background: "linear-gradient(to bottom, #adf661, #2ce1c1)" }
|
||||
: matchHasOwned
|
||||
? { background: "rgba(44, 225, 193, 0.4)" }
|
||||
: { background: "rgba(255, 255, 255, 0.07)" };
|
||||
|
||||
return (
|
||||
<div key={match.id} className="relative overflow-hidden rounded-lg">
|
||||
{/* Corona layer — outer overflow-hidden handles all corner rounding */}
|
||||
<div className="absolute top-0.5 bottom-0.5 left-0 right-0" style={coronaStyle} />
|
||||
{/* Inner card — only mr-1 to expose corona on right */}
|
||||
<div className="relative z-10 bg-muted rounded-l-none rounded-r-[5px] px-3 py-2 mr-1">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-xs font-mono text-muted-foreground">
|
||||
M{match.matchNumber}
|
||||
</span>
|
||||
{match.isComplete && (
|
||||
<Badge variant="secondary" className="text-xs">Done</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2">
|
||||
{/* Participant 1 */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-1">
|
||||
{p1IsOwned && !p1IsWinner && (
|
||||
<span className="inline-block w-1.5 h-1.5 rounded-full bg-electric shrink-0" />
|
||||
)}
|
||||
{p1IsWinner && (
|
||||
<Trophy className="h-3.5 w-3.5 text-yellow-500 shrink-0" />
|
||||
)}
|
||||
<span
|
||||
className={[
|
||||
"text-sm font-medium truncate",
|
||||
p1IsLoser ? "text-muted-foreground line-through" : "",
|
||||
p1IsTbd ? "text-muted-foreground italic font-normal" : "",
|
||||
p1IsWinner ? "font-semibold" : "",
|
||||
p1IsOwned && !p1IsLoser ? "text-electric" : "",
|
||||
].filter(Boolean).join(" ")}
|
||||
>
|
||||
{p1Name}
|
||||
</span>
|
||||
</div>
|
||||
{!p1IsTbd && p1Ownership && (
|
||||
<div className="mt-1">
|
||||
<TeamOwnerBadge teamName={p1Ownership.teamName} ownerName={p1Ownership.ownerName} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Scores */}
|
||||
<div className="shrink-0 flex sm:flex-col items-center gap-1 sm:gap-0.5 min-w-[2.5rem]">
|
||||
{match.participant1Score ? (
|
||||
<>
|
||||
<span className="text-xs tabular-nums font-medium">
|
||||
{parseFloat(match.participant1Score)}
|
||||
</span>
|
||||
<span className="text-[10px] text-muted-foreground/60 uppercase tracking-wider">vs</span>
|
||||
<span className="text-xs tabular-nums font-medium">
|
||||
{match.participant2Score ? parseFloat(match.participant2Score) : "—"}
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<span className="text-xs text-muted-foreground">vs</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Participant 2 */}
|
||||
<div className="flex-1 min-w-0 flex flex-col sm:items-end">
|
||||
<div className="flex items-center gap-1 sm:justify-end">
|
||||
<span
|
||||
className={[
|
||||
"text-sm font-medium truncate",
|
||||
p2IsLoser ? "text-muted-foreground line-through" : "",
|
||||
p2IsTbd ? "text-muted-foreground italic font-normal" : "",
|
||||
p2IsWinner ? "font-semibold" : "",
|
||||
p2IsOwned && !p2IsLoser ? "text-electric" : "",
|
||||
].filter(Boolean).join(" ")}
|
||||
>
|
||||
{p2Name}
|
||||
</span>
|
||||
{p2IsWinner && (
|
||||
<Trophy className="h-3.5 w-3.5 text-yellow-500 shrink-0" />
|
||||
)}
|
||||
{p2IsOwned && !p2IsWinner && (
|
||||
<span className="inline-block w-1.5 h-1.5 rounded-full bg-electric shrink-0" />
|
||||
)}
|
||||
</div>
|
||||
{!p2IsTbd && p2Ownership && (
|
||||
<div className="mt-1">
|
||||
<TeamOwnerBadge teamName={p2Ownership.teamName} ownerName={p2Ownership.ownerName} align="right" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -168,12 +168,11 @@ export async function loader(args: Route.LoaderArgs) {
|
|||
|
||||
if (scoringPattern === "playoff_bracket") {
|
||||
// Fetch playoff matches via scoring events
|
||||
let templateId: string | undefined;
|
||||
const events = await db.query.scoringEvents.findMany({
|
||||
where: eq(schema.scoringEvents.sportsSeasonId, sportsSeasonId),
|
||||
});
|
||||
|
||||
let templateId: string | undefined;
|
||||
|
||||
if (events.length > 0) {
|
||||
const eventIds = events.map((e) => e.id);
|
||||
const matches = await db.query.playoffMatches.findMany({
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue