// wager-system.jsx — Sponsored coin toss + prop bet wagers, quizzes, and // win/loss reveal modals. Plugs into the Game Day Rewards tab. // // Exposes: // WAGER_SPONSORS — catalog of sponsor brand styling // WagerSheet — sponsor-skinned action sheet for picking a side // WagerResultModal — instant win/loss reveal with confetti or sad-face // QuizSheet — one-question or multi-question trivia modal // QuizResultModal — score summary at end of multi-question quiz // ───────────────────────────────────────────────────────────────────── // SPONSOR CATALOG // Each entry: bg color (modal bg), accent color, wordmark text, font, mark SVG. // These are placeholder visual identities — for a pitch demo. Real generated // images can be dropped at the prizeImage path on the wager config to swap in. // ───────────────────────────────────────────────────────────────────── const WAGER_SPONSORS = { chickfila: { name: 'Chick-fil-A', wordmark: 'CHICK-FIL-A', superscript: '\u00A9', color: '#DD0031', accent: '#FFFFFF', font: '"Caecilia", "Georgia", serif', weight: 800, tracking: '-0.005em', bgDark: '#8E001E', }, sheetz: { name: 'Sheetz', wordmark: 'SHEETZ', color: '#E51737', accent: '#FFE100', font: '"Inter", Helvetica, Arial, sans-serif', weight: 900, tracking: '-0.02em', bgDark: '#8E0E25', }, pizzahut: { name: 'Pizza Hut', wordmark: 'PIZZA HUT', color: '#EE3124', accent: '#FFFFFF', font: '"Helvetica Neue", Helvetica, Arial, sans-serif', weight: 900, tracking: '-0.01em', bgDark: '#8E1D16', }, cocacola: { name: 'Coca-Cola', wordmark: 'Coca-Cola', color: '#E61A27', accent: '#FFFFFF', font: '"Georgia", serif', weight: 700, italic: true, tracking: '0', bgDark: '#8E0F18', }, innout: { name: 'In-N-Out', wordmark: 'IN-N-OUT', color: '#D6022B', accent: '#FFE43F', font: '"Helvetica Neue", Helvetica, Arial, sans-serif', weight: 900, italic: true, tracking: '-0.005em', bgDark: '#8E0119', }, caferio: { name: 'Cafe Rio', wordmark: 'CAFE RIO', color: '#176A3B', accent: '#F1BC2A', font: '"Inter", Helvetica, Arial, sans-serif', weight: 800, tracking: '0.02em', bgDark: '#0D4225', }, maverik: { name: 'Maverik', wordmark: 'Maverik', color: '#F36F21', accent: '#FFFFFF', font: '"Inter", Helvetica, Arial, sans-serif', weight: 900, italic: true, tracking: '-0.01em', bgDark: '#9E4814', }, wendys: { name: "Wendy's", wordmark: "Wendy's", color: '#E2203B', accent: '#FFFFFF', font: '"Georgia", "Times New Roman", serif', weight: 700, italic: false, tracking: '-0.005em', bgDark: '#8E1426', }, whitecastle: { name: 'White Castle', wordmark: 'WHITE CASTLE', color: '#1A4FA0', accent: '#FFFFFF', font: '"Inter", Helvetica, Arial, sans-serif', weight: 900, tracking: '0.04em', bgDark: '#0F3066', }, skyline: { name: 'Skyline Chili', wordmark: 'SKYLINE CHILI', color: '#003E7E', accent: '#F0B400', font: '"Inter", Helvetica, Arial, sans-serif', weight: 800, tracking: '0.02em', bgDark: '#00254D', }, kfc: { name: 'KFC', wordmark: 'KFC', color: '#E4002B', accent: '#FFFFFF', font: '"Helvetica Neue", Helvetica, Arial, sans-serif', weight: 900, tracking: '0', bgDark: '#8E001A', }, ale8: { name: 'Ale-8', wordmark: 'ALE-8-ONE', color: '#0A6638', accent: '#F0B400', font: '"Georgia", serif', weight: 800, tracking: '0.02em', bgDark: '#063D22', }, bourbon: { name: 'Bourbon Barrel', wordmark: 'BOURBON BARREL CO.', color: '#5B341A', accent: '#F0B400', font: '"Georgia", "Times New Roman", serif', weight: 800, italic: true, tracking: '0.02em', bgDark: '#3A2110', }, pepsi: { name: 'Pepsi', wordmark: 'pepsi', color: '#004B93', accent: '#E32934', font: '"Helvetica Neue", Helvetica, Arial, sans-serif', weight: 900, italic: true, tracking: '-0.02em', bgDark: '#002D5A', }, }; function getSponsor(id) { return WAGER_SPONSORS[id] || WAGER_SPONSORS.chickfila; } // Sponsor wordmark element — pulls from the catalog and renders in brand font/color. function WagerSponsorMark({ sponsorId, size = 'lg', light = false }) { const s = getSponsor(sponsorId); const px = size === 'lg' ? 22 : (size === 'md' ? 16 : 13); return ( {s.wordmark}{s.superscript ? {s.superscript} : null} ); } // ───────────────────────────────────────────────────────────────────── // WAGER SHEET — sponsor-branded coin toss / prop bet picker // Props: // wager: { sponsor, prize, prizeImage, prizeEmoji, question?, teamA?, teamB?, optionLabels? } // — `question` + yes/no options for prop bets, or teamA/teamB for coin toss // stake: number of points being wagered (default 100) // onPick: (option) => void — fires on selection // onCancel: () => void // ───────────────────────────────────────────────────────────────────── function WagerSheet({ wager, stake = 100, onPick, onCancel, isCoinToss = false }) { const s = getSponsor(wager.sponsor); const bg = s.color; const dark = s.bgDark || _darken(bg, 0.25); const [posterOk, setPosterOk] = React.useState(true); const options = isCoinToss ? [ { id: 'A', label: wager.teamA || 'Team A' }, { id: 'B', label: wager.teamB || 'Team B' }, ] : [ { id: 'yes', label: 'Yes — Lock it in' }, { id: 'no', label: 'No — I\'ll pass' }, ]; const title = isCoinToss ? `${s.wordmark} COIN TOSS` : `${s.wordmark} PROP BET`; const description = isCoinToss ? `If you are correct, you will win a ${wager.prize}.` : wager.question; return (
e.stopPropagation()} style={{ width: '100%', maxWidth: 340, borderRadius: 22, overflow: 'hidden', boxShadow: '0 28px 70px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06)', background: `linear-gradient(180deg, ${bg}, ${dark})`, }}> {/* Header — sponsor wordmark in brand font */}
{title}{s.superscript ? {s.superscript} : null}
{description}
{/* Prize image / emoji */} {wager.prize && (
{posterOk && wager.prizeImage ? ( {wager.prize} setPosterOk(false)} style={{ width: 96, height: 96, objectFit: 'contain', filter: 'drop-shadow(0 6px 14px rgba(0,0,0,0.45))', }} /> ) : (
{wager.prizeEmoji || '\u{1F3C6}'}
)}
)} {/* Wager amount — wrap in a flex container so the pill centers reliably */}
Wager {stake} pts
{/* Prompt + options */}
{isCoinToss ? 'Who will win the coin toss?' : 'Place your wager'}
{options.map((opt, i) => ( ))} {/* Cancel */}
); } // ───────────────────────────────────────────────────────────────────── // WAGER SUSPENSE → RESULT MODAL // Renders a brief 1.5s "spinner" then the win/loss reveal. // Props: // wager: the same wager config used in WagerSheet // pick: 'A' | 'B' | 'yes' | 'no' // isCoinToss: bool // stake: points wagered // onClose: () => void — fires after user dismisses the result // onResult: (didWin: bool) => void — fires once when result settles // ───────────────────────────────────────────────────────────────────── function WagerResultModal({ wager, pick, isCoinToss = false, stake = 100, onClose, onResult }) { const s = getSponsor(wager.sponsor); const winningSide = wager.winnerHint || 'A'; const didWin = pick === winningSide; const [phase, setPhase] = React.useState('suspense'); // 'suspense' | 'result' React.useEffect(() => { const t = setTimeout(() => { setPhase('result'); if (onResult) onResult(didWin); }, 1500); return () => clearTimeout(t); }, [didWin]); // Auto-dismiss result after a beat React.useEffect(() => { if (phase !== 'result') return; const t = setTimeout(() => onClose && onClose(), 4400); return () => clearTimeout(t); }, [phase]); const bg = didWin ? s.color : '#1F1F28'; const dark = didWin ? (s.bgDark || _darken(bg, 0.25)) : '#0B0B12'; return (
{phase === 'suspense' ? ( ) : (
e.stopPropagation()} style={{ position: 'relative', width: '100%', maxWidth: 300, borderRadius: 22, overflow: 'visible', background: `linear-gradient(170deg, ${bg}, ${dark})`, boxShadow: `0 28px 70px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.08), inset 0 1px 0 rgba(255,255,255,0.18)`, padding: '36px 24px 28px', textAlign: 'center', animation: 'mtnTrophyPop 480ms cubic-bezier(0.34, 1.56, 0.64, 1) both', }}> {didWin && } {/* Big result mark */}
{didWin ? ( ) : ( )}
{didWin ? 'You won!' : 'Tough luck.'}
{didWin ? ( <>
You won a {wager.prize}
+{stake * 2} pts · prize added to Inventory
) : ( <>
You'll get 'em next time.
-{stake} pts
)}
)}
); } // 1.5s suspense — coin flip (for coin toss) or simple "Tallying…" spinner (for props) function SuspenseSpinner({ isCoinToss, sponsor }) { return (
{isCoinToss ? ( <>
{(sponsor.wordmark || 'C')[0]}
) : ( <>
Tallying
)}
); } // ───────────────────────────────────────────────────────────────────── // QUIZ SHEET — single or multi-question trivia // Props: // quiz: [{ question, choices: [...], correct: idx }] or { question, choices, correct } // onClose: ({ correctCount, total, reward }) => void // accentBg: optional override // ───────────────────────────────────────────────────────────────────── function QuizSheet({ quiz, rewardPerQuestion = 50, onClose, accentBg }) { const questions = Array.isArray(quiz) ? quiz : [quiz]; const [idx, setIdx] = React.useState(0); const [pickedIdx, setPickedIdx] = React.useState(null); const [correctCount, setCorrectCount] = React.useState(0); const [done, setDone] = React.useState(false); const bg = accentBg || pickBoldTenantColor(); const dark = _darken(bg, 0.15); const q = questions[idx]; const handlePick = (i) => { if (pickedIdx !== null) return; setPickedIdx(i); const right = i === q.correct; if (right) setCorrectCount(c => c + 1); setTimeout(() => { if (idx + 1 < questions.length) { setIdx(idx + 1); setPickedIdx(null); } else { setDone(true); } }, 1100); }; if (done) { return ( onClose && onClose({ correctCount, total: questions.length, reward: correctCount * rewardPerQuestion })} /> ); } return (
onClose && onClose({ aborted: true })} style={{ position: 'absolute', inset: 0, zIndex: 240, background: 'rgba(0,0,0,0.55)', backdropFilter: 'blur(6px)', WebkitBackdropFilter: 'blur(6px)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16, animation: 'mtnFade 220ms ease-out', }}>
e.stopPropagation()} style={{ width: '100%', maxWidth: 340, borderRadius: 22, overflow: 'hidden', background: `linear-gradient(180deg, ${bg}, ${dark})`, boxShadow: `0 28px 70px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06)`, }}>
{questions.length > 1 ? `Question ${idx + 1} of ${questions.length}` : 'Quick Quiz'}
{q.question}
{q.choices.map((choice, i) => { const isPicked = pickedIdx === i; const isCorrect = pickedIdx !== null && i === q.correct; const isWrong = isPicked && i !== q.correct; const showFeedback = pickedIdx !== null; return ( ); })}
{/* Progress bar for multi-question */} {questions.length > 1 && (
)}
); } // ───────────────────────────────────────────────────────────────────── // QUIZ RESULT — score summary at end of multi-question quiz // ───────────────────────────────────────────────────────────────────── function QuizResultModal({ correctCount, total, reward, onClose }) { const bg = pickBoldTenantColor(); const passed = correctCount >= Math.ceil(total / 2); React.useEffect(() => { const t = setTimeout(() => onClose && onClose(), 4400); return () => clearTimeout(t); }, []); return (
e.stopPropagation()} style={{ position: 'relative', width: '100%', maxWidth: 300, borderRadius: 22, overflow: 'visible', background: `linear-gradient(170deg, ${bg}, ${_darken(bg, 0.15)})`, boxShadow: `0 28px 70px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.08), inset 0 1px 0 rgba(255,255,255,0.18)`, padding: '36px 24px 28px', textAlign: 'center', animation: 'mtnTrophyPop 480ms cubic-bezier(0.34, 1.56, 0.64, 1) both', }}> {passed && }
{passed ? 'Nice work!' : 'Better luck next time'}
{correctCount}/{total}
+{reward} pts earned
); } // Helper: darken a hex toward black by factor t in [0,1] function _darken(hex, t) { const h = (hex || '#000').replace('#', ''); const n = parseInt(h.length === 3 ? h.split('').map(c => c + c).join('') : h, 16); const r = ((n >> 16) & 255) * (1 - t); const g = ((n >> 8) & 255) * (1 - t); const b = ((n) & 255) * (1 - t); return '#' + [r, g, b].map(v => Math.round(v).toString(16).padStart(2, '0')).join(''); } Object.assign(window, { WAGER_SPONSORS, WagerSheet, WagerResultModal, QuizSheet, QuizResultModal, WagerSponsorMark, getSponsor, });