Add waypoint debug layers to the new map.

This is now feature complete with the exception of the ruler, none of
which seem to work with react. Someone that understands JS packaging
better than I do (which is a very low bar) will need to have a look.

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

client/src/api/flightsSlice.ts

@@ -76,6 +76,8 @@ export const {
 } = flightsSlice.actions;
 
 export const selectFlights = (state: RootState) => state.flights;
+export const selectSelectedFlightId = (state: RootState) =>
+  state.flights.selected;
 export const selectSelectedFlight = (state: RootState) => {
   const id = state.flights.selected;
   return id ? state.flights.flights[id] : null;

client/src/components/liberationmap/LiberationMap.tsx

@@ -11,6 +11,7 @@ import SupplyRoutesLayer from "../supplyrouteslayer";
 import TerrainZonesLayers from "../terrainzones/TerrainZonesLayers";
 import TgosLayer from "../tgoslayer/TgosLayer";
 import { CoalitionThreatZones } from "../threatzones";
+import { WaypointDebugZonesControls } from "../waypointdebugzones/WaypointDebugZonesControls";
 import "./LiberationMap.css";
 import { Map } from "leaflet";
 import { useEffect, useRef } from "react";
@@ -96,6 +97,7 @@ export default function LiberationMap() {
           <NavMeshLayer blue={false} />
         </LayersControl.Overlay>
         <TerrainZonesLayers />
+        <WaypointDebugZonesControls />
       </LayersControl>
     </MapContainer>
   );

client/src/components/waypointdebugzones/HoldZones.tsx

@@ -0,0 +1,96 @@
+import { useGetDebugHoldZonesQuery } from "../../api/liberationApi";
+import { LayerGroup, Polygon, Polyline } from "react-leaflet";
+
+interface HoldZonesProps {
+  flightId: string;
+}
+
+function HoldZones(props: HoldZonesProps) {
+  const { data, error, isLoading } = useGetDebugHoldZonesQuery({
+    flightId: props.flightId,
+  });
+
+  if (isLoading) {
+    return <></>;
+  }
+
+  if (error) {
+    console.error("Error while loading waypoint IP zone info", error);
+    return <></>;
+  }
+
+  if (!data) {
+    console.log("Waypoint IP zone returned empty response");
+    return <></>;
+  }
+
+  return (
+    <>
+      <Polygon
+        positions={data.homeBubble}
+        color="#ffff00"
+        fillOpacity={0.1}
+        interactive={false}
+      />
+      <Polygon
+        positions={data.targetBubble}
+        color="#ffff00"
+        fillOpacity={0.1}
+        interactive={false}
+      />
+      <Polygon
+        positions={data.joinBubble}
+        color="#ffff00"
+        fillOpacity={0.1}
+        interactive={false}
+      />
+
+      {data.excludedZones.map((zone, idx) => {
+        return (
+          <Polygon
+            key={idx}
+            positions={zone}
+            color="#ffa500"
+            stroke={false}
+            fillOpacity={0.2}
+            interactive={false}
+          />
+        );
+      })}
+
+      {data.permissibleZones.map((zone, idx) => {
+        return (
+          <Polygon
+            key={idx}
+            positions={zone}
+            color="#80BA80"
+            interactive={false}
+          />
+        );
+      })}
+
+      {data.preferredLines.map((zone, idx) => {
+        return (
+          <Polyline
+            key={idx}
+            positions={zone}
+            color="#80BA80"
+            interactive={false}
+          />
+        );
+      })}
+    </>
+  );
+}
+
+interface HoldZonesLayerProps {
+  flightId: string | null;
+}
+
+export function HoldZonesLayer(props: HoldZonesLayerProps) {
+  return (
+    <LayerGroup>
+      {props.flightId ? <HoldZones flightId={props.flightId} /> : <></>}
+    </LayerGroup>
+  );
+}

client/src/components/waypointdebugzones/IpZones.tsx

@@ -0,0 +1,73 @@
+import { useGetDebugIpZonesQuery } from "../../api/liberationApi";
+import { LayerGroup, Polygon } from "react-leaflet";
+
+interface IpZonesProps {
+  flightId: string;
+}
+
+function IpZones(props: IpZonesProps) {
+  const { data, error, isLoading } = useGetDebugIpZonesQuery({
+    flightId: props.flightId,
+  });
+
+  if (isLoading) {
+    return <></>;
+  }
+
+  if (error) {
+    console.error("Error while loading waypoint IP zone info", error);
+    return <></>;
+  }
+
+  if (!data) {
+    console.log("Waypoint IP zone returned empty response");
+    return <></>;
+  }
+
+  return (
+    <>
+      <Polygon
+        positions={data.homeBubble}
+        color="#ffff00"
+        fillOpacity={0.1}
+        interactive={false}
+      />
+      <Polygon
+        positions={data.ipBubble}
+        color="#bb89ff"
+        fillOpacity={0.1}
+        interactive={false}
+      />
+      <Polygon
+        positions={data.permissibleZone}
+        color="#ffffff"
+        fillOpacity={0.1}
+        interactive={false}
+      />
+
+      {data.safeZones.map((zone, idx) => {
+        return (
+          <Polygon
+            key={idx}
+            positions={zone}
+            color="#80BA80"
+            fillOpacity={0.1}
+            interactive={false}
+          />
+        );
+      })}
+    </>
+  );
+}
+
+interface IpZonesLayerProps {
+  flightId: string | null;
+}
+
+export function IpZonesLayer(props: IpZonesLayerProps) {
+  return (
+    <LayerGroup>
+      {props.flightId ? <IpZones flightId={props.flightId} /> : <></>}
+    </LayerGroup>
+  );
+}

client/src/components/waypointdebugzones/JoinZones.tsx

@@ -0,0 +1,96 @@
+import { useGetDebugJoinZonesQuery } from "../../api/liberationApi";
+import { LayerGroup, Polygon, Polyline } from "react-leaflet";
+
+interface JoinZonesProps {
+  flightId: string;
+}
+
+function JoinZones(props: JoinZonesProps) {
+  const { data, error, isLoading } = useGetDebugJoinZonesQuery({
+    flightId: props.flightId,
+  });
+
+  if (isLoading) {
+    return <></>;
+  }
+
+  if (error) {
+    console.error("Error while loading waypoint join zone info", error);
+    return <></>;
+  }
+
+  if (!data) {
+    console.log("Waypoint join zone returned empty response");
+    return <></>;
+  }
+
+  return (
+    <>
+      <Polygon
+        positions={data.homeBubble}
+        color="#ffff00"
+        fillOpacity={0.1}
+        interactive={false}
+      />
+      <Polygon
+        positions={data.targetBubble}
+        color="#bb89ff"
+        fillOpacity={0.1}
+        interactive={false}
+      />
+      <Polygon
+        positions={data.ipBubble}
+        color="#ffffff"
+        fillOpacity={0.1}
+        interactive={false}
+      />
+
+      {data.excludedZones.map((zone, idx) => {
+        return (
+          <Polygon
+            key={idx}
+            positions={zone}
+            color="#ffa500"
+            fillOpacity={0.2}
+            stroke={false}
+            interactive={false}
+          />
+        );
+      })}
+
+      {data.permissibleZones.map((zone, idx) => {
+        return (
+          <Polygon
+            key={idx}
+            positions={zone}
+            color="#80BA80"
+            interactive={false}
+          />
+        );
+      })}
+
+      {data.preferredLines.map((zone, idx) => {
+        return (
+          <Polyline
+            key={idx}
+            positions={zone}
+            color="#80BA80"
+            interactive={false}
+          />
+        );
+      })}
+    </>
+  );
+}
+
+interface JoinZonesLayerProps {
+  flightId: string | null;
+}
+
+export function JoinZonesLayer(props: JoinZonesLayerProps) {
+  return (
+    <LayerGroup>
+      {props.flightId ? <JoinZones flightId={props.flightId} /> : <></>}
+    </LayerGroup>
+  );
+}

client/src/components/waypointdebugzones/WaypointDebugZonesControls.tsx

@@ -0,0 +1,30 @@
+import { selectSelectedFlightId } from "../../api/flightsSlice";
+import { useAppSelector } from "../../app/hooks";
+import { HoldZonesLayer } from "./HoldZones";
+import { IpZonesLayer } from "./IpZones";
+import { JoinZonesLayer } from "./JoinZones";
+import { LayersControl } from "react-leaflet";
+
+const ENABLE_EXPENSIVE_DEBUG_TOOLS = false;
+
+export function WaypointDebugZonesControls() {
+  const selectedFlightId = useAppSelector(selectSelectedFlightId);
+
+  if (!ENABLE_EXPENSIVE_DEBUG_TOOLS) {
+    return <></>;
+  }
+
+  return (
+    <>
+      <LayersControl.Overlay name="IP zones">
+        <IpZonesLayer flightId={selectedFlightId} />
+      </LayersControl.Overlay>
+      <LayersControl.Overlay name="Join zones">
+        <JoinZonesLayer flightId={selectedFlightId} />
+      </LayersControl.Overlay>
+      <LayersControl.Overlay name="Hold zones">
+        <HoldZonesLayer flightId={selectedFlightId} />
+      </LayersControl.Overlay>
+    </>
+  );
+}