32 lines
1.3 KiB
TypeScript
32 lines
1.3 KiB
TypeScript
import { Component, Input, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
|
|
import { CommonModule } from '@angular/common';
|
|
import { default as autoAnimate } from '@formkit/auto-animate';
|
|
import { Winner } from '../../../services/winner.service';
|
|
|
|
@Component({
|
|
selector: 'app-winner-ticker',
|
|
standalone: true,
|
|
imports: [CommonModule],
|
|
template: `
|
|
<div class="flex items-center gap-12 animate-marquee will-change-transform" #tickerContainer>
|
|
<span *ngFor="let winner of winners" class="flex items-center gap-3 whitespace-nowrap">
|
|
<span class="text-yellow-300 text-lg animate-pulseGlow will-change-transform">🎰</span>
|
|
<span class="font-medium">
|
|
{{ winner.name }}
|
|
<span class="text-yellow-300 font-semibold">{{ winner.isVIP ? '(VIP)' : '' }}</span>
|
|
won <span class="text-yellow-300 font-semibold">€{{ winner.amount | number }}</span>
|
|
<span class="text-yellow-300">({{ winner.multiplier }}x)</span>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
`,
|
|
styles: [],
|
|
})
|
|
export class WinnerTickerComponent implements AfterViewInit {
|
|
@Input() winners: Winner[] = [];
|
|
@ViewChild('tickerContainer') tickerContainer!: ElementRef;
|
|
|
|
ngAfterViewInit(): void {
|
|
autoAnimate(this.tickerContainer.nativeElement);
|
|
}
|
|
}
|