/* global React, C, Screen, Header, Tabs, Segmented, RosterRow, Toggle, Avatar, Pill, Chevron, GOLFERS, OPP_LINEUP */
// screens-5.jsx — PGA Matchup view
function PGAMatchupScreen() {
const me = window.useStore((s) => s.me);
const matchup = window.useStore((s) => s.matchup);
const opponentHandle = matchup.opponentHandle;
const dimCommon = matchup.dimCommon;
const mode = matchup.mode;
const [tournament, setTournament] = React.useState(null);
const [standings, setStandings] = React.useState([]);
const [myLineup, setMyLineup] = React.useState(null);
const [oppLineup, setOppLineup] = React.useState(null);
const [oppMember, setOppMember] = React.useState(null);
const [loading, setLoading] = React.useState(true);
// Load tournament + standings + my lineup on mount.
React.useEffect(() => {
const api = window.cambamApi;
if (!api || !api.isConfigured?.()) { setLoading(false); return; }
let cancelled = false;
(async () => {
try {
const t = await api.currentTournament?.();
if (cancelled) return;
setTournament(t || null);
if (!t) { setLoading(false); return; }
const [st, mine] = await Promise.all([
api.loadStandings(t.id),
api.loadLineup(t.id),
]);
if (cancelled) return;
setStandings(st || []);
setMyLineup(mine || null);
setLoading(false);
} catch (e) {
console.warn('matchup load failed', e);
if (!cancelled) setLoading(false);
}
})();
return () => { cancelled = true; };
}, []);
// Resolve opponent member from selected handle (or default to top-ranked non-self).
React.useEffect(() => {
if (!standings.length) return;
let opp = standings.find((r) => r.member?.handle === opponentHandle && r.member?.id !== me?.id)?.member;
if (!opp) opp = standings.find((r) => r.member?.id !== me?.id)?.member;
setOppMember(opp || null);
}, [standings, opponentHandle, me?.id]);
// Load opponent's lineup when both tournament + opponent are resolved.
React.useEffect(() => {
if (!tournament || !oppMember) { setOppLineup(null); return; }
const api = window.cambamApi;
if (!api) return;
let cancelled = false;
(async () => {
try {
const data = await api.loadMemberLineup(oppMember.id, tournament.id);
if (!cancelled) setOppLineup(data || null);
} catch (e) {
console.warn('opp lineup load failed', e);
}
})();
return () => { cancelled = true; };
}, [tournament?.id, oppMember?.id]);
const myList = (myLineup?.lineup_golfers || []).slice().sort((a, b) => a.slot - b.slot).map((lg) => ({
name: lg.golfer_name, golferId: lg.golfer_id, price: lg.price, points: 0, tone: 1,
}));
const oppList = (oppLineup?.lineup_golfers || []).slice().sort((a, b) => a.slot - b.slot).map((lg) => ({
name: lg.golfer_name, golferId: lg.golfer_id, price: lg.price, points: 0, tone: 1,
}));
const myNames = new Set(myList.map((g) => g.name));
const oppNames = new Set(oppList.map((g) => g.name));
const sharedCount = myList.filter((g) => oppNames.has(g.name)).length;
const myStanding = standings.find((r) => r.member?.id === me?.id);
const oppStanding = oppMember ? standings.find((r) => r.member?.id === oppMember.id) : null;
const openOpponentPicker = () => {
if (window.appNav) window.appNav.openSheet('member-picker', { purpose: 'matchup-opponent' });
};
const oppDisplay = oppMember
? { name: oppMember.display_name || oppMember.handle || '—', handle: oppMember.handle || '', tone: oppMember.avatar_tone, champion: !!oppMember.champion, id: oppMember.id }
: { name: 'No opponent', handle: '', tone: 2 };
return (
No tournament selected.
)}
{tournament && standings.length < 2 && !loading && (
Add at least one other member to enable matchups.
)}
{tournament && standings.length >= 2 && (
<>
vs
{oppDisplay.name}
{oppDisplay.handle}
window.STORE.patch('matchup', { mode: v.toLowerCase() })}
size="sm"
/>
{oppMember && !oppLineup && tournament.status === 'upcoming' && (
{oppDisplay.name}'s lineup is hidden until lineups lock.
)}
{Array.from({ length: Math.max(6, Math.max(myList.length, oppList.length)) }).map((_, i) => {
const m = myList[i], o = oppList[i];
const mCommon = m && oppNames.has(m.name);
const oCommon = o && myNames.has(o.name);
return (
0 ? `1px solid ${C.hairline}` : 'none',
}}>
);
})}
Dim common players
{sharedCount} of your {myList.length} also picked by {oppDisplay.name.split(' ')[0]}
window.STORE.patch('matchup', { dimCommon: v })} />
)}
);
}
function ScoreBlock({ me = [], opp = [], oppMember, mode = 'live', myPoints = 0, oppPoints = 0, myRank, oppRank }) {
const myMember = window.useStore((s) => s.me) || { displayName: 'CamBam', handle: '@cambam', tone: 6 };
const myPts = Number(myPoints) || 0;
const oppPts = Number(oppPoints) || 0;
const myFilled = me.filter(Boolean).length;
const oppFilled = opp.filter(Boolean).length;
// Projected = naive 2x once half the tournament is past; otherwise just current pts.
const myProj = myPts * 2;
const oppProj = oppPts * 2;
const oppName = oppMember && oppMember.name || 'Opponent';
const oppHandle = oppMember && oppMember.handle || '';
return (
{myMember.displayName}
{myMember.handle}
= oppPts ? C.emerald : C.text }}>
{myPts.toFixed(1)}
{mode === 'projected' ? 'Proj' : 'Pts'}
myPts ? C.emerald : C.text, textAlign: 'right' }}>
{oppPts.toFixed(1)}
= oppProj} rightWin={oppProj > myProj} />
);
}
function StatRow({ label, left, right, leftWin, rightWin }) {
return (
);
}
function MiniGolfer({ g, side, dim }) {
if (!g) return
;
const align = side === 'me' ? 'left' : 'right';
const flexDir = side === 'me' ? 'row' : 'row-reverse';
const mc = g.mc;
const open = () => { const n = window.appNav; if (n) n.openSheet('golfer-detail', g); };
return (
{ if (e.key === 'Enter' || e.key === ' ') open(); }}
style={{
display: 'flex', alignItems: 'center', gap: 10,
padding: '0 14px', flexDirection: flexDir,
opacity: dim ? 0.3 : 1, transition: 'opacity 200ms ease-out',
position: 'relative', cursor: 'pointer',
}}>
{g.name}
{Number(g.points || 0).toFixed(1)}
{g.live && !dim && (
)}
{margins.map((m, i) => {
const h = Math.max(4, (Math.abs(m) / max) * 16);
const up = m > 0;
return (
);
})}