refactor: remove unnecessary comments and variables

Reviewed-on: #121

backend/build.gradle.kts

@@ -39,7 +39,7 @@ repositories {
 }
 
 dependencies {
-    implementation("com.stripe:stripe-java:20.136.0")
+    implementation("com.stripe:stripe-java:29.0.0")
     implementation("org.springframework.boot:spring-boot-starter-data-jpa")
     implementation("org.springframework.boot:spring-boot-starter-web")
     compileOnly("org.projectlombok:lombok")

backend/requests/lootboxes.http

@@ -0,0 +1,9 @@
+GET http://localhost:8080/lootboxes
+Authorization: Bearer {{token}}
+Content-Type: application/json
+
+###
+
+POST http://localhost:8080/lootboxes/2
+Authorization: Bearer {{token}}
+Content-Type: application/json

backend/src/main/java/de/szut/casino/CasinoApplication.java

@@ -1,10 +1,20 @@
 package de.szut.casino;
 
+import de.szut.casino.lootboxes.LootBoxEntity;
+import de.szut.casino.lootboxes.LootBoxRepository;
+import de.szut.casino.lootboxes.RewardEntity;
+import de.szut.casino.lootboxes.RewardRepository;
+import org.springframework.boot.CommandLineRunner;
 import org.springframework.boot.SpringApplication;
 import org.springframework.boot.autoconfigure.SpringBootApplication;
 import org.springframework.context.annotation.Bean;
 import org.springframework.web.client.RestTemplate;
 
+import java.math.BigDecimal;
+import java.util.ArrayList;
+import java.util.Arrays;
+import java.util.List;
+
 @SpringBootApplication
 public class CasinoApplication {
 
@@ -16,4 +26,65 @@ public class CasinoApplication {
     public static RestTemplate restTemplate() {
         return new RestTemplate();
     }
+
+    @Bean
+    public CommandLineRunner initData(LootBoxRepository lootBoxRepository, RewardRepository rewardRepository) {
+        return _ -> {
+            if (lootBoxRepository.count() == 0) {
+                LootBoxEntity basicLootBox = new LootBoxEntity();
+                basicLootBox.setName("Basic LootBox");
+                basicLootBox.setPrice(new BigDecimal("2"));
+                basicLootBox.setRewards(new ArrayList<>()); // Initialize the list
+
+                LootBoxEntity premiumLootBox = new LootBoxEntity();
+                premiumLootBox.setName("Premium LootBox");
+                premiumLootBox.setPrice(new BigDecimal("5"));
+                premiumLootBox.setRewards(new ArrayList<>()); // Initialize the list
+
+                lootBoxRepository.saveAll(Arrays.asList(basicLootBox, premiumLootBox));
+
+                RewardEntity commonReward = new RewardEntity();
+                commonReward.setValue(new BigDecimal("0.50"));
+                commonReward.setProbability(new BigDecimal("0.7"));
+
+                RewardEntity rareReward = new RewardEntity();
+                rareReward.setValue(new BigDecimal("2.00"));
+                rareReward.setProbability(new BigDecimal("0.25"));
+
+                RewardEntity epicReward = new RewardEntity();
+                epicReward.setValue(new BigDecimal("5.00"));
+                epicReward.setProbability(new BigDecimal("0.5"));
+
+                RewardEntity premiumCommon = new RewardEntity();
+                premiumCommon.setValue(new BigDecimal("2.00"));
+                premiumCommon.setProbability(new BigDecimal("0.6"));
+
+                RewardEntity premiumRare = new RewardEntity();
+                premiumRare.setValue(new BigDecimal("5.00"));
+                premiumRare.setProbability(new BigDecimal("0.3"));
+
+                RewardEntity legendaryReward = new RewardEntity();
+                legendaryReward.setValue(new BigDecimal("15.00"));
+                legendaryReward.setProbability(new BigDecimal("0.10"));
+
+                rewardRepository.saveAll(Arrays.asList(
+                        commonReward, rareReward, epicReward,
+                        premiumCommon, premiumRare, legendaryReward
+                ));
+
+                basicLootBox.getRewards().add(commonReward);
+                basicLootBox.getRewards().add(premiumRare);
+
+                premiumLootBox.getRewards().add(premiumCommon);
+                premiumLootBox.getRewards().add(premiumRare);
+                premiumLootBox.getRewards().add(legendaryReward);
+
+                lootBoxRepository.saveAll(Arrays.asList(basicLootBox, premiumLootBox));
+
+                System.out.println("Initial LootBoxes and rewards created successfully");
+            } else {
+                System.out.println("LootBoxes already exist, skipping initialization");
+            }
+        };
+    }
 }

backend/src/main/java/de/szut/casino/deposit/DepositController.java

@@ -52,11 +52,15 @@ public class DepositController {
 
         SessionCreateParams params = SessionCreateParams.builder()
                 .addLineItem(SessionCreateParams.LineItem.builder()
-                        .setAmount((long) amountDto.getAmount() * 100)
+                        .setPriceData(SessionCreateParams.LineItem.PriceData.builder()
                                 .setCurrency("EUR")
-                        .setQuantity(1L)
+                                .setUnitAmount((long) amountDto.getAmount() * 100)
+                                .setProductData(SessionCreateParams.LineItem.PriceData.ProductData.builder()
                                         .setName("Einzahlung")
                                         .build())
+                                .build())
+                        .setQuantity(1L)
+                        .build())
                 .setSuccessUrl(frontendHost+"/home?success=true")
                 .setCancelUrl(frontendHost+"/home?success=false")
                 .setMode(SessionCreateParams.Mode.PAYMENT)

backend/src/main/java/de/szut/casino/deposit/TransactionService.java

@@ -40,7 +40,7 @@ public class TransactionService {
                 .build();
         Session checkoutSession = Session.retrieve(sessionID, params, null);
 
-        if (!Objects.equals(checkoutSession.getPaymentStatus(), "paid")) {
+        if (!"paid".equals(checkoutSession.getPaymentStatus())) {
             return;
         }
 
@@ -53,10 +53,12 @@ public class TransactionService {
         transaction.setStatus(TransactionStatus.SUCCEEDED);
 
         UserEntity user = transaction.getUser();
-        user.addBalance(checkoutSession.getAmountTotal());
+        Long amountTotal = checkoutSession.getAmountTotal();
+        if (amountTotal != null) {
+            user.addBalance(amountTotal);
+        }
 
         userRepository.save(user);
         transactionRepository.save(transaction);
     }
-
 }

backend/src/main/java/de/szut/casino/deposit/WebhookController.java

@@ -51,12 +51,18 @@ public class WebhookController {
         switch (event.getType()) {
             case "checkout.session.completed":
             case "checkout.session.async_payment_succeeded":
-                Session session = (Session) event.getData().getObject();
+                EventDataObjectDeserializer dataObjectDeserializer = event.getDataObjectDeserializer();
                 
+                if (dataObjectDeserializer.getObject().isPresent()) {
+                    Session session = (Session) dataObjectDeserializer.getObject().get();
                     this.transactionService.fulfillCheckout(session.getId());
+                } else {
+                    logger.error("Failed to deserialize webhook event data");
+                }
                 break;
             default:
-
+                // No action needed for other event types
+                break;
         }
 
         return ResponseEntity.ok().body(null);

backend/src/main/java/de/szut/casino/lootboxes/LootBoxController.java

@@ -0,0 +1,58 @@
+package de.szut.casino.lootboxes;
+
+import de.szut.casino.user.UserEntity;
+import de.szut.casino.user.UserRepository;
+import de.szut.casino.user.UserService;
+import org.springframework.http.ResponseEntity;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+import java.util.Optional;
+
+@RestController
+public class LootBoxController {
+    private final LootBoxRepository lootBoxRepository;
+    private final UserService userService;
+    private final LootBoxService lootBoxService;
+
+    public LootBoxController(LootBoxRepository lootBoxRepository, UserRepository userRepository, UserService userService, LootBoxService lootBoxService) {
+        this.lootBoxRepository = lootBoxRepository;
+        this.userService = userService;
+        this.lootBoxService = lootBoxService;
+    }
+
+    @GetMapping("/lootboxes")
+    public List<LootBoxEntity> getAllLootBoxes() {
+        return lootBoxRepository.findAll();
+    }
+
+    @PostMapping("/lootboxes/{id}")
+    public ResponseEntity<Object> purchaseLootBox(@PathVariable Long id, @RequestHeader("Authorization") String token) {
+        Optional<LootBoxEntity> optionalLootBox = lootBoxRepository.findById(id);
+        if (optionalLootBox.isEmpty()) {
+            return ResponseEntity.notFound().build();
+        }
+
+        LootBoxEntity lootBox = optionalLootBox.get();
+
+        Optional<UserEntity> optionalUser = userService.getCurrentUser(token);
+        if (optionalUser.isEmpty()) {
+            return ResponseEntity.notFound().build();
+        }
+
+        UserEntity user = optionalUser.get();
+
+        if (lootBoxService.hasSufficientBalance(user, lootBox.getPrice())) {
+            Map<String, String> errorResponse = new HashMap<>();
+            errorResponse.put("error", "Insufficient balance");
+            return ResponseEntity.badRequest().body(errorResponse);
+        }
+
+        RewardEntity reward = lootBoxService.determineReward(lootBox);
+        lootBoxService.handleBalance(user, lootBox, reward);
+
+        return ResponseEntity.ok(reward);
+    }
+}

backend/src/main/java/de/szut/casino/lootboxes/LootBoxEntity.java

@@ -0,0 +1,40 @@
+package de.szut.casino.lootboxes;
+
+import com.fasterxml.jackson.annotation.JsonBackReference;
+import com.fasterxml.jackson.annotation.JsonIgnore;
+import com.fasterxml.jackson.annotation.JsonManagedReference;
+import de.szut.casino.blackjack.CardEntity;
+import jakarta.persistence.*;
+import lombok.AllArgsConstructor;
+import lombok.Getter;
+import lombok.NoArgsConstructor;
+import lombok.Setter;
+import org.hibernate.annotations.SQLRestriction;
+
+import java.math.BigDecimal;
+import java.util.ArrayList;
+import java.util.List;
+
+@Entity
+@Getter
+@Setter
+@AllArgsConstructor
+@NoArgsConstructor
+public class LootBoxEntity {
+    @Id
+    @GeneratedValue
+    private Long id;
+
+    private String name;
+
+    @Column(precision = 19, scale = 2)
+    private BigDecimal price;
+
+    @ManyToMany(cascade = {CascadeType.PERSIST, CascadeType.MERGE})
+    @JoinTable(
+            name = "lootbox_reward",
+            joinColumns = @JoinColumn(name = "lootbox_id"),
+            inverseJoinColumns = @JoinColumn(name = "reward_id")
+    )
+    private List<RewardEntity> rewards = new ArrayList<>();
+}

backend/src/main/java/de/szut/casino/lootboxes/LootBoxRepository.java

@@ -0,0 +1,8 @@
+package de.szut.casino.lootboxes;
+
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.stereotype.Service;
+
+@Service
+public interface LootBoxRepository extends JpaRepository<LootBoxEntity, Long> {
+}

backend/src/main/java/de/szut/casino/lootboxes/LootBoxService.java

@@ -0,0 +1,40 @@
+package de.szut.casino.lootboxes;
+
+import de.szut.casino.user.UserEntity;
+import de.szut.casino.user.UserRepository;
+import org.springframework.stereotype.Service;
+
+import java.math.BigDecimal;
+
+@Service
+public class LootBoxService {
+    private final UserRepository userRepository;
+
+    public LootBoxService(UserRepository userRepository) {
+        this.userRepository = userRepository;
+    }
+
+    public boolean hasSufficientBalance(UserEntity user, BigDecimal price) {
+        return user.getBalance().compareTo(price) < 0;
+    }
+
+    public RewardEntity determineReward(LootBoxEntity lootBox) {
+        double randomValue = Math.random();
+        BigDecimal cumulativeProbability = BigDecimal.ZERO;
+
+        for (RewardEntity reward : lootBox.getRewards()) {
+            cumulativeProbability = cumulativeProbability.add(reward.getProbability());
+            if (randomValue <= cumulativeProbability.doubleValue()) {
+                return reward;
+            }
+        }
+
+        return lootBox.getRewards().getLast();
+    }
+
+    public void handleBalance(UserEntity user, LootBoxEntity lootBox, RewardEntity reward) {
+        user.setBalance(user.getBalance().subtract(lootBox.getPrice()));
+        user.setBalance(user.getBalance().add(reward.getValue()));
+        userRepository.save(user);
+    }
+}

backend/src/main/java/de/szut/casino/lootboxes/RewardEntity.java

@@ -0,0 +1,30 @@
+package de.szut.casino.lootboxes;
+
+import com.fasterxml.jackson.annotation.JsonBackReference;
+import com.fasterxml.jackson.annotation.JsonManagedReference;
+import jakarta.persistence.*;
+import lombok.Getter;
+import lombok.Setter;
+
+import java.math.BigDecimal;
+import java.util.ArrayList;
+import java.util.List;
+
+@Getter
+@Setter
+@Entity
+public class RewardEntity {
+    @Id
+    @GeneratedValue
+    private Long id;
+
+    @Column(precision = 19, scale = 2)
+    private BigDecimal value;
+
+    @Column(precision = 5, scale = 2)
+    private BigDecimal probability;
+
+    @ManyToMany(mappedBy = "rewards")
+    @JsonBackReference
+    private List<LootBoxEntity> lootBoxes = new ArrayList<>();
+}

backend/src/main/java/de/szut/casino/lootboxes/RewardRepository.java

@@ -0,0 +1,8 @@
+package de.szut.casino.lootboxes;
+
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.stereotype.Service;
+
+@Service
+public interface RewardRepository extends JpaRepository<RewardEntity, Long> {
+}

frontend/package.json

@@ -9,39 +9,42 @@
     "test": "bunx @angular/cli test",
     "format": "prettier --write \"src/**/*.{ts,html,css,scss}\"",
     "format:check": "prettier --check \"src/**/*.{ts,html,css,scss}\"",
-    "lint": "ng lint"
+    "lint": "bunx @angular/cli lint"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^18.2.0",
+    "@angular/animations": "^19.0.0",
-    "@angular/cdk": "~18.2.14",
+    "@angular/cdk": "~19.2.0",
-    "@angular/common": "^18.2.0",
+    "@angular/common": "^19.0.0",
-    "@angular/compiler": "^18.2.0",
+    "@angular/compiler": "^19.2.4",
-    "@angular/core": "^18.2.0",
+    "@angular/core": "^19.0.0",
-    "@angular/forms": "^18.2.0",
+    "@angular/forms": "^19.0.0",
-    "@angular/platform-browser": "^18.2.0",
+    "@angular/platform-browser": "^19.0.0",
-    "@angular/platform-browser-dynamic": "^18.2.0",
+    "@angular/platform-browser-dynamic": "^19.0.0",
-    "@angular/router": "^18.2.0",
+    "@angular/router": "^19.0.0",
     "@fortawesome/angular-fontawesome": "^1.0.0",
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
     "@fortawesome/free-brands-svg-icons": "^6.7.2",
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
-    "@stripe/stripe-js": "^5.6.0",
+    "@stripe/stripe-js": "^7.0.0",
     "@tailwindcss/postcss": "^4.0.3",
+    "ajv": "8.17.1",
+    "ajv-formats": "3.0.1",
+    "countup.js": "^2.8.0",
     "gsap": "^3.12.7",
-    "keycloak-angular": "^16.0.1",
+    "keycloak-angular": "^19.0.0",
-    "keycloak-js": "^25.0.5",
+    "keycloak-js": "^26.0.0",
     "postcss": "^8.5.1",
-    "rxjs": "~7.8.0",
+    "rxjs": "~7.8.2",
     "tailwindcss": "^4.0.3",
     "tslib": "^2.3.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.2.2",
+    "@angular-devkit/build-angular": "^19.0.0",
-    "@angular/cli": "^18.2.2",
+    "@angular/cli": "^19.2.5",
-    "@angular/compiler-cli": "^18.2.0",
+    "@angular/compiler-cli": "^19.0.0",
     "@types/jasmine": "~5.1.0",
-    "angular-eslint": "19.2.1",
+    "angular-eslint": "19.3.0",
     "eslint": "^9.20.0",
     "jasmine-core": "~5.6.0",
     "karma": "~6.4.0",
@@ -50,7 +53,7 @@
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
     "prettier": "^3.4.2",
-    "typescript": "~5.5.0",
+    "typescript": "~5.8.0",
-    "typescript-eslint": "8.26.1"
+    "typescript-eslint": "8.29.0"
   }
 }

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

@@ -6,19 +6,6 @@
       <app-dealer-hand [cards]="dealerCards()"></app-dealer-hand>
       <app-player-hand [cards]="playerCards()"></app-player-hand>
 
-      @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
-              class="w-5 h-5 rounded-full border-2 border-white border-t-transparent animate-spin"
-            ></div>
-            <span>{{ currentAction() }}</span>
-          </div>
-        </div>
-      }
-
       @if (gameInProgress()) {
         <app-game-controls
           [playerCards]="playerCards()"

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

@@ -48,7 +48,6 @@ export default class BlackjackComponent implements OnInit {
   showGameResult = signal(false);
 
   isActionInProgress = signal(false);
-  currentAction = signal<string>('');
 
   showDebtDialog = signal(false);
   debtAmount = signal(0);
@@ -96,7 +95,6 @@ export default class BlackjackComponent implements OnInit {
 
   onNewGame(bet: number): void {
     this.isActionInProgress.set(true);
-    this.currentAction.set('Spiel wird gestartet...');
 
     this.blackjackService.startGame(bet).subscribe({
       next: (game) => {
@@ -115,7 +113,6 @@ export default class BlackjackComponent implements OnInit {
     if (!this.currentGameId() || this.isActionInProgress()) return;
 
     this.isActionInProgress.set(true);
-    this.currentAction.set('Karte wird gezogen...');
 
     this.blackjackService.hit(this.currentGameId()!).subscribe({
       next: (game) => {
@@ -142,7 +139,6 @@ export default class BlackjackComponent implements OnInit {
     }
 
     this.isActionInProgress.set(true);
-    this.currentAction.set('Dealer zieht Karten...');
 
     this.blackjackService.stand(this.currentGameId()!).subscribe({
       next: (game) => {
@@ -167,7 +163,6 @@ export default class BlackjackComponent implements OnInit {
     }
 
     this.isActionInProgress.set(true);
-    this.currentAction.set('Einsatz wird verdoppelt...');
 
     this.blackjackService.doubleDown(this.currentGameId()!).subscribe({
       next: (game) => {

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

@@ -0,0 +1,76 @@
+import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
+import { CommonModule, CurrencyPipe } from '@angular/common';
+import { CountUp } from 'countup.js';
+
+@Component({
+  selector: 'app-animated-number',
+  standalone: true,
+  imports: [CommonModule, CurrencyPipe],
+  template: `
+    <span #numberElement>{{ formattedValue }}</span>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AnimatedNumberComponent implements OnChanges, AfterViewInit {
+  @Input() value = 0;
+  @Input() duration = 1;
+  @Input() ease = 'power1.out';
+
+  @ViewChild('numberElement') numberElement!: ElementRef;
+
+  private countUp: CountUp | null = null;
+  private previousValue = 0;
+  formattedValue = '0,00 €';
+
+  ngAfterViewInit(): void {
+    this.initializeCountUp();
+    if (this.countUp && this.value !== 0) {
+      this.countUp.start(() => {
+        this.previousValue = this.value;
+      });
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['value']) {
+      if (this.countUp) {
+        const endVal = this.value;
+        
+        this.countUp.update(endVal);
+        this.previousValue = endVal;
+      } else {
+        this.formattedValue = new Intl.NumberFormat('de-DE', {
+          style: 'currency',
+          currency: 'EUR',
+          minimumFractionDigits: 2,
+          maximumFractionDigits: 2,
+        }).format(this.value);
+      }
+    }
+  }
+
+  private initializeCountUp(): void {
+    if (this.numberElement) {
+      this.countUp = new CountUp(this.numberElement.nativeElement, this.value, {
+        startVal: this.previousValue,
+        duration: this.duration,
+        easingFn: (t, b, c, d) => {
+          if (this.ease === 'power1.out') {
+            return c * (1 - Math.pow(1 - t / d, 1)) + b;
+          }
+          return c * (t / d) + b;
+        },
+        formattingFn: (value) => {
+          const formatted = new Intl.NumberFormat('de-DE', {
+            style: 'currency',
+            currency: 'EUR',
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2,
+          }).format(value);
+          this.formattedValue = formatted;
+          return formatted;
+        },
+      });
+    }
+  }
+} 

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

@@ -28,54 +28,27 @@ import { GameControlsService } from '@blackjack/services/game-controls.service';
           (click)="hit.emit()"
           class="button-primary px-8 py-4 text-lg font-medium min-w-[120px] relative"
           [disabled]="gameState !== GameState.IN_PROGRESS || isActionInProgress"
-          [class.opacity-50]="isActionInProgress"
         >
-          <span [class.invisible]="isActionInProgress">Ziehen</span>
+          <span>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>
-          }
         </button>
         <button
           (click)="stand.emit()"
           class="button-primary px-8 py-4 text-lg font-medium min-w-[120px] relative"
           [disabled]="gameState !== GameState.IN_PROGRESS || isActionInProgress"
-          [class.opacity-50]="isActionInProgress"
         >
-          <span [class.invisible]="isActionInProgress">Halten</span>
+          <span>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>
-          }
         </button>
         <button
           (click)="doubleDown.emit()"
           class="button-primary px-8 py-4 text-lg font-medium min-w-[120px] relative"
-          [disabled]="
+          [disabled]="!canDoubleDown || isActionInProgress"
-            gameState !== GameState.IN_PROGRESS || playerCards.length !== 2 || isActionInProgress
-          "
-          [class.opacity-50]="isActionInProgress"
         >
-          <span [class.invisible]="isActionInProgress">Verdoppeln</span>
+          <span>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>
-          }
         </button>
         <button
           (click)="leave.emit()"
           class="bg-accent-red hover:bg-accent-red/80 px-8 py-4 rounded text-lg font-medium min-w-[120px] transition-all duration-300"
           [disabled]="isActionInProgress"
-          [class.opacity-50]="isActionInProgress"
         >
           Abbrechen
         </button>
@@ -97,4 +70,12 @@ export class GameControlsComponent {
   protected readonly GameState = GameState;
 
   constructor(protected gameControlsService: GameControlsService) {}
+
+  get canDoubleDown(): boolean {
+    return (
+      this.gameState === GameState.IN_PROGRESS &&
+      this.playerCards.length === 2 &&
+      !this.isActionInProgress
+    );
+  }
 }

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

@@ -11,11 +11,12 @@ import {
 import { CommonModule, CurrencyPipe } from '@angular/common';
 import { FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { BettingService } from '@blackjack/services/betting.service';
+import { AnimatedNumberComponent } from '../animated-number/animated-number.component';
 
 @Component({
   selector: 'app-game-info',
   standalone: true,
-  imports: [CommonModule, CurrencyPipe, ReactiveFormsModule],
+  imports: [CommonModule, CurrencyPipe, ReactiveFormsModule, AnimatedNumberComponent],
   template: `
     <div class="card p-4">
       <h3 class="section-heading text-xl mb-4">Spiel Informationen</h3>
@@ -23,7 +24,7 @@ import { BettingService } from '@blackjack/services/betting.service';
         <div class="flex justify-between items-center">
           <span class="text-text-secondary">Aktuelle Wette:</span>
           <span [class]="currentBet > 0 ? 'text-accent-red' : 'text-text-secondary'">
-            {{ currentBet | currency: 'EUR' }}
+            <app-animated-number [value]="currentBet" [duration]="0.5"></app-animated-number>
           </span>
         </div>
 

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

@@ -2,11 +2,12 @@ import { ChangeDetectionStrategy, Component, Input, Output, EventEmitter } from
 import { CommonModule, CurrencyPipe } from '@angular/common';
 import { animate, style, transition, trigger } from '@angular/animations';
 import { GameState } from '../../enum/gameState';
+import { AnimatedNumberComponent } from '../animated-number/animated-number.component';
 
 @Component({
   selector: 'app-game-result',
   standalone: true,
-  imports: [CommonModule, CurrencyPipe],
+  imports: [CommonModule, CurrencyPipe, AnimatedNumberComponent],
   template: `
     <div *ngIf="visible" [@fadeInOut] class="modal-bg" style="z-index: 1000; position: fixed;">
       <div class="modal-card" [@cardAnimation]>
@@ -18,7 +19,9 @@ 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 | currency: 'EUR' }}</div>
+            <div class="font-medium text-right">
+              <app-animated-number [value]="amount" [duration]="0.5"></app-animated-number>
+            </div>
 
             <div class="text-text-secondary">
               {{ isDraw ? 'Zurückgegeben:' : isWin ? 'Gewonnen:' : 'Verloren:' }}
@@ -31,9 +34,13 @@ import { GameState } from '../../enum/gameState';
                 'text-yellow-400': isDraw,
               }"
             >
-              {{ isLoss ? '-' : '+' }}{{ isWin ? amount * 2 : (amount | currency: 'EUR') }}
+              {{ isLoss ? '-' : '+' }}
+              <app-animated-number
+                [value]="isWin ? amount * 2 : amount"
+                [duration]="0.5"
+              ></app-animated-number>
               <div *ngIf="isWin" class="text-xs text-text-secondary">
-                (Einsatz {{ amount | currency: 'EUR' }} × 2)
+                (Einsatz <app-animated-number [value]="amount" [duration]="0.5"></app-animated-number> × 2)
               </div>
             </div>
 
@@ -41,7 +48,7 @@ import { GameState } from '../../enum/gameState';
               Kontostand:
             </div>
             <div class="font-medium text-right border-t border-text-secondary/20 pt-3">
-              {{ balance | currency: 'EUR' }}
+              <app-animated-number [value]="balance" [duration]="0.5"></app-animated-number>
             </div>
           </div>
         </div>

frontend/src/app/service/user.service.ts

@@ -13,7 +13,6 @@ export class UserService {
   public currentUser$ = this.currentUserSubject.asObservable();
 
   constructor() {
-    // Initialize with current user data
     this.getCurrentUser().subscribe();
   }
 

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' : ''">{{
+            <span [class]="balance() < 0 ? 'text-accent-red' : ''">
-              balance() | currency: 'EUR' : 'symbol' : '1.2-2'
+              <app-animated-number [value]="balance()" [duration]="0.5"></app-animated-number>
-            }}</span>
+            </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 { KeycloakService } from 'keycloak-angular';
 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 {