InGameScene: Provide tile yields on hover & optimize label conformSize()

Author: RyanGrieb

client/src/Game.ts

@@ -231,7 +231,7 @@ export class GameMap {
       callback: (data) => {
         console.log("Received tile yields from server.");
         console.log(data);
-        //TODO: Store yields in a map, so we can access them later.
+        Tile.setTileYields(data["yields"])
       }
     });
   }

client/src/map/GameMap.ts

@@ -25,6 +25,7 @@ export class Tile extends Actor {
   public static HEIGHT = 32;
 
   private static loadedTileImages = new Map<string, HTMLImageElement>();
+  private static allTileStats: JSON;
 
   private tileTypes: string[];
   private adjacentTiles: Tile[];
@@ -89,6 +90,14 @@ export class Tile extends Actor {
     return tile2.getMovementCost();
   }
 
+  public static setTileYields(data: JSON) {
+    Tile.allTileStats = data;
+  }
+
+  public static getTileYields() {
+    return Tile.allTileStats;
+  }
+
   public async loadImage() {
     const key = JSON.stringify(this.tileTypes);
 
@@ -115,6 +124,27 @@ export class Tile extends Actor {
     });*/
   }
 
+  public getTileYield() {
+    // Use the static getter to ensure we always have the latest tile stats
+    const allTileStats = Tile.getTileYields();
+    if (!allTileStats) return undefined;
+
+    const tileYield: { [key: string]: number } = {};
+    for (const tileType of this.tileTypes) {
+      // Accept both upper and lower case keys for tileTypes
+      const yieldData = allTileStats[tileType] || allTileStats[tileType.toUpperCase()] || allTileStats[tileType.toLowerCase()];
+      if (yieldData && yieldData.stats) {
+        for (const statObj of yieldData.stats) {
+          for (const [key, value] of Object.entries(statObj)) {
+            tileYield[key] = (tileYield[key] || 0) + (typeof value === "number" ? value : 0);
+          }
+        }
+      }
+    }
+    // Return undefined if no yield found, otherwise the yield object
+    return Object.keys(tileYield).length > 0 ? tileYield : undefined;
+  }
+
   public setCity(city: City) {
     this.city = city;
     this.tileTypes.push("city");

client/src/map/Tile.ts

@@ -20,7 +20,7 @@ export interface OnNetworkEventOptions {
 export class NetworkEvents {
   private static storedEvents: Map<string, CallbackData[]>;
 
-  private constructor() {}
+  private constructor() { }
 
   public static call(eventName: string, data: JSON) {
     if (this.storedEvents.has(eventName)) {
@@ -111,7 +111,7 @@ export class NetworkEvents {
 export class WebsocketClient {
   private static websocket: WebSocket;
 
-  private constructor() {}
+  private constructor() { }
   // TODO: Add network events here with string & function that has arguments.
   // e.g. setScreen & screenType arg.
 
@@ -124,6 +124,7 @@ export class WebsocketClient {
 
     this.websocket.addEventListener("open", (event) => {
       console.log("Connected to server");
+      NetworkEvents.call("connected", JSON.parse("{}"));
     });
 
     this.websocket.addEventListener("message", (event) => {

client/src/network/Client.ts

@@ -1,4 +1,4 @@
-import { GameImage } from "../../Assets";
+import { GameImage, SpriteRegion } from "../../Assets";
 import { Game } from "../../Game";
 import { City } from "../../city/City";
 import { GameMap } from "../../map/GameMap";
@@ -20,6 +20,7 @@ export class InGameScene extends Scene {
   private players: AbstractPlayer[];
   private clientPlayer: ClientPlayer;
   private tileInformationLabel: Label;
+  private tileYieldActors: Actor[] = [];
   private statusBar: StatusBar;
   private cityDisplayInfo: CityDisplayInfo;
   private nextTurnButton: Button;
@@ -72,6 +73,8 @@ export class InGameScene extends Scene {
         text: "N/A",
         font: "16px serif",
         fontColor: "white",
+        shadowColor: "black",
+        lineWidth: 4,
         x: 0,
         y: 0,
         z: 5
@@ -131,9 +134,14 @@ export class InGameScene extends Scene {
       });
 
       this.on("tileHovered", (options) => {
-        if (!options.tile) {
-          this.tileInformationLabel.setText("");
-        } else {
+        // Remove previous yield icons
+        for (const actor of this.tileYieldActors) {
+          this.removeActor(actor);
+        }
+
+        this.tileYieldActors = [];
+
+        if (options.tile && !this.cityDisplayInfo) {
           let tileTypes: string = options.tile.getTileTypes().toString();
           tileTypes = tileTypes.replaceAll("_", " ");
           tileTypes = tileTypes.replaceAll(",", ", ");
@@ -148,15 +156,72 @@ export class InGameScene extends Scene {
 
           tileTypes = strArray.join("");
 
+          // Get tile yields
+          const yields = options.tile.getTileYield();
+
+          // Map stat keys to SpriteRegion
+          const statSpriteRegions: Record<string, SpriteRegion> = {
+            food: SpriteRegion.FOOD_ICON,
+            production: SpriteRegion.PRODUCTION_ICON,
+            gold: SpriteRegion.GOLD_ICON,
+            faith: SpriteRegion.FAITH_ICON,
+            morale: SpriteRegion.MORALE_ICON,
+            science: SpriteRegion.SCIENCE_ICON,
+            culture: SpriteRegion.CULTURE_ICON,
+          };
+
+          // Set the label text (without yields)
           this.tileInformationLabel.setText(
-            "[" +
-            options.tile.getGridX() +
-            "," +
-            options.tile.getGridY() +
-            "] " +
+            `[${options.tile.getGridX()},${options.tile.getGridY()}] ` +
             tileTypes +
             (options.tile.hasRiver() ? ", River" : "")
           );
+
+
+
+          this.tileInformationLabel.conformSize().then(() => {
+            // Positioning for icons (right after the label)
+            let iconX = this.tileInformationLabel.getX() + this.tileInformationLabel.getWidth();
+            const iconY = this.tileInformationLabel.getY() - 10;
+
+            if (yields) {
+              for (const [key, value] of Object.entries(yields)) {
+                if (typeof value === "number" && value > 0 && statSpriteRegions[key]) {
+                  // Create icon actor
+                  const iconActor = new Actor({
+                    image: Game.getInstance().getImage(GameImage.SPRITESHEET),
+                    spriteRegion: statSpriteRegions[key],
+                    x: iconX,
+                    y: iconY,
+                    width: 32,
+                    height: 32,
+                    z: 10,
+                    cameraApplies: false
+                  });
+                  this.addActor(iconActor);
+                  this.tileYieldActors.push(iconActor);
+
+                  // Create value label
+                  const valueLabel = new Label({
+                    text: value.toString(),
+                    font: "16px serif",
+                    fontColor: "white",
+                    shadowColor: "black",
+                    lineWidth: 4,
+                    x: iconX + iconActor.getWidth() - 6,
+                    y: this.tileInformationLabel.getY(),
+                    z: 10
+                  });
+                  this.addActor(valueLabel);
+                  this.tileYieldActors.push(valueLabel);
+
+                  // Move X for next icon
+                  iconX += 42;
+                }
+              }
+            }
+          });
+
         }
       });
       //DEBUG top layer chunks -
@@ -237,6 +302,10 @@ export class InGameScene extends Scene {
 
     this.removeActor(this.nextTurnButton);
     this.removeActor(this.tileInformationLabel);
+    this.tileInformationLabel.setText("");
+    this.tileYieldActors.forEach((actor) => {
+      this.removeActor(actor);
+    });
 
     this.addActor(this.closeCityDisplayButton);
   }

client/src/scene/type/InGameScene.ts

@@ -56,8 +56,8 @@ export class Button extends ActorGroup {
     this.textWidth = -1;
     this.textHeight = -1;
     this.callbackFunction = options.onClicked;
-    this.mouseEnterCallbackFunction = options.onMouseEnter || function () {};
-    this.mouseExitCallbackFunction = options.onMouseExit || function () {};
+    this.mouseEnterCallbackFunction = options.onMouseEnter || function () { };
+    this.mouseExitCallbackFunction = options.onMouseExit || function () { };
     this.font = options.font ?? "24px serif";
     this.fontColor = options.fontColor ?? "black";
     this.buttonImage = options.buttonImage || GameImage.BUTTON;
@@ -135,12 +135,9 @@ export class Button extends ActorGroup {
     super.draw(canvasContext); //FIXME: Don't draw until we know textWidth & height.
 
     if (this.textWidth == -1 && this.textHeight == -1) {
-      Game.getInstance()
-        .measureText(this.text, this.font)
-        .then(([textWidth, textHeight]) => {
-          this.textWidth = textWidth;
-          this.textHeight = textHeight;
-        });
+      const { width: textWidth, height: textHeight } = Game.getInstance().measureText(this.text, this.font);
+      this.textWidth = textWidth;
+      this.textHeight = textHeight;
       return; // Don't render text before we know the height & width of the text
     }
 

client/src/ui/Button.ts

@@ -123,7 +123,7 @@ export class Label extends Actor {
       this.height = wrappedHeight;
       this.unwrappedWordHeight = unwrappedWordHeight;
     } else {
-      const [textWidth, textHeight] = await Game.getInstance().measureText(this.text, this.font);
+      const { width: textWidth, height: textHeight } = Game.getInstance().measureText(this.text, this.font);
       this.width = textWidth;
       this.height = textHeight;
     }

client/src/ui/Label.ts

@@ -105,11 +105,8 @@ export class TextBox extends Actor {
 
   public draw(canvasContext: CanvasRenderingContext2D) {
     if (this.textHeight == -1) {
-      Game.getInstance()
-        .measureText("M", this.font)
-        .then(([width, height]) => {
-          this.textHeight = height;
-        });
+      const { height } = Game.getInstance().measureText("M", this.font);
+      this.textHeight = height;
     }
 
     Game.getInstance().drawRect({
@@ -167,11 +164,8 @@ export class TextBox extends Actor {
 
   public setText(text: string) {
     this.text = text;
-    Game.getInstance()
-      .measureText(this.text, this.font)
-      .then(([width, height]) => {
-        //this.textHeight = height;
-        this.blinkerX = this.x + 2 + width;
-      });
+    const { width } = Game.getInstance().measureText(this.text, this.font);
+    //this.textHeight = height;
+    this.blinkerX = this.x + 2 + width;
   }
 }

client/src/ui/Textbox.ts

@@ -666,6 +666,16 @@ export class GameMap {
     ];
     return values;
   }
+
+
+  public sendTileYieldsToPlayer(player: Player) {
+    // Send the full tile stats JSON from tiles.yml
+    player.sendNetworkEvent({
+      event: "tileYields",
+      yields: Tile.getAllTileStats()
+    });
+  }
+
   public sendMapChunksToPlayer(player: Player) {
     // Send the map-size to player
     player.sendNetworkEvent({

server/src/map/GameMap.ts

@@ -38,8 +38,7 @@ export class Tile {
 
     this.addTileType(tileType);
   }
-
-  public static getAllTileStats() {
+  public static getAllTileStats(): Record<string, any> {
     if (!Tile.allTileStats) {
       // Load available civilizations from config file
       const tileYAMLData = YAML.parse(fs.readFileSync("./config/tiles.yml", "utf-8"));