Merge pull request 'feat: Create Coinflip ui (CAS-64)' (!206) from feat/coinflip into main

Reviewed-on: #206

frontend/src/app/app.routes.ts

@@ -45,6 +45,11 @@ export const routes: Routes = [
     loadComponent: () => import('./feature/game/blackjack/blackjack.component'),
     canActivate: [authGuard],
   },
+  {
+    path: 'game/coinflip',
+    loadComponent: () => import('./feature/game/coinflip/coinflip.component'),
+    canActivate: [authGuard],
+  },
   {
     path: 'game/slots',
     loadComponent: () => import('./feature/game/slots/slots.component'),

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

@@ -0,0 +1,117 @@
+/* Custom CSS for 3D Transformations and Coin Flip */
+@keyframes flipToHeads {
+  0% {
+    transform: rotateY(0);
+  }
+  100% {
+    transform: rotateY(1800deg); /* End with heads facing up (even number of Y rotations) */
+  }
+}
+
+@keyframes flipToTails {
+  0% {
+    transform: rotateY(0);
+  }
+  100% {
+    transform: rotateY(1980deg); /* End with tails facing up (odd number of Y rotations) */
+  }
+}
+
+.coin-container {
+  width: 180px;
+  height: 180px;
+  perspective: 1000px;
+  margin: 20px auto;
+}
+
+.coin {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  transform-style: preserve-3d;
+  transition: transform 0.01s;
+  transform: rotateY(0deg);
+  box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
+}
+
+.coin-side {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  backface-visibility: hidden;
+  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;
+  transform: rotateY(0);
+}
+
+.back {
+  background: linear-gradient(45deg, #5a5a5a, #333333);
+  color: white;
+  z-index: 1;
+  transform: rotateY(180deg);
+}
+
+/* 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 */
+.coin.animate-to-heads {
+  animation: flipToHeads 1s ease-in-out forwards;
+}
+
+.coin.animate-to-tails {
+  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

@@ -0,0 +1,143 @@
+<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">
+            <div class="flex justify-between">
+              <label for="bet" class="text-sm text-text-secondary">Bet Amount</label>
+              <span *ngIf="isInvalidBet()" class="text-xs text-accent-red animate-pulse"
+                >Cannot exceed balance</span
+              >
+            </div>
+            <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 disabled:opacity-50"
+              [ngClass]="{
+                'ring-accent-red': isInvalidBet(),
+                'ring-emerald': !isInvalidBet(),
+              }"
+              [min]="1"
+              [max]="balance()"
+              [ngModel]="betInputValue()"
+              (input)="updateBet($event)"
+              (keydown)="validateBetInput($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>

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

@@ -0,0 +1,248 @@
+import { NgClass, NgIf, CurrencyPipe, CommonModule } 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 { AnimatedNumberComponent } from '@blackjack/components/animated-number/animated-number.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, FormsModule, CommonModule, NgIf, NgClass],
+  templateUrl: './coinflip.component.html',
+  styleUrl: './coinflip.component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export default class CoinflipComponent implements OnInit {
+  currentBet = signal(10);
+  balance = signal(0);
+  gameInProgress = signal(false);
+  isActionInProgress = signal(false);
+  gameResult = signal<CoinflipGame | null>(null);
+  betInputValue = signal(10);
+  errorMessage = signal('');
+  isInvalidBet = signal(false);
+
+  @ViewChild('coinElement') coinElement?: ElementRef;
+
+  audioService = inject(AudioService);
+  authService = inject(AuthService);
+  private http = inject(HttpClient);
+
+  private coinflipSound?: HTMLAudioElement;
+
+  ngOnInit(): void {
+    // Subscribe to user updates for real-time balance changes
+    this.authService.userSubject.subscribe((user) => {
+      if (user) {
+        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;
+    let value = Number(inputElement.value);
+
+    // Reset invalid bet state
+    this.isInvalidBet.set(false);
+
+    // Enforce minimum bet of 1
+    if (value <= 0) {
+      value = 1;
+    }
+
+    // Cap bet at available balance and show feedback
+    if (value > this.balance()) {
+      value = this.balance();
+      // Show visual feedback
+      this.isInvalidBet.set(true);
+      // Indicate the error briefly
+      setTimeout(() => this.isInvalidBet.set(false), 800);
+      // Update the input field directly to show the user the max value
+      inputElement.value = String(value);
+    }
+
+    // Update signals
+    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}`);
+  }
+
+  /**
+   * Validates input as the user types to prevent invalid values
+   */
+  validateBetInput(event: KeyboardEvent) {
+    // Allow navigation keys (arrows, delete, backspace, tab)
+    const navigationKeys = ['ArrowLeft', 'ArrowRight', 'Delete', 'Backspace', 'Tab'];
+    if (navigationKeys.includes(event.key)) {
+      return;
+    }
+
+    // Only allow numbers
+    if (!/^\d$/.test(event.key)) {
+      event.preventDefault();
+      return;
+    }
+
+    // Get the value that would result after the keypress
+    const input = event.target as HTMLInputElement;
+    const currentValue = input.value;
+    const cursorPosition = input.selectionStart || 0;
+    const newValue =
+      currentValue.substring(0, cursorPosition) +
+      event.key +
+      currentValue.substring(input.selectionEnd || cursorPosition);
+    const numValue = Number(newValue);
+
+    // Prevent values greater than balance
+    if (numValue > this.balance()) {
+      event.preventDefault();
+    }
+  }
+
+  // We removed the paste handler for simplicity since the updateBet method
+  // will handle any value that gets into the input field
+
+  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

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

frontend/src/app/feature/home/home.component.ts

@@ -48,9 +48,9 @@ export default class HomeComponent implements OnInit {
   featuredGames: Game[] = [
     {
       id: '1',
-      name: 'Poker',
+      name: 'Coinflip',
-      image: '/poker.webp',
+      image: '/coinflip.png',
-      route: '/game/poker',
+      route: '/game/coinflip',
     },
     {
       id: '2',

justfile

@@ -21,3 +21,7 @@ build-be:
 # Builds the frontend docker image
 build-fe:
     docker buildx build -f frontend/.docker/Dockerfile -t git.kjan.de/szut/casino-frontend:latest frontend
+
+# Formats the code duh
+format:
+    cd frontend && bunx prettier --write "src/**/*.{ts,html,css,scss}"