124 lines
3.7 KiB
TypeScript
124 lines
3.7 KiB
TypeScript
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
|
|
import { CommonModule, CurrencyPipe } from '@angular/common';
|
|
import { animate, style, transition, trigger } from '@angular/animations';
|
|
|
|
@Component({
|
|
selector: 'app-game-result',
|
|
standalone: true,
|
|
imports: [CommonModule, CurrencyPipe],
|
|
template: `
|
|
<div
|
|
*ngIf="visible"
|
|
[@fadeInOut]
|
|
class="modal-bg"
|
|
>
|
|
<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)="visible = false"
|
|
class="button-primary w-full py-2"
|
|
>
|
|
Verstanden
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`,
|
|
styleUrls: ['./game-result.component.css'],
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
animations: [
|
|
trigger('fadeInOut', [
|
|
transition(':enter', [
|
|
style({ opacity: 0 }),
|
|
animate('300ms ease-out', style({ opacity: 1 }))
|
|
]),
|
|
transition(':leave', [
|
|
animate('200ms ease-in', style({ opacity: 0 }))
|
|
])
|
|
]),
|
|
trigger('cardAnimation', [
|
|
transition(':enter', [
|
|
style({ opacity: 0, transform: 'scale(0.8)' }),
|
|
animate('350ms ease-out', style({ opacity: 1, transform: 'scale(1)' }))
|
|
])
|
|
])
|
|
]
|
|
})
|
|
export class GameResultComponent {
|
|
@Input() gameState: string = '';
|
|
@Input() amount: number = 0;
|
|
@Input() set show(value: boolean) {
|
|
this.visible = value;
|
|
}
|
|
|
|
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 '';
|
|
}
|
|
}
|