{/* 🎉 CONFETTI */} {confetti && (

{Array.from({ length: 50 }).map((_, i) => (

{['🎉', '🍕', '💵', '🌮', '🍗'][Math.floor(Math.random() * 5)]}

))}

)} {/* 🏆 HEADER */}

{isMultiplayer ? 'LIVE MULTIPLAYER' : 'SOLO MODE'}

FEAST FACTION

{phase === 'SUBMISSION' && 'Submit your food recommendation'} {phase === 'VOTING' && 'Vote on your favorite'} {phase === 'RESULTS' && 'Results are in!'} {phase === 'RESTART' && 'Time to restart!'}

{/* 📊 STATUS BAR */}

MEMBERS

{totalMembers} Active

{phase === 'SUBMISSION' && (

SUBMISSIONS

{(submissions || []).length}

)} {phase === 'VOTING' && (

VOTES

{(votes || []).length}

)}

{/* 🎮 MAIN CONTENT */}

{/* RESTART JOKE MODAL */} {showRestartJoke && phase === 'RESTART' && (

😅

{randomJoke}

Group size determined: {groupSize || totalMembers} people

)} {/* SUBMISSION PHASE */} {phase === 'SUBMISSION' && ( <> {!hasUserSubmitted && !hasUserSkipped && (

Submit Your Food Recommendation

setSubmissionText(e.target.value)} placeholder="e.g., Pizza, Italian restaurant, McDonald's..." style={{ width: '100%', padding: '12px', borderRadius: 8, border: 'none', backgroundColor: '#1a1a1a', color: '#fff', fontSize: 16, marginBottom: 12 }} />

)} {hasUserSubmitted && (

Your Submission

{userSubmission?.text}

)} {hasUserSkipped && (

You skipped. Waiting for others...

)} {/* Incubation Timer */} {(submissions || []).length > 0 && (

Incubation Period

{!incubationComplete && !allBypassed && ( <>

{formatTimeRemaining(timeRemaining)} remaining

{(bypassVotes || []).length}/{totalMembers} want to bypass

{!(bypassVotes || []).includes(user?.id) && ( )} )} {(incubationComplete || allBypassed) && (

✓ Ready to vote!

)}

)} {/* Submissions List */} {(submissions || []).length > 0 && (

Submissions ({(submissions || []).length})

{(submissions || []).map((sub) => { const submitter = (memberList || []).find(m => m.id === sub.userId); return (

{sub.text}

by {submitter?.displayName || 'Someone'}

); })}

)} )} {/* VOTING PHASE */} {phase === 'VOTING' && ( <> {(submissions || []).length === 0 ? (

😅

No submissions to vote on. Everyone skipped!

) : ( <>

Vote on your favorite ({(votes || []).length}/{(submitters || []).length} submitters voted)

{(submissions || []).map((sub) => { const voteCount = voteCounts[sub.id] || 0; const myVote = user && (votes || []).some(v => (typeof v === 'object' ? v.submissionId : null) === sub.id && (typeof v === 'object' ? v.userId : v) === user.id ); const hasUserVoted = user && (votes || []).some(v => (typeof v === 'object' ? v.userId : v) === user.id ); const userSubmitted = (submitters || []).includes(user?.id); const canVote = userSubmitted && !hasUserVoted; return (

canVote && handleVote(sub.id)} style={{ backgroundColor: THEME.surface, borderRadius: 16, padding: 16, marginBottom: 12, border: myVote ? `2px solid ${THEME.primary}` : '2px solid transparent', cursor: canVote ? 'pointer' : 'default', opacity: hasUserVoted && !myVote ? 0.6 : 1 }} >

{sub.text}

{allSubmittersVoted && (

{voteCount} vote{voteCount !== 1 ? 's' : ''}

)}

{myVote && (

✓

)}

); })} )} )} {/* RESULTS PHASE */} {phase === 'RESULTS' && ( <> {leaderState.hasMajority && leaderState.leader && (

🎉 $50 FREE FOR FOOD! 🎉

)}

Final Results

{(submissions || []).map((sub) => { const voteCount = voteCounts[sub.id] || 0; const percent = totalMembers > 0 ? (voteCount / totalMembers) * 100 : 0; const isWinner = leaderState.leader?.id === sub.id && leaderState.hasMajority; return (

{sub.text}

{Math.round(percent)}%

{voteCount} vote{voteCount !== 1 ? 's' : ''}

); })} )}

{/* 🦶 BOTTOM ACTION BAR */} {isMultiplayer && phase !== 'RESTART' && (

)} {/* 🏆 WINNER MODAL */} {showWinnerModal && leaderState.leader && (

🎉

{leaderState.leader.text.toUpperCase()} WINS!

$50 FREE FOR FOOD

)}

); }