- added message actions

package.json

@@ -3,6 +3,7 @@
   "version": "1.0.1",
   "scripts": {
     "watch": "ng build --watch",
+    "watch:prod": "ng build --watch --prod",
     "lint": "ng lint --fix",
     "test": "ng test",
     "prepack": "ng build --prod",

src/app/modules/market/component/market-exchange/market-exchange.component.ts

@@ -1,5 +1,4 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, OnDestroy, OnInit, Output, TemplateRef, ViewChild } from '@angular/core';
-import { environment } from '@env/environment';
 import { ChatService } from '@shared/module/poe/chat';
 import { TradeFetchResultEntry, TradeFetchService } from '@shared/module/poe/trade';
 import { TradeExchangeRequest, TradeExchangeResponse, TradeExchangeService } from '@shared/module/poe/trade/exchange';
@@ -104,13 +103,7 @@ export class MarketExchangeComponent implements OnInit, OnDestroy {
     let copy = whisper.slice();
     copy = copy.replace('{0}', `${event.itemAmount}`);
     copy = copy.replace('{1}', `${event.valueAmount}`);
-
-    if (environment.production) {
-      this.chat.send(copy);
-    } else {
-      console.log(copy);
-      this.chat.send('/dnd');
-    }
+    this.chat.send(copy);
   }
 
   private clear(): void {

src/app/modules/market/component/market-item-search/market-item-search.component.ts

@@ -1,5 +1,4 @@
 import { ChangeDetectionStrategy, Component, EventEmitter, OnDestroy, OnInit, Output, TemplateRef, ViewChild } from '@angular/core';
-import { environment } from '@env/environment';
 import { ChatService } from '@shared/module/poe/chat';
 import { TradeFetchEntryListing, TradeFetchResultEntry, TradeFetchService, TradeSearchRequest, TradeSearchResponse, TradeSearchService } from '@shared/module/poe/trade';
 import { BehaviorSubject, Observable, of, Subject } from 'rxjs';
@@ -108,12 +107,7 @@ export class MarketItemSearchComponent implements OnInit, OnDestroy {
   }
 
   public onSend(listing: TradeFetchEntryListing): void {
-    if (environment.production) {
-      this.chat.send(listing.whisper);
-    } else {
-      console.log(listing.whisper);
-      this.chat.send('/dnd');
-    }
+    this.chat.send(listing.whisper);
   }
 
   private clear(): void {

src/app/modules/trade/class/trade-message-action.ts

@@ -2,7 +2,9 @@ export enum TradeMessageAction {
     Invite = 'invite',
     Wait = 'wait',
     ItemGone = 'item-gone',
+    OfferExpired = 'offer-expired',
     Resend = 'resend',
+    Interested = 'interested',
     Trade = 'trade',
     ItemHighlight = 'item-highlight',
     Whisper = 'whisper',

src/app/modules/trade/component/trade-message-action/trade-message-action.component.html

@@ -9,5 +9,8 @@
         <mat-icon *ngSwitchCase="'whisper'">chat</mat-icon>
         <mat-icon *ngSwitchCase="'finished'">done</mat-icon>
         <mat-icon *ngSwitchCase="'dismiss'">close</mat-icon>
+        <mat-icon *ngSwitchCase="'interested'">hearing</mat-icon>        
+        <mat-icon *ngSwitchCase="'offer-expired'">hearing_disabled</mat-icon>        
     </ng-container>
-</button>
+</button>
+

src/app/modules/trade/component/trade-message-item/trade-message-item.component.html

@@ -1,5 +1,5 @@
 <div class="item" [class.reverse]="message.direction === 'outgoing'">
-    <div class="name">{{message.itemName}}</div>
+    <div class="name" [title]="message.itemName">{{message.itemName | truncateText: 18}}</div>
     <app-trade-message-direction></app-trade-message-direction>
     <div class="price" *ngIf="message.price && message.currencyType">
         <app-trade-static-frame [count]="message.price" [id]="message.currencyType">

src/app/modules/trade/component/trade-message-item/trade-message-item.component.scss

@@ -1,9 +1,30 @@
+:host,
 .item {
   display: flex;
+  width: 100%;
+}
+
+.name,
+.price {
+  display: flex;
+  width: 100%;
+}
+
+.item {
   flex-direction: row;
   line-height: 32px;
 
   &.reverse {
     flex-direction: row-reverse;
+
+    .price {
+      justify-content: flex-end;
+    }
+  }
+
+  &:not(.reverse) {
+    .name {
+      justify-content: flex-end;
+    }
   }
 }

src/app/modules/trade/component/trade-message-map-tier/trade-message-map-tier.component.html

@@ -1,9 +1,9 @@
-<div class="list">
+<div class="list" [class.left]="left">
     <div class="tier">{{list.tier}}</div>
     <div class="maps">
-        <span class="map" *ngFor="let map of list.maps;last as last" [title]="map">
-            <ng-container *ngIf="last">{{map}}</ng-container>
-            <ng-container *ngIf="!last">{{map}},&nbsp;</ng-container>
-        </span>
+        <div *ngFor="let map of list.maps;last as last" [title]="map">
+            <ng-container *ngIf="last">{{map | truncateText:12}}</ng-container>
+            <ng-container *ngIf="!last">{{map | truncateText:12}},&nbsp;</ng-container>
+        </div>
     </div>
 </div>

src/app/modules/trade/component/trade-message-map-tier/trade-message-map-tier.component.scss

@@ -1,18 +1,18 @@
 @import "../../../../../styles/variables";
 
+:host,
 .list {
   display: flex;
+  width: 100%;
+}
+
+.list {
+  &.left {
+    justify-content: flex-end;
+  }
 }
 
 .tier {
   color: $light-dark-grey;
   padding-right: $gutter-half;
 }
-
-.map {
-  display: block;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  width: 100px;
-}

src/app/modules/trade/component/trade-message-map-tier/trade-message-map-tier.component.ts

@@ -10,4 +10,7 @@ import { TradeMapList } from '@shared/module/poe/trade/chat';
 export class TradeMessageMapTierComponent {
   @Input()
   public list: TradeMapList;
+
+  @Input()
+  public left: boolean;
 }

src/app/modules/trade/component/trade-message-map/trade-message-map.component.html

@@ -1,5 +1,5 @@
 <div class="item">
-    <app-trade-message-map-tier [list]="message.maps1"></app-trade-message-map-tier>
+    <app-trade-message-map-tier [list]="message.maps1" [left]="true"></app-trade-message-map-tier>
     <app-trade-message-direction></app-trade-message-direction>
     <app-trade-message-map-tier [list]="message.maps2"></app-trade-message-map-tier>
 </div>

src/app/modules/trade/component/trade-message-map/trade-message-map.component.scss

@@ -1,3 +1,5 @@
+:host,
 .item {
   display: flex;
+  width: 100%;
 }

src/app/modules/trade/component/trade-message/trade-message.component.html

@@ -10,6 +10,8 @@
     <div class="actions">
         <app-trade-message-action action="wait" [visible]="visible" (execute)="onActionExecute($event)">
         </app-trade-message-action>
+        <app-trade-message-action action="interested" [visible]="visible" (execute)="onActionExecute($event)">
+        </app-trade-message-action>
         <app-trade-message-action action="resend" [visible]="visible" (execute)="onActionExecute($event)">
         </app-trade-message-action>
         <app-trade-message-action action="whisper" [visible]="visible" (execute)="onActionExecute($event)">
@@ -20,9 +22,11 @@
         </app-trade-message-action>
         <app-trade-message-action action="item-highlight" [visible]="visible" (execute)="onActionExecute($event)">
         </app-trade-message-action>
+        <app-trade-message-action action="finished" [visible]="visible" (execute)="onActionExecute($event)">
+        </app-trade-message-action>
         <app-trade-message-action action="item-gone" [visible]="visible" (execute)="onActionExecute($event)">
         </app-trade-message-action>
-        <app-trade-message-action action="finished" [visible]="visible" (execute)="onActionExecute($event)">
+        <app-trade-message-action action="offer-expired" [visible]="visible" (execute)="onActionExecute($event)">
         </app-trade-message-action>
         <app-trade-message-action action="dismiss" [visible]="visible" (execute)="onActionExecute($event)">
         </app-trade-message-action>

src/app/modules/trade/component/trade-message/trade-message.component.scss

@@ -11,15 +11,16 @@
 }
 
 .message {
+  position: relative;
   display: flex;
-  border-left: 5px solid;
+  border-left: 6px solid;
 
   &.incoming {
-    border-color: red;
+    border-color: lightgreen;
   }
 
   &.outgoing {
-    border-color: lightgreen;
+    border-color: red;
   }
 }
 
@@ -37,5 +38,7 @@
 }
 
 .actions {
-  align-items: center;
+  &.spacer {
+    margin-left: 35px;
+  }
 }

src/app/modules/trade/component/trade-message/trade-message.component.ts

@@ -1,6 +1,11 @@
-import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { OWGamesEvents } from '@app/odk';
 import { TradeMessageAction, TradeMessageActionState } from '@modules/trade/class';
+import { ChatService } from '@shared/module/poe/chat';
+import { EventInfo } from '@shared/module/poe/poe-event-info';
 import { TradeExchangeMessage, TradeWhisperDirection } from '@shared/module/poe/trade/chat';
+import { of, throwError } from 'rxjs';
+import { catchError, flatMap, map } from 'rxjs/operators';
 
 @Component({
   selector: 'app-trade-message',
@@ -15,27 +20,101 @@ export class TradeMessageComponent implements OnInit {
   @Input()
   public message: TradeExchangeMessage;
 
+  @Output()
+  public dismiss = new EventEmitter<void>();
+
+  constructor(private readonly chat: ChatService) { }
+
   public ngOnInit(): void {
+    this.visible[TradeMessageAction.Invite] = true;
+    this.visible[TradeMessageAction.Trade] = true;
+    this.visible[TradeMessageAction.Whisper] = true;
+    this.visible[TradeMessageAction.Dismiss] = true;
     if (this.message.direction === TradeWhisperDirection.Incoming) {
-      this.visible[TradeMessageAction.Invite] = true;
-      this.visible[TradeMessageAction.Trade] = true;
       this.visible[TradeMessageAction.Wait] = true;
       this.visible[TradeMessageAction.ItemGone] = true;
       this.visible[TradeMessageAction.ItemHighlight] = true;
-      this.visible[TradeMessageAction.Whisper] = true;
     } else {
-      this.visible[TradeMessageAction.Invite] = true;
-      this.visible[TradeMessageAction.Trade] = true;
       this.visible[TradeMessageAction.Resend] = true;
       this.visible[TradeMessageAction.Finished] = true;
-      this.visible[TradeMessageAction.Whisper] = true;
-      this.visible[TradeMessageAction.Dismiss] = true;
+      this.visible[TradeMessageAction.OfferExpired] = true;
     }
   }
 
   public onActionExecute(action: TradeMessageAction): void {
     this.activated[action] = true;
 
-    // todo: execute action
+    switch (action) {
+      case TradeMessageAction.Invite:
+        this.chat.invite(this.message.name);
+        break;
+      case TradeMessageAction.Wait:
+        OWGamesEvents.getInfo<EventInfo>().pipe(
+          catchError(() => of(null)),
+          map((info: EventInfo) => {
+            const context = { location: 'unknown' };
+            if (info?.match_info?.current_zone?.length > 2) {
+              const zone = info.match_info.current_zone;
+              context.location = zone.slice(1, zone.length - 1);
+            }
+            return context;
+          })
+        ).subscribe(context => {
+          this.chat.whisper(this.message.name, 'wait @location', context);
+        });
+        this.visible[TradeMessageAction.Wait] = false;
+        this.visible[TradeMessageAction.Interested] = true;
+        break;
+      case TradeMessageAction.Interested:
+        this.chat.whisper(this.message.name, 'interested');
+        break;
+      case TradeMessageAction.ItemGone:
+        this.chat.whisper(this.message.name, 'item gone');
+        this.dismiss.next();
+        break;
+      case TradeMessageAction.OfferExpired:
+        this.chat.whisper(this.message.name, 'offer expired');
+        this.dismiss.next();
+        break;
+      case TradeMessageAction.Resend:
+        this.chat.whisper(this.message.name, this.message.message);
+        break;
+      case TradeMessageAction.Trade:
+        this.chat.trade(this.message.name);
+        this.visible[TradeMessageAction.ItemHighlight] = false;
+        this.visible[TradeMessageAction.Finished] = true;
+        break;
+      case TradeMessageAction.ItemHighlight:
+        // TODO: Highlight item
+        console.log('TODO: highlight item');
+        break;
+      case TradeMessageAction.Whisper:
+        this.chat.whisper(this.message.name);
+        break;
+      case TradeMessageAction.Finished:
+        this.chat.whisper(this.message.name, 'thanks');
+        if (this.message.direction === TradeWhisperDirection.Outgoing) {
+          OWGamesEvents.getInfo<EventInfo>().pipe(
+            flatMap((info: EventInfo) => {
+              if (info?.me?.character_name?.length > 2) {
+                const name = info.me.character_name;
+                return of(name.slice(1, name.length - 1));
+              }
+              return throwError('character name was not set.');
+            })
+          ).subscribe(name => {
+            this.chat.kick(name);
+          }, error => {
+            // TODO: error handling
+          });
+        } else {
+          this.chat.kick(this.message.name);
+        }
+        this.dismiss.next();
+        break;
+      case TradeMessageAction.Dismiss:
+        this.dismiss.next();
+        break;
+    }
   }
 }

src/app/modules/trade/service/trade-window.service.ts

@@ -9,7 +9,10 @@ import { Observable } from 'rxjs';
 const WINDOW_DATA_KEY = 'TRADE_WINDOW_DATA';
 
 export interface TradeWindowData {
+    // only modified by the background window
     messages: TradeExchangeMessage[];
+    // only modified by the trade window
+    removed: TradeExchangeMessage[];
 }
 
 @Injectable({
@@ -143,7 +146,8 @@ export class TradeWindowService {
                         ]
                     } as TradeMapList,
                 } as TradeMapMessage
-            ]
+            ],
+            removed: []
         }));
     }