feat: Add card locking mechanism with play/cancel buttons and hand management

- Implemented card locking functionality that prevents cards from being dragged after clicking
- Added visual feedback for locked cards (raised position)
- Created Play and Cancel buttons above locked cards to confirm or revert actions
- Implemented game logic for moving cards to player field and returning them to hand
- Enhanced user interaction with proper button handling and state management
- Updated card display system to handle repositioning of remaining hand cards after interactions

index.html

@@ -4,6 +4,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Phaser 3 Card Battle Game</title>
+    <!-- Prevent favicon.ico request that causes errors -->
+    <link rel="icon" href="data:;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChgGA60e6kgAAAABJRU5ErkJggg==" />
     <style>
         body {
             margin: 0;

src/main.js

@@ -239,13 +239,30 @@ function addInteractiveCard(card, xPosition, yPosition, width, height) {
     
     hitArea.on('pointerout', () => {
         // Return the card to its original position
-        if (card.sprite) {
+        if (card.sprite && !card.isLocked) {
             card.sprite.setY(originalY);
         }
-        if (card.text) {
+        if (card.text && !card.isLocked) {
             card.text.setY(originalY - 20);
         }
     });
+    
+    // Add click event to lock the card in place
+    hitArea.on('pointerdown', () => {
+        // Lock the card in its current position
+        card.isLocked = true;
+        
+        // Remove hover effects while locked
+        if (card.sprite) {
+            card.sprite.setY(originalY - 30); // Keep it raised up when locked
+        }
+        if (card.text) {
+            card.text.setY(originalY - 50);
+        }
+        
+        // Create Play and Cancel buttons above the card
+        createCardButtons.call(this, card, xPosition, originalY - 30);
+    });
 }
 
 /**
@@ -255,6 +272,153 @@ function update() {
     // Game logic updates go here
 }
 
+/**
+ * Create Play and Cancel buttons for a locked card
+ */
+function createCardButtons(card, xPosition, yPosition) {
+    const buttonWidth = 60;
+    const buttonHeight = 30;
+    const spacing = 10;
+    
+    // Position the buttons above the card (at yPosition - 40)
+    const playButtonX = xPosition - buttonWidth - spacing / 2; // Left of card
+    const cancelButtonX = xPosition + buttonWidth + spacing / 2; // Right of card
+    const buttonY = yPosition - 40;
+    
+    // Create Play button
+    const playButton = this.add.rectangle(playButtonX, buttonY, buttonWidth, buttonHeight, 0x00ff00); // Green color
+    playButton.setOrigin(0.5);
+    playButton.setInteractive();
+    
+    // Add text to the Play button
+    const playText = this.add.text(playButtonX, buttonY, 'Play', {
+        fontSize: '14px',
+        fill: '#ffffff'
+    });
+    playText.setOrigin(0.5);
+    
+    // Create Cancel button
+    const cancelButton = this.add.rectangle(cancelButtonX, buttonY, buttonWidth, buttonHeight, 0xff0000); // Red color
+    cancelButton.setOrigin(0.5);
+    cancelButton.setInteractive();
+    
+    // Add text to the Cancel button
+    const cancelText = this.add.text(cancelButtonX, buttonY, 'Cancel', {
+        fontSize: '14px',
+        fill: '#ffffff'
+    });
+    cancelText.setOrigin(0.5);
+    
+    // Store references to buttons in the card object
+    card.playButton = playButton;
+    card.cancelButton = cancelButton;
+    card.playButtonText = playText;
+    card.cancelButtonText = cancelText;
+    
+    // Add click events for the buttons
+    playButton.on('pointerdown', () => {
+        // Move the card to the player's field (center of screen)
+        moveCardToField.call(this, card);
+        
+        // Remove buttons and unlock the card
+        removeCardButtons(card);
+    });
+    
+    cancelButton.on('pointerdown', () => {
+        // Return card to original position in hand
+        returnCardToHand.call(this, card);
+        
+        // Remove buttons and unlock the card
+        removeCardButtons(card);
+    });
+}
+
+/**
+ * Move a card to the player's field (center of screen)
+ */
+function moveCardToField(card) {
+    // For now, we'll just 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
+    if (card.sprite) {
+        card.sprite.destroy();
+    }
+    if (card.text) {
+        card.text.destroy();
+    }
+    
+    // Re-display the player's hand to update positions of remaining cards
+    // Clear existing hand display first by removing all sprites and texts
+    this.gameState.playerHand.forEach(handCard => {
+        if (handCard.sprite) {
+            handCard.sprite.destroy();
+        }
+        if (handCard.text) {
+            handCard.text.destroy();
+        }
+    });
+    
+    // Redisplay the updated player's hand at the bottom of the screen
+    displayPlayerHand.call(this);
+}
+
+/**
+ * Return a locked card to its original position in the player's hand
+ */
+function returnCardToHand(card) {
+    // Reset the locked state
+    card.isLocked = false;
+    
+    // Remove buttons and text references from the card object
+    if (card.playButton) {
+        card.playButton.destroy();
+        card.playButtonText.destroy();
+    }
+    if (card.cancelButton) {
+        card.cancelButton.destroy();
+        card.cancelButtonText.destroy();
+    }
+    
+    // Reset positions to original hand position
+    const yPosition = 850; // Original hand position at bottom of screen
+    const originalY = yPosition;
+    
+    if (card.sprite) {
+        card.sprite.setY(originalY);
+    }
+    if (card.text) {
+        card.text.setY(originalY - 20);
+    }
+}
+
+/**
+ * Remove buttons from a locked card
+ */
+function removeCardButtons(card) {
+    // Reset the locked state
+    card.isLocked = false;
+    
+    // Destroy button elements if they exist
+    if (card.playButton) {
+        card.playButton.destroy();
+        card.playButtonText.destroy();
+        delete card.playButton;
+        delete card.playButtonText;
+    }
+    if (card.cancelButton) {
+        card.cancelButton.destroy();
+        card.cancelButtonText.destroy();
+        delete card.cancelButton;
+        delete card.cancelButtonText;
+    }
+}
+
 /**
  * Initialize the game when the page loads
  */