GameMap: Use highest z-value when merging actors

client/src/Unit.ts

@@ -118,7 +118,7 @@ export class Unit extends ActorGroup {
     super({
       x: options.tile.getCenterPosition()[0] - 28 / 2,
       y: options.tile.getCenterPosition()[1] - 28 / 2,
-      z: 1,
+      z: 2,
       width: 28,
       height: 28,
     });
@@ -128,6 +128,7 @@ export class Unit extends ActorGroup {
       spriteRegion: SpriteRegion[options.name.toUpperCase()],
       x: options.tile.getCenterPosition()[0] - 28 / 2,
       y: options.tile.getCenterPosition()[1] - 28 / 2,
+      z: 2,
       width: 28,
       height: 28,
     });

client/src/city/City.ts

@@ -68,11 +68,16 @@ export class City extends ActorGroup {
       shadowColor: "black",
       lineWidth: 1,
       z: 4,
-      onClick: () => {
-        Game.getCurrentSceneAs<InGameScene>().toggleCityUI(this);
-      },
     });
 
+    if (
+      this.player == Game.getCurrentSceneAs<InGameScene>().getClientPlayer()
+    ) {
+      this.nameLabel.setOnClick(() => {
+        Game.getCurrentSceneAs<InGameScene>().toggleCityUI(this);
+      });
+    }
+
     this.nameLabel.conformSize().then(() => {
       this.nameLabel.setPosition(
         this.tile.getX() -
@@ -89,7 +94,7 @@ export class City extends ActorGroup {
           SpriteRegion[this.player.getCivilizationData()["icon_name"]],
         x: this.nameLabel.getX() - 14,
         y: this.nameLabel.getY(),
-        z: 14,
+        z: 4,
         width: 12,
         height: 12,
       });

client/src/map/GameMap.ts

@@ -646,6 +646,8 @@ export class GameMap {
           });
           updatedMapChunk.setPosition(chunk.getX(), chunk.getY());
 
+          console.log(updatedMapChunk.getZIndex());
+
           Game.getCurrentScene().addActor(updatedMapChunk);
           Game.getCurrentScene().removeActor(chunk);
 

client/src/scene/Actor.ts

@@ -280,6 +280,7 @@ export class Actor implements SceneObject {
     let greatestYHeight = 0; // The height of the actor w/ the greatest y.
     let greatestX = 0;
     let greatestY = 0;
+    let greatestZ = 0;
 
     options.actors.forEach((actor: Actor) => {
       if (actor.getX() > greatestX) {
@@ -290,6 +291,9 @@ export class Actor implements SceneObject {
         greatestY = actor.getY();
         greatestYHeight = actor.getHeight();
       }
+      if (actor.getZIndex() > greatestZ) {
+        greatestZ = actor.getZIndex();
+      }
     });
     canvas.width = options.canvasWidth || greatestX + greatestXWidth + 1000;
     canvas.height = options.canvasHeight || greatestY + greatestYHeight + 1000;
@@ -307,6 +311,7 @@ export class Actor implements SceneObject {
       image: image,
       x: options.actors[0].getX(),
       y: options.actors[0].getY(),
+      z: greatestZ,
       width: canvas.width,
       height: canvas.height,
     });

client/src/scene/type/InGameScene.ts

@@ -15,6 +15,7 @@ import { Scene } from "../Scene";
 
 export class InGameScene extends Scene {
   private players: AbstractPlayer[];
+  private clientPlayer: ClientPlayer;
   private tileInformationLabel: Label;
   private statusBar: StatusBar;
   private cityDisplayInfo: CityDisplayInfo;
@@ -43,7 +44,8 @@ export class InGameScene extends Scene {
           const playerJSON = data["players"][i];
           const civData = playerJSON["civData"];
           if (playerJSON["name"] === data["requestingName"]) {
-            this.players.push(new ClientPlayer(playerJSON["name"], civData));
+            this.clientPlayer = new ClientPlayer(playerJSON["name"], civData);
+            this.players.push(this.clientPlayer);
           } else {
             this.players.push(new ExternalPlayer(playerJSON["name"], civData));
           }
@@ -75,7 +77,7 @@ export class InGameScene extends Scene {
         text: "Next Turn",
         x: Game.getWidth() / 2 - 150 / 2,
         y: Game.getHeight() - 44,
-        z: 5,
+        z: 6,
         width: 150,
         height: 42,
         fontColor: "white",
@@ -166,7 +168,15 @@ export class InGameScene extends Scene {
     return this.players;
   }
 
+  public getClientPlayer() {
+    return this.clientPlayer;
+  }
+
   private openCityUI(city: City) {
+    if (city.getPlayer() != this.clientPlayer) {
+      return;
+    }
+
     this.cityDisplayInfo = new CityDisplayInfo(city);
     this.addActor(this.cityDisplayInfo);
 

client/src/ui/Label.ts

@@ -47,9 +47,15 @@ export class Label extends Actor {
     this.lineWidth = options.lineWidth ?? 0;
     this.shadowColor = options.shadowColor ?? this.color;
     this.shadowBlur = options.shadowBlur ?? 0;
-    this.onClickCallback = options.onClick;
     this.maxWidth = options.maxWidth;
 
+    if (options.onClick) {
+      this.setOnClick(options.onClick);
+    }
+  }
+
+  public setOnClick(onClickCallback: Function) {
+    this.onClickCallback = onClickCallback;
     if (this.onClickCallback) {
       this.on("clicked", () => {
         this.onClickCallback();