{count}

Revealing the winner...

); const WinnerView = ({ royale, share, reset }) => { const winnerOpt = (royale.options || []).find(o => o.id === royale.winnerId) || royale.options[0]; return (

🏆

{royale.question}

{winnerOpt.text}

Vote Breakdown

{(royale.options || []).map(opt => (

{opt.text} {(opt.votes || []).length} votes

))}

🎤 Host AI

"{royale.finalComment || `And there you have it! The people have spoken for ${winnerOpt.text}!`}"

The group has spoken!

Share this in your group chat and settle the debate.

); }; const ShareReadyView = ({ royale, onContinue, share }) => (

✨

Your Royale is ready

Share this link with your group so they can vote.

); const ArenaView = ({ royale, user, castVote, endVoting, fetchCommentary, aiLoading, openCreate, toast, memberList, openProfile, share }) => { const totalVotes = (royale.options || []).reduce((sum, o) => sum + (o.votes || []).length, 0); const userHasVoted = (royale.options || []).some(o => (o.votes || []).includes(user?.id || 'me')); const isCreator = user?.id === royale.creatorId || royale.isDemo || !royale.creatorId; const [selectedOptionId, setSelectedOptionId] = useState(() => { const userVotedOption = (royale.options || []).find(o => (o.votes || []).includes(user?.id || 'me')); return userVotedOption?.id || null; }); const handleCastVote = () => { if (selectedOptionId && !userHasVoted) castVote(selectedOptionId); }; return (

Decision
Royale

{(memberList || []).slice(0, 4).map((m, i) => (

m.handle && openProfile(m.handle)} style={{ width: 34, height: 34, borderRadius: '50%', background: m.avatarUrl ? `url(${m.avatarUrl})` : '#02485A', backgroundSize: 'cover', backgroundPosition: 'center', border: '2px solid #152C44', marginLeft: i > 0 ? -12 : 0, zIndex: 10 - i, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#FFF', fontSize: 14, fontWeight: 'bold', cursor: m.handle ? 'pointer' : 'default' }}> {!m.avatarUrl && (m.displayName?.[0] || 'U')}

))}

{!royale.isDemo && totalVotes === 0 && (

share && share({ title: 'Decision Royale', text: `Vote now: ${royale.question}` })} style={{ background: 'rgba(38, 229, 211, 0.1)', border: '1px dashed #26E5D3', borderRadius: 12, padding: 16, marginBottom: 20, textAlign: 'center', cursor: 'pointer', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, animation: 'popIn 0.4s' }}> 🔗 Invite friends to vote Send this to your group chat so everyone can cast their vote!

)}

{royale.isDemo &&

Live Demo ✨

}

{royale.question}

👇 Select an option and cast your vote

{[...(royale.options || [])].sort((a, b) => (b.votes || []).length - (a.votes || []).length).map((opt, i) => { const hasVotedForThis = (opt.votes || []).includes(user?.id || 'me'); const isSelected = selectedOptionId === opt.id; const percent = totalVotes === 0 ? 0 : ((opt.votes || []).length / totalVotes) * 100; return (

!userHasVoted && setSelectedOptionId(opt.id)} style={{ position: 'relative', background: '#02485A', border: isSelected ? '2px solid #26E5D3' : '2px solid transparent', borderRadius: 14, overflow: 'hidden', minHeight: 64, display: 'flex', alignItems: 'center', padding: '0 16px', animation: hasVotedForThis ? 'pulseGlow 2s infinite' : `popIn 0.3s ease-out forwards ${i * 0.05}s`, opacity: userHasVoted && !hasVotedForThis ? 0.6 : 1, cursor: userHasVoted ? 'default' : 'pointer', marginBottom: 12, boxShadow: isSelected ? '0 0 15px rgba(38, 229, 211, 0.4)' : 'none', transform: isSelected && !userHasVoted ? 'scale(1.02)' : 'scale(1)', transition: 'all 0.2s' }}>

{i === 0 && (opt.votes || []).length > 0 && 🥇} {opt.text} {(opt.votes || []).length}

); })} {!userHasVoted ? ( ) : (

✅ Vote cast

Waiting for the group...

)}

🎤 Live Commentary

"{royale.commentary[(royale.commentary || []).length - 1]}"

{isCreator && ( )}

{toast && (

{toast}

)}

); }; const CreateView = ({ onStart, onCancel }) => { const [q, setQ] = useState(''); const [opts, setOpts] = useState(['', '']); const [aiMsg, setAiMsg] = useState("Initializing new Royale. Awaiting parameters..."); useEffect(() => { if ((q || []).length > 5) setAiMsg(`Oh, a vote on "${q}"? I predict chaos.`); else setAiMsg("Initializing new Royale. Awaiting parameters..."); }, [q]); const handleAddOpt = () => { if ((opts || []).length < 6) setOpts([...opts, '']); }; const updateOpt = (i, val) => { const n = [...opts]; n[i] = val; setOpts(n); }; const removeOpt = (i) => setOpts((opts || []).filter((_, idx) => idx !== i)); const handleStart = () => { const validOpts = Array.from(new Set((opts || []).map(o => o.trim()).filter(o => (o || []).length > 0))); if (q.trim() && (validOpts || []).length >= 2) onStart(q, validOpts); }; return (

Create Royale

🤖

{aiMsg}

The Question setQ(e.target.value)} placeholder="e.g., Where are we eating?" style={{ width: '100%', background: '#02485A', border: '1px solid rgba(38, 229, 211, 0.2)', color: '#FFF', padding: 16, borderRadius: 14, fontSize: 18, marginBottom: 24, outline: 'none', boxSizing: 'border-box' }} /> The Options {(opts || []).map((o, i) => (

updateOpt(i, e.target.value)} placeholder={`Option ${i+1}`} style={{ flex: 1, background: '#02485A', border: '1px solid rgba(38, 229, 211, 0.2)', color: '#FFF', padding: 16, borderRadius: 14, fontSize: 16, outline: 'none', boxSizing: 'border-box' }} /> {(opts || []).length > 2 && ( )}

))} {(opts || []).length < 6 && ( )}

); }