From 68a226b67769cbddf526c5ab683313db379696cb Mon Sep 17 00:00:00 2001 From: Jan-Marlon Leibl Date: Wed, 2 Apr 2025 12:50:51 +0200 Subject: [PATCH 1/6] feat(debt-dialog): add debt warning dialog for negative balance --- .../casino/blackjack/BlackJackService.java | 4 - .../game/blackjack/blackjack.component.html | 7 + .../game/blackjack/blackjack.component.ts | 16 +- .../dealer-hand/dealer-hand.component.ts | 2 +- .../game-result/game-result.component.ts | 41 ++--- .../debt-dialog/debt-dialog.component.ts | 141 ++++++++++++++++++ .../components/navbar/navbar.component.html | 3 +- 7 files changed, 182 insertions(+), 32 deletions(-) create mode 100644 frontend/src/app/shared/components/debt-dialog/debt-dialog.component.ts diff --git a/backend/src/main/java/de/szut/casino/blackjack/BlackJackService.java b/backend/src/main/java/de/szut/casino/blackjack/BlackJackService.java index ebddd1a..158e32c 100644 --- a/backend/src/main/java/de/szut/casino/blackjack/BlackJackService.java +++ b/backend/src/main/java/de/szut/casino/blackjack/BlackJackService.java @@ -74,10 +74,6 @@ public class BlackJackService { UserEntity user = getUserWithFreshData(game.getUser()); BigDecimal additionalBet = game.getBet(); - if (user.getBalance().compareTo(additionalBet) < 0) { - return game; - } - deductBetFromBalance(user, additionalBet); game.setBet(game.getBet().add(additionalBet)); diff --git a/frontend/src/app/feature/game/blackjack/blackjack.component.html b/frontend/src/app/feature/game/blackjack/blackjack.component.html index 887aeeb..1737cd9 100644 --- a/frontend/src/app/feature/game/blackjack/blackjack.component.html +++ b/frontend/src/app/feature/game/blackjack/blackjack.component.html @@ -51,3 +51,10 @@ [show]="showGameResult()" (gameResultClosed)="onCloseGameResult()" > + + + diff --git a/frontend/src/app/feature/game/blackjack/blackjack.component.ts b/frontend/src/app/feature/game/blackjack/blackjack.component.ts index 78f3533..702776e 100644 --- a/frontend/src/app/feature/game/blackjack/blackjack.component.ts +++ b/frontend/src/app/feature/game/blackjack/blackjack.component.ts @@ -14,6 +14,7 @@ import { GameState } from '@blackjack/enum/gameState'; import { NavbarComponent } from '@shared/components/navbar/navbar.component'; import { UserService } from '@service/user.service'; import { timer } from 'rxjs'; +import { DebtDialogComponent } from '@shared/components/debt-dialog/debt-dialog.component'; @Component({ selector: 'app-blackjack', @@ -27,6 +28,7 @@ import { timer } from 'rxjs'; GameControlsComponent, GameInfoComponent, GameResultComponent, + DebtDialogComponent, ], templateUrl: './blackjack.component.html', changeDetection: ChangeDetectionStrategy.OnPush, @@ -48,6 +50,9 @@ export default class BlackjackComponent implements OnInit { isActionInProgress = signal(false); currentAction = signal(''); + showDebtDialog = signal(false); + debtAmount = signal(0); + ngOnInit(): void { this.userService.currentUser$.subscribe((user) => { if (user) { @@ -167,7 +172,12 @@ export default class BlackjackComponent implements OnInit { this.blackjackService.doubleDown(this.currentGameId()!).subscribe({ next: (game) => { this.updateGameState(game); - this.userService.refreshCurrentUser(); + this.userService.getCurrentUser().subscribe((user) => { + if (user && user.balance < 0) { + this.debtAmount.set(Math.abs(user.balance)); + this.showDebtDialog.set(true); + } + }); this.isActionInProgress.set(false); }, error: (error) => { @@ -184,6 +194,10 @@ export default class BlackjackComponent implements OnInit { this.userService.refreshCurrentUser(); } + onCloseDebtDialog(): void { + this.showDebtDialog.set(false); + } + private handleGameError(error: HttpErrorResponse): void { if (error instanceof HttpErrorResponse) { if (error.status === 400 && error.error?.error === 'Invalid state') { diff --git a/frontend/src/app/feature/game/blackjack/components/dealer-hand/dealer-hand.component.ts b/frontend/src/app/feature/game/blackjack/components/dealer-hand/dealer-hand.component.ts index 45174ca..b1a40ed 100644 --- a/frontend/src/app/feature/game/blackjack/components/dealer-hand/dealer-hand.component.ts +++ b/frontend/src/app/feature/game/blackjack/components/dealer-hand/dealer-hand.component.ts @@ -9,7 +9,7 @@ import { PlayingCardComponent } from '../playing-card/playing-card.component'; imports: [CommonModule, PlayingCardComponent], template: `
-

Croupier's Karten

+

Dealer's Karten

@if (cards.length > 0) { diff --git a/frontend/src/app/feature/game/blackjack/components/game-result/game-result.component.ts b/frontend/src/app/feature/game/blackjack/components/game-result/game-result.component.ts index b76baa5..cba3ac4 100644 --- a/frontend/src/app/feature/game/blackjack/components/game-result/game-result.component.ts +++ b/frontend/src/app/feature/game/blackjack/components/game-result/game-result.component.ts @@ -13,39 +13,29 @@ import { GameState } from '../../enum/gameState';

{{ getResultTitle() }}

{{ getResultMessage() }}

-
+
Einsatz:
-
{{ amount }} €
+
{{ amount | currency:'EUR' }}
{{ isDraw ? 'Zurückgegeben:' : isWin ? 'Gewonnen:' : 'Verloren:' }}
-
- {{ isLoss ? '-' : '+' }}{{ amount }} € +
+ {{ isLoss ? '-' : '+' }}{{ isWin ? (amount * 2) : amount | currency:'EUR' }}
-
- Gesamt: -
-
- {{ isWin ? '+' : isLoss ? '-' : '' }}{{ amount }} € +
Gesamt:
+
+ {{ isWin ? (amount * 2) : (isDraw ? amount : 0) | currency:'EUR' }}
@@ -76,6 +66,7 @@ import { GameState } from '../../enum/gameState'; export class GameResultComponent { @Input() gameState: GameState = GameState.IN_PROGRESS; @Input() amount = 0; + @Input() balance = 0; @Input() set show(value: boolean) { console.log('GameResultComponent show input changed:', value, 'gameState:', this.gameState); this.visible = value; diff --git a/frontend/src/app/shared/components/debt-dialog/debt-dialog.component.ts b/frontend/src/app/shared/components/debt-dialog/debt-dialog.component.ts new file mode 100644 index 0000000..90f9a9b --- /dev/null +++ b/frontend/src/app/shared/components/debt-dialog/debt-dialog.component.ts @@ -0,0 +1,141 @@ +import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnDestroy, OnInit, Output, signal } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { animate, style, transition, trigger } from '@angular/animations'; +import { interval, takeWhile } from 'rxjs'; + +@Component({ + selector: 'app-debt-dialog', + standalone: true, + imports: [CommonModule], + template: ` +
+
+

WARNUNG!

+

+ Du hast nicht genug Geld für den Double Down. Du bist jetzt im Minus und schuldest uns {{ amount | currency:'EUR' }}. +

+

+ Liefer das Geld sofort an den Dead Drop oder es wird unangenehme Konsequenzen geben! +

+
+
+
Schulden:
+
{{ amount | currency:'EUR' }}
+
+
+
+
+ {{ timeLeft() }} +
+
Sekunden verbleibend
+
+ @if (timeLeft() === 0) { +
+
+
+
+
+ + + + + ZEIT ABGELAUFEN + + + + +
+
+ KONSEQUENZEN FOLGEN +
+
+
+
+ } + +
+
+ `, + changeDetection: ChangeDetectionStrategy.OnPush, + animations: [ + trigger('fadeInOut', [ + transition(':enter', [ + style({ opacity: 0 }), + animate('150ms ease-out', style({ opacity: 1 })), + ]), + transition(':leave', [animate('150ms ease-in', style({ opacity: 0 }))]), + ]), + trigger('cardAnimation', [ + transition(':enter', [ + style({ opacity: 0, transform: 'scale(0.95)' }), + animate('200ms ease-out', style({ opacity: 1, transform: 'scale(1)' })), + ]), + ]), + trigger('countdown', [ + transition('* => *', [ + style({ transform: 'scale(1.2)' }), + animate('100ms ease-out', style({ transform: 'scale(1)' })), + ]), + ]), + ], +}) +export class DebtDialogComponent implements OnInit, OnDestroy { + @Input() amount = 0; + @Input() set show(value: boolean) { + this.visible = value; + if (value) { + this.startTimer(); + } + } + + @Output() dialogClosed = new EventEmitter(); + + visible = false; + timeLeft = signal(30); + private timerSubscription: any; + private warningSound = new Audio('assets/sounds/warning.mp3'); + + ngOnInit() { + if (this.visible) { + this.startTimer(); + } + } + + ngOnDestroy() { + this.stopTimer(); + } + + private startTimer() { + this.timeLeft.set(30); + this.timerSubscription = interval(1000) + .pipe(takeWhile(() => this.timeLeft() > 0)) + .subscribe(() => { + this.timeLeft.update(value => value - 1); + if (this.timeLeft() <= 5) { + this.warningSound.play(); + } + if (this.timeLeft() === 0) { + setTimeout(() => this.closeDialog(), 5000); + } + }); + } + + private stopTimer() { + if (this.timerSubscription) { + this.timerSubscription.unsubscribe(); + } + } + + closeDialog(): void { + this.stopTimer(); + this.visible = false; + this.dialogClosed.emit(); + } +} \ No newline at end of file diff --git a/frontend/src/app/shared/components/navbar/navbar.component.html b/frontend/src/app/shared/components/navbar/navbar.component.html index 040e7cf..a4ea516 100644 --- a/frontend/src/app/shared/components/navbar/navbar.component.html +++ b/frontend/src/app/shared/components/navbar/navbar.component.html @@ -17,8 +17,9 @@ @if (isLoggedIn) {
- {{ balance() | currency: 'EUR' : 'symbol' : '1.2-2' }} + {{ balance() | currency: 'EUR' : 'symbol' : '1.2-2' }}
} From 801edfe89e31d9ec68489e7f52109e11d6a30f9e Mon Sep 17 00:00:00 2001 From: Jan-Marlon Leibl Date: Wed, 2 Apr 2025 12:58:12 +0200 Subject: [PATCH 2/6] feat(blackjack): add balance display to game result component --- .../feature/game/blackjack/blackjack.component.html | 1 + .../components/game-result/game-result.component.ts | 13 ++++++------- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/frontend/src/app/feature/game/blackjack/blackjack.component.html b/frontend/src/app/feature/game/blackjack/blackjack.component.html index 1737cd9..fda8f1b 100644 --- a/frontend/src/app/feature/game/blackjack/blackjack.component.html +++ b/frontend/src/app/feature/game/blackjack/blackjack.component.html @@ -48,6 +48,7 @@ diff --git a/frontend/src/app/feature/game/blackjack/components/game-result/game-result.component.ts b/frontend/src/app/feature/game/blackjack/components/game-result/game-result.component.ts index cba3ac4..59a6d9f 100644 --- a/frontend/src/app/feature/game/blackjack/components/game-result/game-result.component.ts +++ b/frontend/src/app/feature/game/blackjack/components/game-result/game-result.component.ts @@ -27,15 +27,14 @@ import { GameState } from '../../enum/gameState'; 'text-yellow-400': isDraw }"> {{ isLoss ? '-' : '+' }}{{ isWin ? (amount * 2) : amount | currency:'EUR' }} +
+ (Einsatz {{ amount | currency:'EUR' }} × 2) +
-
Gesamt:
-
- {{ isWin ? (amount * 2) : (isDraw ? amount : 0) | currency:'EUR' }} +
Kontostand:
+
+ {{ balance | currency:'EUR' }}
From 40c402ae36fce63ec3bf8285934bd5dc5689023e Mon Sep 17 00:00:00 2001 From: Jan-Marlon Leibl Date: Wed, 2 Apr 2025 13:03:04 +0200 Subject: [PATCH 3/6] feat: add hand value display to dealer and player hands --- .../components/dealer-hand/dealer-hand.component.ts | 13 ++++++++++++- .../components/player-hand/player-hand.component.ts | 13 ++++++++++++- 2 files changed, 24 insertions(+), 2 deletions(-) diff --git a/frontend/src/app/feature/game/blackjack/components/dealer-hand/dealer-hand.component.ts b/frontend/src/app/feature/game/blackjack/components/dealer-hand/dealer-hand.component.ts index b1a40ed..3674d63 100644 --- a/frontend/src/app/feature/game/blackjack/components/dealer-hand/dealer-hand.component.ts +++ b/frontend/src/app/feature/game/blackjack/components/dealer-hand/dealer-hand.component.ts @@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } f import { CommonModule } from '@angular/common'; import { Card } from '@blackjack/models/blackjack.model'; import { PlayingCardComponent } from '../playing-card/playing-card.component'; +import { GameControlsService } from '@blackjack/services/game-controls.service'; @Component({ selector: 'app-dealer-hand', @@ -9,7 +10,15 @@ import { PlayingCardComponent } from '../playing-card/playing-card.component'; imports: [CommonModule, PlayingCardComponent], template: `
-

Dealer's Karten

+
+

Dealer's Karten

+
+
Punkte:
+
+ {{ gameControlsService.calculateHandValue(cards) }} +
+
+
@if (cards.length > 0) { @@ -38,6 +47,8 @@ export class DealerHandComponent implements OnChanges { private lastCardCount = 0; + constructor(protected gameControlsService: GameControlsService) {} + ngOnChanges(changes: SimpleChanges): void { if (changes['cards']) { this.updateCardsWithState(); diff --git a/frontend/src/app/feature/game/blackjack/components/player-hand/player-hand.component.ts b/frontend/src/app/feature/game/blackjack/components/player-hand/player-hand.component.ts index b921a3c..bca976c 100644 --- a/frontend/src/app/feature/game/blackjack/components/player-hand/player-hand.component.ts +++ b/frontend/src/app/feature/game/blackjack/components/player-hand/player-hand.component.ts @@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } f import { CommonModule } from '@angular/common'; import { PlayingCardComponent } from '../playing-card/playing-card.component'; import { Card } from '@blackjack/models/blackjack.model'; +import { GameControlsService } from '@blackjack/services/game-controls.service'; @Component({ selector: 'app-player-hand', @@ -9,7 +10,15 @@ import { Card } from '@blackjack/models/blackjack.model'; imports: [CommonModule, PlayingCardComponent], template: `
-

Deine Karten

+
+

Deine Karten

+
+
Punkte:
+
+ {{ gameControlsService.calculateHandValue(cards) }} +
+
+
Date: Wed, 2 Apr 2025 13:04:19 +0200 Subject: [PATCH 4/6] style(blackjack): remove commented modal sections from HTML --- .../src/app/feature/game/blackjack/blackjack.component.html | 2 -- 1 file changed, 2 deletions(-) diff --git a/frontend/src/app/feature/game/blackjack/blackjack.component.html b/frontend/src/app/feature/game/blackjack/blackjack.component.html index fda8f1b..93328a3 100644 --- a/frontend/src/app/feature/game/blackjack/blackjack.component.html +++ b/frontend/src/app/feature/game/blackjack/blackjack.component.html @@ -44,7 +44,6 @@
- - Date: Wed, 2 Apr 2025 13:04:22 +0200 Subject: [PATCH 5/6] style: Format code for readability and consistency --- .../game-result/game-result.component.ts | 29 +++++---- .../debt-dialog/debt-dialog.component.ts | 60 ++++++++++++++----- .../components/navbar/navbar.component.html | 4 +- 3 files changed, 67 insertions(+), 26 deletions(-) diff --git a/frontend/src/app/feature/game/blackjack/components/game-result/game-result.component.ts b/frontend/src/app/feature/game/blackjack/components/game-result/game-result.component.ts index 59a6d9f..63ca955 100644 --- a/frontend/src/app/feature/game/blackjack/components/game-result/game-result.component.ts +++ b/frontend/src/app/feature/game/blackjack/components/game-result/game-result.component.ts @@ -13,28 +13,35 @@ import { GameState } from '../../enum/gameState';

{{ getResultTitle() }}

{{ getResultMessage() }}

-
+
Einsatz:
-
{{ amount | currency:'EUR' }}
+
{{ amount | currency: 'EUR' }}
{{ isDraw ? 'Zurückgegeben:' : isWin ? 'Gewonnen:' : 'Verloren:' }}
-
- {{ isLoss ? '-' : '+' }}{{ isWin ? (amount * 2) : amount | currency:'EUR' }} +
+ {{ isLoss ? '-' : '+' }}{{ isWin ? amount * 2 : (amount | currency: 'EUR') }}
- (Einsatz {{ amount | currency:'EUR' }} × 2) + (Einsatz {{ amount | currency: 'EUR' }} × 2)
-
Kontostand:
+
+ Kontostand: +
- {{ balance | currency:'EUR' }} + {{ balance | currency: 'EUR' }}
diff --git a/frontend/src/app/shared/components/debt-dialog/debt-dialog.component.ts b/frontend/src/app/shared/components/debt-dialog/debt-dialog.component.ts index 90f9a9b..a57dfe0 100644 --- a/frontend/src/app/shared/components/debt-dialog/debt-dialog.component.ts +++ b/frontend/src/app/shared/components/debt-dialog/debt-dialog.component.ts @@ -1,4 +1,13 @@ -import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnDestroy, OnInit, Output, signal } from '@angular/core'; +import { + ChangeDetectionStrategy, + Component, + EventEmitter, + Input, + OnDestroy, + OnInit, + Output, + signal, +} from '@angular/core'; import { CommonModule } from '@angular/common'; import { animate, style, transition, trigger } from '@angular/animations'; import { interval, takeWhile } from 'rxjs'; @@ -12,19 +21,22 @@ import { interval, takeWhile } from 'rxjs';

WARNUNG!

- Du hast nicht genug Geld für den Double Down. Du bist jetzt im Minus und schuldest uns {{ amount | currency:'EUR' }}. + Du hast nicht genug Geld für den Double Down. Du bist jetzt im Minus und schuldest uns + {{ amount | currency: 'EUR' }}.

Liefer das Geld sofort an den Dead Drop oder es wird unangenehme Konsequenzen geben!

-
+
Schulden:
-
{{ amount | currency:'EUR' }}
+
{{ amount | currency: 'EUR' }}
-
-
+
- - + + - + ZEIT ABGELAUFEN - - + +
-
+
KONSEQUENZEN FOLGEN
@@ -117,7 +149,7 @@ export class DebtDialogComponent implements OnInit, OnDestroy { this.timerSubscription = interval(1000) .pipe(takeWhile(() => this.timeLeft() > 0)) .subscribe(() => { - this.timeLeft.update(value => value - 1); + this.timeLeft.update((value) => value - 1); if (this.timeLeft() <= 5) { this.warningSound.play(); } @@ -138,4 +170,4 @@ export class DebtDialogComponent implements OnInit, OnDestroy { this.visible = false; this.dialogClosed.emit(); } -} \ No newline at end of file +} diff --git a/frontend/src/app/shared/components/navbar/navbar.component.html b/frontend/src/app/shared/components/navbar/navbar.component.html index a4ea516..b34aea5 100644 --- a/frontend/src/app/shared/components/navbar/navbar.component.html +++ b/frontend/src/app/shared/components/navbar/navbar.component.html @@ -19,7 +19,9 @@ class="text-white font-bold bg-deep-blue-contrast rounded-full px-4 py-2 text-sm hover:bg-deep-blue-contrast/80 hover:cursor-pointer hover:scale-105 transition-all active:scale-95 select-none duration-300" routerLink="/home" > - {{ balance() | currency: 'EUR' : 'symbol' : '1.2-2' }} + {{ + balance() | currency: 'EUR' : 'symbol' : '1.2-2' + }}
} From 3d7ee92cf25ca81e96363939d763c2f55c74db23 Mon Sep 17 00:00:00 2001 From: Jan-Marlon Leibl Date: Wed, 2 Apr 2025 13:07:01 +0200 Subject: [PATCH 6/6] refactor(debt-dialog): update timerSubscription type to Subscription --- .../shared/components/debt-dialog/debt-dialog.component.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/app/shared/components/debt-dialog/debt-dialog.component.ts b/frontend/src/app/shared/components/debt-dialog/debt-dialog.component.ts index a57dfe0..dd60fdc 100644 --- a/frontend/src/app/shared/components/debt-dialog/debt-dialog.component.ts +++ b/frontend/src/app/shared/components/debt-dialog/debt-dialog.component.ts @@ -10,7 +10,7 @@ import { } from '@angular/core'; import { CommonModule } from '@angular/common'; import { animate, style, transition, trigger } from '@angular/animations'; -import { interval, takeWhile } from 'rxjs'; +import { interval, Subscription, takeWhile } from 'rxjs'; @Component({ selector: 'app-debt-dialog', @@ -131,7 +131,7 @@ export class DebtDialogComponent implements OnInit, OnDestroy { visible = false; timeLeft = signal(30); - private timerSubscription: any; + private timerSubscription: Subscription | undefined; private warningSound = new Audio('assets/sounds/warning.mp3'); ngOnInit() {