Draw aircraft locations in the new map.

https://github.com/dcs-liberation/dcs_liberation/issues/2039

client/src/api/eventstream.tsx

@@ -9,6 +9,7 @@ import {
   selectFlight,
   unregisterFlight,
   updateFlight,
+  updateFlightPosition,
 } from "./flightsSlice";
 import {
   addFrontLine,
@@ -48,6 +49,12 @@ export const handleStreamedEvents = (
   dispatch: AppDispatch,
   events: GameUpdateEvents
 ) => {
+  for (const [id, position] of Object.entries(
+    events.updated_flight_positions
+  )) {
+    dispatch(updateFlightPosition([id, position]));
+  }
+
   for (const flight of events.new_flights) {
     dispatch(registerFlight(flight));
   }

client/src/api/flight.ts

@@ -4,7 +4,7 @@ import { LatLng } from "leaflet";
 export interface Flight {
   id: string;
   blue: boolean;
-  position: LatLng;
+  position: LatLng | null;
   sidc: string;
   waypoints: Waypoint[] | null;
 }

client/src/api/flightsSlice.ts

@@ -1,6 +1,7 @@
 import { RootState } from "../app/store";
 import { Flight } from "./flight";
 import { PayloadAction, createSlice } from "@reduxjs/toolkit";
+import { LatLng } from "leaflet";
 
 interface FlightsState {
   blue: { [id: string]: Flight };
@@ -55,6 +56,11 @@ export const flightsSlice = createSlice({
       const id = action.payload;
       state.selected = state.blue[id];
     },
+    updateFlightPosition: (state, action: PayloadAction<[string, LatLng]>) => {
+      const [id, position] = action.payload;
+      const ato = id in state.blue ? state.blue : state.red;
+      ato[id].position = position;
+    },
   },
 });
 
@@ -65,6 +71,7 @@ export const {
   updateFlight,
   deselectFlight,
   selectFlight,
+  updateFlightPosition,
 } = flightsSlice.actions;
 
 export const selectFlights = (state: RootState) => state.flights;

client/src/app/store.ts

@@ -15,7 +15,7 @@ export const store = configureStore({
     tgos: tgosReducer,
   },
   // The logger middleware must be last or it won't log actions.
-  middleware: [logger],
+  //middleware: [logger],
 });
 
 export type AppDispatch = typeof store.dispatch;

client/src/components/aircraft/Aircraft.tsx

@@ -0,0 +1,32 @@
+import { Flight } from "../../api/flight";
+import { Icon, Point } from "leaflet";
+import { Symbol } from "milsymbol";
+import { Marker } from "react-leaflet";
+
+function iconForFlight(flight: Flight) {
+  const symbol = new Symbol(flight.sidc, {
+    size: 16,
+  });
+
+  return new Icon({
+    iconUrl: symbol.toDataURL(),
+    iconAnchor: new Point(symbol.getAnchor().x, symbol.getAnchor().y),
+  });
+}
+
+interface AircraftProps {
+  flight: Flight;
+}
+
+export default function Aircraft(props: AircraftProps) {
+  if (!props.flight.position) {
+    return <></>;
+  }
+
+  return (
+    <Marker
+      position={props.flight.position}
+      icon={iconForFlight(props.flight)}
+    />
+  );
+}

client/src/components/aircraft/index.ts

@@ -0,0 +1 @@
+export { default } from "./Aircraft";

client/src/components/aircraftlayer/AircraftLayer.tsx

@@ -0,0 +1,18 @@
+import { selectFlights } from "../../api/flightsSlice";
+import { useAppSelector } from "../../app/hooks";
+import Aircraft from "../aircraft";
+import { LayerGroup } from "react-leaflet";
+
+export default function AircraftLayer() {
+  const atos = useAppSelector(selectFlights);
+  return (
+    <LayerGroup>
+      {Object.values(atos.blue).map((flight) => {
+        return <Aircraft key={flight.id} flight={flight} />;
+      })}
+      {Object.values(atos.red).map((flight) => {
+        return <Aircraft key={flight.id} flight={flight} />;
+      })}
+    </LayerGroup>
+  );
+}

client/src/components/aircraftlayer/index.ts

@@ -0,0 +1 @@
+export { default } from "./AircraftLayer";

client/src/components/liberationmap/LiberationMap.tsx

@@ -1,3 +1,4 @@
+import AircraftLayer from "../aircraftlayer";
 import AirDefenseRangeLayer from "../airdefenserangelayer";
 import ControlPointsLayer from "../controlpointslayer";
 import FlightPlansLayer from "../flightplanslayer";
@@ -30,6 +31,9 @@ export default function LiberationMap(props: GameProps) {
         <LayersControl.Overlay name="Control points" checked>
           <ControlPointsLayer />
         </LayersControl.Overlay>
+        <LayersControl.Overlay name="Aircraft" checked>
+          <AircraftLayer />
+        </LayersControl.Overlay>
         <LayersControl.Overlay name="Air defenses" checked>
           <TgosLayer categories={["aa"]} />
         </LayersControl.Overlay>