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

feat(blackjack): add animated number component and usage #123

Merged
jleibl merged 3 commits from task/CAS-50/add_rest_blackjack_logic_with_frontend_animations into main 2025-04-03 08:07:07 +00:00
Conversation 2 Commits 3 Files changed 12 +15 -7
2 changed files with 15 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit b5a6582905 - Show all commits

19
frontend/src/app/feature/game/blackjack/components/animated-number/animated-number.component.ts
View file

@ -1,4 +1,13 @@
import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges, ElementRef, ViewChild, AfterViewInit } from '@angular/core'; import {
ChangeDetectionStrategy,
Component,
Input,
OnChanges,
SimpleChanges,
ElementRef,
ViewChild,
AfterViewInit,
} from '@angular/core';
import { CommonModule, CurrencyPipe } from '@angular/common'; import { CommonModule, CurrencyPipe } from '@angular/common';
import { CountUp } from 'countup.js'; import { CountUp } from 'countup.js';
@ -6,9 +15,7 @@ import { CountUp } from 'countup.js';
selector: 'app-animated-number', selector: 'app-animated-number',
standalone: true, standalone: true,
imports: [CommonModule, CurrencyPipe], imports: [CommonModule, CurrencyPipe],
template: ` template: ` <span #numberElement>{{ formattedValue }}</span> `,
<span #numberElement>{{ formattedValue }}</span>
`,
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class AnimatedNumberComponent implements OnChanges, AfterViewInit { export class AnimatedNumberComponent implements OnChanges, AfterViewInit {
@ -35,7 +42,7 @@ export class AnimatedNumberComponent implements OnChanges, AfterViewInit {
if (changes['value']) { if (changes['value']) {
if (this.countUp) { if (this.countUp) {
const endVal = this.value; const endVal = this.value;
this.countUp.update(endVal); this.countUp.update(endVal);
this.previousValue = endVal; this.previousValue = endVal;
} else { } else {
@ -73,4 +80,4 @@ export class AnimatedNumberComponent implements OnChanges, AfterViewInit {
}); });
} }
} }
} }

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

@ -40,7 +40,8 @@ import { AnimatedNumberComponent } from '../animated-number/animated-number.comp
[duration]="0.5" [duration]="0.5"
></app-animated-number> ></app-animated-number>
<div *ngIf="isWin" class="text-xs text-text-secondary"> <div *ngIf="isWin" class="text-xs text-text-secondary">
(Einsatz <app-animated-number [value]="amount" [duration]="0.5"></app-animated-number> × 2) (Einsatz
<app-animated-number [value]="amount" [duration]="0.5"></app-animated-number> × 2)
</div> </div>
</div> </div>