Add culling exclusion zones display to the new map.

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

client/src/api/_liberationApi.ts

@@ -479,6 +479,7 @@ export type Game = {
   threat_zones: ThreatZoneContainer;
   navmeshes: NavMeshes;
   map_center?: LatLng;
+  unculled_zones: UnculledZone[];
 };
 export type MapZones = {
   inclusion: LatLng[][];

client/src/api/eventstream.tsx

@@ -28,6 +28,7 @@ import {
 import { navMeshUpdated } from "./navMeshSlice";
 import { updateTgo } from "./tgosSlice";
 import { threatZonesUpdated } from "./threatZonesSlice";
+import { unculledZonesUpdated } from "./unculledZonesSlice";
 import { LatLng } from "leaflet";
 import { updateIadsConnection } from "./iadsNetworkSlice";
 import { IadsConnection } from "./_liberationApi";
@@ -87,6 +88,16 @@ export const handleStreamedEvents = (
     });
   }
 
+  if (events.unculled_zones_updated) {
+    backend.get(`/map-zones/unculled`).then(
+      (result) => {
+        if (result.data) {
+          dispatch(unculledZonesUpdated(result.data));
+        }
+      }
+    );
+  }
+
   if (events.threat_zones_updated) {
     dispatch(liberationApi.endpoints.getThreatZones.initiate()).then(
       (result) => {

client/src/api/unculledZonesSlice.ts

@@ -0,0 +1,36 @@
+import { RootState } from "../app/store";
+import { gameLoaded, gameUnloaded } from "./actions";
+import { UnculledZone } from "./liberationApi";
+import { PayloadAction, createSlice } from "@reduxjs/toolkit";
+
+interface UnculledZonesState {
+  zones: UnculledZone[];
+}
+
+const initialState: UnculledZonesState = {
+  zones: [],
+};
+
+export const unculledZonesSlice = createSlice({
+  name: "unculledZonesState",
+  initialState,
+  reducers: {
+    updated: (state, action: PayloadAction<UnculledZone[]>) => {
+      state.zones = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(gameLoaded, (state, action) => {
+      state.zones = action.payload.unculled_zones;
+    });
+    builder.addCase(gameUnloaded, (state) => {
+      state.zones = initialState.zones;
+    });
+  },
+});
+
+export const { updated: unculledZonesUpdated } = unculledZonesSlice.actions;
+
+export const selectUnculledZones = (state: RootState) => state.unculledZones;
+
+export default unculledZonesSlice.reducer;

client/src/app/store.ts

@@ -9,6 +9,7 @@ import supplyRoutesReducer from "../api/supplyRoutesSlice";
 import tgosReducer from "../api/tgosSlice";
 import iadsNetworkReducer from "../api/iadsNetworkSlice";
 import threatZonesReducer from "../api/threatZonesSlice";
+import unculledZonesReducer  from "../api/unculledZonesSlice";
 import { Action, ThunkAction, configureStore } from "@reduxjs/toolkit";
 
 export const store = configureStore({
@@ -24,6 +25,7 @@ export const store = configureStore({
     tgos: tgosReducer,
     threatZones: threatZonesReducer,
     [baseApi.reducerPath]: baseApi.reducer,
+    unculledZones: unculledZonesReducer,
   },
   middleware: (getDefaultMiddleware) =>
     getDefaultMiddleware().concat(baseApi.middleware),

client/src/components/cullingexclusionzones/CullingExclusionZones.tsx

@@ -0,0 +1,47 @@
+import { UnculledZone } from "../../api/liberationApi";
+import { selectUnculledZones } from "../../api/unculledZonesSlice";
+import { useAppSelector } from "../../app/hooks";
+import { LayerGroup, LayersControl, Circle } from "react-leaflet";
+
+interface CullingExclusionCirclesProps {
+  zones: UnculledZone[];
+}
+
+const CullingExclusionCircles = (props: CullingExclusionCirclesProps) => {
+  return (
+    <>
+      <LayerGroup>
+        {props.zones.map((zone, idx) => {
+          return (
+            <Circle
+              key={idx}
+              center={zone.position}
+              radius={zone.radius}
+              color="#b4ff8c"
+              fill={false}
+              interactive={false}
+            />
+          );
+        })}
+      </LayerGroup>
+    </>
+  );
+};
+
+export default function CullingExclusionZones() {
+  const data = useAppSelector(selectUnculledZones).zones;
+  var cez = <></>;
+
+  if (!data) {
+    console.log("Empty response when loading culling exclusion zones");
+  } else {
+    cez = (
+      <CullingExclusionCircles zones={data}></CullingExclusionCircles>
+    );
+  }
+  return (
+    <LayersControl.Overlay name="Culling exclusion zones">
+      {cez}
+    </LayersControl.Overlay>
+  );
+}

client/src/components/cullingexclusionzones/index.ts

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

client/src/components/liberationmap/LiberationMap.tsx

@@ -18,6 +18,7 @@ import { useEffect, useRef } from "react";
 import { BasemapLayer } from "react-esri-leaflet";
 import { LayersControl, MapContainer, ScaleControl } from "react-leaflet";
 import Iadsnetworklayer from "../iadsnetworklayer";
+import CullingExclusionZones from "../cullingexclusionzones/CullingExclusionZones"
 import LeafletRuler from "../ruler/Ruler";
 
 export default function LiberationMap() {
@@ -109,6 +110,7 @@ export default function LiberationMap() {
           <NavMeshLayer blue={false} />
         </LayersControl.Overlay>
         <TerrainZonesLayers />
+        <CullingExclusionZones />
         <WaypointDebugZonesControls />
       </LayersControl>
     </MapContainer>