{!url && (name ? name[0] : '👤')}

); // RENDER SINGLE NODE const renderNode = (node) => { const isPoll = node.type === 'poll'; return (

@{node.author.name}

{isPoll ? '📊' : node.type === 'dare' ? '🔥' : '💭'}

{node.content}

{node.subtext &&

{node.subtext}

} {isPoll ? (

{(node.options || []).map(opt => { const isSelected = (opt.votes || []).includes(user.id); const total = (node.options || []).reduce((a, b) => a + (b.votes?.length || 0), 0); const pct = total > 0 ? Math.round(((opt.votes?.length || 0) / total) * 100) : 0; return (

handleVote(node.id, opt.id)} style={{ padding: 16, borderRadius: 16, cursor: 'pointer', background: theme.bg, boxShadow: isSelected ? theme.shadowIn : theme.shadowOut, color: isSelected ? theme.accentText : theme.text, fontWeight: 600, position: 'relative', overflow: 'hidden' }}>

{opt.text}{pct}%

); })}

) : (

{(node.responses || []).map(r => (

{r.author}:{r.text}

))}

{ if(e.key === 'Enter') { setNewResponse(e.target.value); handleResponse(node.id); e.target.value = ''; } }} onChange={e => setNewResponse(e.target.value)} />

)}

); }; // 📱 MAIN LAYOUT return (

{/* Header */}

Arena

setView(view === 'tempo' ? 'arena' : 'tempo')} style={{ cursor: 'pointer' }}>

{/* Main Content */}

{view === 'arena' && (

{(nodes || []).map(renderNode)}

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

{user.name || 'You'}

Tempo Setter

Your Worlds

{(nodes || []).filter(n => n.author.id === user.id).length === 0 ? (

No ripples started yet.

) : ( (nodes || []).filter(n => n.author.id === user.id).map(n => (

{n.content} {n.type === 'poll' ? '📊' : n.type === 'dare' ? '🔥' : '💭'}

)) )}

Room Tempo

{(memberList || []).map(m => (

openProfile(m.handle)} style={{ textAlign: 'center', width: 60, cursor: 'pointer' }}>

{m.displayName}

))}

{(memberList || []).length === 1 &&

}

)}

{/* Create Button (FAB) */} {view === 'arena' && (

)} {/* Create Modal */} {view === 'create' && (

Construct Node

{['poll', 'thought', 'dare'].map(type => ( ))}

setCreateContent(e.target.value)} style={{ width: '100%', padding: 20, borderRadius: 20, border: 'none', background: theme.bg, boxShadow: theme.shadowIn, fontSize: 18, marginBottom: 20, outline: 'none', boxSizing: 'border-box' }} /> setCreateSubtext(e.target.value)} style={{ width: '100%', padding: 20, borderRadius: 20, border: 'none', background: theme.bg, boxShadow: theme.shadowIn, fontSize: 16, marginBottom: 32, outline: 'none', boxSizing: 'border-box' }} /> Place on Arena

)}

); }