Draw supply routes on the react map.

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

client/src/components/liberationmap/LiberationMap.tsx

@@ -7,6 +7,7 @@ import { BasemapLayer } from "react-esri-leaflet";
 import ControlPointsLayer from "../controlpointslayer";
 import FlightPlansLayer from "../flightplanslayer";
 import { LatLng } from "leaflet";
+import SupplyRoutesLayer from "../supplyrouteslayer";
 import { TgoType } from "../../api/tgo";
 import TgosLayer from "../tgoslayer/TgosLayer";
 
@@ -38,6 +39,9 @@ export default function LiberationMap(props: GameProps) {
             </LayersControl.Overlay>
           );
         })}
+        <LayersControl.Overlay name="Supply routes" checked>
+          <SupplyRoutesLayer />
+        </LayersControl.Overlay>
         <LayersControl.Overlay name="Enemy SAM threat range" checked>
           <AirDefenseRangeLayer blue={false} />
         </LayersControl.Overlay>

client/src/components/splitlines/SplitLines.tsx

@@ -0,0 +1,20 @@
+interface SplitLinesProps {
+  items: string[];
+}
+
+const SplitLines = (props: SplitLinesProps) => {
+  return (
+    <>
+      {props.items.map((text) => {
+        return (
+          <>
+            {text}
+            <br />
+          </>
+        );
+      })}
+    </>
+  );
+};
+
+export default SplitLines;

client/src/components/supplyroute/SupplyRoute.tsx

@@ -0,0 +1,68 @@
+import { Polyline, Tooltip } from "react-leaflet";
+import { useEffect, useRef } from "react";
+
+import { Polyline as LPolyline } from "leaflet";
+import SplitLines from "../splitlines/SplitLines";
+import { SupplyRoute as SupplyRouteModel } from "../../api/supplyroute";
+
+interface SupplyRouteProps {
+  route: SupplyRouteModel;
+}
+
+function SupplyRouteTooltip(props: SupplyRouteProps) {
+  if (!props.route.active_transports.length) {
+    return <Tooltip>This supply route is inactive.</Tooltip>;
+  }
+
+  return (
+    <Tooltip>
+      <SplitLines items={props.route.active_transports} />
+    </Tooltip>
+  );
+}
+
+function ActiveSupplyRouteHighlight(props: SupplyRouteProps) {
+  if (!props.route.active_transports.length) {
+    return <></>;
+  }
+
+  return (
+    <Polyline positions={props.route.points} color={"#ffffff"} weight={2} />
+  );
+}
+
+function colorFor(route: SupplyRouteModel) {
+  if (route.front_active) {
+    return "#c85050";
+  }
+  if (route.blue) {
+    return "#2d3e50";
+  }
+  return "#8c1414";
+}
+
+export default function SupplyRoute(props: SupplyRouteProps) {
+  const color = colorFor(props.route);
+  const weight = props.route.is_sea ? 4 : 6;
+
+  const path = useRef<LPolyline | null>();
+
+  useEffect(() => {
+    // Ensure that the highlight line draws on top of this. We have to bring
+    // this to the back rather than bringing the highlight to the front because
+    // the highlight won't necessarily be drawn yet.
+    path.current?.bringToBack();
+  });
+
+  return (
+    <Polyline
+      positions={props.route.points}
+      color={color}
+      weight={weight}
+      ref={(ref) => (path.current = ref)}
+    >
+      <SupplyRouteTooltip {...props} />
+      <ActiveSupplyRouteHighlight {...props} />
+    </Polyline>
+  );
+}

client/src/components/supplyroute/index.ts

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

client/src/components/supplyrouteslayer/SupplyRoutesLayer.tsx

@@ -0,0 +1,15 @@
+import { LayerGroup } from "react-leaflet";
+import SupplyRoute from "../supplyroute/SupplyRoute";
+import { selectSupplyRoutes } from "../../api/supplyRoutesSlice";
+import { useAppSelector } from "../../app/hooks";
+
+export default function SupplyRoutesLayer() {
+  const routes = useAppSelector(selectSupplyRoutes).routes;
+  return (
+    <LayerGroup>
+      {routes.map((route, idx) => {
+        return <SupplyRoute key={idx} route={route} />;
+      })}
+    </LayerGroup>
+  );
+}

client/src/components/supplyrouteslayer/index.ts

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

client/src/components/tgoslayer/TgosLayer.tsx

@@ -11,7 +11,6 @@ interface TgosLayerProps {
 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) => {