jank/casino
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: implement animated buttons and winner ticker component

Browse source
This commit is contained in:
Jan-Marlon Leibl 2025-02-05 14:40:15 +01:00 • committed by jank1619
commit 50eb399fe2
5 changed files with 202 additions and 146 deletions
Download patch file Download diff file Expand all files Collapse all files

32
frontend/src/app/shared/components/winner-ticker/winner-ticker.component.ts Normal file
View file

@ -0,0 +1,32 @@
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);
}
}