feat(blackjack): add split functionality to the game

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

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, signal, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { Router } from '@angular/router';
 import { PlayingCardComponent } from './components/playing-card/playing-card.component';
@@ -13,6 +13,7 @@ import { GameResultComponent } from '@blackjack/components/game-result/game-resu
 import { GameState } from '@blackjack/enum/gameState';
 import { NavbarComponent } from '@shared/components/navbar/navbar.component';
 import { UserService } from '@service/user.service';
+import { timer } from 'rxjs';
 
 @Component({
   selector: 'app-blackjack',
@@ -30,7 +31,7 @@ import { UserService } from '@service/user.service';
   templateUrl: './blackjack.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export default class BlackjackComponent {
+export default class BlackjackComponent implements OnInit {
   private router = inject(Router);
   private userService = inject(UserService);
   private blackjackService = inject(BlackjackService);
@@ -47,13 +48,11 @@ export default class BlackjackComponent {
   isActionInProgress = signal(false);
   currentAction = signal<string>('');
 
-  constructor() {
-    this.refreshUserBalance();
-  }
-
-  private refreshUserBalance(): void {
-    this.userService.getCurrentUser().subscribe((user) => {
-      this.balance.set(user?.balance ?? 0);
+  ngOnInit(): void {
+    this.userService.currentUser$.subscribe((user) => {
+      if (user) {
+        this.balance.set(user.balance);
+      }
     });
   }
 
@@ -83,8 +82,10 @@ export default class BlackjackComponent {
     if (isGameOver) {
       console.log('Game is over, state:', game.state);
       this.userService.refreshCurrentUser();
-      this.showGameResult.set(true);
-      console.log('Game result dialog should be shown now');
+      timer(1500).subscribe(() => {
+        this.showGameResult.set(true);
+        console.log('Game result dialog shown after delay');
+      });
     }
   }
 
@@ -180,21 +181,18 @@ export default class BlackjackComponent {
   onCloseGameResult(): void {
     console.log('Closing game result dialog');
     this.showGameResult.set(false);
+    this.userService.refreshCurrentUser();
   }
 
   private handleGameError(error: HttpErrorResponse): void {
     if (error instanceof HttpErrorResponse) {
       if (error.status === 400 && error.error?.error === 'Invalid state') {
         this.gameInProgress.set(false);
-
-        this.refreshUserBalance();
+        this.userService.refreshCurrentUser();
       } else if (error.status === 500) {
         console.log('Server error occurred. The game may have been updated in another session.');
-
         this.gameInProgress.set(false);
-
-        this.refreshUserBalance();
-
+        this.userService.refreshCurrentUser();
         if (this.currentGameId()) {
           this.refreshGameState(this.currentGameId()!);
         }

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

@@ -6,9 +6,11 @@ import {
   OnChanges,
   Output,
   SimpleChanges,
+  signal,
 } from '@angular/core';
 import { CommonModule, CurrencyPipe } from '@angular/common';
-import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { FormGroup, ReactiveFormsModule } from '@angular/forms';
+import { BettingService } from '@blackjack/services/betting.service';
 
 @Component({
   selector: 'app-game-info',
@@ -101,7 +103,14 @@ import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angula
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class GameInfoComponent implements OnChanges {
-  @Input() balance = 0;
+  @Input() set balance(value: number) {
+    this._balance.set(value);
+  }
+  get balance() {
+    return this._balance();
+  }
+  private _balance = signal(0);
+
   @Input() currentBet = 0;
   @Input() gameInProgress = false;
   @Input() isActionInProgress = false;
@@ -109,24 +118,19 @@ export class GameInfoComponent implements OnChanges {
 
   betForm: FormGroup;
 
-  constructor(private fb: FormBuilder) {
-    this.betForm = this.fb.group({
-      bet: ['', [Validators.required, Validators.min(1)]],
-    });
+  constructor(private bettingService: BettingService) {
+    this.betForm = this.bettingService.createBetForm();
   }
 
   ngOnChanges(changes: SimpleChanges): void {
     if (changes['balance']) {
-      this.betForm
-        .get('bet')
-        ?.setValidators([Validators.required, Validators.min(1), Validators.max(this.balance)]);
-      this.betForm.get('bet')?.updateValueAndValidity();
+      this.bettingService.updateBetFormValidators(this.betForm, this.balance);
     }
   }
 
   setBetAmount(percentage: number) {
-    const betAmount = Math.floor(this.balance * percentage * 100) / 100;
-    if (betAmount >= 1) {
+    const betAmount = this.bettingService.calculateBetAmount(this.balance, percentage);
+    if (this.bettingService.isValidBet(betAmount, this.balance)) {
       this.betForm.patchValue({ bet: betAmount });
     }
   }
@@ -134,7 +138,7 @@ export class GameInfoComponent implements OnChanges {
   onSubmit() {
     if (this.betForm.valid) {
       const betAmount = parseFloat(this.betForm.value.bet);
-      if (betAmount <= this.balance) {
+      if (this.bettingService.isValidBet(betAmount, this.balance)) {
         this.newGame.emit(betAmount);
         this.betForm.reset();
       }

frontend/src/app/feature/game/blackjack/services/betting.service.ts

@@ -0,0 +1,31 @@
+import { Injectable } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class BettingService {
+  constructor(private fb: FormBuilder) {}
+
+  createBetForm(): FormGroup {
+    return this.fb.group({
+      bet: ['', [Validators.required, Validators.min(1)]],
+    });
+  }
+
+  updateBetFormValidators(form: FormGroup, balance: number): void {
+    form.reset();
+    form
+      .get('bet')
+      ?.setValidators([Validators.required, Validators.min(1), Validators.max(balance)]);
+    form.get('bet')?.updateValueAndValidity();
+  }
+
+  calculateBetAmount(balance: number, percentage: number): number {
+    return Math.floor(balance * percentage * 100) / 100;
+  }
+
+  isValidBet(betAmount: number, balance: number): boolean {
+    return betAmount >= 1 && betAmount <= balance;
+  }
+}