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' }}
}