display message when trade ship arrives

src/client/graphics/layers/EventsDisplay.ts

@@ -17,6 +17,7 @@ import { ClientID } from "../../../core/Schemas";
 import { Layer } from "./Layer";
 import { SendAllianceReplyIntentEvent } from "../../Transport";
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { onlyImages, sanitize } from '../../../core/Util';
 
 export enum MessageType {
   SUCCESS,
@@ -217,6 +218,7 @@ export class EventsDisplay extends LitElement implements Layer {
       createdAt: this.game.ticks(),
       highlight: true,
       type: event.type,
+      unsafeDescription: true,
     });
   }
 
@@ -342,7 +344,7 @@ export class EventsDisplay extends LitElement implements Layer {
           ${this.events.map((event, index) => html`
             <tr class="${event.highlight ? 'highlight' : ''} ${MessageType[event.type].toLowerCase()}">
               <td>
-                ${event.unsafeDescription ? unsafeHTML(event.description) : event.description}
+                ${event.unsafeDescription ? unsafeHTML(onlyImages(event.description)) : event.description}
                 ${event.buttons ? html`
                   <div class="button-container">
                     ${event.buttons.map(btn => html`

src/core/Util.ts

@@ -209,13 +209,19 @@ export function processName(name: string): string {
     );
 
     // Sanitize the final HTML, allowing styles and specific attributes
-    return DOMPurify.sanitize(withEmojiStyles, {
+    return onlyImages(withEmojiStyles)
+}
+
+export function onlyImages(html: string) {
+
+    return DOMPurify.sanitize(html, {
         ALLOWED_TAGS: ['span', 'img'],
         ALLOWED_ATTR: ['src', 'alt', 'class', 'style'],
         ALLOWED_URI_REGEXP: /^https:\/\/cdn\.jsdelivr\.net\/gh\/twitter\/twemoji/,
         ADD_ATTR: ['style']
     });
 }
+
 export function assertNever(x: never): never {
     throw new Error('Unexpected value: ' + x);
 }

src/core/execution/TradeShipExecution.ts

@@ -1,3 +1,5 @@
+import { MessageType } from "../../client/graphics/layers/EventsDisplay";
+import { renderNumber } from "../../client/graphics/Utils";
 import { AllPlayers, Cell, Execution, MutableGame, MutablePlayer, MutableUnit, Player, PlayerID, Tile, Unit, UnitType } from "../game/Game";
 import { AStar, PathFinder } from "../PathFinding";
 import { PseudoRandom } from "../PseudoRandom";
@@ -37,9 +39,13 @@ export class TradeShipExecution implements Execution {
         }
         if (this.index >= this.path.length) {
             this.active = false
+            const dist = manhattanDist(this.srcPort.tile().cell(), this.dstPort.tile().cell())
+            const gold = dist * 100
+            this.srcPort.owner().addGold(gold)
+            this.dstPort.owner().addGold(gold)
+            this.mg.displayMessage(`Trade ship from ${this.tradeShip.owner().displayName()} has reached your port, giving you ${renderNumber(gold)} gold`, MessageType.SUCCESS, this.dstPort.owner().id())
+            this.mg.displayMessage(`Your trade ship reached ${this.dstPort.owner().displayName()}, giving you ${renderNumber(gold)} gold`, MessageType.SUCCESS, this._owner)
             this.tradeShip.delete()
-            this.srcPort.owner().addGold(10_000)
-            this.dstPort.owner().addGold(10_000)
             return
         }
         this.tradeShip.move(this.path[this.index])