- added stash highlight for trades

Kyusung4698 · Jun 14, 2020 · 15f81d0 · 15f81d0
1 parent ab47ac8
commit 15f81d0
Show file tree

Hide file tree

Showing 38 changed files with 353 additions and 245 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,10 +5,10 @@
 - added misc module
   - stash highlight on `alt+f`
 - added trade module
-  - support for poe.app, poemap.live, poetrade, official trade
+  - support for poe.app, poemap.live, poe.trade, official trade
   - view incoming/ outgoing trades
   - invite/ trade player
-  - highlight item in stash
+  - highlight items in stash
 - fixed a first time launching error occuring if the GGG API could not be reached
 
 ## 1.0.0 (2020-06-10)

diff --git a/overlay.babel b/overlay.babel
@@ -13956,6 +13956,59 @@
                             </translation>
                         </translations>
                     </concept_node>
+                    <concept_node>
+                        <name>no-price</name>
+                        <definition_loaded>false</definition_loaded>
+                        <description></description>
+                        <comment></comment>
+                        <default_text></default_text>
+                        <translations>
+                            <translation>
+                                <language>de-DE</language>
+                                <approved>false</approved>
+                            </translation>
+                            <translation>
+                                <language>en-US</language>
+                                <approved>false</approved>
+                            </translation>
+                            <translation>
+                                <language>es-ES</language>
+                                <approved>false</approved>
+                            </translation>
+                            <translation>
+                                <language>fr-FR</language>
+                                <approved>false</approved>
+                            </translation>
+                            <translation>
+                                <language>ko-KR</language>
+                                <approved>false</approved>
+                            </translation>
+                            <translation>
+                                <language>pl-PL</language>
+                                <approved>false</approved>
+                            </translation>
+                            <translation>
+                                <language>pt-BR</language>
+                                <approved>false</approved>
+                            </translation>
+                            <translation>
+                                <language>ru-RU</language>
+                                <approved>false</approved>
+                            </translation>
+                            <translation>
+                                <language>th-TH</language>
+                                <approved>false</approved>
+                            </translation>
+                            <translation>
+                                <language>zh-CHS</language>
+                                <approved>false</approved>
+                            </translation>
+                            <translation>
+                                <language>zh-CHT</language>
+                                <approved>false</approved>
+                            </translation>
+                        </translations>
+                    </concept_node>
                     <concept_node>
                         <name>not-found</name>
                         <definition_loaded>false</definition_loaded>

diff --git a/src/app/core/helper/index.ts b/src/app/core/helper/index.ts
@@ -0,0 +1 @@
+export * from './roman';
diff --git a/src/app/core/helper/roman.ts b/src/app/core/helper/roman.ts
@@ -0,0 +1,34 @@
+/* https://github.com/joshleaves/roman-numerals/ */
+export class Roman {
+    public static toArabic(input: string): number {
+        const roman = input.toUpperCase().match(/^(M{0,3})(CM|DC{0,3}|CD|C{0,3})(XC|LX{0,3}|XL|X{0,3})(IX|VI{0,3}|IV|I{0,3})$/);
+        if (!roman) {
+            throw new Error('toArabic expects a valid roman number');
+        }
+
+        let arabic = 0;
+        arabic += roman[1].length * 1000;
+        if (roman[2] === 'CM') {
+            arabic += 900;
+        } else if (roman[2] === 'CD') {
+            arabic += 400;
+        } else {
+            arabic += roman[2].length * 100 + (roman[2][0] === 'D' ? 400 : 0);
+        }
+        if (roman[3] === 'XC') {
+            arabic += 90;
+        } else if (roman[3] === 'XL') {
+            arabic += 40;
+        } else {
+            arabic += roman[3].length * 10 + (roman[3][0] === 'L' ? 40 : 0);
+        }
+        if (roman[4] === 'IX') {
+            arabic += 9;
+        } else if (roman[4] === 'IV') {
+            arabic += 4;
+        } else {
+            arabic += roman[4].length * 1 + (roman[4][0] === 'V' ? 4 : 0);
+        }
+        return arabic;
+    }
+}
diff --git a/src/app/layout/window/settings-window/settings-window.component.ts b/src/app/layout/window/settings-window/settings-window.component.ts
@@ -37,7 +37,7 @@ export class SettingsWindowComponent implements OnInit, AfterViewInit, OnDestroy
         this.settings$ = this.settings.get();
         this.features = this.modules.map(x => x.getConfig());
         this.queueSubscription = this.settingsQueue.pipe(
-            throttleTime(500),
+            throttleTime(500, undefined, { trailing: true, leading: false }),
             flatMap(settings => this.settings.put(settings))
         ).subscribe();
         this.dataSubscription = this.window.data$.on(({ activeFeature }) => {

diff --git a/src/app/modules/trade/component/trade-message-bulk/trade-message-bulk.component.html b/src/app/modules/trade/component/trade-message-bulk/trade-message-bulk.component.html
@@ -1,24 +1,24 @@
 <div class="item">
     <div class="value left">
-        <app-trade-static-frame [count]="message.count1" [id]="message.type1" [reverse]="true" [medium]="true">
+        <app-trade-static-frame [count]="count1" [id]="type1" [reverse]="true" [medium]="true">
         </app-trade-static-frame>
         <div class="rate">
-            <app-trade-static-frame [count]="1" [id]="message.type1" [reverse]="true" [small]="true">
+            <app-trade-static-frame [count]="1" [id]="type1" [reverse]="true" [small]="true">
             </app-trade-static-frame>
             <span>&nbsp;≈&nbsp;</span>
-            <app-trade-static-frame [amount]="message.count2 / message.count1" [id]="message.type2" [small]="true">
+            <app-trade-static-frame [amount]="count2 / count1" [id]="type2" [small]="true">
             </app-trade-static-frame>
         </div>
     </div>
     <app-trade-message-direction></app-trade-message-direction>
     <div class="value">
-        <app-trade-static-frame [count]="message.count2" [id]="message.type2" [medium]="true">
+        <app-trade-static-frame [count]="count2" [id]="type2" [medium]="true">
         </app-trade-static-frame>
         <div class="rate">
-            <app-trade-static-frame [count]="1" [id]="message.type2" [reverse]="true" [small]="true">
+            <app-trade-static-frame [count]="1" [id]="type2" [reverse]="true" [small]="true">
             </app-trade-static-frame>
             <span>&nbsp;≈&nbsp;</span>
-            <app-trade-static-frame [amount]="message.count1 / message.count2" [id]="message.type1" [small]="true">
+            <app-trade-static-frame [amount]="count1 / count2" [id]="type1" [small]="true">
             </app-trade-static-frame>
         </div>
     </div>

diff --git a/src/app/modules/trade/component/trade-message-bulk/trade-message-bulk.component.ts b/src/app/modules/trade/component/trade-message-bulk/trade-message-bulk.component.ts
@@ -8,22 +8,30 @@ import { TradeBulkMessage, TradeWhisperDirection } from '@shared/module/poe/trad
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class TradeMessageBulkComponent {
-  private _message: TradeBulkMessage;
+  @Input()
+  public type1: string;
 
-  public get message(): TradeBulkMessage {
-    return this._message;
-  }
+  @Input()
+  public type2: string;
+
+  @Input()
+  public count1: number;
+
+  @Input()
+  public count2: number;
 
   @Input()
   public set message(message: TradeBulkMessage) {
-    this._message = JSON.parse(JSON.stringify(message));
-    if (this._message.direction === TradeWhisperDirection.Outgoing) {
-      const count = this._message.count1;
-      this._message.count1 = this._message.count2;
-      this._message.count2 = count;
-      const type = this._message.type1;
-      this._message.type1 = this._message.type2;
-      this._message.type2 = type;
+    if (message.direction === TradeWhisperDirection.Outgoing) {
+      this.count1 = message.count2;
+      this.count2 = message.count1;
+      this.type1 = message.type2;
+      this.type2 = message.type1;
+    } else {
+      this.count1 = message.count1;
+      this.count2 = message.count2;
+      this.type1 = message.type1;
+      this.type2 = message.type2;
     }
   }
 }
diff --git a/src/app/modules/trade/component/trade-message-item/trade-message-item.component.html b/src/app/modules/trade/component/trade-message-item/trade-message-item.component.html
@@ -1,8 +1,14 @@
 <div class="item" [class.reverse]="message.direction === 'outgoing'">
-    <div class="name" [title]="message.itemName">{{message.itemName | truncateText: 20}}</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" [reverse]="message.direction === 'outgoing'" [medium]="true">
-        </app-trade-static-frame>
+    <div class="price">
+        <ng-container *ngIf="message.price && message.currencyType; else empty">
+            <app-trade-static-frame [count]="message.price" [id]="message.currencyType"
+                [reverse]="message.direction === 'outgoing'" [medium]="true">
+            </app-trade-static-frame>
+        </ng-container>
+        <ng-template #empty>
+            {{'trade.no-price' | translate}}
+        </ng-template>
     </div>
 </div>
diff --git a/src/app/modules/trade/component/trade-message-map/trade-message-map.component.html b/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" [left]="true"></app-trade-message-map-tier>
+    <app-trade-message-map-tier [list]="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>
+    <app-trade-message-map-tier [list]="maps2"></app-trade-message-map-tier>
 </div>
diff --git a/src/app/modules/trade/component/trade-message-map/trade-message-map.component.ts b/src/app/modules/trade/component/trade-message-map/trade-message-map.component.ts
@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
-import { TradeMapMessage, TradeWhisperDirection } from '@shared/module/poe/trade/chat';
+import { TradeMapList, TradeMapMessage, TradeWhisperDirection } from '@shared/module/poe/trade/chat';
 
 @Component({
   selector: 'app-trade-message-map',
@@ -8,19 +8,20 @@ import { TradeMapMessage, TradeWhisperDirection } from '@shared/module/poe/trade
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class TradeMessageMapComponent {
-  private _message: TradeMapMessage;
+  @Input()
+  public maps1: TradeMapList;
 
-  public get message(): TradeMapMessage {
-    return this._message;
-  }
+  @Input()
+  public maps2: TradeMapList;
 
   @Input()
   public set message(message: TradeMapMessage) {
-    this._message = JSON.parse(JSON.stringify(message));
-    if (this._message.direction === TradeWhisperDirection.Outgoing) {
-      const maps = this._message.maps1;
-      this._message.maps1 = this._message.maps2;
-      this._message.maps2 = maps;
+    if (message.direction === TradeWhisperDirection.Outgoing) {
+      this.maps1 = message.maps1;
+      this.maps2 = message.maps2;
+    } else {
+      this.maps1 = message.maps2;
+      this.maps2 = message.maps1;
     }
   }
 }
diff --git a/src/app/modules/trade/component/trade-message/trade-message.component.html b/src/app/modules/trade/component/trade-message/trade-message.component.html
@@ -1,14 +1,17 @@
-<div class="message" [class.incoming]="message.direction === 'incoming'" [class.toggled]="toggle"
-    (click)="toggle = !toggle">
+<div class="message" [class.incoming]="message.direction === 'incoming'" [class.toggled]="toggle$ | async"
+    [class.joined]="message.joined$ | async" (click)="toggle$.next(!toggle$.value)">
     <div class="content">
+        <div class="action" *ngIf="(toggle$ | async) === false">
+            <mat-icon (click)="onWait($event)" *ngIf="visible['wait']">pan_tool</mat-icon>
+        </div>
         <ng-container [ngSwitch]="message.type">
             <app-trade-message-item *ngSwitchCase="'item'" [message]="message"></app-trade-message-item>
             <app-trade-message-bulk *ngSwitchCase="'bulk'" [message]="message"></app-trade-message-bulk>
             <app-trade-message-map *ngSwitchCase="'map'" [message]="message"></app-trade-message-map>
             <div *ngSwitchDefault>Could not match message type: {{message.type}}</div>
         </ng-container>
     </div>
-    <div class="actions" *ngIf="toggle">
+    <div class="actions" *ngIf="(toggle$ | async) === true">
         <app-trade-message-action action="wait" [visible]="visible" [title]="' @' + message.name"
             (execute)="onActionExecute($event)">
         </app-trade-message-action>
@@ -18,7 +21,8 @@
         <app-trade-message-action action="resend" [visible]="visible" [title]="' @' + message.name"
             (execute)="onActionExecute($event)">
         </app-trade-message-action>
-        <app-trade-message-action action="whisper" [visible]="visible" [title]="' @' + message.name + (message.whispers | tradeWhisperTitle)"
+        <app-trade-message-action action="whisper" [visible]="visible"
+            [title]="' @' + message.name + (message.whispers$ | async | tradeWhisperTitle)"
             (execute)="onActionExecute($event)">
         </app-trade-message-action>
         <app-trade-message-action action="invite" [visible]="visible" [title]="' @' + message.name"

diff --git a/src/app/modules/trade/component/trade-message/trade-message.component.scss b/src/app/modules/trade/component/trade-message/trade-message.component.scss
@@ -18,12 +18,6 @@
   display: block;
 }
 
-.poe-close {
-  width: 18px;
-  height: 18px;
-  background-size: contain;
-}
-
 .message {
   position: relative;
   cursor: pointer;
@@ -32,11 +26,18 @@
   padding: $gutter-half $gutter;
   width: 300px;
   background: $black-transparent;
+  border: 1px solid transparent;
   border-left: 6px solid;
-  border-color: adjust-color($color: $purple, $alpha: -0.2);
+  border-left-color: adjust-color($color: $purple, $alpha: -0.1);
+
+  &.joined {
+    border-top: 1px solid rgb(50, 205, 50);
+    border-right: 1px solid rgb(50, 205, 50);
+    border-bottom: 1px solid rgb(50, 205, 50);
+  }
 
   &.incoming {
-    border-color: adjust-color($color: $orange, $alpha: -0.2);
+    border-left-color: adjust-color($color: $yellow, $alpha: -0.1);
   }
 
   &:hover,
@@ -46,8 +47,8 @@
 
   .dismiss {
     position: absolute;
-    top: -6px;
-    right: -6px;
+    top: -8px;
+    right: -8px;
     display: none;
   }
 
@@ -58,9 +59,38 @@
   }
 }
 
+.action {
+  position: absolute;
+  cursor: pointer;
+  top: 50%;
+  left: $gutter-half;
+  transform: translateY(-50%);
+
+  .mat-icon {
+    width: 16px;
+    height: 16px;
+    font-size: 16px;
+    opacity: 0.6;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+}
+
+.poe-close {
+  width: 22px;
+  height: 22px;
+  background-size: contain;
+}
+
 .content,
 .actions {
   display: flex;
   flex-direction: row;
   justify-content: center;
 }
+
+.actions {
+  padding-top: $gutter-half;
+}