import { ChangeDetectionStrategy , ChangeDetectorRef , Component , Input , Optional , ViewRef } from '@angular/core' ; import { DeckCard } from '../../models/decktracker/deck-card' ; import { CardsFacadeService } from '../../services/cards-facade.service' ; import { LocalizationFacadeService } from '../../services/localization-facade.service' ; import { PreferencesService } from '../../services/preferences.service' ; import { groupByFunction } from '../../services/utils' ; @ Component ( { selector : 'card-tooltip' , styleUrls : [ `../../../css/component/tooltip/card-tooltip.component.scss` ] , template : `
		<div class="card-tooltip {{ card.additionalClass }}" *ngFor="let card of cards">
			<div *ngIf="card.createdBy" class="created-by">Created by</div>
			<img *ngIf="card.image" [src]="card.image" (onload)="refresh()" class="tooltip-image" />
			<!-- <video *ngIf="card.cardType === 'GOLDEN'" #videoPlayer loop="loop" [autoplay]="true" [preload]="true">
				<source
					src="{{
						'https://static.zerotoheroes.com/hearthstone/fullcard/en/golden/' + card.cardId + '.webm?v=2'
					}}"
					type="video/webm"
				/>
			</video> -->
			<!-- <div *ngIf="card.text" class="text">{{ card.text }}</div> -->
			<div class="buffs" *ngIf="card.buffs && _displayBuffs" [ngClass]="{ 'only-buffs': !card.image }">
				<div class="background">
					<div class="body"></div>
					<div class="bottom"></div>
				</div>
				<div class="content">
					<buff-info *ngFor="let buff of card.buffs" [buff]="buff"></buff-info>
				</div>
			</div>
		</div>
	` , changeDetection : ChangeDetectionStrategy . OnPush , } ) export class CardTooltipComponent { cards : readonly InternalCard [ ] ; _displayBuffs : boolean ; private _cardIds : string [ ] ; private isBgs : boolean ; private _additionalClass : string ; private createdBy : boolean ; private buffs : readonly { bufferCardId : string ; buffCardId : string ; count : number ; } [ ] ; private _cardType : 'NORMAL' | 'GOLDEN' = 'NORMAL' ; @ Input ( ) set cardId ( value ) { this . _cardIds = value ?. length ? value . split ( ',' ) : [ ] ; this . updateInfos ( ) ; } @ Input ( ) set cardType ( value ) { this . _cardType = value ; } @ Input ( ) set cardTooltipBgs ( value ) { this . isBgs = value ; } @ Input ( ) localized = true ; @ Input ( ) set cardTooltipCard ( value ) { if ( ! value ) { return ; } this . buffs = ! value . buffCardIds || value . buffCardIds . length === 0 ? undefined : Object . values ( groupByFunction ( ( buffCardId ) => buffCardId ) ( value . buffCardIds ) ) . map ( ( buff ) => buff ?? [ ] ) . map ( ( buff ) => buff . filter ( ( b ) => ! ! b ) ) . filter ( ( buff ) => ! ! buff ?. length ) . map ( ( buff ) => ( { buffCardId : buff [ 0 ] , bufferCardId : buff [ 0 ] . slice ( 0 , buff [ 0 ] . length - 1 ) , count : buff . length , } ) ) ; this . createdBy = ( value . creatorCardId || value . lastAffectedByCardId ) && ! value . cardId ; this . _cardIds = [ value . cardId || value . creatorCardId || value . lastAffectedByCardId ] ; this . updateInfos ( ) ; } @ Input ( ) set additionalClass ( value ) { this . _additionalClass = value ; } @ Input ( ) set displayBuffs ( value ) { this . _displayBuffs = value ; } @ Input ( ) set text ( value ) { } constructor ( private cdr , private readonly i18n , private readonly allCards , @ Optional ( ) private prefs ) { } refresh ( ) { if ( ! ( this . cdr as ViewRef ) ?. destroyed ) { this . cdr . detectChanges ( ) ; } } private async updateInfos ( ) { if ( ! this . _cardIds ?. length ) { return ; } this . cards = this . _cardIds . reverse ( ) . map ( ( cardId ) => { const card = this . allCards . getCard ( cardId ) ; const isPremium = cardId ?. endsWith ( '_golden' ) || ! ! card . battlegroundsNormalDbfId ; const realCardId = cardId ?. split ( '_golden' ) [ 0 ] ; const image = ! ! realCardId ? this . localized ? this . i18n . getCardImage ( realCardId , { isBgs : this . isBgs , isPremium : isPremium , } ) : this . i18n . getNonLocalizedCardImage ( realCardId ) : null ; const result = { cardId : realCardId , image : image , buffs : this . buffs , cardType : this . _cardType , createdBy : this . createdBy , additionalClass : this . _additionalClass , } ; return result ; } ) ; if ( ! ( this . cdr as ViewRef ) ?. destroyed ) { this . cdr . detectChanges ( ) ; } } } interface InternalCard { readonly cardId : string ; readonly image : string ; readonly cardType : 'NORMAL' | 'GOLDEN' ; readonly createdBy ? : boolean ; readonly buffs ? : readonly { bufferCardId : string ; buffCardId : string ; count : number ; } [ ] ; readonly additionalClass ? : string ; }