// site-jogador/js/recompensas.jsx // // Recompensas de Fundador (pré-registro): barra de progresso até a meta + 3 cards 3D // (tilt + brilho seguindo o mouse) com a imagem PNG e os benefícios de cada item. // Dados: data/rewards.json (copia publicada; fonte canonica em shared/rewards.json). const RW_ACCENT = '#a8ff00'; // ── Barra de progresso de Fundadores ────────────────────────────────── function FoundersBar({ current, goal, goalLabel }) { const c = current || 0; const g = goal || 0; const pct = g > 0 ? Math.min((c / g) * 100, 100) : 0; return (
FUNDADORES PRÉ-REGISTRADOS
{c.toLocaleString('pt-BR')} de {g.toLocaleString('pt-BR')}
{pct.toFixed(0)}%
Próxima recompensa: {goalLabel}. Cada novo Fundador chega mais perto.
); } // ── Card 3D de recompensa (tilt + glare seguindo o mouse) ───────────── function RewardCard({ reward }) { const ref = React.useRef(null); const achieved = reward.status === 'achieved'; const accent = achieved ? RW_ACCENT : 'rgba(180,180,180,0.55)'; const onMove = (e) => { const el = ref.current; if (!el) return; const r = el.getBoundingClientRect(); const px = (e.clientX - r.left) / r.width; const py = (e.clientY - r.top) / r.height; const MAX = 10; // graus de inclinacao el.style.transform = `rotateX(${((0.5 - py) * 2 * MAX).toFixed(2)}deg) rotateY(${((px - 0.5) * 2 * MAX).toFixed(2)}deg) scale(1.03)`; el.style.setProperty('--gx', (px * 100).toFixed(1) + '%'); el.style.setProperty('--gy', (py * 100).toFixed(1) + '%'); }; const reset = () => { if (ref.current) ref.current.style.transform = 'rotateX(0deg) rotateY(0deg) scale(1)'; }; return (
{/* brilho que segue o mouse */}
{/* badge de status */}
{achieved ? '✓ CONQUISTADA' : '🔒 BLOQUEADA'}
{/* imagem do item (pop pra frente no 3D) */}
{reward.image ? {reward.name} :
🔒
}
{/* corpo */}
{reward.milestone}{reward.rarity ? ` · ${reward.rarity}` : ''}
{reward.name}
{reward.tagline && (
{reward.tagline}
)}
O QUE DÁ
    {(reward.benefits || []).map((b, i) => (
  • +{b}
    • ))}
); } // ── MAIN ────────────────────────────────────────────────────────────── function RecompensasFundador() { const [data, setData] = React.useState(null); const [error, setError] = React.useState(null); const [live, setLive] = React.useState(null); // contagem real de Fundadores (Supabase) React.useEffect(() => { const paths = ['data/rewards.json', '/data/rewards.json', '/shared/rewards.json', '../shared/rewards.json', 'shared/rewards.json']; (async () => { for (const p of paths) { try { const r = await fetch(p); if (r.ok) { const j = await r.json(); setData(j); return; } } catch (e) { /* try next */ } } setError('Falha ao carregar recompensas.'); })(); }, []); // contagem REAL de Fundadores via Supabase (RPC public_founder_count) -> barra "ao vivo". // re-busca a cada 60s e ao voltar pra aba. Se falhar, cai no numero do rewards.json. React.useEffect(() => { if (!window.sb) return; let alive = true; const pull = async () => { try { const { data: n, error: e } = await window.sb.rpc('public_founder_count'); if (alive && !e && typeof n === 'number') setLive(n); } catch (err) { /* mantem o fallback */ } }; pull(); const id = setInterval(pull, 60000); const onVis = () => { if (document.visibilityState === 'visible') pull(); }; document.addEventListener('visibilitychange', onVis); return () => { alive = false; clearInterval(id); document.removeEventListener('visibilitychange', onVis); }; }, []); if (error || !data) return null; // silencioso: se nao carregar, a secao some const s = data.signups || {}; const rewards = data.rewards || []; const current = (live != null) ? live : s.current; // ao vivo quando disponivel return (
{/* header */}
RECOMPENSAS DE FUNDADOR

QUEM CHEGA CEDO
ENTRA EQUIPADO

Cada marco de pré-registro desbloqueia uma recompensa pra todo mundo que se cadastrou. São itens que ajudam de verdade no começo, resgatados pelo Painel do Jogador quando a beta abrir.

{/* barra de progresso */} {/* cards 3D */}
{rewards.map((rw, i) => )}
); } Object.assign(window, { RecompensasFundador });