);
}
function SelfStatsBlock({ user, go, tier }) {
const isStatsEnabled = tier !== 'walkup';
if (!isStatsEnabled) {
return (
Rating locked
Walk-up matches don't count toward your Sandbox Rating. Unlock with Stats or League.
);
}
return ;
}
// ─── Tier label from an SBX value (2.000–8.000 scale) ─────────────────
function sbxTier(r) {
if (r == null) return '';
if (r >= 6.5) return 'Professional';
if (r >= 5.0) return 'Advanced';
if (r >= 3.5) return 'Experienced';
return 'Beginner';
}
// ─── Placement stage from a format's confirmed-match count ────────────
// Each format (1v1 / 2v2) calibrates on its OWN matches — they never
// cross-count (a 2v2 result can't move your 1v1 rating).
// 0 → unranked (no rating yet)
// 1–2 → calibrating (fills 3 bars; the 3rd match unlocks Provisional)
// 3–5 → provisional (fills 3 more; the 6th match makes it Official)
// 6+ → official (skill label unlocked)
function sbxStage(n) {
if (!n || n <= 0) return 'unranked';
if (n < 3) return 'calibrating';
if (n < 6) return 'provisional';
return 'official';
}
function SbxBars({ filled, total = 3 }) {
return (
{Array.from({ length: total }).map((_, i) => (
))}
);
}
// One placement-aware rating card for a single format (2v2 or 1v1).
function SbxFormatCard({ fmt, rating, n, rel, record }) {
const stage = sbxStage(n);
const relPct = Math.round((rel || 0) * 100);
const rec = record || { W: 0, L: 0, H: 0 };
const recStr = `${rec.W || 0}–${rec.L || 0}–${rec.H || 0}`;
// Progress + next-milestone within the current journey.
const filled = stage === 'calibrating' ? n : stage === 'provisional' ? n - 3 : 0;
const milestone = stage === 'calibrating'
? `${3 - n} more ${3 - n === 1 ? 'match' : 'matches'} to unlock your Provisional rating.`
: stage === 'provisional'
? `${6 - n} more ${6 - n === 1 ? 'match' : 'matches'} to make it Official.`
: '';
// Right-hand status pill per stage.
const pill = stage === 'official'
? Official ✓
: (stage === 'calibrating' || stage === 'provisional')
? {stage}
: null;
return (
);
}
// ─── Real SBX card: 2v2 headline on top, 1v1 below — each independent. ─
function RealSbxCard({ user, go, showDashboard }) {
return (
{showDashboard && (
)}
);
}
function PublicStatsBlock({ user, viewerIsMember, go }) {
// If viewer is member, show full real card. If not, show gated teaser.
if (viewerIsMember) {
return ;
}
return (
Ratings are member-only
Members see each other's Sandbox Rating, trend and full head-to-head.
);
}
function Mini2({ label, value }) {
return (
{label}
{value}
);
}
// ─── Privacy (Hub phase 6) — the one visibility rule, user-tunable ────
// Identity-level surfaces (Teeing Up, Live Now, named pool presence) are
// mutuals-only by default; each player can go Quiet or Public per
// category. Aggregate counts always include everyone, anonymously.
// The two privacy controls (used by the full-screen Privacy Settings
// page in the settings drawer). Saves live, optimistic with rollback.
function PrivacyControls({ profile }) {
const [rounds, setRounds] = React.useState((profile && profile.privacy_rounds) || 'mutuals');
const [live, setLive] = React.useState((profile && profile.privacy_live) || 'mutuals');
const [err, setErr] = React.useState('');
async function set(kind, value) {
setErr('');
const prevR = rounds, prevL = live;
if (kind === 'rounds') setRounds(value); else setLive(value);
try {
await updatePrivacy(profile.id, kind === 'rounds' ? { rounds: value } : { live: value });
if (window.reloadProfile) window.reloadProfile();
} catch (e) {
setRounds(prevR); setLive(prevL);
setErr(e.message || 'Could not save.');
}
}
const seg = (kind, current) => (
Your pools, group rounds, and locked tee times in friends' Teeing Up.
{seg('rounds', rounds)}
Live play
Your name + score on friends' Live Now while you're mid-match.
{seg('live', live)}
{err &&
{err}
}
);
}
// ─── Settings drawer (the hamburger) ──────────────────────────────────
// Slides in from the right over a scrim. Holds everything that used to
// live in the menu card at the bottom of the profile: Payment method,
// Manage my membership, Privacy, the featured Invite-friends tile, and
// Sign out (red).
function SettingsDrawer({ open, onClose, profile, go, tier, setTier }) {
const [shown, setShown] = React.useState(false); // drawer slide transition
const [inviteMsg, setInviteMsg] = React.useState('');
// Nested full-screen page: null | 'payment' | 'membership' | 'privacy'.
// Slides in from the right over the still-open drawer (same motion,
// full width); back slides it away and reveals Settings again.
const [page, setPage] = React.useState(null);
const [pageShown, setPageShown] = React.useState(false);
React.useEffect(() => {
if (!open) { setShown(false); setPage(null); setPageShown(false); return undefined; }
const id = requestAnimationFrame(() => requestAnimationFrame(() => setShown(true)));
return () => cancelAnimationFrame(id);
}, [open]);
React.useEffect(() => {
if (!page) return undefined;
const id = requestAnimationFrame(() => requestAnimationFrame(() => setPageShown(true)));
return () => cancelAnimationFrame(id);
}, [page]);
if (!open) return null;
function closePage() {
setPageShown(false);
window.setTimeout(() => setPage(null), 300);
}
// Each player's promo-style referral code (backfilled + auto-assigned
// in referral-codes.sql). The share message writes the code out AND
// carries it in the link, so it credits whether they tap or type.
const myCode = profile && profile.referral_code;
async function invite() {
const ref = myCode || ((profile && profile.handle) || '').replace(/^@/, '');
const url = `https://sbx.golf/?via=${encodeURIComponent(ref)}`;
const text = myCode
? `Come play rated pitch & putt with me — use my code ${myCode} for $10 off your first round. Create your account here:`
: 'Come play rated pitch & putt with me — you get $10 off your first round:';
try {
if (navigator.share) { await navigator.share({ title: 'Sandbox Pitch & Putt', text, url }); setInviteMsg('Shared!'); }
else { await navigator.clipboard.writeText(`${text} ${url}`); setInviteMsg('Link copied!'); }
} catch (_) { /* dismissed */ }
window.setTimeout(() => setInviteMsg(''), 2500);
}
return (
setPage('payment')}/>
setPage('membership')}/>
setPage('privacy')}/>
Sign Out} last
onClick={() => { if (window.confirm('Sign out of Sandbox?')) { onClose(); signOut(); } }}/>
Enter their email or phone. They'll receive an invite for {selectedEvent.courseShort || selectedEvent.title} on {selectedEvent.date}. The pass shows as pending until they sign up using the same contact.
{/* thin lit top edge of the card */}
{/* depth shading + seam shadow — only while it's tucked in the pile */}
{!isOpen && depth > 0 && (
)}
{!isOpen && hasCardInFront && (
)}
);
})}
);
}
// Hole-by-hole details for a wallet card: the same gooey manila folder the
// match page uses, fed by the full match detail (holes + shot logs + player
// stats). Perspective is the profile owner's; "you" pills stay the viewer's.
function WalletHoleDetails({ matchId, ownerId, meId, focusHole }) {
const [data, loading] = useMatchDetail(matchId);
if (loading) return ;
if (!data) return null;
const { match: m, holes, teamA, teamB, byId, playerStatsByHole } = data;
const ownerIsA = m.player_a === ownerId || m.player_a2 === ownerId;
const isParticipant = [m.player_a, m.player_a2, m.player_b, m.player_b2].includes(meId);
return (
);
}
// ─── Match History Sheet ─────────────────────────────────────────────
// All matches as full wallet cards, newest first, grouped under a mono
// date header per day. Same interaction as the wallet stack: tap the
// bottom half of a card (or a specific H-cell) to unfold the hole-by-hole
// folder; tap the top half of an open card to fold it back.
function MatchHistorySheet({ cards, ownerId, meId, onClose }) {
const [open, setOpen] = React.useState(null); // matchId with details open
const [focusHole, setFocusHole] = React.useState(0);
const downRef = React.useRef({ x: 0, y: 0 });
const dayLabel = (iso) => {
if (!iso) return 'EARLIER';
const d = new Date(iso);
const opts = { weekday: 'short', month: 'short', day: 'numeric' };
if (d.getFullYear() !== new Date().getFullYear()) opts.year = 'numeric';
return d.toLocaleDateString('en-US', opts).toUpperCase();
};
function onCardClick(e, c) {
const moved = Math.hypot(e.clientX - downRef.current.x, e.clientY - downRef.current.y);
if (moved > 10) return;
const isOpen = open === c.matchId;
const r = e.currentTarget.getBoundingClientRect();
if (isOpen && (e.clientY - r.top) < r.height / 2) { setOpen(null); return; }
const total = c.totalHoles || (c.cells || []).length || 9;
const cell = e.target && e.target.closest && e.target.closest('[data-hole]');
if (cell && cell.dataset.hole) {
setFocusHole(Math.max(0, Math.min(total - 1, Number(cell.dataset.hole) - 1)));
} else {
const PAD = 22, cols = Math.min(total, 9);
const frac = (e.clientX - r.left - PAD) / Math.max(1, r.width - PAD * 2);
setFocusHole(Math.max(0, Math.min(cols - 1, Math.floor(frac * cols))));
}
setOpen(c.matchId);
}
// Full-screen, sliding up from the bottom on open and back down on
// close — the same motion as the Payment Method settings page.
const [shown, setShown] = React.useState(false);
const [closing, setClosing] = React.useState(false);
React.useEffect(() => { const id = requestAnimationFrame(() => setShown(true)); return () => cancelAnimationFrame(id); }, []);
function close() {
if (closing) return;
setClosing(true);
setTimeout(onClose, 340);
}
let prevDay = null;
return (
{!isSelf && (
)}
{/* Settings drawer trigger — the hamburger */}
{isSelf && (
)}