/* global React, Icon, LiveDot, Button, Eyebrow, Chip, Dashed, ScoreDial, Spark, MOCK, AvatarBy */ // Stats dashboard + handicap + badges (deep, member-gated) function StatsScreen({ go, tier }) { const isMember = tier === 'league' || tier === 'plus' || tier === 'stats'; const [tab, setTab] = React.useState('you'); return (
The Numbers
Stats.
Your receipts, ranked.
{[['you', 'You'], ['h2h', 'Head-to-Head'], ['badges', 'Badges']].map(([k, l]) => ( ))}
{!isMember ? ( ) : tab === 'you' ? ( ) : tab === 'h2h' ? ( ) : ( )}
); } function StatsLocked({ go }) { return (
{/* Lock message at the top */}
Your stats are ready.
Add the Stats Add On for $10/mo — less than your last cortadito order, probably.
{/* Blurred preview below as teaser */}
); } function StatsYou() { const u = MOCK.USER; const hasHistory = MOCK.HISTORY.length > 0; const hasMatches = u.matchesTotal > 0; const totalHoles = u.holesWonTotal + u.holesLostTotal + u.holesHalvedTotal; const holeWinPct = totalHoles > 0 ? Math.round(u.holesWonTotal / totalHoles * 100) + '%' : '—'; const holeWinSub = totalHoles > 0 ? `${u.holesWonTotal} of ${totalHoles}` : 'no matches yet'; const bestMatch = MOCK.HISTORY.find(r => r.best) || null; const bestWinVal = bestMatch ? bestMatch.margin : '—'; const bestWinSub = bestMatch ? `${bestMatch.week} · vs ${bestMatch.opp}` : 'no matches yet'; return (
{/* SBX Rating hero */} {/* Summary tiles */}
{/* Scramble Intelligence — the shot-level truth */} {/* How it moves — only shown once the user has match history */} {hasHistory && (
How it moves
SBX delta breakdown coming soon.
)} {/* Win rate by opponent rating — only shown once the user has match history */} {hasHistory && (
Your win rate vs rating
Win rate breakdown coming soon.
)} {/* Match history */}
Match history
{hasHistory ? (
{MOCK.HISTORY.slice(0, 6).map((r, i) => ( ))}
) : (
No matches yet.
Your match history will show up here after your first game.
)}
); } function ScrambleIntel({ u }) { const pct = (n) => `${Math.round(n * 100)}%`; // Shot usage sparkline const usage = u.shotUsageTrend; const uLo = Math.min(...usage), uHi = Math.max(...usage); return (
Scramble intel
LAST 20 MATCHES
{/* Shot Usage — the headline scramble stat */}
SHOT USAGE {u.shotUsageRank.toUpperCase()}
{pct(u.shotUsage)} of team shots were yours
{/* Mini 7-match sparkline */} {(() => { const pts = usage.map((v, i) => { const x = (i / (usage.length - 1)) * 76 + 2; const y = 36 - ((v - uLo) / (uHi - uLo || 1)) * 32 + 2; return `${x},${y}`; }); return ( <> ); })()}
{/* 50% reference bar */}
{/* 50% tick */}
0% 50% · even with partner 100%
Your shot gets picked slightly under half the time — right around what you'd want from a partner. Up from 38% three months ago.
{/* 3-up core tiles: GIR · Putts · Proximity */}
{/* Leadoff vs Cleanup vs Clutch split */}
Usage by situation
when do you show up?
{[ { label: 'Leadoff', val: u.leadoffUsage, hint: 'you hit first' }, { label: 'Cleanup', val: u.cleanupUsage, hint: 'you hit second' }, { label: 'Clutch', val: u.clutchUsage, hint: 'partner missed', hot: true }, ].map((r) => (
{r.label}
{pct(r.val)}
{r.hint}
))}
Clutch specialist. When your partner's out, your ball saves the hole 62% of the time.
{/* Proximity by distance */}
Proximity by distance
{u.proximityByDist.map((r, i) => { // visualize closer = better (shorter bar = closer) const maxFt = 30; const pctFull = Math.min(r.avg / maxFt, 1); const good = r.avg < 15; return (
{r.bucket} {r.avg}′ · {r.shots} shots
); })}
{/* Par-or-better + bailout */}
); } function CoreStat({ label, value, sub, accent, muted }) { return (
{label}
{value}
{sub}
); } function SBXHero({ user }) { const reliable = user.sbxReliability >= 0.5; const trend = user.sbxTrend; // 7 points const lo = Math.min(...trend); const hi = Math.max(...trend); return (
{/* watermark brand */}
SBX · v1
Sandbox Rating™
{user.sbx.toFixed(3)} = 0 ? '#B8E0A4' : '#E7B8A7', fontWeight: 800, display: 'flex', alignItems: 'center', gap: 3, fontFamily: 'var(--font-mono)', }}> = 0 ? 'rotate(180deg)' : 'none' }}> {user.sbxDelta >= 0 ? '+' : ''}{user.sbxDelta.toFixed(3)}
{reliable ? `Top ${100 - user.sbxPercentile}% in Sandbox · #${user.sbxGlobalRank.toLocaleString()} globally` : `Provisional · ${user.sbxMatchesToProvisional} matches to reliable`}
{/* Dynamic trend curve */}
RATING HISTORY · LAST 7 MATCHES PEAK {user.sbxPeak.toFixed(3)}
{/* gridlines */} {[0.25, 0.5, 0.75].map(t => ( ))} {(() => { const pts = trend.map((v, i) => { const x = (i / (trend.length - 1)) * 280; const y = 60 - ((v - lo) / (hi - lo || 1)) * 54 + 3; return [x, y]; }); // smooth cubic path let d = `M${pts[0][0]},${pts[0][1]}`; for (let i = 1; i < pts.length; i++) { const [x, y] = pts[i]; const [px, py] = pts[i - 1]; const cx = (px + x) / 2; d += ` Q${cx},${py} ${cx},${(py + y) / 2} T${x},${y}`; } const last = pts[pts.length - 1]; return ( <> {pts.map(([x, y], i) => ( ))} {trend[trend.length - 1].toFixed(3)} ); })()}
Reliability {Math.round(user.sbxReliability * 100)}% Updates every match
); } function MatchRow({ r, last }) { const isW = r.result === 'W', isL = r.result === 'L'; // Badge styling: W = filled forest, H = filled tan, L = white with forest outline const badgeStyle = isW ? { background: 'var(--forest)', color: 'var(--cream)', border: 'none' } : isL ? { background: 'var(--cream)', color: 'var(--forest)', border: 'none' } : { background: 'var(--paper)', color: 'var(--forest)', border: '1px solid rgba(28,73,42,0.25)' }; const marginColor = isW ? 'var(--forest)' : isL ? 'var(--forest)' : '#8A6A4A'; const marginOpacity = isL ? 0.55 : 1; const label = isW ? 'W' : isL ? 'L' : 'H'; return (
{r.week}
{label}
vs {r.opp} {r.live && • LIVE}
{r.best && '🏆 Career win · '} w/ {r.partner} · {r.holesWon}W–{r.holesLost}L holes
{r.live && r.result === 'W' ? `${r.margin}*` : r.margin}
); } function StatTile({ label, value, sub, highlight, accent }) { return (
{label}
{value}
{sub}
); } function StatsH2H() { const bestPartner = MOCK.H2H.find(h => h.kind === 'Partner') || null; return (
{bestPartner ? (
Best Pairing
1
You + {bestPartner.vs}
{bestPartner.chemistry != null ? `Chemistry ${bestPartner.chemistry} · ` : ''}{bestPartner.wins}W {bestPartner.losses}L {bestPartner.halved}H
) : (
No pairings yet.
Play matches to build your head-to-head record.
)} {MOCK.H2H.length > 0 && (
All records
{MOCK.H2H.map((h, i) => (
{h.vs} {h.kind}
{h.kind === 'Partner' ? `Chem ${h.chemistry} · last: ${h.lastMargin}` : `Last: ${h.lastMargin}`}
{h.wins} – {h.losses} – {h.halved}
))}
)}
); } function StatsBadges() { const earned = MOCK.BADGES.filter(b => !b.locked).length; const total = MOCK.BADGES.length; return (
Collected · {earned} of {total}
{MOCK.BADGES.map(b => )}
); } function BadgeCard({ b }) { const ic = { flag: , fire: , bolt: , trophy: , ball: , }[b.icon]; return (
{b.locked ? : ic}
{b.name}
{b.sub}
{!b.locked && b.count > 1 &&
×{b.count}
}
{b.rarity}
); } Object.assign(window, { StatsScreen });