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

0.5 ? 24 : 16, animation: `fall ${2 + Math.random() * 3}s linear forwards`, animationDelay: `${Math.random() * 2}s`, }}> {['🎉', '✨', '⭐', '💖', '🍭'][Math.floor(Math.random() * 5)]}

))}

); // ═══════════════════════════════════════════════════════════════ // 📱 VIEW: OWNER DASHBOARD (My Secrets) // ═══════════════════════════════════════════════════════════════ const renderOwnerView = () => (

{/* Toggle Header */}

{['quiz', 'results'].map(tab => ( ))}

{activeTab === 'quiz' ? ( <>

Edit My Secrets 🤫

{(questions || []).map((q, i) => (

{editingId === q.id ? (

Question setTempEdit({ ...tempEdit, text: e.target.value })} style={{ padding: 12, borderRadius: 8, border: `2px solid ${theme.primary}`, fontSize: 16, outline: 'none' }} autoFocus /> Answer setTempEdit({ ...tempEdit, answer: e.target.value })} style={{ padding: 12, borderRadius: 8, border: '2px solid #ddd', fontSize: 16, outline: 'none' }} />

) : (

{ setEditingId(q.id); setTempEdit(q); }} style={{ flex: 1, cursor: 'pointer' }}>

{i + 1}. {q.text}

Answer: {q.answer}

)}

))} {editingId !== 'new' && ( )}

) : (

{(submissions || []).length === 0 ? (

👻

No guesses yet!

Share your quiz to start the game.

) : (

{(submissions || []).sort((a,b) => b.score - a.score).map((sub, i) => (

{i === 0 ? '👑' : i === 1 ? '🥈' : i === 2 ? '🥉' : '👤'}

{sub.displayName}

{new Date(sub.timestamp).toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}

{sub.score}/{(questions || []).length}

))}

)}

); // ═══════════════════════════════════════════════════════════════ // 🎲 VIEW: PLAYER (FRIEND) GUESSING // ═══════════════════════════════════════════════════════════════ const renderPlayerView = () => (

{!hasSubmitted ? ( <>

How well do you know {isOwner ? 'Yourself' : 'the Host'}?

Make your best guesses!

{(questions || []).map((q, i) => (

{i + 1}. {q.text}

setMyGuesses({ ...myGuesses, [q.id]: e.target.value })} style={{ width: '100%', padding: 16, borderRadius: 12, border: '2px solid rgba(0,0,0,0.1)', fontSize: 16, boxSizing: 'border-box', backgroundColor: 'rgba(255,255,255,0.8)', outline: 'none' }} />

))} ) : (

{calculateScore(myGuesses) === (questions || []).length ? '🤯' : calculateScore(myGuesses) >= (questions || []).length / 2 ? '🎉' : '🙈'}

You scored {calculateScore(myGuesses)}/{(questions || []).length}!

{calculateScore(myGuesses) === (questions || []).length ? 'Absolute BFF Status!' : calculateScore(myGuesses) === 0 ? 'Do you even know them?!' : 'Not bad, not bad.'}

Answer Reveal

{(questions || []).map((q, i) => { const guess = (myGuesses[q.id] || '').toLowerCase().trim(); const answer = (q.answer || '').toLowerCase().trim(); const isCorrect = guess && answer && (guess === answer || (answer || []).includes(guess) || (guess || []).includes(answer)); return (

{q.text}

{isCorrect ? '✅' : '❌'} {myGuesses[q.id]}

{!isCorrect && (

Real answer: {q.answer}

)}

); })}

)}

); // ═══════════════════════════════════════════════════════════════ // 🚀 MAIN RENDER // ═══════════════════════════════════════════════════════════════ if (isDrumrolling) { return (

🥁

Checking results...

); } return (

{showConfetti && } {/* Header */}

{isOwner ? '👑' : '🕵️'}

{instanceName || 'HOW WELL DO YOU KNOW ME'}

{isOwner ? 'My Quiz' : 'Guessing Game'}

{!isOwner && (

Playing

)}

{/* Content Area */}

{isOwner ? renderOwnerView() : renderPlayerView()}

{/* Global Style overrides for font */}

); }