{!member.avatarUrl && {initial}} {member.avatarUrl && ( {member.displayName}

{ e.currentTarget.style.display = 'none'; }} /> )}

); }; // ──────────────────────────────────────────────────────────────────────── // 5. RENDER // ──────────────────────────────────────────────────────────────────────── return (

{/* HEADER */}

🦁

UNSW Main
Character Library!

{/* ALERT POPUP */} {alertMessage && (

setAlertMessage(null)}>

e.stopPropagation()}>

📸

Wait!

{alertMessage}

)} {/* MAIN GAME AREA */}

DRAG TO RANK

{/* MATRIX GRAPH */}

{/* Subtle quadrant pattern background */}

{/* Grid Lines */}

{/* Axis Labels */}

GENIUS 🧠

MYSTERY 🕵️

WHOLESOME 😇

WILD 🐀

{/* Placed Avatars */} {(rankings || []).map(rank => { const member = (allMembers || []).find(m => m.id === rank.id); if (!member) return null; return (

{ e.stopPropagation(); if (window.confirm(`Remove ${getFirstName(member.displayName)} from grid?`)) { handleRemove(rank.id); } }} > {renderAvatar(member, 44)}

{getFirstName(member.displayName)}

); })} {/* Ghost Cursor */} {activeSubject && (

{renderAvatar(activeSubject, 56)}

Tap to Place!

)}

{/* NEW ARRIVALS (BOOKSHELF) */}

New Arrivals

{(unrankedMembers || []).length} waiting

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

Library is empty! 😴

) : ( (unrankedMembers || []).map(m => { const isSelf = user && m.id === user.id; return (

handleSelectSubject(m)} style={{ flexShrink: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6, cursor: 'pointer', width: 64, opacity: isSelf && !isMultiplayer ? 0.5 : 1 // Dim user if solo }} >

{renderAvatar(m, 56)} {/* Warning badge if no pic */} {!m.avatarUrl && (

)}

{getFirstName(m.displayName)}

); }) )}

); }