Add player and opponent rows for card placement, implement hover effects with hand validation, and animate card movement to field with proper positioning.

src/main.js

@@ -116,9 +116,14 @@ function create() {
     });
     title.setOrigin(0.5);
     
-    // Create a basic game area
+    // Add player and opponent rows for cards in center of screen
-    const gameArea = this.add.rectangle(800, 450, 1400, 700, 0x3a7c2d);
+    // Player row at bottom (closest to player)
-    gameArea.setOrigin(0.5);
+    const playerRow = this.add.rectangle(800, 600, 1400, 120, 0x3a7c2d);
+    playerRow.setOrigin(0.5);
+    
+    // Opponent row at top (closest to opponent)
+    const opponentRow = this.add.rectangle(800, 300, 1400, 120, 0x3a7c2d);
+    opponentRow.setOrigin(0.5);
     
     // Add some instructions
     const instructions = this.add.text(800, 850, 'Use mouse to play cards and build your deck', {
@@ -245,6 +250,9 @@ function addInteractiveCard(card, xPosition, yPosition, width, height) {
     
     // Add event listeners for hover effects
     hitArea.on('pointerover', () => {
+        // Only allow hover effects if the card is in hand (not already on field)
+        const isInHand = this.gameState.playerHand.includes(card);
+        if (isInHand && !card.isLocked) {
             // Raise the card up to full view (move it up by 30 pixels)
             if (card.sprite) {
                 card.sprite.setY(originalY - 30);
@@ -262,30 +270,38 @@ function addInteractiveCard(card, xPosition, yPosition, width, height) {
             if (card.healthText) {
                 card.healthText.setY(originalY + 20);
             }
+        }
     });
     
     hitArea.on('pointerout', () => {
+        // Only allow hover effects if the card is in hand (not already on field)
+        const isInHand = this.gameState.playerHand.includes(card);
+        if (isInHand && !card.isLocked) {
             // Return the card to its original position
-        if (card.sprite && !card.isLocked) {
+            if (card.sprite) {
                 card.sprite.setY(originalY);
             }
-        if (card.text && !card.isLocked) {
+            if (card.text) {
                 card.text.setY(originalY - 20);
             }
             // Return stat texts to original positions
-        if (card.attackText && !card.isLocked) {
+            if (card.attackText) {
                 card.attackText.setY(originalY - 50);
             }
-        if (card.shieldText && !card.isLocked) {
+            if (card.shieldText) {
                 card.shieldText.setY(originalY + 50);
             }
-        if (card.healthText && !card.isLocked) {
+            if (card.healthText) {
                 card.healthText.setY(originalY + 50);
             }
+        }
     });
     
     // Add click event to lock the card in place
     hitArea.on('pointerdown', () => {
+        // Only allow clicking if the card is in hand (not already on field)
+        const isInHand = this.gameState.playerHand.includes(card);
+        if (isInHand) {
             // Lock the card in its current position
             card.isLocked = true;
             
@@ -299,6 +315,7 @@ function addInteractiveCard(card, xPosition, yPosition, width, height) {
             
             // Create Play and Cancel buttons above the card
             createCardButtons.call(this, card, xPosition, originalY - 30);
+        }
     });
 }
 
@@ -371,26 +388,38 @@ function createCardButtons(card, xPosition, yPosition) {
 }
 
 /**
- * Move a card to the player's field (center of screen)
+ * Move a card to the player's field (player row on far right)
  */
 function moveCardToField(card) {
-    // For now, we'll just remove it from hand and add it to field
+    // Remove it from hand and add it to field
-    // In a real implementation this would involve more complex logic
     const index = this.gameState.playerHand.indexOf(card);
     if (index > -1) {
         this.gameState.playerHand.splice(index, 1);
         this.gameState.playerField.push(card);
     }
     
-    // Remove the card from display
+    // Calculate starting position for the animation (right side of screen)
-    if (card.sprite) {
+    const startX = 1600 + 50; // Start just off-screen to the right
-        card.sprite.destroy();
+    const startY = 600; // Player field y-position (bottom row)
-    }
-    if (card.text) {
-        card.text.destroy();
-    }
     
-    // Re-display the player's hand to update positions of remaining cards
+    // Calculate target x position based on how many cards are already in the field
+    // Cards stack from right to left with each card being 120px wide + 20px spacing
+    const cardWidth = 100;
+    const spacing = 20;
+    const currentFieldCount = this.gameState.playerField.length - 1; // -1 because we just added the new card
+    const targetX = 1600 - (cardWidth + spacing) * currentFieldCount - (cardWidth / 2); // Position from right edge
+    
+    // Animate the card moving from right to left towards its final position in player field
+    this.tweens.add({
+        targets: [card.sprite, card.text, card.attackText, card.shieldText, card.healthText],
+        x: targetX,
+        y: startY,
+        duration: 500, // 500ms animation time
+        ease: 'Power2'
+    });
+    
+    // Re-display the player's hand to update positions of remaining cards after animation completes
+    setTimeout(() => {
         // Clear existing hand display first by removing all sprites and texts
         this.gameState.playerHand.forEach(handCard => {
             if (handCard.sprite) {
@@ -403,6 +432,7 @@ function moveCardToField(card) {
         
         // Redisplay the updated player's hand at the bottom of the screen
         displayPlayerHand.call(this);
+    }, 500); // Wait for animation to complete before updating hand
 }
 
 /**