{/* Header */}

⚡ Gradient Racer

Find the global minimum.

{/* Racers List (Multiplayer Surface) */}

{(memberList || []).map(member => { const rData = appData?.racers?.[member.id] || {}; const isMe = member.id === user.id; const s = isMe ? currentStatus : rData.status; return (

member.handle ? openProfile(member.handle) : null} style={{ display: 'flex', alignItems: 'center', gap: 8, background: 'rgba(255,255,255,0.05)', padding: '6px 12px', borderRadius: 20, border: `1px solid ${getUserColor(member.id)}`, cursor: member.handle ? 'pointer' : 'default', flexShrink: 0 }}> {member.avatarUrl ? (

) : (

{(isMe ? 'Y' : (member.displayName || member.name || '?')[0]).toUpperCase()}

)} {isMe ? 'You' : (member.displayName || member.name || 'Racer')} {s === 'finished' ? '🏁' : s === 'diverged' ? '💥' : s === 'racing' ? '🏎️' : '⏳'}

); })}

{/* Canvas Area */}

{/* Live Stats Rail */}

Pos (X): {currentX.toFixed(3)}

Grad: {DF(currentX).toFixed(3)}

Steps: {engineRef.current.steps}

{/* Leaderboard / Race Results */} {(() => { const racers = appData?.racers || {}; const leaderboardEntries = Object.entries(racers || {}) .map(([id, r]) => { const member = (memberList || []).find(m => m.id === id); return { id, name: r?.name || member?.displayName || member?.name || 'Racer', handle: member?.handle ?? null, avatarUrl: member?.avatarUrl || member?.profileImageUrl || null, status: r?.status ?? 'idle', eta: r?.eta ?? 0, x: r?.x ?? START_X, updatedAt: r?.updatedAt ?? 0 }; }) .sort((a, b) => { const rank = { finished: 0, racing: 1, idle: 2, diverged: 3 }; const ra = rank[a.status] ?? 2; const rb = rank[b.status] ?? 2; if (ra !== rb) return ra - rb; if (a.status === 'finished' && b.status === 'finished') return Math.abs(F(a.x) - F(-0.72)) - Math.abs(F(b.x) - F(-0.72)); return 0; }); if ((leaderboardEntries || []).length === 0) return null; return (

🏆 Leaderboard

{(leaderboardEntries || []).length} racer{(leaderboardEntries || []).length !== 1 ? 's' : ''}

{(leaderboardEntries || []).map((entry, idx) => { const isMe = entry.id === user.id; const medal = idx === 0 && entry.status === 'finished' ? '🥇' : idx === 1 && entry.status === 'finished' ? '🥈' : idx === 2 && entry.status === 'finished' ? '🥉' : null; return (

entry.handle ? openProfile(entry.handle) : null} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 12px', borderRadius: 12, background: isMe ? 'rgba(56, 189, 248, 0.08)' : 'rgba(255,255,255,0.02)', border: isMe ? '1px solid rgba(56, 189, 248, 0.3)' : '1px solid transparent', cursor: entry.handle ? 'pointer' : 'default', transition: 'background 0.2s' }}> {medal || `#${idx + 1}`} {entry.avatarUrl ? (

) : (

{(entry.name || '?')[0].toUpperCase()}

)}

{isMe ? 'You' : entry.name}

η = {(entry.eta || 0).toFixed(3)}

{entry.status === 'finished' ? '🏁 Found' : entry.status === 'diverged' ? '💥 Diverged' : entry.status === 'racing' ? '🏎️ Racing' : '⏳ Idle'}

); })}

); })()} {/* Controls Container */}

Learning Rate (η)

0.8 ? '#ef4444' : eta > 0.4 ? '#eab308' : '#22c55e', color: '#000', padding: '2px 8px', borderRadius: 6, fontWeight: 'bold', fontSize: 14 }}> {eta.toFixed(3)}

{/* Custom Slider Styling */}

setEta(parseFloat(e.target.value))} style={{ width: '100%', height: 8, WebkitAppearance: 'none', appearance: 'none', background: 'linear-gradient(to right, #22c55e, #eab308, #ef4444)', borderRadius: 4, outline: 'none', zIndex: 2 }} />

⚡ Gradient Racer

Optimal Descent!

Divergence!

🏆 Leaderboard