{/* HEADER */}

🧬

{appTitle}

█

{/* REVEAL CELEBRATION BANNER */} {justRevealed && (

🔓👁️🔓

POSITIONS DECRYPTED

{othersCount} {othersCount === 1 ? 'identity' : 'identities'} revealed on the matrix

tap avatars to inspect 👀

)} {/* VIBE CHECK MESSAGE */} {vibeMessage && (

{vibeMessage.emoji}

{vibeMessage.label}

{vibeMessage.description}

// vibe.check complete

)} {vibeMessage &&

setVibeMessage(null)} />} {/* CONTENT */}

{/* FIRST TIME - BIG CTA */} {!hasPlotted && !tempPosition && ( <>

👇

DRAG TO PLOT YOURSELF

where do you fall on the matrix? 🤔

{(plots || []).length > 0 && (

🔒👀🔒

{(plots || []).length} {(plots || []).length === 1 ? 'signal' : 'signals'} encrypted

plot yourself to DECRYPT their positions

)} )} {/* TEMP POSITION CONFIRMATION */} {tempPosition && !hasPlotted && (

{getQuadrant(tempPosition.x, tempPosition.y).emoji}

{getQuadrant(tempPosition.x, tempPosition.y).label}

is this your vibe? {othersCount > 0 && confirm to decrypt {othersCount} {othersCount === 1 ? 'position' : 'positions'}}

)} {/* AFTER PLOTTING - STATUS */} {hasPlotted && (

{getQuadrant(myPlot.x, myPlot.y).emoji} {getQuadrant(myPlot.x, myPlot.y).label}

// tap matrix to replot · drag for precision

)} {/* THE MATRIX */}

{/* Quadrant backgrounds */}

{/* Scanline overlay */}

{/* Grid Lines */}

{/* Quadrant labels in corners */}

{quadrantConfig.topRight.emoji}
{quadrantConfig.topRight.label}

{quadrantConfig.topLeft.emoji}
{quadrantConfig.topLeft.label}

{quadrantConfig.bottomRight.emoji}
{quadrantConfig.bottomRight.label}

{quadrantConfig.bottomLeft.emoji}
{quadrantConfig.bottomLeft.label}

{/* Drag trail */} {(dragTrail || []).map((pt, i) => (

))} {/* Axis Labels */}

{axisLabels.top} ↑

↓ {axisLabels.bottom}

{axisLabels.right} →

← {axisLabels.left}

{/* Tap hint overlay */} {!hasPlotted && !tempPosition && (

0 ? 'rgba(10,10,15,0.7)' : 'rgba(10,10,15,0.3)', backdropFilter: (plots || []).length > 0 ? 'blur(6px)' : 'none' }}>

👆

TAP OR DRAG

to plot your position

)} {/* Temp position marker */} {tempPosition && (

{/* Glow ring */}

{ e.currentTarget.src = `https://ui-avatars.com/api/?name=${encodeURIComponent(user.name || 'U')}&background=111&color=00FF41`; }} />

)} {/* Show all plots only if user has plotted */} {hasPlotted && (plots || []).map((plot, i) => { const isMe = plot._user?.id === user.id; const qColor = getQuadrant(plot.x, plot.y).color; return (

{ e.stopPropagation(); if (isMe) return; if (plot._user?.handle) { openProfile(plot._user.handle); } else { setShowTooltip(showTooltip === i ? null : i); } }} style={{ position: 'absolute', left: `${plot.x}%`, bottom: `${plot.y}%`, width: isMe ? 46 : 36, height: isMe ? 46 : 36, transform: 'translate(-50%, 50%)', cursor: isMe ? 'default' : 'pointer', zIndex: isMe ? 5 : (showTooltip === i ? 10 : 1), animation: justRevealed && !isMe ? `popIn 0.5s ease-out ${i * 0.15}s both` : 'none', transition: 'left 0.5s ease-out, bottom 0.5s ease-out' }} > {/* Tooltip */} {showTooltip === i && !isMe && (

{plot._user?.displayName || 'Anon'}

{getQuadrant(plot.x, plot.y).label}

)} {/* Glow for self */} {isMe &&

}

{ e.currentTarget.src = `https://ui-avatars.com/api/?name=${encodeURIComponent(plot._user?.displayName || String(i))}&background=111&color=00FF41`; }} />

); })}

{/* STATS - only show after plotting */} {hasPlotted && (

{[ { q: quadrantConfig.topLeft, count: (plots || []).filter(p => p.x < 50 && p.y >= 50).length }, { q: quadrantConfig.topRight, count: (plots || []).filter(p => p.x >= 50 && p.y >= 50).length }, { q: quadrantConfig.bottomLeft, count: (plots || []).filter(p => p.x < 50 && p.y < 50).length }, { q: quadrantConfig.bottomRight, count: (plots || []).filter(p => p.x >= 50 && p.y < 50).length } ].map((item, idx) => (

{item.q.emoji}

{item.count}

{item.q.label.toUpperCase()}

))}

)} {/* SHARE BUTTON */} {/* MEMBER ROSTER */} {isMultiplayer && (memberList || []).length > 1 && (

CONNECTED NODES ({(memberList || []).length})

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

m.handle && openProfile(m.handle)} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '4px 10px 4px 4px', background: m.id === user.id ? 'rgba(0,255,65,0.12)' : 'rgba(255,255,255,0.04)', borderRadius: 20, border: `1px solid ${m.id === user.id ? 'rgba(0,255,65,0.3)' : 'rgba(255,255,255,0.08)'}`, cursor: m.handle ? 'pointer' : 'default', fontSize: 11, color: m.id === user.id ? '#00FF41' : '#aaa', fontWeight: 600 }} >

{ e.currentTarget.src = `https://ui-avatars.com/api/?name=${encodeURIComponent(m.displayName || m.name || 'U')}&background=111&color=00FF41`; }} /> {m.id === user.id ? 'You' : (m.displayName || m.name || 'Anon')}

))}

)} {/* PEOPLE LIST - only show after plotting */} {hasPlotted && (plots || []).length > 0 && (

AGENTS DETECTED 👀

{(plots || []).map((plot, i) => { const isMe = plot._user?.id === user.id; const qColor = getQuadrant(plot.x, plot.y).color; return (

plot._user?.handle && openProfile(plot._user.handle)} style={{ display: 'flex', alignItems: 'center', gap: 10, background: isMe ? 'rgba(0,255,65,0.08)' : 'rgba(255,255,255,0.03)', padding: '10px 12px', borderRadius: 10, border: `1px solid ${isMe ? 'rgba(0,255,65,0.2)' : 'rgba(255,255,255,0.05)'}`, cursor: plot._user?.handle ? 'pointer' : 'default' }} >

{ e.currentTarget.src = `https://ui-avatars.com/api/?name=${encodeURIComponent(plot._user?.displayName || String(i))}&background=111&color=00FF41`; }} />

{isMe ? 'You' : (plot._user?.displayName || 'Anon')}

{getQuadrant(plot.x, plot.y).label}

{getQuadrant(plot.x, plot.y).emoji}

); })}

)}

); }