SZUT/casino
5
1
Fork 0
Code Issues Pull requests 1 Releases 72 Wiki Activity Actions

feat(blackjack): add animated number component and usage

Browse source
This commit is contained in:
Jan-Marlon Leibl 2025-04-03 10:02:15 +02:00
parent a2f1a40931
commit 4b70a4ac4a
Signed by: jleibl
GPG key ID: 300B2F906DC6F1D5
11 changed files with 127 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

17
frontend/src/app/feature/game/blackjack/components/game-result/game-result.component.ts
View file

@ -2,11 +2,12 @@ import { ChangeDetectionStrategy, Component, Input, Output, EventEmitter } from
import { CommonModule, CurrencyPipe } from '@angular/common';
import { animate, style, transition, trigger } from '@angular/animations';
import { GameState } from '../../enum/gameState';
import { AnimatedNumberComponent } from '../animated-number/animated-number.component';
@Component({
selector: 'app-game-result',
standalone: true,
imports: [CommonModule, CurrencyPipe],
imports: [CommonModule, CurrencyPipe, AnimatedNumberComponent],
template: `
<div *ngIf="visible" [@fadeInOut] class="modal-bg" style="z-index: 1000; position: fixed;">
<div class="modal-card" [@cardAnimation]>
@ -18,7 +19,9 @@ import { GameState } from '../../enum/gameState';
>
<div class="grid grid-cols-2 gap-4">
<div class="text-text-secondary">Einsatz:</div>
<div class="font-medium text-right">{{ amount | currency: 'EUR' }}</div>
<div class="font-medium text-right">
<app-animated-number [value]="amount" [duration]="0.5"></app-animated-number>
</div>
<div class="text-text-secondary">
{{ isDraw ? 'Zurückgegeben:' : isWin ? 'Gewonnen:' : 'Verloren:' }}
@ -31,9 +34,13 @@ import { GameState } from '../../enum/gameState';
'text-yellow-400': isDraw,
}"
>
{{ isLoss ? '-' : '+' }}{{ isWin ? amount * 2 : (amount | currency: 'EUR') }}
{{ isLoss ? '-' : '+' }}
<app-animated-number
[value]="isWin ? amount * 2 : amount"
[duration]="0.5"
></app-animated-number>
<div *ngIf="isWin" class="text-xs text-text-secondary">
(Einsatz {{ amount | currency: 'EUR' }} × 2)
(Einsatz <app-animated-number [value]="amount" [duration]="0.5"></app-animated-number> × 2)
</div>
</div>
@ -41,7 +48,7 @@ import { GameState } from '../../enum/gameState';
Kontostand:
</div>
<div class="font-medium text-right border-t border-text-secondary/20 pt-3">
{{ balance | currency: 'EUR' }}
<app-animated-number [value]="balance" [duration]="0.5"></app-animated-number>
</div>
</div>
</div>