From 19d0b618691262de34617db56c25db57dfe71518 Mon Sep 17 00:00:00 2001 From: Evan Date: Tue, 11 Feb 2025 14:08:04 -0800 Subject: [PATCH] have events display show outgoing & incoming attacks --- src/client/Utils.ts | 5 +- src/client/graphics/layers/EventsDisplay.ts | 91 +++++++++++++++++++-- 2 files changed, 87 insertions(+), 9 deletions(-) diff --git a/src/client/Utils.ts b/src/client/Utils.ts index 7954126f9..744921aa8 100644 --- a/src/client/Utils.ts +++ b/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); - }, + } ); } diff --git a/src/client/graphics/layers/EventsDisplay.ts b/src/client/graphics/layers/EventsDisplay.ts index 407658016..9621185f8 100644 --- a/src/client/graphics/layers/EventsDisplay.ts +++ b/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` + + + ${this.incomingAttacks.map( + (attack) => html` +
+ ${renderTroops(attack.troops)} + ${( + this.game.playerBySmallID( + attack.attackerID + ) as PlayerView + )?.name()} +
+ ` + )} + + + ` + : ""} + ${this.outgoingAttacks.length > 0 + ? html` + + + ${this.outgoingAttacks.map( + (attack) => html` +
+ ${renderTroops(attack.troops)} + ${( + this.game.playerBySmallID(attack.targetID) as PlayerView + )?.name()} +
+ ` + )} + + + ` + : ""} + `; + } + 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 { ` )} + ${this.renderAttacks()} @@ -358,6 +435,6 @@ export class EventsDisplay extends LitElement implements Layer { } createRenderRoot() { - return this; // Required for Tailwind classes to work with Lit + return this; } }