feat(blackjack): add action indicators and loading states

frontend/src/app/feature/game/blackjack/components/dealer-hand/dealer-hand.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnChanges, SimpleChanges } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { PlayingCardComponent } from '../playing-card/playing-card.component';
 import { Card } from '../../models/blackjack.model';
@@ -13,11 +13,12 @@ import { Card } from '../../models/blackjack.model';
       <div class="card p-6 !bg-accent-red">
         <div class="flex justify-center gap-4 min-h-[160px] p-4 border-2 border-red-400 rounded-lg">
           @if (cards.length > 0) {
-            @for (card of cards; track card) {
+            @for (card of cardsWithState; track card.id) {
               <app-playing-card
                 [rank]="card.rank"
                 [suit]="card.suit"
                 [hidden]="card.hidden"
+                [isNew]="card.isNew"
               ></app-playing-card>
             }
           } @else {
@@ -31,6 +32,33 @@ import { Card } from '../../models/blackjack.model';
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class DealerHandComponent {
+export class DealerHandComponent implements OnChanges {
   @Input() cards: Card[] = [];
+  cardsWithState: (Card & { isNew: boolean; id: string })[] = [];
+  
+  private lastCardCount = 0;
+  
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['cards']) {
+      this.updateCardsWithState();
+    }
+  }
+  
+  private updateCardsWithState(): void {
+    const newCards = this.cards.length > this.lastCardCount;
+    
+    this.cardsWithState = this.cards.map((card, index) => {
+      // Consider a card new if it's added after the initial state and is the latest card
+      const isNew = newCards && index >= this.lastCardCount;
+      
+      return {
+        ...card,
+        isNew,
+        // Generate a unique ID to help Angular track the cards
+        id: `${card.suit}-${card.rank}-${index}`
+      };
+    });
+    
+    this.lastCardCount = this.cards.length;
+  }
 }