{/* Animated background overlay */}

{/* HEADER */}

🎭 Lie Reveal

The Ultimate Icebreaker Game

{isMultiplayer && ( )}

{/* PHASE 1: CRAFTING */} {currentView === 'crafting' && (

✨

Craft Your Truths

Write 3 statements about yourself. Mark which one is the LIE.

{/* Friendly Disclaimer */}

⚠️

Keep it fun & appropriate!

Please don't include anything incriminating, illegal, or that could get you in trouble. This is an icebreaker game - keep it light and fun! 🎉

{(myStatements || []).map((stmt, i) => (

{ const newStmts = [...myStatements]; newStmts[i].text = e.target.value; newStmts[i].isLie = (i === selectedLieIndex); setMyStatements(newStmts); }} />

))}

{isMultiplayer && (

👥 {realMemberCount} {realMemberCount === 1 ? 'person' : 'people'} in this session

)}

)} {/* PHASE 2: FEEDBACK */} {currentView === 'feedback' && feedbackState && (

{feedbackState.isCorrect ? '🎉' : '😅'}

{feedbackState.isCorrect ? 'You got it! 🎯' : 'Not quite! 😅'}

{feedbackState.isCorrect ? 'Great detective work! 🕵️' : 'Better luck next time!'}

The lie was:

{(feedbackState.card.statements || []).map((stmt, i) => { // Calculate statistics for this statement const cardVotes = votes[feedbackState.card.userId] || {}; const totalVoters = Object.keys(cardVotes || {}).length; const votesForThisStatement = Object.values(cardVotes || {}).filter((voteIndex: any) => voteIndex === i).length; const percentage = totalVoters > 0 ? Math.round((votesForThisStatement / totalVoters) * 100) : 0; return (

{stmt.text}

{i === feedbackState.actualLieIndex && 🤥} {i === feedbackState.pickedIndex && !feedbackState.isCorrect && 👈}

{/* Statistics */} {totalVoters > 0 && (

{votesForThisStatement} {votesForThisStatement === 1 ? 'person' : 'people'} guessed this ({percentage}%)

out of {totalVoters} {totalVoters === 1 ? 'voter' : 'voters'}

)}

); })}

)} {/* PHASE 3: VOTING */} {currentView === 'voting' && currentCard && (

e.currentTarget.style.display = 'none'} /> {!currentCard.userAvatar &&

👤

}

{currentCard.userName}'s Card

🔍 Spot the lie!

{(currentCard.statements ?? []).map((stmt, i) => ( ))}

{(cardsToShow || []).length > 1 ? `📊 ${cardsToShow.length - 1} more ${cardsToShow.length - 1 === 1 ? 'card' : 'cards'} to see` : '📊 Last card!'}

)} {/* PHASE: VIEW OWN CARD (when alone) */} {currentView === 'viewOwnCard' && mySubmission && (

✨

Your Card

Here's what you submitted

{(mySubmission.statements || []).map((stmt, i) => { const isLie = stmt.isLie; return (

{stmt.text} {isLie && 🤥}

); })}

)} {/* PHASE: WAITING */} {currentView === 'waiting' && (

⏳

Waiting for cards...

Waiting for others to submit their cards. Check back soon! 🎯

)} {/* PHASE: SUMMARY (scrollable view of all cards) */} {currentView === 'summary' && (

📋

All Cards

Scroll through to see what everyone put! 🎯

{realSubmissions .map((submission) => { const myVote = votes[submission.userId]?.[myId]; const actualLieIndex = (submission.statements || []).findIndex(s => s.isLie); const wasCorrect = myVote !== undefined && myVote === actualLieIndex; const isMyCard = submission.userId === myId; return (

e.currentTarget.style.display = 'none'} /> {!submission.userAvatar &&

👤

}

{submission.userName}

{isMyCard ? ( ✨ Your card ) : myVote !== undefined && ( {wasCorrect ? '✓ You got it right!' : '✗ You guessed wrong'} )}

{(submission.statements || []).map((stmt, i) => (

{stmt.text}

{i === actualLieIndex && 🤥} {i === myVote && myVote !== actualLieIndex && 👈}

))}

); }) }

)} {/* PHASE 5: RESULTS */} {currentView === 'results' && (

🏆

Final Results

Game Complete! 🎉

{submissions .map(s => ({ ...s, score: getScore(s.userId) })) .sort((a, b) => b.score - a.score) .map((p, i) => (

#{i + 1}

{p.userName}

{p.score} pts

The Lie:

"{p.statements.find(s => s.isLie)?.text}"

)) }

{/* Restart Logic */}

)}

); }