+
+ @if (gameResult()) {
+
+
+ {{ (gameResult()?.isWin || gameResult()?.win) ? 'You Won!' : 'You Lost' }}
+
+
+ Coin landed on: {{ gameResult()?.coinSide === 'HEAD' ? 'HEAD' : 'TAILS' }}
+
+ @if (gameResult()?.isWin || gameResult()?.win) {
+
+ +{{ gameResult()?.payout | currency: 'EUR' }}
+
+ }
+
+ }
+
+
+ @if (errorMessage()) {
+
+ }
+
+
+
+
- Heads
+ HEAD
- Tails
+ TAILS
-
-
+
+
-
Spiel Informationen
+
Game Information
+
-
Aktuelle Wette:
+
Current Bet:
-
+ €
+
+
+
+
+
+ Your Balance:
+
+ {{ balance() | currency: 'EUR' }}
+
@if (!gameInProgress()) {
@@ -46,22 +93,32 @@
}
-
+
+
+
+
+
+
+
+
+
How to Play
+
+ - • Choose your bet amount
+ - • Select Heads or Tails
+ - • Win double your bet if correct
+
+
diff --git a/frontend/src/app/feature/game/coinflip/coinflip.component.ts b/frontend/src/app/feature/game/coinflip/coinflip.component.ts
index 64bbeab..498d770 100644
--- a/frontend/src/app/feature/game/coinflip/coinflip.component.ts
+++ b/frontend/src/app/feature/game/coinflip/coinflip.component.ts
@@ -1,45 +1,38 @@
import { CurrencyPipe } from '@angular/common';
import { HttpClient } from '@angular/common/http';
-import { ChangeDetectionStrategy, Component, inject, OnInit, signal } from '@angular/core';
+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 { GameInfoComponent } from '@blackjack/components/game-info/game-info.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],
+ imports: [AnimatedNumberComponent, CurrencyPipe, FormsModule],
templateUrl: './coinflip.component.html',
styleUrl: './coinflip.component.css',
changeDetection: ChangeDetectionStrategy.OnPush,
})
export default class CoinflipComponent implements OnInit {
- currentBet = signal(0);
+ currentBet = signal(10);
balance = signal(0);
gameInProgress = signal(false);
isActionInProgress = signal(false);
+ gameResult = signal
(null);
+ betInputValue = signal(10);
+ errorMessage = signal('');
+
+ @ViewChild('coinElement') coinElement?: ElementRef;
+
audioService = inject(AudioService);
authService = inject(AuthService);
-
private http = inject(HttpClient);
-
- setBetAmount(amount: number) {
- this.currentBet.update((current) => current * amount);
- }
-
- onNewGame(bet: number): void {
- this.isActionInProgress.set(true);
- this.audioService.playBetSound();
- this.currentBet.set(bet);
- }
-
- betHeads() {
- this.gameInProgress.set(true);
- }
- betTails() {
- this.gameInProgress.set(true);
- }
+
+ private coinflipSound?: HTMLAudioElement;
ngOnInit(): void {
// Subscribe to user updates for real-time balance changes
@@ -48,5 +41,151 @@ export default class CoinflipComponent implements OnInit {
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;
+ const value = Number(inputElement.value);
+
+ if (value <= 0) {
+ this.betInputValue.set(1);
+ this.currentBet.set(1);
+ } else if (value > this.balance()) {
+ this.betInputValue.set(this.balance());
+ this.currentBet.set(this.balance());
+ } else {
+ 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('/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}`);
+ }
+
+ getResultClass() {
+ if (!this.gameResult()) return '';
+ const result = this.gameResult();
+ const isWinner = result?.isWin || result?.win;
+ return isWinner ? 'text-emerald-500' : 'text-accent-red';
}
}
diff --git a/frontend/src/app/feature/game/coinflip/models/coinflip.model.ts b/frontend/src/app/feature/game/coinflip/models/coinflip.model.ts
index 241fcf6..f87a3f9 100644
--- a/frontend/src/app/feature/game/coinflip/models/coinflip.model.ts
+++ b/frontend/src/app/feature/game/coinflip/models/coinflip.model.ts
@@ -1,5 +1,11 @@
export interface CoinflipGame {
- isWin: boolean;
+ isWin?: boolean;
+ win?: boolean;
payout: number;
- coinSide: string;
+ coinSide: 'HEAD' | 'TAILS';
+}
+
+export interface CoinflipRequest {
+ betAmount: number;
+ coinSide: 'HEAD' | 'TAILS';
}