Implement turn-based gameplay with phase control and interactive card restrictions

This commit introduces a comprehensive turn-based system that controls when players can interact with cards. The changes include:

- Adding turnPhase state tracking with draw, player_play, and cpu_play phases
- Setting initial turn phase to player_play for proper game flow
- Implementing conditional logic in card interaction handlers (hover, click)
- Restricting all interactive card behaviors to only occur during the player's turn phase
- Updating documentation comments to reflect the new turn-based control system

These changes establish the foundation for a structured gameplay sequence where players can only play cards during their designated turn phase, preventing actions outside of proper game flow.

src/main.js

@@ -142,7 +142,7 @@ function create() {
         playerField: [],
         opponentField: [],
         selectedCard: null,
-        turnPhase: 'draw',
+        turnPhase: 'draw', // Possible phases: draw, player_play, cpu_play
         currentPlayer: 'player'
     };
     
@@ -168,6 +168,9 @@ function create() {
     // Display the opponent's hand at the top of the screen (face down)
     displayOpponentHand.call(this);
     
+    // Set initial turn phase to player play
+    this.gameState.turnPhase = 'player_play';
+    
     console.log('Game scene created successfully');
 }
 
@@ -286,7 +289,7 @@ function displayOpponentHand() {
 }
 
 /**
- * Make a single card interactive with hover effects
+ * Make a single card interactive with hover effects and turn-based control
  */
 function addInteractiveCard(card, xPosition, yPosition, width, height) {
     const originalY = yPosition;
@@ -298,6 +301,11 @@ function addInteractiveCard(card, xPosition, yPosition, width, height) {
     
     // Add event listeners for hover effects
     hitArea.on('pointerover', () => {
+        // Only allow hover effects if it's the player's turn and phase
+        if (this.gameState.currentPlayer !== 'player' || this.gameState.turnPhase !== 'player_play') {
+            return;
+        }
+        
         // 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) {
@@ -322,6 +330,11 @@ function addInteractiveCard(card, xPosition, yPosition, width, height) {
     });
     
     hitArea.on('pointerout', () => {
+        // Only allow hover effects if it's the player's turn and phase
+        if (this.gameState.currentPlayer !== 'player' || this.gameState.turnPhase !== 'player_play') {
+            return;
+        }
+        
         // 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) {
@@ -347,6 +360,11 @@ function addInteractiveCard(card, xPosition, yPosition, width, height) {
     
     // Add click event to lock the card in place
     hitArea.on('pointerdown', () => {
+        // Only allow clicking if it's the player's turn and phase
+        if (this.gameState.currentPlayer !== 'player' || this.gameState.turnPhase !== 'player_play') {
+            return;
+        }
+        
         // Only allow clicking if the card is in hand (not already on field)
         const isInHand = this.gameState.playerHand.includes(card);
         if (isInHand) {