import { AfterContentInit , AfterViewInit , ChangeDetectionStrategy , ChangeDetectorRef , Component , ElementRef , Input , OnDestroy , ViewRef , } from '@angular/core' ; import { Zone } from '@firestone-hs/reference-data' ; import { Subscription } from 'rxjs' ; import { debounceTime , takeUntil } from 'rxjs/operators' ; import { BattleMercenary , MercenariesBattleTeam } from '../../../../models/mercenaries/mercenaries-battle-state' ; import { AppUiStoreFacadeService } from '../../../../services/ui-store/app-ui-store-facade.service' ; import { AbstractSubscriptionComponent } from '../../../abstract-subscription.component' ; @ Component ( { selector : 'mercenaries-team-list' , styleUrls : [ '../../../../../css/global/components-global.scss' , `../../../../../css/global/scrollbar-decktracker-overlay.scss` , '../../../../../css/component/decktracker/overlay/dim-overlay.scss' , '../../../../../css/component/mercenaries/overlay/teams/mercenaries-team-list.component.scss' , ] , template : `
		<perfect-scrollbar class="team-list" [ngClass]="{ 'active': isScroll }">
			<div class="list-background"></div>
			<ng-container *ngIf="!!mercenaries?.length; else emptyState">
				<mercenaries-team-mercenary
					*ngFor="let mercenary of mercenaries"
					[mercenary]="mercenary"
					[tooltipPosition]="tooltipPosition"
				></mercenaries-team-mercenary>
			</ng-container>
			<ng-template #emptyState>
				<div class="empty-team">Head into a bounty or PvP battle to see your team</div>
			</ng-template>
		</perfect-scrollbar>
	` , changeDetection : ChangeDetectionStrategy . OnPush , } ) export class MercenariesTeamListComponent extends AbstractSubscriptionComponent implements AfterContentInit , AfterViewInit , OnDestroy { @ Input ( ) tooltipPosition : boolean ; @ Input ( ) set team ( value ) { this . mercenaries = [ ... ( value . mercenaries ?? [ ] ) ] . filter ( ( merc ) => merc ) . sort ( ( a , b ) => { if ( a . zone === Zone . PLAY && b . zone !== Zone . PLAY ) { return - 1 ; } else if ( a . zone !== Zone . PLAY && b . zone === Zone . PLAY ) { return 1 ; } if ( a . zone === Zone . SETASIDE && b . zone !== Zone . SETASIDE ) { return - 1 ; } else if ( a . zone !== Zone . SETASIDE && b . zone === Zone . SETASIDE ) { return 1 ; } if ( a . isDead < b . isDead ) { return - 1 ; } else if ( a . isDead > b . isDead ) { return 1 ; } if ( a . zonePosition < b . zonePosition ) { return - 1 ; } else if ( a . zonePosition > b . zonePosition ) { return 1 ; } return 0 ; } ) ; if ( ! ( this . cdr as ViewRef ) ?. destroyed ) { this . cdr ?. detectChanges ( ) ; } } mercenaries : readonly BattleMercenary [ ] ; isScroll : boolean ; private scaleSub : Subscription ; constructor ( private readonly el , protected readonly store , protected readonly cdr ) { super ( store , cdr ) ; } ngAfterContentInit ( ) { this . scaleSub = this . store . listenPrefs$ ( ( prefs ) => prefs . mercenariesPlayerTeamOverlayScale + prefs . mercenariesOpponentTeamOverlayScale ) . pipe ( debounceTime ( 100 ) , takeUntil ( this . destroyed$ ) ) . subscribe ( ( scale ) => this . refreshScroll ( ) ) ; } ngAfterViewInit ( ) { this . refreshScroll ( ) ; } ngOnDestroy ( ) { super . ngOnDestroy ( ) ; this . scaleSub . unsubscribe ( ) ; } private refreshScroll ( ) { setTimeout ( ( ) => { const psContent = this . el . nativeElement . querySelector ( '.ps-content' ) ; const ps = this . el . nativeElement . querySelector ( '.ps' ) ; if ( ! ps || ! psContent ) { return ; } const contentHeight = psContent . getBoundingClientRect ( ) . height ; const containerHeight = ps . getBoundingClientRect ( ) . height ; this . isScroll = contentHeight > containerHeight ; if ( ! ( this . cdr as ViewRef ) ?. destroyed ) { this . cdr . detectChanges ( ) ; } } , 500 ) ; } }