fix: Claude fixed most issues

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

@@ -1,55 +1,106 @@
-/* Custom CSS for 3D Transformations and Coin Flip (using animation classes) */
+/* Custom CSS for 3D Transformations and Coin Flip */
 @keyframes flipToHeads {
   0% {
-    transform: rotateY(0deg) rotateX(0deg);
+    transform: rotateY(0);
   }
   100% {
-    transform: rotateX(2880deg) rotateY(1440deg);
+    transform: rotateY(1800deg); /* End with heads facing up (even number of Y rotations) */
   }
 }
 
 @keyframes flipToTails {
   0% {
-    transform: rotateY(0deg) rotateX(0deg); /* Start with no rotation */
+    transform: rotateY(0);
   }
   100% {
-    transform: rotateX(-2880deg) rotateY(1620deg); /* Example: Reverse X rotation, and land on tails */
+    transform: rotateY(1980deg); /* End with tails facing up (odd number of Y rotations) */
   }
 }
 
 .coin-container {
-  width: 150px; /* Set the size of the coin */
+  width: 180px;
-  height: 150px;
+  height: 180px;
-  perspective: 1000px; /* Adds 3D perspective */
+  perspective: 1000px;
+  margin: 20px auto;
 }
 
 .coin {
   width: 100%;
   height: 100%;
   position: relative;
-  transform-style: preserve-3d; /* Crucial for 3D transformations */
+  transform-style: preserve-3d;
+  transition: transform 0.01s;
+  transform: rotateY(0deg);
+  box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
 }
 
 .coin-side {
-  /* Common styles for both front and back */
   width: 100%;
   height: 100%;
   position: absolute;
-  backface-visibility: hidden; /* Hide the back of both sides initially */
+  backface-visibility: hidden;
-  border-radius: 50%; /* Make it circular */
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+  font-size: 24px;
+  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.2);
+  border: 8px solid rgba(255, 255, 255, 0.2);
+}
+
+.front {
+  background: linear-gradient(45deg, #ffd700, #ffb700);
+  color: #333;
+  z-index: 2;
 }
 
 .back {
-  transform: rotateY(
+  transform: rotateY(180deg);
-    180deg
+  background: linear-gradient(45deg, #5a5a5a, #333333);
-  ); /* Rotate the back to face the opposite direction (Y-axis for horizontal flip) */
+  color: white;
+  z-index: 1;
+  /* Fix text display on the back of the coin */
+  backface-visibility: hidden;
 }
 
-/* Classes to trigger the specific animation */
+/* Fix reversed text on tails side by applying a counter-rotation to just the text */
+.back > span {
+  display: inline-block;
+  transform: rotateY(180deg); /* Counter-rotate the text so it appears correctly */
+}
+
+/* Animation classes */
 .coin.animate-to-heads {
-  animation: flipToHeads 1s ease-in-out forwards; /* Apply the animation */
+  animation: flipToHeads 1s ease-in-out forwards;
 }
 
 .coin.animate-to-tails {
-  animation: flipToTails 1s ease-in-out forwards; /* Apply the animation */
+  animation: flipToTails 1s ease-in-out forwards;
+}
+
+/* Make the buttons more responsive */
+button:not([disabled]) {
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+button:not([disabled]):hover {
+  transform: translateY(-2px);
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+}
+
+button:not([disabled]):active {
+  transform: translateY(1px);
+}
+
+/* Animation for results */
+@keyframes popIn {
+  0% { transform: scale(0.8); opacity: 0; }
+  70% { transform: scale(1.1); opacity: 1; }
+  100% { transform: scale(1); opacity: 1; }
+}
+
+.result-text {
+  animation: popIn 0.5s ease-out forwards;
 }

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

@@ -1,42 +1,89 @@
-<p>Coinflip works!</p>
+<div class="container mx-auto py-6">
+  <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
+    <div class="col-span-1 md:col-span-3 w-full flex flex-col items-center justify-center">
+      <!-- Game Result Display -->
+      @if (gameResult()) {
+        <div class="mb-6 text-center result-text">
+          <h2 class="text-2xl font-bold mb-2" [class]="getResultClass()">
+            {{ (gameResult()?.isWin || gameResult()?.win) ? 'You Won!' : 'You Lost' }}
+          </h2>
+          <p class="text-lg">
+            Coin landed on: <span class="font-bold">{{ gameResult()?.coinSide === 'HEAD' ? 'HEAD' : 'TAILS' }}</span>
+          </p>
+          @if (gameResult()?.isWin || gameResult()?.win) {
+            <p class="text-xl mt-2">
+              <span class="text-emerald-500">+{{ gameResult()?.payout | currency: 'EUR' }}</span>
+            </p>
+          }
+        </div>
+      }
       
-<div class="container mx-auto">
+      <!-- Error message display -->
-  <div class="grid grid-cols-4">
+      @if (errorMessage()) {
-    <div class="col-span-3 w-full flex flex-col">
+        <div class="mb-6 text-center">
-      <div class="coin-container mx-auto">
+          <p class="text-accent-red font-bold">{{ errorMessage() }}</p>
-        <div id="coin" class="coin animate-to-tails">
+        </div>
+      }
+      
+      <!-- Coin animation area -->
+      <div class="coin-container mx-auto mb-8">
+        <div #coinElement id="coin" class="coin">
           <div
             class="front coin-side bg-yellow-500 flex items-center justify-center text-2xl font-bold"
           >
-            Heads
+            HEAD
           </div>
           <div
             class="back coin-side bg-gray-700 flex items-center justify-center text-2xl font-bold text-white"
           >
-            Tails
+            <span>TAILS</span>
           </div>
         </div>
       </div>
-      <div class="flex gap-3 mt-3 mx-auto">
+      
-        <button [disabled]="gameInProgress()" class="button-primary py-2 px-4 relative">
+      <!-- Game controls -->
-          Bet tails
+      <div class="flex gap-4 mt-3 mx-auto">
+        <button 
+          (click)="betTails()" 
+          [disabled]="gameInProgress()" 
+          class="button-primary py-3 px-6 relative text-lg"
+          [class.opacity-50]="gameInProgress()"
+        >
+          Bet TAILS
         </button>
-        <button [disabled]="gameInProgress()" class="button-primary py-2 px-4 relative">
+        <button 
-          Bet heads
+          (click)="betHeads()" 
+          [disabled]="gameInProgress()" 
+          class="button-primary py-3 px-6 relative text-lg"
+          [class.opacity-50]="gameInProgress()"
+        >
+          Bet HEAD
         </button>
       </div>
     </div>
+    
+    <!-- Game information panel -->
     <div class="col-span-1">
       <div class="card p-4">
-        <h3 class="section-heading text-xl mb-4">Spiel Informationen</h3>
+        <h3 class="section-heading text-xl mb-4">Game Information</h3>
         <div class="space-y-4">
+          <!-- Current bet display -->
           <div class="flex justify-between items-center">
-            <span class="text-text-secondary">Aktuelle Wette:</span>
+            <span class="text-text-secondary">Current Bet:</span>
             <span [class]="currentBet() > 0 ? 'text-accent-red' : 'text-text-secondary'">
-              <app-animated-number [value]="currentBet()" [duration]="0.5"></app-animated-number>
+              <app-animated-number [value]="currentBet()" [duration]="0.5"></app-animated-number> €
             </span>
           </div>
           
+          <!-- Available balance -->
+          <div class="flex justify-between items-center">
+            <span class="text-text-secondary">Your Balance:</span>
+            <span class="text-white">
+              {{ balance() | currency: 'EUR' }}
+            </span>
+          </div>
+
+          <!-- Bet amount percentage buttons -->
           @if (!gameInProgress()) {
             <div class="grid grid-cols-2 gap-2 mb-4">
               <button (click)="setBetAmount(0.1)" class="button-primary py-2 text-sm">10%</button>
@@ -46,22 +93,32 @@
             </div>
           }
 
-          <form class="space-y-2">
+          <!-- Custom bet input -->
-            <div class="space-y-1">
+          <div class="space-y-1">
-              <label for="bet" class="text-sm text-text-secondary">Einsatz</label>
+            <label for="bet" class="text-sm text-text-secondary">Bet Amount</label>
-              <input
+            <input
-                type="number"
+              type="number"
-                id="bet"
+              id="bet"
-                class="w-full px-3 py-2 bg-deep-blue-light text-white rounded focus:outline-none focus:ring-2 focus:ring-emerald disabled:opacity-50"
+              class="w-full px-3 py-2 bg-deep-blue-light text-white rounded focus:outline-none focus:ring-2 focus:ring-emerald disabled:opacity-50"
-                [min]="1"
+              [min]="1"
-                [max]="balance()"
+              [max]="balance()"
-                [value]="currentBet()"
+              [ngModel]="betInputValue()"
-                step="0.01"
+              (input)="updateBet($event)"
-                [disabled]="gameInProgress()"
+              step="1"
-                [placeholder]="balance() | currency: 'EUR'"
+              [disabled]="gameInProgress()"
-              />
+              [placeholder]="balance() | currency: 'EUR'"
-            </div>
+            />
-          </form>
+          </div>
+          
+          <!-- Rules/info section -->
+          <div class="mt-6 pt-4 border-t border-gray-700">
+            <h4 class="text-lg font-semibold mb-2">How to Play</h4>
+            <ul class="text-sm text-text-secondary space-y-1">
+              <li>• Choose your bet amount</li>
+              <li>• Select Heads or Tails</li>
+              <li>• Win double your bet if correct</li>
+            </ul>
+          </div>
         </div>
       </div>
     </div>

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) {
+  private coinflipSound?: HTMLAudioElement;
-    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);
-  }
 
   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';
   }
 }

frontend/src/app/feature/game/coinflip/models/coinflip.model.ts

@@ -1,5 +1,11 @@
 export interface CoinflipGame {
-  isWin: boolean;
+  isWin?: boolean;
+  win?: boolean;
   payout: number;
-  coinSide: string;
+  coinSide: 'HEAD' | 'TAILS';
+}
+
+export interface CoinflipRequest {
+  betAmount: number;
+  coinSide: 'HEAD' | 'TAILS';
 }