SZUT/casino
SZUT/casino
Archived
3
1
Fork 0
Code Issues Pull requests 2 Releases 162 Packages 2 Wiki Activity Actions

feat(blackjack): add action indicators and loading states

Browse source
This commit is contained in:
Jan-Marlon Leibl 2025-03-27 15:44:38 +01:00
commit acdbea5a99
Signed by: jleibl
GPG key ID: 300B2F906DC6F1D5
7 changed files with 208 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

39
frontend/src/app/feature/game/blackjack/components/game-controls/game-controls.component.ts
View file

@ -19,28 +19,48 @@ import { Card } from '../../models/blackjack.model';
<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]"
[disabled]="gameState !== 'IN_PROGRESS'"
class="button-primary px-8 py-4 text-lg font-medium min-w-[120px] relative"
[disabled]="gameState !== 'IN_PROGRESS' || isActionInProgress"
[class.opacity-50]="isActionInProgress"
>
Ziehen
<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]"
[disabled]="gameState !== 'IN_PROGRESS'"
class="button-primary px-8 py-4 text-lg font-medium min-w-[120px] relative"
[disabled]="gameState !== 'IN_PROGRESS' || isActionInProgress"
[class.opacity-50]="isActionInProgress"
>
Halten
<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]"
[disabled]="gameState !== 'IN_PROGRESS' || playerCards.length !== 2"
class="button-primary px-8 py-4 text-lg font-medium min-w-[120px] relative"
[disabled]="gameState !== 'IN_PROGRESS' || playerCards.length !== 2 || isActionInProgress"
[class.opacity-50]="isActionInProgress"
>
Verdoppeln
<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>
@ -52,6 +72,7 @@ import { Card } from '../../models/blackjack.model';
export class GameControlsComponent {
@Input() playerCards: Card[] = [];
@Input() gameState: string = 'IN_PROGRESS';
@Input() isActionInProgress: boolean = false;
@Output() hit = new EventEmitter<void>();
@Output() stand = new EventEmitter<void>();