GameMap: Re-add cities during resize/reload of map

client/src/city/City.ts

@@ -13,6 +13,7 @@ import { Buidling } from "./Building";
 export interface CityOptions {
   player: AbstractPlayer;
   tile: Tile;
+  territory: Tile[];
   name: string;
 }
 
@@ -31,6 +32,7 @@ export class City extends ActorGroup {
   private outsideBorderColor: string;
   private buildings: Buidling[];
   private stats: Map<string, number>;
+  private statsPresent: boolean;
 
   constructor(options: CityOptions) {
     super({ x: 0, y: 0, z: 2, width: 0, height: 0 });
@@ -40,6 +42,7 @@ export class City extends ActorGroup {
     this.name = options.name;
     this.buildings = [];
     this.stats = new Map<string, number>();
+    this.statsPresent = false;
 
     this.innerBorderColor =
       this.player.getCivilizationData()["inside_border_color"];
@@ -49,12 +52,7 @@ export class City extends ActorGroup {
     this.territoryOverlays = [];
 
     //FIXME: Have the server communicate what tiles are our territory.
-    this.territory = [this.tile];
-    for (const adjTile of this.tile.getAdjacentTiles()) {
-      if (!adjTile) continue;
-
-      this.territory.push(adjTile);
-    }
+    this.territory = options.territory;
 
     this.nameLabel = new Label({
       text: this.name,
@@ -143,10 +141,16 @@ export class City extends ActorGroup {
           const statValue = stat[statType]; // Get the stat value
           this.stats.set(statType, statValue);
         }
+
+        this.statsPresent = true;
       },
     });
   }
 
+  public hasStats(): boolean {
+    return this.statsPresent;
+  }
+
   public getStat(stat: string): number {
     return this.stats.get(stat);
   }

client/src/map/GameMap.ts

@@ -64,11 +64,8 @@ export class GameMap {
       eventName: "newCity",
       parentObject: this,
       callback: (data) => {
-        const tile = this.tiles[data["tileX"]][data["tileY"]];
-        const player = AbstractPlayer.getPlayerByName(data["player"]);
-        const cityName = data["cityName"];
-        const city = new City({ tile: tile, player: player, name: cityName });
-        tile.setCity(city);
+        const city = this.getCityFromJSONData(data);
+        city.getTile().setCity(city); // Assign the city variable inside the tile variable.
         // Add the city actor to the scene (borders, nametag)
         Game.getCurrentScene().addActor(city);
       },
@@ -240,6 +237,7 @@ export class GameMap {
     this.tiles = [];
     const baseLayerTiles = [];
     const riverActors = [];
+    const cityJSONS: JSON[] = [];
 
     WebsocketClient.sendMessage({ event: "requestMap" });
 
@@ -338,6 +336,12 @@ export class GameMap {
 
             topLayerTiles.push(topLayerTile);
             this.topLayerTileActorList.push(topLayerTile);
+
+            // Add new city if it already exists in the world
+            if (topLayerTileTypes.includes("city")) {
+              const cityJSON = tileJSON["city"];
+              cityJSONS.push(cityJSON);
+            }
           }
 
           for (const jsonUnit of jsonUnits) {
@@ -417,6 +421,18 @@ export class GameMap {
             );
           }
 
+          // Now create any cities that already exist on the map
+          for (const cityJSON of cityJSONS) {
+            const city = this.getCityFromJSONData(cityJSON);
+            city.getTile().setCity(city);
+            scene.addActor(city);
+
+            WebsocketClient.sendMessage({
+              event: "requestCityStats",
+              cityName: city.getName(),
+            });
+          }
+
           Game.getCurrentScene().call("mapLoaded");
         }
       },
@@ -695,4 +711,24 @@ export class GameMap {
   public getTopLayerChunks() {
     return this.topLayerMapChunks;
   }
+
+  private getCityFromJSONData(data: JSON): City {
+    const tile = this.tiles[data["tileX"]][data["tileY"]];
+    const player = AbstractPlayer.getPlayerByName(data["player"]);
+    const cityName = data["cityName"];
+    const territory: Tile[] = [];
+    for (const territoryJSON of data["territory"]) {
+      territory.push(
+        this.tiles[territoryJSON["tileX"]][territoryJSON["tileY"]]
+      );
+    }
+    const city = new City({
+      tile: tile,
+      territory: territory,
+      player: player,
+      name: cityName,
+    });
+
+    return city;
+  }
 }

client/src/scene/type/InGameScene.ts

@@ -150,8 +150,6 @@ export class InGameScene extends Scene {
           );
         });*/
 
-      //FIXME: re-create cities if they already exist (resizing, loading in existing game).
-
       if (this.firstLoad) {
         WebsocketClient.sendMessage({ event: "loadedIn" });
       }
@@ -182,7 +180,7 @@ export class InGameScene extends Scene {
   }
 
   private openCityUI(city: City) {
-    if (city.getPlayer() != this.clientPlayer) {
+    if (city.getPlayer() != this.clientPlayer || !city.hasStats()) {
       return;
     }
 

server/src/city/City.ts

@@ -1,3 +1,4 @@
+import { ServerEvents } from "../Events";
 import { Game } from "../Game";
 import { Player } from "../Player";
 import { GameMap } from "../map/GameMap";
@@ -42,6 +43,19 @@ export class City {
     this.sendTerritoryUpdate();
 
     this.updateWorkedTiles({ sendStatUpdate: true });
+
+    ServerEvents.on({
+      eventName: "requestCityStats",
+      parentObject: this,
+      callback: (data, websocket) => {
+        const player = Game.getPlayerFromWebsocket(websocket);
+        if (this.name != data["cityName"] || this.player != player) {
+          return;
+        }
+
+        this.sendStatUpdate(player);
+      },
+    });
   }
 
   public updateWorkedTiles(options?: { sendStatUpdate: boolean }) {
@@ -66,7 +80,7 @@ export class City {
     }
 
     if (options.sendStatUpdate) {
-      this.sendStatUpdate();
+      this.sendStatUpdate(this.player);
     }
   }
 
@@ -80,6 +94,7 @@ export class City {
 
     this.buildings.push(buildingData);
 
+    //FIXME: Just append building data to stateUpdate
     // Send new-building packet to player
     this.player.sendNetworkEvent({
       event: "addBuilding",
@@ -95,10 +110,11 @@ export class City {
   /*
   Get the city-stat line, and send it to the player
 */
-  public sendStatUpdate() {
+  public sendStatUpdate(player: Player) {
     const cityStats = this.getStatline({ asArray: true });
 
-    this.player.sendNetworkEvent({
+    //FIXME: Append building data to stateUpdate
+    player.sendNetworkEvent({
       event: "updateCityStats",
       cityName: this.name,
       cityStats: cityStats,
@@ -193,4 +209,19 @@ export class City {
   public getName() {
     return this.name;
   }
+
+  public getJSON() {
+    const territoryCoords = this.territory.map((tile) => ({
+      tileX: tile.getX(),
+      tileY: tile.getY(),
+    }));
+
+    return {
+      cityName: this.name,
+      player: this.player.getName(),
+      tileX: this.tile.getX(),
+      tileY: this.tile.getY(),
+      territory: territoryCoords,
+    };
+  }
 }

server/src/map/GameMap.ts

@@ -735,10 +735,15 @@ export class GameMap {
     for (let x = 0; x < this.mapWidth; x += 4) {
       for (let y = 0; y < this.mapHeight; y += 4) {
         const chunkTiles = [];
+        const chunkCities = [];
 
         for (let chunkX = 0; chunkX < 4; chunkX++) {
           for (let chunkY = 0; chunkY < 4; chunkY++) {
-            chunkTiles.push(this.tiles[x + chunkX][y + chunkY].getTileJSON());
+            const tile = this.tiles[x + chunkX][y + chunkY];
+            if (tile.getCity()) {
+              chunkCities.push(tile.getCity());
+            }
+            chunkTiles.push(tile.getTileJSON());
           }
         }
 

server/src/map/Tile.ts

@@ -57,6 +57,10 @@ export class Tile {
     this.city = city;
   }
 
+  public getCity(): City {
+    return this.city;
+  }
+
   public addUnit(unit: Unit) {
     this.units.push(unit);
   }
@@ -116,6 +120,7 @@ export class Tile {
       x: this.x,
       y: this.y,
       movementCost: this.getMovementCost(),
+      city: this.city ? this.city.getJSON() : null,
     };
   }
 

server/src/state/type/InGameState.ts

@@ -103,10 +103,7 @@ export class InGameState extends State {
                 Game.getPlayers().forEach((gamePlayer) => {
                   gamePlayer.sendNetworkEvent({
                     event: "newCity",
-                    player: player.getName(),
-                    cityName: city.getName(),
-                    tileX: tile.getX(),
-                    tileY: tile.getY(),
+                    ...city.getJSON(),
                   });
                 });