Draw frozen combat in the new UI.

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

client/src/components/combat/Combat.tsx

@@ -0,0 +1,52 @@
+import CombatModel from "../../api/combat";
+import { LatLng } from "leaflet";
+import { Polygon, Polyline } from "react-leaflet";
+
+interface CombatProps {
+  combat: CombatModel;
+}
+
+function CombatFootprint(props: CombatProps) {
+  if (!props.combat.footprint) {
+    return <></>;
+  }
+
+  return (
+    <Polygon
+      positions={props.combat.footprint}
+      color="#c85050"
+      interactive={false}
+      fillOpacity={0.2}
+    />
+  );
+}
+
+function CombatLines(props: CombatProps) {
+  if (!props.combat.flight_position || !props.combat.target_positions) {
+    return <></>;
+  }
+
+  const flightPosition: LatLng = props.combat.flight_position;
+  return (
+    <>
+      {props.combat.target_positions.map((position) => {
+        return (
+          <Polyline
+            positions={[flightPosition, position]}
+            color="#c85050"
+            interactive={false}
+          />
+        );
+      })}
+    </>
+  );
+}
+
+export default function Combat(props: CombatProps) {
+  return (
+    <>
+      <CombatFootprint {...props} />
+      <CombatLines {...props} />
+    </>
+  );
+}

client/src/components/combat/index.ts

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

client/src/components/combatlayer/CombatLayer.tsx

@@ -0,0 +1,16 @@
+import { selectCombat } from "../../api/combatSlice";
+import { useAppSelector } from "../../app/hooks";
+import Combat from "../combat/Combat";
+import { LayerGroup } from "react-leaflet";
+
+export default function CombatLayer() {
+  const combats = useAppSelector(selectCombat);
+  return (
+    <LayerGroup>
+      {Object.values(combats.combat).map((combat) => {
+        return <Combat key={combat.id} combat={combat} />;
+      })}
+      (
+    </LayerGroup>
+  );
+}

client/src/components/combatlayer/index.ts

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

client/src/components/liberationmap/LiberationMap.tsx

@@ -1,5 +1,6 @@
 import AircraftLayer from "../aircraftlayer";
 import AirDefenseRangeLayer from "../airdefenserangelayer";
+import CombatLayer from "../combatlayer";
 import ControlPointsLayer from "../controlpointslayer";
 import FlightPlansLayer from "../flightplanslayer";
 import FrontLinesLayer from "../frontlineslayer";
@@ -34,6 +35,9 @@ export default function LiberationMap(props: GameProps) {
         <LayersControl.Overlay name="Aircraft" checked>
           <AircraftLayer />
         </LayersControl.Overlay>
+        <LayersControl.Overlay name="Active combat" checked>
+          <CombatLayer />
+        </LayersControl.Overlay>
         <LayersControl.Overlay name="Air defenses" checked>
           <TgosLayer categories={["aa"]} />
         </LayersControl.Overlay>