/* global React, Button, Chip, Eyebrow, Icon, sbx */ // Live 1v1 match screen. Real-time synced via Supabase channels. // Match-play scoring: lower score wins the hole; state = holes_up (A) vs (B). function MatchLive({ matchId, profile, onExit }) { const [match, setMatch] = React.useState(null); const [holes, setHoles] = React.useState([]); const [players, setPlayers] = React.useState({}); // id → { first_name, handle } const [currentHole, setCurrentHole] = React.useState(1); const [err, setErr] = React.useState(''); // Remember which match we're in across refreshes React.useEffect(() => { try { localStorage.setItem('spp_active_match', matchId); } catch {} }, [matchId]); // Initial load + live channels React.useEffect(() => { let cancelled = false; async function load() { const { data: m, error } = await sbx.from('matches').select('*').eq('id', matchId).maybeSingle(); if (cancelled) return; if (error || !m) { setErr((error && error.message) || 'Match not found.'); return; } setMatch(m); const { data: hs } = await sbx.from('match_holes').select('*').eq('match_id', matchId).order('hole_number'); if (!cancelled) setHoles(hs || []); // Load all player profiles (up to 4 for 2v2) const ids = [m.player_a, m.player_a2, m.player_b, m.player_b2].filter(Boolean); if (ids.length) { const { data: ps } = await sbx.from('profiles').select('id, first_name, last_name, handle').in('id', ids); if (!cancelled && ps) { const byId = {}; for (const p of ps) byId[p.id] = p; setPlayers(byId); } } // Seed currentHole to first unscored hole if (!cancelled && hs) { const next = hs.find(h => h.result == null); if (next) setCurrentHole(next.hole_number); } } load(); const ch = sbx.channel(`match-live:${matchId}`) .on('postgres_changes', { event: '*', schema: 'public', table: 'matches', filter: `id=eq.${matchId}` }, async (p) => { if (p.new) setMatch(p.new); }) .on('postgres_changes', { event: '*', schema: 'public', table: 'match_holes', filter: `match_id=eq.${matchId}` }, (p) => { if (p.new) { setHoles(prev => { const next = [...prev]; const i = next.findIndex(h => h.hole_number === p.new.hole_number); if (i >= 0) next[i] = p.new; else next.push(p.new); next.sort((a, b) => a.hole_number - b.hole_number); return next; }); } }) .subscribe(); return () => { cancelled = true; sbx.removeChannel(ch); }; }, [matchId, profile.id]); // Always compute state (even before data arrives); this keeps hook count stable // across renders, per Rules of Hooks. const hasData = match && holes.length > 0; // Team membership: "you are A" = profile is on team A (player_a or player_a2 for 2v2). const youAreA = hasData && (match.player_a === profile.id || match.player_a2 === profile.id); const is2v2 = hasData && match.match_type === '2v2'; const state = hasData ? computeState(holes, match.total_holes) : { up: 0, remaining: 0, decided: false, margin: null, totalPlayed: 0 }; // If the match just got decided this render, persist the completion. React.useEffect(() => { if (!hasData) return; if (state.decided && match.status !== 'completed') { const winner = state.up > 0 ? 'A' : state.up < 0 ? 'B' : 'H'; sbx.from('matches').update({ status: 'completed', result: winner, final_margin: state.margin, completed_at: new Date().toISOString(), }).eq('id', matchId).then(() => {}); } }, [hasData, state.decided, state.up, state.margin, match && match.status, matchId]); async function cancelMatch() { if (!window.confirm('Cancel this match? All scores so far will be lost and the match will be marked abandoned.')) return; await sbx.from('matches').update({ status: 'abandoned', completed_at: new Date().toISOString() }).eq('id', matchId); try { localStorage.removeItem('spp_active_match'); } catch {} onExit(); } if (err) return ; if (!hasData) return ; if (match.status === 'abandoned') { return ; } const hole = holes.find(h => h.hole_number === currentHole) || holes[0]; const matchDecided = match.status === 'completed' || state.decided; // Team label helpers const teamAName = is2v2 ? [players[match.player_a], players[match.player_a2]].filter(Boolean).map(p => p.first_name || p.handle).join(' + ') || 'Team A' : (players[match.player_a] ? (players[match.player_a].first_name || players[match.player_a].handle) : 'A'); const teamBName = is2v2 ? [players[match.player_b], players[match.player_b2]].filter(Boolean).map(p => p.first_name || p.handle).join(' + ') || 'Team B' : (players[match.player_b] ? (players[match.player_b].first_name || players[match.player_b].handle) : 'B'); const yourTeamLabel = is2v2 ? (youAreA ? teamAName : teamBName) : 'You'; const theirTeamLabel = is2v2 ? (youAreA ? teamBName : teamAName) : (youAreA ? teamBName : teamAName); return (
{/* Header */}
{match.course_name || 'Match'} · {match.total_holes} holes · {match.match_type || '1v1'}
{is2v2 ? `${teamAName} vs ${teamBName}` : `You vs ${theirTeamLabel}`}
{/* Decided — final result banner */} {matchDecided && } {/* Current hole card */} {!matchDecided && (
saveScore(matchId, hole.hole_number, youAreA ? 'a' : 'b', score)} onOpponentScore={(score) => saveScore(matchId, hole.hole_number, youAreA ? 'b' : 'a', score)} onSaveStat={(col, value) => saveHoleStat(matchId, hole.hole_number, col, value)} onAdvance={() => { const next = holes.find(h => h.hole_number > currentHole && h.result == null); if (next) setCurrentHole(next.hole_number); }} />
)} {/* Hole-by-hole strip */}
Scorecard
{holes.map(h => ( ))}
{/* Footer: cancel + back */}
{!matchDecided ? ( ) : }
); } // ─── Hole card ─────────────────────────────────────────────── function HoleCard({ hole, youAreA, is2v2, yourTeamLabel, theirTeamLabel, onYourScore, onOpponentScore, onSaveStat, onAdvance }) { const yourScore = youAreA ? hole.player_a_score : hole.player_b_score; const oppScore = youAreA ? hole.player_b_score : hole.player_a_score; const [showStats, setShowStats] = React.useState(false); // Your per-hole stats (1v1 only). In 2v2, team-level stats need per-shot // tracking which is a follow-up — so the section is only shown for 1v1. const statPrefix = youAreA ? 'player_a' : 'player_b'; const yourGir = hole[statPrefix + '_gir']; const yourPutts = hole[statPrefix + '_putts']; const yourProx = hole[statPrefix + '_proximity_ft']; const statsLogged = yourGir != null || yourPutts != null || yourProx != null; return (
Current hole
{hole.hole_number} PAR {hole.par || 3}
{hole.result != null && (
Result
{resultLabel(hole.result, youAreA)}
)}
{/* Advanced stats — 1v1 only for now. Tap "Log stats" to expand. */} {!is2v2 && yourScore != null && (
{showStats && (
{/* GIR toggle */}
Green in regulation
onSaveStat(statPrefix + '_gir', true)}>Yes onSaveStat(statPrefix + '_gir', false)}>No onSaveStat(statPrefix + '_gir', null)}>—
{/* Putts stepper */}
Putts
{[0, 1, 2, 3, 4, 5].map(n => ( onSaveStat(statPrefix + '_putts', n)}>{n} ))}
{/* Proximity (tee-shot to pin in feet) */}
Proximity to pin · feet from tee shot
onSaveStat(statPrefix + '_proximity_ft', e.target.value === '' ? null : Number(e.target.value))} placeholder="e.g. 12" style={{ marginTop: 6, width: '100%', padding: '10px 12px', borderRadius: 10, background: 'rgba(255,255,255,0.08)', border: '1px solid rgba(234,226,206,0.18)', color: 'var(--cream)', fontSize: 15, outline: 'none', }} />
)}
)} {yourScore != null && oppScore != null && ( )}
); } function StatChoice({ active, onClick, children }) { return ( ); } // ─── Stepper (score input) ─────────────────────────────────── function Stepper({ label, value, onChange }) { const v = value ?? null; return (
{label}
onChange(Math.max(1, (v ?? 3) - 1))}>−
{v == null ? '—' : v}
onChange(Math.min(12, (v ?? 2) + 1))}>+
); } function StepBtn({ children, onClick, disabled }) { return ( ); } // ─── State badge (2 UP / 1 DN / AS / DORMIE / FINAL) ───────── function StateBadge({ state }) { const lbl = labelForState(state); const bg = state.up > 0 ? 'var(--forest)' : state.up < 0 ? 'var(--loss)' : 'var(--cream)'; const fg = state.up === 0 ? 'var(--forest)' : 'var(--cream)'; return (
{lbl}
); } function labelForState(state) { if (state.up === 0) return state.remaining === 0 ? 'HALVED' : 'AS'; const absUp = Math.abs(state.up); if (state.decided) return state.margin; if (absUp === state.remaining) return 'DORMIE'; return `${absUp} ${state.up > 0 ? 'UP' : 'DN'}`; } // ─── Result badge (hole-level) ─────────────────────────────── // Always legible on any pill background: W = small "W" on solid chip, // L = "L" on muted chip, H = outlined circle. function ResultBadge({ result, youAreA }) { if (result == null) { return
; } if (result === 'H') { return
; } const youWon = (result === 'A' && youAreA) || (result === 'B' && !youAreA); return (
{youWon ? 'W' : 'L'}
); } // ─── Final banner ──────────────────────────────────────────── function FinalBanner({ match, state, youAreA, theirTeamLabel }) { const youWon = (state.up > 0 && youAreA) || (state.up < 0 && !youAreA); const halved = state.up === 0; const oppLabel = theirTeamLabel || 'Opponent'; return (
Match final
{halved ? 'Halved.' : youWon ? `W ${match.final_margin || state.margin}` : `L ${match.final_margin || state.margin}`}
{youWon ? `You beat ${oppLabel} ${match.final_margin || state.margin}.` : halved ? 'Matched hole-for-hole. Go again.' : `${oppLabel} took it ${match.final_margin || state.margin}.`}
); } // ─── Full-screen message ───────────────────────────────────── function FullScreenMessage({ title, detail, onBack }) { return (
{title}
{detail &&
{detail}
} {onBack && ( )}
); } // ─── Scoring helpers ───────────────────────────────────────── // Save a single advanced stat column for a given hole (GIR / putts / proximity). async function saveHoleStat(matchId, holeNumber, column, value) { const patch = { [column]: value, updated_at: new Date().toISOString() }; await sbx.from('match_holes').update(patch).eq('match_id', matchId).eq('hole_number', holeNumber); } // Save a score for one player on one hole, recompute result, and bump match_holes row. async function saveScore(matchId, holeNumber, who, score) { const col = who === 'a' ? 'player_a_score' : 'player_b_score'; const { data: h } = await sbx.from('match_holes').select('*').eq('match_id', matchId).eq('hole_number', holeNumber).maybeSingle(); if (!h) return; const nextA = who === 'a' ? score : h.player_a_score; const nextB = who === 'b' ? score : h.player_b_score; let result = null; if (nextA != null && nextB != null) { if (nextA < nextB) result = 'A'; else if (nextB < nextA) result = 'B'; else result = 'H'; } await sbx.from('match_holes').update({ [col]: score, result, updated_at: new Date().toISOString(), }).eq('match_id', matchId).eq('hole_number', holeNumber); } // Compute running match state from completed holes. // Returns { up, remaining, decided, margin, totalPlayed } function computeState(holes, totalHoles) { let aWins = 0, bWins = 0, played = 0; for (const h of holes) { if (h.result === 'A') { aWins++; played++; } else if (h.result === 'B') { bWins++; played++; } else if (h.result === 'H') { played++; } } const up = aWins - bWins; // + = A up const remaining = totalHoles - played; const absUp = Math.abs(up); const decided = (absUp > remaining) || (remaining === 0); let margin = null; if (decided) { if (absUp === 0) margin = 'AS'; else if (remaining === 0) margin = `${absUp} UP`; else margin = `${absUp}&${remaining}`; } return { up, remaining, decided, margin, totalPlayed: played }; } // ─── Hole result label: W / L / H from your POV ────────────── function resultLabel(result, youAreA) { if (result === 'H') return 'H'; const youWon = (result === 'A' && youAreA) || (result === 'B' && !youAreA); return youWon ? 'W' : 'L'; } Object.assign(window, { MatchLive });