fix(scenes) 种田系统测试，添加按钮等

ui/InventoryUI.js

@@ -220,11 +220,16 @@ export class InventoryUI {
    */
   onItemSpriteClicked(item) {
     console.log('onItemSpriteClicked:', item.name, 'ID:', item.id);
-    if (this.selectedItem && this.selectedItem.id === item.id) {
-      // 如果点击的是已选中的物品，取消选择
-      console.log('点击已选中物品，取消选择:', item.name);
+    // 如果是右键点击，使用物品
+    if (this.scene.input.mousePointer.rightButtonDown()) {
+      console.log('右键点击物品，使用物品:', item.name);
+      this.useItem(item);
+    } else if (this.selectedItem && this.selectedItem.id === item.id) {
+      // 如果是左键点击已选中的物品，取消选择
+      console.log('左键点击已选中物品，取消选择:', item.name);
       this.deselectItem();
     } else {
+      // 如果是左键点击其他物品，选中当前物品
       // 如果已经有选中的物品，先取消选择
       if (this.selectedItem) {
         console.log('已有选中物品，先取消选择:', this.selectedItem.name);
@@ -236,6 +241,46 @@ export class InventoryUI {
     }
   }
   
+  /**
+   * 使用物品
+   * @param {Object} item - 要使用的物品
+   */
+  useItem(item) {
+    console.log('useItem:', item.name, 'ID:', item.id);
+    
+    // 获取当前选中的角色（假设场景中有player属性）
+    const user = this.scene.player;
+    
+    if (user) {
+      console.log('使用物品的角色:', user.name);
+      
+      // 确保物品有场景引用
+      item.scene = this.scene;
+      console.log('DEBUG: 设置物品场景引用:', item.scene ? '成功' : '失败');
+      
+      // 调用物品的useFromInventory方法，从背包中使用物品
+      // 注意：物品的具体使用方法（如useSeed）中会处理从背包移除的逻辑
+      item.useFromInventory(user);
+      
+      // 更新UI，因为物品可能已经被移除
+      this.updateUI();
+      
+      // 对于种子类型的物品，延迟取消选择，避免背包立即关闭导致用户体验不佳
+      // 这样用户可以看到种植模式的变化
+      if (item.type !== 'seed') {
+        // 非种子类型物品，立即取消选择
+        this.deselectItem();
+      } else {
+        // 种子类型物品，延迟取消选择，给用户视觉反馈
+        console.log('种子物品使用后，延迟取消选择');
+        // 不立即取消选择，让用户看到种植模式的变化
+        // 种植模式会在后续操作中自动取消选择
+      }
+    } else {
+      console.log('没有选中的角色，无法使用物品');
+    }
+  }
+  
   /**
    * 物品精灵鼠标按下事件，用于记录点击状态和位置
    * @param {Object} item - 物品
@@ -243,6 +288,15 @@ export class InventoryUI {
    */
   onItemSpriteDown(item, pointer) {
     console.log('onItemSpriteDown:', item.name, '记录点击位置');
+    
+    // 右键点击直接使用物品，不处理选择和拖动
+    if (pointer.rightButtonDown()) {
+      console.log('右键点击物品精灵，使用物品:', item.name);
+      this.useItem(item);
+      return; // 直接返回，不处理后续逻辑
+    }
+    
+    // 左键点击处理选择和拖动
     // 记录点击的物品和位置，用于判断是否开始拖动
     this.clickItem = item;
     this.clickPosition = { x: pointer.x, y: pointer.y };
@@ -251,7 +305,7 @@ export class InventoryUI {
     // 切换选择状态：如果已选中，则取消选择；如果未选中，则选中
     if (this.selectedItem && this.selectedItem.id === item.id) {
       // 如果点击的是已选中物品，取消选择
-      console.log('点击已选中物品精灵，取消选择:', item.name);
+      console.log('左键点击已选中物品精灵，取消选择:', item.name);
       this.deselectItem();
     } else {
       // 如果没有选中物品或点击的是另一个物品，选中当前物品
@@ -642,6 +696,11 @@ export class InventoryUI {
     // 显示选中物品的详情
     this.showItemInfo(item);
     console.log('选中物品:', item.name);
+    
+    // 如果是种子类型的物品，显示使用提示
+    if (item.type === 'seed') {
+      this.scene.events.emit('show-message', `右键点击、按Q键或点击[使用]按钮可以种植种子`);
+    }
   }
   
   /**
@@ -668,7 +727,7 @@ export class InventoryUI {
    */
   showItemInfo(item) {
     // 创建物品信息面板
-    this.itemInfoPanel = this.scene.add.rectangle(0, 0, 200, 100, 0x000000, 0.8);
+    this.itemInfoPanel = this.scene.add.rectangle(0, 0, 200, 150, 0x000000, 0.8);
     this.itemInfoPanel.setOrigin(0, 0);
     this.itemInfoPanel.setStrokeStyle(1, 0xffffff);
     this.itemInfoPanel.setPosition(
@@ -676,6 +735,9 @@ export class InventoryUI {
       this.container.y + this.inventory.height * this.cellSize + 20
     );
     
+    // 设置足够高的深度，确保面板显示在最上层
+    this.itemInfoPanel.setDepth(150);
+    
     // 阻止事件冒泡，防止点击物品信息面板时触发角色移动
     this.itemInfoPanel.setInteractive();
     this.itemInfoPanel.on('pointerdown', (pointer) => {
@@ -694,9 +756,231 @@ export class InventoryUI {
       { font: '12px Arial', fill: '#ffffff', wordWrap: { width: 180 } }
     );
     this.itemInfoText.setScrollFactor(0); // 固定在屏幕上
+    this.itemInfoText.setDepth(160); // 设置比面板更高的深度
+    
+    // 添加"使用"按钮
+    const useButton = this.scene.add.text(
+      this.itemInfoPanel.x + 10,
+      this.itemInfoPanel.y + 90,
+      '[使用]',
+      { font: '14px Arial', fill: '#00ff00' }
+    );
+    useButton.setInteractive({
+      useHandCursor: true
+    });
+    useButton.setDepth(170); // 设置比文本更高的深度
+    
+    // 存储当前物品引用，确保回调函数中this指向正确
+    const currentItem = item;
+    const inventoryUI = this;
+    
+    useButton.on('pointerdown', (pointer) => {
+      console.log('点击使用按钮，使用物品:', currentItem.name);
+      inventoryUI.useItem(currentItem);
+      return false; // 阻止事件冒泡
+    });
+    useButton.on('pointerover', (pointer) => {
+      useButton.setFill('#ffff00');
+      return false; // 阻止事件冒泡
+    });
+    useButton.on('pointerout', (pointer) => {
+      useButton.setFill('#00ff00');
+      return false; // 阻止事件冒泡
+    });
+    useButton.setScrollFactor(0); // 固定在屏幕上
+    
+    // 如果是种子类型的物品，添加"种植/取消种植"按钮
+    // 如果是作物类型的物品，添加"制作种子"按钮
+    let actionButton = null;
+    let buttonX = this.itemInfoPanel.x + 80;
+    let buttonY = this.itemInfoPanel.y + 90;
+    
+    if (item.type === 'seed') {
+      // 检查当前是否处于种植模式
+      const isPlantingMode = this.scene.isPlantingMode || false;
+      const buttonText = isPlantingMode ? '[取消种植]' : '[种植]';
+      const buttonColor = isPlantingMode ? '#ff0000' : '#00ff00';
+      
+      actionButton = this.scene.add.text(
+        buttonX,
+        buttonY,
+        buttonText,
+        { font: '14px Arial', fill: buttonColor }
+      );
+      // 设置足够高的深度，确保按钮可以点击
+      actionButton.setDepth(200);
+      actionButton.setScrollFactor(0); // 固定在屏幕上
+      actionButton.setInteractive({
+        useHandCursor: true,
+        draggable: false,
+        cursor: 'pointer'
+      });
+      
+      // 确保事件监听正确绑定
+      actionButton.removeAllListeners();
+      
+      actionButton.on('pointerdown', (pointer) => {
+        console.log('DEBUG: 种植/取消种植按钮点击事件触发');
+        if (isPlantingMode) {
+          // 如果是种植模式，调用取消种植
+          console.log('点击取消种植按钮，取消种植:', currentItem.name);
+          this.scene.cancelPlantingMode();
+        } else {
+          // 否则，使用种子开始种植
+          console.log('点击种植按钮，使用种子:', currentItem.name);
+          inventoryUI.useItem(currentItem);
+        }
+        return false; // 阻止事件冒泡
+      });
+      actionButton.on('pointerover', (pointer) => {
+        actionButton.setFill('#ffff00');
+        return false; // 阻止事件冒泡
+      });
+      actionButton.on('pointerout', (pointer) => {
+        actionButton.setFill(buttonColor);
+        return false; // 阻止事件冒泡
+      });
+      
+      console.log('DEBUG: 种植/取消种植按钮创建完成，深度:', actionButton.depth);
+    } else if (item.type === 'food' && ['wheat', 'carrot'].includes(item.itemTypeId)) {
+      // 如果是作物类型的物品，添加"制作种子"按钮
+      const buttonText = '[制作种子]';
+      const buttonColor = '#0080ff';
+      
+      actionButton = this.scene.add.text(
+        buttonX,
+        buttonY,
+        buttonText,
+        { font: '14px Arial', fill: buttonColor }
+      );
+      // 设置足够高的深度，确保按钮可以点击
+      actionButton.setDepth(200);
+      actionButton.setScrollFactor(0); // 固定在屏幕上
+      actionButton.setInteractive({
+        useHandCursor: true,
+        draggable: false,
+        cursor: 'pointer'
+      });
+      
+      // 确保事件监听正确绑定
+      actionButton.removeAllListeners();
+      
+      actionButton.on('pointerdown', (pointer) => {
+        console.log('DEBUG: 制作种子按钮点击事件触发');
+        inventoryUI.craftSeeds(currentItem);
+        return false; // 阻止事件冒泡
+      });
+      actionButton.on('pointerover', (pointer) => {
+        actionButton.setFill('#ffff00');
+        return false; // 阻止事件冒泡
+      });
+      actionButton.on('pointerout', (pointer) => {
+        actionButton.setFill(buttonColor);
+        return false; // 阻止事件冒泡
+      });
+      
+      console.log('DEBUG: 制作种子按钮创建完成，深度:', actionButton.depth);
+    }
+    
+    // 存储按钮引用，以便后续销毁
+    this.itemInfoButton = useButton;
+    this.plantButton = actionButton;
     
     this.container.add(this.itemInfoPanel);
     this.container.add(this.itemInfoText);
+    this.container.add(useButton);
+    
+    // 如果有额外按钮（种植/制作种子），添加到容器中
+    if (actionButton) {
+      this.container.add(actionButton);
+    }
+    
+    // 添加拾取按钮
+    const dropButton = this.scene.add.text(
+      this.itemInfoPanel.x + 10,
+      this.itemInfoPanel.y + 115,
+      '[丢弃]',
+      { font: '14px Arial', fill: '#ff0000' }
+    );
+    dropButton.setInteractive({
+      useHandCursor: true
+    });
+    dropButton.setDepth(170); // 设置比文本更高的深度
+    
+    dropButton.on('pointerdown', (pointer) => {
+      console.log('点击丢弃按钮，丢弃物品:', currentItem.name);
+      inventoryUI.dropItem(currentItem);
+      return false; // 阻止事件冒泡
+    });
+    dropButton.on('pointerover', (pointer) => {
+      dropButton.setFill('#ffff00');
+      return false; // 阻止事件冒泡
+    });
+    dropButton.on('pointerout', (pointer) => {
+      dropButton.setFill('#ff0000');
+      return false; // 阻止事件冒泡
+    });
+    dropButton.setScrollFactor(0); // 固定在屏幕上
+    this.container.add(dropButton);
+    
+    // 存储拾取按钮引用，以便后续销毁
+    this.dropButton = dropButton;
+  }
+  
+  /**
+   * 更新种植按钮状态
+   * @param {boolean} isPlanting - 是否处于种植模式
+   */
+  updatePlantButtonState(isPlanting) {
+    // 如果有显示的物品信息且是种子类型，更新按钮状态
+    if (this.itemInfoPanel && this.plantButton) {
+      console.log('DEBUG: updatePlantButtonState 方法被调用，isPlanting:', isPlanting);
+      // 设置足够高的深度，确保按钮可以点击
+      this.plantButton.setDepth(200);
+      // 确保按钮可见
+      this.plantButton.setVisible(true);
+      // 更新按钮文本和颜色
+      this.plantButton.setText(isPlanting ? '[取消种植]' : '[种植]');
+      this.plantButton.setFill(isPlanting ? '#ff0000' : '#00ff00');
+      
+      // 重新绑定点击事件
+      const currentItem = this.selectedItem;
+      const inventoryUI = this;
+      
+      // 移除旧的事件监听器
+      this.plantButton.removeAllListeners();
+      
+      // 确保按钮可以交互
+      this.plantButton.setInteractive({
+        useHandCursor: true,
+        draggable: false,
+        cursor: 'pointer'
+      });
+      
+      // 重新添加事件监听器
+      this.plantButton.on('pointerdown', (pointer) => {
+        console.log('DEBUG: 更新后的种植/取消种植按钮点击事件触发');
+        if (isPlanting) {
+          // 如果是种植模式，调用取消种植
+          console.log('点击取消种植按钮，取消种植:', currentItem.name);
+          inventoryUI.scene.cancelPlantingMode();
+        } else {
+          // 否则，使用种子开始种植
+          console.log('点击种植按钮，使用种子:', currentItem.name);
+          inventoryUI.useItem(currentItem);
+        }
+        return false; // 阻止事件冒泡
+      });
+      this.plantButton.on('pointerover', (pointer) => {
+        this.plantButton.setFill('#ffff00');
+        return false; // 阻止事件冒泡
+      });
+      this.plantButton.on('pointerout', (pointer) => {
+        this.plantButton.setFill(isPlanting ? '#ff0000' : '#00ff00');
+        return false; // 阻止事件冒泡
+      });
+      console.log('DEBUG: 种植/取消种植按钮状态更新完成');
+    }
   }
   
   /**
@@ -706,11 +990,57 @@ export class InventoryUI {
     if (this.itemInfoPanel) {
       this.itemInfoPanel.destroy();
       this.itemInfoText.destroy();
+      if (this.itemInfoButton) {
+        this.itemInfoButton.destroy();
+        this.itemInfoButton = null;
+      }
+      if (this.plantButton) {
+        this.plantButton.destroy();
+        this.plantButton = null;
+      }
+      if (this.dropButton) {
+        this.dropButton.destroy();
+        this.dropButton = null;
+      }
       this.itemInfoPanel = null;
       this.itemInfoText = null;
     }
   }
   
+  /**
+   * 丢弃物品
+   * @param {Object} item - 要丢弃的物品
+   */
+  dropItem(item) {
+    console.log('dropItem:', item.name, 'ID:', item.id);
+    
+    // 从背包中移除物品
+    const removedItem = this.inventory.removeItem(item.id);
+    if (!removedItem) {
+      console.log('无法从背包中移除物品:', item.name);
+      return;
+    }
+    
+    // 获取物品ID和基本信息
+    const itemId = removedItem.itemTypeId || removedItem.id;
+    
+    // 在角色位置创建该物品
+    if (this.scene.itemManager) {
+      const player = this.scene.player;
+      this.scene.itemManager.createItem(itemId, player.x, player.y);
+      console.log('已在角色位置创建丢弃的物品:', removedItem.name);
+    }
+    
+    // 更新UI显示
+    this.updateUI();
+    
+    // 显示丢弃成功消息
+    this.scene.events.emit('show-message', `已丢弃 ${removedItem.name}`);
+    
+    // 取消选择物品
+    this.deselectItem();
+  }
+  
   /**
    * 更新UI显示
    */
@@ -847,6 +1177,84 @@ export class InventoryUI {
     return item;
   }
   
+  /**
+   * 制作种子
+   * @param {Object} item - 要制作种子的作物
+   */
+  craftSeeds(item) {
+    console.log('craftSeeds:', item.name, 'ID:', item.id);
+    
+    // 检查物品是否可以制作种子
+    if (item.type !== 'food' || !['wheat', 'carrot'].includes(item.itemTypeId)) {
+      console.log('该物品不能制作种子:', item.name);
+      return;
+    }
+    
+    // 从背包中移除作物
+    const removedItem = this.inventory.removeItem(item.id);
+    if (!removedItem) {
+      console.log('无法从背包中移除作物:', item.name);
+      return;
+    }
+    
+    // 制作种子数量（1个作物制作2个种子）
+    const seedsCount = 2;
+    
+    // 获取对应作物的种子ID
+    const seedId = `${item.itemTypeId}_seed`;
+    
+    // 使用ItemManager创建种子物品
+    if (this.scene.itemManager) {
+      let successfullyAdded = 0;
+      let seedsToDrop = [];
+      
+      // 先创建所有种子
+      for (let i = 0; i < seedsCount; i++) {
+        // 创建种子物品
+        const seedItem = this.scene.itemManager.createItem(seedId, 0, 0);
+        if (seedItem) {
+          // 尝试将种子添加到背包
+          const success = this.inventory.addItem(seedItem);
+          if (success) {
+            successfullyAdded++;
+          } else {
+            // 如果背包空间不足，将种子添加到待丢弃列表
+            seedsToDrop.push(seedItem);
+          }
+        }
+      }
+      
+      // 如果背包空间不足，将无法放入背包的种子放到地图上
+      if (seedsToDrop.length > 0 && this.scene.player) {
+        const player = this.scene.player;
+        seedsToDrop.forEach(seedItem => {
+          // 设置种子位置为玩家位置
+          seedItem.x = player.x;
+          seedItem.y = player.y;
+          // 确保种子被正确添加到场景中
+          this.scene.add.existing(seedItem);
+          console.log('背包空间不足，已将种子放到地图上:', seedItem.name);
+        });
+      }
+      
+      // 更新UI显示
+      this.updateUI();
+      
+      // 显示制作成功消息
+      let message = `成功制作了${successfullyAdded}个${seedId.replace('_seed', '')}种子`;
+      if (seedsToDrop.length > 0) {
+        message += `，${seedsToDrop.length}个种子因背包空间不足已放到地上`;
+      }
+      this.scene.events.emit('show-message', message);
+      
+      console.log(`成功制作了${successfullyAdded}个${seedId.replace('_seed', '')}种子，${seedsToDrop.length}个种子放到了地上`);
+    } else {
+      console.log('场景中没有ItemManager，无法制作种子');
+      // 如果无法制作种子，将作物归还
+      this.inventory.addItem(item);
+    }
+  }
+  
   /**
    * 销毁背包UI
    */