fix: Claude fixed most issues
This commit is contained in:
parent
09677effe6
commit
9770ad3d8f
4 changed files with 328 additions and 75 deletions
|
|
@ -1,55 +1,106 @@
|
|||
/* Custom CSS for 3D Transformations and Coin Flip (using animation classes) */
|
||||
/* Custom CSS for 3D Transformations and Coin Flip */
|
||||
@keyframes flipToHeads {
|
||||
0% {
|
||||
transform: rotateY(0deg) rotateX(0deg);
|
||||
transform: rotateY(0);
|
||||
}
|
||||
100% {
|
||||
transform: rotateX(2880deg) rotateY(1440deg);
|
||||
transform: rotateY(1800deg); /* End with heads facing up (even number of Y rotations) */
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes flipToTails {
|
||||
0% {
|
||||
transform: rotateY(0deg) rotateX(0deg); /* Start with no rotation */
|
||||
transform: rotateY(0);
|
||||
}
|
||||
100% {
|
||||
transform: rotateX(-2880deg) rotateY(1620deg); /* Example: Reverse X rotation, and land on tails */
|
||||
transform: rotateY(1980deg); /* End with tails facing up (odd number of Y rotations) */
|
||||
}
|
||||
}
|
||||
|
||||
.coin-container {
|
||||
width: 150px; /* Set the size of the coin */
|
||||
height: 150px;
|
||||
perspective: 1000px; /* Adds 3D perspective */
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
perspective: 1000px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
.coin {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
transform-style: preserve-3d; /* Crucial for 3D transformations */
|
||||
transform-style: preserve-3d;
|
||||
transition: transform 0.01s;
|
||||
transform: rotateY(0deg);
|
||||
box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.coin-side {
|
||||
/* Common styles for both front and back */
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
backface-visibility: hidden; /* Hide the back of both sides initially */
|
||||
border-radius: 50%; /* Make it circular */
|
||||
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;
|
||||
}
|
||||
|
||||
.back {
|
||||
transform: rotateY(
|
||||
180deg
|
||||
); /* Rotate the back to face the opposite direction (Y-axis for horizontal flip) */
|
||||
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;
|
||||
}
|
||||
|
||||
/* Classes to trigger the specific animation */
|
||||
/* 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 */
|
||||
}
|
||||
|
||||
/* Animation classes */
|
||||
.coin.animate-to-heads {
|
||||
animation: flipToHeads 1s ease-in-out forwards; /* Apply the animation */
|
||||
animation: flipToHeads 1s ease-in-out forwards;
|
||||
}
|
||||
|
||||
.coin.animate-to-tails {
|
||||
animation: flipToTails 1s ease-in-out forwards; /* Apply the animation */
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,42 +1,89 @@
|
|||
<p>Coinflip works!</p>
|
||||
<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 || gameResult()?.win) ? '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 || gameResult()?.win) {
|
||||
<p class="text-xl mt-2">
|
||||
<span class="text-emerald-500">+{{ gameResult()?.payout | currency: 'EUR' }}</span>
|
||||
</p>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="container mx-auto">
|
||||
<div class="grid grid-cols-4">
|
||||
<div class="col-span-3 w-full flex flex-col">
|
||||
<div class="coin-container mx-auto">
|
||||
<div id="coin" class="coin animate-to-tails">
|
||||
<!-- 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">
|
||||
<div
|
||||
class="front coin-side bg-yellow-500 flex items-center justify-center text-2xl font-bold"
|
||||
>
|
||||
Heads
|
||||
HEAD
|
||||
</div>
|
||||
<div
|
||||
class="back coin-side bg-gray-700 flex items-center justify-center text-2xl font-bold text-white"
|
||||
>
|
||||
Tails
|
||||
<span>TAILS</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-3 mt-3 mx-auto">
|
||||
<button [disabled]="gameInProgress()" class="button-primary py-2 px-4 relative">
|
||||
Bet tails
|
||||
|
||||
<!-- 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 [disabled]="gameInProgress()" class="button-primary py-2 px-4 relative">
|
||||
Bet heads
|
||||
<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">Spiel Informationen</h3>
|
||||
<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">Aktuelle Wette:</span>
|
||||
<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>
|
||||
<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>
|
||||
|
|
@ -46,22 +93,32 @@
|
|||
</div>
|
||||
}
|
||||
|
||||
<form class="space-y-2">
|
||||
<!-- Custom bet input -->
|
||||
<div class="space-y-1">
|
||||
<label for="bet" class="text-sm text-text-secondary">Einsatz</label>
|
||||
<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()"
|
||||
[value]="currentBet()"
|
||||
step="0.01"
|
||||
[ngModel]="betInputValue()"
|
||||
(input)="updateBet($event)"
|
||||
step="1"
|
||||
[disabled]="gameInProgress()"
|
||||
[placeholder]="balance() | currency: 'EUR'"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- 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>
|
||||
|
|
|
|||
|
|
@ -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<CoinflipGame | null>(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<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}`);
|
||||
}
|
||||
|
||||
getResultClass() {
|
||||
if (!this.gameResult()) return '';
|
||||
const result = this.gameResult();
|
||||
const isWinner = result?.isWin || result?.win;
|
||||
return isWinner ? 'text-emerald-500' : 'text-accent-red';
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
}
|
||||
|
|
|
|||
Reference in a new issue