/* ============================================================================ BetPrince Sportsbook — Match Detail + home sections (Today, Recent Winners). Depends on sb-atoms.jsx. Exports to window. ============================================================================ */ /* ---- helpers --------------------------------------------------------------- */ function refCode(id) { // deterministic pseudo-ref from match id let h = 0; for (let i = 0; i < id.length; i++) h = (h * 31 + id.charCodeAt(i)) >>> 0; return h.toString(16).padStart(8, '0').slice(0, 8); } /* A single odds cell used across detail markets — toggles a selection. */ function MktCell({ top, bottom, picked, onClick, wide }) { return ( ); } /* Collapsible market group card */ function MarketGroup({ title, defaultOpen = true, children }) { const [open, setOpen] = useState(defaultOpen); return (
{open &&
{children}
}
); } /* ---- Empty state used by Stats / Lineups / Events -------------------------- */ function StatEmpty({ text }) { return (
{text}
); } /* ---- Match Detail (full screen) ------------------------------------------- */ const OU_LINES = [ { line: '1.5', over: '1.37', under: '3.34' }, { line: '2.5', over: '2.08', under: '1.94' }, { line: '3.5', over: '3.50', under: '1.61' }, { line: '4.5', over: '4.43', under: '1.23' }, ]; const CS_SCORES = [ ['0-0', '9.44'], ['0-1', '19.03'], ['0-2', '17.60'], ['1-0', '6.85'], ['1-1', '8.12'], ['1-2', '12.45'], ['2-0', '10.80'], ['2-1', '11.36'], ['2-2', '14.44'], ['3-0', '20.57'], ['3-1', '22.73'], ['3-2', '28.48'], ['0-3', '36.15'], ['1-3', '30.70'], ['Other', '7.20'], ]; function MatchDetail({ m, picks, onAdd, onBack }) { const [view, setView] = useState('markets'); // markets | stats const [statTab, setStatTab] = useState('stats'); // stats | lineups | events const [mFilter, setMFilter] = useState('All'); const home = SB_TEAMS[m.h], away = SB_TEAMS[m.a]; const ref = refCode(m.id); const isPicked = (k) => picks.some(p => p.key === k); const matchName = home.name + ' vs ' + away.name; const add = (key, sel, odds, market, selectionId) => onAdd({ key, matchId: m.id, sel, odds, market, match: matchName, when: m.when || (m.time ? m.time + ' · ' + m.date : 'Live'), selectionId }); const apiMarkets = m.markets || []; const apiMkt = (kind) => apiMarkets.find(mk => mk.kind === kind); const mkt1X2 = apiMkt('ONE_X_TWO'); const mktOUList = apiMarkets.filter(mk => mk.kind === 'OVER_UNDER').sort((a, b) => (a.line || 0) - (b.line || 0)); const mktCS = apiMkt('CORRECT_SCORE'); return (
{/* ---- Hero header (blue gradient) ---- */}
NGN 0.00
{/* competition row */}
Football · {m.country || 'NG'} · {m.lg} {m.time || (m.live ? 'LIVE' : '—')}
{/* teams + score */}
{home.name}
{m.time || 'LIVE'}
Wed, Jun 3
{m.live ? <>{m.hs} - {m.as} : VS}
{away.name}
Ref {ref}…
{/* ---- Markets / Stats toggle ---- */}
{[['markets', 'Markets', 'layout-grid'], ['stats', 'Stats', 'chart-no-axes-column']].map(([k, label, icon]) => { const on = view === k; return ( ); })}
{/* ---- Body ---- */} {view === 'markets' ? (
{/* market filters */}
{['All', 'Main', 'Goals', 'Half', 'Handicap'].map(f => ( setMFilter(f)}>{f} ))}
{/* Match Result 1X2 */} {mkt1X2 ? (
{mkt1X2.selections.map((s) => { const key = m.id + '|1X2|' + s.code; const label = s.code === '1' ? home.name : (s.code === '2' ? away.name : 'Draw'); const od = s.odds.toFixed(2); return add(key, label, od, '1X2', s.id)} />; })}
) : (
{['1', 'X', '2'].map((lab, i) => { const key = m.id + '|1X2|' + lab; return add(key, lab === 'X' ? 'Draw' : SB_TEAMS[lab === '1' ? m.h : m.a].name, m.o[i], '1X2')} />; })}
)} {/* Over / Under — one row per line */} {mktOUList.length > 0 && (
OVER UNDER {mktOUList.map((mkt) => { const over = mkt.selections.find(s => s.code === 'OVER'); const under = mkt.selections.find(s => s.code === 'UNDER'); const lineLabel = String(mkt.line); return ( {lineLabel} {over && add(m.id + '|OU|O' + lineLabel, 'Over ' + lineLabel, over.odds.toFixed(2), 'Over/Under', over.id)} />} {under && add(m.id + '|OU|U' + lineLabel, 'Under ' + lineLabel, under.odds.toFixed(2), 'Over/Under', under.id)} />} ); })}
)} {/* Correct Score */} {mktCS && (
{mktCS.selections.map(s => { const key = m.id + '|CS|' + s.code; const od = s.odds.toFixed(2); return add(key, s.code, od, 'Correct Score', s.id)} />; })}
)}
) : (
{/* stats sub-tabs */}
{[['stats', 'Stats'], ['lineups', 'Lineups'], ['events', 'Events']].map(([k, label]) => ( setStatTab(k)}>{label} ))}
{statTab === 'stats' && } {statTab === 'lineups' && } {statTab === 'events' && }
)}
); } /* ---- Today: scheduled match row ------------------------------------------- */ function ScheduledCard({ m, picks, onOpen, onPick }) { const home = SB_TEAMS[m.h], away = SB_TEAMS[m.a]; return (
onOpen(m)} style={{ cursor: 'pointer' }}>
{m.lg} Scheduled
{home.name}
{m.time}
{m.date}
{away.name}
{['1', 'X', '2'].map((lab, i) => { const p = picks.find(x => x.key === m.id + '|1X2'); return onPick(m, i, lab)} />; })}
); } /* ---- All Games: single card that adapts to live OR scheduled ------------- */ function AllGameCard({ m, picks, onOpen, onPick }) { const home = SB_TEAMS[m.h], away = SB_TEAMS[m.a]; return (
onOpen(m)} style={{ cursor: 'pointer' }}>
{m.lg} {m.live ? ( LIVE ) : ( Scheduled )}
{home.name}
{m.live ? ( <>
{m.hs} - {m.as}
{m.min}'
) : ( <>
{m.time || (m.when ? m.when.split(' ')[1] || m.when : 'VS')}
{(m.date || (m.when && m.when.split(' ')[0])) &&
{m.date || m.when.split(' ')[0]}
} )}
{away.name}
{['1', 'X', '2'].map((lab, i) => { const p = picks.find(x => x.key === m.id + '|1X2'); return onPick(m, i, lab)} />; })}
); } /* ---- All Games screen (Football / Live / View all / Browse all) ----------- */ function AllGamesScreen({ matches, picks, onOpen, onPick, onBack, initialFilter }) { const [filter, setFilter] = useState(initialFilter === 'live' ? 'live' : 'all'); const liveCount = matches.filter(m => m.live).length; const shown = filter === 'live' ? matches.filter(m => m.live) : matches; const tabs = [['all', 'All', matches.length], ['live', 'Live', liveCount]]; return (
{/* wide All / Live filter buttons (segmented, like Open Bets but roomier) */}
{tabs.map(([k, label, n]) => { const on = filter === k; return ( ); })}
{shown.length === 0 ? (
No live games right now.
Check back soon or browse all games.
) : shown.map(m => )}
); } function TodaySection({ matches, picks, onOpen, onPick, onBrowse }) { const sched = matches.filter(m => m.scheduled); if (sched.length === 0) return null; return (
Today
{sched.map(m => )}
); } /* ---- Recent Winners -------------------------------------------------------- */ function genWinners() { const handles = ['bet', 'spor', 'sam', 'tobi', 'chi', 'ade', 'kelv', 'naij', 'big', 'zee', 'emy', 'olu']; const cats = ['Sports']; const ago = ['just now', '1 min ago', '2 min ago', '4 min ago', '5 min ago', '8 min ago', '11 min ago']; const pick = a => a[Math.floor(Math.random() * a.length)]; const out = []; const used = new Set(); for (let i = 0; i < 7; i++) { let h = pick(handles); while (used.has(h)) h = pick(handles); used.add(h); const amt = Math.floor(50000 + Math.random() * (1200000 - 50000)) + Math.random(); out.push({ id: i, handle: h + '*'.repeat(5 + Math.floor(Math.random() * 2)), amount: amt, cat: pick(cats), ago: pick(ago) }); } return out; } function WinnerCard({ w }) { return (
{/* faint trophy watermark */}
{w.handle} won
NGN {w.amount.toLocaleString('en-NG', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
{w.cat} {w.ago}
); } function RecentWinners({ winners }) { // duplicate list for a seamless marquee loop const loop = [...winners, ...winners]; return (
Recent Winners LIVE
{loop.map((w, i) => )}
); } Object.assign(window, { MatchDetail, ScheduledCard, AllGameCard, AllGamesScreen, TodaySection, RecentWinners, WinnerCard, genWinners, refCode });