LIVE · MELREESE
{/* Match state hero */}
Week 11 · match play
{card.teamName}
VS
{card.opponent}
0 ? 'var(--cream)' : state < 0 ? '#E7B8A7' : 'var(--cream)',
textShadow: '0 4px 20px rgba(0,0,0,0.2)',
}}>{label}
THRU {thru} · {sub}
{/* Match card — minimalist hole strip */}
Match card
THRU {thru} · {remaining} LEFT
{/* Unified hole strip — one pill per hole */}
{card.holes.map(h => {
const r = h.result;
const isCurrent = h.current;
const you = h.you, opp = h.opp;
let bg, fg, border;
if (r === 'W') { bg = 'var(--forest)'; fg = 'var(--cream)'; border = 'none'; }
else if (r === 'L') { bg = 'var(--cream)'; fg = 'var(--forest)'; border = 'none'; }
else if (r === 'H') { bg = 'var(--paper)'; fg = 'var(--forest)'; border = '1px solid rgba(28,73,42,0.25)'; }
else if (isCurrent) { bg = 'transparent'; fg = 'var(--forest)'; border = '1.5px solid var(--forest)'; }
else { bg = 'transparent'; fg = 'rgba(14,28,19,0.3)'; border = '1px solid rgba(14,28,19,0.08)'; }
return (
{h.hole}
{isCurrent ? '·' : r || ''}
{you != null && opp != null && (
{you}·{opp}
)}
);
})}
{/* Legend + summary */}
{wonH} won
{halvedH} halved
{lostH} lost
{/* Current hole callout */}
You're on
Hole 6
72 YD · MAT 2 · PAR 3
{/* Other matches */}
Other matches
{MOCK.LIVE.matches.filter(m => !m.isYou).slice(0, 5).map((m, i, arr) => (
{m.teams}
{m.status}
thru {m.thru}
))}
{showSheet &&
setShowSheet(false)} onDone={() => { setShowSheet(false); go({ screen: 'resultShare' }); }}/>}
);
}
function ScoreRow({ label, holes, field }) {
return (
{label}
{holes.map((h, i) => {
const val = h[field];
const other = h[field === 'you' ? 'opp' : 'you'];
const best = val != null && other != null && val < other;
return (
{val != null ? val : h.current ? '…' : ''}
);
})}
);
}
function ResultCell({ h }) {
if (!h.result) {
return
e.stopPropagation()} style={{
width: '100%', background: 'var(--cream)', color: 'var(--ink)',
borderTopLeftRadius: 28, borderTopRightRadius: 28, padding: '16px 20px 24px',
maxHeight: '88%', overflowY: 'auto',
animation: 'sheet-up 0.3s cubic-bezier(0.2, 0.8, 0.2, 1)',
}}>
Hole {hole} · par 3 · 72 yd
Log the hole
{/* mode toggle */}
{['quick', 'detailed'].map(m => (
))}
{mode === 'quick' ?
: }
);
}
function QuickHoleLog({ onDone, onClose }) {
const [you, setYou] = React.useState(null);
const [opp, setOpp] = React.useState(null);
const result = you != null && opp != null
? (you < opp ? 'HOLE WIN' : you > opp ? 'HOLE LOSS' : 'HALVED')
: null;
const isWin = result === 'HOLE WIN';
const isLoss = result === 'HOLE LOSS';
return (
<>
Quick mode · just score, no shot tracking. Stats won't update for this hole.
);
}
// Proximity buckets (18Birdies-style pin tracker)
const PROX = [
{ key: 'tap', label: 'Tap in', ft: 2, color: 'var(--forest)', tone: 'green' },
{ key: '10', label: "< 10'", ft: 8, color: 'var(--forest)', tone: 'green' },
{ key: '20', label: "< 20'", ft: 16, color: '#3E8A57', tone: 'green' },
{ key: '30', label: "< 30'", ft: 26, color: '#C57B48', tone: 'green' },
{ key: 'fringe', label: 'Fringe', ft: 38, color: '#8A6A4A', tone: 'fringe' },
{ key: 'miss', label: 'Off', ft: 60, color: 'var(--clay-deep)', tone: 'off' },
];
function DetailedHoleLog({ onDone, onClose }) {
// First-tee shots
const [youProx, setYouProx] = React.useState(null);
const [partnerProx, setPartnerProx] = React.useState(null);
const [pickedBall, setPickedBall] = React.useState(null); // 'you' | 'partner'
const [putts, setPutts] = React.useState(null);
const [teamScore, setTeamScore] = React.useState(null); // auto
const [oppScore, setOppScore] = React.useState(null);
// Auto-compute team score: if GIR (either on green), 1 + putts; else 2 + putts approx
React.useEffect(() => {
const gir = (youProx && youProx !== 'miss' && youProx !== 'fringe') ||
(partnerProx && partnerProx !== 'miss' && partnerProx !== 'fringe');
if (pickedBall && putts != null) {
setTeamScore(gir ? 1 + putts : 2 + putts);
}
}, [youProx, partnerProx, pickedBall, putts]);
const result = teamScore != null && oppScore != null
? (teamScore < oppScore ? 'HOLE WIN' : teamScore > oppScore ? 'HOLE LOSS' : 'HALVED')
: null;
const isWin = result === 'HOLE WIN';
const isLoss = result === 'HOLE LOSS';
const pickedOn = pickedBall === 'you' ? youProx : partnerProx;
const pickedGIR = pickedOn && pickedOn !== 'miss' && pickedOn !== 'fringe';
// Clutch flag: partner missed first, you rescued
const clutch = partnerProx === 'miss' && pickedBall === 'you';
return (
<>
{/* Step 1: Tee shots · proximity per player */}
{/* Visual green — shows both balls */}
{(youProx || partnerProx) && (
)}
{/* Step 2: pick which ball */}
{youProx && partnerProx && (
{[
{ k: 'you', label: 'Your ball', sub: PROX.find(p => p.key === youProx)?.label, color: 'var(--clay)' },
{ k: 'partner', label: "Jay's ball", sub: PROX.find(p => p.key === partnerProx)?.label, color: 'var(--forest)' },
].map(b => (
))}
{clutch && pickedBall === 'you' && (
CLUTCH · partner missed, your shot saved the team
)}
)}
{/* Step 3: putts to hole out */}
{pickedBall && (
{[1, 2, 3, 4].map(n => (
))}
{pickedGIR ? 'From the green.' : "Include chip-on + putts."}
)}
{/* Step 4: team score computed, opponent score picker */}
{putts != null && teamScore != null && (
YOUR TEAM
{teamScore}
{pickedGIR ? 'GIR · ' : 'no GIR · '}{putts} putt{putts !== 1 ? 's' : ''}
)}
{/* Result banner */}
{result && (
Team {teamScore} · Opp {oppScore}
GIR {pickedGIR ? '✓' : '✗'} · {putts}P · usage: {pickedBall === 'you' ? 'YOU' : 'JAY'}
)}
);
}
function StepLabel({ n, label }) {
return (
);
}
function PlayerShotRow({ name, handle, accent, value, onPick, style }) {
return (
{name[0]}
{value && (
p.key === value)?.color, color: 'var(--cream)',
}}>{PROX.find(p => p.key === value)?.label.toUpperCase()}
)}
{PROX.map(p => (
))}
);
}
// Visual: green with two ball positions
function GreenViz({ youProx, partnerProx, picked }) {
// Map prox key → (radius from pin in viewport units)
const r = { tap: 4, '10': 12, '20': 22, '30': 32, fringe: 44, miss: 54 };
// Deterministic angles per player so it feels consistent
const ballPos = (key, angle) => {
if (!key) return null;
const dist = r[key];
return [50 + Math.cos(angle) * dist, 50 + Math.sin(angle) * dist];
};
const yPos = ballPos(youProx, -Math.PI / 3);
const pPos = ballPos(partnerProx, Math.PI * 0.7);
return (
The green · top-down
);
}
function SheetActions({ onClose, onDone, disabled, label = 'Save · next hole' }) {
return (
);
}
function ScorePicker({ value, onPick, muted }) {
return (
{[1,2,3,4,5,6].map(v => (
))}
);
}
// ─── Share card (match result) ──────────────────────────
function ResultShareScreen({ go }) {
return (
Match result · Week 11
Swipe to pick a card style
Final
2 & 1
WIN vs Riv + Theo
5 WON
1 HALVED
2 LOST
@alex.miami + @jaybird · SBX +0.043
);
}
Object.assign(window, { MembershipScreen, LiveScorecardScreen, ResultShareScreen });