{ if (draggingRef.current) handleDial(e.clientX, e.clientY); }} onMouseUp={() => { if (draggingRef.current) { draggingRef.current = false; commitStress(); } }} onTouchMove={(e) => { if (draggingRef.current && e.touches[0]) handleDial(e.touches[0].clientX, e.touches[0].clientY); }} onTouchEnd={() => { if (draggingRef.current) { draggingRef.current = false; commitStress(); } }} > {/* Particles */} {(particles || []).map(p => (

{p.emoji}

))} {/* Header */}

{ if (user?.handle && openProfile) openProfile(user.handle); }} style={{ cursor: user?.handle ? 'pointer' : 'default' }} >

UNSW · {memberList?.[0]?.displayName ?? 'You'}

{weekLabel()}

80 ? 'pulse 0.6s ease infinite' : 'float 3s ease-in-out infinite', filter: `drop-shadow(0 4px 12px ${accent})`, }}>{avatarFace()}

{/* Crew rail */}

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

{ if (m.handle && openProfile) openProfile(m.handle); }} style={{ display: 'flex', alignItems: 'center', gap: 6, background: 'rgba(255,255,255,0.1)', border: '1px solid rgba(255,255,255,0.18)', borderRadius: 999, padding: '4px 10px 4px 4px', cursor: m.handle ? 'pointer' : 'default', flexShrink: 0, backdropFilter: 'blur(10px)', }} > {m.avatarUrl ? (

) : (

{(m.displayName || 'U')[0]}

)} {m.displayName ?? m.handle ?? 'crew'}

))}

{/* Bento Grid */}

{(tiles || []).map((tile, i) => { const isWide = tile.size === 'wide'; const isTall = tile.size === 'tall'; const isFlipped = flipped === tile.id; const isEditing = tile.id === 'degree' && editingDegree; return (

{ if (!isEditing) flipTile(tile.id); }} style={{ position: 'relative', width: '100%', height: '100%', minHeight: 'inherit', transformStyle: 'preserve-3d', transition: 'transform 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55)', transform: isFlipped ? 'rotateY(180deg)' : 'rotateY(0deg)', cursor: 'pointer', }} > {/* Front */}

{tile.label} {tile.emoji}

{tile.id === 'degree' && isEditing ? ( setDegree(e.target.value)} onBlur={() => { setEditingDegree(false); saveData({ ...(appData || {}), stress, degree }); }} onKeyDown={(e) => { if (e.key === 'Enter') { setEditingDegree(false); saveData({ ...(appData || {}), stress, degree }); } }} onClick={(e) => e.stopPropagation()} placeholder="e.g. B Computer Science" style={{ background: 'rgba(0,0,0,0.2)', border: `1px solid ${accent}`, borderRadius: 10, color: '#fff', fontSize: 15, padding: '6px 10px', fontWeight: 700, outline: 'none', width: '100%', boxSizing: 'border-box', }} /> ) : (

{ if (tile.id === 'degree' && !degree) { e.stopPropagation(); setEditingDegree(true); } }} style={{ fontSize: isWide || isTall ? 18 : 15, fontWeight: 800, lineHeight: 1.15, opacity: tile.id === 'degree' && !degree ? 0.5 : 1 }} >{tile.front}

)}

{/* Back */}

🔓 HACK UNLOCKED

{tile.back}

); })}

{/* Stress Dial */}

TRIMESTER STRESS DIAL · DRAG ME

{ draggingRef.current = true; handleDial(e.clientX, e.clientY); }} onTouchStart={(e) => { draggingRef.current = true; if (e.touches[0]) handleDial(e.touches[0].clientX, e.touches[0].clientY); }} style={{ position: 'relative', width: 180, height: 180, borderRadius: '50%', background: `conic-gradient(from 210deg, #6366F1 0deg, ${accent} ${(stress/100)*300}deg, rgba(255,255,255,0.1) ${(stress/100)*300}deg, rgba(255,255,255,0.1) 300deg, transparent 300deg)`, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'grab', boxShadow: `0 0 60px ${accent}, inset 0 0 20px rgba(0,0,0,0.3)`, transition: 'box-shadow 0.3s ease', touchAction: 'none', userSelect: 'none', }} >

{Math.round(stress)}

STRESS %

{/* Handle */}

{/* Shared Stress Board */} {(stressBoard || []).length > 0 && (

CREW VIBE BOARD

{(stressBoard || []).map(entry => (

{ if (entry?._user?.handle && openProfile) openProfile(entry._user.handle); }} style={{ display: 'flex', alignItems: 'center', gap: 10, background: 'rgba(255,255,255,0.1)', border: '1px solid rgba(255,255,255,0.18)', borderRadius: 14, padding: '8px 12px', cursor: entry?._user?.handle ? 'pointer' : 'default', backdropFilter: 'blur(10px)', }} > {entry?._user?.profileImageUrl ? (

) : (

{(entry?._user?.displayName || 'U')[0]}

)}

{entry?._user?.displayName ?? 'crew'}

{entry.label}

{entry.stress}%

))}

)}

); }