have events display show outgoing & incoming attacks

src/client/Utils.ts

@@ -3,6 +3,7 @@ export function renderTroops(troops: number): string {
 }
 
 export function renderNumber(num: number) {
+  num = Math.max(num, 0);
   let numStr = "";
   if (num >= 10_000_000) {
     numStr = (num / 1000000).toFixed(1) + "M";
@@ -51,7 +52,7 @@ export function generateCryptoRandomUUID(): string {
         (
           c ^
           (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
-        ).toString(16),
+        ).toString(16)
     );
   }
 
@@ -63,6 +64,6 @@ export function generateCryptoRandomUUID(): string {
       const r: number = (Math.random() * 16) | 0;
       const v: number = c === "x" ? r : (r & 0x3) | 0x8;
       return v.toString(16);
-    },
+    }
   );
 }

src/client/graphics/layers/EventsDisplay.ts

@@ -1,8 +1,11 @@
 import { LitElement, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { EventBus } from "../../../core/EventBus";
-import { AllPlayers, MessageType } from "../../../core/game/Game";
-import { DisplayMessageUpdate } from "../../../core/game/GameUpdates";
+import { AllPlayers, MessageType, PlayerType } from "../../../core/game/Game";
+import {
+  AttackUpdate,
+  DisplayMessageUpdate,
+} from "../../../core/game/GameUpdates";
 import { EmojiUpdate } from "../../../core/game/GameUpdates";
 import { TargetPlayerUpdate } from "../../../core/game/GameUpdates";
 import { AllianceExpiredUpdate } from "../../../core/game/GameUpdates";
@@ -16,6 +19,7 @@ import { SendAllianceReplyIntentEvent } from "../../Transport";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { onlyImages, sanitize } from "../../../core/Util";
 import { GameView, PlayerView } from "../../../core/game/GameView";
+import { renderTroops } from "../../Utils";
 
 interface Event {
   description: string;
@@ -38,6 +42,8 @@ export class EventsDisplay extends LitElement implements Layer {
   public clientID: ClientID;
 
   private events: Event[] = [];
+  @state() private incomingAttacks: AttackUpdate[] = [];
+  @state() private outgoingAttacks: AttackUpdate[] = [];
 
   private updateMap = new Map([
     [GameUpdateType.DisplayEvent, (u) => this.onDisplayMessageEvent(u)],
@@ -54,6 +60,8 @@ export class EventsDisplay extends LitElement implements Layer {
   constructor() {
     super();
     this.events = [];
+    this.incomingAttacks = [];
+    this.outgoingAttacks = [];
   }
 
   init() {}
@@ -85,12 +93,26 @@ export class EventsDisplay extends LitElement implements Layer {
     if (!myPlayer) {
       return;
     }
+
     myPlayer.incomingAttacks().forEach((a) => {
-      // console.log(`got incoming attack: ${JSON.stringify(a)}`);
+      console.log(
+        `got type: ${(
+          this.game.playerBySmallID(a.attackerID) as PlayerView
+        ).type()}`
+      );
     });
-    myPlayer.outgoingAttacks().forEach((a) => {
-      // console.log(`got outgoing attack: ${JSON.stringify(a)}`);
+
+    // Update attacks
+    this.incomingAttacks = myPlayer.incomingAttacks().filter((a) => {
+      const t = (this.game.playerBySmallID(a.attackerID) as PlayerView).type();
+      return t != PlayerType.Bot;
     });
+
+    this.outgoingAttacks = myPlayer
+      .outgoingAttacks()
+      .filter((a) => a.targetID != 0);
+
+    this.requestUpdate();
   }
 
   private addEvent(event: Event) {
@@ -300,8 +322,62 @@ export class EventsDisplay extends LitElement implements Layer {
     }
   }
 
+  private renderAttacks() {
+    if (
+      this.incomingAttacks.length === 0 &&
+      this.outgoingAttacks.length === 0
+    ) {
+      return html``;
+    }
+
+    return html`
+      ${this.incomingAttacks.length > 0
+        ? html`
+            <tr class="border-t border-gray-700">
+              <td class="lg:p-3 p-1 text-left text-red-400">
+                ${this.incomingAttacks.map(
+                  (attack) => html`
+                    <div class="ml-2">
+                      ${renderTroops(attack.troops)}
+                      ${(
+                        this.game.playerBySmallID(
+                          attack.attackerID
+                        ) as PlayerView
+                      )?.name()}
+                    </div>
+                  `
+                )}
+              </td>
+            </tr>
+          `
+        : ""}
+      ${this.outgoingAttacks.length > 0
+        ? html`
+            <tr class="border-t border-gray-700">
+              <td class="lg:p-3 p-1 text-left text-blue-400">
+                ${this.outgoingAttacks.map(
+                  (attack) => html`
+                    <div class="ml-2">
+                      ${renderTroops(attack.troops)}
+                      ${(
+                        this.game.playerBySmallID(attack.targetID) as PlayerView
+                      )?.name()}
+                    </div>
+                  `
+                )}
+              </td>
+            </tr>
+          `
+        : ""}
+    `;
+  }
+
   render() {
-    if (this.events.length === 0) {
+    if (
+      this.events.length === 0 &&
+      this.incomingAttacks.length === 0 &&
+      this.outgoingAttacks.length === 0
+    ) {
       return html``;
     }
 
@@ -351,6 +427,7 @@ export class EventsDisplay extends LitElement implements Layer {
                 </tr>
               `
             )}
+            ${this.renderAttacks()}
           </tbody>
         </table>
       </div>
@@ -358,6 +435,6 @@ export class EventsDisplay extends LitElement implements Layer {
   }
 
   createRenderRoot() {
-    return this; // Required for Tailwind classes to work with Lit
+    return this;
   }
 }