{/* Grid overlay */}

{/* Scan line */}

{/* HEADER - ZONE 1 */}

FLUX ROUTE // UT AUSTIN OPS

🗺️ MISSION BRIEF

OPERATOR

{user?.name ?? 'AGENT'}

{isMultiplayer &&

🟢 {(memberList || []).length} ONLINE

}

{/* Progress bar */}

MISSION PROGRESS {progress}% — {completedCount}/{(waypoints || []).length} WAYPOINTS

{/* ZONE 2 - ROUTE NETWORK */}

{(waypoints || []).map((wp, idx) => { if (!wp) return null; const isSelected = selectedId === wp.id; const color = getColor(wp.type); const emoji = getEmoji(wp.type); const isComplete = wp.status === 'complete'; const isActive = wp.status === 'active'; const isLast = idx === (waypoints || []).length - 1; const delay = idx * 0.1; return (

{/* Timeline column */}

{/* Node */}

toggleStatus(wp.id)} style={{ width: isActive ? 40 : 32, height: isActive ? 40 : 32, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', background: isComplete ? color + '33' : '#0a0f1a', border: `2px solid ${color}`, boxShadow: isActive ? `0 0 20px ${color}88, 0 0 40px ${color}44, inset 0 0 10px ${color}22` : `0 0 8px ${color}44`, cursor: 'pointer', fontSize: isActive ? 18 : 14, transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)', transform: isActive ? 'scale(1.1)' : 'scale(1)', animation: isActive ? 'pulse 2s infinite' : 'none', flexShrink: 0 }} > {isComplete ? '✅' : emoji}

{/* Connector line */} {!isLast && (

)}

{/* Content card */}

selectWaypoint(wp.id)} style={{ flex: 1, marginLeft: 12, marginBottom: isLast ? 0 : 8, padding: '12px 14px', borderRadius: 8, cursor: 'pointer', background: isSelected ? `linear-gradient(135deg, ${color}15, ${color}08)` : 'rgba(10,15,26,0.8)', border: `1px solid ${isSelected ? color + '66' : color + '22'}`, boxShadow: isSelected ? `0 0 20px ${color}22, inset 0 0 30px ${color}08` : 'none', transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)', transform: isSelected ? 'scale(1.02)' : 'scale(1)', opacity: isComplete ? 0.6 : 1 }} >

WP-{String(idx + 1).padStart(2, '0')} // {wp.time ?? '--:--'}

{wp.name ?? 'Unknown'}

{wp.status ?? 'pending'}

{/* Expanded briefing */} {isSelected && (

⚡ WAYPOINT BRIEFING

{wp.brief ?? 'No intel available.'}

📍 {wp.type?.toUpperCase?.() ?? 'UNKNOWN'}

{ e.stopPropagation(); removeWaypoint(wp.id); }} style={{ padding: '6px 16px', borderRadius: 4, cursor: 'pointer', background: '#ff004022', border: '1px solid #ff004044', fontSize: 10, color: '#ff4060', letterSpacing: 1, transition: 'all 0.2s' }} > ❌ REMOVE

{/* Multiplayer: who added */} {isMultiplayer && (

Added by {memberList[0]?.displayName ?? 'Unknown'}

)}

); })} {(waypoints || []).length === 0 && (

NO WAYPOINTS LOADED
TAP ＋ TO BEGIN MISSION PLANNING

)}

{/* ZONE 3 - INPUT / ADD */}

{!inputMode ? (

setState({ ...state, inputMode: true })} style={{ width: '100%', padding: 16, borderRadius: 10, cursor: 'pointer', background: 'linear-gradient(135deg, #00FFAA11, #00FFAA05)', border: '1px dashed #00FFAA44', textAlign: 'center', fontSize: 15, color: '#00FFAA', letterSpacing: 2, transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)', boxShadow: `0 0 15px #00FFAA11` }} > ＋ ADD WAYPOINT

) : (

⚡ NEW WAYPOINT REGISTRATION

setState({ ...state, newTime: e.target.value })} placeholder="TIME" style={{ width: 70, padding: '10px 8px', borderRadius: 6, background: '#0a0f1a', border: '1px solid #00FFAA33', color: '#00FFAA', fontSize: 14, fontFamily: 'inherit', outline: 'none' }} /> setState({ ...state, newName: e.target.value })} placeholder="LOCATION NAME" style={{ flex: 1, padding: '10px 8px', borderRadius: 6, background: '#0a0f1a', border: '1px solid #00FFAA33', color: '#fff', fontSize: 14, fontFamily: 'inherit', outline: 'none' }} />

setState({ ...state, newBrief: e.target.value })} placeholder="MISSION BRIEF (optional)" style={{ width: '100%', padding: '10px 8px', borderRadius: 6, background: '#0a0f1a', border: '1px solid #00FFAA33', color: '#ccc', fontSize: 13, fontFamily: 'inherit', outline: 'none', boxSizing: 'border-box', marginBottom: 10 }} />

setState({ ...state, inputMode: false, newName: '', newTime: '', newBrief: '' })} style={{ flex: 1, padding: 12, borderRadius: 8, textAlign: 'center', cursor: 'pointer', background: '#ff004015', border: '1px solid #ff004033', color: '#ff4060', fontSize: 13, letterSpacing: 1, transition: 'all 0.2s' }} > CANCEL

⚡ DEPLOY

)}

); }