feat(blackjack): add animated number component and usage #123
2 changed files with 15 additions and 7 deletions
|
@ -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 {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue