import { AfterContentInit , ChangeDetectionStrategy , ChangeDetectorRef , Component , Input , ViewRef } from '@angular/core' ; import { Observable } from 'rxjs' ; import { CardBack } from '../../models/card-back' ; import { AppUiStoreFacadeService } from '../../services/ui-store/app-ui-store-facade.service' ; import { AbstractSubscriptionComponent } from '../abstract-subscription.component' ; import { InternalCardBack } from './internal-card-back' ; @ Component ( { selector : 'full-card-back' , styleUrls : [ `../../../css/global/components-global.scss` , `../../../css/global/scrollbar.scss` , `../../../css/component/collection/full-card-back.component.scss` , ] , template : `
		<div class="card-back-details-container" *ngIf="_cardBack">
			<card-back
				class="card-back"
				[cardBack]="_cardBack"
				[animated]="animated$ | async"
				[alwaysOn]="true"
			></card-back>
			<div class="details">
				<h1>{{ _cardBack.name }}</h1>
				<div class="card-back-details">
					<div class="card-back-info description">
						<span class="value">{{ _cardBack.text }}</span>
					</div>
				</div>
			</div>
		</div>
	` , changeDetection : ChangeDetectionStrategy . OnPush , } ) export class FullCardBackComponent extends AbstractSubscriptionComponent implements AfterContentInit { animated$ : Observable < boolean > ; _cardBack : InternalCardBack ; @ Input ( ) set cardBack ( value ) { if ( ! value ) { return ; } this . _cardBack = { ... value , image : `https://static.firestoneapp.com/cardbacks/512/${ value . id }.png?v=2` , animatedImage : `https://static.zerotoheroes.com/hearthstone/cardBacks/animated/${ value . id }.webm` , } ; if ( ! ( this . cdr as ViewRef ) ?. destroyed ) { this . cdr . detectChanges ( ) ; } } constructor ( protected readonly store , protected readonly cdr ) { super ( store , cdr ) ; } ngAfterContentInit ( ) { this . animated$ = this . listenForBasicPref$ ( ( prefs ) => prefs . collectionUseAnimatedCardBacks ) ; } }