style(blackjack): format code for better readability

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

@@ -9,8 +9,12 @@
       <!-- Action message indicator -->
       @if (isActionInProgress()) {
         <div class="flex justify-center">
-          <div class="card p-4 flex items-center gap-3 animate-pulse bg-deep-blue-light border border-deep-blue-light/50">
+          <div
-            <div class="w-5 h-5 rounded-full border-2 border-white border-t-transparent animate-spin"></div>
+            class="card p-4 flex items-center gap-3 animate-pulse bg-deep-blue-light border border-deep-blue-light/50"
+          >
+            <div
+              class="w-5 h-5 rounded-full border-2 border-white border-t-transparent animate-spin"
+            ></div>
             <span>{{ currentAction() }}</span>
           </div>
         </div>

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

@@ -181,14 +181,13 @@ export default class BlackjackComponent {
     this.showGameResult.set(false);
   }
 
-  private handleGameError(error: any): void {
+  private handleGameError(error: HttpErrorResponse): void {
     if (error instanceof HttpErrorResponse) {
       if (error.status === 400 && error.error?.error === 'Invalid state') {
         this.gameInProgress.set(false);
 
         this.refreshUserBalance();
-      } 
+      } else if (error.status === 500) {
-      else if (error.status === 500) {
         console.log('Server error occurred. The game may have been updated in another session.');
 
         this.gameInProgress.set(false);
@@ -209,7 +208,7 @@ export default class BlackjackComponent {
       },
       error: (err) => {
         console.error('Failed to refresh game state:', err);
-      }
+      },
     });
   }
 

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

@@ -55,7 +55,7 @@ export class DealerHandComponent implements OnChanges {
         ...card,
         isNew,
         // Generate a unique ID to help Angular track the cards
-        id: `${card.suit}-${card.rank}-${index}`
+        id: `${card.suit}-${card.rank}-${index}`,
       };
     });
 

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

@@ -10,7 +10,9 @@ import { Card } from '../../models/blackjack.model';
     <div class="flex flex-col gap-4">
       <div class="flex justify-center text-lg mb-5">
         <div class="card p-4">
-          <div class="text-emerald font-bold mb-1">Deine Punkte: {{ calculateHandValue(playerCards) }}</div>
+          <div class="text-emerald font-bold mb-1">
+            Deine Punkte: {{ calculateHandValue(playerCards) }}
+          </div>
           <div class="text-text-secondary">
             Status: <span [class]="getStatusClass(gameState)">{{ getStatusText(gameState) }}</span>
           </div>
@@ -26,7 +28,9 @@ import { Card } from '../../models/blackjack.model';
           <span [class.invisible]="isActionInProgress">Ziehen</span>
           @if (isActionInProgress) {
             <div class="absolute inset-0 flex items-center justify-center">
-              <div class="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
+              <div
+                class="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"
+              ></div>
             </div>
           }
         </button>
@@ -39,7 +43,9 @@ import { Card } from '../../models/blackjack.model';
           <span [class.invisible]="isActionInProgress">Halten</span>
           @if (isActionInProgress) {
             <div class="absolute inset-0 flex items-center justify-center">
-              <div class="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
+              <div
+                class="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"
+              ></div>
             </div>
           }
         </button>
@@ -52,7 +58,9 @@ import { Card } from '../../models/blackjack.model';
           <span [class.invisible]="isActionInProgress">Verdoppeln</span>
           @if (isActionInProgress) {
             <div class="absolute inset-0 flex items-center justify-center">
-              <div class="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
+              <div
+                class="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"
+              ></div>
             </div>
           }
         </button>
@@ -71,8 +79,8 @@ import { Card } from '../../models/blackjack.model';
 })
 export class GameControlsComponent {
   @Input() playerCards: Card[] = [];
-  @Input() gameState: string = 'IN_PROGRESS';
+  @Input() gameState = 'IN_PROGRESS';
-  @Input() isActionInProgress: boolean = false;
+  @Input() isActionInProgress = false;
 
   @Output() hit = new EventEmitter<void>();
   @Output() stand = new EventEmitter<void>();
@@ -96,7 +104,7 @@ export class GameControlsComponent {
       JACK: 10,
       QUEEN: 10,
       KING: 10,
-      ACE: 11
+      ACE: 11,
     };
 
     for (const card of cards) {

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

@@ -92,7 +92,9 @@ import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angula
             <span [class.invisible]="isActionInProgress">Neues Spiel</span>
             @if (isActionInProgress) {
               <div class="absolute inset-0 flex items-center justify-center">
-                <div class="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
+                <div
+                  class="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"
+                ></div>
               </div>
             }
           </button>

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

@@ -8,9 +8,8 @@ describe('GameResultComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [GameResultComponent]
+      imports: [GameResultComponent],
-    })
+    }).compileComponents();
-    .compileComponents();
 
     fixture = TestBed.createComponent(GameResultComponent);
     component = fixture.componentInstance;

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

@@ -7,55 +7,49 @@ import { animate, style, transition, trigger } from '@angular/animations';
   standalone: true,
   imports: [CommonModule, CurrencyPipe],
   template: `
-    <div
+    <div *ngIf="visible" [@fadeInOut] class="modal-bg" style="z-index: 1000; position: fixed;">
-      *ngIf="visible"
+      <div class="modal-card" [@cardAnimation]>
-      [@fadeInOut]
-      class="modal-bg"
-      style="z-index: 1000; position: fixed;"
-    >
-      <div 
-        class="modal-card"
-        [@cardAnimation]
-      >
         <h2 class="modal-heading" [class]="getResultClass()">{{ getResultTitle() }}</h2>
         <p class="py-2 text-text-secondary mb-4">{{ getResultMessage() }}</p>
 
-        <div class="bg-deep-blue-light/50 rounded-lg p-5 mb-6 shadow-inner border border-deep-blue-light/30">
+        <div
+          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 }} €</div>
 
-            <div class="text-text-secondary">{{ isDraw ? 'Zurückgegeben:' : (isWin ? 'Gewonnen:' : 'Verloren:') }}</div>
+            <div class="text-text-secondary">
+              {{ isDraw ? 'Zurückgegeben:' : isWin ? 'Gewonnen:' : 'Verloren:' }}
+            </div>
             <div
               class="font-medium text-right"
               [ngClass]="{
                 'text-emerald': isWin,
                 'text-accent-red': isLoss,
-                'text-yellow-400': isDraw
+                'text-yellow-400': isDraw,
               }"
             >
               {{ isLoss ? '-' : '+' }}{{ amount }} €
             </div>
 
-            <div class="text-text-secondary border-t border-text-secondary/20 pt-3 font-medium">Gesamt:</div>
+            <div class="text-text-secondary border-t border-text-secondary/20 pt-3 font-medium">
+              Gesamt:
+            </div>
             <div
               class="font-medium text-right border-t border-text-secondary/20 pt-3"
               [ngClass]="{
                 'text-emerald': isWin,
                 'text-accent-red': isLoss,
-                'text-white': isDraw
+                'text-white': isDraw,
               }"
             >
-              {{ isWin ? '+' : (isLoss ? '-' : '') }}{{ amount }} €
+              {{ isWin ? '+' : isLoss ? '-' : '' }}{{ amount }} €
             </div>
           </div>
         </div>
 
-        <button
+        <button type="button" (click)="closeDialog()" class="button-primary w-full py-2">
-          type="button"
-          (click)="closeDialog()"
-          class="button-primary w-full py-2"
-        >
           Verstanden
         </button>
       </div>
@@ -67,29 +61,27 @@ import { animate, style, transition, trigger } from '@angular/animations';
     trigger('fadeInOut', [
       transition(':enter', [
         style({ opacity: 0 }),
-        animate('150ms ease-out', style({ opacity: 1 }))
+        animate('150ms ease-out', style({ opacity: 1 })),
       ]),
-      transition(':leave', [
+      transition(':leave', [animate('150ms ease-in', style({ opacity: 0 }))]),
-        animate('150ms ease-in', style({ opacity: 0 }))
-      ])
     ]),
     trigger('cardAnimation', [
       transition(':enter', [
         style({ opacity: 0, transform: 'scale(0.95)' }),
-        animate('200ms ease-out', style({ opacity: 1, transform: 'scale(1)' }))
+        animate('200ms ease-out', style({ opacity: 1, transform: 'scale(1)' })),
-      ])
+      ]),
-    ])
+    ]),
-  ]
+  ],
 })
 export class GameResultComponent {
-  @Input() gameState: string = '';
+  @Input() gameState = '';
-  @Input() amount: number = 0;
+  @Input() amount = 0;
   @Input() set show(value: boolean) {
     console.log('GameResultComponent show input changed:', value, 'gameState:', this.gameState);
     this.visible = value;
   }
 
-  @Output() close = new EventEmitter<void>();
+  @Output() gameResultClosed = new EventEmitter<void>();
 
   visible = false;
 
@@ -128,7 +120,7 @@ export class GameResultComponent {
 
   closeDialog(): void {
     this.visible = false;
-    this.close.emit();
+    this.gameResultClosed.emit();
     console.log('Dialog closed by user');
   }
 }

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

@@ -57,7 +57,7 @@ export class PlayerHandComponent implements OnChanges {
         ...card,
         isNew,
         // Generate a unique ID to help Angular track the cards
-        id: `${card.suit}-${card.rank}-${index}`
+        id: `${card.suit}-${card.rank}-${index}`,
       };
     });
 

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

@@ -1,4 +1,12 @@
-import { ChangeDetectionStrategy, Component, Input, AfterViewInit, ElementRef, OnChanges, SimpleChanges } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  AfterViewInit,
+  ElementRef,
+  OnChanges,
+  SimpleChanges,
+} from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { suitSymbols, Suit } from '../../models/blackjack.model';
 import { gsap } from 'gsap';
@@ -14,7 +22,9 @@ import { gsap } from 'gsap';
       [class]="hidden ? 'bg-red-800' : 'bg-white'"
     >
       @if (!hidden) {
-        <span class="text-xl font-bold" [class]="isRedSuit ? 'text-accent-red' : 'text-black'">{{ getDisplayRank(rank) }}</span>
+        <span class="text-xl font-bold" [class]="isRedSuit ? 'text-accent-red' : 'text-black'">{{
+          getDisplayRank(rank)
+        }}</span>
       }
       @if (!hidden) {
         <span
@@ -24,25 +34,29 @@ import { gsap } from 'gsap';
         >
       }
       @if (!hidden) {
-        <span class="text-xl font-bold self-end rotate-180" [class]="isRedSuit ? 'text-accent-red' : 'text-black'">{{
+        <span
-          getDisplayRank(rank)
+          class="text-xl font-bold self-end rotate-180"
-        }}</span>
+          [class]="isRedSuit ? 'text-accent-red' : 'text-black'"
+          >{{ getDisplayRank(rank) }}</span
+        >
       }
     </div>
   `,
-  styles: [`
+  styles: [
-    .card-element {
+    `
-      transform-style: preserve-3d;
+      .card-element {
-      backface-visibility: hidden;
+        transform-style: preserve-3d;
-    }
+        backface-visibility: hidden;
-  `],
+      }
+    `,
+  ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PlayingCardComponent implements AfterViewInit, OnChanges {
   @Input({ required: true }) rank!: string;
   @Input({ required: true }) suit!: Suit;
   @Input({ required: true }) hidden!: boolean;
-  @Input() isNew: boolean = false;
+  @Input() isNew = false;
 
   constructor(private elementRef: ElementRef) {}
 
@@ -70,7 +84,7 @@ export class PlayingCardComponent implements AfterViewInit, OnChanges {
         y: -100,
         opacity: 0,
         rotation: -10,
-        scale: 0.7
+        scale: 0.7,
       },
       {
         y: 0,
@@ -78,7 +92,7 @@ export class PlayingCardComponent implements AfterViewInit, OnChanges {
         rotation: 0,
         scale: 1,
         duration: 0.5,
-        ease: 'power2.out'
+        ease: 'power2.out',
       }
     );
   }
@@ -90,7 +104,7 @@ export class PlayingCardComponent implements AfterViewInit, OnChanges {
       duration: 0.3,
       onComplete: () => {
         gsap.set(cardElement, { rotationY: 0 });
-      }
+      },
     });
   }