fix: Fix claude mirrored text

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

@@ -53,21 +53,23 @@
   background: linear-gradient(45deg, #ffd700, #ffb700);
   color: #333;
   z-index: 2;
+  transform: rotateY(0);
 }
 
 .back {
-  transform: rotateY(180deg);
   background: linear-gradient(45deg, #5a5a5a, #333333);
   color: white;
   z-index: 1;
-  /* Fix text display on the back of the coin */
-  backface-visibility: hidden;
+  transform: rotateY(180deg);
 }
 
-/* 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 */
+/* We apply transform directly to the SVG element in HTML */
+
+/* Text for both sides */
+.coin-text {
+  /* Ensure text is readable */
+  user-select: none;
+  pointer-events: none;
 }
 
 /* Animation classes */

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

@@ -5,12 +5,15 @@
       @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' }}
+            {{ gameResult()?.isWin ? 'You Won!' : 'You Lost' }}
           </h2>
           <p class="text-lg">
-            Coin landed on: <span class="font-bold">{{ gameResult()?.coinSide === 'HEAD' ? 'HEAD' : 'TAILS' }}</span>
+            Coin landed on:
+            <span class="font-bold">{{
+              gameResult()?.coinSide === 'HEAD' ? 'HEAD' : 'TAILS'
+            }}</span>
           </p>
-          @if (gameResult()?.isWin || gameResult()?.win) {
+          @if (gameResult()?.isWin) {
             <p class="text-xl mt-2">
               <span class="text-emerald-500">+{{ gameResult()?.payout | currency: 'EUR' }}</span>
             </p>
@@ -28,15 +31,19 @@
       <!-- Coin animation area -->
       <div class="coin-container mx-auto mb-8">
         <div #coinElement id="coin" class="coin">
+          <!-- Head side -->
           <div
             class="front coin-side bg-yellow-500 flex items-center justify-center text-2xl font-bold"
           >
-            HEAD
+            <div class="coin-text">HEAD</div>
           </div>
+
+          <!-- Tails side with non-mirrored text -->
           <div
             class="back coin-side bg-gray-700 flex items-center justify-center text-2xl font-bold text-white"
           >
-            <span>TAILS</span>
+            <!-- Using direct inline transform to counter the mirroring effect -->
+            <span style="display: inline-block; transform: scaleX(1)">TAILS</span>
           </div>
         </div>
       </div>

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';
@@ -93,13 +101,14 @@ export default class CoinflipComponent implements OnInit {
     // 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')) {
@@ -115,7 +124,7 @@ export default class CoinflipComponent implements OnInit {
           this.isActionInProgress.set(false);
         })
       )
-      .subscribe(result => {
+      .subscribe((result) => {
         if (!result) return;
 
         console.log('API response:', result);
@@ -124,7 +133,7 @@ export default class CoinflipComponent implements OnInit {
         const fixedResult: CoinflipGame = {
           isWin: result.isWin ?? result.win,
           payout: result.payout,
-          coinSide: result.coinSide
+          coinSide: result.coinSide,
         };
 
         console.log('Fixed result:', fixedResult);
@@ -169,7 +178,7 @@ export default class CoinflipComponent implements OnInit {
     // 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