From 757ef75e5b971fa84f3417962408614f6ef61006 Mon Sep 17 00:00:00 2001 From: Nicklas Ronge Date: Sat, 13 Jun 2020 23:17:41 +0200 Subject: [PATCH] - added stash highlight - updated trade window styles to be smaller - added header pinnable --- manifest.json | 13 ++ src/app/app.component.html | 1 + src/app/core/config/window-name.ts | 3 +- src/app/core/odk/ow-games-events-listener.ts | 5 +- .../background-window.component.ts | 2 +- .../market/service/market-window.service.ts | 5 +- .../trade/class/trade-message-action.ts | 4 +- .../trade-message-action.component.html | 9 +- .../trade-message-action.component.scss | 12 +- .../trade-message-action.component.ts | 8 + .../trade-message-bulk.component.html | 8 +- .../trade-message-bulk.component.scss | 4 - .../trade-message-item.component.html | 4 +- .../trade-message-item.component.scss | 2 +- .../trade-message-map-tier.component.html | 4 +- .../trade-message.component.html | 14 +- .../trade-message.component.scss | 52 +++++-- .../trade-message/trade-message.component.ts | 139 ++++++++++++------ src/app/modules/trade/service/index.ts | 2 + .../service/trade-highlight-window.service.ts | 68 +++++++++ .../trade/service/trade-window.service.ts | 22 ++- src/app/modules/trade/trade.module.ts | 11 +- src/app/modules/trade/window/index.ts | 2 + .../trade-highlight-window.component.html | 20 +++ .../trade-highlight-window.component.scss | 38 +++++ .../trade-highlight-window.component.ts | 37 +++++ .../trade-window/trade-window.component.html | 29 ++-- .../trade-window/trade-window.component.scss | 38 +++-- .../trade-window/trade-window.component.ts | 1 + .../component/header/header.component.html | 7 +- .../component/header/header.component.scss | 45 +++++- .../odk/component/header/header.component.ts | 19 +++ src/app/shared/module/poe/poe.module.ts | 9 +- src/app/shared/module/poe/trade/chat/index.ts | 2 + .../poe/trade/chat/trade-chat-whisper.pipe.ts | 14 ++ .../trade-static-frame.component.html | 7 +- .../trade-static-frame.component.scss | 12 ++ .../trade-static-frame.component.ts | 3 + src/app/shared/module/poe/window/index.ts | 1 + .../module/poe/window/window.service.ts | 26 ++++ 40 files changed, 548 insertions(+), 154 deletions(-) create mode 100644 src/app/modules/trade/service/trade-highlight-window.service.ts create mode 100644 src/app/modules/trade/window/trade-highlight-window/trade-highlight-window.component.html create mode 100644 src/app/modules/trade/window/trade-highlight-window/trade-highlight-window.component.scss create mode 100644 src/app/modules/trade/window/trade-highlight-window/trade-highlight-window.component.ts create mode 100644 src/app/shared/module/poe/trade/chat/trade-chat-whisper.pipe.ts create mode 100644 src/app/shared/module/poe/window/index.ts create mode 100644 src/app/shared/module/poe/window/window.service.ts diff --git a/manifest.json b/manifest.json index e62735c4..19b7d0f2 100644 --- a/manifest.json +++ b/manifest.json @@ -150,6 +150,19 @@ "width": 1212, "height": 699 } + }, + "tradehighlight": { + "file": "dist/poe-overlay-overwolf/index.html", + "in_game_only": true, + "block_top_window_navigation": true, + "disable_restore_animation": true, + "disable_rightclick": true, + "transparent": true, + "resizable": true, + "size": { + "width": 1212, + "height": 699 + } } }, "game_targeting": { diff --git a/src/app/app.component.html b/src/app/app.component.html index 9c55a8c9..a0b90c27 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -10,6 +10,7 @@ +
Could not match window with name: {{window.name}}
\ No newline at end of file diff --git a/src/app/core/config/window-name.ts b/src/app/core/config/window-name.ts index 10885610..c9787f56 100644 --- a/src/app/core/config/window-name.ts +++ b/src/app/core/config/window-name.ts @@ -8,5 +8,6 @@ export enum WindowName { Replay = 'replay', Launcher = 'launcher', Annotation = 'annotation', - Trade = 'trade' + Trade = 'trade', + TradeHighlight = 'tradehighlight' } diff --git a/src/app/core/odk/ow-games-events-listener.ts b/src/app/core/odk/ow-games-events-listener.ts index b3db3cfc..e463038d 100644 --- a/src/app/core/odk/ow-games-events-listener.ts +++ b/src/app/core/odk/ow-games-events-listener.ts @@ -16,9 +16,12 @@ export class OWGamesEventsListener { private readonly delegate: OWGamesEventListenerDelegate, private readonly requiredFeatures: string[]) { } - public start(): Observable { + public start(passive: boolean): Observable { this.unregisterEvents(); this.registerEvents(); + if (passive) { + return of(true); + } return this.setRequiredFeatures(); } diff --git a/src/app/layout/window/background-window/background-window.component.ts b/src/app/layout/window/background-window/background-window.component.ts index 389ec816..617a8c18 100644 --- a/src/app/layout/window/background-window/background-window.component.ts +++ b/src/app/layout/window/background-window/background-window.component.ts @@ -141,7 +141,7 @@ export class BackgroundWindowComponent implements OnInit, OnDestroy { this.annotationWindow.open(info.width, info.height), this.notificationWindow.open(info.width, info.height) ]).pipe( - flatMap(() => this.events.start()), + flatMap(() => this.events.start(false)), ).subscribe(result => { this.settings.get().subscribe(settings => { this.modules.forEach(module => { diff --git a/src/app/modules/market/service/market-window.service.ts b/src/app/modules/market/service/market-window.service.ts index 478cc681..002918f3 100644 --- a/src/app/modules/market/service/market-window.service.ts +++ b/src/app/modules/market/service/market-window.service.ts @@ -1,6 +1,7 @@ import { Injectable } from '@angular/core'; import { WindowName } from '@app/config'; import { OWGames, OWWindow } from '@app/odk'; +import { WindowService } from '@shared/module/poe/window'; import { Observable, of } from 'rxjs'; import { flatMap } from 'rxjs/operators'; @@ -10,7 +11,7 @@ import { flatMap } from 'rxjs/operators'; export class MarketWindowService { private readonly window: OWWindow; - constructor() { + constructor(private readonly poeWindow: WindowService) { this.window = new OWWindow(WindowName.Market); } @@ -22,7 +23,7 @@ export class MarketWindowService { } return OWGames.getRunningGameInfo().pipe( flatMap(({ height }) => { - const width = Math.round(height / 1.622); + const width = this.poeWindow.calculateWidth(height); return this.window.changeSize(width * 2, height).pipe( flatMap(() => this.window.changePosition(0, 0)) ); diff --git a/src/app/modules/trade/class/trade-message-action.ts b/src/app/modules/trade/class/trade-message-action.ts index 902ee900..0e1bc940 100644 --- a/src/app/modules/trade/class/trade-message-action.ts +++ b/src/app/modules/trade/class/trade-message-action.ts @@ -2,14 +2,12 @@ export enum TradeMessageAction { Invite = 'invite', Wait = 'wait', ItemGone = 'item-gone', - OfferExpired = 'offer-expired', Resend = 'resend', Interested = 'interested', Trade = 'trade', ItemHighlight = 'item-highlight', Whisper = 'whisper', - Finished = 'finished', - Dismiss = 'dismiss', + Finished = 'finished' } export interface TradeMessageActionState { diff --git a/src/app/modules/trade/component/trade-message-action/trade-message-action.component.html b/src/app/modules/trade/component/trade-message-action/trade-message-action.component.html index ed7e641f..0edf6155 100644 --- a/src/app/modules/trade/component/trade-message-action/trade-message-action.component.html +++ b/src/app/modules/trade/component/trade-message-action/trade-message-action.component.html @@ -1,4 +1,5 @@ - - + \ No newline at end of file diff --git a/src/app/modules/trade/component/trade-message-action/trade-message-action.component.scss b/src/app/modules/trade/component/trade-message-action/trade-message-action.component.scss index 8ab20b33..e6c4bc4c 100644 --- a/src/app/modules/trade/component/trade-message-action/trade-message-action.component.scss +++ b/src/app/modules/trade/component/trade-message-action/trade-message-action.component.scss @@ -11,10 +11,18 @@ } } +$size: 21px; + button { display: inline-flex; justify-content: center; padding: 0; - height: 32px; - width: 32px; + height: $size + 7px; + width: $size + 7px; + + .mat-icon { + height: $size; + width: $size; + font-size: $size; + } } diff --git a/src/app/modules/trade/component/trade-message-action/trade-message-action.component.ts b/src/app/modules/trade/component/trade-message-action/trade-message-action.component.ts index 9e3efe44..7c598d9b 100644 --- a/src/app/modules/trade/component/trade-message-action/trade-message-action.component.ts +++ b/src/app/modules/trade/component/trade-message-action/trade-message-action.component.ts @@ -13,6 +13,9 @@ export class TradeMessageActionComponent { return this.visible[this.action]; } + @Input() + public title = ''; + @Input() public action: TradeMessageAction; @@ -21,4 +24,9 @@ export class TradeMessageActionComponent { @Output() public execute = new EventEmitter(); + + public onExecute(event: MouseEvent): void { + event.stopPropagation(); + this.execute.next(this.action); + } } 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 index b9127096..a9aa0002 100644 --- 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,9 +1,9 @@
- +
- +  ≈  @@ -12,10 +12,10 @@
- +
- +  ≈  diff --git a/src/app/modules/trade/component/trade-message-bulk/trade-message-bulk.component.scss b/src/app/modules/trade/component/trade-message-bulk/trade-message-bulk.component.scss index 0fad3792..204bfe88 100644 --- a/src/app/modules/trade/component/trade-message-bulk/trade-message-bulk.component.scss +++ b/src/app/modules/trade/component/trade-message-bulk/trade-message-bulk.component.scss @@ -6,10 +6,6 @@ width: 100%; } -.item { - padding: 3px 0; -} - .value { width: 100%; 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 index be7bc319..5f5175c4 100644 --- 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,8 @@
-
{{message.itemName | truncateText: 18}}
+
{{message.itemName | truncateText: 20}}
- +
\ No newline at end of file diff --git a/src/app/modules/trade/component/trade-message-item/trade-message-item.component.scss b/src/app/modules/trade/component/trade-message-item/trade-message-item.component.scss index 77293788..55f6ae29 100644 --- a/src/app/modules/trade/component/trade-message-item/trade-message-item.component.scss +++ b/src/app/modules/trade/component/trade-message-item/trade-message-item.component.scss @@ -12,7 +12,7 @@ .item { flex-direction: row; - line-height: 32px; + line-height: 24px; &.reverse { flex-direction: row-reverse; diff --git a/src/app/modules/trade/component/trade-message-map-tier/trade-message-map-tier.component.html b/src/app/modules/trade/component/trade-message-map-tier/trade-message-map-tier.component.html index eff1d992..62ebc011 100644 --- a/src/app/modules/trade/component/trade-message-map-tier/trade-message-map-tier.component.html +++ b/src/app/modules/trade/component/trade-message-map-tier/trade-message-map-tier.component.html @@ -2,8 +2,8 @@
{{list.tier}}
- {{map | truncateText:12}} - {{map | truncateText:12}},  + {{map | truncateText:14}} + {{map | truncateText:14}}, 
\ No newline at end of file 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 index adff392f..f2f52af2 100644 --- 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 @@ -
+
@@ -7,14 +7,15 @@
Could not match message type: {{message.type}}
-
+
- + @@ -26,9 +27,8 @@ - - - - +
+
+
\ No newline at end of file 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 index c9b826c2..aa123cec 100644 --- a/src/app/modules/trade/component/trade-message/trade-message.component.scss +++ b/src/app/modules/trade/component/trade-message/trade-message.component.scss @@ -2,43 +2,63 @@ ::ng-deep { app-trade-message { - display: block; + &:nth-child(even) { + .message { + background: adjust-color($black-transparent, $alpha: 0.25); + } + } & + app-trade-message { - margin-top: $gutter-half; + margin-top: 1px; } } } +:host { + display: block; +} + +.poe-close { + width: 18px; + height: 18px; + background-size: contain; +} + .message { position: relative; display: flex; + width: 300px; + flex-direction: column; border-left: 6px solid; + background: adjust-color($black-transparent, $alpha: 0.3); + cursor: pointer; + padding: $gutter-half $gutter; &.incoming { - border-color: lightgreen; + border-color: adjust-color($color: $orange, $alpha: -0.2); } &.outgoing { - border-color: red; + border-color: adjust-color($color: $purple, $alpha: -0.2); } -} -.content { - background: $black-transparent; - padding: 0 $gutter-half * 2; - width: 300px; - justify-content: center; + .dismiss { + position: absolute; + top: -6px; + right: -2px; + display: none; + } + + &:hover { + .dismiss { + display: block; + } + } } .content, .actions { display: flex; flex-direction: row; -} - -.actions { - &.spacer { - margin-left: 35px; - } + justify-content: center; } 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 index 11792c0a..f6a26c33 100644 --- a/src/app/modules/trade/component/trade-message/trade-message.component.ts +++ b/src/app/modules/trade/component/trade-message/trade-message.component.ts @@ -1,9 +1,11 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { NotificationService } from '@app/notification'; import { OWGamesEvents } from '@app/odk'; import { TradeMessageAction, TradeMessageActionState } from '@modules/trade/class'; +import { TradeHighlightWindowService } from '@modules/trade/service'; 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 { TradeExchangeMessage, TradeItemMessage, TradeMapMessage, TradeParserType, TradeWhisperDirection } from '@shared/module/poe/trade/chat'; import { of, throwError } from 'rxjs'; import { catchError, flatMap, map } from 'rxjs/operators'; @@ -16,6 +18,7 @@ import { catchError, flatMap, map } from 'rxjs/operators'; export class TradeMessageComponent implements OnInit { public visible: TradeMessageActionState = {}; public activated: TradeMessageActionState = {}; + public toggle = false; @Input() public message: TradeExchangeMessage; @@ -23,24 +26,31 @@ export class TradeMessageComponent implements OnInit { @Output() public dismiss = new EventEmitter(); - constructor(private readonly chat: ChatService) { } + constructor( + private readonly chat: ChatService, + private readonly notification: NotificationService, + private readonly highlight: TradeHighlightWindowService) { } public ngOnInit(): void { + const type = this.message.type; 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.Wait] = true; + this.visible[TradeMessageAction.Wait] = type === TradeParserType.TradeItem; this.visible[TradeMessageAction.ItemGone] = true; - this.visible[TradeMessageAction.ItemHighlight] = true; + this.visible[TradeMessageAction.ItemHighlight] = type === TradeParserType.TradeItem || type === TradeParserType.TradeMap; } else { this.visible[TradeMessageAction.Resend] = true; this.visible[TradeMessageAction.Finished] = true; - this.visible[TradeMessageAction.OfferExpired] = true; + this.visible[TradeMessageAction.ItemHighlight] = type === TradeParserType.TradeMap; } } + public onDismiss(): void { + this.close(); + } + public onActionExecute(action: TradeMessageAction): void { this.activated[action] = true; @@ -49,19 +59,7 @@ export class TradeMessageComponent implements OnInit { this.chat.invite(this.message.name); break; case TradeMessageAction.Wait: - OWGamesEvents.getInfo().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.wait(); this.visible[TradeMessageAction.Wait] = false; this.visible[TradeMessageAction.Interested] = true; break; @@ -70,51 +68,102 @@ export class TradeMessageComponent implements OnInit { 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(); + this.close(); break; case TradeMessageAction.Resend: this.chat.whisper(this.message.name, this.message.message); break; case TradeMessageAction.Trade: + this.hideHighlight(); 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'); + this.toggleHighlight(); 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().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.kick(); + this.close(); + break; + } + } + + private close(): void { + this.hideHighlight(); + this.dismiss.next(); + } + + private toggleHighlight(): void { + switch (this.message.type) { + case TradeParserType.TradeItem: + { + const message = this.message as TradeItemMessage; + this.highlight.toggle({ + left: message.left, + top: message.top, + stash: message.stash, + items: [message.itemName] + }).subscribe(); + } + break; + case TradeParserType.TradeMap: + { + const message = this.message as TradeMapMessage; + this.highlight.toggle({ + items: message.direction === TradeWhisperDirection.Incoming + ? message.maps1.maps + : message.maps2.maps + }).subscribe(); } - this.dismiss.next(); break; - case TradeMessageAction.Dismiss: - this.dismiss.next(); + default: break; } } + + private hideHighlight(): void { + this.highlight.close().subscribe(); + } + + private kick(): void { + if (this.message.direction === TradeWhisperDirection.Outgoing) { + OWGamesEvents.getInfo().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 => { + console.warn(`Could not kick character.`, error); + this.notification.show('trade.kick-error'); + }); + } else { + this.chat.kick(this.message.name); + } + } + + private wait(): void { + OWGamesEvents.getInfo().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); + }); + } } diff --git a/src/app/modules/trade/service/index.ts b/src/app/modules/trade/service/index.ts index 025b03cf..8f7a37f4 100644 --- a/src/app/modules/trade/service/index.ts +++ b/src/app/modules/trade/service/index.ts @@ -1,2 +1,4 @@ +export * from './trade-highlight-window.service'; export * from './trade-window.service'; export * from './trade.service'; + diff --git a/src/app/modules/trade/service/trade-highlight-window.service.ts b/src/app/modules/trade/service/trade-highlight-window.service.ts new file mode 100644 index 00000000..0d8a7e90 --- /dev/null +++ b/src/app/modules/trade/service/trade-highlight-window.service.ts @@ -0,0 +1,68 @@ +import { Injectable } from '@angular/core'; +import { WindowName } from '@app/config'; +import { EventEmitter } from '@app/event'; +import { OWGames, OWWindow } from '@app/odk'; +import { ProcessStorageService } from '@app/storage'; +import { WindowService } from '@shared/module/poe/window'; +import { Observable } from 'rxjs'; +import { flatMap } from 'rxjs/operators'; + +const WINDOW_DATA_KEY = 'TRADE_HIGHLIGHT_WINDOW_DATA'; + +export interface TradeHighlightWindowData { + top?: number; + left?: number; + stash?: string; + items: string[]; + gridTop?: number; + gridSize?: number; +} + +@Injectable({ + providedIn: 'root' +}) +export class TradeHighlightWindowService { + private readonly window: OWWindow; + + constructor( + private readonly storage: ProcessStorageService, + private readonly poeWindow: WindowService) { + this.window = new OWWindow(WindowName.TradeHighlight); + } + + public get data$(): EventEmitter { + return this.storage.get(WINDOW_DATA_KEY, () => new EventEmitter()); + } + + public toggle(data: TradeHighlightWindowData): Observable { + return OWGames.getRunningGameInfo().pipe( + flatMap(({ height }) => { + const width = this.poeWindow.calculateWidth(height); + + data.gridTop = Math.round((height / 20) * 3); + data.gridSize = Math.floor(width / 12); + for (let j = data.gridSize; j >= 1; --j) { + const fraction = width / j; + if (fraction >= 12.5 && fraction <= 12.8) { + data.gridSize = j; + break; + } + if (fraction > 13) { + break; + } + } + this.data$.next(data); + + return this.window.toggle().pipe( + flatMap(() => this.window.changeSize(width, height).pipe( + flatMap(() => this.window.changePosition(0, 0)) + )) + ); + }) + ); + } + + public close(): Observable { + return this.window.close(); + } +} diff --git a/src/app/modules/trade/service/trade-window.service.ts b/src/app/modules/trade/service/trade-window.service.ts index 39a82a0e..ffe369c6 100644 --- a/src/app/modules/trade/service/trade-window.service.ts +++ b/src/app/modules/trade/service/trade-window.service.ts @@ -36,10 +36,11 @@ export class TradeWindowService { message: 'Hi, I would like to buy your Rusted Sulphite Scarab listed for 2.5 chaos in Delirium (stash tab "C"; position: left 47, top 1) Offer 2c', league: 'Delirium', whispers: [{ - message: 'Offer 2c' + message: 'Offer 2c', + timeReceived: new Date() }], itemName: 'Rusted Sulphite Scarab', - left: 47, + left: 22, top: 1, stash: 'C', currencyType: 'chaos', @@ -53,10 +54,11 @@ export class TradeWindowService { message: 'Hi, I would like to buy your Rusted Sulphite Scarab listed for 2.5 chaos in Delirium (stash tab "C"; position: left 47, top 1) Offer 2c', league: 'Delirium', whispers: [{ - message: 'Offer 2c' + message: 'Offer 2c', + timeReceived: new Date() }], itemName: 'Rusted Sulphite Scarab', - left: 47, + left: 22, top: 1, stash: 'C', currencyType: 'chaos', @@ -70,7 +72,8 @@ export class TradeWindowService { message: 'Hi, I\'d like to buy your 1 Rusted Sulphite Scarab for my 2.5 Chaos Orb in Delirium. TEST', league: 'Delirium', whispers: [{ - message: 'Offer 2c' + message: 'Offer 2c', + timeReceived: new Date() }], count1: 1, type1: 'Rusted Sulphite Scarab', @@ -85,7 +88,8 @@ export class TradeWindowService { message: 'Hi, I\'d like to buy your 1 Rusted Sulphite Scarab for my 2.5 Chaos Orb in Delirium. TEST', league: 'Delirium', whispers: [{ - message: 'Offer 2c' + message: 'Offer 2c', + timeReceived: new Date() }], count1: 1, type1: 'Rusted Sulphite Scarab', @@ -100,7 +104,8 @@ export class TradeWindowService { message: 'I\'d like to exchange my XIV: (Sulphur Vents Map) for your XIV: (Iceberg Map, Glacier Map, Volcano Map, Wharf Map, Laboratory Map, Museum Map, Wasteland Map) in Delirium.', league: 'Delirium', whispers: [{ - message: 'Offer 2c' + message: 'Offer 2c', + timeReceived: new Date() }], maps1: { tier: 'XIV', @@ -127,7 +132,8 @@ export class TradeWindowService { message: 'I\'d like to exchange my XIV: (Sulphur Vents Map) for your XIV: (Iceberg Map, Glacier Map, Volcano Map, Wharf Map, Laboratory Map, Museum Map, Wasteland Map) in Delirium.', league: 'Delirium', whispers: [{ - message: 'Offer 2c' + message: 'Offer 2c', + timeReceived: new Date() }], maps1: { tier: 'XIV', diff --git a/src/app/modules/trade/trade.module.ts b/src/app/modules/trade/trade.module.ts index 6a6b0c8a..5390f245 100644 --- a/src/app/modules/trade/trade.module.ts +++ b/src/app/modules/trade/trade.module.ts @@ -4,13 +4,18 @@ import { SharedModule } from '@shared/shared.module'; import { TradeMessageActionComponent, TradeMessageBulkComponent, TradeMessageComponent, TradeMessageDirectionComponent, TradeMessageItemComponent, TradeMessageMapComponent, TradeMessageMapTierComponent, TradeSettingsComponent } from './component'; import { TradeService } from './service'; import { TradeFeatureSettings } from './trade-feature-settings'; -import { TradeWindowComponent } from './window'; +import { TradeHighlightWindowComponent, TradeWindowComponent } from './window'; + +const WINDOWS = [ + TradeWindowComponent, + TradeHighlightWindowComponent +]; @NgModule({ providers: [{ provide: FEATURE_MODULES, useClass: TradeModule, multi: true }], declarations: [ + ...WINDOWS, TradeSettingsComponent, - TradeWindowComponent, TradeMessageComponent, TradeMessageItemComponent, TradeMessageMapComponent, @@ -19,7 +24,7 @@ import { TradeWindowComponent } from './window'; TradeMessageDirectionComponent, TradeMessageMapTierComponent, ], - exports: [TradeWindowComponent], + exports: [...WINDOWS], imports: [SharedModule] }) export class TradeModule implements FeatureModule { diff --git a/src/app/modules/trade/window/index.ts b/src/app/modules/trade/window/index.ts index 8c285e32..fd32824b 100644 --- a/src/app/modules/trade/window/index.ts +++ b/src/app/modules/trade/window/index.ts @@ -1 +1,3 @@ +export * from './trade-highlight-window/trade-highlight-window.component'; export * from './trade-window/trade-window.component'; + diff --git a/src/app/modules/trade/window/trade-highlight-window/trade-highlight-window.component.html b/src/app/modules/trade/window/trade-highlight-window/trade-highlight-window.component.html new file mode 100644 index 00000000..821ad927 --- /dev/null +++ b/src/app/modules/trade/window/trade-highlight-window/trade-highlight-window.component.html @@ -0,0 +1,20 @@ + + + + + {{factor === 0.5 ? 'grid_on' : 'border_all'}} + + + +
+
+
+
+
+
+ + \ No newline at end of file diff --git a/src/app/modules/trade/window/trade-highlight-window/trade-highlight-window.component.scss b/src/app/modules/trade/window/trade-highlight-window/trade-highlight-window.component.scss new file mode 100644 index 00000000..37b0d30a --- /dev/null +++ b/src/app/modules/trade/window/trade-highlight-window/trade-highlight-window.component.scss @@ -0,0 +1,38 @@ +@import "../../../../../styles/variables"; + +::ng-deep { + html, + body { + height: 100%; + color: $light-white; + font-size: 14.3px; + font-family: FontinSmallCaps; + } + + ::-webkit-scrollbar, + ::-webkit-scrollbar-thumb { + display: none; + } +} + +app-background { + display: inline; +} + +.grid { + position: absolute; + margin: 0 auto; + left: 0; + right: 0; + + .inner { + position: relative; + height: 100%; + width: 100%; + } + + .highlight { + position: absolute; + border: 2px solid rgba(255, 255, 255, 0.6); + } +} diff --git a/src/app/modules/trade/window/trade-highlight-window/trade-highlight-window.component.ts b/src/app/modules/trade/window/trade-highlight-window/trade-highlight-window.component.ts new file mode 100644 index 00000000..19470b89 --- /dev/null +++ b/src/app/modules/trade/window/trade-highlight-window/trade-highlight-window.component.ts @@ -0,0 +1,37 @@ +import { ChangeDetectionStrategy, Component, NgZone, OnDestroy, OnInit } from '@angular/core'; +import { EventSubscription } from '@app/event'; +import { TradeHighlightWindowData, TradeHighlightWindowService } from '@modules/trade/service'; +import { BehaviorSubject } from 'rxjs'; + +@Component({ + selector: 'app-trade-highlight-window', + templateUrl: './trade-highlight-window.component.html', + styleUrls: ['./trade-highlight-window.component.scss'], + changeDetection: ChangeDetectionStrategy.OnPush +}) +export class TradeHighlightWindowComponent implements OnInit, OnDestroy { + private subscription: EventSubscription; + + public data$ = new BehaviorSubject(null); + + public factor = 1; + + constructor( + private readonly window: TradeHighlightWindowService, + private readonly ngZone: NgZone) { } + + public ngOnInit(): void { + this.data$.next(this.window.data$.get()); + this.subscription = this.window.data$.on(data => this.ngZone.run(() => { + this.data$.next(data); + })); + } + + public ngOnDestroy(): void { + this.subscription?.unsubscribe(); + } + + public onQuadChange(): void { + this.factor = this.factor === 0.5 ? 1 : 0.5; + } +} 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 index 6b0e5245..9192bcb9 100644 --- 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,13 +1,18 @@ - - - - - - - +
+ + + + keyboard_arrow_down + - - - - \ No newline at end of file + + + + + + + + +
\ No newline at end of file diff --git a/src/app/modules/trade/window/trade-window/trade-window.component.scss b/src/app/modules/trade/window/trade-window/trade-window.component.scss index 7c9c0034..e0d5911a 100644 --- a/src/app/modules/trade/window/trade-window/trade-window.component.scss +++ b/src/app/modules/trade/window/trade-window/trade-window.component.scss @@ -1,36 +1,32 @@ @import "../../../../../styles/variables"; +:host { + display: inline-block; +} + ::ng-deep { html, body { height: 100%; color: $light-white; - font-size: 14.3px; + font-size: 13.3px; font-family: FontinSmallCaps; + width: 300px; } - ::-webkit-scrollbar { - width: 14px; - background: $black-transparent; - border: 1px $black solid; - border-radius: 3px; - } - + ::-webkit-scrollbar, ::-webkit-scrollbar-thumb { - background: linear-gradient( - 90deg, - rgba(84, 81, 70, 1) 0%, - rgba(49, 24, 8, 1) 10%, - rgba(118, 44, 18, 1) 90%, - rgba(121, 115, 105, 1) 100% - ); - border: 1px $light-brown solid; - border-radius: 3px; + display: none; } +} + +.indicator { + will-change: transform, top; + transition: transform ease-in-out 200ms, top ease-in 100ms; - input::-webkit-outer-spin-button, - input::-webkit-inner-spin-button { - -webkit-appearance: none; - margin: 0; /* <-- Apparently some margin are still there even though it's hidden */ + &.open { + top: 0px; + transform: rotateZ(-180deg); + transform-origin: center; } } diff --git a/src/app/modules/trade/window/trade-window/trade-window.component.ts b/src/app/modules/trade/window/trade-window/trade-window.component.ts index 213b964f..311422c5 100644 --- a/src/app/modules/trade/window/trade-window/trade-window.component.ts +++ b/src/app/modules/trade/window/trade-window/trade-window.component.ts @@ -13,6 +13,7 @@ import { BehaviorSubject } from 'rxjs'; export class TradeWindowComponent implements OnInit, OnDestroy { private subscription: EventSubscription; + public toggle = true; public data$ = new BehaviorSubject(null); constructor( diff --git a/src/app/shared/module/odk/component/header/header.component.html b/src/app/shared/module/odk/component/header/header.component.html index b88a17c3..35ff1c09 100644 --- a/src/app/shared/module/odk/component/header/header.component.html +++ b/src/app/shared/module/odk/component/header/header.component.html @@ -1,10 +1,15 @@
+
+ +
{{name}}
+ close + push_pin
-
+
\ No newline at end of file diff --git a/src/app/shared/module/odk/component/header/header.component.scss b/src/app/shared/module/odk/component/header/header.component.scss index 9946730c..0d5423fa 100644 --- a/src/app/shared/module/odk/component/header/header.component.scss +++ b/src/app/shared/module/odk/component/header/header.component.scss @@ -6,6 +6,19 @@ $icon-size: 16px; $border-color: #1a1a1a; +::ng-deep { + app-header { + .controls { + .mat-icon { + height: $icon-size; + width: $icon-size; + font-size: $icon-size; + line-height: $icon-size; + } + } + } +} + .header { position: relative; height: $header-size; @@ -24,21 +37,39 @@ $border-color: #1a1a1a; position: absolute; cursor: pointer; top: 0; - right: 10px; height: $header-size; line-height: $header-size + 8px; - > .mat-icon { - height: $icon-size; - width: $icon-size; - font-size: $icon-size; - line-height: $icon-size; + &:not(.left) { + right: 10px; + } + + &.left { + left: 10px; + } + + .pin { + height: $icon-size - 3px; + width: $icon-size - 3px; + font-size: $icon-size - 3px; + line-height: $icon-size - 3px; + + will-change: transform, top; + transition: transform ease-in-out 200ms, top ease-in 100ms; + + &.pinned { + top: 0px; + transform: rotateZ(40deg); + transform-origin: center; + } } } .content { + &:not(.inline) { + height: calc(100% - 30px); + } border: 1px solid $border-color; border-top: none; - height: calc(100% - 30px); width: 100%; } diff --git a/src/app/shared/module/odk/component/header/header.component.ts b/src/app/shared/module/odk/component/header/header.component.ts index 00481970..371506f3 100644 --- a/src/app/shared/module/odk/component/header/header.component.ts +++ b/src/app/shared/module/odk/component/header/header.component.ts @@ -13,15 +13,26 @@ export class HeaderComponent implements OnInit { private readonly window = new OWWindow(); private obtained$: Observable; + public pinned = false; + @Input() public name: string; + @Input() + public inline = false; + @Input() public closeable = true; @Input() public draggable = true; + @Input() + public pinnable = false; + + @Input() + public width: number; + public ngOnInit(): void { this.obtained$ = this.window.assureObtained() .pipe( @@ -32,6 +43,9 @@ export class HeaderComponent implements OnInit { public onDrag(event: MouseEvent): void { event.preventDefault(); + if (this.pinned) { + return; + } this.obtained$.subscribe(() => { this.window.dragMove(); }); @@ -41,4 +55,9 @@ export class HeaderComponent implements OnInit { event.preventDefault(); this.window.close().subscribe(); } + + public onPinned(event: MouseEvent): void { + event.preventDefault(); + this.pinned = !this.pinned; + } } diff --git a/src/app/shared/module/poe/poe.module.ts b/src/app/shared/module/poe/poe.module.ts index f95f289e..cdec2ae6 100644 --- a/src/app/shared/module/poe/poe.module.ts +++ b/src/app/shared/module/poe/poe.module.ts @@ -1,6 +1,7 @@ -import { CommonModule } from '@angular/common'; +import { CommonModule as NgCommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { AnnotationModule } from '../annotation/annotation.module'; +import { CommonModule } from '../common/common.module'; import { ClientStringPipe } from './client-string'; import { BackgroundComponent } from './common'; import { CurrencyPipe } from './currency'; @@ -10,6 +11,7 @@ import { ItemFrameComponent, ItemFrameHeaderComponent, ItemFrameInfluencesCompon import { StatGroupPipe, StatTransformPipe } from './item/stat'; import { WordPipe } from './item/word'; import { TradeFetchItemPipe, TradeStatsPipe, TradeStatsTypePipe } from './trade'; +import { TradeWhisperTitle } from './trade/chat'; import { TradeStaticFrameComponent, TradeStaticPipe } from './trade/statics'; const COMPONENTS = [ @@ -23,7 +25,8 @@ const COMPONENTS = [ const PIPES = [ TradeStatsPipe, TradeStatsTypePipe, - TradeFetchItemPipe + TradeFetchItemPipe, + TradeWhisperTitle ]; @NgModule({ @@ -50,7 +53,7 @@ const PIPES = [ CurrencyPipe, TradeStaticPipe, ], - imports: [CommonModule, AnnotationModule], + imports: [NgCommonModule, CommonModule, AnnotationModule], exports: [...COMPONENTS, ...PIPES] }) export class PoeModule { } diff --git a/src/app/shared/module/poe/trade/chat/index.ts b/src/app/shared/module/poe/trade/chat/index.ts index b0cdd3f2..af4e553c 100644 --- a/src/app/shared/module/poe/trade/chat/index.ts +++ b/src/app/shared/module/poe/trade/chat/index.ts @@ -1,2 +1,4 @@ export * from './trade-chat'; export * from './trade-chat-parser.service'; +export * from './trade-chat-whisper.pipe'; + diff --git a/src/app/shared/module/poe/trade/chat/trade-chat-whisper.pipe.ts b/src/app/shared/module/poe/trade/chat/trade-chat-whisper.pipe.ts new file mode 100644 index 00000000..958a1285 --- /dev/null +++ b/src/app/shared/module/poe/trade/chat/trade-chat-whisper.pipe.ts @@ -0,0 +1,14 @@ +import { Pipe, PipeTransform } from '@angular/core'; +import { TradeWhisper, TradeWhisperDirection } from './trade-chat'; + +@Pipe({ + name: 'tradeWhisperTitle' +}) +export class TradeWhisperTitle implements PipeTransform { + public transform(whispers: TradeWhisper[]): string { + return `\n${whispers.map(whisper => { + const prefix = whisper.direction === TradeWhisperDirection.Incoming ? '@From' : '@To'; + return `${whisper.timeReceived.toLocaleTimeString()} ${prefix}: ${whisper.message}`; + }).join('\n')}`; + } +} diff --git a/src/app/shared/module/poe/trade/statics/trade-static-frame/trade-static-frame.component.html b/src/app/shared/module/poe/trade/statics/trade-static-frame/trade-static-frame.component.html index a1a6a470..58fcb871 100644 --- a/src/app/shared/module/poe/trade/statics/trade-static-frame/trade-static-frame.component.html +++ b/src/app/shared/module/poe/trade/statics/trade-static-frame/trade-static-frame.component.html @@ -1,13 +1,14 @@ -
+
{{count | number: '1.0-2'}} {{amount | number: '1.0-4'}} -  ×  +  ×  - {{static.name}} + {{static.name | truncateText:16}}
\ No newline at end of file diff --git a/src/app/shared/module/poe/trade/statics/trade-static-frame/trade-static-frame.component.scss b/src/app/shared/module/poe/trade/statics/trade-static-frame/trade-static-frame.component.scss index d088365f..e672e571 100644 --- a/src/app/shared/module/poe/trade/statics/trade-static-frame/trade-static-frame.component.scss +++ b/src/app/shared/module/poe/trade/statics/trade-static-frame/trade-static-frame.component.scss @@ -1,4 +1,5 @@ $size: 32px; +$size-medium: 24px; $size-small: 16px; .frame { @@ -22,6 +23,17 @@ $size-small: 16px; } } + &.medium { + line-height: $size-medium; + height: $size-medium; + + .image { + > img { + height: $size-medium; + } + } + } + .text { overflow: hidden; } diff --git a/src/app/shared/module/poe/trade/statics/trade-static-frame/trade-static-frame.component.ts b/src/app/shared/module/poe/trade/statics/trade-static-frame/trade-static-frame.component.ts index 230c0e2a..d9a1cbec 100644 --- a/src/app/shared/module/poe/trade/statics/trade-static-frame/trade-static-frame.component.ts +++ b/src/app/shared/module/poe/trade/statics/trade-static-frame/trade-static-frame.component.ts @@ -21,4 +21,7 @@ export class TradeStaticFrameComponent { @Input() public small: boolean; + + @Input() + public medium: boolean; } diff --git a/src/app/shared/module/poe/window/index.ts b/src/app/shared/module/poe/window/index.ts new file mode 100644 index 00000000..1225aec7 --- /dev/null +++ b/src/app/shared/module/poe/window/index.ts @@ -0,0 +1 @@ +export * from './window.service'; diff --git a/src/app/shared/module/poe/window/window.service.ts b/src/app/shared/module/poe/window/window.service.ts new file mode 100644 index 00000000..2024cf6c --- /dev/null +++ b/src/app/shared/module/poe/window/window.service.ts @@ -0,0 +1,26 @@ +import { Injectable } from '@angular/core'; + +const GAME_HEIGHT_TO_WINDOW_WIDTH_RATIO = 8 / 13; + +// 1/1 = 1 +// 2/1 = 2 +// 3/2 = 1.5 +// 5/3 = 1.6666666666666667 +// 8/5 = 1.6 +// 13/8 = 1.625 +// 60/37 = 1.6216216216216217 +// 73/45 = 1.6222222222222222 +// 133/82 = 1.6219512195121952 +// 339/209 = 1.6220095693779903 +// 811/500 = 1.622 + +@Injectable({ + providedIn: 'root' +}) +export class WindowService { + public calculateWidth(gameHeight: number): number { + const width = Math.ceil(gameHeight * GAME_HEIGHT_TO_WINDOW_WIDTH_RATIO); + console.log(width, gameHeight); + return width; + } +}