{label&&
);
const CoinBadge = ({amount,size="md"}) => (
◈ {typeof amount==="number"?amount.toLocaleString():amount}
);
const DiffBadge = ({diff}) => {
const m={EASY:["#6a7a8a","#080808"],MED:["#ffffff","#060606"],HARD:["#8844cc","#0a0404"],EXPERT:["#ffffff","#1a1a1a"]};
const [fg,bg]=m[diff]||["#888","#111"];
return {diff};
};
const XPFloater = ({amount,onDone}) => {
useEffect(()=>{const t=setTimeout(onDone,950);return()=>clearTimeout(t);},[]);
return (
{label}
}
onChange(e.target.value)} placeholder={placeholder}/>
+{amount} XP
);
};
const RankBar = ({xp}) => {
const rank=getRank(xp); const next=getNextRank(xp); const pct=getXPProgress(xp);
return (
{rank.icon} {rank.name}
{xp.toLocaleString()} XP{next?` / ${next.min.toLocaleString()}`:" · MAX"}
{type==="success"?"✓":type==="error"?"✗":type==="warn"?"⚠":"ℹ"}{msg}
);
};
const TopBar = ({user,onProfile,onAdmin,avatars,onMyCards,myCardsCount=0,onHowTo,lang,setLanguage}) => {
const rank=getRank(user.xp||0);
const av=avatars.find(a=>a.id===user.avatarId);
return (
{/* Lang toggle button */}
{/* How to play */}
{/* Profile button */}
{setLanguage&&
}
);
const GoogleBtn = ({label,onToast}) => (
{
try { sb.auth.signInWithOAuth({provider:"google", redirectTo:APP_URL}); }
catch(e) { onToast(e.message||"Google sign-in failed","error"); }
}}
style={{width:"100%",marginBottom:14,borderRadius:2,gap:10,letterSpacing:"0.01em",fontSize:14}}>
{label}
);
const Divider = () => (
DARE TO PICK!
OR
);
const LoginScreen = ({users,onLogin,onGo,onToast,lang="en",setLanguage}) => {
const [u,setU]=useState(""); const [p,setP]=useState(""); const [err,setErr]=useState(""); const [loading,setLoading]=useState(false);
const t = LANG[lang]||LANG.en;
const submit=async()=>{
if(!u||!p) return setErr(t.allFieldsRequired);
setLoading(true); setErr("");
// ── Local fallback (no Supabase configured) ───────────────
if(SUPABASE_URL.includes("YOUR_PROJECT")) {
const found = users.find(x=>x.username.toLowerCase()===u.toLowerCase()&&x.password===p);
setLoading(false);
if(found) onLogin(found, null);
else setErr(t.invalidCredentials);
return;
}
// ── Supabase auth ─────────────────────────────────────────
try {
// Try login with username — attempt both email domains
let res = null;
const attempts = u.includes("@")
? [u]
: [`${u.toLowerCase()}@dfuse.gg`, `${u.toLowerCase()}@dfuse.app`];
for(const email of attempts){
res = await sb.auth.signIn({email, password:p});
if(res.access_token) break;
}
if(res.error||!res.access_token) {
setErr(t.invalidCredentials);
} else {
sb._token = res.access_token;
const profile = await sb.from("profiles").select("*", {filter:`id=eq.${res.user.id}`}).then(d=>d[0]);
onLogin({...profile, id:profile.id, isAdmin:profile.is_admin, avatarId:profile.avatar_id, lastClaim:profile.last_claim}, res.access_token);
}
} catch(e) { setErr(e.message||"Login failed"); }
finally { setLoading(false); }
};
return (
{loading?"...":t.authenticate}
);
};
const SignupScreen = ({onSignup,onGo,onToast,avatars,lang="en",setLanguage}) => {
const [u,setU]=useState(""); const [p,setP]=useState(""); const [p2,setP2]=useState("");
const [email,setEmail]=useState(""); const [avatar,setAvatar]=useState("a1"); const [err,setErr]=useState("");
const [loading,setLoading]=useState(false);
const t = LANG[lang]||LANG.en;
const submit=async()=>{
if(!u||!p||!email)return setErr(t.allFieldsRequired);
if(p!==p2)return setErr(t.codesDoNotMatch);
if(p.length<6)return setErr(t.codeMin6);
if(u.length<3)return setErr(t.usernameMin3);
setLoading(true); setErr("");
// ── Local fallback ────────────────────────────────────────
if(SUPABASE_URL.includes("YOUR_PROJECT")) {
setLoading(false);
onSignup({id:uid(),username:u.toLowerCase(),password:p,email,avatarId:avatar,coins:0,isAdmin:false,joined:now(),lastClaim:null,xp:0}, null);
return;
}
// ── Supabase ──────────────────────────────────────────────
try {
const res = await sb.auth.signUp({email: email.toLowerCase(), password:p, username: u.toLowerCase(), redirectTo: APP_URL});
if(res.error || res.code) { setErr(res.error?.message||res.msg||res.message||"Sign up failed"); return; }
if(!res.access_token) {
// Email confirmation required — vai voltar via hash callback
onToast(t.emailConfirm(email), "success");
onGo("login");
return;
}
sb._token = res.access_token;
await sb.from("profiles").update({avatar_id: avatar}, `id=eq.${res.user.id}`);
const profile = await sb.from("profiles").select("*", {filter:`id=eq.${res.user.id}`}).then(d=>d[0]);
onSignup({...profile, id:profile.id, isAdmin:false, avatarId:avatar, lastClaim:null}, res.access_token);
} catch(e) { setErr(e.message||"Sign up failed"); }
finally { setLoading(false); }
};
return (
{loading?t.enlisting:t.enlistNow}
);
};
const RecoveryScreen = ({onGo,onToast}) => {
const [email,setEmail]=useState(""); const [sent,setSent]=useState(false);
return (
{setSent(true);onToast("Recovery protocol initiated","info");}} style={{width:"100%"}}>SEND RECOVERY
):(
);
};
/* ─── LOBBY ──────────────────────────────────────────────────────── */
const ArenaCard = ({arena,challenges,idx,onEnter}) => {
const count=challenges.filter(c=>c.arenaId===arena.id&&c.active).length;
const img=arena.imageUrl||ARENA_IMAGES[arena.id]||FALLBACK_IMG;
return (
▶ {t.authRequired}
{err}
}
▶ {t.newAgentReg}
{err}
}
{t.selectAvatar}
{avatars.map(a=>(
))}
▶ ACCESS CODE RECOVERY
{!sent?(<>
Enter your registered email. Recovery protocol will be dispatched.
✓ RECOVERY INITIATED
CHECK YOUR SECURE CHANNEL
)}
CHECK YOUR SECURE CHANNEL
onEnter(arena)} style={{
position:"relative",height:172,overflow:"hidden",cursor:"pointer",
border:`1px solid ${arena.color}44`,animation:`slideUp ${0.28+idx*0.1}s ease`,
}}>
);
};
/* ─── ARENA ──────────────────────────────────────────────────────── */
const ArenaScreen = ({arena,challenges,user,onBack,onJoin,onViewResult,entries=[],lang="en"}) => {
const t = LANG[lang]||LANG.en;
const ops=challenges.filter(c=>c.arenaId===arena.id&&c.active);
const img=arena.imageUrl||ARENA_IMAGES[arena.id]||FALLBACK_IMG;
return (
setStep(1)} variant="ghost" style={{flex:1}}>← BACK
{if(!selectedMatchIds.length||loadingGrid)return;setCurrentMarketMatch(0);setStep(3);}}
disabled={!selectedMatchIds.length||loadingGrid} style={{flex:2}}>
CONFIGURE MARKETS →
)}
{step===3&&(()=>{
const match = selectedMatches[currentMarketMatch];
const selMkts = marketsPerMatch[match?.id]||[];
return (
currentMarketMatch>0?setCurrentMarketMatch(p=>p-1):setStep(2)} variant="ghost" style={{flex:1}}>← BACK
{if(currentMarketMatchp+1);}else{setStep(4);}}} style={{flex:2}}>
{currentMarketMatch
);
})()}
{step==="stickerPreview"&&(
)}
{step===4&&(
{/* Image uploads */}
{[
["BACKGROUND IMAGE","Any scene/stadium/abstract","stickerBg",setStickerBg,stickerBg],
["MAIN ILLUSTRATION","PNG with transparent bg — character/player","stickerMain",setStickerMain,stickerMain],
["FRAME / BORDER","PNG transparent — use light grey #e8e8e8 base","stickerFrame",setStickerFrame,stickerFrame],
].map(([label,hint,key,setter,val])=>(
))}
{/* ── STICKER PREVIEW BUTTON → dedicated screen ── */}
setStep("stickerPreview")} variant="ghost" style={{width:"100%",marginBottom:14}}>
👁 PREVIEW STICKER CARD →
setStep(3)} variant="ghost" style={{flex:1}}>← BACK
CREATE CHALLENGE
)}
CANCEL
);
};
/* ─── SWIPE CARD ─────────────────────────────────────────────────── */
const SwipeCard = ({question, index, total, onAnswer, onReset, answeredOption}) => {
const [dragX, setDragX] = useState(0);
const [dragging, setDragging] = useState(false);
const [startX, setStartX] = useState(0);
const [exiting, setExiting] = useState(null); // "left"|"right"|null
const THRESHOLD = 72;
const cardRef = React.useRef(null);
// Native touch listeners — bypass React passive event issues
React.useEffect(() => {
const el = cardRef.current;
if(!el) return;
let sx = 0, active = false;
const onTS = (e) => { sx = e.touches[0].clientX; active = true; };
const onTM = (e) => {
if(!active) return;
const dx = e.touches[0].clientX - sx;
if(Math.abs(dx) > 6) e.preventDefault(); // prevent scroll on horiz swipe
setDragX(dx);
};
const onTE = () => {
active = false;
setDragX(prev => {
if(prev < -THRESHOLD) { setTimeout(()=>commit("left"),0); return prev; }
if(prev > THRESHOLD) { setTimeout(()=>commit("right"),0); return prev; }
return 0;
});
setDragging(false);
};
el.addEventListener("touchstart", onTS, {passive:true});
el.addEventListener("touchmove", onTM, {passive:false});
el.addEventListener("touchend", onTE, {passive:true});
return () => {
el.removeEventListener("touchstart", onTS);
el.removeEventListener("touchmove", onTM);
el.removeEventListener("touchend", onTE);
};
}, [question.id, exiting]);
// Answered state — compact card with color of chosen option
if(answeredOption && !exiting) {
const isA = answeredOption === question.answers[0];
const color = isA ? "var(--cyan)" : "var(--purple)";
const colorBg = isA ? "rgba(255,255,255,0.07)" : "rgba(136,68,204,0.07)";
const colorBorder = isA ? "rgba(255,255,255,0.2)" : "rgba(136,68,204,0.22)";
return (
);
}
const commit = (dir) => {
// swipe LEFT → answers[0] (left/cyan option)
// swipe RIGHT → answers[1] (right/red option)
const choice = dir==="left" ? question.answers[0] : question.answers[1];
setExiting(dir);
setTimeout(()=>onAnswer(question.id, choice), 310);
};
// Touch handled by native listeners above (useEffect)
const onTouchStart = () => {};
const onTouchMove = () => {};
const onTouchEnd = () => {};
const progress = Math.min(Math.abs(dragX) / THRESHOLD, 1);
const goLeft = dragX < 0;
const goRight = dragX > 0;
const cardTransform = exiting==="left"
? "translateX(-115%)"
: exiting==="right"
? "translateX(115%)"
: `translateX(${dragX}px)`;
const cardTransition = dragging ? "none" : "transform 0.3s ease";
return (
);
})}
{/* Share picks */}
onSubmit({questions,answers,locked:true,submittedAt:now()})}
style={{width:"100%",fontSize:12,padding:"16px",letterSpacing:"0.12em"}}>
🔒 {t.lockIn} — {questions.length} {t.picks}
)}
);
/* ── PLAY VIEW ── */
return (
);
};
/* ─── STICKER PACK ───────────────────────────────────────────────── */
const Confetti = ({colors}) => {
const pieces = React.useMemo(()=>Array.from({length:20},(_,i)=>({
id:i, x:Math.random()*100, delay:Math.random()*0.7,
w:4+Math.random()*7, h:2+Math.random()*4,
color:colors[i%colors.length], dur:0.9+Math.random()*0.6,
})),[]);
return (
);
};
const PackHalf = ({cfg, side}) => {
const isTop = side==="top";
return (
{["top-left","top-right","bottom-left","bottom-right"].map(p=>)}
);
};
const LobbyScreen = ({user,arenas,challenges,onEnterArena,onProfile,onAdmin,onClaim,dailyDrop,avatars,onMyCards,myCardsCount=0,onShowRanks,onLeaderboard,onHowTo,lang,setLanguage}) => {
const t = LANG[lang]||LANG.en;
const today=new Date().toDateString();
const canClaim=!user.lastClaim||new Date(user.lastClaim).toDateString()!==today;
const activeArenas=arenas.filter(a=>a.active);
return (
{arena.name}
{arena.desc}
{count} OPERATION{count!==1?"S":""}
TAP TO ENTER →
{/* XP + MY CARDS row */}
+{XP_CLAIM} XP
{!canClaim&&user.lastClaim&&(()=>{
const [tick,setTick]=React.useState(0);
React.useEffect(()=>{const t=setInterval(()=>setTick(n=>n+1),1000);return()=>clearInterval(t);},[]);
const next=new Date(user.lastClaim);
next.setDate(next.getDate()+1);
next.setHours(0,0,0,0);
const diff=Math.max(0,next-new Date());
const h=Math.floor(diff/3600000);
const m=Math.floor((diff%3600000)/60000);
const s=Math.floor((diff%60000)/1000);
const pad=n=>String(n).padStart(2,"0");
return(
{canClaim?t.claimNow:t.claimed}
)}
{/* XP section — full width left side */}
{/* MY CARDS — tall button on right */}
{dailyDrop>0&&(
{(()=>{const r=getRank(user.xp||0),nxt=getNextRank(user.xp||0);return(<>
{r.icon} {r.name}
{(user.xp||0).toLocaleString()} XP{nxt?` — ${nxt.min.toLocaleString()}`:" · MAX"}
);})()}
{t.dailyReward}
{t.nextClaim} {pad(h)}:{pad(m)}:{pad(s)}
);
})()}
▶ {t.activeArenas} — {activeArenas.length} {t.available}
{activeArenas.map((arena,i)=>(
))}
);
};
/* ─── PROFILE ────────────────────────────────────────────────────── */
const ProfileScreen = ({user,onBack,onUpdate,onLogout,avatars}) => {
const [avatar,setAvatar]=useState(user.avatarId);
const rank=getRank(user.xp||0);
return (
{[["EMAIL",user.email],["MEMBER SINCE",new Date(user.joined).toLocaleDateString()],["STATUS","ACTIVE"]].map(([k,v])=>(
onUpdate({avatarId:avatar})} variant="secondary" style={{width:"100%"}}>SAVE AVATAR
LOGOUT / DISCONNECT
);
};
/* ─── CONFIRM MODAL ──────────────────────────────────────────────── */
const ConfirmModal = ({title,body,onConfirm,onCancel,confirmLabel="CONFIRM",danger=false}) => (
CANCEL
{confirmLabel}
);
/* ─── ADMIN CHALLENGE CREATOR ────────────────────────────────────── */
const AdminChallengeCreator = ({arenas, onCreate, onCancel}) => {
const [step, setStep] = useState(1);
const [arenaId, setArenaId] = useState(arenas[0]?.id||"");
const [name, setName] = useState(""); const [desc, setDesc] = useState("");
const [cost, setCost] = useState("100");
// Sticker config
const [stickerCharName, setStickerCharName] = useState("");
const [stickerBg, setStickerBg] = useState(null);
const [stickerMain, setStickerMain] = useState(null);
const [stickerFrame, setStickerFrame] = useState(null);
const [previewTier, setPreviewTier] = useState("GOLD");
const [stickerSplit, setStickerSplit] = useState(55);
// Step 2 — odds-api.io state
const [searchQuery, setSearchQuery] = useState("");
const [searchResults, setSearchResults] = useState([]);
const [selectedTournament, setSelectedTournament] = useState(null);
const [gridMatches, setGridMatches] = useState([]);
const [loadingGrid, setLoadingGrid] = useState(false);
const [gridError, setGridError] = useState(null);
const [selectedMatchIds, setSelectedMatchIds] = useState([]);
const [marketsPerMatch, setMarketsPerMatch] = useState({});
const [currentMarketMatch, setCurrentMarketMatch] = useState(0);
// When a tournament is selected, load its upcoming matches from PandaScore
useEffect(()=>{
if(!selectedTournament) return;
setLoadingGrid(true); setGridError(null); setGridMatches([]);
pandaFetch(selectedTournament.seriesId
? `/csgo/matches/upcoming?sort=begin_at&page[size]=50&filter[serie_id]=${selectedTournament.seriesId}`
: `/csgo/matches/upcoming?sort=begin_at&page[size]=50&filter[tournament_id]=${selectedTournament.id}`)
.then(data=>{
const events = Array.isArray(data) ? data : [];
const matches = events
.filter(e=>e.opponents?.length===2)
.map(normaliseEvent)
.filter(m=>!isTBD(m.teamA.name)&&!isTBD(m.teamB.name));
setGridMatches(matches);
if(matches.length===0) setGridError("No upcoming matches found for this tournament.");
})
.catch(err=>setGridError(err.message))
.finally(()=>setLoadingGrid(false));
},[selectedTournament]);
const handleSearch = () => {
if(!searchQuery.trim()) return;
setLoadingGrid(true); setGridError(null); setSearchResults([]);
setSelectedTournament(null); setGridMatches([]);
const term = searchQuery.trim().toLowerCase();
// Search PandaScore tournaments for CS2 (tier S/A)
pandaFetch(`/csgo/tournaments/upcoming?sort=begin_at&page[size]=50&filter[tier]=s`)
.then(data=>{
const tours = Array.isArray(data) ? data : [];
const filtered = tours.filter(t=>
t.name?.toLowerCase().includes(term)||
t.serie?.full_name?.toLowerCase().includes(term)||
t.league?.name?.toLowerCase().includes(term)
);
const results = filtered.map(t=>({
id: String(t.id),
name: `${t.league?.name||""} — ${t.serie?.full_name||t.name||""}`.trim(),
count: t.matches_count||null
}));
setSearchResults(results);
if(results.length===0){
// Try series instead of tournaments
return pandaFetch(`/csgo/series/upcoming?sort=begin_at&page[size]=50&filter[tier]=s`)
.then(series=>{
const sl = Array.isArray(series)?series:[];
const sf = sl.filter(s=>
s.full_name?.toLowerCase().includes(term)||
s.league?.name?.toLowerCase().includes(term)
);
const sr = sf.map(s=>({
id: String(s.id),
seriesId: String(s.id),
name: `${s.league?.name||""} — ${s.full_name||s.name||""}`.trim(),
count: null
}));
setSearchResults(sr);
if(sr.length===0) setGridError(`No Tier S CS2 tournament found for "${searchQuery}".`);
});
}
})
.catch(err=>setGridError(err.message))
.finally(()=>setLoadingGrid(false));
};
const selectedMatches = gridMatches.filter(m=>selectedMatchIds.includes(m.id));
const entryDeadline = selectedMatches.length
? selectedMatches.reduce((min,m)=>m.startTime setMarketsPerMatch(prev=>{
const cur = prev[matchId]||[];
return {...prev,[matchId]: cur.includes(mktId)?cur.filter(x=>x!==mktId):[...cur,mktId]};
});
const totalQuestions = selectedMatches.reduce((s,m)=>(marketsPerMatch[m.id]||[]).length+s,0);
const handleCreate = () => {
const matchesWithMarkets = selectedMatches.map(m=>({...m, markets:marketsPerMatch[m.id]||[]}));
const questionPool = buildQuestionPool(matchesWithMarkets);
const deadline = matchesWithMarkets.length
? matchesWithMarkets.reduce((min,m)=>m.startTime
{if(!name||!cost)return;setStep(2);}} style={{width:"100%"}}>NEXT — SELECT MATCHES →
)}
{step===2&&(
{/* ── HEADER ── */}
{/* ── SEARCH BOX ── */}
{!selectedTournament&&(
)}
{/* ── ERROR ── */}
{gridError&&(
)}
{/* ── SEARCH RESULTS: pick tournament ── */}
{!loadingGrid&&searchResults.length>0&&!selectedTournament&&(
)}
{/* ── SELECTED TOURNAMENT + MATCHES ── */}
{selectedTournament&&!loadingGrid&&(
<>
⏱ ENTRY DEADLINE: {fmtTime(deadline)}
({fmtCountdown(deadline)})
);
})()}
AGENT PROFILE
{(()=>{const av2=avatars.find(a=>a.id===user.avatarId);return av2?.src?
:"👤";})()}
{user.username.toUpperCase()}
{rank.icon} {rank.name}{user.isAdmin&&· ADMIN}
RANK PROGRESSION
TOTAL XP
{(user.xp||0).toLocaleString()}
COINS
{k}
{v}
))}
CHANGE AVATAR
{avatars.map(a=>(
))}
{title}
{body}
{[1,2,3,4].map(s=>(
{step===1&&(
s?"rgba(136,68,204,0.12)":"transparent",
color:step===s?"#fff":step>s?"var(--purple)":"var(--text-dim)",
borderRight:s<4?"1px solid var(--border)":"none"}}>
{s === step ? stepLabel[s] : s}
))}
STEP 1 — BASIC INFO
ARENA
STEP 2 — CS2 MATCHES
{selectedTournament&&!loadingGrid&&(
◉ ODDS-API LIVE
)}
SEARCH COMPETITION
setSearchQuery(e.target.value)}
onKeyDown={e=>e.key==="Enter"&&handleSearch()}
placeholder="ex: ESL, BLAST, PGL, IEM..."
style={{flex:1}}
/>
{loadingGrid?"...":"SEARCH"}
Enter the competition name and press SEARCH ou Enter
⚠ {gridError}
)}
{/* ── LOADING ── */}
{loadingGrid&&(
{selectedTournament?"LOADING MATCHES...":"SEARCHING..."}
{searchResults.length} COMPETITION{searchResults.length!==1?"S":""} FOUND — SELECT ONE
{searchResults.map(t=>(
{ setSelectedTournament(t); setGridError(null); }}
style={{padding:"10px 14px",border:"1px solid var(--border)",
background:"rgba(0,0,0,0.35)",cursor:"pointer",
display:"flex",alignItems:"center",justifyContent:"space-between",
transition:"all .15s"}}
onMouseEnter={e=>{e.currentTarget.style.borderColor="var(--cyan)";e.currentTarget.style.background="rgba(255,255,255,0.07)";}}
onMouseLeave={e=>{e.currentTarget.style.borderColor="var(--border)";e.currentTarget.style.background="rgba(0,0,0,0.35)";}}>
))}
{t.name}
{t.count>0&&{t.count} matches}
SELECT →
COMPETITION
{selectedTournament.name}
MATCHES — {gridMatches.length} FOUND · {selectedMatchIds.length} SELECTED
{gridMatches.map(m=>{
const sel=selectedMatchIds.includes(m.id);
return (
)}
{/* ── ENTRY DEADLINE ── */}
{selectedMatches.length>0&&(()=>{
const deadline = selectedMatches.reduce((min,m)=>m.startTimesetSelectedMatchIds(prev=>
prev.includes(m.id)?prev.filter(x=>x!==m.id):[...prev,m.id]
)} style={{
padding:"10px 12px",border:`1px solid ${sel?"var(--cyan)":"var(--border)"}`,
background:sel?"rgba(255,255,255,0.07)":"rgba(0,0,0,0.3)",cursor:"pointer",
display:"flex",justifyContent:"space-between",alignItems:"center",
boxShadow:sel?"0 0 10px var(--cyan-glow)":"none",flexShrink:0}}>
);
})}
{m.teamA.name} vs {m.teamB.name}
{m.format} · {fmtTime(m.startTime)} · {fmtCountdown(m.startTime)}
{sel&&"✓"}
STEP 3 — BETTING MARKETS
Match {currentMarketMatch+1}/{selectedMatches.length}
{match.teamA.flag} {match.teamA.name} vs {match.teamB.name} {match.teamB.flag}
{match.format} · {fmtTime(match.startTime)}
SELECT QUESTION TYPES FOR THIS MATCH
{MARKET_TEMPLATES.map(mkt=>{
const on = selMkts.includes(mkt.id);
return (
toggleMarket(match.id,mkt.id)} style={{
padding:"8px 12px",border:`1px solid ${on?"var(--cyan)":"var(--border)"}`,
background:on?"rgba(255,255,255,0.07)":"rgba(0,0,0,0.25)",cursor:"pointer",
display:"flex",justifyContent:"space-between",alignItems:"center"}}>
);
})}
{mkt.name}
{mkt.a(match).join(" · ")}
{on&&"✓"}
STEP 4 — STICKER & REVIEW
{/* ── STICKER SETUP ── */}
STICKER CONFIG
{/* Character name */}
CHARACTER NAME
setStickerCharName(e.target.value)}
placeholder="e.g. S. FAKER"
style={{background:"rgba(0,0,0,0.55)",border:"1px solid var(--border)",color:"var(--text)",
fontFamily:"var(--body)",fontSize:15,padding:"10px 14px",width:"100%",outline:"none"}}/>
Appears at bottom of sticker. Description uses challenge name automatically.
{val?"✓ ":""}{label}
{val&&}
{!val&&{hint}
}
CHALLENGE SUMMARY
{[
["CHALLENGE",name],["ARENA",arenas.find(a=>a.id===arenaId)?.name||"-"],
["ENTRY COST",`◈${cost}`],
["MATCHES",`${selectedMatches.length} match${selectedMatches.length!==1?"es":""}`],
["QUESTION POOL",`${totalQuestions} potential questions (4 picked per player)`],
["ENTRY DEADLINE",entryDeadline?fmtTime(entryDeadline):"—"],
].map(([k,v])=>(
{k}
{v}
))}
{selectedMatches.map(m=>(
{totalQuestions<4&&(
{m.teamA.abbr} vs {m.teamB.abbr}
{(marketsPerMatch[m.id]||[]).length} markets
))}
⚠ Select at least 4 markets total to guarantee 4 questions per player.
)}
{question.marketName}
{question.question}
{answeredOption}
✎ CHANGE
{/* ── Background: LEFT side = cyan (answers[0]) ── */}
{/* ── Background: RIGHT side = red (answers[1]) ── */}
{/* ── The sliding card ── */}
);
};
/* ─── CHALLENGE PLAY SCREEN ──────────────────────────────────────── */
const ChallengePlayScreen = ({challenge, user, entry, onSubmit, onBack, lang="en"}) => {
const t = LANG[lang]||LANG.en;
const cardAreaRef = React.useRef(null);
const [questions] = useState(()=> entry?.questions || pickRandom(challenge.questionPool||[], 4));
const [answers, setAnswers] = useState(entry?.answers||{});
const [phase, setPhase] = useState(entry?.locked?"locked":"play");
const deadline = challenge.entryDeadline;
const pastDeadline = deadline && new Date(deadline) < new Date();
const answeredCount = Object.keys(answers).length;
const allAnswered = questions.every(q=>answers[q.id]);
const handleAnswer = (qId, choice) => {
setAnswers(prev=>{
const next = {...prev, [qId]:choice};
if(Object.keys(next).length===questions.length)
setTimeout(()=>setPhase("review"), 350);
return next;
});
};
const handleReset = (qId) => {
setAnswers(prev=>{ const n={...prev}; delete n[qId]; return n; });
setPhase("play");
};
const Dots = () => (
← PICK THIS
{question.answers[0]}
PICK THIS →
{question.answers[1]}
{/* Progress stripe at bottom */}
{/* Meta bar */}
{question.matchLabel}
{index+1}/{total}
{/* Market */}
{question.marketName}
{/* Question */}
{question.question}
{/* Options footer */}
commit("left")}>
← SWIPE
{question.answers[0]}
commit("right")}>
SWIPE →
{question.answers[1]}
{questions.map(q=>(
))}
);
/* ── LOCKED VIEW ── */
if(phase==="locked") return (
{challenge.name}
🔒 LOCKED
YOUR PICKS
{questions.map(q=>{
const ans=entry?.answers?.[q.id]||"—";
const isA=ans===q.answers[0];
const c=isA?"var(--cyan)":"var(--purple)";
return(
{q.marketName} · {q.matchLabel}
{q.question}
{ans}
REVIEW PICKS
{challenge.name}
{questions.length} PICKS — TAP ANY TO CHANGE
{questions.map(q=>{
const ans=answers[q.id];
const color=ans===q.answers[0]?"var(--cyan)":"var(--purple)";
return(
{handleReset(q.id);}}
style={{display:"flex",justifyContent:"space-between",alignItems:"center",
padding:"13px 14px",marginBottom:8,background:"rgba(0,0,0,0.35)",
border:"1px solid var(--border)",cursor:"pointer",position:"relative",overflow:"hidden"}}>
);
})}
{!pastDeadline&&(
{q.marketName} · {q.matchLabel}
{q.question}
{ans}
✎ CHANGE
Cannot be changed after locking
{/* Diagonal stripes style */}
{/* Shine sweep */}
{/* Edge glow */}
{isTop ? (
<>
) : (
<>
);
};
const StickerCard = ({packType, challenge}) => {
const cfg = PACK_CONFIG[packType];
const sticker = challenge?.sticker || {};
const W=260, H=364, r=12;
const split = 85;
const sp = Math.round(H * split / 100); // 309px — character shows 85% height
const sceneRef = React.useRef(null);
const cardRef = React.useRef(null);
const MAX_RY=20, MAX_RX=16;
React.useEffect(()=>{
const scene=sceneRef.current, card=cardRef.current;
if(!scene||!card) return;
let dragging=false, ox=0, oy=0;
const applyTilt=(ry,rx)=>{ card.style.animation="none"; card.style.transition="none"; card.style.transform=`rotateY(${ry}deg) rotateX(${-rx}deg)`; };
const resetTilt=()=>{ dragging=false; card.style.transition="transform 0.65s cubic-bezier(.22,.61,.36,1)"; card.style.transform="rotateY(10deg) rotateX(-6deg)";
setTimeout(()=>{ card.style.animation="float-anim 4s ease-in-out infinite"; card.style.transition=""; },700); };
const onMD=(e)=>{ dragging=true; ox=e.clientX||e.touches?.[0]?.clientX||0; oy=e.clientY||e.touches?.[0]?.clientY||0; };
const onMM=(e)=>{ if(!dragging)return; const cx=e.clientX||e.touches?.[0]?.clientX||ox; const cy=e.clientY||e.touches?.[0]?.clientY||oy; applyTilt(Math.max(-MAX_RY,Math.min(MAX_RY,(cx-ox)/2.5)),Math.max(-MAX_RX,Math.min(MAX_RX,(cy-oy)/3))); };
const onMU=()=>{ if(dragging)resetTilt(); };
scene.addEventListener("mousedown",onMD); scene.addEventListener("mousemove",onMM); scene.addEventListener("mouseup",onMU); scene.addEventListener("mouseleave",onMU);
scene.addEventListener("touchstart",onMD,{passive:false}); scene.addEventListener("touchmove",(e)=>{ onMM(e); e.preventDefault(); },{passive:false}); scene.addEventListener("touchend",onMU);
return()=>{ scene.removeEventListener("mousedown",onMD); scene.removeEventListener("mousemove",onMM); scene.removeEventListener("mouseup",onMU); scene.removeEventListener("mouseleave",onMU); };
},[packType]);
const stars4 = Array.from({length:4},(_,i)=>(
★
));
return (
{[...Array(cfg.stars)].map((_,i)=>(
★
))}
{cfg.label}
)}
{/* Z:0 — base gradient */}
{/* Z:4 — background image */}
{/* Z:6 — diagonal stripes */}
{cfg.fx.includes("diagonal")&&(
)}
{/* Z:6 — holo grid (PLATINUM) — static opacity, NO animation (animated opacity breaks preserve-3d) */}
{cfg.fx.includes("holo")&&(
)}
{/* Z:6 — rainbow (PLATINUM) — NO mix-blend-mode to preserve 3D context */}
{cfg.fx.includes("rainbow")&&(
)}
{/* Z:10 — glow orb */}
{/* Z:28 — main illustration, clip-path to show only top portion */}
{sticker.main
?
:
}
{/* Z:20 — frame — covers bottom seam of main */}
DF
MAIN NOT SET
{sticker.frame
? 
: <>
{/* Bottom — individual elements with drop shadows */}
);
};
const StickerPack = ({packType, challenge, onOpen}) => {
const [stage, setStage] = useState(0); // 0=closed 1=tearing 2=hero
const cfg = PACK_CONFIG[packType];
const confColors = {
BRONZE: ["#e8a050","#cd7020","#ffd89b"],
SILVER: ["#d8d8d8","#fff","#888"],
GOLD: ["#ffd700","#ffe566","#a07800"],
PLATINUM:["#c0b0ff","#8060d0","#e0d4ff","#fff"],
}[packType]||["#fff"];
const TIER_FILTER = {
BRONZE: "sepia(0.9) hue-rotate(350deg) saturate(2.2) brightness(0.85)",
SILVER: "brightness(1.0) saturate(0.85)",
GOLD: "sepia(1) hue-rotate(5deg) saturate(3.5) brightness(1.0)",
PLATINUM:"sepia(0.6) hue-rotate(230deg) saturate(2.8) brightness(1.05)",
}[packType]||"none";
const open = () => {
if(stage!==0) return;
setStage(1); // shake + tear
setTimeout(()=>{ setStage(2); onOpen&&onOpen(); }, 750);
};
const W=280, H=392;
const imgStyle = {
width:W, height:H, display:"block",
mixBlendMode:"multiply",
filter:TIER_FILTER,
borderRadius:10,
};
return (
{[["top","left"],["top","right"],["bottom","left"],["bottom","right"]].map(([v,h])=>(
))}
}
{/* Z:34 — shimmer sweep */}
{/* Z:38 — UI: badge top-left, stars top-right, name+desc bottom */}
{cfg.cardLabel.toUpperCase()}
{stars4}
{sticker.charName||"PLAYER"}
{challenge?.name&&
{challenge.name}
}
{stage<=1 && (
<>
{/* Pack visual */}
{
// Save card to user collection then go to done
onSaveCard&&onSaveCard({
id:uid(), packType:pack, challenge,
savedAt:now(),
});
setPhase("done");
}}/>
);
// ── DONE PHASE — full screen ──────────────────────────────────────
if(phase==="done") return (
MY CARDS →
VIEW MY CARDS →
BACK TO ARENA
);
return (
);
};
/* ─── ROOT APP ───────────────────────────────────────────────────── */
/* ─── MY CARDS SCREEN ───────────────────────────────────────────── */
const MyCardsScreen = ({cards, onBack, lang="en"}) => {
const t = LANG[lang]||LANG.en;
const [selected, setSelected] = useState(null);
const tierOrder = {PLATINUM:0, GOLD:1, SILVER:2, BRONZE:3};
const sorted = [...(cards||[])].sort((a,b)=>(tierOrder[a.packType]??9)-(tierOrder[b.packType]??9));
if(selected) return (
);
return (
{sorted.length===0 ? (
) : (
{/* Outer wrapper — position:relative but NO filter (filter creates stacking context
that traps mix-blend-mode:screen of the logo inside it) */}
)}
{stage===2 && (
)}
);
};
/* ─── RESULT SCREEN ──────────────────────────────────────────────── */
const ResultScreen = ({challenge, entry, correctAnswers, onBack, onCollect, onSaveCard, onGoMyCards, onToast}) => {
const resultRef = React.useRef(null);
const {correct, tier} = calcScore(entry, correctAnswers);
const reward = calcReward(challenge.cost, tier.multiplier);
const gained = reward - challenge.cost;
const pack = tier.pack;
const [phase, setPhase] = useState("result"); // result | pack | done
const cfg = pack ? PACK_CONFIG[pack] : null;
React.useEffect(()=>{
if(!onToast) return;
if(correct===0) onToast("Better luck next time!","info");
else onToast("Congratulations, go check your prize!","success");
},[]);
const scoreColors = ["rgba(255,255,255,0.4)","#cd7f32","#c0c0c0","#ffd700","#b0c4ff"];
const scoreColor = scoreColors[correct] || scoreColors[0];
// ── PACK PHASE — full screen, no scroll wrapper ──────────────────
if(phase==="pack") return (
{/* Pack halves — filter here, SEPARATE from logo */}
{/* Label */}
{/* Bottom half — drops down */}
{/* Top half — flies up-left */}
{/* Perforated tear line */}
{stage===0&&}
{/* LOGO — sibling of the filter div, composites against page background directly.
mix-blend-mode:screen: black→transparent, coloured text→visible */}
{cfg.label} PACK
{stage===1?"OPENING...":"TAP TO OPEN ↑"}
NEW STICKER UNLOCKED
← DRAG TO ROTATE →
YOU EARNED
+◈{reward} · {cfg?.label||""} PACK
SAVED TO COLLECTION
{pack} STICKER
← DRAG TO ROTATE →
{/* Header */}
);
};
/* ─── ADMIN PANEL ────────────────────────────────────────────────── */
const AdminPanel = ({users,arenas,challenges,entries,dailyDrop,avatars,onBack,onSetDailyDrop,onAdHocDrop,onCreateArena,onToggleArena,onDeleteArena,onCreateChallenge,onToggleChallenge,onDeleteChallenge,onGradeChallenge}) => {
const [tab,setTab]=useState("dashboard");
const [dropAmt,setDropAmt]=useState(String(dailyDrop));
const [adUser,setAdUser]=useState(""); const [adAmt,setAdAmt]=useState(""); const [adMsg,setAdMsg]=useState("");
const [aName,setAName]=useState(""); const [aDesc,setADesc]=useState(""); const [aColor,setAColor]=useState("#ffffff"); const [aImage,setAImage]=useState(null);
const [showCreator,setShowCreator]=useState(false);
const [gradingCh,setGradingCh]=useState(null);
const [fetchStatus,setFetchStatus]=useState(null);
const [gradeAnswers,setGradeAnswers]=useState({}); // {questionId: correctAnswer}
const handleArenaImageUpload=(e)=>{
const file=e.target.files[0];
if(!file)return;
const reader=new FileReader();
reader.onload=(ev)=>setAImage(ev.target.result);
reader.readAsDataURL(file);
};
const TABS=[{id:"dashboard",l:"DASHBOARD"},{id:"drop",l:"REWARDS"},{id:"arenas",l:"ARENAS"},{id:"challenges",l:"CHALLENGES"},{id:"players",l:"PLAYERS"}];
return (
RESULT
{challenge.name}
{phase==="result"&&(
{/* Score hero */}
{/* Score breakdown */}
)}
{/* CTA */}
{pack?(
{ onCollect&&onCollect(reward); setPhase("pack"); }}
style={{width:"100%",padding:"16px",fontSize:12,letterSpacing:"0.12em"}}>
COLLECT & OPEN PACK
):(
{ onCollect&&onCollect(0); onBack(); }}
variant="ghost" style={{width:"100%",padding:"14px",fontSize:11}}>
BACK TO ARENA
)}
)}
{correct}/{(entry?.questions||[]).length}
{tier.label}
{(entry?.questions||[]).map(q=>{
const myAns = entry?.answers?.[q.id];
const correct_ans = correctAnswers?.[q.id];
const isRight = myAns && correct_ans && myAns===correct_ans;
const hasResult = !!correct_ans;
return(
);
})}
{/* Reward box */}
{hasResult?(isRight?"✓":"✗"):"—"}
{q.marketName}
{q.question}
Your: {myAns||"—"}
{correct_ans&&!isRight&&(
✓ {correct_ans}
)}
REWARD SUMMARY
0?14:0}}>
{pack&&(
ENTRY
◈{challenge.cost}
RETURN
0?"var(--cyan)":"var(--text-dim)"}}>
◈{reward}
PROFIT
0?"var(--cyan)":gained===0?"var(--text)":"var(--purple)"}}>
{gained>0?"+":""}◈{gained}
+ {pack} STICKER PACK
1 exclusive sticker inside
⚙ BACKOFFICE
{TABS.map(t=>(
))}
{tab==="dashboard"&&(
)}
{tab==="drop"&&(
onSetDailyDrop(parseInt(dropAmt)||0)} style={{width:"100%"}}>UPDATE DROP
{onAdHocDrop(adUser||null,parseInt(adAmt)||0,adMsg);setAdAmt("");setAdMsg("");setAdUser("");}} variant="danger" style={{width:"100%"}}>EXECUTE DROP
)}
{tab==="arenas"&&(
{if(!aName)return;onCreateArena({id:uid(),name:aName.toUpperCase(),desc:aDesc,color:aColor,imageUrl:aImage||null,active:true});setAName("");setADesc("");setAColor("#ffffff");setAImage(null);}} style={{width:"100%"}}>CREATE ARENA
)}
{tab==="challenges"&&(
{[["PLAYERS",users.length,"var(--cyan)"],["ARENAS",arenas.filter(a=>a.active).length,"var(--purple)"],
["ACTIVE CHALLENGES",challenges.filter(c=>c.active).length,"var(--text-bright)"],["DAILY REWARD",`◈${dailyDrop}`,"var(--text-bright)"]].map(([k,v,c])=>(
))}
{k}
{v}
RECENT AGENTS
{users.slice(-5).reverse().map(u=>(
{avatars.find(a=>a.id===u.avatarId)?.emoji||"👤"}
))}
{u.username}
{getRank(u.xp||0).icon} {getRank(u.xp||0).name} · {(u.xp||0).toLocaleString()} XP
◈ DAILY REWARD CONFIG
Agents receive coins + +{XP_CLAIM} XP per daily claim.
⚡ MANUAL REWARD
TARGET
+ CREATE ARENA
ARENA IMAGE
{aImage&&(
)}
{arenas.map(a=>(
onToggleArena(a.id)} variant={a.active?"ghost":"secondary"} size="sm">{a.active?"DISABLE":"ENABLE"}
onDeleteArena(a.id)} variant="danger" size="sm">DEL
))}
{a.code}
{a.name}
{gradingCh ? (
// GRADING INTERFACE
{/* ── FETCH RESULTS button ── */}
{
setFetchStatus("loading");
try {
const questions = (gradingCh.questionPool||[]).slice(0,8);
const teamPairs = [...new Set(questions.map(q=>`${q.teamA?.name||q.answers[0]}|${q.teamB?.name||q.answers[1]}`))];
const pandaResults = {};
for(const pair of teamPairs){
const [tA,tB] = pair.split("|");
try {
const fuzzyT = (a,b) => {
a=(a||"").toLowerCase().replace(/team |esports/g,"").trim();
b=(b||"").toLowerCase().replace(/team |esports/g,"").trim();
return a.includes(b)||b.includes(a)||a.slice(0,4)===b.slice(0,4);
};
const matches = await pandaFetch(
`/csgo/matches/past?sort=-scheduled_at&page[size]=50&filter[status]=finished&search[name]=${encodeURIComponent(tA)}`
);
const cutoff = new Date(); cutoff.setDate(cutoff.getDate()-60);
const found = Array.isArray(matches) && matches.find(m=>{
if(m.status!=="finished") return false;
const d=m.scheduled_at||m.begin_at||m.original_scheduled_at;
if(d && new Date(d)o.opponent?.name||"");
return names.some(n=>fuzzyT(n,tA)) && names.some(n=>fuzzyT(n,tB));
});
if(found) pandaResults[pair]=found;
else console.log("PandaScore: no recent match for",tA,"vs",tB);
} catch(e){ console.warn("PandaScore error:",e.message); }
}
const filled = {...gradeAnswers};
let autoFilled = 0;
for(const q of questions){
const tA=q.teamA?.name||q.answers[0];
const tB=q.teamB?.name||q.answers[1];
const fuzzy=(a,b)=>{
a=(a||"").toLowerCase().replace(/team |esports/g,"").trim();
b=(b||"").toLowerCase().replace(/team |esports/g,"").trim();
return a.includes(b)||b.includes(a);
};
const pairKey=Object.keys(pandaResults).find(k=>{
const [ka,kb]=k.split("|");
return (fuzzy(ka,tA)||fuzzy(tA,ka))&&(fuzzy(kb,tB)||fuzzy(tB,kb));
});
if(!pairKey) continue;
const match=pandaResults[pairKey];
const winnerId=match.winner_id;
const opps=match.opponents||[];
const winnerName=opps.find(o=>o.opponent?.id===winnerId)?.opponent?.name;
if(!winnerName) continue;
const winnerIsA=fuzzy(q.answers[0],winnerName);
const scores=match.results||[];
const sA=scores[0]?.score??0, sB=scores[1]?.score??0;
const games=match.games||[];
const marketLow=(q.marketName||"").toLowerCase();
if(marketLow.includes("match winner")){
filled[q.id]=winnerIsA?q.answers[0]:q.answers[1]; autoFilled++;
} else if(marketLow.includes("map 1 winner")&&games[0]?.winner_id){
const mn=opps.find(o=>o.opponent?.id===games[0].winner_id)?.opponent?.name;
if(mn){filled[q.id]=fuzzy(q.answers[0],mn)?q.answers[0]:q.answers[1];autoFilled++;}
} else if(marketLow.includes("map 2 winner")&&games[1]?.winner_id){
const mn=opps.find(o=>o.opponent?.id===games[1].winner_id)?.opponent?.name;
if(mn){filled[q.id]=fuzzy(q.answers[0],mn)?q.answers[0]:q.answers[1];autoFilled++;}
} else if(marketLow.includes("total maps")){
const total=sA+sB;
const ans=q.answers.find(a=>(total>=3&&a.toLowerCase().includes("yes"))||(total<3&&a.toLowerCase().includes("no")));
if(ans){filled[q.id]=ans;autoFilled++;}
} else if(marketLow.includes("overtime")&&games[0]){
const rc=games[0].round_count??games[0].rounds_played??null;
if(rc!==null){const ans=rc>30?q.answers.find(a=>a.toLowerCase()==="yes"):q.answers.find(a=>a.toLowerCase()==="no");if(ans){filled[q.id]=ans;autoFilled++;}}
} else if(marketLow.includes("rounds")&&games[0]){
const rc=games[0].round_count??games[0].rounds_played??null;
if(rc!==null){const ans=rc>26.5?q.answers.find(a=>a.toLowerCase().includes("over")):q.answers.find(a=>a.toLowerCase().includes("under"));if(ans){filled[q.id]=ans;autoFilled++;}}
}
}
setGradeAnswers(filled);
setFetchStatus(autoFilled>0
? `✓ Auto-filled ${autoFilled}/${questions.length} answers from PandaScore. Review and complete the rest.`
: "No matching finished matches found on PandaScore (Tier S only). Fill manually below."
);
} catch(e){
setFetchStatus("PandaScore error: "+e.message+". Fill manually below.");
}
}} variant="secondary" style={{width:"100%",marginBottom:6}}>
⟳ FETCH RESULTS FROM PANDASCORE
{fetchStatus&&(
))}
{
const answered=Object.keys(gradeAnswers).length;
const total=(gradingCh.questionPool||[]).slice(0,8).length;
if(answered
✓ PUBLISH RESULTS
) : !showCreator ? (
<>
setShowCreator(true)} style={{width:"100%",marginBottom:14}}>+ CREATE CHALLENGE
{onCreateChallenge(ch);setShowCreator(false);}}
onCancel={()=>setShowCreator(false)}
/>
)}
)}
{tab==="players"&&(
SCORE — {gradingCh.name}
{gradingCh.name}
{fetchStatus==="loading"?"Fetching results...":fetchStatus}
)}
MANUAL RESULTS — select correct answer for each question:
{(gradingCh.questionPool||[]).slice(0,8).map((q,i)=>( {q.marketName} · {q.matchLabel}
{q.question}
{q.answers.map(opt=>{
const sel=gradeAnswers[q.id]===opt;
return(
);
})}
{challenges.map(ch=>{
const arena=arenas.find(a=>a.id===ch.arenaId);
const mCount=(ch.matches||[]).length;
const entryCount=(entries||[]).filter(e=>e.challengeId===ch.id&&e.locked).length;
return (
);
})}
) : (
{arena?.code}
{ch.name}
◈{ch.cost} entry · up to ◈{Math.round(ch.cost*2.5)}
{mCount>0&&{mCount} matches}
{entryCount>0&&{entryCount} players}
{ch.graded&&SCORED}
{ch.active&&!ch.graded&&(
{setGradingCh(ch);setGradeAnswers(ch.correctAnswers||{});}} variant="secondary" size="sm">SCORE
)}
onToggleChallenge(ch.id)} variant={ch.active?"ghost":"secondary"} size="sm">{ch.active?"OFF":"ON"}
onDeleteChallenge(ch.id)} variant="danger" size="sm">DEL
{users.map(u=>(
))}
)}
{avatars.find(a=>a.id===u.avatarId)?.emoji||"👤"}
{u.username}{u.isAdmin&&ADMIN}
{getRank(u.xp||0).icon} {getRank(u.xp||0).name} · {(u.xp||0).toLocaleString()} XP
{selected.challenge?.sticker?.charName||selected.challenge?.name||"STICKER"}
{selected.packType}
← DRAG TO ROTATE →
COLLECTION
MY CARDS
{sorted.length}
{t.noCardsYet}
{t.completeEarn}
{["PLATINUM","GOLD","SILVER","BRONZE"].map(tier=>{
const tierCards=sorted.filter(c=>c.packType===tier);
if(!tierCards.length)return null;
const cfg2=PACK_CONFIG[tier];
return (
)}
);
};
/* ─── SHARE HELPER ───────────────────────────────────────────────── */
const shareToWhatsapp = async (message, captureRef) => {
const fullMsg = `${message}\n${APP_URL}`;
const sendWhatsapp = () => {
window.open(`https://wa.me/?text=${encodeURIComponent(fullMsg)}`,"_blank","noopener,noreferrer");
};
// Try to capture screenshot
if(captureRef?.current && window.html2canvas) {
try {
const canvas = await window.html2canvas(captureRef.current, {
backgroundColor:"#000000",
scale:2,
useCORS:true,
allowTaint:true,
logging:false,
ignoreElements:(el)=>el.tagName==="SCRIPT"
});
// Try Web Share API with image (works on mobile HTTPS)
canvas.toBlob(async(blob)=>{
try {
const file = new File([blob],"dfuse.png",{type:"image/png"});
if(navigator.canShare && navigator.canShare({files:[file]})){
await navigator.share({files:[file], text:fullMsg, title:"DFUSE"});
} else if(navigator.share){
await navigator.share({text:fullMsg, title:"DFUSE", url:APP_URL});
} else {
sendWhatsapp();
}
} catch(e){
// User cancelled share or not supported — fallback
if(e.name!=="AbortError") sendWhatsapp();
}
},"image/png",0.92);
} catch(e){
sendWhatsapp();
}
} else if(navigator.share){
try {
await navigator.share({text:fullMsg, title:"DFUSE", url:APP_URL});
} catch(e){
if(e.name!=="AbortError") sendWhatsapp();
}
} else {
sendWhatsapp();
}
};
const ShareBtn = ({label, message, captureRef, style={}}) => (
);
/* ─── LANGUAGE SELECTOR ──────────────────────────────────────────── */
const LangSelector = ({lang, setLanguage}) => (
);
/* ─── HOW TO PLAY SCREEN ─────────────────────────────────────────── */
const HowToPlayScreen = ({onBack, lang}) => {
const t = LANG[lang]||LANG.en;
const sections = lang==="pt" ? [
{ title:"O QUE É O DFUSE?", items:[
"DFUSE é uma plataforma de picks de esports — você escolhe os resultados antes dos jogos.",
"Não é apostas — é habilidade. Quanto mais você acerta, mais moedas e XP ganha.",
"Complete desafios, suba de rank e colecione figurinhas exclusivas dos jogos.",
]},
{ title:"COMO FUNCIONA?", items:[
"Escolha uma arena e entre em um desafio antes do prazo de inscrição.",
"Você paga uma entrada em moedas e faz seus picks.",
"Confirme seus picks com o botão CONFIRMAR. Após isso, não é possível alterar.",
"Aguarde os resultados. Quando o admin publicar, você vê automaticamente o seu placar.",
]},
{ title:"RECOMPENSAS", items:[
"0/4 acertos → sem recompensa.",
"1/4 acertos → reembolso + 🥉 card pack BRONZE.",
"2/4 acertos → 1.5× moedas + 🥈 card pack SILVER.",
"3/4 acertos → 2× moedas + 🥇 card pack GOLD.",
"4/4 acertos → 2.5× moedas + 💎 card pack PLATINUM.",
]},
{ title:"MOEDAS & XP", items:[
"Comece com 0 moedas — faça o claim diário para receber 100 moedas e 50 XP.",
"Cada desafio participado dá +100 XP, independente do resultado.",
"Use moedas para entrar nos desafios. Ganhe mais acertando os picks.",
"XP acumulado aumenta seu rank: Ghost → Recruit → Operative → ... → Phantom.",
]},
{ title:"FIGURINHAS", items:[
"Ao vencer moedas em um desafio, você recebe um card pack temático.",
"Abra o pack e desbloqueie uma figurinha exclusiva do desafio.",
"Gire a figurinha em 3D antes de salvar na sua coleção.",
"Veja todas as suas figurinhas em MY CARDS.",
]},
{ title:"DICAS", items:[
"Faça o claim diário todos os dias para acumular moedas.",
"Partilhe seus picks com amigos e desafie-os a bater você.",
]},
] : [
{ title:"WHAT IS DFUSE?", items:[
"DFUSE is an esports picks platform — predict match outcomes before games happen.",
"It's not gambling — it's skill. The more you get right, the more coins and XP you earn.",
"Complete challenges, climb the ranks and collect exclusive match sticker cards.",
]},
{ title:"HOW DOES IT WORK?", items:[
"Pick an arena and join a challenge before the entry deadline.",
"Pay an entry fee in coins and make your picks.",
"Lock in your picks. After locking, no changes are allowed.",
"Wait for results. When the admin publishes scores, you see your result instantly.",
]},
{ title:"REWARDS", items:[
"0/4 correct → no reward.",
"1/4 correct → refund + 🥉 BRONZE card pack.",
"2/4 correct → 1.5× coins + 🥈 SILVER card pack.",
"3/4 correct → 2× coins + 🥇 GOLD card pack.",
"4/4 correct → 2.5× coins + 💎 PLATINUM card pack.",
]},
{ title:"COINS & XP", items:[
"Start with 0 coins — do your daily claim for 100 coins and 50 XP.",
"Each challenge gives +100 XP regardless of result.",
"Spend coins to enter challenges. Win more by getting picks right.",
"XP builds your rank: Ghost → Recruit → Operative → ... → Phantom.",
]},
{ title:"STICKER CARDS", items:[
"Win a reward and you get a themed card pack.",
"Open the pack and reveal an exclusive match sticker card.",
"Spin the card in 3D before saving it to your collection.",
"View all your cards in MY CARDS.",
]},
{ title:"TIPS", items:[
"Claim your daily reward every day to stack coins.",
"Share your picks with friends and challenge them to beat your score.",
]},
];
return (
);
};
/* ─── LEADERBOARD SCREEN ─────────────────────────────────────────── */
const LeaderboardScreen = ({currentUser, users, myCards, onBack}) => {
const [search, setSearch] = useState("");
// Sort all users by XP descending
const ranked = [...users]
.filter(u=>!u.isAdmin)
.sort((a,b)=>(b.xp||0)-(a.xp||0))
.map((u,i)=>({...u, pos:i+1}));
const myPos = ranked.find(u=>u.id===currentUser.id)?.pos||1;
const filtered = search.trim()
? ranked.filter(u=>u.username.toLowerCase().includes(search.toLowerCase()))
: ranked;
const cardCount = (userId) => myCards.filter(c=>c.userId===userId||userId===currentUser.id&&c).length;
// For demo: show myCards count for current user, 0 for others (real app would have per-user cards)
const getCards = (u) => u.id===currentUser.id ? myCards.length : (u.cardCount||0);
const Row = ({u, highlight=false}) => {
const rank = getRank(u.xp||0);
const av = u.avatarId;
const isMe = u.id===currentUser.id;
const cards = getCards(u);
const medal = u.pos===1?"🥇":u.pos===2?"🥈":u.pos===3?"🥉":null;
return (
{cfg2.label}·
{tierCards.length}
{tierCards.map(card=>{
const sticker=card.challenge?.sticker||{};
return (
);
})}
setSelected(card)}
style={{background:"rgba(255,255,255,0.04)",border:`1px solid ${cfg2.color1}33`,borderRadius:8,overflow:"hidden",cursor:"pointer",boxShadow:`0 0 12px ${cfg2.glow}33`}}>
);
})}
{/* Position */}
{/* Cards count */}
);
};
const myEntry = ranked.find(u=>u.id===currentUser.id)||{...currentUser,pos:ranked.length+1};
return (
);
};
/* ─── RANKS SCREEN ───────────────────────────────────────────────── */
const RanksScreen = ({user, onBack}) => {
const currentRank = getRank(user.xp||0);
const nextRank = getNextRank(user.xp||0);
const progress = getXPProgress(user.xp||0);
return (
{medal
? {medal}
: #{u.pos}}
{/* Username + rank */}
{u.username.toUpperCase()}
{isMe&&YOU}
{rank.icon} {rank.name}
·
{(u.xp||0).toLocaleString()} XP
CARDS
0?"var(--purple)":"rgba(255,255,255,0.2)"}}>{cards}