59 lines
1.6 KiB
TypeScript
59 lines
1.6 KiB
TypeScript
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
|
|
import { CommonModule } from '@angular/common';
|
|
import { suitSymbols, Suit } from '../../models/blackjack.model';
|
|
|
|
@Component({
|
|
selector: 'app-playing-card',
|
|
standalone: true,
|
|
imports: [CommonModule],
|
|
template: `
|
|
<div
|
|
class="w-24 h-36 rounded-lg p-2 relative flex flex-col justify-between shadow-lg"
|
|
[class]="hidden ? 'bg-red-800' : 'bg-white'"
|
|
>
|
|
@if (!hidden) {
|
|
<span class="text-xl font-bold text-accent-red">{{ getDisplayRank(rank) }}</span>
|
|
}
|
|
@if (!hidden) {
|
|
<span
|
|
class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-3xl text-accent-red"
|
|
>{{ getSuitSymbol(suit) }}</span
|
|
>
|
|
}
|
|
@if (!hidden) {
|
|
<span class="text-xl font-bold text-accent-red self-end rotate-180">{{
|
|
getDisplayRank(rank)
|
|
}}</span>
|
|
}
|
|
</div>
|
|
`,
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
})
|
|
export class PlayingCardComponent {
|
|
@Input({ required: true }) rank!: string;
|
|
@Input({ required: true }) suit!: Suit;
|
|
@Input({ required: true }) hidden!: boolean;
|
|
|
|
protected getSuitSymbol(suit: Suit): string {
|
|
return suitSymbols[suit];
|
|
}
|
|
|
|
protected getDisplayRank(rank: string): string {
|
|
const rankMap: Record<string, string> = {
|
|
TWO: '2',
|
|
THREE: '3',
|
|
FOUR: '4',
|
|
FIVE: '5',
|
|
SIX: '6',
|
|
SEVEN: '7',
|
|
EIGHT: '8',
|
|
NINE: '9',
|
|
TEN: '10',
|
|
JACK: 'J',
|
|
QUEEN: 'Q',
|
|
KING: 'K',
|
|
ACE: 'A',
|
|
};
|
|
return rankMap[rank] || rank;
|
|
}
|
|
}
|