81 lines
2.6 KiB
TypeScript
81 lines
2.6 KiB
TypeScript
import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
|
|
import { Participant } from "../../../types/participant";
|
|
import { EventService } from "../../services/event.service";
|
|
import { Observable, Subject, Subscription } from "rxjs";
|
|
import { filter, map, takeUntil } from "rxjs/operators";
|
|
import { EventCardPlayed, EventCardsChanged, EventPhotosUpdated, ServerEvent } from "../../../types/server-event";
|
|
import { ApiService } from "../../services/api.service";
|
|
import { CardItem } from "../../../types/card-item";
|
|
import {environment} from "../../../environments/environment";
|
|
|
|
@Component({
|
|
selector: 'app-participant-item',
|
|
templateUrl: './participant-item.component.html',
|
|
styleUrls: ['./participant-item.component.scss']
|
|
})
|
|
export class ParticipantItemComponent implements OnInit, OnDestroy, OnChanges {
|
|
@Input() participant: Participant;
|
|
@Input() small = false;
|
|
@Input() showScoreOnSmall = false;
|
|
@Input() banned: boolean|undefined;
|
|
cards: CardItem[] = [];
|
|
private destroyed$ = new Subject<void>();
|
|
imgTimestamp = (new Date()).getTime();
|
|
addAnimatedClass = false;
|
|
@Input() bannedRemaining: number|undefined = 0;
|
|
@Input() transparent = false;
|
|
@Input() shadow = true;
|
|
|
|
constructor(private eventService: EventService, private apiService: ApiService) {
|
|
}
|
|
|
|
ngOnChanges(changes: SimpleChanges): void {
|
|
this.addAnimatedClass = true;
|
|
setInterval(() => this.addAnimatedClass = false, 2000);
|
|
}
|
|
|
|
ngOnInit(): void {
|
|
this.eventService.photosUpdatedEvent.pipe(
|
|
takeUntil(this.destroyed$),
|
|
map((e) => e.data),
|
|
filter((e) => e.id === this.participant.telegramId),
|
|
).subscribe((e) => {
|
|
this.imgTimestamp = (new Date()).getTime();
|
|
});
|
|
this.eventService.cardChangedEvent.pipe(
|
|
takeUntil(this.destroyed$),
|
|
map(e => e.data),
|
|
filter(e => e.telegramId === this.participant.telegramId),
|
|
).subscribe((e) => {
|
|
this.getCards()
|
|
});
|
|
this.eventService.cardPlayedEvent.pipe(
|
|
takeUntil(this.destroyed$),
|
|
map(e => e.data),
|
|
filter(e => e.telegramId === this.participant.telegramId),
|
|
).subscribe(e => {
|
|
this.getCards();
|
|
});
|
|
this.getCards();
|
|
}
|
|
ngOnDestroy() {
|
|
this.destroyed$.next();
|
|
this.destroyed$.complete();
|
|
}
|
|
|
|
getCards() {
|
|
if(this.participant) {
|
|
this.apiService.getCards(this.participant.telegramId).subscribe((r) => {
|
|
this.cards = r;
|
|
})
|
|
}
|
|
}
|
|
|
|
|
|
getImageUrl() {
|
|
if(this.participant) {
|
|
return `${environment.API_URL}/guests/photo/${this.participant.telegramId}?$t=${this.imgTimestamp}`;
|
|
}
|
|
return null;
|
|
}
|
|
}
|