feat(blackjack): implement game start and controls functionality

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

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { PlayingCardComponent } from '../playing-card/playing-card.component';
-import { Card } from '../../models/card.model';
+import { Card } from '../../models/blackjack.model';
 
 @Component({
   selector: 'app-dealer-hand',
@@ -12,12 +12,19 @@ import { Card } from '../../models/card.model';
       <h3 class="section-heading text-2xl mb-4">Croupier's Karten</h3>
       <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">
-          <app-playing-card
-            *ngFor="let card of cards"
-            [value]="card.value"
-            [suit]="card.suit"
-            [hidden]="card.hidden"
-          ></app-playing-card>
+          @if (cards.length > 0) {
+            @for (card of cards; track card) {
+              <app-playing-card
+                [rank]="card.rank"
+                [suit]="card.suit"
+                [hidden]="card.hidden"
+              ></app-playing-card>
+            }
+          } @else {
+            <div class="flex items-center justify-center text-white/70 text-lg font-medium">
+              Warte auf Spielstart...
+            </div>
+          }
         </div>
       </div>
     </div>

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

@@ -1,10 +1,19 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  Output,
+  SimpleChanges,
+} from '@angular/core';
 import { CommonModule, CurrencyPipe } from '@angular/common';
+import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 
 @Component({
   selector: 'app-game-info',
   standalone: true,
-  imports: [CommonModule, CurrencyPipe],
+  imports: [CommonModule, CurrencyPipe, ReactiveFormsModule],
   template: `
     <div class="card p-4">
       <h3 class="section-heading text-xl mb-4">Spiel Informationen</h3>
@@ -19,14 +28,112 @@ import { CommonModule, CurrencyPipe } from '@angular/common';
             {{ currentBet | currency: 'EUR' }}
           </span>
         </div>
-        <button class="button-primary w-full py-2" (click)="newGame.emit()">Neues Spiel</button>
+
+        @if (!gameInProgress) {
+          <div class="grid grid-cols-2 gap-2 mb-4">
+            <button
+              (click)="setBetAmount(0.1)"
+              class="button-primary py-2 text-sm"
+              [disabled]="gameInProgress"
+            >
+              10%
+            </button>
+            <button
+              (click)="setBetAmount(0.25)"
+              class="button-primary py-2 text-sm"
+              [disabled]="gameInProgress"
+            >
+              25%
+            </button>
+            <button
+              (click)="setBetAmount(0.5)"
+              class="button-primary py-2 text-sm"
+              [disabled]="gameInProgress"
+            >
+              50%
+            </button>
+            <button
+              (click)="setBetAmount(1)"
+              class="button-primary py-2 text-sm"
+              [disabled]="gameInProgress"
+            >
+              100%
+            </button>
+          </div>
+        }
+
+        <form [formGroup]="betForm" (ngSubmit)="onSubmit()" class="space-y-2">
+          <div class="space-y-1">
+            <label for="bet" class="text-sm text-text-secondary">Einsatz</label>
+            <input
+              type="number"
+              id="bet"
+              formControlName="bet"
+              class="w-full px-3 py-2 bg-deep-blue-light text-white rounded focus:outline-none focus:ring-2 focus:ring-emerald"
+              [min]="1"
+              [max]="balance"
+              step="0.01"
+            />
+            @if (betForm.get('bet')?.errors?.['required'] && betForm.get('bet')?.touched) {
+              <span class="text-xs text-accent-red">Bitte geben Sie einen Einsatz ein</span>
+            }
+            @if (betForm.get('bet')?.errors?.['min'] && betForm.get('bet')?.touched) {
+              <span class="text-xs text-accent-red">Mindestens 1€ setzen</span>
+            }
+            @if (betForm.get('bet')?.errors?.['max'] && betForm.get('bet')?.touched) {
+              <span class="text-xs text-accent-red">Nicht genügend Guthaben</span>
+            }
+          </div>
+          <button
+            type="submit"
+            class="button-primary w-full py-2"
+            [disabled]="!betForm.valid || gameInProgress"
+          >
+            Neues Spiel
+          </button>
+        </form>
       </div>
     </div>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class GameInfoComponent {
+export class GameInfoComponent implements OnChanges {
   @Input() balance = 0;
   @Input() currentBet = 0;
-  @Output() newGame = new EventEmitter<void>();
+  @Input() gameInProgress = false;
+  @Output() newGame = new EventEmitter<number>();
+
+  betForm: FormGroup;
+
+  constructor(private fb: FormBuilder) {
+    this.betForm = this.fb.group({
+      bet: ['', [Validators.required, Validators.min(1)]],
+    });
+  }
+
+  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();
+    }
+  }
+
+  setBetAmount(percentage: number) {
+    const betAmount = Math.floor(this.balance * percentage * 100) / 100;
+    if (betAmount >= 1) {
+      this.betForm.patchValue({ bet: betAmount });
+    }
+  }
+
+  onSubmit() {
+    if (this.betForm.valid) {
+      const betAmount = parseFloat(this.betForm.value.bet);
+      if (betAmount <= this.balance) {
+        this.newGame.emit(betAmount);
+        this.betForm.reset();
+      }
+    }
+  }
 }

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

@@ -1,7 +1,7 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { PlayingCardComponent } from '../playing-card/playing-card.component';
-import { Card } from '../../models/card.model';
+import { Card } from '../../models/blackjack.model';
 
 @Component({
   selector: 'app-player-hand',
@@ -14,12 +14,19 @@ import { Card } from '../../models/card.model';
         <div
           class="flex justify-center gap-4 min-h-[160px] p-4 border-2 border-emerald-400 rounded-lg"
         >
-          <app-playing-card
-            *ngFor="let card of cards"
-            [value]="card.value"
-            [suit]="card.suit"
-            [hidden]="card.hidden"
-          ></app-playing-card>
+          @if (cards.length > 0) {
+            @for (card of cards; track card) {
+              <app-playing-card
+                [rank]="card.rank"
+                [suit]="card.suit"
+                [hidden]="card.hidden"
+              ></app-playing-card>
+            }
+          } @else {
+            <div class="flex items-center justify-center text-white/70 text-lg font-medium">
+              Platziere eine Wette um zu spielen...
+            </div>
+          }
         </div>
       </div>
     </div>

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

@@ -1,5 +1,6 @@
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { suitSymbols, Suit } from '../../models/blackjack.model';
 
 @Component({
   selector: 'app-playing-card',
@@ -10,21 +11,49 @@ import { CommonModule } from '@angular/common';
       class="w-24 h-36 rounded-lg p-2 relative flex flex-col justify-between shadow-lg"
       [class]="hidden ? 'bg-red-800' : 'bg-white'"
     >
-      <span *ngIf="!hidden" class="text-xl font-bold text-accent-red">{{ value }}</span>
-      <span
-        *ngIf="!hidden"
-        class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-3xl text-accent-red"
-        >{{ suit }}</span
-      >
-      <span *ngIf="!hidden" class="text-xl font-bold text-accent-red self-end rotate-180">{{
-        value
-      }}</span>
+      @if (!hidden) {
+        <span class="text-xl font-bold text-accent-red">{{ getDisplayRank(rank) }}</span>
+      }
+      @if (!hidden) {
+        <span
+          class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-3xl text-accent-red"
+          >{{ getSuitSymbol(suit) }}</span
+        >
+      }
+      @if (!hidden) {
+        <span class="text-xl font-bold text-accent-red self-end rotate-180">{{
+          getDisplayRank(rank)
+        }}</span>
+      }
     </div>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class PlayingCardComponent {
-  @Input({ required: true }) value!: string;
-  @Input({ required: true }) suit!: string;
+  @Input({ required: true }) rank!: string;
+  @Input({ required: true }) suit!: Suit;
   @Input({ required: true }) hidden!: boolean;
+
+  protected getSuitSymbol(suit: Suit): string {
+    return suitSymbols[suit];
+  }
+
+  protected getDisplayRank(rank: string): string {
+    const rankMap: Record<string, string> = {
+      TWO: '2',
+      THREE: '3',
+      FOUR: '4',
+      FIVE: '5',
+      SIX: '6',
+      SEVEN: '7',
+      EIGHT: '8',
+      NINE: '9',
+      TEN: '10',
+      JACK: 'J',
+      QUEEN: 'Q',
+      KING: 'K',
+      ACE: 'A',
+    };
+    return rankMap[rank] || rank;
+  }
 }