feat(blackjack): implement game start and controls functionality

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

@@ -8,7 +8,8 @@ import { DealerHandComponent } from './components/dealer-hand/dealer-hand.compon
 import { PlayerHandComponent } from './components/player-hand/player-hand.component';
 import { GameControlsComponent } from './components/game-controls/game-controls.component';
 import { GameInfoComponent } from './components/game-info/game-info.component';
-import { Card } from './models/card.model';
+import { Card, BlackjackGame } from './models/blackjack.model';
+import { BlackjackService } from './services/blackjack.service';
 
 @Component({
   selector: 'app-blackjack',
@@ -28,16 +29,14 @@ import { Card } from './models/card.model';
 export default class BlackjackComponent {
   private router = inject(Router);
   private userService = inject(UserService);
+  private blackjackService = inject(BlackjackService);
 
-  dealerCards: Card[] = [
-    { value: '2', suit: '♥', hidden: false },
-    { value: '3', suit: '♦', hidden: false },
-    { value: 'B', suit: '□', hidden: true },
-  ];
-
-  playerCards: Card[] = [];
-  currentBet = 0;
+  dealerCards = signal<Card[]>([]);
+  playerCards = signal<Card[]>([]);
+  currentBet = signal(0);
   balance = signal(0);
+  currentGameId = signal<number | undefined>(undefined);
+  gameInProgress = signal(false);
 
   constructor() {
     this.userService.getCurrentUser().subscribe((user) => {
@@ -45,19 +44,65 @@ export default class BlackjackComponent {
     });
   }
 
+  private updateGameState(game: BlackjackGame) {
+    console.log('Game state update:', game);
+    this.currentGameId.set(game.id);
+    this.currentBet.set(game.bet);
+    this.gameInProgress.set(game.state === 'IN_PROGRESS');
+
+    this.dealerCards.set(
+      game.dealerCards.map((card, index) => ({
+        ...card,
+        hidden: index === 1 && game.state === 'IN_PROGRESS',
+      }))
+    );
+
+    this.playerCards.set(
+      game.playerCards.map((card) => ({
+        ...card,
+        hidden: false,
+      }))
+    );
+  }
+
+  onNewGame(bet: number): void {
+    this.blackjackService.startGame(bet).subscribe({
+      next: (game) => {
+        this.updateGameState(game);
+      },
+      error: (error) => {
+        console.error('Failed to start game:', error);
+      },
+    });
+  }
+
   onHit(): void {
-    // Implementation for hit action
+    if (!this.currentGameId()) return;
+
+    this.blackjackService.hit(this.currentGameId()!).subscribe({
+      next: (game) => {
+        this.updateGameState(game);
+      },
+      error: (error) => {
+        console.error('Failed to hit:', error);
+      },
+    });
   }
 
   onStand(): void {
-    // Implementation for stand action
+    if (!this.currentGameId()) return;
+
+    this.blackjackService.stand(this.currentGameId()!).subscribe({
+      next: (game) => {
+        this.updateGameState(game);
+      },
+      error: (error) => {
+        console.error('Failed to stand:', error);
+      },
+    });
   }
 
   leaveGame(): void {
     this.router.navigate(['/home']);
   }
-
-  onNewGame(): void {
-    // Implementation for new game
-  }
 }