Add notifications for troops attacking wilderness (#363)

+Retreat cost no soldiers when coming back from wilderness
+ Also work with contamined area


![image](https://github.com/user-attachments/assets/6dda168c-aade-4ba5-ac2a-6de028fbaf6d)

![image](https://github.com/user-attachments/assets/89966516-e86d-4d06-8b32-3bf36179eea1)


## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced
- [x] I understand that submitting code with bugs that could have been
caught through manual testing blocks releases and new features for all
contributors

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

quentin.qsi

src/client/graphics/layers/EventsDisplay.ts

@@ -61,6 +61,7 @@ export class EventsDisplay extends LitElement implements Layer {
   private events: Event[] = [];
   @state() private incomingAttacks: AttackUpdate[] = [];
   @state() private outgoingAttacks: AttackUpdate[] = [];
+  @state() private outgoingLandAttacks: AttackUpdate[] = [];
   @state() private outgoingBoats: UnitView[] = [];
   @state() private _hidden: boolean = false;
   @state() private newEvents: number = 0;
@@ -134,6 +135,10 @@ export class EventsDisplay extends LitElement implements Layer {
       .outgoingAttacks()
       .filter((a) => a.targetID != 0);
 
+    this.outgoingLandAttacks = myPlayer
+      .outgoingAttacks()
+      .filter((a) => a.targetID == 0);
+
     this.outgoingBoats = myPlayer
       .units()
       .filter((u) => u.type() === UnitType.TransportShip);
@@ -396,14 +401,7 @@ export class EventsDisplay extends LitElement implements Layer {
       : event.description;
   }
 
-  private renderAttacks() {
-    if (
-      this.incomingAttacks.length === 0 &&
-      this.outgoingAttacks.length === 0
-    ) {
-      return html``;
-    }
-
+  private renderIncomingAttacks() {
     return html`
       ${this.incomingAttacks.length > 0
         ? html`
@@ -431,6 +429,11 @@ export class EventsDisplay extends LitElement implements Layer {
             </tr>
           `
         : ""}
+    `;
+  }
+
+  private renderOutgoingAttacks() {
+    return html`
       ${this.outgoingAttacks.length > 0
         ? html`
             <tr class="border-t border-gray-700">
@@ -467,6 +470,37 @@ export class EventsDisplay extends LitElement implements Layer {
     `;
   }
 
+  private renderOutgoingLandAttacks() {
+    return html`
+      ${this.outgoingLandAttacks.length > 0
+        ? html`
+            <tr class="border-t border-gray-700">
+              <td class="lg:p-3 p-1 text-left text-gray-400">
+                ${this.outgoingLandAttacks.map(
+                  (landAttack) => html`
+                    <button translate="no" class="ml-2">
+                      ${renderTroops(landAttack.troops)} Wilderness
+                    </button>
+
+                    ${!landAttack.retreating
+                      ? html`<button
+                          ${landAttack.retreating ? "disabled" : ""}
+                          @click=${() => {
+                            this.emitCancelAttackIntent(landAttack.id);
+                          }}
+                        >
+                          ❌
+                        </button>`
+                      : "(retreating...)"}
+                  `,
+                )}
+              </td>
+            </tr>
+          `
+        : ""}
+    `;
+  }
+
   private renderBoats() {
     if (this.outgoingBoats.length === 0) {
       return html``;
@@ -497,14 +531,6 @@ export class EventsDisplay extends LitElement implements Layer {
   }
 
   render() {
-    if (
-      this.events.length === 0 &&
-      this.incomingAttacks.length === 0 &&
-      this.outgoingAttacks.length === 0 &&
-      this.outgoingBoats.length === 0
-    ) {
-      return html``;
-    }
     this.events.sort((a, b) => {
       const aPrior = a.priority ?? 100000;
       const bPrior = b.priority ?? 100000;
@@ -602,7 +628,8 @@ export class EventsDisplay extends LitElement implements Layer {
                   </tr>
                 `,
               )}
-              ${this.renderAttacks()} ${this.renderBoats()}
+              ${this.renderIncomingAttacks()} ${this.renderOutgoingAttacks()}
+              ${this.renderOutgoingLandAttacks()} ${this.renderBoats()}
             </tbody>
           </table>
         </div>

src/core/execution/AttackExecution.ts

@@ -190,7 +190,11 @@ export class AttackExecution implements Execution {
 
   tick(ticks: number) {
     if (this.attack.retreated()) {
-      this.retreat(malusForRetreat);
+      if (this.attack.target().isPlayer()) {
+        this.retreat(malusForRetreat);
+      } else {
+        this.retreat();
+      }
       this.active = false;
       return;
     }

src/core/game/PlayerImpl.ts

@@ -92,6 +92,7 @@ export class PlayerImpl implements Player {
 
   public _incomingAttacks: Attack[] = [];
   public _outgoingAttacks: Attack[] = [];
+  public _outgoingLandAttacks: Attack[] = [];
 
   constructor(
     private mg: GameImpl,