Front-end 'push' updates for SupplyRoutes

client/src/api/eventstream.tsx

@@ -22,6 +22,7 @@ import {
   FrontLine,
   IadsConnection,
   NavMesh,
+  SupplyRoute,
   Tgo,
   ThreatZones,
   UnculledZone,
@@ -32,6 +33,8 @@ import { threatZonesUpdated } from "./threatZonesSlice";
 import { unculledZonesUpdated } from "./unculledZonesSlice";
 import { LatLng } from "leaflet";
 import { updateIadsConnection, removeIadsConnection } from "./iadsNetworkSlice";
+import { IadsConnection } from "./_liberationApi";
+import { supplyRoutesUpdated } from "./supplyRoutesSlice";
 
 interface GameUpdateEvents {
   updated_flight_positions: { [id: string]: LatLng };
@@ -52,6 +55,7 @@ interface GameUpdateEvents {
   updated_control_points: ControlPoint[];
   updated_iads: IadsConnection[];
   deleted_iads: string[];
+  updated_supply_routes: SupplyRoute[];
   reset_on_map_center: LatLng | null;
   game_unloaded: boolean;
   new_turn: boolean;
@@ -135,6 +139,10 @@ export const handleStreamedEvents = (
     dispatch(updateIadsConnection(events.updated_iads));
   }
 
+  if (events.updated_supply_routes.length > 0) {
+    dispatch(supplyRoutesUpdated(events.updated_supply_routes));
+  }
+
   if (events.reset_on_map_center != null) {
     reloadGameState(dispatch);
   }

client/src/api/supplyRoutesSlice.ts

@@ -1,26 +1,46 @@
 import { RootState } from "../app/store";
 import { gameLoaded, gameUnloaded } from "./actions";
 import { SupplyRoute } from "./liberationApi";
-import { createSlice } from "@reduxjs/toolkit";
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
 
 interface SupplyRoutesState {
-  routes: SupplyRoute[];
+  routes: { [id: string]: SupplyRoute };
 }
 
 const initialState: SupplyRoutesState = {
-  routes: [],
+  routes: {},
 };
 
 export const supplyRoutesSlice = createSlice({
   name: "supplyRoutes",
   initialState,
-  reducers: {},
+  reducers: {
+    updated: (state, action: PayloadAction<SupplyRoute[]>) => {
+      for (const route of action.payload) {
+        const id = route.id;
+        let points = route.points;
+        if (points.length > 0) {
+          state.routes[id] = route;
+        } else if (id in state.routes) {
+          points = state.routes[id].points;
+          state.routes[id] = route;
+          state.routes[id].points = points;
+        } else {
+          console.log("Trying to update a route that doesn't exist without points...");
+        }
+      }
+    },
+  },
   extraReducers: (builder) => {
     builder.addCase(gameLoaded, (state, action) => {
-      state.routes = action.payload.supply_routes;
+      state.routes = {}
+      for (const route of action.payload.supply_routes)
+      {
+        state.routes[route.id] = route;
+      }
     });
     builder.addCase(gameUnloaded, (state) => {
-      state.routes = [];
+      state.routes = {};
     });
   },
 });
@@ -28,3 +48,5 @@ export const supplyRoutesSlice = createSlice({
 export const selectSupplyRoutes = (state: RootState) => state.supplyRoutes;
 
 export default supplyRoutesSlice.reducer;
+
+export const { updated: supplyRoutesUpdated } = supplyRoutesSlice.actions;

client/src/components/supplyroute/SupplyRoute.tsx

@@ -56,8 +56,7 @@ export default function SupplyRoute(props: SupplyRouteProps) {
   return (
     <Polyline
       positions={props.route.points}
-      color={color}
-      weight={weight}
+      pathOptions={{ color: color, weight: weight}}
       ref={(ref) => (path.current = ref)}
     >
       <SupplyRouteTooltip {...props} />

client/src/components/supplyrouteslayer/SupplyRoutesLayer.tsx

@@ -7,7 +7,7 @@ export default function SupplyRoutesLayer() {
   const routes = useAppSelector(selectSupplyRoutes).routes;
   return (
     <LayerGroup>
-      {routes.map((route) => {
+      {Object.values(routes).map( route => {
         return <SupplyRoute key={route.id} route={route} />;
       })}
     </LayerGroup>