feat(debt-dialog): add debt warning dialog for negative balance
This commit is contained in:
parent
d22c4c243f
commit
68a226b677
GPG key ID:
300B2F906DC6F1D5
7 changed files with 182 additions and 32 deletions
|
|
@ -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));
|
||||
|
||||
|
|
|
|||
|
|
@ -51,3 +51,10 @@
|
|||
[show]="showGameResult()"
|
||||
(gameResultClosed)="onCloseGameResult()"
|
||||
></app-game-result>
|
||||
|
||||
<!-- Debt Dialog -->
|
||||
<app-debt-dialog
|
||||
[amount]="debtAmount()"
|
||||
[show]="showDebtDialog()"
|
||||
(dialogClosed)="onCloseDebtDialog()"
|
||||
></app-debt-dialog>
|
||||
|
|
|
|||
|
|
@ -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<string>('');
|
||||
|
||||
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') {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import { PlayingCardComponent } from '../playing-card/playing-card.component';
|
|||
imports: [CommonModule, PlayingCardComponent],
|
||||
template: `
|
||||
<div class="space-y-4">
|
||||
<h3 class="section-heading text-2xl mb-4">Croupier's Karten</h3>
|
||||
<h3 class="section-heading text-2xl mb-4">Dealer's Karten</h3>
|
||||
<div class="card p-6 !bg-accent-red">
|
||||
<div class="flex justify-center gap-4 min-h-[160px] p-4 border-2 border-red-400 rounded-lg">
|
||||
@if (cards.length > 0) {
|
||||
|
|
|
|||
|
|
@ -13,39 +13,29 @@ import { GameState } from '../../enum/gameState';
|
|||
<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="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="font-medium text-right">{{ amount | currency:'EUR' }}</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 class="font-medium text-right" [ngClass]="{
|
||||
'text-emerald': isWin,
|
||||
'text-accent-red': isLoss,
|
||||
'text-yellow-400': isDraw
|
||||
}">
|
||||
{{ isLoss ? '-' : '+' }}{{ isWin ? (amount * 2) : amount | currency:'EUR' }}
|
||||
</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 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 ? (amount * 2) : (isDraw ? amount : 0) | currency:'EUR' }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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: `
|
||||
<div *ngIf="visible" [@fadeInOut] class="modal-bg" style="z-index: 1000; position: fixed;">
|
||||
<div class="modal-card" [@cardAnimation]>
|
||||
<h2 class="modal-heading text-accent-red">WARNUNG!</h2>
|
||||
<p class="py-2 text-text-secondary mb-4">
|
||||
Du hast nicht genug Geld für den Double Down. Du bist jetzt im Minus und schuldest uns {{ amount | currency:'EUR' }}.
|
||||
</p>
|
||||
<p class="py-2 text-accent-red mb-4 font-bold">
|
||||
Liefer das Geld sofort an den Dead Drop oder es wird unangenehme Konsequenzen geben!
|
||||
</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">Schulden:</div>
|
||||
<div class="font-medium text-right text-accent-red">{{ amount | currency:'EUR' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center mb-6">
|
||||
<div
|
||||
class="text-8xl font-bold text-accent-red"
|
||||
[class.animate-pulse]="timeLeft() <= 10"
|
||||
[class.animate-bounce]="timeLeft() <= 5"
|
||||
[@countdown]="timeLeft()"
|
||||
>
|
||||
{{ timeLeft() }}
|
||||
</div>
|
||||
<div class="text-text-secondary mt-2">Sekunden verbleibend</div>
|
||||
</div>
|
||||
@if (timeLeft() === 0) {
|
||||
<div class="text-center mb-6">
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 bg-accent-red/20 blur-xl rounded-full"></div>
|
||||
<div class="relative bg-gradient-to-b from-accent-red to-red-900 p-8 rounded-lg border-2 border-accent-red shadow-lg">
|
||||
<div class="flex items-center justify-center gap-4 mb-4">
|
||||
<svg class="w-12 h-12 text-accent-red animate-[spin_2s_linear_infinite]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/>
|
||||
</svg>
|
||||
<span class="text-4xl font-black tracking-wider text-white animate-[pulse_1s_ease-in-out_infinite]">
|
||||
ZEIT ABGELAUFEN
|
||||
</span>
|
||||
<svg class="w-12 h-12 text-accent-red animate-[spin_2s_linear_infinite]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="text-2xl font-bold text-white/90 tracking-wider animate-[pulse_1s_ease-in-out_infinite]">
|
||||
KONSEQUENZEN FOLGEN
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
<button type="button" (click)="closeDialog()" class="button-primary w-full py-2">
|
||||
Verstanden
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
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<void>();
|
||||
|
||||
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();
|
||||
}
|
||||
}
|
||||
|
|
@ -17,8 +17,9 @@
|
|||
@if (isLoggedIn) {
|
||||
<div
|
||||
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"
|
||||
>
|
||||
<span>{{ balance() | currency: 'EUR' : 'symbol' : '1.2-2' }}</span>
|
||||
<span [class]="balance() < 0 ? 'text-accent-red' : ''">{{ balance() | currency: 'EUR' : 'symbol' : '1.2-2' }}</span>
|
||||
</div>
|
||||
<button (click)="logout()" class="button-primary px-4 py-1.5">Abmelden</button>
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue