From 5d9b834696cb0d2ff0a25b1283fd1d96d5c869b3 Mon Sep 17 00:00:00 2001
From: bijx <bsamiee@hotmail.com>
Date: Wed, 7 Jan 2026 22:49:49 -0500
Subject: [PATCH] Feat: Infocard shows wilderness / irradiated terrain state
 (#2807)

If this PR fixes an issue, link it below. If not, delete these two
lines.
Resolves #2516

## Description:

Introduces a state to the Player Info Overlay which simply shows what
type of terrain the player is hovering on. This just builds on the
principles of continuous feedback when designing UX because players
react positively when the game responds to input action.

<img width="839" height="846" alt="image"
src="https://github.com/user-attachments/assets/4b2969e0-127d-4032-9c49-9cbff9bb2aeb"
/>

<img width="666" height="602" alt="image"
src="https://github.com/user-attachments/assets/5fd15ab1-98b1-472f-a83e-a1ee10338673"
/>



https://github.com/user-attachments/assets/7e39f53e-6d2e-479e-badd-b41484591b8b



## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

bijx
---
 resources/lang/en.json                        |  4 +++-
 .../graphics/layers/PlayerInfoOverlay.ts      | 24 +++++++++++++++++++
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/resources/lang/en.json b/resources/lang/en.json
index 5bbdd7b53..ab294e099 100644
--- a/resources/lang/en.json
+++ b/resources/lang/en.json
@@ -634,7 +634,9 @@
     "warships": "Warships",
     "health": "Health",
     "attitude": "Attitude",
-    "levels": "Levels"
+    "levels": "Levels",
+    "wilderness_title": "Wilderness",
+    "irradiated_wilderness_title": "Irradiated Wilderness"
   },
   "events_display": {
     "retreating": "retreating",
diff --git a/src/client/graphics/layers/PlayerInfoOverlay.ts b/src/client/graphics/layers/PlayerInfoOverlay.ts
index 97988b40c..810a18d8a 100644
--- a/src/client/graphics/layers/PlayerInfoOverlay.ts
+++ b/src/client/graphics/layers/PlayerInfoOverlay.ts
@@ -73,6 +73,12 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
   @state()
   private unit: UnitView | null = null;
 
+  @state()
+  private isWilderness: boolean = false;
+
+  @state()
+  private isIrradiatedWilderness: boolean = false;
+
   @state()
   private _isInfoVisible: boolean = false;
 
@@ -106,6 +112,8 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
     this.setVisible(false);
     this.unit = null;
     this.player = null;
+    this.isWilderness = false;
+    this.isIrradiatedWilderness = false;
   }
 
   public maybeShow(x: number, y: number) {
@@ -126,6 +134,13 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
         this.playerProfile = p;
       });
       this.setVisible(true);
+    } else if (owner && !owner.isPlayer() && this.game.isLand(tile)) {
+      if (this.game.hasFallout(tile)) {
+        this.isIrradiatedWilderness = true;
+      } else {
+        this.isWilderness = true;
+      }
+      this.setVisible(true);
     } else if (!this.game.isLand(tile)) {
       const units = this.game
         .units(UnitType.Warship, UnitType.TradeShip, UnitType.TransportShip)
@@ -520,6 +535,15 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
         <div
           class="bg-gray-800/70 backdrop-blur-xs shadow-xs rounded-lg shadow-lg transition-all duration-300  text-white text-lg md:text-base ${containerClasses}"
         >
+          ${this.isWilderness || this.isIrradiatedWilderness
+            ? html`<div class="p-2 font-bold">
+                ${translateText(
+                  this.isIrradiatedWilderness
+                    ? "player_info_overlay.irradiated_wilderness_title"
+                    : "player_info_overlay.wilderness_title",
+                )}
+              </div>`
+            : ""}
           ${this.player !== null ? this.renderPlayerInfo(this.player) : ""}
           ${this.unit !== null ? this.renderUnitInfo(this.unit) : ""}
         </div>