SZUT/casino
5
1
Fork 0
Code Issues Pull requests 1 Releases 65 Wiki Activity Actions

feat: add stand and get game features to blackjack game

Browse source
This commit is contained in:
Jan-Marlon Leibl 2025-03-27 15:22:24 +01:00
parent 4e8530c861
commit d90fcdcf1e
Signed by: jleibl
GPG key ID: 300B2F906DC6F1D5
13 changed files with 446 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

9
frontend/src/app/feature/game/blackjack/blackjack.component.html
View file

@ -7,6 +7,8 @@
<app-player-hand [cards]="playerCards()"></app-player-hand>
@if (gameInProgress()) {
<app-game-controls
[playerCards]="playerCards()"
[gameState]="gameState()"
(hit)="onHit()"
(stand)="onStand()"
(leave)="leaveGame()"
@ -24,3 +26,10 @@
</div>
</div>
</div>
<!-- Game Result Modal -->
<app-game-result
[gameState]="gameState()"
[amount]="currentBet()"
[show]="showGameResult()"
></app-game-result>

61
frontend/src/app/feature/game/blackjack/blackjack.component.ts
View file

@ -10,6 +10,8 @@ import { GameControlsComponent } from './components/game-controls/game-controls.
import { GameInfoComponent } from './components/game-info/game-info.component';
import { Card, BlackjackGame } from './models/blackjack.model';
import { BlackjackService } from './services/blackjack.service';
import { HttpErrorResponse } from '@angular/common/http';
import { GameResultComponent } from './components/game-result/game-result.component';
@Component({
selector: 'app-blackjack',
@ -22,6 +24,7 @@ import { BlackjackService } from './services/blackjack.service';
PlayerHandComponent,
GameControlsComponent,
GameInfoComponent,
GameResultComponent,
],
templateUrl: './blackjack.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
@ -37,8 +40,14 @@ export default class BlackjackComponent {
balance = signal(0);
currentGameId = signal<number | undefined>(undefined);
gameInProgress = signal(false);
gameState = signal<string>('IN_PROGRESS');
showGameResult = signal(false);
constructor() {
this.refreshUserBalance();
}
private refreshUserBalance(): void {
this.userService.getCurrentUser().subscribe((user) => {
this.balance.set(user?.balance ?? 0);
});
@ -49,6 +58,7 @@ export default class BlackjackComponent {
this.currentGameId.set(game.id);
this.currentBet.set(game.bet);
this.gameInProgress.set(game.state === 'IN_PROGRESS');
this.gameState.set(game.state);
this.dealerCards.set(
game.dealerCards.map((card, index) => ({
@ -63,12 +73,20 @@ export default class BlackjackComponent {
hidden: false,
}))
);
if (game.state !== 'IN_PROGRESS') {
this.refreshUserBalance();
setTimeout(() => {
this.showGameResult.set(true);
}, 1000);
}
}
onNewGame(bet: number): void {
this.blackjackService.startGame(bet).subscribe({
next: (game) => {
this.updateGameState(game);
this.refreshUserBalance();
},
error: (error) => {
console.error('Failed to start game:', error);
@ -85,12 +103,18 @@ export default class BlackjackComponent {
},
error: (error) => {
console.error('Failed to hit:', error);
this.handleGameError(error);
},
});
}
onStand(): void {
if (!this.currentGameId()) return;
if (this.gameState() !== 'IN_PROGRESS') {
console.log('Cannot stand: game is not in progress');
return;
}
this.blackjackService.stand(this.currentGameId()!).subscribe({
next: (game) => {
@ -98,10 +122,47 @@ export default class BlackjackComponent {
},
error: (error) => {
console.error('Failed to stand:', error);
this.handleGameError(error);
},
});
}
onCloseGameResult(): void {
this.showGameResult.set(false);
}
private handleGameError(error: any): void {
if (error instanceof HttpErrorResponse) {
if (error.status === 400 && error.error?.error === 'Invalid state') {
this.gameInProgress.set(false);
this.refreshUserBalance();
}
else if (error.status === 500) {
console.log('Server error occurred. The game may have been updated in another session.');
this.gameInProgress.set(false);
this.refreshUserBalance();
if (this.currentGameId()) {
this.refreshGameState(this.currentGameId()!);
}
}
}
}
private refreshGameState(gameId: number): void {
this.blackjackService.getGame(gameId).subscribe({
next: (game) => {
this.updateGameState(game);
},
error: (err) => {
console.error('Failed to refresh game state:', err);
}
});
}
leaveGame(): void {
this.router.navigate(['/home']);
}

122
frontend/src/app/feature/game/blackjack/components/game-controls/game-controls.component.ts
View file

@ -1,36 +1,118 @@
import { ChangeDetectionStrategy, Component, EventEmitter, Output } from '@angular/core';
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Card } from '../../models/blackjack.model';
@Component({
selector: 'app-game-controls',
standalone: true,
imports: [CommonModule],
template: `
<div class="flex justify-center gap-4">
<button
(click)="hit.emit()"
class="button-primary px-8 py-4 text-lg font-medium min-w-[120px]"
>
Ziehen
</button>
<button
(click)="stand.emit()"
class="button-primary px-8 py-4 text-lg font-medium min-w-[120px]"
>
Halten
</button>
<button
(click)="leave.emit()"
class="bg-accent-red hover:bg-accent-red/80 px-8 py-4 rounded text-lg font-medium min-w-[120px] transition-all duration-300"
>
Abbrechen
</button>
<div class="flex flex-col gap-4">
<div class="flex justify-center text-lg mb-5">
<div class="card p-4">
<div class="text-emerald font-bold mb-1">Deine Punkte: {{ calculateHandValue(playerCards) }}</div>
<div class="text-text-secondary">
Status: <span [class]="getStatusClass(gameState)">{{ getStatusText(gameState) }}</span>
</div>
</div>
</div>
<div class="flex justify-center gap-4">
<button
(click)="hit.emit()"
class="button-primary px-8 py-4 text-lg font-medium min-w-[120px]"
[disabled]="gameState !== 'IN_PROGRESS'"
>
Ziehen
</button>
<button
(click)="stand.emit()"
class="button-primary px-8 py-4 text-lg font-medium min-w-[120px]"
[disabled]="gameState !== 'IN_PROGRESS'"
>
Halten
</button>
<button
(click)="leave.emit()"
class="bg-accent-red hover:bg-accent-red/80 px-8 py-4 rounded text-lg font-medium min-w-[120px] transition-all duration-300"
>
Abbrechen
</button>
</div>
</div>
`,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class GameControlsComponent {
@Input() playerCards: Card[] = [];
@Input() gameState: string = 'IN_PROGRESS';
@Output() hit = new EventEmitter<void>();
@Output() stand = new EventEmitter<void>();
@Output() leave = new EventEmitter<void>();
calculateHandValue(cards: Card[]): number {
let sum = 0;
let aceCount = 0;
const rankValues: Record<string, number> = {
TWO: 2,
THREE: 3,
FOUR: 4,
FIVE: 5,
SIX: 6,
SEVEN: 7,
EIGHT: 8,
NINE: 9,
TEN: 10,
JACK: 10,
QUEEN: 10,
KING: 10,
ACE: 11
};
for (const card of cards) {
if (!card.hidden) {
const value = rankValues[card.rank] || 0;
sum += value;
if (card.rank === 'ACE') {
aceCount++;
}
}
}
while (sum > 21 && aceCount > 0) {
sum -= 10;
aceCount--;
}
return sum;
}
getStatusText(state: string): string {
switch (state) {
case 'IN_PROGRESS':
return 'Spiel läuft';
case 'PLAYER_WON':
return 'Gewonnen!';
case 'PLAYER_LOST':
return 'Verloren!';
case 'DRAW':
return 'Unentschieden!';
default:
return state;
}
}
getStatusClass(state: string): string {
switch (state) {
case 'PLAYER_WON':
return 'text-emerald';
case 'PLAYER_LOST':
return 'text-accent-red';
case 'DRAW':
return 'text-yellow-400';
default:
return 'text-white';
}
}
}

1
frontend/src/app/feature/game/blackjack/components/game-result/game-result.component.css Normal file
View file

@ -0,0 +1 @@
/* No custom styles needed */

23
frontend/src/app/feature/game/blackjack/components/game-result/game-result.component.spec.ts Normal file
View file

@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { GameResultComponent } from './game-result.component';
describe('GameResultComponent', () => {
let component: GameResultComponent;
let fixture: ComponentFixture<GameResultComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [GameResultComponent]
})
.compileComponents();
fixture = TestBed.createComponent(GameResultComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

124
frontend/src/app/feature/game/blackjack/components/game-result/game-result.component.ts Normal file
View file

@ -0,0 +1,124 @@
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { CommonModule, CurrencyPipe } from '@angular/common';
import { animate, style, transition, trigger } from '@angular/animations';
@Component({
selector: 'app-game-result',
standalone: true,
imports: [CommonModule, CurrencyPipe],
template: `
<div
*ngIf="visible"
[@fadeInOut]
class="modal-bg"
>
<div
class="modal-card"
[@cardAnimation]
>
<h2 class="modal-heading" [class]="getResultClass()">{{ getResultTitle() }}</h2>
<p class="py-2 text-text-secondary mb-4">{{ getResultMessage() }}</p>
<div class="bg-deep-blue-light/50 rounded-lg p-5 mb-6 shadow-inner border border-deep-blue-light/30">
<div class="grid grid-cols-2 gap-4">
<div class="text-text-secondary">Einsatz:</div>
<div class="font-medium text-right">{{ amount }} €</div>
<div class="text-text-secondary">{{ isDraw ? 'Zurückgegeben:' : (isWin ? 'Gewonnen:' : 'Verloren:') }}</div>
<div
class="font-medium text-right"
[ngClass]="{
'text-emerald': isWin,
'text-accent-red': isLoss,
'text-yellow-400': isDraw
}"
>
{{ isLoss ? '-' : '+' }}{{ amount }} €
</div>
<div class="text-text-secondary border-t border-text-secondary/20 pt-3 font-medium">Gesamt:</div>
<div
class="font-medium text-right border-t border-text-secondary/20 pt-3"
[ngClass]="{
'text-emerald': isWin,
'text-accent-red': isLoss,
'text-white': isDraw
}"
>
{{ isWin ? '+' : (isLoss ? '-' : '') }}{{ amount }} €
</div>
</div>
</div>
<button
type="button"
(click)="visible = false"
class="button-primary w-full py-2"
>
Verstanden
</button>
</div>
</div>
`,
styleUrls: ['./game-result.component.css'],
changeDetection: ChangeDetectionStrategy.OnPush,
animations: [
trigger('fadeInOut', [
transition(':enter', [
style({ opacity: 0 }),
animate('300ms ease-out', style({ opacity: 1 }))
]),
transition(':leave', [
animate('200ms ease-in', style({ opacity: 0 }))
])
]),
trigger('cardAnimation', [
transition(':enter', [
style({ opacity: 0, transform: 'scale(0.8)' }),
animate('350ms ease-out', style({ opacity: 1, transform: 'scale(1)' }))
])
])
]
})
export class GameResultComponent {
@Input() gameState: string = '';
@Input() amount: number = 0;
@Input() set show(value: boolean) {
this.visible = value;
}
visible = false;
get isWin(): boolean {
return this.gameState === 'PLAYER_WON';
}
get isLoss(): boolean {
return this.gameState === 'PLAYER_LOST';
}
get isDraw(): boolean {
return this.gameState === 'DRAW';
}
getResultTitle(): string {
if (this.isWin) return 'Gewonnen!';
if (this.isLoss) return 'Verloren!';
if (this.isDraw) return 'Unentschieden!';
return '';
}
getResultMessage(): string {
if (this.isWin) return 'Glückwunsch! Du hast diese Runde gewonnen.';
if (this.isLoss) return 'Schade! Du hast diese Runde verloren.';
if (this.isDraw) return 'Diese Runde endet unentschieden. Dein Einsatz wurde zurückgegeben.';
return '';
}
getResultClass(): string {
if (this.isWin) return 'text-emerald';
if (this.isLoss) return 'text-accent-red';
if (this.isDraw) return 'text-yellow-400';
return '';
}
}

11
frontend/src/app/feature/game/blackjack/services/blackjack.service.ts
View file

@ -41,4 +41,15 @@ export class BlackjackService {
})
);
}
getGame(gameId: number): Observable<BlackjackGame> {
return this.http
.get<BlackjackGame>(`/backend/blackjack/${gameId}`, { responseType: 'json' })
.pipe(
catchError((error) => {
console.error('Get game error:', error);
throw error;
})
);
}
}