feat(minimap) 添加单角色锁定按钮

ui/MiniMap.js

@@ -1,4 +1,5 @@
 // ui/MiniMap.js
+import { selectedUnits, setCameraLocked, cameraLocked } from '../systems/ControlMode.js';
 
 export class MiniMap {
   constructor(scene, options = {}) {
@@ -30,6 +31,11 @@ export class MiniMap {
     // 创建单位标记数组
     this.unitMarkers = [];
     
+    // 锁定按钮相关属性
+    this.lockButton = null;
+    this.lockButtonText = null;
+    this.lockHint = null;
+    
     // 设置交互
     this.setupInteractions();
     
@@ -72,7 +78,145 @@ export class MiniMap {
     this.scene.cameras.main.centerOn(worldX, worldY);
   }
   
+  createLockButton() {
+    // 移除旧的按钮（如果存在）
+    this.destroyLockButton();
+    
+    // 创建锁定按钮背景，直接添加到场景中
+    const buttonX = this.x; // 按钮x坐标与小地图对齐
+    const buttonY = this.y + this.mapSize + 5; // 按钮位于小地图下方
+    
+    this.lockButton = this.scene.add.rectangle(buttonX, buttonY, 100, 25, 0x444444, 0.8);
+    this.lockButton.setOrigin(0, 0);
+    this.lockButton.setStrokeStyle(1, 0xffffff, 0.8);
+    this.lockButton.setInteractive(); // 使用默认的点击区域
+    this.lockButton.setScrollFactor(0, 0); // 固定在屏幕上
+    
+    // 创建锁定按钮文本，直接添加到场景中
+    this.lockButtonText = this.scene.add.text(buttonX + 5, buttonY + 6, '锁定角色', {
+      fontSize: '12px',
+      fill: '#ffffff',
+      fontFamily: 'Arial'
+    });
+    this.lockButtonText.setOrigin(0, 0);
+    this.lockButtonText.setScrollFactor(0, 0); // 固定在屏幕上
+    
+    // 添加按钮点击事件
+    this.lockButton.on('pointerdown', () => {
+      console.log('锁定按钮被点击'); // 添加调试日志
+      this.toggleLock();
+    });
+    
+    // 添加悬停效果
+    this.lockButton.on('pointerover', () => {
+      this.lockButton.setFillStyle(cameraLocked ? 0x22ff22 : 0x666666, 0.8);
+    });
+    
+    this.lockButton.on('pointerout', () => {
+      this.lockButton.setFillStyle(cameraLocked ? 0x00ff00 : 0x444444, 0.8);
+    });
+    
+    // 初始隐藏按钮
+    this.lockButton.setVisible(false);
+    this.lockButtonText.setVisible(false);
+  }
+  
+  // 销毁锁定按钮
+  destroyLockButton() {
+    if (this.lockButton) {
+      this.lockButton.destroy();
+      this.lockButton = null;
+    }
+    if (this.lockButtonText) {
+      this.lockButtonText.destroy();
+      this.lockButtonText = null;
+    }
+  }
+  
+  toggleLock() {
+    // 切换锁定状态
+    const newLockedState = !cameraLocked;
+    // 更新全局锁定状态
+    setCameraLocked(newLockedState);
+    
+    this.updateLockButton();
+    
+    // 立即将相机中心绑定到选中角色
+    if (newLockedState && selectedUnits.length === 1) {
+      const selectedUnit = selectedUnits[0];
+      this.scene.cameras.main.centerOn(selectedUnit.x, selectedUnit.y);
+      // 添加锁定提示
+      this.showLockHint(newLockedState);
+    } else {
+      // 移除锁定提示
+      this.hideLockHint();
+    }
+  }
+  
+  updateLockButton() {
+    if (selectedUnits.length === 1) {
+      // 如果按钮不存在，创建按钮
+      if (!this.lockButton) {
+        this.createLockButton();
+      }
+      
+      // 更新按钮状态
+      this.lockButton.setVisible(true);
+      this.lockButtonText.setVisible(true);
+      this.lockButtonText.setText(cameraLocked ? '取消锁定' : '锁定角色');
+      this.lockButton.setFillStyle(cameraLocked ? 0x00ff00 : 0x444444, 0.8);
+    } else {
+      // 销毁按钮
+      this.destroyLockButton();
+      // 移除锁定提示
+      this.hideLockHint();
+    }
+  }
+  
+  // 添加锁定提示
+  showLockHint(locked) {
+    // 如果已经有提示，先移除
+    this.hideLockHint();
+    
+    // 创建提示文本
+    this.lockHint = this.scene.add.text(this.scene.sys.game.config.width / 2, 50, 
+      locked ? '已锁定相机到选中角色' : '已取消相机锁定', {
+      fontSize: '16px',
+      fill: '#ffffff',
+      fontFamily: 'Arial',
+      backgroundColor: 'rgba(0, 0, 0, 0.7)',
+      padding: {
+        x: 10,
+        y: 5
+      }
+    });
+    this.lockHint.setOrigin(0.5, 0.5);
+    this.lockHint.setScrollFactor(0, 0); // 固定在屏幕上
+    
+    // 3秒后自动隐藏
+    this.scene.time.delayedCall(3000, () => {
+      this.hideLockHint();
+    }, [], this);
+  }
+  
+  // 移除锁定提示
+  hideLockHint() {
+    if (this.lockHint) {
+      this.lockHint.destroy();
+      this.lockHint = null;
+    }
+  }
+  
   update() {
+    // 更新锁定按钮状态
+    this.updateLockButton();
+    
+    // 如果锁定状态且只有一个选中角色，将相机中心绑定到该角色
+    if (cameraLocked && selectedUnits.length === 1) {
+      const selectedUnit = selectedUnits[0];
+      this.scene.cameras.main.centerOn(selectedUnit.x, selectedUnit.y);
+    }
+    
     // 更新视口指示器位置和大小
     this.updateViewport();
     
@@ -116,8 +260,15 @@ export class MiniMap {
         const mapX = (unit.x + this.worldSize) * this.scale;
         const mapY = (unit.y + this.worldSize) * this.scale;
         
+        // 检查单位是否被选中
+        const isSelected = selectedUnits.includes(unit);
+        
+        // 根据选中状态设置不同的颜色和大小
+        const color = isSelected ? 0x00ff00 : 0xff0000;
+        const size = isSelected ? 3 : 2;
+        
         // 创建单位标记
-        const marker = this.scene.add.circle(mapX, mapY, 2, 0xff0000, 1);
+        const marker = this.scene.add.circle(mapX, mapY, size, color, 1);
         marker.setOrigin(0.5, 0.5);
         
         // 将标记添加到容器和数组中