chore: Remove old Anhang and add some code to the docs

projektdokumentation/Listings/CoinflipComponent.ts

@@ -0,0 +1,247 @@
+import { NgClass, NgIf, CurrencyPipe, CommonModule } from '@angular/common';
+import { HttpClient } from '@angular/common/http';
+import { FormsModule } from '@angular/forms';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  inject,
+  OnInit,
+  signal,
+  ViewChild,
+} from '@angular/core';
+import { AnimatedNumberComponent } from '@blackjack/components/animated-number/animated-number.component';
+import { catchError, finalize } from 'rxjs/operators';
+import { of } from 'rxjs';
+import { AuthService } from '@service/auth.service';
+import { AudioService } from '@shared/services/audio.service';
+import { CoinflipGame, CoinflipRequest } from './models/coinflip.model';
+
+@Component({
+  selector: 'app-coinflip',
+  standalone: true,
+  imports: [AnimatedNumberComponent, CurrencyPipe, FormsModule, CommonModule, NgIf, NgClass],
+  templateUrl: './coinflip.component.html',
+  styleUrl: './coinflip.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export default class CoinflipComponent implements OnInit {
+  currentBet = signal(10);
+  balance = signal(0);
+  gameInProgress = signal(false);
+  isActionInProgress = signal(false);
+  gameResult = signal<CoinflipGame | null>(null);
+  betInputValue = signal(10);
+  errorMessage = signal('');
+  isInvalidBet = signal(false);
+
+  @ViewChild('coinElement') coinElement?: ElementRef;
+
+  audioService = inject(AudioService);
+  authService = inject(AuthService);
+  private http = inject(HttpClient);
+
+  private coinflipSound?: HTMLAudioElement;
+
+  ngOnInit(): void {
+    // Abonniere Benutzerupdates fuer Echtzeitaktualisierungen des Guthabens
+    this.authService.userSubject.subscribe((user) => {
+      if (user) {
+        this.balance.set(user.balance);
+      }
+    });
+
+    // Initialisiere Muenzwurf-Sound
+    this.coinflipSound = new Audio('/sounds/coinflip.mp3');
+  }
+
+  setBetAmount(percentage: number) {
+    const newBet = Math.floor(this.balance() * percentage);
+    this.betInputValue.set(newBet > 0 ? newBet : 1);
+    this.currentBet.set(this.betInputValue());
+  }
+
+  updateBet(event: Event) {
+    const inputElement = event.target as HTMLInputElement;
+    let value = Number(inputElement.value);
+
+    // Setze ungueltigen Einsatz-Status zurueck
+    this.isInvalidBet.set(false);
+
+    // Erzwinge Mindesteinsatz von 1
+    if (value <= 0) {
+      value = 1;
+    }
+
+    // Begrenze Einsatz auf verfuegbares Guthaben und zeige Feedback
+    if (value > this.balance()) {
+      value = this.balance();
+      // Visuelles Feedback anzeigen
+      this.isInvalidBet.set(true);
+      // Zeige den Fehler kurz an
+      setTimeout(() => this.isInvalidBet.set(false), 800);
+      // Aktualisiere das Eingabefeld direkt, um dem Benutzer den maximalen Wert anzuzeigen
+      inputElement.value = String(value);
+    }
+
+    // Aktualisiere Signale
+    this.betInputValue.set(value);
+    this.currentBet.set(value);
+  }
+
+  betHeads() {
+    this.placeBet('HEAD');
+  }
+
+  betTails() {
+    this.placeBet('TAILS');
+  }
+
+  private placeBet(side: 'HEAD' | 'TAILS') {
+    if (this.gameInProgress() || this.isActionInProgress()) return;
+
+    // Setze vorheriges Ergebnis zurueck
+    this.gameResult.set(null);
+    this.errorMessage.set('');
+
+    // Setze Spielstatus
+    this.gameInProgress.set(true);
+    this.isActionInProgress.set(true);
+
+    // Spiele Einsatz-Sound
+    this.audioService.playBetSound();
+
+    // Erstelle Einsatz-Anfrage
+    const request: CoinflipRequest = {
+      betAmount: this.currentBet(),
+      coinSide: side,
+    };
+
+    // API aufrufen
+    this.http
+      .post<CoinflipGame>('/backend/coinflip', request)
+      .pipe(
+        catchError((error) => {
+          console.error('Fehler beim Spielen von Coinflip:', error);
+
+          if (error.status === 400 && error.error.message.includes('insufficient')) {
+            this.errorMessage.set('Unzureichendes Guthaben');
+          } else {
+            this.errorMessage.set('Ein Fehler ist aufgetreten. Bitte versuche es erneut.');
+          }
+
+          this.gameInProgress.set(false);
+          return of(null);
+        }),
+        finalize(() => {
+          this.isActionInProgress.set(false);
+        })
+      )
+      .subscribe((result) => {
+        if (!result) return;
+
+        console.log('API-Antwort:', result);
+
+        // Behebe moegliche Inkonsistenzen bei der Eigenschaftenbenennung vom Backend
+        const fixedResult: CoinflipGame = {
+          isWin: result.isWin ?? result.win,
+          payout: result.payout,
+          coinSide: result.coinSide,
+        };
+
+        console.log('Korrigiertes Ergebnis:', fixedResult);
+
+        // Spiele Muenzwurf-Animation und -Sound
+        this.playCoinFlipAnimation(fixedResult.coinSide);
+
+        // Setze Ergebnis nach Abschluss der Animation
+        setTimeout(() => {
+          this.gameResult.set(fixedResult);
+
+          // Aktualisiere Guthaben mit neuem Wert vom Auth-Service
+          this.authService.loadCurrentUser();
+
+          // Spiele Gewinn-Sound, wenn der Spieler gewonnen hat
+          if (fixedResult.isWin) {
+            this.audioService.playWinSound();
+          }
+
+          // Setze Spielstatus nach Anzeigen des Ergebnisses zurueck
+          setTimeout(() => {
+            this.gameInProgress.set(false);
+          }, 1500);
+        }, 1100); // Kurz nach Ende der Animation
+      });
+  }
+
+  private playCoinFlipAnimation(result: 'HEAD' | 'TAILS') {
+    if (!this.coinElement) return;
+
+    const coinEl = this.coinElement.nativeElement;
+
+    // Setze bestehende Animationen zurueck
+    coinEl.classList.remove('animate-to-heads', 'animate-to-tails');
+
+    // Setze alle Inline-Styles von vorherigen Animationen zurueck
+    coinEl.style.transform = '';
+
+    // Erzwinge Reflow, um Animation neu zu starten
+    void coinEl.offsetWidth;
+
+    // Spiele Muenzwurf-Sound
+    if (this.coinflipSound) {
+      this.coinflipSound.currentTime = 0;
+      this.coinflipSound
+        .play()
+        .catch((err) => console.error('Fehler beim Abspielen des Sounds:', err));
+    }
+
+    // Fuege passende Animationsklasse basierend auf dem Ergebnis hinzu
+    if (result === 'HEAD') {
+      coinEl.classList.add('animate-to-heads');
+    } else {
+      coinEl.classList.add('animate-to-tails');
+    }
+
+    console.log(`Animation angewendet fuer Ergebnis: ${result}`);
+  }
+
+  /**
+   * Validiert Eingabe waehrend der Benutzer tippt, um ungueltige Werte zu verhindern
+   */
+  validateBetInput(event: KeyboardEvent) {
+    // Erlaube Navigationstasten (Pfeile, Entf, Ruecktaste, Tab)
+    const navigationKeys = ['ArrowLeft', 'ArrowRight', 'Delete', 'Backspace', 'Tab'];
+    if (navigationKeys.includes(event.key)) {
+      return;
+    }
+
+    // Erlaube nur Zahlen
+    if (!/^\d$/.test(event.key)) {
+      event.preventDefault();
+      return;
+    }
+
+    // Ermittle den Wert, der nach dem Tastendruck entstehen wuerde
+    const input = event.target as HTMLInputElement;
+    const currentValue = input.value;
+    const cursorPosition = input.selectionStart || 0;
+    const newValue =
+      currentValue.substring(0, cursorPosition) +
+      event.key +
+      currentValue.substring(input.selectionEnd || cursorPosition);
+    const numValue = Number(newValue);
+
+    // Verhindere Werte, die groesser als das Guthaben sind
+    if (numValue > this.balance()) {
+      event.preventDefault();
+    }
+  }
+
+  getResultClass() {
+    if (!this.gameResult()) return '';
+    const result = this.gameResult();
+    const isWinner = result?.isWin || result?.win;
+    return isWinner ? 'text-emerald-500' : 'text-accent-red';
+  }
+}