+
{{ getResultTitle() }}
{{ getResultMessage() }}
-
-
+
+
Einsatz:
{{ amount }} €
-
-
{{ isDraw ? 'Zurückgegeben:' : (isWin ? 'Gewonnen:' : 'Verloren:') }}
-
+ {{ isDraw ? 'Zurückgegeben:' : isWin ? 'Gewonnen:' : 'Verloren:' }}
+
+
{{ isLoss ? '-' : '+' }}{{ amount }} €
-
-
Gesamt:
-
+ Gesamt:
+
+
- {{ isWin ? '+' : (isLoss ? '-' : '') }}{{ amount }} €
+ {{ isWin ? '+' : isLoss ? '-' : '' }}{{ amount }} €
-
-
@@ -67,68 +61,66 @@ import { animate, style, transition, trigger } from '@angular/animations';
trigger('fadeInOut', [
transition(':enter', [
style({ opacity: 0 }),
- animate('150ms ease-out', style({ opacity: 1 }))
+ animate('150ms ease-out', style({ opacity: 1 })),
]),
- transition(':leave', [
- animate('150ms ease-in', style({ opacity: 0 }))
- ])
+ 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)' }))
- ])
- ])
- ]
+ animate('200ms ease-out', style({ opacity: 1, transform: 'scale(1)' })),
+ ]),
+ ]),
+ ],
})
export class GameResultComponent {
- @Input() gameState: string = '';
- @Input() amount: number = 0;
+ @Input() gameState = '';
+ @Input() amount = 0;
@Input() set show(value: boolean) {
console.log('GameResultComponent show input changed:', value, 'gameState:', this.gameState);
this.visible = value;
}
-
- @Output() close = new EventEmitter
();
-
+
+ @Output() gameResultClosed = new EventEmitter();
+
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 '';
}
-
+
closeDialog(): void {
this.visible = false;
- this.close.emit();
+ this.gameResultClosed.emit();
console.log('Dialog closed by user');
}
}
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 2b27fee..33bf547 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
@@ -37,30 +37,30 @@ import { Card } from '../../models/blackjack.model';
export class PlayerHandComponent implements OnChanges {
@Input() cards: Card[] = [];
cardsWithState: (Card & { isNew: boolean; id: string })[] = [];
-
+
private lastCardCount = 0;
-
+
ngOnChanges(changes: SimpleChanges): void {
if (changes['cards']) {
this.updateCardsWithState();
}
}
-
+
private updateCardsWithState(): void {
const newCards = this.cards.length > this.lastCardCount;
-
+
this.cardsWithState = this.cards.map((card, index) => {
// Consider a card new if it's added after the initial state and is the latest card
const isNew = newCards && index >= this.lastCardCount;
-
+
return {
...card,
isNew,
// Generate a unique ID to help Angular track the cards
- id: `${card.suit}-${card.rank}-${index}`
+ id: `${card.suit}-${card.rank}-${index}`,
};
});
-
+
this.lastCardCount = this.cards.length;
}
}
diff --git a/frontend/src/app/feature/game/blackjack/components/playing-card/playing-card.component.ts b/frontend/src/app/feature/game/blackjack/components/playing-card/playing-card.component.ts
index e006bd4..662ddc6 100644
--- a/frontend/src/app/feature/game/blackjack/components/playing-card/playing-card.component.ts
+++ b/frontend/src/app/feature/game/blackjack/components/playing-card/playing-card.component.ts
@@ -1,4 +1,12 @@
-import { ChangeDetectionStrategy, Component, Input, AfterViewInit, ElementRef, OnChanges, SimpleChanges } from '@angular/core';
+import {
+ ChangeDetectionStrategy,
+ Component,
+ Input,
+ AfterViewInit,
+ ElementRef,
+ OnChanges,
+ SimpleChanges,
+} from '@angular/core';
import { CommonModule } from '@angular/common';
import { suitSymbols, Suit } from '../../models/blackjack.model';
import { gsap } from 'gsap';
@@ -14,7 +22,9 @@ import { gsap } from 'gsap';
[class]="hidden ? 'bg-red-800' : 'bg-white'"
>
@if (!hidden) {
- {{ getDisplayRank(rank) }}
+ {{
+ getDisplayRank(rank)
+ }}
}
@if (!hidden) {
}
@if (!hidden) {
- {{
- getDisplayRank(rank)
- }}
+ {{ getDisplayRank(rank) }}
}
`,
- styles: [`
- .card-element {
- transform-style: preserve-3d;
- backface-visibility: hidden;
- }
- `],
+ styles: [
+ `
+ .card-element {
+ transform-style: preserve-3d;
+ backface-visibility: hidden;
+ }
+ `,
+ ],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class PlayingCardComponent implements AfterViewInit, OnChanges {
@Input({ required: true }) rank!: string;
@Input({ required: true }) suit!: Suit;
@Input({ required: true }) hidden!: boolean;
- @Input() isNew: boolean = false;
+ @Input() isNew = false;
constructor(private elementRef: ElementRef) {}
@@ -66,31 +80,31 @@ export class PlayingCardComponent implements AfterViewInit, OnChanges {
const cardElement = this.elementRef.nativeElement.querySelector('.card-element');
gsap.fromTo(
cardElement,
- {
- y: -100,
+ {
+ y: -100,
opacity: 0,
rotation: -10,
- scale: 0.7
+ scale: 0.7,
},
- {
- y: 0,
+ {
+ y: 0,
opacity: 1,
rotation: 0,
scale: 1,
- duration: 0.5,
- ease: 'power2.out'
+ duration: 0.5,
+ ease: 'power2.out',
}
);
}
private animateCardFlip(): void {
const cardElement = this.elementRef.nativeElement.querySelector('.card-element');
- gsap.to(cardElement, {
- rotationY: 180,
+ gsap.to(cardElement, {
+ rotationY: 180,
duration: 0.3,
onComplete: () => {
gsap.set(cardElement, { rotationY: 0 });
- }
+ },
});
}