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

@@ -5,11 +5,13 @@
       @if (gameResult()) {
         <div class="mb-6 text-center result-text">
           <h2 class="text-2xl font-bold mb-2" [class]="getResultClass()">
-            {{ gameResult()?.isWin ? 'Du hast gewonnen!' : 'Du hast verloren' }}
+            {{ gameResult()?.isWin ? 'You Won!' : 'You Lost' }}
           </h2>
           <p class="text-lg">
-            Münze zeigt:
+            Coin landed on:
-            <span class="font-bold">{{ gameResult()?.coinSide === 'HEAD' ? 'KOPF' : 'ZAHL' }}</span>
+            <span class="font-bold">{{
+              gameResult()?.coinSide === 'HEAD' ? 'HEAD' : 'TAILS'
+            }}</span>
           </p>
           @if (gameResult()?.isWin) {
             <p class="text-xl mt-2">
@@ -33,7 +35,7 @@
           <div
             class="front coin-side bg-yellow-500 flex items-center justify-center text-2xl font-bold"
           >
-            <div class="coin-text">KOPF</div>
+            <div class="coin-text">HEAD</div>
           </div>
 
           <!-- Tails side with non-mirrored text -->
@@ -41,7 +43,7 @@
             class="back coin-side bg-gray-700 flex items-center justify-center text-2xl font-bold text-white"
           >
             <!-- Using direct inline transform to counter the mirroring effect -->
-            <span style="display: inline-block; transform: scaleX(1)">ZAHL</span>
+            <span style="display: inline-block; transform: scaleX(1)">TAILS</span>
           </div>
         </div>
       </div>
@@ -54,7 +56,7 @@
           class="button-primary py-3 px-6 relative text-lg"
           [class.opacity-50]="gameInProgress()"
         >
-          Auf ZAHL setzen
+          Bet TAILS
         </button>
         <button
           (click)="betHeads()"
@@ -62,7 +64,7 @@
           class="button-primary py-3 px-6 relative text-lg"
           [class.opacity-50]="gameInProgress()"
         >
-          Auf KOPF setzen
+          Bet HEAD
         </button>
       </div>
     </div>
@@ -70,11 +72,11 @@
     <!-- Game information panel -->
     <div class="col-span-1">
       <div class="card p-4">
-        <h3 class="section-heading text-xl mb-4">Spielinformationen</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">Aktueller Einsatz:</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> €
             </span>
@@ -82,7 +84,7 @@
 
           <!-- Available balance -->
           <div class="flex justify-between items-center">
-            <span class="text-text-secondary">Dein Guthaben:</span>
+            <span class="text-text-secondary">Your Balance:</span>
             <span class="text-white">
               {{ balance() | currency: 'EUR' }}
             </span>
@@ -101,9 +103,9 @@
           <!-- Custom bet input -->
           <div class="space-y-1">
             <div class="flex justify-between">
-              <label for="bet" class="text-sm text-text-secondary">Einsatzbetrag</label>
+              <label for="bet" class="text-sm text-text-secondary">Bet Amount</label>
               <span *ngIf="isInvalidBet()" class="text-xs text-accent-red animate-pulse"
-                >Darf Guthaben nicht überschreiten</span
+                >Cannot exceed balance</span
               >
             </div>
             <input
@@ -127,11 +129,11 @@
 
           <!-- Rules/info section -->
           <div class="mt-6 pt-4 border-t border-gray-700">
-            <h4 class="text-lg font-semibold mb-2">Spielregeln</h4>
+            <h4 class="text-lg font-semibold mb-2">How to Play</h4>
             <ul class="text-sm text-text-secondary space-y-1">
-              <li>• Wähle deinen Einsatzbetrag</li>
+              <li>• Choose your bet amount</li>
-              <li>• Wähle Kopf oder Zahl</li>
+              <li>• Select Heads or Tails</li>
-              <li>• Gewinne das Doppelte deines Einsatzes bei richtiger Wahl</li>
+              <li>• Win double your bet if correct</li>
             </ul>
           </div>
         </div>

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

@@ -44,14 +44,14 @@ export default class CoinflipComponent implements OnInit {
   private coinflipSound?: HTMLAudioElement;
 
   ngOnInit(): void {
-    // Abonniere Benutzerupdates für Echtzeitaktualisierungen des Guthabens
+    // Subscribe to user updates for real-time balance changes
     this.authService.userSubject.subscribe((user) => {
       if (user) {
         this.balance.set(user.balance);
       }
     });
 
-    // Initialisiere Münzwurf-Sound
+    // Initialize coinflip sound
     this.coinflipSound = new Audio('/sounds/coinflip.mp3');
   }
 
@@ -65,26 +65,26 @@ export default class CoinflipComponent implements OnInit {
     const inputElement = event.target as HTMLInputElement;
     let value = Number(inputElement.value);
 
-    // Setze ungültigen Einsatz-Status zurück
+    // Reset invalid bet state
     this.isInvalidBet.set(false);
 
-    // Erzwinge Mindesteinsatz von 1
+    // Enforce minimum bet of 1
     if (value <= 0) {
       value = 1;
     }
 
-    // Begrenze Einsatz auf verfügbares Guthaben und zeige Feedback
+    // Cap bet at available balance and show feedback
     if (value > this.balance()) {
       value = this.balance();
-      // Visuelles Feedback anzeigen
+      // Show visual feedback
       this.isInvalidBet.set(true);
-      // Zeige den Fehler kurz an
+      // Indicate the error briefly
       setTimeout(() => this.isInvalidBet.set(false), 800);
-      // Aktualisiere das Eingabefeld direkt, um dem Benutzer den maximalen Wert anzuzeigen
+      // Update the input field directly to show the user the max value
       inputElement.value = String(value);
     }
 
-    // Aktualisiere Signale
+    // Update signals
     this.betInputValue.set(value);
     this.currentBet.set(value);
   }
@@ -100,34 +100,34 @@ export default class CoinflipComponent implements OnInit {
   private placeBet(side: 'HEAD' | 'TAILS') {
     if (this.gameInProgress() || this.isActionInProgress()) return;
 
-    // Setze vorheriges Ergebnis zurück
+    // Reset previous result
     this.gameResult.set(null);
     this.errorMessage.set('');
 
-    // Setze Spielstatus
+    // Set game state
     this.gameInProgress.set(true);
     this.isActionInProgress.set(true);
 
-    // Spiele Einsatz-Sound
+    // Play bet sound
     this.audioService.playBetSound();
 
-    // Erstelle Einsatz-Anfrage
+    // Create bet request
     const request: CoinflipRequest = {
       betAmount: this.currentBet(),
       coinSide: side,
     };
 
-    // API aufrufen
+    // Call API
     this.http
       .post<CoinflipGame>('/backend/coinflip', request)
       .pipe(
         catchError((error) => {
-          console.error('Fehler beim Spielen von Coinflip:', error);
+          console.error('Error playing coinflip:', error);
 
           if (error.status === 400 && error.error.message.includes('insufficient')) {
-            this.errorMessage.set('Unzureichendes Guthaben');
+            this.errorMessage.set('Insufficient funds');
           } else {
-            this.errorMessage.set('Ein Fehler ist aufgetreten. Bitte versuche es erneut.');
+            this.errorMessage.set('An error occurred. Please try again.');
           }
 
           this.gameInProgress.set(false);
@@ -140,37 +140,37 @@ export default class CoinflipComponent implements OnInit {
       .subscribe((result) => {
         if (!result) return;
 
-        console.log('API-Antwort:', result);
+        console.log('API response:', result);
 
-        // Behebe mögliche Inkonsistenzen bei der Eigenschaftenbenennung vom Backend
+        // Fix potential property naming inconsistency from the backend
         const fixedResult: CoinflipGame = {
           isWin: result.isWin ?? result.win,
           payout: result.payout,
           coinSide: result.coinSide,
         };
 
-        console.log('Korrigiertes Ergebnis:', fixedResult);
+        console.log('Fixed result:', fixedResult);
 
-        // Spiele Münzwurf-Animation und -Sound
+        // Play coin flip animation and sound
         this.playCoinFlipAnimation(fixedResult.coinSide);
 
-        // Setze Ergebnis nach Abschluss der Animation
+        // Set result after animation completes
         setTimeout(() => {
           this.gameResult.set(fixedResult);
 
-          // Aktualisiere Guthaben mit neuem Wert vom Auth-Service
+          // Update balance with new value from auth service
           this.authService.loadCurrentUser();
 
-          // Spiele Gewinn-Sound, wenn der Spieler gewonnen hat
+          // Play win sound if player won
           if (fixedResult.isWin) {
             this.audioService.playWinSound();
           }
 
-          // Setze Spielstatus nach Anzeigen des Ergebnisses zurück
+          // Reset game state after showing result
           setTimeout(() => {
             this.gameInProgress.set(false);
           }, 1500);
-        }, 1100); // Kurz nach Ende der Animation
+        }, 1100); // Just after animation ends
       });
   }
 
@@ -179,50 +179,48 @@ export default class CoinflipComponent implements OnInit {
 
     const coinEl = this.coinElement.nativeElement;
 
-    // Setze bestehende Animationen zurück
+    // Reset any existing animations
     coinEl.classList.remove('animate-to-heads', 'animate-to-tails');
 
-    // Setze alle Inline-Styles von vorherigen Animationen zurück
+    // Reset any inline styles from previous animations
     coinEl.style.transform = '';
 
-    // Erzwinge Reflow, um Animation neu zu starten
+    // Force a reflow to restart animation
     void coinEl.offsetWidth;
 
-    // Spiele Münzwurf-Sound
+    // Play flip sound
     if (this.coinflipSound) {
       this.coinflipSound.currentTime = 0;
-      this.coinflipSound
+      this.coinflipSound.play().catch((err) => console.error('Error playing sound:', err));
-        .play()
-        .catch((err) => console.error('Fehler beim Abspielen des Sounds:', err));
     }
 
-    // Füge passende Animationsklasse basierend auf dem Ergebnis hinzu
+    // 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 angewendet für Ergebnis: ${result}`);
+    console.log(`Animation applied for result: ${result}`);
   }
 
   /**
-   * Validiert Eingabe während der Benutzer tippt, um ungültige Werte zu verhindern
+   * Validates input as the user types to prevent invalid values
    */
   validateBetInput(event: KeyboardEvent) {
-    // Erlaube Navigationstasten (Pfeile, Entf, Rücktaste, Tab)
+    // Allow navigation keys (arrows, delete, backspace, tab)
     const navigationKeys = ['ArrowLeft', 'ArrowRight', 'Delete', 'Backspace', 'Tab'];
     if (navigationKeys.includes(event.key)) {
       return;
     }
 
-    // Erlaube nur Zahlen
+    // Only allow numbers
     if (!/^\d$/.test(event.key)) {
       event.preventDefault();
       return;
     }
 
-    // Ermittle den Wert, der nach dem Tastendruck entstehen würde
+    // Get the value that would result after the keypress
     const input = event.target as HTMLInputElement;
     const currentValue = input.value;
     const cursorPosition = input.selectionStart || 0;
@@ -232,14 +230,14 @@ export default class CoinflipComponent implements OnInit {
       currentValue.substring(input.selectionEnd || cursorPosition);
     const numValue = Number(newValue);
 
-    // Verhindere Werte, die größer als das Guthaben sind
+    // Prevent values greater than balance
     if (numValue > this.balance()) {
       event.preventDefault();
     }
   }
 
-  // Der Paste-Handler wurde der Einfachheit halber entfernt, da die updateBet-Methode
+  // We removed the paste handler for simplicity since the updateBet method
-  // jeden Wert behandelt, der in das Eingabefeld gelangt
+  // will handle any value that gets into the input field
 
   getResultClass() {
     if (!this.gameResult()) return '';