Update the react map for some new events.

client/src/components/airdefenserangelayer/AirDefenseRangeLayer.tsx

@@ -49,19 +49,12 @@ interface AirDefenseRangeLayerProps {
 }
 
 export const AirDefenseRangeLayer = (props: AirDefenseRangeLayerProps) => {
-  const tgos = useAppSelector(selectTgos);
-  var allTgos: Tgo[] = [];
-  for (const tgoType of Object.values(tgos.tgosByType)) {
-    for (const tgo of tgoType) {
-      if (tgo.blue === props.blue) {
-        allTgos.push(tgo);
-      }
-    }
-  }
+  const tgos = Object.values(useAppSelector(selectTgos).tgos);
+  var tgosForSide = tgos.filter((tgo) => tgo.blue === props.blue);
 
   return (
     <LayerGroup>
-      {allTgos.map((tgo) => {
+      {tgosForSide.map((tgo) => {
         return (
           <TgoRangeCircles key={tgo.id} tgo={tgo} {...props}></TgoRangeCircles>
         );

client/src/components/controlpoints/ControlPoint.tsx

@@ -3,6 +3,7 @@ import { Marker, Tooltip } from "react-leaflet";
 
 import { ControlPoint as ControlPointModel } from "../../api/controlpoint";
 import { Symbol as MilSymbol } from "milsymbol";
+import backend from "../../api/backend";
 
 function iconForControlPoint(cp: ControlPointModel) {
   const symbol = new MilSymbol(cp.sidc, {
@@ -29,6 +30,16 @@ export default function ControlPoint(props: ControlPointProps) {
       // other markers are helpful so we want to keep them, but make sure the CP
       // is always the clickable thing.
       zIndexOffset={1000}
+      eventHandlers={{
+        click: () => {
+          backend.post(`/qt/info/control-point/${props.controlPoint.id}`);
+        },
+        contextmenu: () => {
+          backend.post(
+            `/qt/create-package/control-point/${props.controlPoint.id}`
+          );
+        },
+      }}
     >
       <Tooltip>
         <h3 style={{ margin: 0 }}>{props.controlPoint.name}</h3>

client/src/components/controlpointslayer/ControlPointsLayer.tsx

@@ -7,7 +7,7 @@ export default function ControlPointsLayer() {
   const controlPoints = useAppSelector(selectControlPoints);
   return (
     <LayerGroup>
-      {controlPoints.controlPoints.map((controlPoint) => {
+      {Object.values(controlPoints.controlPoints).map((controlPoint) => {
         return (
           <ControlPoint key={controlPoint.name} controlPoint={controlPoint} />
         );

client/src/components/liberationmap/LiberationMap.tsx

@@ -9,7 +9,6 @@ import FlightPlansLayer from "../flightplanslayer";
 import FrontLinesLayer from "../frontlineslayer";
 import { LatLng } from "leaflet";
 import SupplyRoutesLayer from "../supplyrouteslayer";
-import { TgoType } from "../../api/tgo";
 import TgosLayer from "../tgoslayer/TgosLayer";
 
 interface GameProps {
@@ -33,13 +32,18 @@ export default function LiberationMap(props: GameProps) {
         <LayersControl.Overlay name="Control points" checked>
           <ControlPointsLayer />
         </LayersControl.Overlay>
-        {Object.values(TgoType).map((type, idx) => {
-          return (
-            <LayersControl.Overlay key={idx} name={type} checked>
-              <TgosLayer type={type as TgoType} />
-            </LayersControl.Overlay>
-          );
-        })}
+        <LayersControl.Overlay name="Air defenses" checked>
+          <TgosLayer categories={["aa"]} />
+        </LayersControl.Overlay>
+        <LayersControl.Overlay name="Factories" checked>
+          <TgosLayer categories={["factory"]} />
+        </LayersControl.Overlay>
+        <LayersControl.Overlay name="Ships" checked>
+          <TgosLayer categories={["ship"]} />
+        </LayersControl.Overlay>
+        <LayersControl.Overlay name="Other ground objects" checked>
+          <TgosLayer categories={["aa", "factories", "ships"]} exclude />
+        </LayersControl.Overlay>
         <LayersControl.Overlay name="Supply routes" checked>
           <SupplyRoutesLayer />
         </LayersControl.Overlay>

client/src/components/tgoslayer/TgosLayer.tsx

@@ -1,16 +1,19 @@
 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;
+  categories?: string[];
+  exclude?: true;
 }
 
 export default function TgosLayer(props: TgosLayerProps) {
-  const allTgos = useAppSelector(selectTgos);
-  const tgos = allTgos.tgosByType[props.type];
+  const allTgos = Object.values(useAppSelector(selectTgos).tgos);
+  const categoryFilter = props.categories ?? [];
+  const tgos = allTgos.filter(
+    (tgo) => categoryFilter.includes(tgo.category) === (props.exclude ?? false)
+  );
   return (
     <LayerGroup>
       {tgos.map((tgo) => {