fix: Claude fixed most issues

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

@@ -1,45 +1,38 @@
 import { CurrencyPipe } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
-import { ChangeDetectionStrategy, Component, inject, OnInit, signal } from '@angular/core';
+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 { GameInfoComponent } from '@blackjack/components/game-info/game-info.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],
+  imports: [AnimatedNumberComponent, CurrencyPipe, FormsModule],
   templateUrl: './coinflip.component.html',
   styleUrl: './coinflip.component.css',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export default class CoinflipComponent implements OnInit {
-  currentBet = signal(0);
+  currentBet = signal(10);
   balance = signal(0);
   gameInProgress = signal(false);
   isActionInProgress = signal(false);
+  gameResult = signal<CoinflipGame | null>(null);
+  betInputValue = signal(10);
+  errorMessage = signal('');
+  
+  @ViewChild('coinElement') coinElement?: ElementRef;
+  
   audioService = inject(AudioService);
   authService = inject(AuthService);
-
   private http = inject(HttpClient);
-
-  setBetAmount(amount: number) {
-    this.currentBet.update((current) => current * amount);
-  }
-
-  onNewGame(bet: number): void {
-    this.isActionInProgress.set(true);
-    this.audioService.playBetSound();
-    this.currentBet.set(bet);
-  }
-
-  betHeads() {
-    this.gameInProgress.set(true);
-  }
-  betTails() {
-    this.gameInProgress.set(true);
-  }
+  
+  private coinflipSound?: HTMLAudioElement;
 
   ngOnInit(): void {
     // Subscribe to user updates for real-time balance changes
@@ -48,5 +41,151 @@ export default class CoinflipComponent implements OnInit {
         this.balance.set(user.balance);
       }
     });
+    
+    // Initialize coinflip 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;
+    const value = Number(inputElement.value);
+    
+    if (value <= 0) {
+      this.betInputValue.set(1);
+      this.currentBet.set(1);
+    } else if (value > this.balance()) {
+      this.betInputValue.set(this.balance());
+      this.currentBet.set(this.balance());
+    } else {
+      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;
+    
+    // Reset previous result
+    this.gameResult.set(null);
+    this.errorMessage.set('');
+    
+    // Set game state
+    this.gameInProgress.set(true);
+    this.isActionInProgress.set(true);
+    
+    // Play bet sound
+    this.audioService.playBetSound();
+    
+    // Create bet request
+    const request: CoinflipRequest = {
+      betAmount: this.currentBet(),
+      coinSide: side
+    };
+    
+    // Call API
+    this.http.post<CoinflipGame>('/backend/coinflip', request)
+      .pipe(
+        catchError(error => {
+          console.error('Error playing coinflip:', error);
+          
+          if (error.status === 400 && error.error.message.includes('insufficient')) {
+            this.errorMessage.set('Insufficient funds');
+          } else {
+            this.errorMessage.set('An error occurred. Please try again.');
+          }
+          
+          this.gameInProgress.set(false);
+          return of(null);
+        }),
+        finalize(() => {
+          this.isActionInProgress.set(false);
+        })
+      )
+      .subscribe(result => {
+        if (!result) return;
+        
+        console.log('API response:', result);
+        
+        // Fix potential property naming inconsistency from the backend
+        const fixedResult: CoinflipGame = {
+          isWin: result.isWin ?? result.win,
+          payout: result.payout,
+          coinSide: result.coinSide
+        };
+        
+        console.log('Fixed result:', fixedResult);
+        
+        // Play coin flip animation and sound
+        this.playCoinFlipAnimation(fixedResult.coinSide);
+        
+        // Set result after animation completes
+        setTimeout(() => {
+          this.gameResult.set(fixedResult);
+          
+          // Update balance with new value from auth service
+          this.authService.loadCurrentUser();
+          
+          // Play win sound if player won
+          if (fixedResult.isWin) {
+            this.audioService.playWinSound();
+          }
+          
+          // Reset game state after showing result
+          setTimeout(() => {
+            this.gameInProgress.set(false);
+          }, 1500);
+        }, 1100); // Just after animation ends
+      });
+  }
+  
+  private playCoinFlipAnimation(result: 'HEAD' | 'TAILS') {
+    if (!this.coinElement) return;
+    
+    const coinEl = this.coinElement.nativeElement;
+    
+    // Reset any existing animations
+    coinEl.classList.remove('animate-to-heads', 'animate-to-tails');
+    
+    // Reset any inline styles from previous animations
+    coinEl.style.transform = '';
+    
+    // Force a reflow to restart animation
+    void coinEl.offsetWidth;
+    
+    // Play flip sound
+    if (this.coinflipSound) {
+      this.coinflipSound.currentTime = 0;
+      this.coinflipSound.play().catch(err => console.error('Error playing sound:', err));
+    }
+    
+    // Add appropriate animation class based on result
+    if (result === 'HEAD') {
+      coinEl.classList.add('animate-to-heads');
+    } else {
+      coinEl.classList.add('animate-to-tails');
+    }
+    
+    console.log(`Animation applied for result: ${result}`);
+  }
+  
+  getResultClass() {
+    if (!this.gameResult()) return '';
+    const result = this.gameResult();
+    const isWinner = result?.isWin || result?.win;
+    return isWinner ? 'text-emerald-500' : 'text-accent-red';
   }
 }