Merge branch 'main' into feature/authentik

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">

frontend/src/app/shared/components/navbar/navbar.component.html

@@ -19,9 +19,9 @@
             class="text-white font-bold bg-deep-blue-contrast rounded-full px-4 py-2 text-sm hover:bg-deep-blue-contrast/80 hover:cursor-pointer hover:scale-105 transition-all active:scale-95 select-none duration-300"
             routerLink="/home"
           >
-            <span [class]="balance() < 0 ? 'text-accent-red' : ''">{{
-              balance() | currency: 'EUR' : 'symbol' : '1.2-2'
-            }}</span>
+            <span [class]="balance() < 0 ? 'text-accent-red' : ''">
+              <app-animated-number [value]="balance()" [duration]="0.5"></app-animated-number>
+            </span>
           </div>
           <button (click)="logout()" class="button-primary px-4 py-1.5">Abmelden</button>
         }

frontend/src/app/shared/components/navbar/navbar.component.ts

@@ -11,12 +11,13 @@ import { AuthService } from '../../../service/auth.service';
 import { CurrencyPipe } from '@angular/common';
 import { UserService } from '@service/user.service';
 import { Subscription } from 'rxjs';
+import { AnimatedNumberComponent } from '@blackjack/components/animated-number/animated-number.component';
 
 @Component({
   selector: 'app-navbar',
   templateUrl: './navbar.component.html',
   standalone: true,
-  imports: [RouterModule, CurrencyPipe],
+  imports: [RouterModule, CurrencyPipe, AnimatedNumberComponent],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NavbarComponent implements OnInit, OnDestroy {