Reorganize React project structure.

Whatever I was doing was getting out of control :)

client/src/components/controlpoints/ControlPoint.tsx

@@ -0,0 +1,32 @@
+import { Icon, Point } from "leaflet";
+import { Marker, Popup } from "react-leaflet";
+
+import { ControlPoint as ControlPointModel } from "../../api/controlpoint";
+import { Symbol as MilSymbol } from "milsymbol";
+
+function iconForControlPoint(cp: ControlPointModel) {
+  const symbol = new MilSymbol(cp.sidc, {
+    size: 24,
+    colorMode: "Dark",
+  });
+
+  return new Icon({
+    iconUrl: symbol.toDataURL(),
+    iconAnchor: new Point(symbol.getAnchor().x, symbol.getAnchor().y),
+  });
+}
+
+interface ControlPointProps {
+  controlPoint: ControlPointModel;
+}
+
+export default function ControlPoint(props: ControlPointProps) {
+  return (
+    <Marker
+      position={props.controlPoint.position}
+      icon={iconForControlPoint(props.controlPoint)}
+    >
+      <Popup>{props.controlPoint.name}</Popup>
+    </Marker>
+  );
+}

client/src/components/controlpoints/index.ts

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

client/src/components/controlpointslayer/ControlPointsLayer.tsx

@@ -0,0 +1,17 @@
+import ControlPoint from "../controlpoints";
+import { LayerGroup } from "react-leaflet";
+import { selectControlPoints } from "../../api/controlPointsSlice";
+import { useAppSelector } from "../../app/hooks";
+
+export default function ControlPointsLayer() {
+  const controlPoints = useAppSelector(selectControlPoints);
+  return (
+    <LayerGroup>
+      {controlPoints.map((controlPoint) => {
+        return (
+          <ControlPoint key={controlPoint.name} controlPoint={controlPoint} />
+        );
+      })}
+    </LayerGroup>
+  );
+}

client/src/components/controlpointslayer/index.ts

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

client/src/components/flightplan/FlightPlan.tsx

@@ -0,0 +1,33 @@
+import { Flight } from "../../api/flight";
+import { Polyline } from "react-leaflet";
+
+const BLUE_PATH = "#0084ff";
+const RED_PATH = "#c85050";
+
+interface FlightPlanProps {
+  flight: Flight;
+  selected: boolean;
+}
+
+function FlightPlanPath(props: FlightPlanProps) {
+  const color = props.flight.blue ? BLUE_PATH : RED_PATH;
+  const waypoints = props.flight.waypoints;
+  if (waypoints == null) {
+    return <></>;
+  }
+  const points = waypoints.map((waypoint) => waypoint.position);
+  return (
+    <Polyline
+      positions={points}
+      pathOptions={{ color: color, interactive: false }}
+    />
+  );
+}
+
+export default function FlightPlan(props: FlightPlanProps) {
+  return (
+    <>
+      <FlightPlanPath {...props} />
+    </>
+  );
+}

client/src/components/flightplan/index.ts

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

client/src/components/flightplanslayer/FlightPlansLayer.tsx

@@ -0,0 +1,20 @@
+import FlightPlan from "../flightplan";
+import { LayerGroup } from "react-leaflet";
+import { selectFlights } from "../../api/flightsSlice";
+import { useAppSelector } from "../../app/hooks";
+
+interface FlightPlansLayerProps {
+  blue: boolean;
+}
+
+export default function FlightPlansLayer(props: FlightPlansLayerProps) {
+  const atos = useAppSelector(selectFlights);
+  const flights = props.blue ? atos.blue : atos.red;
+  return (
+    <LayerGroup>
+      {Object.values(flights).map((flight) => {
+        return <FlightPlan key={flight.id} flight={flight} selected={false} />;
+      })}
+    </LayerGroup>
+  );
+}

client/src/components/flightplanslayer/index.ts

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

client/src/components/liberationmap/LiberationMap.css

@@ -0,0 +1,7 @@
+@import "~leaflet/dist/leaflet.css";
+
+.leaflet-container {
+  width: 100%;
+  height: 100%;
+  min-height: 100vh;
+}

client/src/components/liberationmap/LiberationMap.tsx

@@ -0,0 +1,22 @@
+import "./LiberationMap.css";
+
+import { BasemapLayer } from "react-esri-leaflet";
+import ControlPointsLayer from "../controlpointslayer";
+import FlightPlansLayer from "../flightplanslayer";
+import { LatLng } from "leaflet";
+import { MapContainer } from "react-leaflet";
+
+interface GameProps {
+  mapCenter: LatLng;
+}
+
+export default function LiberationMap(props: GameProps) {
+  return (
+    <MapContainer zoom={8} center={props.mapCenter}>
+      <BasemapLayer name="ImageryClarity" />
+      <ControlPointsLayer />
+      <FlightPlansLayer blue={true} />
+      <FlightPlansLayer blue={false} />
+    </MapContainer>
+  );
+}

client/src/components/liberationmap/index.ts

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