130 lines
4.3 KiB
TypeScript
130 lines
4.3 KiB
TypeScript
import { ChangeDetectionStrategy, Component, Input, Output, EventEmitter } from '@angular/core';
|
|
import { CommonModule, CurrencyPipe } from '@angular/common';
|
|
import { animate, style, transition, trigger } from '@angular/animations';
|
|
import { GameState } from '../../enum/gameState';
|
|
|
|
@Component({
|
|
selector: 'app-game-result',
|
|
standalone: true,
|
|
imports: [CommonModule, CurrencyPipe],
|
|
template: `
|
|
<div *ngIf="visible" [@fadeInOut] class="modal-bg" style="z-index: 1000; position: fixed;">
|
|
<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)="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)' })),
|
|
]),
|
|
]),
|
|
],
|
|
})
|
|
export class GameResultComponent {
|
|
@Input() gameState: GameState = GameState.IN_PROGRESS;
|
|
@Input() amount = 0;
|
|
@Input() set show(value: boolean) {
|
|
console.log('GameResultComponent show input changed:', value, 'gameState:', this.gameState);
|
|
this.visible = value;
|
|
}
|
|
|
|
@Output() gameResultClosed = new EventEmitter<void>();
|
|
|
|
visible = false;
|
|
|
|
get isWin(): boolean {
|
|
return this.gameState === GameState.PLAYER_WON || this.gameState === GameState.PLAYER_BLACKJACK;
|
|
}
|
|
|
|
get isLoss(): boolean {
|
|
return this.gameState === GameState.PLAYER_LOST;
|
|
}
|
|
|
|
get isDraw(): boolean {
|
|
return this.gameState === GameState.DRAW;
|
|
}
|
|
|
|
getResultTitle(): string {
|
|
if (this.gameState === GameState.PLAYER_BLACKJACK) return 'Blackjack!';
|
|
if (this.isWin) return 'Gewonnen!';
|
|
if (this.isLoss) return 'Verloren!';
|
|
if (this.isDraw) return 'Unentschieden!';
|
|
return '';
|
|
}
|
|
|
|
getResultMessage(): string {
|
|
if (this.gameState === GameState.PLAYER_BLACKJACK)
|
|
return 'Glückwunsch! Du hast mit einem Blackjack gewonnen!';
|
|
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.gameState === GameState.PLAYER_BLACKJACK) return 'text-emerald font-bold';
|
|
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.gameResultClosed.emit();
|
|
console.log('Dialog closed by user');
|
|
}
|
|
}
|