Handle map reset when the game is loaded/unloaded.

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

Partial fix for
https://github.com/dcs-liberation/dcs_liberation/issues/2045 (now works
in the new map, old one not fixed yet).

client/src/api/actions.ts

@@ -0,0 +1,5 @@
+import Game from "./game";
+import { createAction } from "@reduxjs/toolkit";
+
+export const gameLoaded = createAction<Game>("game/loaded");
+export const gameUnloaded = createAction("game/unloaded");

client/src/api/controlPointsSlice.ts

@@ -1,4 +1,5 @@
 import { RootState } from "../app/store";
+import { gameLoaded, gameUnloaded } from "./actions";
 import { ControlPoint } from "./controlpoint";
 import { PayloadAction, createSlice } from "@reduxjs/toolkit";
 
@@ -14,21 +15,28 @@ export const controlPointsSlice = createSlice({
   name: "controlPoints",
   initialState,
   reducers: {
-    setControlPoints: (state, action: PayloadAction<ControlPoint[]>) => {
-      state.controlPoints = {};
-      for (const cp of action.payload) {
-        state.controlPoints[cp.id] = cp;
-      }
-    },
     updateControlPoint: (state, action: PayloadAction<ControlPoint>) => {
       const cp = action.payload;
       state.controlPoints[cp.id] = cp;
     },
   },
+  extraReducers: (builder) => {
+    builder.addCase(gameLoaded, (state, action) => {
+      state.controlPoints = action.payload.control_points.reduce(
+        (acc: { [key: number]: ControlPoint }, curr) => {
+          acc[curr.id] = curr;
+          return acc;
+        },
+        {}
+      );
+    });
+    builder.addCase(gameUnloaded, (state) => {
+      state.controlPoints = {};
+    });
+  },
 });
 
-export const { setControlPoints, updateControlPoint } =
-  controlPointsSlice.actions;
+export const { updateControlPoint } = controlPointsSlice.actions;
 
 export const selectControlPoints = (state: RootState) => state.controlPoints;
 

client/src/api/eventstream.tsx

@@ -1,4 +1,5 @@
 import { AppDispatch } from "../app/store";
+import { gameUnloaded } from "./actions";
 import backend from "./backend";
 import Combat from "./combat";
 import { endCombat, newCombat, updateCombat } from "./combatSlice";
@@ -19,6 +20,7 @@ import {
   updateFrontLine,
 } from "./frontLinesSlice";
 import FrontLine from "./frontline";
+import reloadGameState from "./gamestate";
 import Tgo from "./tgo";
 import { updateTgo } from "./tgosSlice";
 import { LatLng } from "leaflet";
@@ -41,6 +43,8 @@ interface GameUpdateEvents {
   deleted_front_lines: string[];
   updated_tgos: string[];
   updated_control_points: number[];
+  reset_on_map_center: LatLng | null;
+  game_unloaded: boolean;
 }
 
 export const handleStreamedEvents = (
@@ -114,4 +118,12 @@ export const handleStreamedEvents = (
       dispatch(updateControlPoint(cp));
     });
   }
+
+  if (events.reset_on_map_center != null) {
+    reloadGameState(dispatch);
+  }
+
+  if (events.game_unloaded) {
+    dispatch(gameUnloaded());
+  }
 };

client/src/api/flightsSlice.ts

@@ -1,4 +1,5 @@
 import { RootState } from "../app/store";
+import { gameLoaded, gameUnloaded } from "./actions";
 import { Flight } from "./flight";
 import { PayloadAction, createSlice } from "@reduxjs/toolkit";
 import { LatLng } from "leaflet";
@@ -17,9 +18,6 @@ export const flightsSlice = createSlice({
   name: "flights",
   initialState,
   reducers: {
-    clearFlights: (state) => {
-      state.flights = {};
-    },
     registerFlight: (state, action: PayloadAction<Flight>) => {
       const flight = action.payload;
       if (flight.id in state.flights) {
@@ -51,10 +49,25 @@ export const flightsSlice = createSlice({
       }
     },
   },
+  extraReducers: (builder) => {
+    builder.addCase(gameLoaded, (state, action) => {
+      state.selected = null;
+      state.flights = action.payload.flights.reduce(
+        (acc: { [key: string]: Flight }, curr) => {
+          acc[curr.id] = curr;
+          return acc;
+        },
+        {}
+      );
+    });
+    builder.addCase(gameUnloaded, (state) => {
+      state.selected = null;
+      state.flights = {};
+    });
+  },
 });
 
 export const {
-  clearFlights,
   registerFlight,
   unregisterFlight,
   updateFlight,

client/src/api/frontLinesSlice.ts

@@ -1,4 +1,5 @@
 import { RootState } from "../app/store";
+import { gameLoaded, gameUnloaded } from "./actions";
 import FrontLine from "./frontline";
 import { PayloadAction, createSlice } from "@reduxjs/toolkit";
 
@@ -14,12 +15,6 @@ export const frontLinesSlice = createSlice({
   name: "frontLines",
   initialState,
   reducers: {
-    setFrontLines: (state, action: PayloadAction<FrontLine[]>) => {
-      state.fronts = {};
-      for (const front of action.payload) {
-        state.fronts[front.id] = front;
-      }
-    },
     addFrontLine: (state, action: PayloadAction<FrontLine>) => {
       const front = action.payload;
       state.fronts[front.id] = front;
@@ -32,9 +27,23 @@ export const frontLinesSlice = createSlice({
       delete state.fronts[action.payload];
     },
   },
+  extraReducers: (builder) => {
+    builder.addCase(gameLoaded, (state, action) => {
+      state.fronts = action.payload.front_lines.reduce(
+        (acc: { [key: string]: FrontLine }, curr) => {
+          acc[curr.id] = curr;
+          return acc;
+        },
+        {}
+      );
+    });
+    builder.addCase(gameUnloaded, (state) => {
+      state.fronts = {};
+    });
+  },
 });
 
-export const { setFrontLines, addFrontLine, updateFrontLine, deleteFrontLine } =
+export const { addFrontLine, updateFrontLine, deleteFrontLine } =
   frontLinesSlice.actions;
 
 export const selectFrontLines = (state: RootState) => state.frontLines;

client/src/api/game.ts

@@ -0,0 +1,15 @@
+import { ControlPoint } from "./controlpoint";
+import { Flight } from "./flight";
+import FrontLine from "./frontline";
+import SupplyRoute from "./supplyroute";
+import Tgo from "./tgo";
+import { LatLngLiteral } from "leaflet";
+
+export default interface Game {
+  control_points: ControlPoint[];
+  tgos: Tgo[];
+  supply_routes: SupplyRoute[];
+  front_lines: FrontLine[];
+  flights: Flight[];
+  map_center: LatLngLiteral;
+}

client/src/api/gamestate.ts

@@ -0,0 +1,17 @@
+import { AppDispatch } from "../app/store";
+import { gameLoaded, gameUnloaded } from "./actions";
+import backend from "./backend";
+import Game from "./game";
+
+export default function reloadGameState(dispatch: AppDispatch) {
+  backend
+    .get("/game")
+    .catch((error) => console.log(`Error fetching game state: ${error}`))
+    .then((response) => {
+      if (response == null || response.data == null) {
+        dispatch(gameUnloaded());
+        return;
+      }
+      dispatch(gameLoaded(response.data as Game));
+    });
+}

client/src/api/mapSlice.ts

@@ -0,0 +1,30 @@
+import { RootState } from "../app/store";
+import { gameLoaded, gameUnloaded } from "./actions";
+import { createSlice } from "@reduxjs/toolkit";
+import { LatLngLiteral } from "leaflet";
+
+interface MapState {
+  center: LatLngLiteral;
+}
+
+const initialState: MapState = {
+  center: { lat: 0, lng: 0 },
+};
+
+const mapSlice = createSlice({
+  name: "map",
+  initialState: initialState,
+  reducers: {},
+  extraReducers: (builder) => {
+    builder.addCase(gameLoaded, (state, action) => {
+      state.center = action.payload.map_center;
+    });
+    builder.addCase(gameUnloaded, (state) => {
+      state.center = { lat: 0, lng: 0 };
+    });
+  },
+});
+
+export const selectMapCenter = (state: RootState) => state.map.center;
+
+export default mapSlice.reducer;

client/src/api/supplyRoutesSlice.ts

@@ -1,6 +1,7 @@
 import { RootState } from "../app/store";
+import { gameLoaded, gameUnloaded } from "./actions";
 import SupplyRoute from "./supplyroute";
-import { PayloadAction, createSlice } from "@reduxjs/toolkit";
+import { createSlice } from "@reduxjs/toolkit";
 
 interface SupplyRoutesState {
   routes: SupplyRoute[];
@@ -13,15 +14,17 @@ const initialState: SupplyRoutesState = {
 export const supplyRoutesSlice = createSlice({
   name: "supplyRoutes",
   initialState,
-  reducers: {
-    setSupplyRoutes: (state, action: PayloadAction<SupplyRoute[]>) => {
-      state.routes = action.payload;
-    },
+  reducers: {},
+  extraReducers: (builder) => {
+    builder.addCase(gameLoaded, (state, action) => {
+      state.routes = action.payload.supply_routes;
+    });
+    builder.addCase(gameUnloaded, (state) => {
+      state.routes = [];
+    });
   },
 });
 
-export const { setSupplyRoutes } = supplyRoutesSlice.actions;
-
 export const selectSupplyRoutes = (state: RootState) => state.supplyRoutes;
 
 export default supplyRoutesSlice.reducer;

client/src/api/tgosSlice.ts

@@ -1,4 +1,5 @@
 import { RootState } from "../app/store";
+import { gameLoaded, gameUnloaded } from "./actions";
 import { Tgo } from "./tgo";
 import { PayloadAction, createSlice } from "@reduxjs/toolkit";
 
@@ -14,20 +15,28 @@ export const tgosSlice = createSlice({
   name: "tgos",
   initialState,
   reducers: {
-    setTgos: (state, action: PayloadAction<Tgo[]>) => {
-      state.tgos = {};
-      for (const tgo of action.payload) {
-        state.tgos[tgo.id] = tgo;
-      }
-    },
     updateTgo: (state, action: PayloadAction<Tgo>) => {
       const tgo = action.payload;
       state.tgos[tgo.id] = tgo;
     },
   },
+  extraReducers: (builder) => {
+    builder.addCase(gameLoaded, (state, action) => {
+      state.tgos = action.payload.tgos.reduce(
+        (acc: { [key: string]: Tgo }, curr) => {
+          acc[curr.id] = curr;
+          return acc;
+        },
+        {}
+      );
+    });
+    builder.addCase(gameUnloaded, (state) => {
+      state.tgos = {};
+    });
+  },
 });
 
-export const { setTgos, updateTgo } = tgosSlice.actions;
+export const { updateTgo } = tgosSlice.actions;
 
 export const selectTgos = (state: RootState) => state.tgos;