feat(blackjack): implement game start and controls functionality

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();
+      }
+    }
+  }
 }