import { CdkDragDrop } from '@angular/cdk/drag-drop' ; import { ComponentType } from '@angular/cdk/portal' ; import { ChangeDetectionStrategy , ChangeDetectorRef , Component , EventEmitter , Input , Output , ViewRef , } from '@angular/core' ; import { GameType } from '@firestone-hs/reference-data' ; import { Entity } from '@firestone-hs/replay-parser' ; import { BgsBoardInfo } from '@firestone-hs/simulate-bgs-battle/dist/bgs-board-info' ; import { CardsFacadeService } from '@services/cards-facade.service' ; import { buildEntityFromBoardEntity } from '../../../services/battlegrounds/bgs-utils' ; import { defaultStartingHp } from '../../../services/hs-utils' ; import { BgsCardTooltipComponent } from '../bgs-card-tooltip.component' ; @ Component ( { selector : 'bgs-battle-side' , styleUrls : [ `../../../../css/global/reset-styles.scss` , `../../../../css/global/scrollbar.scss` , `../../../../css/component/controls/controls.scss` , `../../../../css/component/controls/control-close.component.scss` , `../../../../css/component/battlegrounds/battles/bgs-battle-side.component.scss` , ] , template : `
		<div class="bgs-battle-side" [ngClass]="{ 'full-screen-mode': fullScreenMode }">
			<div class="hero">
				<bgs-hero-portrait-simulator
					class="portrait"
					[heroCardId]="heroCardId"
					[heroPowerCardId]="heroPowerCardId"
					[health]="health"
					[maxHealth]="maxHealth"
					[tavernTier]="showTavernTier && tavernTier"
					[tooltipPosition]="tooltipPosition"
					(portraitChangeRequested)="onPortraitClick()"
					(heroPowerChangeRequested)="onHeroPowerClick()"
				></bgs-hero-portrait-simulator>
			</div>
			<div class="board" cdkDropListGroup (cdkDropListDropped)="drop($event)">
				<!-- See https://stackoverflow.com/questions/65726138/how-can-i-use-angular-material-drag-n-drop-with-flex-layout -->
				<div
					class="minion-container"
					*ngFor="let entity of entities; let i = index"
					cdkDropList
					cdkDropListOrientation="horizontal"
					[cdkDropListData]="i"
					(cdkDropListDropped)="drop($event)"
					cachedComponentTooltip
					[componentType]="componentType"
					[componentInput]="entity"
					[componentTooltipPosition]="'right'"
				>
					<card-on-board
						class="minion"
						[entity]="entity"
						[useSvg]="false"
						(mousedown)="preventAppDrag($event)"
						cdkDrag
						[cdkDragData]="entity"
						(cdkDropListDropped)="drop($event)"
					>
					</card-on-board>
					<bgs-plus-button
						class="button update"
						[useUpdateIcon]="true"
						(click)="updateMinion(entity, i)"
						*ngIf="closeOnMinion"
						[helpTooltip]="'battlegrounds.sim.update-minion-button-tooltip' | owTranslate"
					></bgs-plus-button>
					<bgs-minus-button
						class="button remove"
						(click)="removeMinion(entity, i)"
						*ngIf="closeOnMinion"
						helpTooltip="Remove minion"
						[helpTooltip]="'battlegrounds.sim.remove-minion-button-tooltip' | owTranslate"
					></bgs-minus-button>
				</div>
				<div class="click-to-add" *ngIf="((entities && entities.length) || 0) < 7 && allowClickToAdd">
					<bgs-plus-button
						class="change-icon"
						(click)="addMinion()"
						[helpTooltip]="'battlegrounds.sim.add-minion-button-tooltip' | owTranslate"
					></bgs-plus-button>
					<div class="empty-minion" inlineSVG="assets/svg/bg_empty_minion.svg"></div>
				</div>
			</div>
		</div>
	` , changeDetection : ChangeDetectionStrategy . OnPush , } ) export class BgsBattleSideComponent { componentType : ComponentType < any > = BgsCardTooltipComponent ; @ Output ( ) addMinionRequested : EventEmitter < ChangeMinionRequest > = new EventEmitter < ChangeMinionRequest > ( ) ; @ Output ( ) updateMinionRequested : EventEmitter < ChangeMinionRequest > = new EventEmitter < ChangeMinionRequest > ( ) ; @ Output ( ) removeMinionRequested : EventEmitter < ChangeMinionRequest > = new EventEmitter < ChangeMinionRequest > ( ) ; @ Output ( ) entitiesUpdated : EventEmitter < readonly Entity [ ] > = new EventEmitter < readonly Entity [ ] > ( ) ; @ Output ( ) portraitChangeRequested : EventEmitter < void > = new EventEmitter < void > ( ) ; @ Output ( ) heroPowerChangeRequested : EventEmitter < void > = new EventEmitter < void > ( ) ; @ Input ( ) set player ( value ) { this . _player = value ; console . debug ( 'setting player battle side' , value ) ; this . updateInfo ( ) ; } @ Input ( ) allowClickToAdd : boolean ; @ Input ( ) clickToChange = false ; @ Input ( ) closeOnMinion = false ; @ Input ( ) showTavernTier = false ; @ Input ( ) fullScreenMode = false ; @ Input ( ) tooltipPosition : string ; _player : BgsBoardInfo ; heroCardId : string ; heroPowerCardId : string ; health : number ; maxHealth : number ; tavernTier : number ; entities : readonly Entity [ ] ; constructor ( private readonly cdr , private readonly allCards ) { } trackByFn ( index , item ) { return item . id ; } preventAppDrag ( event ) { event . stopPropagation ( ) ; } drop ( event ) { const movedElement = event . item . data ; const movedElementNewIndex = event . container . data ; const entitiesWithoutMovedElement = this . entities . filter ( ( entity ) => entity . id !== movedElement . id ) ; entitiesWithoutMovedElement . splice ( movedElementNewIndex , 0 , movedElement ) ; this . entities = entitiesWithoutMovedElement ; this . entitiesUpdated . next ( this . entities ) ; if ( ! ( this . cdr as ViewRef ) ?. destroyed ) { this . cdr . detectChanges ( ) ; } } onPortraitClick ( ) { this . portraitChangeRequested . next ( ) ; } onHeroPowerClick ( ) { this . heroPowerChangeRequested . next ( ) ; } addMinion ( ) { this . addMinionRequested . next ( null ) ; } updateMinion ( entity , index ) { this . updateMinionRequested . next ( { index : index , } ) ; } removeMinion ( entity , index ) { this . removeMinionRequested . next ( { index : index , } ) ; } private updateInfo ( ) { if ( ! this . _player ) { return ; } this . heroCardId = this . _player . player ?. cardId ; this . heroPowerCardId = this . _player . player ?. heroPowerId ; this . health = this . _player . player . hpLeft ; this . maxHealth = defaultStartingHp ( GameType . GT_BATTLEGROUNDS , this . _player . player ?. cardId ) ; this . tavernTier = this . _player . player . tavernTier ; this . entities = ( this . _player . board ?? [ ] ) . map ( ( minion ) => buildEntityFromBoardEntity ( minion , this . allCards ) ) ; if ( ! ( this . cdr as ViewRef ) ?. destroyed ) { this . cdr . detectChanges ( ) ; } } } export interface ChangeMinionRequest { index : number ; }