import React from 'react'; const RouteSidebar = ({ gameState }) => { const config = gameState.config; // Use config.airport_code to identify the currently active simulation airport if (!config || !config.airport_code) { return (
Select an airport to view procedural routes
); } const stars = config.stars || {}; const sids = config.sids || {}; const starNames = config.star_names || {}; const sidNames = config.sid_names || {}; return (

{config.airport_code} Procedures

ARRIVALS (STARs)

{Object.entries(stars).map(([gate, gateStars]) => (
{Object.entries(gateStars).map(([runway, sequence]) => { const name = starNames[`${gate}:${runway}`] || `${gate} \u2192 ${runway}`; return (
{name} STAR
{gate} to RWY {runway}
{sequence.map(id => config.waypoints[id]?.name || id).join(' \u2192 ')}
); })}
))} {Object.keys(stars).length === 0 &&
No STARs defined
}

DEPARTURES (SIDs)

{Object.entries(sids).map(([runway, rwySids]) => (
{Object.entries(rwySids).map(([gate, sequence]) => { const name = sidNames[`${runway}:${gate}`] || `${runway} \u2192 ${gate}`; return (
{name} SID
RWY {runway} to {gate}
{sequence.map(id => config.waypoints[id]?.name || id).join(' \u2192 ')}
); })}
))} {Object.keys(sids).length === 0 &&
No SIDs defined
}
); }; export default RouteSidebar;