Add card stat display (attack, shield, health) to player hand cards

This change adds visual indicators for attack, shield, and health values to each card displayed in the player's hand. The stats are shown in specific corners of each card:
- Attack value in upper left corner
- Shield value in lower left corner
- Health value in lower right corner

The stat text elements are properly positioned relative to the card sprite and maintain their positions during hover animations. Each card now stores references to its stat text elements for consistent positioning and updates.

src/main.js

@@ -197,6 +197,32 @@ function displayPlayerHand() {
         });
         numberText.setOrigin(0.5);
         
+        // Display attack in upper left corner
+        const attackText = this.add.text(xPosition - 40, yPosition - 50, `A:${card.attack}`, {
+            fontSize: '16px',
+            fill: '#ffffff'
+        });
+        attackText.setOrigin(0.5);
+        
+        // Display shield in lower left corner
+        const shieldText = this.add.text(xPosition - 40, yPosition + 50, `S:${card.shield}`, {
+            fontSize: '16px',
+            fill: '#ffffff'
+        });
+        shieldText.setOrigin(0.5);
+        
+        // Display health in lower right corner
+        const healthText = this.add.text(xPosition + 40, yPosition + 50, `H:${card.health}`, {
+            fontSize: '16px',
+            fill: '#ffffff'
+        });
+        healthText.setOrigin(0.5);
+        
+        // Store references to stat texts with sprite reference
+        card.attackText = attackText;
+        card.shieldText = shieldText;
+        card.healthText = healthText;
+        
         // Store card data with sprite reference
         card.sprite = cardSprite;
         card.text = numberText;
@@ -226,6 +252,16 @@ function addInteractiveCard(card, xPosition, yPosition, width, height) {
         if (card.text) {
             card.text.setY(originalY - 50);
         }
+        // Move stat texts with the card
+        if (card.attackText) {
+            card.attackText.setY(originalY - 80);
+        }
+        if (card.shieldText) {
+            card.shieldText.setY(originalY + 20);
+        }
+        if (card.healthText) {
+            card.healthText.setY(originalY + 20);
+        }
     });
     
     hitArea.on('pointerout', () => {
@@ -236,6 +272,16 @@ function addInteractiveCard(card, xPosition, yPosition, width, height) {
         if (card.text && !card.isLocked) {
             card.text.setY(originalY - 20);
         }
+        // Return stat texts to original positions
+        if (card.attackText && !card.isLocked) {
+            card.attackText.setY(originalY - 50);
+        }
+        if (card.shieldText && !card.isLocked) {
+            card.shieldText.setY(originalY + 50);
+        }
+        if (card.healthText && !card.isLocked) {
+            card.healthText.setY(originalY + 50);
+        }
     });
     
     // Add click event to lock the card in place