/* Predict page -- three numbered blocks: choose match, pick winner, your details. */ function NumberedHeader({ n, label }) { return (
{String(n).padStart(2, '0')}

{label}

); } /* ---------- Match list ---------- */ function MatchCard({ match, selected, onSelect }) { const disabled = match.status !== 'OPEN'; const ko = formatKickoff(match.kickoffAt); return ( ); } function TeamRow({ team, align }) { return (
{team.name}
); } function FootItem({ icon, children }) { return ( {children} ); } /* ---------- Pick winner ---------- */ function PickButton({ kind, label, selected, onClick, disabled, flagCode }) { return ( ); } /* ---------- Form field ---------- */ function Field({ label, hint, children, mono }) { return ( ); } const inputStyle = { width: '100%', border: '1.5px solid var(--grey-200)', borderRadius: 6, background: '#fff', padding: '13px 14px', fontSize: 15, color: 'var(--ink)', transition: 'border-color 0.15s, box-shadow 0.15s', }; /* Inline pick button used inside match cards */ /* Compact single-line matchup (used when a match isn't pickable) */ function CompactMatchup({ m }) { return (
{m.teamA.name} VS {m.teamB.name}
); } function InlinePickBtn({ label, flag, isDraw, selected, onClick, disabled, side }) { // side: 'left' team -> name (outer) then flag (inner); 'right' team -> flag (inner) then name (outer) var flagEl = flag ? ( ) : null; var nameEl = ( {label} ); var check = selected && !isDraw ? ( ) : null; return ( ); } /* Crowd lean bar -- community pick split below pick buttons */ function CrowdLeanBar({ matchId, nameA, nameB }) { const dm = window.DASHBOARD && window.DASHBOARD.byMatch ? window.DASHBOARD.byMatch.find(function(x) { return x.id === matchId; }) : null; const seed = matchId % 1000; const aRaw = dm ? dm.a_n : (30 + seed % 41); const dRaw = dm ? dm.draw_n : (12 + seed % 22); const bRaw = dm ? dm.b_n : (25 + (seed * 7) % 38); const total = aRaw + dRaw + bRaw; const pA = Math.round((aRaw / total) * 100); const pD = Math.round((dRaw / total) * 100); const pB = 100 - pA - pD; const leading = pA > pB ? 'A' : pB > pA ? 'B' : 'DRAW'; return (
Crowd lean
{nameA} {pA}% {pD}% Draw {pB}% {nameB}
); } /* ---------- Toast ---------- */ function SuccessToast({ message, onDone }) { useEffect(() => { const t = setTimeout(onDone, 4200); return () => clearTimeout(t); }, [onDone]); return (
{message}
); } /* ---------- Predict page -- flow: Details → Match+Pick (inline) → Submit ---------- */ function PredictPage() { // Step 1 -- Details (pre-filled from localStorage) const LS = { name: 'sf_name', phone: 'sf_phone', bill: 'sf_bill', amount: 'sf_amount' }; const lsGet = (k) => { try { return localStorage.getItem(k) || ''; } catch { return ''; } }; const lsSet = (k, v) => { try { localStorage.setItem(k, v); } catch {} }; const [name, setName] = useState(() => lsGet(LS.name)); const [phone, setPhone] = useState(() => lsGet(LS.phone)); // 7 digits only, +960 prefix fixed const [bill, setBill] = useState(() => lsGet(LS.bill)); const [amount, setAmount] = useState(() => lsGet(LS.amount)); // Match + Pick -- combined (one active at a time) const [selectedMatchId, setSelectedMatchId] = useState(null); const [pick, setPick] = useState(null); // 'A' | 'DRAW' | 'B' // Per-card submission state const [submitting, setSubmitting] = useState(null); // matchId being submitted const [cardErrors, setCardErrors] = useState({}); // { matchId: errorMsg } const [submitted, setSubmitted] = useState(new Set()); // matchIds done const [submittedPicks, setSubmittedPicks] = useState({}); // { matchId: 'A'|'DRAW'|'B' } const [submittedTimes, setSubmittedTimes] = useState({}); // { matchId: { pickedAt, changedAt } } // Change-pick edit mode const [editingMatchId, setEditingMatchId] = useState(null); // matchId in edit mode const [editPick, setEditPick] = useState(null); // new pick being chosen const [updating, setUpdating] = useState(null); // matchId being updated const matchRef = useRef(null); const [showAllMatches, setShowAllMatches] = useState(false); const [teamFilter, setTeamFilter] = useState(''); // Bill validation state -- explicit Validate button flow const [billValidation, setBillValidation] = useState({ state: 'idle', // 'idle' | 'validating' | 'valid' | 'invalid' error: null, errorCode: null, // 'NOT_FOUND' | 'AMOUNT_MISMATCH' | 'NOT_ELIGIBLE' | null maxVotes: 0, usedVotes: 0, remainingVotes: 0, amountMvr: 0, isNewBinding: false, // true = phone was just bound to bill for first time }); // Persist to localStorage whenever fields change useEffect(() => { lsSet(LS.name, name); }, [name]); useEffect(() => { lsSet(LS.phone, phone); }, [phone]); useEffect(() => { lsSet(LS.bill, bill); }, [bill]); useEffect(() => { lsSet(LS.amount, amount); }, [amount]); // Reset validation when bill, amount, or phone changes useEffect(() => { setBillValidation(prev => prev.state === 'idle' ? prev : { state: 'idle', error: null, errorCode: null, maxVotes: 0, usedVotes: 0, remainingVotes: 0, amountMvr: 0, isNewBinding: false } ); setSubmitted(new Set()); setSubmittedPicks({}); }, [bill, amount, phone]); async function validateBill() { if (billValidation.state === 'validating') return; setBillValidation({ state: 'validating', error: null, errorCode: null, maxVotes: 0, usedVotes: 0, remainingVotes: 0, amountMvr: 0 }); try { const r = await fetch('/api/validate-bill', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ bill_number: bill.trim().toUpperCase(), amount_myr: parseFloat(amountClean), phone: '+960' + phone.trim(), name: name.trim(), }), }); const data = await r.json(); if (data.valid) { setBillValidation({ state: 'valid', error: null, errorCode: null, maxVotes: data.maxVotes, usedVotes: data.usedVotes, remainingVotes: data.remainingVotes, amountMvr: data.amountMvr, isNewBinding: !!data.isNewBinding }); // Pre-populate prior predictions from DB const ids = new Set((data.predictions || []).map(p => p.matchId)); const pkMap = {}; const tmMap = {}; (data.predictions || []).forEach(p => { pkMap[p.matchId] = p.pick; tmMap[p.matchId] = { pickedAt: p.submittedAt || null, changedAt: p.changedAt || null }; }); setSubmitted(ids); setSubmittedPicks(pkMap); setSubmittedTimes(tmMap); } else { setBillValidation({ state: 'invalid', error: data.error || 'Receipt check failed.', errorCode: data.errorCode || null, maxVotes: 0, usedVotes: 0, remainingVotes: 0, amountMvr: 0 }); setSubmitted(new Set()); setSubmittedPicks({}); setSubmittedTimes({}); } } catch (_) { setBillValidation({ state: 'invalid', error: 'Network error. Check your connection and try again.', errorCode: null, maxVotes: 0, usedVotes: 0, remainingVotes: 0, amountMvr: 0 }); } } // All upcoming matches -- open for voting until kickoff const allUpcoming = useMemo(() => { const nowMs = Date.now(); return [...MATCHES] .filter(m => m.status !== 'SETTLED' && m.status !== 'CLOSED' && nowMs < m.kickoffMs) .sort((a, b) => a.kickoffMs - b.kickoffMs); }, []); // Full display list: upcoming + any already-predicted matches not in upcoming // (covers closed/settled/past-kickoff matches the user predicted in a prior session) const sortedMatches = useMemo(() => { const upcomingIds = new Set(allUpcoming.map(m => m.id)); // Add predicted matches that are no longer in upcoming list const predicted = submitted.size > 0 ? MATCHES.filter(m => submitted.has(m.id) && !upcomingIds.has(m.id)) : []; const combined = [...predicted, ...allUpcoming]; // Predicted first (stable order), then upcoming by kickoff if (submitted.size === 0) return combined; return combined.sort((a, b) => { const aDone = submitted.has(a.id) ? 0 : 1; const bDone = submitted.has(b.id) ? 0 : 1; if (aDone !== bDone) return aDone - bDone; return a.kickoffMs - b.kickoffMs; }); }, [allUpcoming, submitted]); // Team options for the filter (all teams in the predictable list) const teamOptions = useMemo(() => { const s = {}; sortedMatches.forEach(m => { if (m.teamA && m.teamA.name) s[m.teamA.name] = true; if (m.teamB && m.teamB.name) s[m.teamB.name] = true; }); return Object.keys(s).sort(); }, [sortedMatches]); // Apply team filter; when filtering, show all that team's matches (no 6-limit) const teamFilteredMatches = teamFilter ? sortedMatches.filter(m => (m.teamA && m.teamA.name === teamFilter) || (m.teamB && m.teamB.name === teamFilter)) : sortedMatches; const visibleMatches = teamFilter || showAllMatches ? teamFilteredMatches : teamFilteredMatches.slice(0, 6); // A match is voteable if kickoff hasn't happened yet const isVoteable = (m) => Date.now() < m.kickoffMs; // ── Validation ── const nameOk = name.trim().length >= 2 && name.trim().length <= 80; const phoneOk = /^\d{7}$/.test(phone.trim()); const billOk = bill.trim().length > 0 && bill.length <= 50; // Strip currency symbols/commas before parsing amount const amountClean = String(amount).replace(/[^0-9.]/g, ''); const amountOk = !isNaN(parseFloat(amountClean)) && parseFloat(amountClean) > 0; // detailsOk: bill validated against DB. Name checked separately at canSubmit. const detailsOk = phoneOk && billValidation.state === 'valid'; // Vote quota comes from validated bill const maxVotes = billValidation.maxVotes; const remainingVotes = Math.max(0, maxVotes - submitted.size); // Enable Validate button -- bill + amount + phone all required // Phone is bound to bill on first use, so must be provided upfront const canValidate = billOk && amountOk && phoneOk && billValidation.state !== 'validating'; // Name missing message shown inline on match cards const nameMissing = billValidation.state === 'valid' && !nameOk; // Auto-scroll to matches when details become valid const prevDetailsOk = useRef(false); useEffect(() => { if (detailsOk && !prevDetailsOk.current && matchRef.current) { setTimeout(() => { const y = matchRef.current.getBoundingClientRect().top + window.scrollY - 80; window.scrollTo({ top: y, behavior: 'smooth' }); }, 120); } prevDetailsOk.current = detailsOk; }, [detailsOk]); function selectPick(matchId, pickValue) { if (selectedMatchId === matchId && pick === pickValue) { setPick(null); // deselect } else { setSelectedMatchId(matchId); setPick(pickValue); // Clear error for this card when user changes pick setCardErrors(prev => { const n = {...prev}; delete n[matchId]; return n; }); } } async function updatePick(m, newPick) { if (updating || !newPick || newPick === submittedPicks[m.id]) { setEditingMatchId(null); setEditPick(null); return; } setUpdating(m.id); setCardErrors(prev => { const n = {...prev}; delete n[m.id]; return n; }); try { const r = await fetch('/api/update-prediction', { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ phone: '+960' + phone.trim(), bill: bill.trim().toUpperCase(), matchId: m.id, pick: newPick, kickoffMs: m.kickoffMs, }), }); const data = await r.json(); if (!r.ok) { setCardErrors(prev => ({ ...prev, [m.id]: data.error || 'Update failed.' })); } else { setSubmittedPicks(prev => ({ ...prev, [m.id]: newPick })); const changedAt = data.changedAt || new Date().toISOString(); setSubmittedTimes(prev => ({ ...prev, [m.id]: { ...(prev[m.id] || {}), changedAt } })); } } catch (_) { setCardErrors(prev => ({ ...prev, [m.id]: 'Network error. Try again.' })); } setUpdating(null); setEditingMatchId(null); setEditPick(null); } async function submitCard(m, cardPick) { if (submitting || submitted.has(m.id)) return; setCardErrors(prev => { const n = {...prev}; delete n[m.id]; return n; }); setSubmitting(m.id); try { const res = await fetch('/api/submit-prediction', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: name.trim(), phone: '+960' + phone.trim(), bill: bill.trim().toUpperCase(), amount: billValidation.amountMvr, // always use DB-verified amount matchId: m.id, matchLabel: `${m.teamA.name} vs ${m.teamB.name}`, pick: cardPick, }), }); const data = await res.json(); if (!res.ok) { setCardErrors(prev => ({ ...prev, [m.id]: data.error || 'Something went wrong. Try again.' })); setSubmitting(null); return; } // Success -- mark card as done, record the pick + timestamp (prefer server timestamp) const pickedAt = data.submittedAt || new Date().toISOString(); setSubmitted(prev => new Set([...prev, m.id])); setSubmittedPicks(prev => ({ ...prev, [m.id]: cardPick })); setSubmittedTimes(prev => ({ ...prev, [m.id]: { pickedAt, changedAt: null } })); setSelectedMatchId(null); setPick(null); // Update local remainingVotes (submitted.size drives it reactively) } catch (e) { setCardErrors(prev => ({ ...prev, [m.id]: 'Network error. Check your connection.' })); } setSubmitting(null); } const upcomingCount = allUpcoming.length; // For mobile sticky: find the active pick context const activeMatch = visibleMatches.find(m => m.id === selectedMatchId); return (
Pick the winner. Lock in your shot.} sub="Enter your receipt number, choose the winning team, and submit. One receipt, one pick per match." right={
Upcoming matches
{upcomingCount}
} />
{/* ── Block 1 -- Your details ── */}
setName(e.target.value)} placeholder="Full name" style={inputStyle} />
+960
setPhone(e.target.value.replace(/\D/g, '').slice(0, 7))} placeholder="7-digit number" className="font-mono" style={{ ...inputStyle, border: 'none', flex: 1, borderRadius: 0, boxShadow: 'none' }} />
setBill(e.target.value.toUpperCase())} placeholder="Bill number" autoCapitalize="characters" autoCorrect="off" spellCheck="false" className="input-upper font-mono" aria-invalid={billValidation.state === 'invalid'} aria-describedby="bill-error" style={{ ...inputStyle, fontFamily: "'JetBrains Mono', monospace", borderColor: billValidation.state === 'valid' ? 'var(--success)' : billValidation.state === 'invalid' ? '#ef4444' : undefined, }} /> setAmount(e.target.value)} placeholder="e.g. 1500" aria-invalid={billValidation.state === 'invalid'} aria-describedby="bill-error" style={{ ...inputStyle, borderColor: billValidation.state === 'valid' ? 'var(--success)' : billValidation.state === 'invalid' ? '#ef4444' : undefined, }} />
{/* ── Validate bill button + result ── */}
{!canValidate && billValidation.state !== 'validating' && ( {!phoneOk ? 'Enter your mobile number first' : !billOk ? 'Enter your bill number' : !amountOk ? 'Enter the bill amount' : 'Fill all fields to check'} )} {/* Validation result */} {billValidation.state === 'valid' && (
Receipt confirmed ·{' '} {remainingVotes} {' '}pick{remainingVotes !== 1 ? 's' : ''} remaining
{submitted.size > 0 && (
{submitted.size} used · {maxVotes} total
)} {billValidation.isNewBinding && (
Mobile +960 {phone} linked to this bill.
)} {!billValidation.isNewBinding && (
Phone confirmed.
)}
)} {/* Invalid bill error */} {billValidation.state === 'invalid' && ( )}
{/* ── Block 2 -- Choose match + pick inline ── */}
{!detailsOk && (
Validate your receipt above to unlock match picks.
)} {detailsOk && nameMissing && (
Enter your full name above to submit predictions.
)} {/* Team filter -- find your team's matches fast */} {detailsOk && teamOptions.length > 0 && (
Find your team {teamFilter && ( )}
)} {visibleMatches.length === 0 && (
No Open Matches Yet
Predictions open shortly before each group stage match kicks off. Check back soon!
)}
{visibleMatches.map(m => { const isSubmitted = submitted.has(m.id); const isSubmitting = submitting === m.id; const isSelected = selectedMatchId === m.id; const currentPick = isSelected ? pick : null; const voteable = isVoteable(m); const cardError = cardErrors[m.id]; // Can submit: bill validated + name filled + match open + votes left const canSubmit = isSelected && currentPick && detailsOk && nameOk && voteable && !isSubmitted && remainingVotes > 0; // ── Submitted success state -- full match visualization ── if (isSubmitted) { const myPick = submittedPicks[m.id]; const ko = formatKickoff(m.kickoffAt); const canChange = voteable && detailsOk; // match open + bill validated const isEditing = editingMatchId === m.id; const times = submittedTimes[m.id] || {}; const fmtTs = (iso) => { if (!iso) return null; const d = new Date(iso); return d.toLocaleString('en-MV', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit', hour12: true }); }; const isUpdating = updating === m.id; // Compute settled outcome for result reveal let settledOutcome = null; if (m.status === 'SETTLED' && m.settled) { if (m.settled.draw) { settledOutcome = myPick === 'DRAW' ? 'correct' : 'wrong'; } else { const winnerIsA = m.teamAKey === m.settled.winner; settledOutcome = (myPick === 'A' && winnerIsA) || (myPick === 'B' && !winnerIsA) ? 'correct' : 'wrong'; } } const revealClass = settledOutcome === 'correct' ? 'flash-correct' : settledOutcome === 'wrong' ? 'shake-wrong' : ''; // Ticket header state const ticketBg = settledOutcome === 'correct' ? 'var(--success)' : settledOutcome === 'wrong' ? '#ef4444' : isEditing ? 'var(--orange)' : 'var(--ink)'; const ticketIcon = settledOutcome === 'wrong' ? 'close' : isEditing ? 'bolt' : 'check'; const ticketMsg = settledOutcome === 'correct' ? 'Correct prediction!' : settledOutcome === 'wrong' ? 'Wrong this time' : isEditing ? 'Change your pick' : 'Prediction locked in!'; return (
{/* Ticket header */}
{ticketMsg} {voteable && !settledOutcome && ( )} {!voteable && !settledOutcome && ( MATCH STARTED )} {settledOutcome && m.settled && ( {m.settled.scoreA}:{m.settled.scoreB} )}
{/* Ticket barcode strip */}
{/* Teams */}
{m.teamA.name}
{m.teamB.name}
{/* Pick buttons -- read-only or editable */}
{[ { key: 'A', label: m.teamA.name }, { key: 'DRAW', label: 'Draw' }, { key: 'B', label: m.teamB.name }, ].map(opt => { const isPrevPick = myPick === opt.key; const isNewPick = isEditing && editPick === opt.key; const active = isEditing ? isNewPick : isPrevPick; const dimmed = isEditing && !isNewPick && !isPrevPick; return isEditing ? ( ) : (
{active && } {opt.label}
); })}
{/* Error */} {cardError && (
{cardError}
)} {/* Ticket perforation divider */}
{/* Stub footer */}
{ko} {m.venue} {times.pickedAt && ( Picked {fmtTs(times.pickedAt)} )} {times.changedAt && ( Changed {fmtTs(times.changedAt)} )} {/* Change pick / confirm / cancel */} {canChange && !isEditing && ( )} {isEditing && (
)} {!canChange && !isEditing && ( Match locked )}
); } return (
{/* Sporty striped top accent (selected matches) */} {isSelected && ); })}
{/* Show all toggle */} {!teamFilter && allUpcoming.length > 6 && ( )}

By submitting, you confirm the bill is from your own SunFront purchase.

{/* Sponsor -- DKAA */} {/* ── Mobile sticky CTA -- only visible when a pick is active ── */} {activeMatch && pick && detailsOk && !submitted.has(activeMatch.id) && isVoteable(activeMatch) && (
Your pick
{pick === 'A' ? activeMatch.teamA.name : pick === 'B' ? activeMatch.teamB.name : 'Draw'} {' -- '}{activeMatch.teamA.name} vs {activeMatch.teamB.name}
)}
); } Object.assign(window, { PredictPage });