{/* HEADER */}

PASSPORT №AY/2025

UNSW · SYD ⇄ TYO ⇄ KTM

{xp}

{/* HERO HEADLINE */}

{isUnhinged ? 'UN-' : 'AY-'}

{isUnhinged ? 'HINGED' : 'USH'}

{isUnhinged ? 'Cheat meals. Missed flights. Sushi at 3am. Drag chaos onto the page.' : 'Fitness · entrepreneurship · sushi · football. Stamp the passport.'}

{/* CANVAS */}

dragging && handleDrop(e, dragging)} onMouseUp={(e) => dragging && handleDrop(e, dragging)} style={{ flex: 1, margin: '12px 20px 8px', border: `2px solid ${fg}`, position: 'relative', overflow: 'hidden', background: isUnhinged ? '#111' : '#FBF8F2', transition: 'all 0.6s', }} > {/* Giant deformable typography */}

{isUnhinged ? 'CHAOS' : 'HUSTLE'}

{/* Corner crop marks */} {[['top:8px;left:8px','t l'], ['top:8px;right:8px','t r'], ['bottom:8px;left:8px','b l'], ['bottom:8px;right:8px','b r']].map((pos, i) => { const styles = { position: 'absolute', width: 12, height: 12, border: `1px solid ${fg}`, opacity: 0.4 }; if (i === 0) { styles.top = 8; styles.left = 8; styles.borderRight = 'none'; styles.borderBottom = 'none'; } if (i === 1) { styles.top = 8; styles.right = 8; styles.borderLeft = 'none'; styles.borderBottom = 'none'; } if (i === 2) { styles.bottom = 8; styles.left = 8; styles.borderRight = 'none'; styles.borderTop = 'none'; } if (i === 3) { styles.bottom = 8; styles.right = 8; styles.borderLeft = 'none'; styles.borderTop = 'none'; } return

; })} {/* Empty state */} {(stamps?.length ?? 0) === 0 && (

↓ DRAG A STAMP UP HERE ↓

)} {/* Placed stamps */} {(stamps ?? []).map((s) => { const def = getDef(s.defId); const isActive = activeStamp === s.id; return (

{ setActiveStamp(s.id); setTimeout(() => setActiveStamp(null), 2400); }} style={{ position: 'absolute', left: `${s.x}%`, top: `${s.y}%`, transform: `translate(-50%, -50%) rotate(${s.rot}deg) scale(${isActive ? 1.15 : 1})`, border: `3px solid ${accent}`, color: accent, background: bg, padding: '6px 10px', fontWeight: 900, fontSize: 13, letterSpacing: 1, whiteSpace: 'nowrap', cursor: 'pointer', transition: 'transform 0.3s cubic-bezier(0.4,0,0.2,1)', boxShadow: isActive ? `4px 4px 0 ${fg}` : 'none', animation: isActive ? 'pulse 0.4s ease' : 'none', }} > {def.emoji} {def.label}

); })} {/* Story flash */} {activeDef && (

{activeDef.stat}

{activeDef.story}

)}

{/* STAMP TRAY */}

STAMPS · HOLD & DRAG

{(stamps?.length ?? 0) > 0 && ( )}

{(STAMP_LIBRARY || []).map((s) => { const isDrag = dragging?.id === s.id; return (

setDragging(s)} onTouchStart={() => setDragging(s)} onClick={() => { // tap-to-place fallback: drop in random canvas spot const newStamp = { id: s.id + '_' + Date.now(), defId: s.id, x: 20 + Math.random() * 60, y: 20 + Math.random() * 60, rot: Math.random() * 30 - 15, ts: Date.now(), }; persistStamps([...(stamps ?? []), newStamp], s); setActiveStamp(newStamp.id); setTimeout(() => setActiveStamp(null), 2400); }} style={{ flexShrink: 0, border: `2px solid ${fg}`, padding: '10px 12px', minWidth: 90, cursor: 'grab', background: isDrag ? accent : 'transparent', color: isDrag ? bg : fg, transition: 'all 0.2s', transform: isDrag ? 'scale(1.05)' : 'scale(1)', userSelect: 'none', touchAction: 'none', }} >

{s.emoji}

{s.label}

{s.sub}

); })}

{/* CHAOS DIAL */}

persistDial(dial > 0.5 ? 0 : 1)} >

DIAL

MODE

{isUnhinged ? 'UNHINGED' : 'STRICT HUSTLE'}

setDial(Number(e.target.value) / 100)} onMouseUp={(e) => persistDial(Number(e.target.value) / 100)} onTouchEnd={(e) => persistDial(Number(e.target.value) / 100)} style={{ width: '100%', marginTop: 4, accentColor: accent, }} />

{/* CREW + SHARE BAR */}

CREW ·

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

{/* SHARED ACTIVITY FEED + LEADERBOARD */}

CREW FEED

{isMultiplayer ? 'LIVE' : 'SOLO'}

{/* leaderboard tally */}

{(memberList || []).slice(0, 5).map((m, i) => { const count = (sharedFeed || []).filter(f => f._user?.id === m.id).length; return ( ); })}

{(sharedFeed?.length ?? 0) === 0 && (

NO STAMPS YET. DROP ONE TO BROADCAST.

)} {(sharedFeed || []).map((entry) => (

entry._user?.handle && openProfile?.(entry._user.handle)} style={{ cursor: entry._user?.handle ? 'pointer' : 'default', textDecoration: entry._user?.handle ? 'underline' : 'none' }}> {entry._user?.displayName || 'anon'} stamped {entry.emoji} {entry.label}

))}

); }