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

<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 ? '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) {
            <p class="text-xl mt-2">
              <span class="text-emerald-500">+{{ gameResult()?.payout | currency: 'EUR' }}</span>
            </p>
          }
        </div>
      }

      <!-- Error message display -->
      @if (errorMessage()) {
        <div class="mb-6 text-center">
          <p class="text-accent-red font-bold">{{ errorMessage() }}</p>
        </div>
      }

      <!-- 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"
          >
            <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"
          >
            <!-- Using direct inline transform to counter the mirroring effect -->
            <span style="display: inline-block; transform: scaleX(1)">TAILS</span>
          </div>
        </div>
      </div>

      <!-- Game controls -->
      <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
          (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">Game Information</h3>
        <div class="space-y-4">
          <!-- Current bet display -->
          <div class="flex justify-between items-center">
            <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>
          </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>
              <button (click)="setBetAmount(0.25)" class="button-primary py-2 text-sm">25%</button>
              <button (click)="setBetAmount(0.5)" class="button-primary py-2 text-sm">50%</button>
              <button (click)="setBetAmount(1)" class="button-primary py-2 text-sm">100%</button>
            </div>
          }

          <!-- Custom bet input -->
          <div class="space-y-1">
            <label for="bet" class="text-sm text-text-secondary">Bet Amount</label>
            <input
              type="number"
              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"
              [min]="1"
              [max]="balance()"
              [ngModel]="betInputValue()"
              (input)="updateBet($event)"
              step="1"
              [disabled]="gameInProgress()"
              [placeholder]="balance() | currency: 'EUR'"
            />
          </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>
  </div>
</div>