- update trade module

- added support page with discord and github issues - added trade filter setting (Incoming & Outgoing, Incoming) - added trade layout setting (Top To Bottom, Bottom To Top) - added trade window to be transparent if no active trades and the window is pinned - update trade action finished to be always shown even if no trade has been initalized - fixed a focus issue occuring when using the trade whisper button
Kyusung4698 · Jun 22, 2020 · 2882754 · 2882754
1 parent 31e32ee
commit 2882754
Show file tree

Hide file tree

Showing 31 changed files with 699 additions and 77 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,14 @@
 # Changelog
 
+## 1.0.5 (2020-06-22)
+
+- added support page with discord and github issues
+- added trade filter setting (Incoming & Outgoing, Incoming)
+- added trade layout setting (Top To Bottom, Bottom To Top)
+- added trade window to be transparent if no active trades and the window is pinned
+- update trade action finished to be always shown even if no trade has been initalized
+- fixed a focus issue occuring when using the trade whisper button
+
 ## 1.0.4 (2020-06-19)
 
 - added 3.11 data

diff --git a/manifest.json b/manifest.json
@@ -146,9 +146,10 @@
                 "disable_rightclick": true,
                 "transparent": true,
                 "resizable": true,
+                "override_on_update": true,
                 "size": {
-                    "width": 1212,
-                    "height": 699
+                    "width": 310,
+                    "height": 400
                 }
             },
             "tradehighlight": {

diff --git a/overlay.babel b/overlay.babel
diff --git a/src/app/core/annotation/annotation.service.ts b/src/app/core/annotation/annotation.service.ts
@@ -90,8 +90,10 @@ const ANNOTATIONS: Annotation[] = [
         expressions: [AnnotationCondition.BookmarkOpened],
         skippable: true
     },
-    // TODO: Hide until sub is ready
-    // { id: 'support' },
+    {
+        id: 'support',
+        hotkey: Hotkey.SettingsToggle
+    },
     { id: 'thanks' }
 ];
 

diff --git a/src/app/core/config/app.ts b/src/app/core/config/app.ts
@@ -1 +1,2 @@
 export const APP_UID = 'cijcjjcjilpooaeppicpfibopeefaglkefjaeofl';
+export const APP_SUB_ID = 32;
diff --git a/src/app/layout/window/settings-window/settings-window.component.html b/src/app/layout/window/settings-window/settings-window.component.html
@@ -1,5 +1,5 @@
 <ng-container *ngIf="settings$ | async as settings">
-    <app-header name="PoE Overlay - Settings" [scrollable]="true">
+    <app-header name="PoE Overlay - Settings">
         <mat-tab-group mat-stretch-tabs animationDuration="0ms" [selectedIndex]="selectedIndex$ | async"
             (selectedIndexChange)="onSelectedIndexChange($event)">
             <mat-tab [label]="'settings.general' | translate">
@@ -21,17 +21,14 @@
                     </app-settings-feature-container>
                 </div>
             </mat-tab>
-            <!-- 
-                    TODO: Hide until sub is ready 
-                <mat-tab>
-                    <ng-template mat-tab-label>
-                        <span appAnnotation="support">{{'support.name' | translate}}</span>
-                    </ng-template>
-                    <div class="tab-content">
-                        <app-settings-support></app-settings-support>
-                    </div>
-                </mat-tab>
-                -->
+            <mat-tab>
+                <ng-template mat-tab-label>
+                    <span appAnnotation="support">{{'support.name' | translate}}</span>
+                </ng-template>
+                <div class="tab-content">
+                    <app-settings-support></app-settings-support>
+                </div>
+            </mat-tab>
         </mat-tab-group>
     </app-header>
 </ng-container>
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,4 +1,4 @@
-<div class="message" [class.incoming]="message.direction === 'incoming'" [class.toggled]="toggle$ | async"
+<div class="message" [class.even]="even" [class.incoming]="message.direction === 'incoming'" [class.toggled]="toggle$ | async"
     [class.joined]="message.joined$ | async" (click)="toggle$.next(!toggle$.value)"
     [appAnnotation]="'trade.' + message.direction">
     <div class="content">

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
@@ -1,19 +1,5 @@
 @import "../../../../../styles/variables";
 
-::ng-deep {
-  app-trade-message {
-    &:nth-child(even) {
-      .message {
-        background: adjust-color($black-transparent, $alpha: -0.2);
-      }
-    }
-
-    & + app-trade-message {
-      margin-top: 1px;
-    }
-  }
-}
-
 :host {
   display: block;
 }
@@ -30,6 +16,10 @@
   border-left: 6px solid;
   border-left-color: adjust-color($color: $purple, $alpha: -0.1);
 
+  &.even {
+    background: adjust-color($black-transparent, $alpha: -0.2);
+  }
+
   &.joined {
     border-top: 1px solid rgb(50, 205, 50);
     border-right: 1px solid rgb(50, 205, 50);
@@ -50,6 +40,7 @@
     top: -8px;
     right: -8px;
     display: none;
+    z-index: 1001;
   }
 
   &:hover {

diff --git a/src/app/modules/trade/component/trade-message/trade-message.component.ts b/src/app/modules/trade/component/trade-message/trade-message.component.ts
@@ -34,6 +34,9 @@ export class TradeMessageComponent implements OnInit {
   @Input()
   public settings: TradeFeatureSettings;
 
+  @Input()
+  public even: boolean;
+
   @Output()
   public dismiss = new EventEmitter<void>();
 
@@ -52,6 +55,7 @@ export class TradeMessageComponent implements OnInit {
       this.visible[TradeMessageAction.Wait] = true;
       this.visible[TradeMessageAction.ItemGone] = true;
       this.visible[TradeMessageAction.ItemHighlight] = true;
+      this.visible[TradeMessageAction.Finished] = true;
       if (this.settings.tradeSoundEnabled) {
         this.audio.play(AudioFile.Notification, this.settings.tradeSoundVolume / 100);
       }
@@ -105,12 +109,12 @@ export class TradeMessageComponent implements OnInit {
         this.hideHighlight();
         this.chat.trade(this.message.name);
         this.visible[TradeMessageAction.ItemHighlight] = false;
-        this.visible[TradeMessageAction.Finished] = true;
         break;
       case TradeMessageAction.ItemHighlight:
         this.toggleHighlight();
         break;
       case TradeMessageAction.Whisper:
+        window.blur();
         this.chat.whisper(this.message.name);
         break;
       case TradeMessageAction.Finished:

diff --git a/src/app/modules/trade/component/trade-settings/trade-settings.component.html b/src/app/modules/trade/component/trade-settings/trade-settings.component.html
@@ -7,6 +7,31 @@
             </mat-slide-toggle>
         </div>
     </div>
+    <div class="row">
+        <div class="col-6">
+            <mat-form-field>
+                <mat-label>{{'trade.layout' | translate}}</mat-label>
+                <mat-select [(value)]="settings.tradeLayout" (valueChange)="onChange()">
+                    <mat-option *ngFor="let layout of layouts.keys" [value]="layout">
+                        {{'trade.layouts.' + (layouts.values[layout] | lowercase) | translate}}
+                    </mat-option>
+                </mat-select>
+            </mat-form-field>
+        </div>
+        <div class="col-6">
+            <mat-form-field>
+                <mat-label>{{'trade.filter' | translate}}</mat-label>
+                <mat-select [(value)]="settings.tradeFilter" (valueChange)="onChange()">
+                    <mat-option *ngFor="let filter of filters.keys" [value]="filter">
+                        {{'trade.filters.' + (filters.values[filter] | lowercase) | translate}}
+                    </mat-option>
+                </mat-select>
+            </mat-form-field>
+        </div>
+    </div>
+</app-card>
+
+<app-card [title]="'trade.messages' | translate">
     <div class="row">
         <div class="col-6">
             <mat-form-field>

diff --git a/src/app/modules/trade/component/trade-settings/trade-settings.component.ts b/src/app/modules/trade/component/trade-settings/trade-settings.component.ts
@@ -1,7 +1,8 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { AudioFile, AudioService } from '@app/audio';
+import { EnumValues } from '@app/enum';
 import { FeatureSettingsComponent } from '@app/feature';
-import { TradeFeatureSettings } from '@modules/trade/trade-feature-settings';
+import { TradeFeatureSettings, TradeFilter, TradeLayout } from '@modules/trade/trade-feature-settings';
 
 @Component({
   selector: 'app-trade-settings',
@@ -12,6 +13,9 @@ import { TradeFeatureSettings } from '@modules/trade/trade-feature-settings';
 export class TradeSettingsComponent extends FeatureSettingsComponent<TradeFeatureSettings> {
   public displayWithVolume = (volume: number) => `${volume}%`;
 
+  public layouts = new EnumValues(TradeLayout);
+  public filters = new EnumValues(TradeFilter);
+
   constructor(private readonly audio: AudioService) {
     super();
   }

diff --git a/src/app/modules/trade/service/trade.service.ts b/src/app/modules/trade/service/trade.service.ts
@@ -1,5 +1,6 @@
 import { Injectable } from '@angular/core';
-import { TradeChatParserService, TradeExchangeMessage, TradeMessage, TradeParserType, TradePlayerJoinedArea } from '@shared/module/poe/trade/chat';
+import { TradeChatParserService, TradeExchangeMessage, TradeMessage, TradeParserType, TradePlayerJoinedArea, TradeWhisperDirection } from '@shared/module/poe/trade/chat';
+import { TradeFilter } from '../trade-feature-settings';
 import { TradeWindowData, TradeWindowService } from './trade-window.service';
 
 @Injectable({
@@ -23,7 +24,7 @@ export class TradeService {
         this.window.data$.next(data);
     }
 
-    public onLogLineAdd(line: string): void {
+    public onLogLineAdd(line: string, filter: TradeFilter): void {
         const data = this.window.data$.get();
         if (this.processRemoved(data)) {
             this.window.data$.next(data);
@@ -35,10 +36,15 @@ export class TradeService {
             case TradeParserType.TradeBulk:
             case TradeParserType.TradeMap:
                 const message = result as TradeExchangeMessage;
-                if (!this.processMessage(message, data.messages)) {
-                    data.messages.push(message);
+                const { direction } = message;
+                const shouldProcess = direction === TradeWhisperDirection.Incoming
+                    || (direction === TradeWhisperDirection.Outgoing && filter === TradeFilter.IncomingOutgoing);
+                if (shouldProcess) {
+                    if (!this.processMessage(message, data.messages)) {
+                        data.messages.push(message);
+                    }
+                    this.window.data$.next(data);
                 }
-                this.window.data$.next(data);
                 break;
             case TradeParserType.Whisper:
                 if (this.processWhisper(result as TradeMessage, data.messages)) {

diff --git a/src/app/modules/trade/trade-feature-settings.ts b/src/app/modules/trade/trade-feature-settings.ts
@@ -1,5 +1,15 @@
 import { FeatureSettings } from '@app/feature';
 
+export enum TradeLayout {
+    TopToBottom,
+    BottomToTop
+}
+
+export enum TradeFilter {
+    IncomingOutgoing,
+    Incoming
+}
+
 export interface TradeFeatureSettings extends FeatureSettings {
     tradeEnabled: boolean;
     tradeMessageWait: string;
@@ -12,4 +22,6 @@ export interface TradeFeatureSettings extends FeatureSettings {
     };
     tradeSoundEnabled: boolean;
     tradeSoundVolume: number;
+    tradeFilter: TradeFilter;
+    tradeLayout: TradeLayout;
 }
diff --git a/src/app/modules/trade/trade.module.ts b/src/app/modules/trade/trade.module.ts
@@ -9,7 +9,7 @@ import { BehaviorSubject, of } from 'rxjs';
 import { catchError } from 'rxjs/operators';
 import { TradeMessageActionComponent, TradeMessageBulkComponent, TradeMessageComponent, TradeMessageDirectionComponent, TradeMessageItemComponent, TradeMessageMapComponent, TradeMessageMapTierComponent, TradeSettingsComponent } from './component';
 import { TradeHighlightWindowService, TradeService, TradeWindowService } from './service';
-import { TradeFeatureSettings } from './trade-feature-settings';
+import { TradeFeatureSettings, TradeFilter, TradeLayout } from './trade-feature-settings';
 import { TradeHighlightWindowComponent, TradeWindowComponent } from './window';
 
 const WINDOWS = [
@@ -34,15 +34,15 @@ const WINDOWS = [
     imports: [SharedModule]
 })
 export class TradeModule implements FeatureModule<TradeFeatureSettings> {
-    private enabled = false;
+    private settings: TradeFeatureSettings;
 
     constructor(
         private readonly event: EventService,
         private readonly trade: TradeService,
         private readonly tradeWindow: TradeWindowService,
         private readonly highlightWindow: TradeHighlightWindowService,
         private readonly annotation: AnnotationService,
-        private readonly ngZone: NgZone, ) { }
+        private readonly ngZone: NgZone) { }
 
     public getConfig(): FeatureConfig<TradeFeatureSettings> {
         const config: FeatureConfig<TradeFeatureSettings> = {
@@ -57,7 +57,9 @@ export class TradeModule implements FeatureModule<TradeFeatureSettings> {
                 tradeStashFactor: {},
                 tradeWindowPinned: false,
                 tradeSoundEnabled: true,
-                tradeSoundVolume: 75
+                tradeSoundVolume: 75,
+                tradeFilter: TradeFilter.IncomingOutgoing,
+                tradeLayout: TradeLayout.TopToBottom
             }
         };
         return config;
@@ -76,7 +78,7 @@ export class TradeModule implements FeatureModule<TradeFeatureSettings> {
             this.highlightWindow.close().subscribe();
             this.trade.clear();
         }
-        this.enabled = settings.tradeEnabled;
+        this.settings = settings;
     }
 
     public onInfo(info: RunningGameInfo, settings: TradeFeatureSettings): void {
@@ -91,12 +93,12 @@ export class TradeModule implements FeatureModule<TradeFeatureSettings> {
             this.highlightWindow.close().subscribe();
             this.trade.clear();
         }
-        this.enabled = settings.tradeEnabled;
+        this.settings = settings;
     }
 
     public onLogLineAdd(line: string): void {
-        if (this.enabled) {
-            this.trade.onLogLineAdd(line);
+        if (this.settings?.tradeEnabled) {
+            this.trade.onLogLineAdd(line, this.settings.tradeFilter);
         }
     }
 

diff --git a/src/app/modules/trade/window/trade-window/trade-window.component.html b/src/app/modules/trade/window/trade-window/trade-window.component.html
@@ -1,19 +1,24 @@
-<div appResize>
-    <ng-container *ngIf="data$ | async as data">
-        <app-header [name]="'PoE Overlay - Trade (' + (data.messages.length - data.removed.length) + ')'" [width]="300"
-            [margin]="10" [closeable]="false" [pinnable]="true" [pinned]="data.settings.tradeWindowPinned"
-            (pinnedChange)="onPinnedChange($event)" (settingsToggle)="onSettingsToggle()">
-            <ng-container ngProjectAs="controls">
-                <mat-icon (click)="toggle = !toggle" class="indicator" [class.open]="toggle">keyboard_arrow_down
-                </mat-icon>
-            </ng-container>
-            <ng-container *ngIf="toggle">
-                <ng-container *ngFor="let message of data.messages">
-                    <app-trade-message *ngIf="!data.removed.includes(message)" [message]="message"
-                        [settings]="data.settings" (dismiss)="onDismiss(message)">
-                    </app-trade-message>
+<ng-container *ngIf="data$ | async as data">
+    <ng-container *ngIf="getMessages(data) as messages">
+        <div class="content" [class.pinned]="data.settings.tradeWindowPinned" [class.active]="messages.length">
+            <app-header [name]="'PoE Overlay - Trade (' + messages.length + ')'" [closeable]="false" [pinnable]="true"
+                [frame]="false" [pinned]="data.settings.tradeWindowPinned" [reverse]="data.settings.tradeLayout === 1"
+                (pinnedChange)="onPinnedChange($event)" (settingsToggle)="onSettingsToggle()">
+                <ng-container ngProjectAs="controls">
+                    <mat-icon (click)="toggle = !toggle" class="indicator"
+                        [class.open]="data.settings.tradeLayout === 1 ? !toggle : toggle">keyboard_arrow_down
+                    </mat-icon>
                 </ng-container>
-            </ng-container>
-        </app-header>
+                <ng-container *ngIf="toggle">
+                    <div class="messages" [class.reverse]="data.settings.tradeLayout === 1">
+                        <div class="message" *ngFor="let message of messages; even as even">
+                            <app-trade-message [message]="message" [even]="even" [settings]="data.settings"
+                                (dismiss)="onDismiss(message)">
+                            </app-trade-message>
+                        </div>
+                    </div>
+                </ng-container>
+            </app-header>
+        </div>
     </ng-container>
-</div>
+</ng-container>
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export const APP_UID = 'cijcjjcjilpooaeppicpfibopeefaglkefjaeofl';
		export const APP_SUB_ID = 32;