Merge pull request 'task/CAS-50/add_rest_blackjack_logic_with_frontend_animations' (!121) from task/CAS-50/add_rest_blackjack_logic_with_frontend_animations into main

Reviewed-on: #121

backend/src/main/java/de/szut/casino/blackjack/BlackJackService.java

@@ -74,10 +74,6 @@ public class BlackJackService {
         UserEntity user = getUserWithFreshData(game.getUser());
         BigDecimal additionalBet = game.getBet();
         
-        if (user.getBalance().compareTo(additionalBet) < 0) {
-            return game;
-        }
-        
         deductBetFromBalance(user, additionalBet);
         game.setBet(game.getBet().add(additionalBet));
         

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

@@ -44,10 +44,16 @@
   </div>
 </div>
 
-<!-- Game Result Modal -->
 <app-game-result
   [gameState]="gameState()"
   [amount]="currentBet()"
+  [balance]="balance()"
   [show]="showGameResult()"
   (gameResultClosed)="onCloseGameResult()"
 ></app-game-result>
+
+<app-debt-dialog
+  [amount]="debtAmount()"
+  [show]="showDebtDialog()"
+  (dialogClosed)="onCloseDebtDialog()"
+></app-debt-dialog>

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

@@ -14,6 +14,7 @@ import { GameState } from '@blackjack/enum/gameState';
 import { NavbarComponent } from '@shared/components/navbar/navbar.component';
 import { UserService } from '@service/user.service';
 import { timer } from 'rxjs';
+import { DebtDialogComponent } from '@shared/components/debt-dialog/debt-dialog.component';
 
 @Component({
   selector: 'app-blackjack',
@@ -27,6 +28,7 @@ import { timer } from 'rxjs';
     GameControlsComponent,
     GameInfoComponent,
     GameResultComponent,
+    DebtDialogComponent,
   ],
   templateUrl: './blackjack.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -48,6 +50,9 @@ export default class BlackjackComponent implements OnInit {
   isActionInProgress = signal(false);
   currentAction = signal<string>('');
 
+  showDebtDialog = signal(false);
+  debtAmount = signal(0);
+
   ngOnInit(): void {
     this.userService.currentUser$.subscribe((user) => {
       if (user) {
@@ -167,7 +172,12 @@ export default class BlackjackComponent implements OnInit {
     this.blackjackService.doubleDown(this.currentGameId()!).subscribe({
       next: (game) => {
         this.updateGameState(game);
-        this.userService.refreshCurrentUser();
+        this.userService.getCurrentUser().subscribe((user) => {
+          if (user && user.balance < 0) {
+            this.debtAmount.set(Math.abs(user.balance));
+            this.showDebtDialog.set(true);
+          }
+        });
         this.isActionInProgress.set(false);
       },
       error: (error) => {
@@ -184,6 +194,10 @@ export default class BlackjackComponent implements OnInit {
     this.userService.refreshCurrentUser();
   }
 
+  onCloseDebtDialog(): void {
+    this.showDebtDialog.set(false);
+  }
+
   private handleGameError(error: HttpErrorResponse): void {
     if (error instanceof HttpErrorResponse) {
       if (error.status === 400 && error.error?.error === 'Invalid state') {

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

@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } f
 import { CommonModule } from '@angular/common';
 import { Card } from '@blackjack/models/blackjack.model';
 import { PlayingCardComponent } from '../playing-card/playing-card.component';
+import { GameControlsService } from '@blackjack/services/game-controls.service';
 
 @Component({
   selector: 'app-dealer-hand',
@@ -9,7 +10,15 @@ import { PlayingCardComponent } from '../playing-card/playing-card.component';
   imports: [CommonModule, PlayingCardComponent],
   template: `
     <div class="space-y-4">
-      <h3 class="section-heading text-2xl mb-4">Croupier's Karten</h3>
+      <div class="flex justify-between items-center">
+        <h3 class="section-heading text-2xl">Dealer's Karten</h3>
+        <div class="flex items-center gap-2">
+          <div class="text-text-secondary">Punkte:</div>
+          <div class="text-xl font-bold text-accent-red">
+            {{ gameControlsService.calculateHandValue(cards) }}
+          </div>
+        </div>
+      </div>
       <div class="card p-6 !bg-accent-red">
         <div class="flex justify-center gap-4 min-h-[160px] p-4 border-2 border-red-400 rounded-lg">
           @if (cards.length > 0) {
@@ -38,6 +47,8 @@ export class DealerHandComponent implements OnChanges {
 
   private lastCardCount = 0;
 
+  constructor(protected gameControlsService: GameControlsService) {}
+
   ngOnChanges(changes: SimpleChanges): void {
     if (changes['cards']) {
       this.updateCardsWithState();

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

@@ -18,7 +18,7 @@ import { GameState } from '../../enum/gameState';
         >
           <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="font-medium text-right">{{ amount | currency: 'EUR' }}</div>
 
             <div class="text-text-secondary">
               {{ isDraw ? 'Zurückgegeben:' : isWin ? 'Gewonnen:' : 'Verloren:' }}
@@ -31,21 +31,17 @@ import { GameState } from '../../enum/gameState';
                 'text-yellow-400': isDraw,
               }"
             >
-              {{ isLoss ? '-' : '+' }}{{ amount }} €
+              {{ isLoss ? '-' : '+' }}{{ isWin ? amount * 2 : (amount | currency: 'EUR') }}
+              <div *ngIf="isWin" class="text-xs text-text-secondary">
+                (Einsatz {{ amount | currency: 'EUR' }} × 2)
+              </div>
             </div>
 
             <div class="text-text-secondary border-t border-text-secondary/20 pt-3 font-medium">
-              Gesamt:
+              Kontostand:
             </div>
-            <div
+            <div class="font-medium text-right border-t border-text-secondary/20 pt-3">
-              class="font-medium text-right border-t border-text-secondary/20 pt-3"
+              {{ balance | currency: 'EUR' }}
-              [ngClass]="{
-                'text-emerald': isWin,
-                'text-accent-red': isLoss,
-                'text-white': isDraw,
-              }"
-            >
-              {{ isWin ? '+' : isLoss ? '-' : '' }}{{ amount }} €
             </div>
           </div>
         </div>
@@ -76,6 +72,7 @@ import { GameState } from '../../enum/gameState';
 export class GameResultComponent {
   @Input() gameState: GameState = GameState.IN_PROGRESS;
   @Input() amount = 0;
+  @Input() balance = 0;
   @Input() set show(value: boolean) {
     console.log('GameResultComponent show input changed:', value, 'gameState:', this.gameState);
     this.visible = value;

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

@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } f
 import { CommonModule } from '@angular/common';
 import { PlayingCardComponent } from '../playing-card/playing-card.component';
 import { Card } from '@blackjack/models/blackjack.model';
+import { GameControlsService } from '@blackjack/services/game-controls.service';
 
 @Component({
   selector: 'app-player-hand',
@@ -9,7 +10,15 @@ import { Card } from '@blackjack/models/blackjack.model';
   imports: [CommonModule, PlayingCardComponent],
   template: `
     <div class="space-y-4">
-      <h3 class="section-heading text-2xl mb-4">Deine Karten</h3>
+      <div class="flex justify-between items-center">
+        <h3 class="section-heading text-2xl">Deine Karten</h3>
+        <div class="flex items-center gap-2">
+          <div class="text-text-secondary">Punkte:</div>
+          <div class="text-xl font-bold text-emerald">
+            {{ gameControlsService.calculateHandValue(cards) }}
+          </div>
+        </div>
+      </div>
       <div class="card p-6 !bg-emerald">
         <div
           class="flex justify-center gap-4 min-h-[160px] p-4 border-2 border-emerald-400 rounded-lg"
@@ -40,6 +49,8 @@ export class PlayerHandComponent implements OnChanges {
 
   private lastCardCount = 0;
 
+  constructor(protected gameControlsService: GameControlsService) {}
+
   ngOnChanges(changes: SimpleChanges): void {
     if (changes['cards']) {
       this.updateCardsWithState();

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

@@ -0,0 +1,173 @@
+import {
+  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, Subscription, takeWhile } from 'rxjs';
+
+@Component({
+  selector: 'app-debt-dialog',
+  standalone: true,
+  imports: [CommonModule],
+  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' }}.
+        </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
+          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>
+        </div>
+        <div class="text-center mb-6">
+          <div
+            class="text-8xl font-bold text-accent-red"
+            [class.animate-pulse]="timeLeft() <= 10"
+            [class.animate-bounce]="timeLeft() <= 5"
+            [@countdown]="timeLeft()"
+          >
+            {{ timeLeft() }}
+          </div>
+          <div class="text-text-secondary mt-2">Sekunden verbleibend</div>
+        </div>
+        @if (timeLeft() === 0) {
+          <div class="text-center mb-6">
+            <div class="relative">
+              <div class="absolute inset-0 bg-accent-red/20 blur-xl rounded-full"></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"
+              >
+                <div class="flex items-center justify-center gap-4 mb-4">
+                  <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"
+                  >
+                    <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
+                    class="text-4xl font-black tracking-wider text-white animate-[pulse_1s_ease-in-out_infinite]"
+                  >
+                    ZEIT ABGELAUFEN
+                  </span>
+                  <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"
+                  >
+                    <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
+                  class="text-2xl font-bold text-white/90 tracking-wider animate-[pulse_1s_ease-in-out_infinite]"
+                >
+                  KONSEQUENZEN FOLGEN
+                </div>
+              </div>
+            </div>
+          </div>
+        }
+        <button type="button" (click)="closeDialog()" class="button-primary w-full py-2">
+          Verstanden
+        </button>
+      </div>
+    </div>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [
+    trigger('fadeInOut', [
+      transition(':enter', [
+        style({ opacity: 0 }),
+        animate('150ms ease-out', style({ opacity: 1 })),
+      ]),
+      transition(':leave', [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)' })),
+      ]),
+    ]),
+    trigger('countdown', [
+      transition('* => *', [
+        style({ transform: 'scale(1.2)' }),
+        animate('100ms ease-out', style({ transform: 'scale(1)' })),
+      ]),
+    ]),
+  ],
+})
+export class DebtDialogComponent implements OnInit, OnDestroy {
+  @Input() amount = 0;
+  @Input() set show(value: boolean) {
+    this.visible = value;
+    if (value) {
+      this.startTimer();
+    }
+  }
+
+  @Output() dialogClosed = new EventEmitter<void>();
+
+  visible = false;
+  timeLeft = signal(30);
+  private timerSubscription: Subscription | undefined;
+  private warningSound = new Audio('assets/sounds/warning.mp3');
+
+  ngOnInit() {
+    if (this.visible) {
+      this.startTimer();
+    }
+  }
+
+  ngOnDestroy() {
+    this.stopTimer();
+  }
+
+  private startTimer() {
+    this.timeLeft.set(30);
+    this.timerSubscription = interval(1000)
+      .pipe(takeWhile(() => this.timeLeft() > 0))
+      .subscribe(() => {
+        this.timeLeft.update((value) => value - 1);
+        if (this.timeLeft() <= 5) {
+          this.warningSound.play();
+        }
+        if (this.timeLeft() === 0) {
+          setTimeout(() => this.closeDialog(), 5000);
+        }
+      });
+  }
+
+  private stopTimer() {
+    if (this.timerSubscription) {
+      this.timerSubscription.unsubscribe();
+    }
+  }
+
+  closeDialog(): void {
+    this.stopTimer();
+    this.visible = false;
+    this.dialogClosed.emit();
+  }
+}

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

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