{/* Header with back-to-home + handle edit + sign out */}

{onExit && ( )}

Challenge a friend

Ready to play?

Start a match or jump back into one.

{/* Big primary actions */}

{/* Recent matches */}

Your matches

{recent.length === 0 ? (

No matches yet. Start one above.

) : (

{recent.map((m, i) => ( ))}

)}

); } function StatusChip({ match, youAreA }) { if (match.status === 'waiting') return Waiting; if (match.status === 'active') return Live; if (match.status === 'completed') { const youWon = (match.result === 'A' && youAreA) || (match.result === 'B' && !youAreA); const halved = match.result === 'H'; return {youWon ? 'W' : halved ? 'H' : 'L'} {match.final_margin || ''}; } return {match.status}; } // ─── Start Match view ──────────────────────────────────────── function StartMatchView({ profile, format = 'regular', onCancel, onCreated }) { const isRegular = format === 'regular'; // Nothing pre-selected — the form reveals one step at a time as you choose. const [course, setCourse] = React.useState(''); // pp: free text const [holes, setHoles] = React.useState(null); const [matchType, setMatchType] = React.useState(null); const [step, setStep] = React.useState(0); const [busy, setBusy] = React.useState(false); const [err, setErr] = React.useState(''); // Regular course: load real scorecards (rc_courses + tees). const [rcCourses, setRcCourses] = React.useState([]); const [courseId, setCourseId] = React.useState(null); const [teeId, setTeeId] = React.useState(null); const [q, setQ] = React.useState(''); // course search React.useEffect(() => { if (!isRegular) return; (async () => { const [{ data: cs }, { data: ts }] = await Promise.all([ sbx.from('rc_courses').select('id, name, city, state').order('name'), sbx.from('rc_tees').select('id, course_id, name, color, par, yards, rating, slope'), ]); const list = (cs || []).map(c => ({ ...c, tees: (ts || []).filter(t => t.course_id === c.id) })); setRcCourses(list); })(); }, [isRegular]); const selCourse = rcCourses.find(c => c.id === courseId); const selTee = selCourse && selCourse.tees.find(t => t.id === teeId); // Miles from the golfer to each course — the shared geocode helper // resolves "name, city, state" once per course (cached on-device). const [viewerCoords] = useGeolocation(); const [distByCourse, setDistByCourse] = React.useState({}); React.useEffect(() => { if (!rcCourses.length || !viewerCoords) return undefined; let on = true; (async () => { for (const c of rcCourses) { const coords = await geocodeCourse({ id: c.id, address: c.name, city: c.city, state: c.state || 'FL' }); // eslint-disable-line no-await-in-loop if (!on) return; if (coords) { const mi = haversineMiles(viewerCoords.lat, viewerCoords.lng, coords.lat, coords.lng); if (mi != null) setDistByCourse(prev => ({ ...prev, [c.id]: mi })); } } })(); return () => { on = false; }; }, [rcCourses.length, viewerCoords && viewerCoords.lat]); // ── Step gating ── const courseDone = isRegular ? !!courseId : !!course.trim(); const showTees = isRegular && !!courseId && selCourse && selCourse.tees.length > 0; const filteredCourses = q.trim() ? rcCourses.filter(c => `${c.name} ${c.city || ''}`.toLowerCase().includes(q.trim().toLowerCase())) : rcCourses; async function create() { if (busy) return; setBusy(true); setErr(''); const join_code = randomJoinCode(); if (isRegular) { if (!selCourse || !selTee) { setErr('Pick a course and tee.'); setBusy(false); return; } const { data: rcHoles } = await sbx.from('rc_holes') .select('hole_number, par, yards').eq('tee_id', selTee.id).order('hole_number'); const picked = (rcHoles || []).filter(h => holes === 18 ? true : h.hole_number <= 9); const { data, error } = await sbx.from('matches').insert({ join_code, course_name: selCourse.name, total_holes: holes, match_type: matchType, format: 'regular', player_a: profile.id, status: 'waiting', }).select().single(); if (error) { setErr(error.message); setBusy(false); return; } const rows = picked.map((h, i) => ({ match_id: data.id, hole_number: i + 1, par: h.par, distance_yards: h.yards })); await sbx.from('match_holes').insert(rows); setBusy(false); onCreated(data); return; } // Pitch & putt: free-text course, all par 3. const { data, error } = await sbx.from('matches').insert({ join_code, course_name: course.trim() || null, total_holes: holes, match_type: matchType, format: 'pp', player_a: profile.id, status: 'waiting', }).select().single(); if (error) { setErr(error.message); setBusy(false); return; } const rows = Array.from({ length: holes }, (_, i) => ({ match_id: data.id, hole_number: i + 1, par: 3 })); await sbx.from('match_holes').insert(rows); setBusy(false); onCreated(data); } // Selectable control on the forest gradient: cream when chosen, translucent otherwise. const pick = (on) => ({ background: on ? 'var(--cream)' : 'rgba(255,255,255,0.08)', color: on ? 'var(--forest)' : 'var(--cream)', border: on ? 'none' : '1px solid rgba(234,226,206,0.18)', }); // ── One question per screen (same format as Create account) ── // Tees only appear for a regular course that actually has tee sets. const courseField = isRegular ? (

{rcCourses.length > 5 && ( setQ(e.target.value)} placeholder="Search courses…" className="on-forest-input" style={{ width: '100%', padding: '12px 14px', borderRadius: 12, marginBottom: 10, background: 'rgba(255,255,255,0.1)', border: '1px solid rgba(234,226,206,0.18)', color: 'var(--cream)', fontSize: 15, outline: 'none', }}/> )}

{rcCourses.length === 0 && } {rcCourses.length > 0 && filteredCourses.length === 0 &&

No courses match “{q}”.

} {filteredCourses.map(c => { const on = courseId === c.id; return ( ); })}

) : ( setCourse(e.target.value)} placeholder="e.g. Killian Greens" className="on-forest-input" style={{ width: '100%', padding: '15px 14px', borderRadius: 14, textAlign: 'center', background: 'rgba(255,255,255,0.1)', border: '1px solid rgba(234,226,206,0.18)', color: 'var(--cream)', fontSize: 18, outline: 'none', }}/> ); const steps = [ { key: 'course', eyebrow: 'Where', title: 'Where are you playing?', valid: courseDone, field: courseField }, ]; if (showTees) { steps.push({ key: 'tees', eyebrow: 'Tees', title: 'Which tees?', valid: !!teeId, field: (

{selCourse.tees.map(t => { const on = teeId === t.id; return ( ); })}

) }); } steps.push({ key: 'holes', eyebrow: 'Length', title: 'How many holes?', valid: !!holes, field: (

{[9, 18].map(n => ( ))}

) }); steps.push({ key: 'format', eyebrow: 'Format', title: '1v1 or 2v2?', valid: !!matchType, field: (

{[['1v1', '1v1'], ['2v2', '2v2 · Scramble']].map(([v, l]) => ( ))}

) }); const last = steps.length - 1; const safeStep = Math.min(step, last); const cur = steps[safeStep]; // If the Tees step disappears (e.g. course swapped for one with no tees), // don't leave the pointer past the end. React.useEffect(() => { if (step > last) setStep(last); }, [step, last]); // Keyboard-aware lift (matches the sign-up flow): raise the centered content // by half the on-screen keyboard height when a field is focused. const inset = useMatchKbInset(); function blur() { if (document.activeElement && document.activeElement.blur) document.activeElement.blur(); } function next() { if (!cur || !cur.valid || busy) return; blur(); if (safeStep < last) { setErr(''); setStep(safeStep + 1); } else create(); } function back() { blur(); if (safeStep === 0) onCancel(); else { setErr(''); setStep(safeStep - 1); } } return (

{/* Centered content — lifts up by half the keyboard height when focused */}

{/* Progress */}

{steps.map((s, i) => (

))}

{/* Sliding questions */}

{steps.map((s, i) => (

{s.eyebrow}

{s.title}

{s.field}

))}

{err &&

{err}

}

); } // Keyboard inset (visual viewport) — lift centered content above the keyboard. function useMatchKbInset() { const [inset, setInset] = React.useState(0); React.useEffect(() => { const vv = window.visualViewport; if (!vv) return undefined; const onResize = () => setInset(Math.max(0, window.innerHeight - vv.height - vv.offsetTop)); vv.addEventListener('resize', onResize); vv.addEventListener('scroll', onResize); onResize(); return () => { vv.removeEventListener('resize', onResize); vv.removeEventListener('scroll', onResize); }; }, []); return inset; } // ─── Lobby roster (who's on each team) ─────────────────────────────── // Small circular avatar for a slot occupant (cream-on-forest). function LobbyAvatar({ person, size = 32 }) { const initial = ((person && (person.name || person.handle)) || '?').replace(/^@/, '').charAt(0).toUpperCase(); return (

{person && person.avatar ?

: initial}

); } // Fetch handle/name/avatar for whoever currently fills the match's slots. function useSlotPeople(match) { const key = [match.player_a, match.player_a2, match.player_b, match.player_b2].filter(Boolean).join(','); const [people, setPeople] = React.useState({}); React.useEffect(() => { if (!key) { setPeople({}); return; } let alive = true; (async () => { const { data } = await sbx.from('profiles').select('id, handle, first_name, avatar_url').in('id', key.split(',')); if (!alive) return; const map = {}; (data || []).forEach(p => { map[p.id] = { id: p.id, handle: p.handle, name: p.first_name, avatar: p.avatar_url }; }); setPeople(map); })(); return () => { alive = false; }; }, [key]); return people; } // Two team panels showing filled seats (avatar + handle) and open spots. // When `onPick` is supplied and the viewer isn't seated yet, each team with a // free spot gets a "Join Team X" button. function LobbyRoster({ match, profile, people, onPick, busySide }) { const is2v2 = match.match_type === '2v2'; const meIn = [match.player_a, match.player_a2, match.player_b, match.player_b2].includes(profile.id); const TeamPanel = ({ label, slots, side }) => { const hasOpen = slots.some(s => !s); return (

{label}

{slots.map((sid, i) => { const p = sid ? people[sid] : null; const isMe = sid && sid === profile.id; return (

{sid ? :

}

{sid ? ( <>

{(p && p.name) || (p && formatHandle(p.handle)) || 'Player'}{isMe && · you}

{p && p.handle &&

{formatHandle(p.handle)}

} ) : (

Open spot

)}

); })}

{onPick && !meIn && hasOpen && ( )}

); }; return (

); } // 2v2 join: choose a side. Live-updates as others claim seats. function JoinTeamPicker({ match: initial, profile, onClaimed, onBack }) { const [match, setMatch] = React.useState(initial); const [busySide, setBusySide] = React.useState(''); const [err, setErr] = React.useState(''); const people = useSlotPeople(match); React.useEffect(() => { const ch = sbx.channel(`lobby:${match.id}:${Math.random().toString(36).slice(2, 10)}`) .on('postgres_changes', { event: 'UPDATE', schema: 'public', table: 'matches', filter: `id=eq.${match.id}` }, (payload) => { if (payload.new) setMatch(payload.new); }) .subscribe(); const poll = setInterval(async () => { const { data } = await sbx.from('matches').select('*').eq('id', match.id).maybeSingle(); if (data) setMatch(data); }, 4000); return () => { sbx.removeChannel(ch); clearInterval(poll); }; }, [match.id]); const full = match.player_a && match.player_a2 && match.player_b && match.player_b2; async function pick(side) { if (busySide) return; setBusySide(side); setErr(''); const { data, error } = await sbx.rpc('join_match_slot', { p_match: match.id, p_side: side }); if (error) { setErr(error.message); setBusySide(''); return; } onClaimed(data); } return (

Pick your team

Which side?

Tap a team with an open spot — you’ll see everyone as they join.

{full &&

This match is already full.

} {err &&

{err}

}

); } // ─── Waiting lobby (works for both 1v1 and 2v2) ────────────── // Subscribes to updates on the match row. Whenever a slot fills we re-render // to show progress; when the match goes 'active' (all required slots filled) // we push the user into the live match. function WaitingForOpponentView({ match: initial, profile, onCancel, onReady }) { const [match, setMatch] = React.useState(initial); const is2v2 = match.match_type === '2v2'; const required = is2v2 ? 4 : 2; const filled = [match.player_a, match.player_a2, match.player_b, match.player_b2].filter(Boolean).length; const people = useSlotPeople(match); React.useEffect(() => { const ch = sbx.channel(`match:${match.id}:${Math.random().toString(36).slice(2, 10)}`) .on('postgres_changes', { event: 'UPDATE', schema: 'public', table: 'matches', filter: `id=eq.${match.id}` }, (payload) => { if (payload.new) setMatch(payload.new); }) .subscribe(); // Poll as a fallback every 4s in case the channel hiccups. const poll = setInterval(async () => { const { data } = await sbx.from('matches').select('*').eq('id', match.id).maybeSingle(); if (data) setMatch(data); }, 4000); return () => { sbx.removeChannel(ch); clearInterval(poll); }; }, [match.id]); React.useEffect(() => { if (match.status === 'active') onReady(match.id); if (match.status === 'abandoned') onCancel(); }, [match.status, match.id, onReady, onCancel]); async function cancelMatch() { if (!window.confirm('Cancel this match? It will disappear from your list.')) return; await sbx.from('matches').update({ status: 'abandoned' }).eq('id', match.id); onCancel(); } return (

{/* Centered column — same formatting as the setup wizard */}

Share this code

{is2v2 ? <>Waiting on
the other three… : <>Waiting on
your opponent…}

{filled}/{required} PLAYERS IN

{/* Live roster — who's on each side as seats fill */} {is2v2 && (

)}

MATCH CODE

{match.join_code}

Players tap Joining someone else? under Challenge Friends and type this code. {is2v2 ? 'Each player picks a team as they join.' : ''}

{/* Share via OS share sheet (text/whatsapp/etc); falls back to copy */} {/* Invite by username — pushes a notification to that player */}

); } // ─── Invite-by-username panel ──────────────────────────────────────── function InviteByHandle({ matchId, profile }) { const [handle, setHandle] = React.useState(''); const [busy, setBusy] = React.useState(false); const [err, setErr] = React.useState(''); const [okMsg, setOkMsg] = React.useState(''); const [invites] = useMatchInvitesForMatch(matchId); async function send() { setErr(''); setOkMsg(''); if (!handle.trim() || busy) return; setBusy(true); try { await sendInviteByHandle({ matchId, invitedBy: profile.id, handle }); setOkMsg(`Invited ${handle.startsWith('@') ? handle : '@' + handle}.`); setHandle(''); setTimeout(() => setOkMsg(''), 2200); } catch (e) { setErr(e.message || 'Could not send invite.'); } setBusy(false); } return (

Or invite by username

setHandle(e.target.value)} onKeyDown={e => { if (e.key === 'Enter') send(); }} placeholder="@handle" autoCapitalize="off" autoCorrect="off" spellCheck={false} style={{ flex: 1, padding: '10px 12px', borderRadius: 999, border: '1px solid rgba(234,226,206,0.22)', background: 'rgba(234,226,206,0.06)', color: 'var(--cream)', fontSize: 14, outline: 'none', fontFamily: 'var(--font-body)', }} />

{err &&

{err}

} {okMsg &&

{okMsg}

} {invites.length > 0 && (

{invites.map(inv => { const label = inv.invitee_handle || inv.invitee_first_name || '@unknown'; const statusColor = inv.status === 'accepted' ? '#B8E0A4' : inv.status === 'declined' ? '#E7B8A7' : 'rgba(234,226,206,0.7)'; const statusText = inv.status === 'pending' ? 'pending' : inv.status === 'accepted' ? 'accepted ✓' : inv.status === 'declined' ? 'declined' : 'cancelled'; return (

{label} {statusText} {inv.status === 'pending' && ( )}

); })}

)}

); } // ─── Share button: native share sheet → text/WhatsApp/etc., or copy ── function ShareCodeButton({ code, mode }) { const [copied, setCopied] = React.useState(false); // Deep-link so the recipient lands directly in the Join flow with // the code pre-filled. The URL handler is in App (root) below. const url = `${window.location.origin}/?join=${encodeURIComponent(code)}`; const text = `Match me at Sandbox Pitch & Putt (${mode}). Code: ${code}`; async function onShare() { try { if (navigator.share) { // `url` MUST be its own field — if the link is only inside `text`, // AirDrop treats the whole thing as plain text and drops it into Notes // instead of opening the link. With `url` set, AirDrop shares a tappable // link that opens the app. await navigator.share({ title: 'Sandbox Pitch & Putt', text, url }); return; } } catch (_) { /* user cancelled — no-op */ } // Fallback: copy link + message to clipboard try { await navigator.clipboard.writeText(`${text}\n${url}`); setCopied(true); setTimeout(() => setCopied(false), 1800); } catch (_) { window.prompt('Copy this:', `${text}\n${url}`); } } return ( ); } // ─── Join Match view ───────────────────────────────────────── function JoinMatchView({ profile, onCancel, onJoined, initialCode }) { const [code, setCode] = React.useState((initialCode || '').toUpperCase()); const [busy, setBusy] = React.useState(false); const [err, setErr] = React.useState(''); const [stage, setStage] = React.useState('code'); // code | pick | waiting const [lobbyMatch, setLobbyMatch] = React.useState(null); const inset = useMatchKbInset(); async function submit() { const c = code.trim().toUpperCase(); if (c.length < 4 || busy) return; setBusy(true); setErr(''); const { data: m, error } = await sbx.from('matches').select('*').eq('join_code', c).maybeSingle(); if (error) { setErr(error.message); setBusy(false); return; } if (!m) { setErr('No match with that code.'); setBusy(false); return; } if (m.status === 'completed' || m.status === 'abandoned') { setErr('That match is over.'); setBusy(false); return; } // If the current user is already a slot in this match, just reopen it. if ([m.player_a, m.player_a2, m.player_b, m.player_b2].includes(profile.id)) { setBusy(false); onJoined(m.id); return; } // 2v2 → let them choose a side. 1v1 → claim the opponent seat and go. if (m.match_type === '2v2') { setBusy(false); setLobbyMatch(m); setStage('pick'); return; } const { data, error: rpcErr } = await sbx.rpc('join_match_slot', { p_match: m.id, p_side: 'b' }); if (rpcErr) { setErr(rpcErr.message); setBusy(false); return; } setBusy(false); onJoined(data.id); } // 2v2: pick a team, then sit in the waiting lobby until the foursome fills. if (stage === 'pick' && lobbyMatch) { return { setStage('code'); setLobbyMatch(null); }} onClaimed={(m2) => { const full = m2.player_a && m2.player_a2 && m2.player_b && m2.player_b2; if (full || m2.status === 'active') { onJoined(m2.id); } else { setLobbyMatch(m2); setStage('waiting'); } }}/>; } if (stage === 'waiting' && lobbyMatch) { return onJoined(id)}/>; } return (

{/* Centered — lifts above the keyboard when the field is focused */}

Join a match

Enter the code.

setCode(e.target.value.toUpperCase())} placeholder="ABC123" maxLength={8} autoCapitalize="characters" autoCorrect="off" className="on-forest-input" style={{ width: '100%', padding: '22px 14px', borderRadius: 16, background: 'rgba(255,255,255,0.1)', border: '1px solid rgba(234,226,206,0.18)', color: 'var(--cream)', fontSize: 40, textAlign: 'center', letterSpacing: '0.2em', fontFamily: 'var(--font-display)', outline: 'none', textTransform: 'uppercase', }} />

{err &&

{err}

}

); } // ─── Utilities ─────────────────────────────────────────────── function randomJoinCode() { // Avoids ambiguous characters (0/O, 1/I). 6 chars = 32^6 ≈ 1B combos. const alphabet = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789'; let s = ''; for (let i = 0; i < 6; i++) s += alphabet[Math.floor(Math.random() * alphabet.length)]; return s; } Object.assign(window, { MatchHub });