fix: Fix claude mirrored text

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

@@ -1,7 +1,15 @@
 import { CurrencyPipe } 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 {
+  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';
@@ -25,13 +33,13 @@ export default class CoinflipComponent implements OnInit {
   gameResult = signal<CoinflipGame | null>(null);
   betInputValue = signal(10);
   errorMessage = signal('');
-  
+
   @ViewChild('coinElement') coinElement?: ElementRef;
-  
+
   audioService = inject(AudioService);
   authService = inject(AuthService);
   private http = inject(HttpClient);
-  
+
   private coinflipSound?: HTMLAudioElement;
 
   ngOnInit(): void {
@@ -41,21 +49,21 @@ 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);
@@ -71,43 +79,44 @@ export default class CoinflipComponent implements OnInit {
   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
+      coinSide: side,
     };
-    
+
     // Call API
-    this.http.post<CoinflipGame>('/backend/coinflip', request)
+    this.http
+      .post<CoinflipGame>('/backend/coinflip', request)
       .pipe(
-        catchError(error => {
+        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);
         }),
@@ -115,35 +124,35 @@ export default class CoinflipComponent implements OnInit {
           this.isActionInProgress.set(false);
         })
       )
-      .subscribe(result => {
+      .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
+          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);
@@ -151,37 +160,37 @@ export default class CoinflipComponent implements OnInit {
         }, 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));
+      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();