/* global React, Button, Chip, Eyebrow, Wordmark, Icon, sbx, signOut, useMatchInvitesForMatch, sendInviteByHandle, cancelInvite, formatHandle */ // Post-auth home: Start a match, join a match, or open one of your recent matches. function MatchHub({ profile, onOpenMatch, onExit, mode: matchType = '1v1', initialJoinCode }) { // If we received a deep-link ?join=CODE, jump straight to the join // view with the code pre-filled. const [mode, setMode] = React.useState(initialJoinCode ? 'join' : 'home'); // home | start | join | code | handle const [recent, setRecent] = React.useState([]); const [newMatch, setNewMatch] = React.useState(null); // Load recent matches for this user (includes 2v2 slots). const loadRecent = React.useCallback(async () => { const { data } = await sbx .from('matches') .select('id, join_code, course_name, status, result, final_margin, created_at, total_holes, match_type, player_a, player_a2, player_b, player_b2') .or(`player_a.eq.${profile.id},player_a2.eq.${profile.id},player_b.eq.${profile.id},player_b2.eq.${profile.id}`) .order('created_at', { ascending: false }) .limit(10); setRecent(data || []); }, [profile.id]); React.useEffect(() => { loadRecent(); }, [loadRecent]); if (mode === 'start') return setMode('home')} onCreated={(m) => { setNewMatch(m); setMode('code'); }}/>; if (mode === 'join') return setMode('home')} onJoined={(id) => onOpenMatch(id)}/>; if (mode === 'code' && newMatch) return { setNewMatch(null); setMode('home'); loadRecent(); }} onReady={(id) => onOpenMatch(id)}/>; if (mode === 'handle' && window.DisplayNameScreen) { const DNS = window.DisplayNameScreen; return setMode('home')} onDone={() => setMode('home')}/>; } return (
{/* Header with back-to-home + handle edit + sign out */}
{onExit && ( )}
Challenge · {matchType}
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, matchType = '1v1', onCancel, onCreated }) { const [course, setCourse] = React.useState('Melreese'); const [holes, setHoles] = React.useState(9); const [busy, setBusy] = React.useState(false); const [err, setErr] = React.useState(''); async function create() { if (busy) return; setBusy(true); setErr(''); const join_code = randomJoinCode(); const { data, error } = await sbx.from('matches').insert({ join_code, course_name: course.trim() || null, total_holes: holes, match_type: matchType, player_a: profile.id, status: 'waiting', }).select().single(); if (error) { setErr(error.message); setBusy(false); return; } // Seed empty hole rows so both players render a consistent list. 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); } return (
New {matchType} match
Set it up.
{matchType === '2v2' && (
Share the code with your partner first, then with your opponents. Match starts when 4 players are in.
)}
{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; React.useEffect(() => { const ch = sbx.channel(`match:${match.id}`) .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 (
Share this code
{is2v2 ? <>Waiting on
the other three… : <>Waiting on
your opponent…}
{filled}/{required} PLAYERS IN
MATCH CODE
{match.join_code}
Players tap Join match on the Unranked tab and type this code. {is2v2 ? 'First to join becomes your partner; the next two are the opposing team.' : ''}
{/* 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}\n${url}`; async function onShare() { try { if (navigator.share) { await navigator.share({ title: 'Sandbox Pitch & Putt', text }); return; } } catch (_) { /* user cancelled — no-op */ } // Fallback: copy to clipboard try { await navigator.clipboard.writeText(text); setCopied(true); setTimeout(() => setCopied(false), 1800); } catch (_) { // Last-resort fallback: prompt window.prompt('Copy this:', text); } } 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(''); 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)) { onJoined(m.id); return; } // Figure out which slot the joiner fills, based on match_type. const is2v2 = m.match_type === '2v2'; let update = null; if (is2v2) { if (!m.player_a2) update = { player_a2: profile.id }; else if (!m.player_b) update = { player_b: profile.id }; else if (!m.player_b2) update = { player_b2: profile.id, status: 'active', started_at: new Date().toISOString() }; else { setErr('That match already has four players.'); setBusy(false); return; } } else { if (!m.player_b) update = { player_b: profile.id, status: 'active', started_at: new Date().toISOString() }; else { setErr('That match already has two players.'); setBusy(false); return; } } const { error: updErr } = await sbx.from('matches').update(update).eq('id', m.id); if (updErr) { setErr(updErr.message); setBusy(false); return; } setBusy(false); onJoined(m.id); } return (
Join a match
Enter the code.
setCode(e.target.value.toUpperCase())} placeholder="ABC123" maxLength={8} autoCapitalize="characters" autoCorrect="off" style={{ width: '100%', padding: '24px 14px', borderRadius: 16, background: 'var(--paper)', border: 'var(--hairline-strong)', color: 'var(--forest)', 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 });