/* global React, TeamDisc, Jersey, Form, Panel */ const PLm = window.PL; // smooth cubic path through points [{x,y}] function smooth(pts) { if (pts.length < 2) return ''; let d = `M ${pts[0].x} ${pts[0].y}`; for (let i = 0; i < pts.length - 1; i++) { const p0 = pts[i - 1] || pts[i], p1 = pts[i], p2 = pts[i + 1], p3 = pts[i + 2] || p2; const c1x = p1.x + (p2.x - p0.x) / 6, c1y = p1.y + (p2.y - p0.y) / 6; const c2x = p2.x - (p3.x - p1.x) / 6, c2y = p2.y - (p3.y - p1.y) / 6; d += ` C ${c1x} ${c1y}, ${c2x} ${c2y}, ${p2.x} ${p2.y}`; } return d; } function starPath(cx, cy, r) { let p = ''; for (let i = 0; i < 10; i++) { const ang = -Math.PI / 2 + i * Math.PI / 5; const rad = i % 2 ? r * 0.46 : r; p += (i ? 'L' : 'M') + (cx + rad * Math.cos(ang)).toFixed(1) + ' ' + (cy + rad * Math.sin(ang)).toFixed(1) + ' '; } return p + 'Z'; } function MomentumChart({ m, light = false }) { const W = 600, H = 170, mid = H / 2; const n = m.momentum.length, maxV = 80; const x = (i) => (i / (n - 1)) * W; const y = (v) => mid - (v / maxV) * (mid - 8); const pts = m.momentum.map((v, i) => ({ x: x(i), y: y(v) })); const line = smooth(pts); const area = `${line} L ${W} ${mid} L 0 ${mid} Z`; const [hov, setHov] = React.useState(null); const [scrub, setScrub] = React.useState(null); // {pct, min} const htPct = (45 / m.momMins) * 100; const lab = light ? 'var(--text-muted)' : 'rgba(255,255,255,0.65)'; const labDim = light ? 'var(--text-muted)' : 'rgba(255,255,255,0.5)'; const lineStroke = light ? 'rgba(14,0,92,0.4)' : 'rgba(255,255,255,0.5)'; const midStroke = light ? 'rgba(14,0,92,0.18)' : 'rgba(255,255,255,0.25)'; const htStroke = light ? 'rgba(14,0,92,0.3)' : 'rgba(255,255,255,0.3)'; const goalBorder = light ? '#fff' : '#0A0044'; const onMove = (e) => { const r = e.currentTarget.getBoundingClientRect(); let pct = ((e.clientX - r.left) / r.width) * 100; pct = Math.max(0, Math.min(100, pct)); setScrub({ pct, min: Math.round((pct / 100) * m.momMins) }); }; return (
Attack Momentum 0' – {m.momMins}'
setScrub(null)}> {/* HT label under the half-time line */} HT {/* hover scrubber */} {scrub && (
{scrub.min}'
)} {/* goal markers — sit ON the momentum curve */} {m.momGoals.map((g, i) => { const home = g.t === 'h'; const leftPct = (g.min / m.momMins) * 100; const gi = Math.round((g.min / m.momMins) * (n - 1)); const gv = m.momentum[Math.max(0, Math.min(n - 1, gi))]; const topPct = (y(gv) / H) * 100; return (
setHov(i)} onMouseLeave={() => setHov(null)} style={{ position: 'absolute', left: `${leftPct}%`, top: `${topPct}%`, transform: 'translate(-50%,-50%)', cursor: 'pointer', zIndex: 3 }}> {hov === i && (
GOAL · {PLm.T[home ? m.h : m.a].abbr} {g.scorer} {g.min}'
)}
); })}
● goals · hover timeline
); } function Key({ c, label, light }) { return {label} ; } function CompareBar({ label, h, a, suffix = '', light = false }) { const total = h + a || 1; const hv = light ? 'var(--text-brand)' : 'var(--bs-lime)'; const av = light ? '#2A6FDB' : '#5B8DEF'; return (
{h}{suffix} {label} {a}{suffix}
); } function OddsTile({ label, value }) { return (
{label}
{value}
); } /* Shot map — full horizontal black pitch. Home attacks right, away attacks left (in 'both'). view: 'h' | 'a' | 'both'. Single view: lime on-target, grey off, lime goal-stars. Both: shots coloured by team (home lime, away blue). */ function ShotMap({ m, view }) { const W = 460, H = 268, P = 10; const innerW = W - 2 * P, innerH = H - 2 * P; const plotX = (d, side) => { const f = side === 'r' ? 50 + (d / 100) * 47 : 50 - (d / 100) * 47; return P + (f / 100) * innerW; }; const plotY = (acr) => P + 10 + (acr / 100) * (innerH - 20); const both = view === 'both'; const items = []; if (view === 'h' || both) m.shotMap.forEach((s) => items.push({ s, side: 'r', t: m.h })); if (view === 'a' || both) m.shotMapAway.forEach((s) => items.push({ s, side: both ? 'l' : 'r', t: m.a })); const line = 'rgba(255,255,255,0.4)'; const cy = H / 2, boxH = 116, sixH = 52; return ( {/* halfway line + centre circle */} {/* left goal + boxes */} {/* right goal + boxes */} {/* shots */} {items.map(({ s, side, t }, i) => { const x = plotX(s.x, side), y = plotY(s.y); const col = both ? (t === m.h ? '#D1F206' : '#5B8DEF') : 'var(--bs-lime)'; if (s.type === 'g') return ; if (s.type === 'on') return ; return ; })} ); } function ShotKey() { return null; } function StatsHero({ headless = false, light = false, solid = false }) { const [idx, setIdx] = React.useState(0); const [shotView, setShotView] = React.useState('h'); const matches = PLm.matches; const m = matches[idx]; const hc = PLm.T[m.h], ac = PLm.T[m.a]; const go = (d) => { setIdx((i) => (i + d + matches.length) % matches.length); setShotView('h'); }; const homeShots = m.shotMap, awayShots = m.shotMapAway; const viewShots = shotView === 'h' ? homeShots : shotView === 'a' ? awayShots : [...homeShots, ...awayShots]; const cnt = (arr, ty) => arr.filter((s) => s.type === ty).length; const goals = cnt(viewShots, 'g'), on = cnt(viewShots, 'on'), off = cnt(viewShots, 'off'); const both = shotView === 'both'; const readoutName = both ? 'Both teams' : PLm.T[shotView === 'a' ? m.a : m.h].name; const xgVal = both ? (m.xg.h + m.xg.a).toFixed(2) : (shotView === 'a' ? m.xg.a : m.xg.h); const shotsVal = both ? (m.shots.h + m.shots.a) : (shotView === 'a' ? m.shots.a : m.shots.h); const ink = light ? 'var(--text-primary)' : 'var(--bs-white)'; const inkDim = light ? 'var(--text-muted)' : 'rgba(255,255,255,0.55)'; const liveLabel = light ? 'var(--bs-success)' : 'var(--bs-lime)'; const Team = ({ code, sub, align }) => (
{PLm.T[code].name}
{sub}
); const Arrow = ({ d }) => ( ); const card = light ? { background: 'var(--bs-neutral-100)', border: '1px solid var(--border-subtle)', borderRadius: 8, position: 'relative' } : { background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.09)', borderRadius: 8, position: 'relative' }; const ShotTab = ({ id, label }) => { const on = shotView === id; return ( ); }; const LegendDot = ({ c, ring, star, label }) => ( {star ? : } {label} ); return (
{!light && !solid &&
} {!headless && (
Stats Centre · {PLm.season} · Matchweek {PLm.matchweek}

Premier League

Live Stats Centre
)} {headless && (
Live Now · Matchweek {PLm.matchweek}
)}
{/* LEFT */}
Live · {m.min} {idx + 1}/{matches.length} live
{m.hs}–{m.as}
{/* RIGHT */}

Shot Map

{/* legend */}
{both ? ( ) : ( )}
{xgVal} xG · {readoutName}
{goals} goals · {on} on target · {off} off from {shotsVal} shots
{/* ratings */}
{m.ratings.slice(0, 2).map((p) => (
{p.name}
{p.note}
{p.r}
))}
); } function WinProb({ m, hc, ac, light = false }) { const hv = light ? 'var(--text-brand)' : 'var(--bs-lime)'; const av = light ? '#2A6FDB' : '#5B8DEF'; const drawSeg = light ? 'var(--bs-neutral-300)' : 'rgba(255,255,255,0.3)'; return (
Live Win Probability
{hc.name} {m.winProb.h}% Draw {m.winProb.d}% {ac.name} {m.winProb.a}%
); } Object.assign(window, { StatsHero });