Partial implementation of TGO display.

No threat/detection circles yet.

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

client/src/api/tgo.ts

@@ -0,0 +1,23 @@
+import { LatLng } from "leaflet";
+
+export enum TgoType {
+  AIR_DEFENSE = "Air defenses",
+  FACTORY = "Factories",
+  SHIP = "Ships",
+  OTHER = "Other ground objects",
+}
+
+export interface Tgo {
+  name: string;
+  control_point_name: string;
+  category: string;
+  blue: boolean;
+  position: LatLng;
+  units: string[];
+  threat_ranges: number[];
+  detection_ranges: number[];
+  dead: boolean;
+  sidc: string;
+}
+
+export default Tgo;

client/src/api/tgosSlice.ts

@@ -0,0 +1,51 @@
+import { PayloadAction, createSlice } from "@reduxjs/toolkit";
+import { Tgo, TgoType } from "./tgo";
+
+import { RootState } from "../app/store";
+
+interface TgosState {
+  tgosByType: { [key: string]: Tgo[] };
+}
+
+const initialState: TgosState = {
+  tgosByType: Object.fromEntries(
+    Object.values(TgoType).map((key) => [key, []])
+  ),
+};
+
+export const tgosSlice = createSlice({
+  name: "tgos",
+  initialState,
+  reducers: {
+    setTgos: (state, action: PayloadAction<Tgo[]>) => {
+      state.tgosByType = initialState.tgosByType;
+      for (const key of Object.values(TgoType)) {
+        state.tgosByType[key] = [];
+      }
+      for (const tgo of action.payload) {
+        var type;
+        switch (tgo.category) {
+          case "aa":
+            type = TgoType.AIR_DEFENSE;
+            break;
+          case "factory":
+            type = TgoType.FACTORY;
+            break;
+          case "ship":
+            type = TgoType.SHIP;
+            break;
+          default:
+            type = TgoType.OTHER;
+            break;
+        }
+        state.tgosByType[type].push(tgo);
+      }
+    },
+  },
+});
+
+export const { setTgos } = tgosSlice.actions;
+
+export const selectTgos = (state: RootState) => state.tgos;
+
+export default tgosSlice.reducer;

client/src/app/store.ts

@@ -2,11 +2,13 @@ import { Action, ThunkAction, configureStore } from "@reduxjs/toolkit";
 
 import controlPointsReducer from "../api/controlPointsSlice";
 import flightsReducer from "../api/flightsSlice";
+import tgosReducer from "../api/tgosSlice";
 
 export const store = configureStore({
   reducer: {
     flights: flightsReducer,
     controlPoints: controlPointsReducer,
+    tgos: tgosReducer,
   },
 });
 

client/src/components/liberationmap/LiberationMap.tsx

@@ -6,6 +6,8 @@ import { BasemapLayer } from "react-esri-leaflet";
 import ControlPointsLayer from "../controlpointslayer";
 import FlightPlansLayer from "../flightplanslayer";
 import { LatLng } from "leaflet";
+import { TgoType } from "../../api/tgo";
+import TgosLayer from "../tgoslayer/TgosLayer";
 
 interface GameProps {
   mapCenter: LatLng;
@@ -28,6 +30,13 @@ export default function LiberationMap(props: GameProps) {
         <LayersControl.Overlay name="Control points" checked>
           <ControlPointsLayer />
         </LayersControl.Overlay>
+        {Object.values(TgoType).map((type) => {
+          return (
+            <LayersControl.Overlay name={type} checked>
+              <TgosLayer type={type as TgoType} />
+            </LayersControl.Overlay>
+          );
+        })}
         <LayersControl.Overlay name="All blue flight plans" checked>
           <FlightPlansLayer blue={true} />
         </LayersControl.Overlay>

client/src/components/tgos/Tgo.tsx

@@ -0,0 +1,37 @@
+import { Icon, Point } from "leaflet";
+import { Marker, Popup } from "react-leaflet";
+
+import { Symbol as MilSymbol } from "milsymbol";
+import { Tgo as TgoModel } from "../../api/tgo";
+
+function iconForTgo(cp: TgoModel) {
+  const symbol = new MilSymbol(cp.sidc, {
+    size: 24,
+  });
+
+  return new Icon({
+    iconUrl: symbol.toDataURL(),
+    iconAnchor: new Point(symbol.getAnchor().x, symbol.getAnchor().y),
+  });
+}
+
+interface TgoProps {
+  tgo: TgoModel;
+}
+
+export default function Tgo(props: TgoProps) {
+  return (
+    <Marker position={props.tgo.position} icon={iconForTgo(props.tgo)}>
+      <Popup>
+        {`${props.tgo.name} (${props.tgo.control_point_name})`}
+        <br />
+        {props.tgo.units.map((unit) => (
+          <>
+            {unit}
+            <br />
+          </>
+        ))}
+      </Popup>
+    </Marker>
+  );
+}

client/src/components/tgos/index.ts

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

client/src/components/tgoslayer/TgosLayer.tsx

@@ -0,0 +1,22 @@
+import { LayerGroup } from "react-leaflet";
+import Tgo from "../tgos/Tgo";
+import { TgoType } from "../../api/tgo";
+import { selectTgos } from "../../api/tgosSlice";
+import { useAppSelector } from "../../app/hooks";
+
+interface TgosLayerProps {
+  type: TgoType;
+}
+
+export default function TgosLayer(props: TgosLayerProps) {
+  const allTgos = useAppSelector(selectTgos);
+  const tgos = allTgos.tgosByType[props.type];
+  console.dir(Object.entries(TgoType));
+  return (
+    <LayerGroup>
+      {tgos.map((tgo) => {
+        return <Tgo key={tgo.name} tgo={tgo} />;
+      })}
+    </LayerGroup>
+  );
+}

client/src/components/tgoslayer/index.ts

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

client/src/hooks/useInitialGameState.tsx

@@ -1,8 +1,10 @@
 import { ControlPoint } from "../api/controlpoint";
 import { Flight } from "../api/flight";
+import Tgo from "../api/tgo";
 import backend from "../api/backend";
 import { registerFlight } from "../api/flightsSlice";
 import { setControlPoints } from "../api/controlPointsSlice";
+import { setTgos } from "../api/tgosSlice";
 import { useAppDispatch } from "../app/hooks";
 import { useEffect } from "react";
 
@@ -21,6 +23,14 @@ export const useInitialGameState = () => {
           dispatch(setControlPoints(response.data as ControlPoint[]));
         }
       });
+    backend
+      .get("/tgos")
+      .catch((error) => console.log(`Error fetching TGOs: ${error}`))
+      .then((response) => {
+        if (response != null) {
+          dispatch(setTgos(response.data as Tgo[]));
+        }
+      });
     backend
       .get("/flights?with_waypoints=true")
       .catch((error) => console.log(`Error fetching flights: ${error}`))