// screens-rewards.jsx — Duolingo-flavored gamified rewards. // Stack: animated points bar with tier-up loop, streak flame, daily quests // (buckets of XP), tier perks (concrete % off), leaderboard, achievements, // redeem rail. Tenant-skinned via WVU.gold (primary). function ScreenRewards({ onBack, onOpenMe }) { // ─── Tier model ───────────────────────────────── // Goes: Rookie → Loyal → Gold → Platinum → Mountain const TIERS = [ { id: 'rookie', label: 'Rookie', min: 0, perks: ['10% off concessions', '5% off shop', 'Profile flair'] }, { id: 'loyal', label: 'Loyal', min: 2500, perks: ['15% off concessions', '10% off shop', 'Early ticket access'] }, { id: 'gold', label: 'Gold', min: 5000, perks: ['20% off concessions', '15% off shop', 'Free pregame upgrade', '2× points weekends'] }, { id: 'platinum', label: 'Platinum', min: 20000, perks: ['25% off concessions', '20% off shop', 'Sideline pass · 2/yr', 'Athlete meet-and-greet'] }, { id: 'mountain', label: 'Mountain', min: 50000, perks: ['Free concessions', 'Free shop · monthly', 'Travel package', 'All-access laminate'] }, ]; const points = DEREK.points; const tierIdx = TIERS.reduce((acc, t, i) => points >= t.min ? i : acc, 0); const tier = TIERS[tierIdx]; const next = TIERS[tierIdx + 1] || tier; const inTier = points - tier.min; const tierSpan = (next.min - tier.min) || 1; const tierPct = Math.min(1, inTier / tierSpan); const toNext = Math.max(0, next.min - points); // ─── Today's quests (Duolingo-style) ──────────── const quests = [ { id: 'q1', icon: 'ticket', label: 'Check in to a game', pts: 500, prog: 0, total: 1, cta: 'Saturday' }, { id: 'q2', icon: 'play', label: 'Watch 1 episode', pts: 50, prog: 0, total: 1, cta: 'Open video' }, { id: 'q3', icon: 'shop', label: 'Buy team merch', pts: 30, prog: 1, total: 1, cta: 'Done', done: true }, { id: 'q4', icon: 'star', label: 'Tip your athlete', pts: 150, prog: 0, total: 1, cta: 'Open NIL' }, ]; const questsDone = quests.filter(q => q.done).length; // ─── Streak ───────────────────────────────────── const streakWeeks = 8; const streakMax = 12; // ─── Achievements (badges) ────────────────────── const achievements = [ { id: 'a1', label: 'Tailgate VIP', sub: '5 games', on: true }, { id: 'a2', label: 'Roadie', sub: '1 away game', on: true }, { id: 'a3', label: 'Big Spender', sub: '$500 spend', on: true }, { id: 'a4', label: 'Ride or Die', sub: '8wk streak', on: true }, { id: 'a5', label: 'Recruiter', sub: 'Refer 3', on: false }, { id: 'a6', label: 'Sweep', sub: 'Watch all', on: false }, ]; // ─── Leaderboard ──────────────────────────────── const leaderboard = [ { rank: 110, name: 'Tasha P.', pts: 14210 }, { rank: 111, name: 'Marcus W.', pts: 13720 }, { rank: 112, name: DEREK.firstName + ' (you)', pts: points, you: true }, { rank: 113, name: 'Sami O.', pts: 13180 }, { rank: 114, name: 'Kenji L.', pts: 12940 }, ]; // Animated count-up for points const [displayPts, setDisplayPts] = React.useState(0); React.useEffect(() => { let raf; const start = performance.now(); const dur = 900; const tick = (now) => { const t = Math.min(1, (now - start) / dur); const ease = 1 - Math.pow(1 - t, 3); setDisplayPts(Math.round(points * ease)); if (t < 1) raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [points]); // Animated XP bar const [barPct, setBarPct] = React.useState(0); React.useEffect(() => { const t = setTimeout(() => setBarPct(tierPct), 100); return () => clearTimeout(t); }, [tierPct]); return (
{/* ─── HERO: Points + Tier + XP bar ─────────────── */}
{/* Tier crest in corner */}
{/* Rank pill */}
{tier.label} Tier
{/* Big point count */}
{displayPts.toLocaleString()} pts
{/* XP bar */}
{tier.label} {toNext.toLocaleString()} TO {next.label.toUpperCase()}
{/* shimmer */}
{/* ─── STREAK BLOCK (Duolingo flame) ────────────── */}
{/* Flame icon */}
{streakWeeks} week streak
Engage every week to keep it. Hit 12 for{' '} +500 bonus.
{/* dot bar */}
{Array.from({ length: streakMax }).map((_, i) => (
))}
{/* ─── TODAY'S QUESTS ───────────────────────────── */} s + (q.done ? 0 : q.pts), 0)} available`} >
{quests.map(q => )}
{/* ─── TIER PERKS (concrete) ────────────────────── */}
{tier.perks.map((perk, i) => (
{perk}
ACTIVE
))} {/* Preview next tier */} {tierIdx < TIERS.length - 1 && (
Locked at {next.label}
{next.perks.slice(0, 2).join(' · ')}
{toNext.toLocaleString()} pts away
)}
{/* ─── ACHIEVEMENTS ─────────────────────────────── */} a.on).length} of ${achievements.length}`}>
{achievements.map(a => (
{a.label}
{a.sub}
))}
{/* ─── LEADERBOARD ──────────────────────────────── */}
{leaderboard.map((row, i) => (
{row.rank}
{row.name[0]}
{row.name}
{row.pts.toLocaleString()}
))}
{/* ─── REDEEM RAIL ──────────────────────────────── */} points >= r.pts).length} unlocked`}>
{REWARDS.slice(0, 4).map(rw => { const can = points >= rw.pts; return (
{rw.pts.toLocaleString()} PTS
{rw.title}
{rw.sub}
{can ? 'Redeem' : `${(rw.pts - points).toLocaleString()} away`}
); })}
★ {WVU.nick.toUpperCase()} REWARDS · POWERED BY THE SPINE ★
); } // ─── Quest row ──────────────────────────────────── function RwQuest({ icon, label, pts, prog, total, cta, done }) { const pct = prog / total; const icons = { ticket: , play: , shop: , star: , }; return (
{done ? ( ) : icons[icon] || icons.star}
{label}
+{pts}
{done ? 'CLAIMED' : cta.toUpperCase()}
); } // ─── Trophy crest (decorative) ───────────────────── function RwTierCrest({ size = 100, color }) { const s = size; return ( ); } // ─── Tiny tier icon for hero pill ─────────────────── function RwTierIcon({ size = 14 }) { return ( ); } // ─── Achievement badge SVG ────────────────────────── function RwBadge({ size = 36, on = true }) { const s = size; const fill = on ? WVU.gold : 'rgba(245,236,217,0.20)'; const fillDim = on ? WVU.goldDim : 'rgba(245,236,217,0.12)'; return ( {/* outer star polygon */} {/* inner circle */} ); } Object.assign(window, { ScreenRewards });