9 changed files with 3 additions and 531 deletions
--- a/frontend/public/coinflip.png
+++ b/frontend/public/coinflip.png
--- a/frontend/public/poker.webp
+++ b/frontend/public/poker.webp
--- a/frontend/src/app/app.routes.ts
+++ b/frontend/src/app/app.routes.ts
@ -45,11 +45,6 @@ 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'),
--- a/frontend/src/app/feature/game/coinflip/coinflip.component.css
+++ b/frontend/src/app/feature/game/coinflip/coinflip.component.css
@ -1,117 +0,0 @@
 /* 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;
 }
--- a/frontend/src/app/feature/game/coinflip/coinflip.component.html
+++ b/frontend/src/app/feature/game/coinflip/coinflip.component.html
@ -1,143 +0,0 @@
 <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>
--- a/frontend/src/app/feature/game/coinflip/coinflip.component.ts
+++ b/frontend/src/app/feature/game/coinflip/coinflip.component.ts
@ -1,248 +0,0 @@
 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';
  }
 }
--- a/frontend/src/app/feature/game/coinflip/models/coinflip.model.ts
+++ b/frontend/src/app/feature/game/coinflip/models/coinflip.model.ts
@ -1,11 +0,0 @@
 export interface CoinflipGame {
  isWin?: boolean;
  win?: boolean;
  payout: number;
  coinSide: 'HEAD' | 'TAILS';
 }
 export interface CoinflipRequest {
  betAmount: number;
  coinSide: 'HEAD' | 'TAILS';
 }
--- a/frontend/src/app/feature/home/home.component.ts
+++ b/frontend/src/app/feature/home/home.component.ts
@ -48,9 +48,9 @@ export default class HomeComponent implements OnInit {
  featuredGames: Game[] = [
    {
      id: '1',
-      name: 'Coinflip',
+      name: 'Poker',
-      image: '/coinflip.png',
+      image: '/poker.webp',
-      route: '/game/coinflip',
+      route: '/game/poker',
    },
    {
      id: '2',
--- a/4
+++ b/4
@ -21,7 +21,3 @@ 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}"