feat(blackjack): add animated number component and usage

frontend/src/app/shared/components/debt-dialog/debt-dialog.component.ts

@@ -11,18 +11,19 @@ import {
 import { CommonModule } from '@angular/common';
 import { animate, style, transition, trigger } from '@angular/animations';
 import { interval, Subscription, takeWhile } from 'rxjs';
+import { AnimatedNumberComponent } from '@blackjack/components/animated-number/animated-number.component';
 
 @Component({
   selector: 'app-debt-dialog',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, AnimatedNumberComponent],
   template: `
     <div *ngIf="visible" [@fadeInOut] class="modal-bg" style="z-index: 1000; position: fixed;">
       <div class="modal-card" [@cardAnimation]>
         <h2 class="modal-heading text-accent-red">WARNUNG!</h2>
         <p class="py-2 text-text-secondary mb-4">
           Du hast nicht genug Geld für den Double Down. Du bist jetzt im Minus und schuldest uns
-          {{ amount | currency: 'EUR' }}.
+          <app-animated-number [value]="amount" [duration]="0.5"></app-animated-number>.
         </p>
         <p class="py-2 text-accent-red mb-4 font-bold">
           Liefer das Geld sofort an den Dead Drop oder es wird unangenehme Konsequenzen geben!
@@ -32,7 +33,9 @@ import { interval, Subscription, takeWhile } from 'rxjs';
         >
           <div class="grid grid-cols-2 gap-4">
             <div class="text-text-secondary">Schulden:</div>
-            <div class="font-medium text-right text-accent-red">{{ amount | currency: 'EUR' }}</div>
+            <div class="font-medium text-right text-accent-red">
+              <app-animated-number [value]="amount" [duration]="0.5"></app-animated-number>
+            </div>
           </div>
         </div>
         <div class="text-center mb-6">