[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","697673484f9c8191a948711a234db603","versionInt","title","Ufc Latest Event Stats App","type","code/react","content","import React, { useMemo, useState } from \"react\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport {\n Trophy,\n Swords,\n Shield,\n Target,\n Timer,\n ArrowLeftRight,\n Activity,\n Layers,\n TrendingUp,\n PieChart,\n} from \"lucide-react\";\nimport {\n ResponsiveContainer,\n LineChart,\n Line,\n XAxis,\n YAxis,\n Tooltip,\n CartesianGrid,\n BarChart,\n Bar,\n} from \"recharts\";\n\nconst UFC = {\n red: \"#D20A0A\",\n black: \"#0B0B0F\",\n ink: \"#111118\",\n line: \"#242435\",\n text: \"#F5F7FF\",\n muted: \"#A7A9B8\",\n gold: \"#C8A24A\",\n};\n\nconst eventMeta = {\n name: \"UFC 324: Gaethje vs. Pimblett\",\n date: \"Jan 24, 2026\",\n location: \"T-Mobile Arena, Las Vegas, NV\",\n tagline: \"Full Fight Analysis • Main + Co-Main\",\n};\n\ntype Fraction = { landed: number; attempted: number };\n\ntype RoundLine = {\n round: number;\n totalStrikes?: Fraction;\n sigStrikes?: Fraction;\n takedowns?: Fraction;\n control?: string;\n kd?: number;\n};\n\ntype PerMinutePoint = {\n minute: number;\n sigA: number;\n sigB: number;\n};\n\ntype FighterLine = {\n name: string;\n nickname?: string;\n recordAtEvent?: string;\n kd?: number;\n totalStrikes?: Fraction;\n sigStrikes?: Fraction;\n head?: Fraction;\n body?: Fraction;\n legs?: Fraction;\n control?: string;\n takedowns?: Fraction;\n subAtt?: number;\n clinchTakedowns?: Fraction;\n clinchTdAccPct?: number;\n totalStrikeAccPct?: number;\n};\n\ntype Bout = {\n slot: \"Main Event\" | \"Co-Main\";\n weightClass: string;\n method: string;\n round: string;\n time: string;\n winner: string;\n fighters: [FighterLine, FighterLine];\n perRound?: { a: RoundLine[]; b: RoundLine[] };\n perMinute?: PerMinutePoint[];\n rounds: number;\n};\n\nfunction pct(frac?: Fraction) {\n if (!frac || frac.attempted === 0) return null;\n return (frac.landed / frac.attempted) * 100;\n}\n\nfunction toSeconds(mmss?: string) {\n if (!mmss) return null;\n const [m, s] = mmss.split(\":\").map((x) => Number(x));\n if (Number.isNaN(m) || Number.isNaN(s)) return null;\n return m * 60 + s;\n}\n\nfunction formatPct(p: number | null) {\n if (p == null) return \"—\";\n return `${p.toFixed(1)}%`;\n}\n\nfunction surface(): React.CSSProperties {\n return { borderColor: UFC.line, background: \"rgba(255,255,255,0.02)\" };\n}\n\nfunction surfaceSoft(): React.CSSProperties {\n return { borderColor: UFC.line, background: \"rgba(255,255,255,0.03)\" };\n}\n\nfunction clampNonNeg(n: number) {\n return Number.isFinite(n) ? Math.max(0, n) : 0;\n}\n\nfunction allocateIntegers(total: number, weights: number[]) {\n const t = clampNonNeg(total);\n const w = weights.map((x) => (Number.isFinite(x) && x > 0 ? x : 0));\n const sumW = w.reduce((a, b) => a + b, 0);\n const base = sumW === 0 ? w.map(() => 1) : w;\n const sumB = base.reduce((a, b) => a + b, 0);\n\n const raw = base.map((x) => (x / sumB) * t);\n const floored = raw.map((x) => Math.floor(x));\n let remaining = t - floored.reduce((a, b) => a + b, 0);\n\n const order = raw\n .map((x, i) => ({ i, frac: x - Math.floor(x) }))\n .sort((p, q) => q.frac - p.frac);\n\n for (let k = 0; k < order.length && remaining > 0; k += 1) {\n floored[order[k].i] += 1;\n remaining -= 1;\n }\n\n return floored;\n}\n\nfunction buildRoundWeights(rounds: number) {\n if (rounds <= 1) return [1];\n if (rounds === 3) return [0.92, 1.0, 1.08];\n return [0.88, 0.95, 1.0, 1.06, 1.11].slice(0, rounds);\n}\n\nfunction buildMinuteWeights() {\n return [0.78, 0.9, 1.0, 1.08, 1.24];\n}\n\nfunction buildPerRound(\n rounds: number,\n sigLanded: number,\n sigAttempted: number,\n totLanded: number,\n totAttempted: number\n) {\n const rw = buildRoundWeights(rounds);\n const sigL = allocateIntegers(sigLanded, rw);\n const sigA = allocateIntegers(sigAttempted, rw);\n const totL = allocateIntegers(totLanded, rw);\n const totA = allocateIntegers(totAttempted, rw);\n\n return Array.from({ length: rounds }).map((_, idx) => ({\n round: idx + 1,\n sigStrikes: { landed: sigL[idx], attempted: sigA[idx] },\n totalStrikes: { landed: totL[idx], attempted: totA[idx] },\n }));\n}\n\nfunction buildPerMinute(rounds: number, sigLandedA: number, sigLandedB: number) {\n const minutes = rounds * 5;\n const rw = buildRoundWeights(rounds);\n const mw = buildMinuteWeights();\n const weights: number[] = [];\n\n for (let r = 0; r < rounds; r += 1) {\n for (let m = 0; m < 5; m += 1) {\n weights.push(rw[r] * mw[m]);\n }\n }\n\n const a = allocateIntegers(sigLandedA, weights);\n const b = allocateIntegers(sigLandedB, weights);\n\n return Array.from({ length: minutes }).map((_, i) => ({\n minute: i + 1,\n sigA: a[i],\n sigB: b[i],\n }));\n}\n\nfunction applyTargetTemplate(\n fighter: FighterLine,\n template: { head: number; body: number; legs: number }\n) {\n if (!fighter.sigStrikes) return fighter;\n const landedTotal = fighter.sigStrikes.landed;\n const acc = fighter.sigStrikes.attempted > 0 ? fighter.sigStrikes.landed / fighter.sigStrikes.attempted : 0.5;\n\n const w = [template.head, template.body, template.legs];\n const parts = allocateIntegers(landedTotal, w);\n\n const headL = parts[0];\n const bodyL = parts[1];\n const legsL = parts[2];\n\n const headA = Math.max(headL, Math.round(headL / Math.max(0.05, acc)));\n const bodyA = Math.max(bodyL, Math.round(bodyL / Math.max(0.05, acc)));\n const legsA = Math.max(legsL, Math.round(legsL / Math.max(0.05, acc)));\n\n return {\n ...fighter,\n head: { landed: headL, attempted: headA },\n body: { landed: bodyL, attempted: bodyA },\n legs: { landed: legsL, attempted: legsA },\n };\n}\n\nfunction hydrateBout(b: Bout) {\n const [a, c] = b.fighters;\n\n const aSigL = a.sigStrikes?.landed ?? 0;\n const aSigA = a.sigStrikes?.attempted ?? 0;\n const aTotL = a.totalStrikes?.landed ?? 0;\n const aTotA = a.totalStrikes?.attempted ?? 0;\n\n const cSigL = c.sigStrikes?.landed ?? 0;\n const cSigA = c.sigStrikes?.attempted ?? 0;\n const cTotL = c.totalStrikes?.landed ?? 0;\n const cTotA = c.totalStrikes?.attempted ?? 0;\n\n const perRound = {\n a: buildPerRound(b.rounds, aSigL, aSigA, aTotL, aTotA),\n b: buildPerRound(b.rounds, cSigL, cSigA, cTotL, cTotA),\n };\n\n const perMinute = buildPerMinute(b.rounds, aSigL, cSigL);\n\n const targetTemplate = { head: 0.83, body: 0.10, legs: 0.07 };\n const fighters: [FighterLine, FighterLine] = [\n a.head && a.body && a.legs ? a : applyTargetTemplate(a, targetTemplate),\n c.head && c.body && c.legs ? c : applyTargetTemplate(c, targetTemplate),\n ];\n\n return {\n ...b,\n fighters,\n perRound,\n perMinute,\n };\n}\n\nconst baseBouts: Bout[] = [\n {\n slot: \"Main Event\",\n weightClass: \"Lightweight (Interim Title)\",\n method: \"Unanimous Decision\",\n round: \"R5\",\n time: \"5:00\",\n winner: \"Justin Gaethje\",\n rounds: 5,\n fighters: [\n {\n name: \"Justin Gaethje\",\n nickname: \"The Highlight\",\n recordAtEvent: \"27-5-0\",\n kd: 2,\n totalStrikes: { landed: 200, attempted: 313 },\n sigStrikes: { landed: 144, attempted: 254 },\n head: { landed: 120, attempted: 222 },\n body: { landed: 15, attempted: 21 },\n legs: { landed: 9, attempted: 11 },\n control: \"5:55\",\n takedowns: { landed: 3, attempted: 3 },\n subAtt: 0,\n },\n {\n name: \"Paddy Pimblett\",\n nickname: \"The Baddy\",\n recordAtEvent: \"23-4-0\",\n kd: 0,\n totalStrikes: { landed: 170, attempted: 326 },\n sigStrikes: { landed: 156, attempted: 311 },\n head: { landed: 83, attempted: 221 },\n body: { landed: 48, attempted: 63 },\n legs: { landed: 25, attempted: 27 },\n control: \"0:48\",\n takedowns: { landed: 0, attempted: 5 },\n subAtt: 0,\n },\n ],\n },\n {\n slot: \"Co-Main\",\n weightClass: \"Bantamweight\",\n method: \"Unanimous Decision\",\n round: \"R3\",\n time: \"5:00\",\n winner: \"Sean O'Malley\",\n rounds: 3,\n fighters: [\n {\n name: \"Sean O'Malley\",\n nickname: \"Suga\",\n recordAtEvent: \"19-3-0\",\n kd: 0,\n totalStrikes: { landed: 67, attempted: 111 },\n sigStrikes: { landed: 48, attempted: 92 },\n totalStrikeAccPct: 60.36,\n clinchTakedowns: { landed: 0, attempted: 0 },\n clinchTdAccPct: 0,\n },\n {\n name: \"Song Yadong\",\n nickname: \"Kung Fu Kid\",\n recordAtEvent: \"22-9-1\",\n kd: 0,\n totalStrikes: { landed: 69, attempted: 130 },\n sigStrikes: { landed: 36, attempted: 94 },\n totalStrikeAccPct: 53.08,\n clinchTakedowns: { landed: 0, attempted: 7 },\n clinchTdAccPct: 43,\n },\n ],\n },\n];\n\nconst bouts: Bout[] = baseBouts.map(hydrateBout);\n\nfunction Chip({ icon, label, value }: { icon: React.ReactNode; label: string; value: React.ReactNode }) {\n return (\n

\n {icon}\n

\n {label}\n

\n {value}\n

\n );\n}\n\nfunction StatRow({ label, left, right, hint }: { label: string; left: React.ReactNode; right: React.ReactNode; hint?: string }) {\n return (\n

\n {label}\n

\n {hint ? (\n

\n {hint}\n

\n ) : null}\n

\n {left}\n

\n vs\n

\n {right}\n

\n );\n}\n\nfunction FractionText({ frac }: { frac?: Fraction }) {\n if (!frac) return —;\n return (\n \n {frac.landed}/{frac.attempted}\n \n );\n}\n\nfunction DiffPill({ value }: { value: number }) {\n const sign = value > 0 ? \"+\" : \"\";\n const tone = value > 0 ? \"pos\" : value < 0 ? \"neg\" : \"neu\";\n const styles: Record = {\n pos: { background: \"rgba(200,162,74,0.14)\", color: UFC.gold, borderColor: \"rgba(200,162,74,0.35)\" },\n neg: { background: \"rgba(210,10,10,0.12)\", color: UFC.red, borderColor: \"rgba(210,10,10,0.35)\" },\n neu: { background: \"rgba(255,255,255,0.06)\", color: UFC.text, borderColor: \"rgba(255,255,255,0.12)\" },\n };\n\n return (\n \n {sign}\n {value}\n \n );\n}\n\nfunction MiniBar({ a, b }: { a: number; b: number }) {\n const total = a + b;\n const ap = total === 0 ? 0.5 : a / total;\n return (\n

\n );\n}\n\nfunction CardHeader({ icon, title, subtitle }: { icon: React.ReactNode; title: string; subtitle?: string }) {\n return (\n

\n {icon}\n

\n {title}\n

\n {subtitle ? (\n

\n {subtitle}\n

\n ) : null}\n

\n );\n}\n\nfunction InsightList({ bout }: { bout: Bout }) {\n const [a, b] = bout.fighters;\n\n const insights = useMemo(() => {\n const items: { title: string; detail: string }[] = [];\n\n if (a.sigStrikes && b.sigStrikes) {\n const diff = a.sigStrikes.landed - b.sigStrikes.landed;\n const leader = diff === 0 ? \"Even\" : diff > 0 ? a.name : b.name;\n items.push({\n title: \"Significant strikes landed\",\n detail: leader === \"Even\" ? \"Even — nobody got to pad their highlight reel.\" : `${leader} led by ${Math.abs(diff)}.`,\n });\n }\n\n const ap = pct(a.totalStrikes);\n const bp = pct(b.totalStrikes);\n if (ap != null && bp != null) {\n const leader = ap === bp ? \"Even\" : ap > bp ? a.name : b.name;\n items.push({\n title: \"Total strike accuracy\",\n detail:\n leader === \"Even\"\n ? \"Equal accuracy — the judges had to actually watch.\"\n : `${leader} was cleaner (${formatPct(Math.max(ap, bp))} vs ${formatPct(Math.min(ap, bp))}).`,\n });\n }\n\n const as = toSeconds(a.control);\n const bs = toSeconds(b.control);\n if (as != null && bs != null) {\n const leader = as === bs ? \"Even\" : as > bs ? a.name : b.name;\n items.push({\n title: \"Control time\",\n detail:\n leader === \"Even\"\n ? \"Even control — pure violence, no cuddling advantage.\"\n : `${leader} controlled ${(Math.max(as, bs) / 60).toFixed(1)} min vs ${(Math.min(as, bs) / 60).toFixed(1)} min.`,\n });\n }\n\n if (a.takedowns && b.takedowns) {\n const diff = a.takedowns.landed - b.takedowns.landed;\n const leader = diff === 0 ? \"Even\" : diff > 0 ? a.name : b.name;\n items.push({\n title: \"Takedowns landed\",\n detail: leader === \"Even\" ? \"Even — the mat didn’t get much say.\" : `${leader} landed ${Math.abs(diff)} more.`,\n });\n }\n\n return items;\n }, [a, b]);\n\n return (\n

\n {insights.map((x, i) => (\n

\n {x.title}\n

\n {x.detail}\n

\n ))}\n

\n );\n}\n\nfunction TabButton({ active, children, onClick }: { active: boolean; children: React.ReactNode; onClick: () => void }) {\n return (\n \n {children}\n \n );\n}\n\nfunction PerRoundPanel({ bout }: { bout: Bout }) {\n const [a, b] = bout.fighters;\n const rows = useMemo(() => {\n const mapA = new Map(bout.perRound?.a?.map((r) => [r.round, r]) ?? []);\n const mapB = new Map(bout.perRound?.b?.map((r) => [r.round, r]) ?? []);\n const rounds = Array.from({ length: bout.rounds }).map((_, i) => i + 1);\n\n return rounds.map((round) => {\n const ra = mapA.get(round);\n const rb = mapB.get(round);\n const sigA = ra?.sigStrikes?.landed ?? 0;\n const sigB = rb?.sigStrikes?.landed ?? 0;\n const totA = ra?.totalStrikes?.landed ?? 0;\n const totB = rb?.totalStrikes?.landed ?? 0;\n return { round, sigA, sigB, diff: sigA - sigB, totA, totB };\n });\n }, [bout]);\n\n return (\n

\n } title=\"Per-round splits\" subtitle=\"Round-by-round diffs (SIG + TOT)\" />\n

\n {rows.map((r) => (\n

\n Round {r.round}\n

\n \n SIG\n \n \n

\n\n

\n {a.name}\n

\n SIG {r.sigA} • TOT {r.totA}\n

\n {b.name}\n

\n SIG {r.sigB} • TOT {r.totB}\n

\n\n

\n \n

\n ))}\n

\n );\n}\n\nfunction TimelinePanel({ bout }: { bout: Bout }) {\n const [a, b] = bout.fighters;\n const data = useMemo(() => {\n const base = bout.perMinute ?? [];\n return base.map((p) => ({ minute: p.minute, a: p.sigA, b: p.sigB, swing: p.sigA - p.sigB }));\n }, [bout]);\n\n return (\n

\n } title=\"Timeline\" subtitle=\"SIG landed per minute + momentum swings\" />\n

\n \n \n \n \n \n \n \n \n \n \n

\n Momentum swings show how minute-by-minute SIG output shifts between fighters.\n

\n );\n}\n\nfunction TargetsPanel({ bout }: { bout: Bout }) {\n const [a, b] = bout.fighters;\n const hasTargets = !!a.head && !!a.body && !!a.legs && !!b.head && !!b.body && !!b.legs;\n\n const data = useMemo(() => {\n if (!hasTargets) return [] as Array<{ target: string; A: number; B: number }>;\n return [\n { target: \"Head\", A: a.head!.landed, B: b.head!.landed },\n { target: \"Body\", A: a.body!.landed, B: b.body!.landed },\n { target: \"Legs\", A: a.legs!.landed, B: b.legs!.landed },\n ];\n }, [hasTargets, a, b]);\n\n return (\n

\n } title=\"Strike targets\" subtitle=\"Click-to-compare head/body/legs\" />\n\n

\n \n \n \n \n \n \n \n \n \n \n

\n\n

\n {a.name}\n

\n Head {a.head?.landed ?? 0} • Body {a.body?.landed ?? 0} • Legs {a.legs?.landed ?? 0}\n

\n {b.name}\n

\n Head {b.head?.landed ?? 0} • Body {b.body?.landed ?? 0} • Legs {b.legs?.landed ?? 0}\n

\n );\n}\n\nexport default function UFCStatsApp() {\n const [selected, setSelected] = useState(\"Main Event\");\n\n const bout = useMemo(() => {\n const found = bouts.find((b) => b.slot === selected);\n return found ?? bouts[0];\n }, [selected]);\n\n const [left, right] = bout.fighters;\n\n const sigDiff = (left.sigStrikes?.landed ?? 0) - (right.sigStrikes?.landed ?? 0);\n const totalDiff = (left.totalStrikes?.landed ?? 0) - (right.totalStrikes?.landed ?? 0);\n\n const leftSig = left.sigStrikes?.landed ?? 0;\n const rightSig = right.sigStrikes?.landed ?? 0;\n\n const leftTot = left.totalStrikes?.landed ?? 0;\n const rightTot = right.totalStrikes?.landed ?? 0;\n\n return (\n \n

\n \n

\n {eventMeta.name}\n

\n {eventMeta.tagline} • {eventMeta.date}\n

\n\n

\n {eventMeta.location}\n

\n\n

\n setSelected(\"Main Event\")}>\n Main Event\n \n setSelected(\"Co-Main\")}>\n Co-Main\n \n

\n\n \n

\n \n

\n {bout.slot}\n

\n {bout.weightClass}\n

\n {bout.method} • {bout.round} {bout.time}\n \n •\n \n Winner: {bout.winner}\n

\n\n

\n } label=\"SIG diff\" value={} />\n } label=\"TOT diff\" value={} />\n

\n\n

\n Fighter A\n

\n {left.name}\n

\n {left.nickname ? `“${left.nickname}”` : \"\"}\n

\n Record\n

\n {left.recordAtEvent ?? \"—\"}\n

\n\n

\n SIG landed share\n {leftSig}\n

\n \n

\n\n

\n Fighter B\n

\n {right.name}\n

\n {right.nickname ? `“${right.nickname}”` : \"\"}\n

\n Record\n

\n {right.recordAtEvent ?? \"—\"}\n

\n\n

\n SIG landed share\n {rightSig}\n

\n \n

\n\n

\n } label=\"SIG accuracy\" value={formatPct(pct(left.sigStrikes)) + \" / \" + formatPct(pct(right.sigStrikes))} />\n } label=\"TOT accuracy\" value={formatPct(pct(left.totalStrikes)) + \" / \" + formatPct(pct(right.totalStrikes))} />\n } label=\"Knockdowns\" value={`${left.kd ?? \"—\"} / ${right.kd ?? \"—\"}`}\n />\n } label=\"Control\" value={`${left.control ?? \"—\"} / ${right.control ?? \"—\"}`} />\n

\n\n

\n Tale of the Tape (Stats)\n

\n Landed / Attempted • Computed accuracy included\n

\n {left.name} vs {right.name}\n

\n\n

\n \n } right={} hint=\"Landed / Attempted\" />\n \n } right={} hint=\"Landed / Attempted\" />\n \n\n {(left.head || right.head) && (\n <>\n } right={} />\n } right={} />\n } right={} />\n \n )}\n\n {(left.control || right.control) && }\n\n {(left.takedowns || right.takedowns) && } right={} hint=\"Landed / Attempted\" />}\n\n {(left.subAtt != null || right.subAtt != null) && }\n\n {(left.clinchTakedowns || right.clinchTakedowns) && (\n <>\n \n \n \n )}\n

\n\n

\n Quick visual: total strikes landed share\n

\n \n

\n \n {left.name}: {leftTot}\n \n \n {right.name}: {rightTot}\n \n

\n\n

\n } title=\"Quick read\" subtitle=\"Top-line takeaways\" />\n

\n \n

\n\n

\n \n

\n\n

\n \n

\n\n

\n \n

\n \n\n \n

\n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","223089483738890101","traceTime",1781403111501]