100 lines
3.8 KiB
TypeScript
100 lines
3.8 KiB
TypeScript
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
|
|
import { CommonModule } from '@angular/common';
|
|
import { GameState } from '../../enum/gameState';
|
|
import { Card } from '@blackjack/models/blackjack.model';
|
|
import { GameControlsService } from '@blackjack/services/game-controls.service';
|
|
|
|
@Component({
|
|
selector: 'app-game-controls',
|
|
standalone: true,
|
|
imports: [CommonModule],
|
|
template: `
|
|
<div class="flex flex-col gap-4">
|
|
<div class="flex justify-center text-lg mb-5">
|
|
<div class="card p-4">
|
|
<div class="text-emerald font-bold mb-1">
|
|
Deine Punkte: {{ gameControlsService.calculateHandValue(playerCards) }}
|
|
</div>
|
|
<div class="text-text-secondary">
|
|
Status:
|
|
<span [class]="gameControlsService.getStatusClass(gameState)">{{
|
|
gameControlsService.getStatusText(gameState)
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex justify-center gap-4">
|
|
<button
|
|
(click)="hit.emit()"
|
|
class="button-primary px-8 py-4 text-lg font-medium min-w-[120px] relative"
|
|
[disabled]="gameState !== GameState.IN_PROGRESS || isActionInProgress"
|
|
[class.opacity-50]="isActionInProgress"
|
|
>
|
|
<span [class.invisible]="isActionInProgress">Ziehen</span>
|
|
@if (isActionInProgress) {
|
|
<div class="absolute inset-0 flex items-center justify-center">
|
|
<div
|
|
class="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"
|
|
></div>
|
|
</div>
|
|
}
|
|
</button>
|
|
<button
|
|
(click)="stand.emit()"
|
|
class="button-primary px-8 py-4 text-lg font-medium min-w-[120px] relative"
|
|
[disabled]="gameState !== GameState.IN_PROGRESS || isActionInProgress"
|
|
[class.opacity-50]="isActionInProgress"
|
|
>
|
|
<span [class.invisible]="isActionInProgress">Halten</span>
|
|
@if (isActionInProgress) {
|
|
<div class="absolute inset-0 flex items-center justify-center">
|
|
<div
|
|
class="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"
|
|
></div>
|
|
</div>
|
|
}
|
|
</button>
|
|
<button
|
|
(click)="doubleDown.emit()"
|
|
class="button-primary px-8 py-4 text-lg font-medium min-w-[120px] relative"
|
|
[disabled]="
|
|
gameState !== GameState.IN_PROGRESS || playerCards.length !== 2 || isActionInProgress
|
|
"
|
|
[class.opacity-50]="isActionInProgress"
|
|
>
|
|
<span [class.invisible]="isActionInProgress">Verdoppeln</span>
|
|
@if (isActionInProgress) {
|
|
<div class="absolute inset-0 flex items-center justify-center">
|
|
<div
|
|
class="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"
|
|
></div>
|
|
</div>
|
|
}
|
|
</button>
|
|
<button
|
|
(click)="leave.emit()"
|
|
class="bg-accent-red hover:bg-accent-red/80 px-8 py-4 rounded text-lg font-medium min-w-[120px] transition-all duration-300"
|
|
[disabled]="isActionInProgress"
|
|
[class.opacity-50]="isActionInProgress"
|
|
>
|
|
Abbrechen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
`,
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
})
|
|
export class GameControlsComponent {
|
|
@Input() playerCards: Card[] = [];
|
|
@Input() gameState: GameState = GameState.IN_PROGRESS;
|
|
@Input() isActionInProgress = false;
|
|
|
|
@Output() hit = new EventEmitter<void>();
|
|
@Output() stand = new EventEmitter<void>();
|
|
@Output() doubleDown = new EventEmitter<void>();
|
|
@Output() leave = new EventEmitter<void>();
|
|
|
|
protected readonly GameState = GameState;
|
|
|
|
constructor(protected gameControlsService: GameControlsService) { }
|
|
}
|