frontend/src/app/feature/game/blackjack/blackjack.component.html

@@ -44,6 +44,7 @@
   </div>
 </div>
 
+<!-- Game Result Modal -->
 <app-game-result
   [gameState]="gameState()"
   [amount]="currentBet()"
@@ -52,6 +53,7 @@
   (gameResultClosed)="onCloseGameResult()"
 ></app-game-result>
 
+<!-- Debt Dialog -->
 <app-debt-dialog
   [amount]="debtAmount()"
   [show]="showDebtDialog()"

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

@@ -13,35 +13,28 @@ import { GameState } from '../../enum/gameState';
         <h2 class="modal-heading" [class]="getResultClass()">{{ getResultTitle() }}</h2>
         <p class="py-2 text-text-secondary mb-4">{{ getResultMessage() }}</p>
 
-        <div
+        <div class="bg-deep-blue-light/50 rounded-lg p-5 mb-6 shadow-inner border border-deep-blue-light/30">
-          class="bg-deep-blue-light/50 rounded-lg p-5 mb-6 shadow-inner border border-deep-blue-light/30"
-        >
           <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">{{ amount | currency:'EUR' }}</div>
 
             <div class="text-text-secondary">
               {{ isDraw ? 'Zurückgegeben:' : isWin ? 'Gewonnen:' : 'Verloren:' }}
             </div>
-            <div
+            <div class="font-medium text-right" [ngClass]="{
-              class="font-medium text-right"
-              [ngClass]="{
               'text-emerald': isWin,
               'text-accent-red': isLoss,
-                'text-yellow-400': isDraw,
+              'text-yellow-400': isDraw
-              }"
+            }">
-            >
+              {{ isLoss ? '-' : '+' }}{{ isWin ? (amount * 2) : amount | currency:'EUR' }}
-              {{ isLoss ? '-' : '+' }}{{ isWin ? amount * 2 : (amount | currency: 'EUR') }}
               <div *ngIf="isWin" class="text-xs text-text-secondary">
-                (Einsatz {{ amount | currency: 'EUR' }} × 2)
+                (Einsatz {{ amount | currency:'EUR' }} × 2)
               </div>
             </div>
 
-            <div class="text-text-secondary border-t border-text-secondary/20 pt-3 font-medium">
+            <div class="text-text-secondary border-t border-text-secondary/20 pt-3 font-medium">Kontostand:</div>
-              Kontostand:
-            </div>
             <div class="font-medium text-right border-t border-text-secondary/20 pt-3">
-              {{ balance | currency: 'EUR' }}
+              {{ balance | currency:'EUR' }}
             </div>
           </div>
         </div>

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

@@ -1,13 +1,4 @@
-import {
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnDestroy, OnInit, Output, signal } from '@angular/core';
-  ChangeDetectionStrategy,
-  Component,
-  EventEmitter,
-  Input,
-  OnDestroy,
-  OnInit,
-  Output,
-  signal,
-} from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { animate, style, transition, trigger } from '@angular/animations';
 import { interval, takeWhile } from 'rxjs';
@@ -21,18 +12,15 @@ import { interval, takeWhile } from 'rxjs';
       <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
+          Du hast nicht genug Geld für den Double Down. Du bist jetzt im Minus und schuldest uns {{ amount | currency:'EUR' }}.
-          {{ amount | currency: 'EUR' }}.
         </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!
         </p>
-        <div
+        <div class="bg-deep-blue-light/50 rounded-lg p-5 mb-6 shadow-inner border border-deep-blue-light/30">
-          class="bg-deep-blue-light/50 rounded-lg p-5 mb-6 shadow-inner border border-deep-blue-light/30"
-        >
           <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">{{ amount | currency:'EUR' }}</div>
           </div>
         </div>
         <div class="text-center mb-6">
@@ -50,39 +38,19 @@ import { interval, takeWhile } from 'rxjs';
           <div class="text-center mb-6">
             <div class="relative">
               <div class="absolute inset-0 bg-accent-red/20 blur-xl rounded-full"></div>
-              <div
+              <div class="relative bg-gradient-to-b from-accent-red to-red-900 p-8 rounded-lg border-2 border-accent-red shadow-lg">
-                class="relative bg-gradient-to-b from-accent-red to-red-900 p-8 rounded-lg border-2 border-accent-red shadow-lg"
-              >
                 <div class="flex items-center justify-center gap-4 mb-4">
-                  <svg
+                  <svg class="w-12 h-12 text-accent-red animate-[spin_2s_linear_infinite]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
-                    class="w-12 h-12 text-accent-red animate-[spin_2s_linear_infinite]"
+                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/>
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 24 24"
-                    fill="currentColor"
-                  >
-                    <path
-                      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"
-                    />
                   </svg>
-                  <span
+                  <span class="text-4xl font-black tracking-wider text-white animate-[pulse_1s_ease-in-out_infinite]">
-                    class="text-4xl font-black tracking-wider text-white animate-[pulse_1s_ease-in-out_infinite]"
-                  >
                     ZEIT ABGELAUFEN
                   </span>
-                  <svg
+                  <svg class="w-12 h-12 text-accent-red animate-[spin_2s_linear_infinite]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
-                    class="w-12 h-12 text-accent-red animate-[spin_2s_linear_infinite]"
+                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/>
-                    xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 24 24"
-                    fill="currentColor"
-                  >
-                    <path
-                      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"
-                    />
                   </svg>
                 </div>
-                <div
+                <div class="text-2xl font-bold text-white/90 tracking-wider animate-[pulse_1s_ease-in-out_infinite]">
-                  class="text-2xl font-bold text-white/90 tracking-wider animate-[pulse_1s_ease-in-out_infinite]"
-                >
                   KONSEQUENZEN FOLGEN
                 </div>
               </div>
@@ -149,7 +117,7 @@ export class DebtDialogComponent implements OnInit, OnDestroy {
     this.timerSubscription = interval(1000)
       .pipe(takeWhile(() => this.timeLeft() > 0))
       .subscribe(() => {
-        this.timeLeft.update((value) => value - 1);
+        this.timeLeft.update(value => value - 1);
         if (this.timeLeft() <= 5) {
           this.warningSound.play();
         }

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

@@ -19,9 +19,7 @@
             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' : ''">{{
+            <span [class]="balance() < 0 ? 'text-accent-red' : ''">{{ balance() | currency: 'EUR' : 'symbol' : '1.2-2' }}</span>
-              balance() | currency: 'EUR' : 'symbol' : '1.2-2'
-            }}</span>
           </div>
           <button (click)="logout()" class="button-primary px-4 py-1.5">Abmelden</button>
         }