"use client"; // beui.dev/components/blocks/knockout-bracket import { Shield } from "lucide-react"; import { motion, useInView, useReducedMotion } from "motion/react"; import { type KeyboardEvent, memo, useCallback, useId, useMemo, useRef, useState, } from "react"; import { Tooltip } from "@/components/motion/tooltip"; import { SPRING_PANEL } from "@/lib/ease"; import { useDismiss } from "@/lib/hooks/use-dismiss"; import { useHoverGesture } from "@/lib/hooks/use-hover-gesture"; import { useTapGesture } from "@/lib/hooks/use-tap-gesture"; import { useHoverCapable } from "@/lib/hooks/use-hover-capable"; import { useMessages } from "@/lib/i18n"; import { cn } from "@/lib/utils"; /** English defaults. Override per instance with `labels`, or app-wide with `LocaleProvider`. */ export const knockoutWheelMessages = { label: "Tournament wheel", labelWithChampion: "Tournament wheel, won by {team}", tbd: "TBD", versus: "{home} v {away}", result: "{teams} · {home}–{away}", resultPenalties: "{teams} · {home}–{away} ({homePenalties}–{awayPenalties} pens)", caption: "{round} · {match}", }; export type KnockoutWheelMessages = typeof knockoutWheelMessages; type Translate = ( key: keyof KnockoutWheelMessages, values?: Record, ) => string; export type Team = { name: string; /** * Any square image URL — club crest, org mark, player photo. Wins over `code`. * Drawn as-is on the node's card-colored disc, so a transparent-background * mark inked for one theme disappears in the other: ship artwork that reads on * both, or pick the URL yourself from your theme state. */ logo?: string; /** ISO 3166-1 alpha-2 code, loaded from flagcdn.com (England is gb-eng). Used when `logo` is absent. */ code?: string; }; export type MatchSide = { team: Team | null; score: number | null; /** Present on both sides to render shootout scores — 1 (3). */ penalties?: number | null; }; /** Structurally compatible with the knockout bracket's Match, minus the fields * the wheel never draws (date, time, status). */ export type Match = { id: string; home: MatchSide; away: MatchSide; winner?: "home" | "away"; }; export type Round = { /** Read out with the match in tooltips and the screen-reader list. */ name: string; matches: Match[]; }; export interface KnockoutWheelProps { /** * The whole draw, ordered widest round first — the same array the knockout * bracket takes. Any single-elimination tournament fits: each round holds half * the matches of the one before it (16 → 8 → 4 → 2 → 1) and `rounds[r].matches[k]` * is fed by matches `2k` and `2k + 1` of the round before it. Two rounds are * enough; the wheel grows a ring per round and sizes itself to the rim. */ rounds: Round[]; /** * Index of the outermost round to draw. Earlier rounds are dropped and the * kept round's own teams become the rim, so `1` on a 32-team draw opens at the * Round of 16. Defaults to 0 (the whole tree); clamped to the valid range. */ initialRound?: number; className?: string; /** Override any built-in string. */ labels?: Partial; } const SIZE = 760; const CENTER = SIZE / 2; // Solid trophy glyph drawn in a 24-unit box. const TROPHY_SIZE = 24; const TROPHY_PATH = "M5 1h12v3h3a2 2 0 0 1 2 2c0 3.3-2.2 5.6-5.2 6A6 6 0 0 1 12 15a6 6 0 0 1-4.8-2.9C4.2 11.6 2 9.3 2 6a2 2 0 0 1 2-2h1V1Zm0 5H4c0 1.9 1.1 3.2 2.6 3.7A12 12 0 0 1 5 6Zm14 0h-1a12 12 0 0 1-1.6 3.7C17.9 9.2 19 7.9 19 6ZM9 16.5h6V19h2.5v2h-11v-2H9v-2.5Z"; // Clears the hub's top edge. The hub's two feeders sit on the horizontal, so // the space directly above it is always free. const TROPHY_GAP = 6; // Outermost ring. The remaining 62px of the box absorbs the largest node plus // its ring stroke, so nothing clips at the viewBox edge. const OUTER_R = 318; const HUB_R = 34; // Nodes grow outward so the crowded outer ring still reads at small sizes. const NODE_MIN = 14.2; const NODE_STEP = 2.2; // Initials floor, in viewBox units. The stage never goes below 32rem against a // 760-unit box (scale ~0.674), so 15 units is ~10px on screen — under that, two // letters are a smudge. `node.r * 0.8` alone puts the inner ring at 7.6px. const INITIALS_MIN = 15; // Siblings pull slightly toward their parent, opening a lane between subtrees. const SIBLING_GAP = 0.9; // Puts the hub's two feeders on the horizontal, where there's room for them. const HUB_ANGLE = 90; // Module scope so the memoized marks keep a stable transition identity. const DIM_TRANSITION = { duration: 0.18 } as const; const NO_TRANSITION = { duration: 0 } as const; // Math.sin/cos are implementation-defined down in the last digits, so the SSR // engine and the browser disagree and React reports a hydration mismatch on // every coordinate. Quantizing well below sub-pixel makes both agree exactly. const quantize = (n: number) => Math.round(n * 1e3) / 1e3; const polar = (radius: number, deg: number) => { const rad = (deg * Math.PI) / 180; return { x: quantize(CENTER + radius * Math.cos(rad)), y: quantize(CENTER + radius * Math.sin(rad)), }; }; const point = (radius: number, deg: number) => { const { x, y } = polar(radius, deg); return `${x.toFixed(2)} ${y.toFixed(2)}`; }; // Fixed precision so the server and client render byte-identical style strings. // Raw floats serialize differently across the two and trip a hydration mismatch. const pct = (value: number) => `${((value / SIZE) * 100).toFixed(4)}%`; type WheelNode = { id: string; parentId: string | null; depth: number; /** Position around the wheel, in degrees. Orders arrow-key navigation. */ angle: number; x: number; y: number; r: number; team: Team | null; label: string; /** Round the node's match belongs to; null on the rim, which holds teams. */ round: string | null; }; type WheelLink = { id: string; d: string; depth: number; }; // Names and round labels are single ideas, so they wrap as a unit. Without this // "Round of 16" strands a lone "16" on the next line. const keepTogether = (text: string) => text.replace(/ /g, " "); const teamName = (side: MatchSide, t: Translate) => keepTogether(side.team?.name ?? t("tbd")); /** A `logo` is used as given; a country `code` loads a flag from flagcdn.com. */ const crestSrc = (team: Team) => team.logo ?? (team.code ? `https://flagcdn.com/w80/${team.code}.png` : null); /** Two-letter stand-in when a team has no artwork — "Real Madrid" → RM. * Spread, not `word[0]`: an emoji or astral first character is a surrogate pair * and indexing it renders a replacement glyph. */ const initials = (name: string) => name .split(/\s+/) .slice(0, 2) .map((word) => [...word][0]) .join("") .toUpperCase(); /** Teams · score, in the order they were played. The round is prepended by the * caller that has it, so the round list can reuse this without repeating it. */ function matchLabel(match: Match, t: Translate) { const teams = t("versus", { home: teamName(match.home, t), away: teamName(match.away, t), }); if (match.home.score == null || match.away.score == null) return teams; const score = { teams, home: match.home.score, away: match.away.score }; return match.home.penalties != null && match.away.penalties != null ? t("resultPenalties", { ...score, homePenalties: match.home.penalties, awayPenalties: match.away.penalties, }) : t("result", score); } /** Walks the match tree from the final outward, laying every node on a ring and * splitting each parent's wedge between its two feeders. */ function buildWheel(rounds: Round[], t: Translate) { const nodes: WheelNode[] = []; const links: WheelLink[] = []; const layers = rounds.length; const ringR = (depth: number) => (depth / layers) * OUTER_R; const nodeR = (depth: number) => NODE_MIN + (depth - 1) * NODE_STEP; // An empty or malformed catalog renders nothing rather than throwing on the // way to the hub. const final = rounds[layers - 1]?.matches[0]; if (!final) return { nodes, links, champion: null }; const champion = final.winner ? final[final.winner].team : null; nodes.push({ id: final.id, parentId: null, depth: 0, angle: HUB_ANGLE, x: CENTER, y: CENTER, r: HUB_R, team: champion, label: matchLabel(final, t), round: rounds[layers - 1].name, }); // `roundIndex` is the round `match` belongs to; its two feeders live one round // out, or, past the first round, are the two teams that played it. const walk = ( match: Match, roundIndex: number, index: number, parent: WheelNode, angle: number, wedge: number, ) => { const depth = parent.depth + 1; const radius = ringR(depth); const r = nodeR(depth); // The hub's two feeders sit opposite each other, so they get plain radial // lines; an arc between them would be a half circle. const offset = (wedge / 4) * (parent.depth === 0 ? 1 : SIBLING_GAP); const angles = [angle - offset, angle + offset]; const sides = ["home", "away"] as const; const children = angles.map((childAngle, side) => { const { x, y } = polar(radius, childAngle); const feeder = roundIndex > 0 ? rounds[roundIndex - 1].matches[2 * index + side] : undefined; const node: WheelNode = feeder ? { id: feeder.id, parentId: parent.id, depth, angle: childAngle, x, y, r, team: feeder.winner ? feeder[feeder.winner].team : null, label: matchLabel(feeder, t), round: rounds[roundIndex - 1].name, } : { id: `${match.id}-${sides[side]}`, parentId: parent.id, depth, angle: childAngle, x, y, r, team: match[sides[side]].team, label: match[sides[side]].team?.name ?? t("tbd"), round: null, }; nodes.push(node); return { node, angle: childAngle, feeder }; }); if (parent.depth === 0) { for (const child of children) { links.push({ id: `${parent.id}-${child.node.id}`, d: `M ${point(radius, child.angle)} L ${CENTER} ${CENTER}`, depth, }); } } else { const midR = (ringR(parent.depth) + radius) / 2; links.push({ id: `${parent.id}-arc`, d: `M ${point(radius, angles[0])} L ${point(midR, angles[0])} A ${midR} ${midR} 0 0 1 ${point(midR, angles[1])} L ${point(radius, angles[1])}`, depth, }); links.push({ id: `${parent.id}-stem`, d: `M ${point(midR, angle)} L ${point(ringR(parent.depth), angle)}`, depth, }); } for (const [side, child] of children.entries()) { if (child.feeder) { walk( child.feeder, roundIndex - 1, 2 * index + side, child.node, child.angle, wedge / 2, ); } } }; walk(final, layers - 1, 0, nodes[0], HUB_ANGLE, 360); return { nodes, links, champion }; } /** Match ids from the hub down to the champion's first-round win. */ function championPath(rounds: Round[]) { const path = new Set(); let index = 0; for (let r = rounds.length - 1; r >= 0; r--) { const match = rounds[r].matches[index]; if (!match?.winner) return path; path.add(match.id); if (r === 0) path.add(`${match.id}-${match.winner}`); index = 2 * index + (match.winner === "home" ? 0 : 1); } return path; } function TeamMark({ node, clipId, lit, dimmed, loadFlag, transition, }: { node: WheelNode; clipId: string; lit: boolean; dimmed: boolean; loadFlag: boolean; transition: object; }) { // The failed URL, not a boolean: a corrected logo on the same node should be // tried again rather than stay initials for the life of the wheel. const [failedSrc, setFailedSrc] = useState(null); const resolved = node.team ? crestSrc(node.team) : null; const src = resolved === failedSrc ? null : resolved; const showFlag = src != null && loadFlag; // A square logo is fitted whole; a 4:3 flag is cropped to fill the disc. const box = node.team?.logo ? { w: node.r * 1.44, h: node.r * 1.44, fit: "xMidYMid meet" } : { w: node.r * 2.68, h: node.r * 2, fit: "xMidYMid slice" }; // Dimming rides on the mark itself rather than a scrim tinted with the page // background, so the wheel recedes correctly on any surface it's dropped on. const fade = { opacity: dimmed ? 0.38 : 1 }; return ( <> {/* Stays opaque at every state: links are routed underneath and would otherwise read straight through the flag. */} {showFlag && node.team ? ( <> {/* Plain — flags from flagcdn.com, logos from wherever you host them. A 4:3 flag is cropped to fill the disc; a logo is fitted whole inside it, since a crest cropped to a circle loses its shape. */} setFailedSrc(src)} /> ) : node.team ? ( // No artwork on this team — initials keep the ring readable. {initials(node.team.name)} ) : ( // Same shield the knockout bracket uses for a TBD slot, so an // undecided place reads identically across both fixture styles. )} ); } /** Memoized so pointing at one flag re-renders two marks, not all 63. */ const WheelMark = memo(function WheelMark({ node, isLit, dimmed, loadFlag, reduce, enter, showTrophy, clipId, }: { node: WheelNode; isLit: boolean; dimmed: boolean; loadFlag: boolean; reduce: boolean; enter: object; showTrophy: boolean; clipId: string; }) { return ( {showTrophy && ( )} ); }); /** Invisible hit area over one flag: hover, tap, focus and arrow keys. */ const WheelAnchor = memo(function WheelAnchor({ node, caption, isTabStop, isPinned, canHover, uid, onHover, onFocusNode, onToggle, onKey, }: { node: WheelNode; caption: string; isTabStop: boolean; isPinned: boolean; canHover: boolean; uid: string; onHover: (id: string | null) => void; onFocusNode: (id: string | null) => void; onToggle: (id: string) => void; onKey: (node: WheelNode, key: string) => void; }) { const size = pct(node.r * 2); // Capture-phase focus props, so a Tooltip cloning the child cannot overwrite // them. Both interaction paths are always attached: iPadOS answers the hover // query with true for a finger, so hanging the tap path off "cannot hover" // left it unreachable on the very device it was written for. The event says // which input arrived. const tap = useTapGesture(); const hover = useHoverGesture(); const trigger = (