diff --git a/pokeR/ClientApp/src/app/shared-components/confetti/confetti.component.ts b/pokeR/ClientApp/src/app/shared-components/confetti/confetti.component.ts index dd2072a..dafb6d5 100644 --- a/pokeR/ClientApp/src/app/shared-components/confetti/confetti.component.ts +++ b/pokeR/ClientApp/src/app/shared-components/confetti/confetti.component.ts @@ -12,8 +12,11 @@ declare const confetti; export class ConfettiComponent implements AfterViewInit { @ViewChild('canvas') canvas: ElementRef; private confettiLauncher: any; + private lastCheer: Date; - constructor(private service: ConfettiService) { } + constructor(private service: ConfettiService) { + this.lastCheer = new Date(); + } ngAfterViewInit(): void { this.setupConfetti(); @@ -30,8 +33,12 @@ export class ConfettiComponent implements AfterViewInit { watchRequests = (): Observable => this.service.confettiPlz.pipe(map(this.launch)) - launch = (duration: number): void => { - var end = Date.now() + (duration); + launch = (request: { duration: number, cheer?: boolean }): void => { + var end = Date.now() + (request.duration); + + if (request.cheer) { + this.cheer(); + } var interval = setInterval(() => { if (Date.now() > end) { @@ -51,4 +58,12 @@ export class ConfettiComponent implements AfterViewInit { }, 200); } + private cheer = (): void => { + // only cheer at most once every 8 seconds to avoid spam + if (((new Date()).getTime() - this.lastCheer.getTime()) > 8000) { + var audio = new Audio('/audio/yahtzee.mp3'); + audio.play(); + this.lastCheer = new Date(); + } + } } diff --git a/pokeR/ClientApp/src/app/shared-components/confetti/confetti.service.ts b/pokeR/ClientApp/src/app/shared-components/confetti/confetti.service.ts index ffbf8fc..e72bb27 100644 --- a/pokeR/ClientApp/src/app/shared-components/confetti/confetti.service.ts +++ b/pokeR/ClientApp/src/app/shared-components/confetti/confetti.service.ts @@ -7,7 +7,7 @@ export class ConfettiService { constructor() { } - public confettiPlz: EventEmitter = new EventEmitter(); + public confettiPlz: EventEmitter<{ duration: number, cheer?: boolean }> = new EventEmitter<{ duration: number, cheer?: boolean }>(); - public pop = (): void => this.confettiPlz.emit(5000); + public pop = (cheer?: boolean): void => this.confettiPlz.emit({ duration: 5000, cheer }); } diff --git a/pokeR/ClientApp/src/app/shared-components/playfield/playfield.component.ts b/pokeR/ClientApp/src/app/shared-components/playfield/playfield.component.ts index fecb23b..6333e6e 100644 --- a/pokeR/ClientApp/src/app/shared-components/playfield/playfield.component.ts +++ b/pokeR/ClientApp/src/app/shared-components/playfield/playfield.component.ts @@ -71,7 +71,7 @@ export class PlayfieldComponent implements OnInit, OnDestroy { console.log('YOU ACTIVATED MY TRAP CARD!'); if (this.lastState.map(s => s.currentCardId).every(i => this.lastState.find(() => true).currentCardId === i)) { console.log('party time!'); - this.showConfetti(); + this.confetti.pop(true); } this.cardComponents.forEach((componentRef, index) => componentRef.instance.reveal(index * 70)); @@ -79,8 +79,6 @@ export class PlayfieldComponent implements OnInit, OnDestroy { getEmblemUrl = (id: number): string => this.service.getEmblemUrl(id); - private showConfetti = (): void => this.confetti.pop(); - private updateState = (newState: Array): void => { const previousState = this.lastState; this.lastState = newState; diff --git a/pokeR/wwwroot/audio/yahtzee.mp3 b/pokeR/wwwroot/audio/yahtzee.mp3 new file mode 100644 index 0000000..d8ab303 Binary files /dev/null and b/pokeR/wwwroot/audio/yahtzee.mp3 differ