Add navmesh support to the new map.

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

client/src/api/eventstream.tsx

@@ -22,6 +22,7 @@ import {
 import FrontLine from "./frontline";
 import reloadGameState from "./gamestate";
 import { liberationApi } from "./liberationApi";
+import { navMeshUpdated } from "./navMeshSlice";
 import Tgo from "./tgo";
 import { updateTgo } from "./tgosSlice";
 import { threatZonesUpdated } from "./threatZonesSlice";
@@ -72,6 +73,16 @@ export const handleStreamedEvents = (
     dispatch(endCombat(id));
   }
 
+  for (const blue of events.navmesh_updates) {
+    dispatch(
+      liberationApi.endpoints.getNavmesh.initiate({ forPlayer: blue })
+    ).then((result) => {
+      if (result.data) {
+        dispatch(navMeshUpdated({ blue: blue, mesh: result.data }));
+      }
+    });
+  }
+
   if (events.threat_zones_updated) {
     dispatch(liberationApi.endpoints.getThreatZones.initiate()).then(
       (result) => {

client/src/api/game.ts

@@ -1,7 +1,7 @@
 import { ControlPoint } from "./controlpoint";
 import { Flight } from "./flight";
 import FrontLine from "./frontline";
-import { ThreatZoneContainer } from "./liberationApi";
+import { NavMeshes, ThreatZoneContainer } from "./liberationApi";
 import SupplyRoute from "./supplyroute";
 import Tgo from "./tgo";
 import { LatLngLiteral } from "leaflet";
@@ -13,5 +13,6 @@ export default interface Game {
   front_lines: FrontLine[];
   flights: Flight[];
   threat_zones: ThreatZoneContainer;
+  navmeshes: NavMeshes;
   map_center: LatLngLiteral | null;
 }

client/src/api/liberationApi.ts

@@ -280,7 +280,7 @@ export type GetThreatZonesApiResponse =
   /** status 200 Successful Response */ ThreatZoneContainer;
 export type GetThreatZonesApiArg = void;
 export type GetNavmeshApiResponse =
-  /** status 200 Successful Response */ NavMeshPoly[];
+  /** status 200 Successful Response */ NavMesh;
 export type GetNavmeshApiArg = {
   forPlayer: boolean;
 };
@@ -414,23 +414,6 @@ export type SupplyRoute = {
   blue: boolean;
   active_transports: string[];
 };
-export type Game = {
-  control_points: ControlPoint[];
-  tgos: Tgo[];
-  supply_routes: SupplyRoute[];
-  front_lines: FrontLine[];
-  flights: Flight[];
-  map_center: LatLng;
-};
-export type MapZones = {
-  inclusion: number[][][];
-  exclusion: number[][][];
-  sea: number[][][];
-};
-export type UnculledZone = {
-  position: LatLng;
-  radius: number;
-};
 export type ThreatZones = {
   full: number[][][];
   aircraft: number[][][];
@@ -445,6 +428,32 @@ export type NavMeshPoly = {
   poly: number[][];
   threatened: boolean;
 };
+export type NavMesh = {
+  polys: NavMeshPoly[];
+};
+export type NavMeshes = {
+  blue: NavMesh;
+  red: NavMesh;
+};
+export type Game = {
+  control_points: ControlPoint[];
+  tgos: Tgo[];
+  supply_routes: SupplyRoute[];
+  front_lines: FrontLine[];
+  flights: Flight[];
+  threat_zones: ThreatZoneContainer;
+  navmeshes: NavMeshes;
+  map_center: LatLng;
+};
+export type MapZones = {
+  inclusion: number[][][];
+  exclusion: number[][][];
+  sea: number[][][];
+};
+export type UnculledZone = {
+  position: LatLng;
+  radius: number;
+};
 export const {
   useListControlPointsQuery,
   useGetControlPointByIdQuery,

client/src/api/navMeshSlice.ts

@@ -0,0 +1,50 @@
+import { RootState } from "../app/store";
+import { gameLoaded, gameUnloaded } from "./actions";
+import { NavMesh, NavMeshPoly } from "./liberationApi";
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+interface NavMeshState {
+  blue: NavMeshPoly[];
+  red: NavMeshPoly[];
+}
+
+const initialState: NavMeshState = {
+  blue: [],
+  red: [],
+};
+
+interface INavMeshUpdate {
+  blue: boolean;
+  mesh: NavMesh;
+}
+
+const navMeshSlice = createSlice({
+  name: "navmesh",
+  initialState: initialState,
+  reducers: {
+    updated: (state, action: PayloadAction<INavMeshUpdate>) => {
+      const polys = action.payload.mesh.polys;
+      if (action.payload.blue) {
+        state.blue = polys;
+      } else {
+        state.red = polys;
+      }
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(gameLoaded, (state, action) => {
+      state.blue = action.payload.navmeshes.blue.polys;
+      state.red = action.payload.navmeshes.red.polys;
+    });
+    builder.addCase(gameUnloaded, (state) => {
+      state.blue = [];
+      state.red = [];
+    });
+  },
+});
+
+export const { updated: navMeshUpdated } = navMeshSlice.actions;
+
+export const selectNavMeshes = (state: RootState) => state.navmeshes;
+
+export default navMeshSlice.reducer;

client/src/app/store.ts

@@ -4,6 +4,7 @@ import controlPointsReducer from "../api/controlPointsSlice";
 import flightsReducer from "../api/flightsSlice";
 import frontLinesReducer from "../api/frontLinesSlice";
 import mapReducer from "../api/mapSlice";
+import navMeshReducer from "../api/navMeshSlice";
 import supplyRoutesReducer from "../api/supplyRoutesSlice";
 import tgosReducer from "../api/tgosSlice";
 import threatZonesReducer from "../api/threatZonesSlice";
@@ -16,6 +17,7 @@ export const store = configureStore({
     flights: flightsReducer,
     frontLines: frontLinesReducer,
     map: mapReducer,
+    navmeshes: navMeshReducer,
     supplyRoutes: supplyRoutesReducer,
     tgos: tgosReducer,
     threatZones: threatZonesReducer,

client/src/components/liberationmap/LiberationMap.tsx

@@ -6,6 +6,7 @@ import CombatLayer from "../combatlayer";
 import ControlPointsLayer from "../controlpointslayer";
 import FlightPlansLayer from "../flightplanslayer";
 import FrontLinesLayer from "../frontlineslayer";
+import NavMeshLayer from "../navmesh/NavMeshLayer";
 import SupplyRoutesLayer from "../supplyrouteslayer";
 import TgosLayer from "../tgoslayer/TgosLayer";
 import { CoalitionThreatZones } from "../threatzones";
@@ -87,6 +88,12 @@ export default function LiberationMap() {
       <LayersControl position="topleft">
         <CoalitionThreatZones blue={true} />
         <CoalitionThreatZones blue={false} />
+        <LayersControl.Overlay name="Blue navmesh">
+          <NavMeshLayer blue={true} />
+        </LayersControl.Overlay>
+        <LayersControl.Overlay name="Red navmesh">
+          <NavMeshLayer blue={false} />
+        </LayersControl.Overlay>
       </LayersControl>
     </MapContainer>
   );

client/src/components/navmesh/NavMeshLayer.tsx

@@ -0,0 +1,33 @@
+import { selectNavMeshes } from "../../api/navMeshSlice";
+import { useAppSelector } from "../../app/hooks";
+import { LatLng } from "leaflet";
+import { LayerGroup, Polygon } from "react-leaflet";
+
+interface NavMeshLayerProps {
+  blue: boolean;
+}
+
+export default function NavMeshLayer(props: NavMeshLayerProps) {
+  const meshes = useAppSelector(selectNavMeshes);
+  const mesh = props.blue ? meshes.blue : meshes.red;
+  return (
+    <LayerGroup>
+      {mesh.map((zone, idx) => {
+        const positions = zone.poly.map(([lat, lng]) => new LatLng(lat, lng));
+        return (
+          <Polygon
+            key={idx}
+            positions={positions}
+            color="#000000"
+            weight={1}
+            fill
+            fillColor={zone.threatened ? "#ff0000" : "#00ff00"}
+            fillOpacity={0.1}
+            noClip
+            interactive={false}
+          />
+        );
+      })}
+    </LayerGroup>
+  );
+}

client/src/components/navmesh/index.ts

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