{meme.topText}

{meme.bottomText}

); return (

{/* Confetti Overlay */} {showConfetti && (

{[...Array(30)].map((_, i) => (

0.5 ? 10 : 15, height: Math.random() > 0.5 ? 10 : 15, backgroundColor: Math.random() > 0.5 ? '#BF5700' : '#FFFFFF', borderRadius: Math.random() > 0.5 ? '50%' : '2px', animation: `fall ${1 + Math.random() * 2}s linear forwards`, animationDelay: `${Math.random() * 0.5}s` }} /> ))}

)} {/* Header */}

🤘 TEXAS MEMES

{typeof share === 'function' && view === 'gallery' && ( )}

{/* Content Area */}

{view === 'gallery' && (

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

🐂

No memes yet. Be the first!

) : ( (memes || []).map((meme, idx) => { const memeReactions = reactionsMap[meme.id] || {}; const reactionCounts = Object.values(memeReactions || {}).reduce((acc, emoji) => { acc[emoji] = (acc[emoji] || 0) + 1; return acc; }, {}); return (

{/* Attribution */}

meme._user?.handle && openProfile && openProfile(meme._user.handle)} style={{ width: 32, height: 32, borderRadius: '50%', backgroundColor: '#eee', backgroundImage: meme._user?.profileImageUrl ? `url(${meme._user.profileImageUrl})` : 'none', backgroundSize: 'cover', display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: meme._user?.handle ? 'pointer' : 'default', border: '2px solid #BF5700' }}> {!meme._user?.profileImageUrl && 👤}

{meme._user?.displayName || 'Anonymous'}

{meme.isDemo &&

Demo Template

}

{/* The Meme */} {renderMemeCard(meme)} {/* Share + Reactions Bar */}

{typeof share === 'function' && ( )} {(UT_EMOJIS || []).map(emoji => { const count = reactionCounts[emoji] || 0; const iReacted = memeReactions[user.id] === emoji; return ( ); })}

); }) )}

)} {view === 'create' && (

Craft Meme

{/* Canvas Preview */}

{renderMemeCard(draftMeme, true)}

{/* Image Tools */}

{/* Text Inputs */}

setDraftMeme({...draftMeme, topText: e.target.value.toUpperCase()})} placeholder="TOP TEXT" style={{ width: '100%', padding: 16, borderRadius: 12, border: '2px solid #ddd', fontSize: 16, fontWeight: 600, textTransform: 'uppercase', boxSizing: 'border-box' }} /> setDraftMeme({...draftMeme, bottomText: e.target.value.toUpperCase()})} placeholder="BOTTOM TEXT" style={{ width: '100%', padding: 16, borderRadius: 12, border: '2px solid #ddd', fontSize: 16, fontWeight: 600, textTransform: 'uppercase', boxSizing: 'border-box' }} />

{/* AI Suggestion */} {ai && ( )}

)} {view === 'templates' && (

Template Vault

{(UT_TEMPLATES || []).map(t => (

{ setDraftMeme(prev => ({...prev, imageUrl: t.url})); setView('create'); }} style={{ aspectRatio: '1/1', borderRadius: 12, backgroundImage: `url(${t.url})`, backgroundSize: 'cover', backgroundPosition: 'center', cursor: 'pointer', boxShadow: '0 4px 10px rgba(0,0,0,0.1)', position: 'relative', overflow: 'hidden' }} >

{t.name}

))}

)}

{/* Community Members */} {view === 'gallery' && (() => { const memberList = isMultiplayer && members?.length > 0 ? members : [{ id: user.id, displayName: user.displayName || user.name, handle: user.handle, avatarUrl: user.avatarUrl, role: 'owner' }]; return (

🤘 Crew

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

(m.handle) && openProfile && openProfile(m.handle)} title={m.displayName || m.name || 'Member'} style={{ width: 30, height: 30, borderRadius: '50%', border: '2px solid #BF5700', backgroundColor: '#eee', backgroundImage: (m.avatarUrl || m.profileImageUrl) ? `url(${m.avatarUrl || m.profileImageUrl})` : 'none', backgroundSize: 'cover', backgroundPosition: 'center', marginLeft: i > 0 ? -8 : 0, cursor: m.handle ? 'pointer' : 'default', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, color: '#666', zIndex: (memberList || []).length - i }} > {!(m.avatarUrl || m.profileImageUrl) && '👤'}

))}

{(memberList || []).length > 8 && +{(memberList || []).length - 8}}

{typeof share === 'function' && ( )}

); })()} {/* Sticky Bottom FAB for Gallery */} {view === 'gallery' && (

)}

); }