fix boss tank cross brick

2026-06-07 22:08:00 +08:00
parent c3a4aa8f15
commit e4140f073f
29 changed files with 2689 additions and 1240 deletions
@@ -102,6 +102,7 @@ const TANK_CONFIG = {
    hp: 6,
    color: '#8B0000', // dark red
    size: TILE_SIZE * 1.2,
+    colliderSize: TILE_SIZE * 0.85,
    score: 500,
  },
 };
@@ -172,6 +173,7 @@ const SCENE = {
  TEAM_ROOM: 'team_room',
  TEAM_GAME: 'team_game',
  TEAM_RESULT: 'team_result',
+  TEAM_2V2_ROOM: 'team_2v2_room',
  CHAT_ROOM: 'chat_room',
 };

@@ -182,6 +184,7 @@ const GAME_MODE = {
  CLASSIC: 'classic',
  ENDLESS: 'endless',
  PVP: 'pvp',
+  TEAM_2V2: 'team_2v2',
  TEAM_3V3: 'team_3v3',
 };

@@ -221,6 +224,13 @@ const BATTLE_CONFIG = {
    fillWithBots: false,
    mapPool: 'pvp',
  },
+  '2v2': {
+    teamSize: 2,
+    baseHp: 8,
+    respawnDelay: TEAM_RESPAWN_DELAY,
+    fillWithBots: true,
+    mapPool: 'team',
+  },
  '3v3': {
    teamSize: 3,
    baseHp: TEAM_BASE_HP,
@@ -45,6 +45,7 @@ class BotTank extends Tank {
      hp: cfg.hp,
      color: params.color || (params.team === 'A' ? '#4A90D9' : '#E94560'),
      size: cfg.size,
+      colliderSize: cfg.colliderSize || cfg.size,
      direction: params.team === 'A' ? DIRECTION.RIGHT : DIRECTION.LEFT,
    });

@@ -215,10 +216,10 @@ class BotTank extends Tank {
      const vec = DIR_VECTORS[dir];
      const testX = this.x + vec.dx * TILE_SIZE;
      const testY = this.y + vec.dy * TILE_SIZE;
-      const left = testX - this.halfSize;
-      const top = testY - this.halfSize;
+      const left = testX - this.colliderHalfSize;
+      const top = testY - this.colliderHalfSize;

-      if (mapManager && !mapManager.rectCollidesWithTerrain(left, top, this.size, this.size)) {
+      if (mapManager && !mapManager.rectCollidesWithTerrain(left, top, this.colliderSize, this.colliderSize)) {
        this.direction = dir;
        return;
      }
@@ -45,6 +45,7 @@ class EnemyTank extends Tank {
      hp: cfg.hp,
      color: cfg.color,
      size: cfg.size,
+      colliderSize: cfg.colliderSize || cfg.size,
      direction: DIRECTION.DOWN,
    });

@@ -176,10 +177,10 @@ class EnemyTank extends Tank {
      const vec = DIR_VECTORS[dir];
      const testX = this.x + vec.dx * TILE_SIZE;
      const testY = this.y + vec.dy * TILE_SIZE;
-      const left = testX - this.halfSize;
-      const top = testY - this.halfSize;
+      const left = testX - this.colliderHalfSize;
+      const top = testY - this.colliderHalfSize;

-      if (!mapManager.rectCollidesWithTerrain(left, top, this.size, this.size)) {
+      if (!mapManager.rectCollidesWithTerrain(left, top, this.colliderSize, this.colliderSize)) {
        this.direction = dir;
        return;
      }
@@ -38,8 +38,11 @@ class Tank {
    this.alive = true;
    this.visible = true;

+    // Collision size (can differ from visual size for large tanks like Boss)
+    this.colliderSize = config.colliderSize || this.size;
    // Half-size for collision calculations
    this.halfSize = this.size / 2;
+    this.colliderHalfSize = this.colliderSize / 2;
  }

  /**
@@ -70,10 +73,10 @@ class Tank {

    // Clamp to map boundaries instead of rejecting movement entirely.
    // This allows the tank to slide along the edge smoothly.
-    const minX = MAP_OFFSET_X + this.halfSize;
-    const minY = MAP_OFFSET_Y + this.halfSize;
-    const maxX = MAP_OFFSET_X + MAP_WIDTH - this.halfSize;
-    const maxY = MAP_OFFSET_Y + MAP_HEIGHT - this.halfSize;
+    const minX = MAP_OFFSET_X + this.colliderHalfSize;
+    const minY = MAP_OFFSET_Y + this.colliderHalfSize;
+    const maxX = MAP_OFFSET_X + MAP_WIDTH - this.colliderHalfSize;
+    const maxY = MAP_OFFSET_Y + MAP_HEIGHT - this.colliderHalfSize;

    newX = Math.max(minX, Math.min(newX, maxX));
    newY = Math.max(minY, Math.min(newY, maxY));
@@ -84,11 +87,11 @@ class Tank {
    }

    // Calculate bounding box at clamped position
-    const left = newX - this.halfSize;
-    const top = newY - this.halfSize;
+    const left = newX - this.colliderHalfSize;
+    const top = newY - this.colliderHalfSize;

    // Terrain collision check
-    if (mapManager && mapManager.rectCollidesWithTerrain(left, top, this.size, this.size)) {
+    if (mapManager && mapManager.rectCollidesWithTerrain(left, top, this.colliderSize, this.colliderSize)) {
      // Try to align to grid for smoother movement along walls
      return this._tryAlignedMove(dir, dt, mapManager);
    }
@@ -107,10 +110,10 @@ class Tank {
   */
  _snapToGrid(oldDir) {
    const halfTile = TILE_SIZE / 2;
-    const minX = MAP_OFFSET_X + this.halfSize;
-    const minY = MAP_OFFSET_Y + this.halfSize;
-    const maxX = MAP_OFFSET_X + MAP_WIDTH - this.halfSize;
-    const maxY = MAP_OFFSET_Y + MAP_HEIGHT - this.halfSize;
+    const minX = MAP_OFFSET_X + this.colliderHalfSize;
+    const minY = MAP_OFFSET_Y + this.colliderHalfSize;
+    const maxX = MAP_OFFSET_X + MAP_WIDTH - this.colliderHalfSize;
+    const maxY = MAP_OFFSET_Y + MAP_HEIGHT - this.colliderHalfSize;

    if (oldDir === DIRECTION.UP || oldDir === DIRECTION.DOWN) {
      // Was moving vertically → snap Y to nearest grid-cell center
@@ -146,6 +149,8 @@ class Tank {
    const moveAmount = this.speed * dt * 60;
    const vec = DIR_VECTORS[dir];
    const halfTile = TILE_SIZE / 2;
+    const colliderHS = this.colliderHalfSize;
+    const colliderS = this.colliderSize;

    if (dir === DIRECTION.UP || dir === DIRECTION.DOWN) {
      // Moving vertically but blocked — try to slide horizontally into a gap
@@ -164,14 +169,14 @@ class Tank {
          // Check whether moving in the desired direction would be clear at this aligned X
          const testX = alignedX;
          const testY = this.y + vec.dy * moveAmount;
-          const left = testX - this.halfSize;
-          const top = testY - this.halfSize;
+          const left = testX - colliderHS;
+          const top = testY - colliderHS;
          if (
            left >= MAP_OFFSET_X &&
            top >= MAP_OFFSET_Y &&
-            left + this.size <= MAP_OFFSET_X + MAP_WIDTH &&
-            top + this.size <= MAP_OFFSET_Y + MAP_HEIGHT &&
-            !mapManager.rectCollidesWithTerrain(left, top, this.size, this.size)
+            left + colliderS <= MAP_OFFSET_X + MAP_WIDTH &&
+            top + colliderS <= MAP_OFFSET_Y + MAP_HEIGHT &&
+            !mapManager.rectCollidesWithTerrain(left, top, colliderS, colliderS)
          ) {
            candidates.push({ alignedX, diffX: Math.abs(diffX) });
          }
@@ -186,7 +191,7 @@ class Tank {
        const slideAmount = Math.min(Math.abs(diffX), moveAmount);
        this.x += Math.sign(diffX) * slideAmount;
        // Clamp to map bounds after sliding
-        this.x = Math.max(MAP_OFFSET_X + this.halfSize, Math.min(this.x, MAP_OFFSET_X + MAP_WIDTH - this.halfSize));
+        this.x = Math.max(MAP_OFFSET_X + colliderHS, Math.min(this.x, MAP_OFFSET_X + MAP_WIDTH - colliderHS));
        return false;
      }

@@ -198,7 +203,7 @@ class Tank {
        const slideAmount = Math.min(Math.abs(diffX), moveAmount);
        this.x += Math.sign(diffX) * slideAmount;
        // Clamp to map bounds after sliding
-        this.x = Math.max(MAP_OFFSET_X + this.halfSize, Math.min(this.x, MAP_OFFSET_X + MAP_WIDTH - this.halfSize));
+        this.x = Math.max(MAP_OFFSET_X + colliderHS, Math.min(this.x, MAP_OFFSET_X + MAP_WIDTH - colliderHS));
      }
    } else {
      // Moving horizontally but blocked — try to slide vertically into a gap
@@ -214,14 +219,14 @@ class Tank {
        if (Math.abs(diffY) < TILE_SIZE * 0.55) {
          const testX = this.x + vec.dx * moveAmount;
          const testY = alignedY;
-          const left = testX - this.halfSize;
-          const top = testY - this.halfSize;
+          const left = testX - colliderHS;
+          const top = testY - colliderHS;
          if (
            left >= MAP_OFFSET_X &&
            top >= MAP_OFFSET_Y &&
-            left + this.size <= MAP_OFFSET_X + MAP_WIDTH &&
-            top + this.size <= MAP_OFFSET_Y + MAP_HEIGHT &&
-            !mapManager.rectCollidesWithTerrain(left, top, this.size, this.size)
+            left + colliderS <= MAP_OFFSET_X + MAP_WIDTH &&
+            top + colliderS <= MAP_OFFSET_Y + MAP_HEIGHT &&
+            !mapManager.rectCollidesWithTerrain(left, top, colliderS, colliderS)
          ) {
            candidates.push({ alignedY, diffY: Math.abs(diffY) });
          }
@@ -235,7 +240,7 @@ class Tank {
        const slideAmount = Math.min(Math.abs(diffY), moveAmount);
        this.y += Math.sign(diffY) * slideAmount;
        // Clamp to map bounds after sliding
-        this.y = Math.max(MAP_OFFSET_Y + this.halfSize, Math.min(this.y, MAP_OFFSET_Y + MAP_HEIGHT - this.halfSize));
+        this.y = Math.max(MAP_OFFSET_Y + colliderHS, Math.min(this.y, MAP_OFFSET_Y + MAP_HEIGHT - colliderHS));
        return false;
      }

@@ -247,7 +252,7 @@ class Tank {
        const slideAmount = Math.min(Math.abs(diffY), moveAmount);
        this.y += Math.sign(diffY) * slideAmount;
        // Clamp to map bounds after sliding
-        this.y = Math.max(MAP_OFFSET_Y + this.halfSize, Math.min(this.y, MAP_OFFSET_Y + MAP_HEIGHT - this.halfSize));
+        this.y = Math.max(MAP_OFFSET_Y + colliderHS, Math.min(this.y, MAP_OFFSET_Y + MAP_HEIGHT - colliderHS));
      }
    }

@@ -370,10 +375,10 @@ class Tank {
   */
  getBounds() {
    return {
-      x: this.x - this.halfSize,
-      y: this.y - this.halfSize,
-      w: this.size,
-      h: this.size,
+      x: this.x - this.colliderHalfSize,
+      y: this.y - this.colliderHalfSize,
+      w: this.colliderSize,
+      h: this.colliderSize,
    };
  }

@@ -21,15 +21,24 @@ module.exports = {
  // Menu Scene
  // ============================================================
  'menu.title': 'Tank Adventure',
-  'menu.subtitle': 'TANK WAR',
-  'menu.classic': 'Classic',
-  'menu.endless': 'Endless',
-  'menu.pvp': 'PVP',
-  'menu.team3v3': '3v3 Battle',
+  'menu.subtitle': 'TANK WAR · Battle with Friends',
+  'menu.classic': 'Classic Mode',
+  'menu.classic.sub': 'Classic tank battle',
+  'menu.endless': 'Endless Mode',
+  'menu.endless.sub': 'Push your limits',
+  'menu.pvp': '1v1 Duel',
+  'menu.pvp.sub': 'Winner Takes All.',
+  'menu.team2v2': '2v2 Brawl',
+  'menu.team2v2.sub': 'Co-op strategy wins',
+  'menu.team3v3': '3v3 Team Battle',
+  'menu.team3v3.sub': 'Teamwork dominates the battlefield',
  'menu.shop': 'Shop',
  'menu.skin': 'Skins',
+  'menu.skin.sub': 'Many skins to choose from',
  'menu.ranking': 'Ranking',
+  'menu.ranking.sub': 'Climb the leaderboard',
  'menu.settings': 'Settings',
+  'menu.settings.sub': 'Customize your experience',
  'menu.chat': 'Chat',
  'menu.tapToAuth': 'Tap to authorize',

@@ -47,6 +56,33 @@ module.exports = {
  'room.starting': 'Game starting...',
  'room.tapBack': 'Tap anywhere to go back',

+  // ============================================================
+  // Team 2v2 Room Scene
+  // ============================================================
+  'team2v2Room.title': '2v2 Brawl',
+  'team2v2Room.chooseMode': 'Choose how to play',
+  'team2v2Room.createTeam': '🎮 Create Team',
+  'team2v2Room.soloMatch': '⚡ Quick Match',
+  'team2v2Room.teamId': 'Team: {id}',
+  'team2v2Room.leader': 'Leader',
+  'team2v2Room.ready': '✓ Ready',
+  'team2v2Room.notReady': 'Not Ready',
+  'team2v2Room.emptySlot': 'Empty',
+  'team2v2Room.invite': '📨 Invite',
+  'team2v2Room.startMatch': '🔍 Start Match',
+  'team2v2Room.disband': 'Disband',
+  'team2v2Room.readyBtn': '✓ Ready',
+  'team2v2Room.cancelReady': 'Cancel Ready',
+  'team2v2Room.leaveTeam': 'Leave Team',
+  'team2v2Room.matching': 'Matching{dots}',
+  'team2v2Room.waitTime': 'Waited {seconds}s',
+  'team2v2Room.cancelMatch': 'Cancel Match',
+  'team2v2Room.matchFound': 'Match found!',
+  'team2v2Room.enterBattle': 'Entering battle...',
+  'team2v2Room.tapBack': 'Tap anywhere to go back',
+  'team2v2Room.shareTitle': 'Tank 2v2, join the brawl!',
+  'team2v2Room.joining': 'Joining room',
+
  // ============================================================
  // Team Room Scene (3v3)
  // ============================================================
@@ -295,6 +331,7 @@ module.exports = {
  // Daily Gold
  // ============================================================
  'dailyGold.btn': '🪙 Get Gold',
+  'dailyGold.desc': 'Daily reward',
  'dailyGold.remaining': '{remaining}/3',
  'dailyGold.exhausted': 'Come back tomorrow',
  'dailyGold.reward': '+100 Gold!',
@@ -21,22 +21,31 @@ module.exports = {
  // Menu Scene
  // ============================================================
  'menu.title': '坦克探险',
-  'menu.subtitle': '经典坦克对战',
+  'menu.subtitle': '经典坦克对战 · 兄弟集结开黑',
  'menu.classic': '经典模式',
+  'menu.classic.sub': '经典坦克对战',
  'menu.endless': '无尽模式',
-  'menu.pvp': '双人对战',
-  'menu.team3v3': '3v3 对战',
+  'menu.endless.sub': '挑战极限，突破自我',
+  'menu.pvp': '1v1 决斗',
+  'menu.pvp.sub': '单挑对决，谁与争锋',
+  'menu.team2v2': '2v2 激斗',
+  'menu.team2v2.sub': '双人协作，策略制胜',
+  'menu.team3v3': '3v3 团战',
+  'menu.team3v3.sub': '团队协作，称霸战场',
  'menu.shop': '商店',
  'menu.skin': '皮肤',
+  'menu.skin.sub': '多款皮肤任你选',
  'menu.ranking': '排行榜',
+  'menu.ranking.sub': '冲击榜单，赢取荣誉',
  'menu.settings': '设置',
+  'menu.settings.sub': '个性设置，畅快体验',
  'menu.chat': '聊天室',
  'menu.tapToAuth': '点击授权头像',

  // ============================================================
  // Room Scene (PVP)
  // ============================================================
-  'room.title': '双人对战',
+  'room.title': '1v1决斗',
  'room.connecting': '连接中{dots}',
  'room.roomCode': '房间号：',
  'room.waiting': '等待对手加入{dots}',
@@ -47,6 +56,33 @@ module.exports = {
  'room.starting': '即将开始...',
  'room.tapBack': '点击任意位置返回',

+  // ============================================================
+  // Team 2v2 Room Scene
+  // ============================================================
+  'team2v2Room.title': '2v2 激斗',
+  'team2v2Room.chooseMode': '选择游戏方式',
+  'team2v2Room.createTeam': '🎮 组队开黑',
+  'team2v2Room.soloMatch': '⚡ 快速匹配',
+  'team2v2Room.teamId': '队伍：{id}',
+  'team2v2Room.leader': '队长',
+  'team2v2Room.ready': '✓ 已准备',
+  'team2v2Room.notReady': '未准备',
+  'team2v2Room.emptySlot': '空位',
+  'team2v2Room.invite': '📨 邀请好友',
+  'team2v2Room.startMatch': '🔍 开始匹配',
+  'team2v2Room.disband': '解散队伍',
+  'team2v2Room.readyBtn': '✓ 准备',
+  'team2v2Room.cancelReady': '取消准备',
+  'team2v2Room.leaveTeam': '退出队伍',
+  'team2v2Room.matching': '匹配中{dots}',
+  'team2v2Room.waitTime': '已等待 {seconds} 秒',
+  'team2v2Room.cancelMatch': '取消匹配',
+  'team2v2Room.matchFound': '对手已找到！',
+  'team2v2Room.enterBattle': '即将进入战斗...',
+  'team2v2Room.tapBack': '点击任意位置返回',
+  'team2v2Room.shareTitle': '坦克2v2，速来开黑！',
+  'team2v2Room.joining': '正在加入房间',
+
  // ============================================================
  // Team Room Scene (3v3)
  // ============================================================
@@ -295,6 +331,7 @@ module.exports = {
  // Daily Gold
  // ============================================================
  'dailyGold.btn': '🪙 领金币',
+  'dailyGold.desc': '每日领取奖励',
  'dailyGold.remaining': '{remaining}/3',
  'dailyGold.exhausted': '明日再来',
  'dailyGold.reward': '+100 金币！',
@@ -262,7 +262,7 @@ class CollisionManager {
   * @private
   */
  _isPositionValid(tank, x, y) {
-    const hs = tank.halfSize;
+    const hs = tank.colliderHalfSize;
    const left = x - hs;
    const top = y - hs;
    const right = x + hs;
@@ -279,7 +279,7 @@ class CollisionManager {
    }

    // Terrain collision check
-    if (this._map.rectCollidesWithTerrain(left, top, tank.size, tank.size)) {
+    if (this._map.rectCollidesWithTerrain(left, top, tank.colliderSize, tank.colliderSize)) {
      return false;
    }

@@ -46,6 +46,10 @@ class NetworkManager {

    // Generate a unique player ID
    this._playerId = this._generatePlayerId();
+
+    // Connection mutex: queue of pending connect() callers
+    /** @type {Array<{resolve: Function, timeoutMs: number}>} */
+    this._connectQueue = [];
  }

  /**
@@ -56,8 +60,15 @@ class NetworkManager {
   */
  connect(serverUrl, timeoutMs = 10000) {
    return new Promise((resolve) => {
-      if (this._connected || this._connecting) {
-        resolve(this._connected);
+      // If already connected, resolve immediately
+      if (this._connected) {
+        resolve(true);
+        return;
+      }
+
+      // If another connect() is in progress, queue this one and wait
+      if (this._connecting) {
+        this._connectQueue.push({ resolve, timeoutMs });
        return;
      }

@@ -85,6 +96,13 @@ class NetworkManager {
          console.warn('[NetworkManager] connect() failed:', reason || 'unknown');
        }
        resolve(ok);
+
+        // Resolve all queued connect() calls with the same result
+        const queue = this._connectQueue;
+        this._connectQueue = [];
+        for (const pending of queue) {
+          pending.resolve(ok);
+        }
      };

      // Connection timeout guard (e.g. DNS/TLS hang on cellular).
@@ -96,7 +114,6 @@ class NetworkManager {
        this._ws = wx.connectSocket({
          url: serverUrl,
          header: { 'content-type': 'application/json' },
-          // Surface wx.connectSocket API-level failures (invalid url / domain not whitelisted / etc.)
          success: (res) => { console.log('[NetworkManager] wx.connectSocket invoked:', res && res.errMsg); },
          fail: (err) => {
            console.error('[NetworkManager] wx.connectSocket API failed:', JSON.stringify(err));
@@ -119,16 +136,13 @@ class NetworkManager {
        });

        this._ws.onError((err) => {
-          // Log as much context as possible; wx error objects vary across platforms.
          console.error('[NetworkManager] WebSocket error:',
            (err && (err.errMsg || err.message)) || err,
            'url=', serverUrl);
          this._emit('error', err);
-          // If the error arrives before we ever got onOpen, treat it as a connect failure.
          if (!this._connected) {
            finish(false, `onError before open: ${err && (err.errMsg || err.message)}`);
          } else {
-            // Runtime error on an established connection — let onClose handle reconnection.
            this._connecting = false;
          }
        });
@@ -144,13 +158,11 @@ class NetworkManager {
          this._stopHeartbeat();
          this._emit('disconnected', { code, reason });

-          // If onClose arrives before onOpen, this is a connect failure.
          if (!wasConnected) {
            finish(false, `onClose before open: code=${code} reason=${reason}`);
            return;
          }

-          // Auto-reconnect only for drops on an already-established connection.
          if (this._shouldReconnect && this._reconnectAttempts < this._maxReconnectAttempts) {
            this._attemptReconnect();
          }
@@ -183,6 +195,13 @@ class NetworkManager {
    this._connecting = false;
    this._roomId = null;
    this._playerSlot = 0;
+
+    // Clear connect queue
+    const queue = this._connectQueue;
+    this._connectQueue = [];
+    for (const pending of queue) {
+      pending.resolve(false);
+    }
  }

  /**
@@ -272,10 +291,12 @@ class NetworkManager {

  /**
   * Create a new team for 3v3 mode.
+   * @param {string} [battleMode='3v3'] - Battle mode ('1v1', '2v2', '3v3').
   */
-  createTeam() {
+  createTeam(battleMode = '3v3') {
    this.send(NET_MSG.CREATE_TEAM, {
      playerId: this._playerId,
+      battleMode,
    });
  }

@@ -350,10 +371,12 @@ class NetworkManager {

  /**
   * Start solo matchmaking for 3v3.
+   * @param {string} [battleMode='3v3'] - Battle mode ('1v1', '2v2', '3v3').
   */
-  soloMatch() {
+  soloMatch(battleMode = '3v3') {
    this.send(NET_MSG.SOLO_MATCH, {
      playerId: this._playerId,
+      battleMode,
    });
  }

@@ -11,6 +11,8 @@ class ShareManager {
      imageUrl: '',
      query: '',
    };
+    // Cached temp file path from last canvas capture
+    this._cachedImageUrl = '';

    // Register share menu and callback ONCE at startup.
    // The callback reads this._shareContent dynamically so it always
@@ -28,7 +30,7 @@ class ShareManager {
            console.log('[ShareManager] onShareAppMessage callback, query:', this._shareContent.query);
            return {
              title: this._shareContent.title || '坦克大战 - 一起来战斗吧！',
-              imageUrl: this._shareContent.imageUrl || '',
+              imageUrl: this._shareContent.imageUrl || this._cachedImageUrl || '',
              query: this._shareContent.query || '',
            };
          });
@@ -39,6 +41,137 @@ class ShareManager {
    }
  }

+  /**
+   * Generate a share image from the current game canvas.
+   * Outputs a 5:4 portrait-ratio image so WeChat's share card shows
+   * the full screen without cropping.
+   *
+   * Strategy:
+   *  1. Try offscreen canvas redraw (ideal — contain-fit into 5:4)
+   *  2. Fallback: direct capture with portrait dest dimensions
+   *
+   * @param {function} [callback] - Called with (tempFilePath) on success.
+   */
+  generateShareImage(callback) {
+    var self = this;
+    try {
+      const srcCanvas = GameGlobal && GameGlobal.canvas;
+      if (!srcCanvas || typeof wx === 'undefined' || !wx.canvasToTempFilePath) {
+        if (callback) callback();
+        return;
+      }
+
+      const DPR = GameGlobal.DEVICE_PIXEL_RATIO || 1;
+      const SHARE_W = 500;
+      const SHARE_H = 625; // 5:4 portrait for WeChat share card
+
+      const srcW = srcCanvas.width / DPR;
+      const srcH = srcCanvas.height / DPR;
+
+      // --- Try offscreen canvas approach first ---
+      var offCanvas = null;
+      try {
+        offCanvas = wx.createCanvas && wx.createCanvas();
+      } catch (e2) {
+        offCanvas = null;
+      }
+
+      if (offCanvas) {
+        try {
+          offCanvas.width = SHARE_W;
+          offCanvas.height = SHARE_H;
+          const offCtx = offCanvas.getContext('2d');
+          if (offCtx) {
+            // Dark background
+            offCtx.fillStyle = '#0a0e1a';
+            offCtx.fillRect(0, 0, SHARE_W, SHARE_H);
+
+            // Contain-fit source into portrait frame
+            const srcRatio = srcW / srcH;
+            const dstRatio = SHARE_W / SHARE_H;
+            var drawW, drawH, dx, dy;
+            if (srcRatio > dstRatio) {
+              drawW = SHARE_W;
+              drawH = SHARE_W / srcRatio;
+              dx = 0;
+              dy = (SHARE_H - drawH) / 2;
+            } else {
+              drawH = SHARE_H;
+              drawW = SHARE_H * srcRatio;
+              dx = (SHARE_W - drawW) / 2;
+              dy = 0;
+            }
+            offCtx.drawImage(srcCanvas, dx, dy, drawW, drawH);
+
+            // Export offscreen canvas
+            wx.canvasToTempFilePath({
+              canvas: offCanvas,
+              width: SHARE_W,
+              height: SHARE_H,
+              destWidth: SHARE_W,
+              destHeight: SHARE_H,
+              fileType: 'png',
+              quality: 0.92,
+              success: function(res) {
+                if (res.tempFilePath) {
+                  console.log('[ShareManager] Share image (offscreen):', res.tempFilePath);
+                  self._cachedImageUrl = res.tempFilePath;
+                  if (callback) callback(res.tempFilePath);
+                } else {
+                  self._fallbackDirectCapture(srcCanvas, srcW, srcH, SHARE_W, SHARE_H, callback);
+                }
+              },
+              fail: function() {
+                self._fallbackDirectCapture(srcCanvas, srcW, srcH, SHARE_W, SHARE_H, callback);
+              },
+            });
+            return; // done via offscreen path
+          }
+        } catch (e3) {
+          console.warn('[ShareManager] Offscreen canvas draw failed:', e3);
+        }
+      }
+
+      // --- Fallback: direct canvas capture with portrait output ---
+      this._fallbackDirectCapture(srcCanvas, srcW, srcH, SHARE_W, SHARE_H, callback);
+
+    } catch (e) {
+      console.warn('[ShareManager] generateShareImage error:', e);
+      if (callback) callback();
+    }
+  }
+
+  /**
+   * Fallback: export main canvas directly with portrait dest dimensions.
+   */
+  _fallbackDirectCapture(canvas, srcW, srcH, outW, outH, callback) {
+    try {
+      wx.canvasToTempFilePath({
+        canvas: canvas,
+        width: srcW,
+        height: srcH,
+        destWidth: outW,
+        destHeight: outH,
+        fileType: 'png',
+        quality: 0.92,
+        success: function(res) {
+          if (res.tempFilePath) {
+            console.log('[ShareManager] Share image (direct):', res.tempFilePath);
+            this._cachedImageUrl = res.tempFilePath;
+          }
+          if (callback) callback(res && res.tempFilePath ? res.tempFilePath : undefined);
+        }.bind(this),
+        fail: function(err) {
+          console.warn('[ShareManager] Direct canvasToTempFilePath failed:', err);
+          if (callback) callback();
+        },
+      });
+    } catch (e) {
+      console.warn('[ShareManager] _fallbackDirectCapture error:', e);
+      if (callback) callback();
+    }
+  }
+
  /**
   * Update open data for friend ranking.
   * @param {number} score
@@ -90,6 +223,10 @@ class ShareManager {
  setShareContent(opts) {
    this._shareContent = opts || {};
    console.log('[ShareManager] Share content updated:', JSON.stringify(this._shareContent));
+    // Auto-generate canvas screenshot as share image if none provided
+    if (!this._shareContent.imageUrl && !this._cachedImageUrl) {
+      this.generateShareImage();
+    }
    // Re-register callback to ensure WeChat picks up the new content
    this._refreshShareCallback();
  }
@@ -106,6 +243,9 @@ class ShareManager {
    // Update passive share callback (right-corner ··· menu fallback)
    this.setShareContent(data);

+    // Ensure we have a share image — generate synchronously-style via cache
+    const imageUrl = data.imageUrl || this._cachedImageUrl || '';
+
    // Directly invoke wx.shareAppMessage() to open the friend-picker panel.
    // This is permitted because triggerShare is called from a touchstart handler.
    try {
@@ -113,7 +253,7 @@ class ShareManager {
        console.log('[ShareManager] Calling wx.shareAppMessage with query:', data.query);
        wx.shareAppMessage({
          title: data.title || '',
-          imageUrl: data.imageUrl || '',
+          imageUrl: imageUrl,
          query: data.query || '',
        });
      }
@@ -200,7 +200,10 @@ const BuffSelectScene = {
      const GameScene = require('./GameScene');
      sm.register(SCENE.GAME, GameScene);
    }
-    sm.switchTo(SCENE.GAME, this._gameParams);
+    // ★ DEBUG: Force level 20 (Boss Battle) for quick verification of Boss tank gap-fix
+    // const params = Object.assign({}, this._gameParams, { level: 20 });
+    const params = Object.assign({}, this._gameParams);
+    sm.switchTo(SCENE.GAME, params);
  },

  handleTouch(eventType, e) {
@@ -38,7 +38,7 @@ const ROOM_STATE = {
 // Room Scene
 // ============================================================
 const RoomScene = {
-  _state: ROOM_STATE.IDLE,
+  _state: ROOM_STATE.CREATING,
  _roomCode: '',
  _errorMsg: '',
  _countdown: 3,
@@ -152,7 +152,7 @@ const RoomScene = {
    }));

    unsubs.push(nm.on('disconnected', () => {
-      if (this._state !== ROOM_STATE.IDLE) {
+      if (this._state !== ROOM_STATE.CREATING) {
        this._errorMsg = t('common.disconnected');
        this._state = ROOM_STATE.ERROR;
      }
@@ -198,7 +198,7 @@ const RoomScene = {
    if (shareManager) {
      shareManager.setShareContent({
        title: t('room.shareTitle'),
-        imageUrl: '',
+        imageUrl: 'js/ui/images/1v1.png',
        query: `roomId=${this._roomCode}`,
      });
    }
@@ -214,7 +214,7 @@ const RoomScene = {

    const shareData = {
      title: t('room.shareTitle'),
-      imageUrl: '',
+      imageUrl: 'js/ui/images/1v1.png',
      query: `roomId=${this._roomCode}`,
    };

@@ -240,7 +240,7 @@ const RoomScene = {

  /**
   * One-step invite: auto-create room then immediately share the invite card.
-   * This is the primary action on the IDLE screen — user clicks "Invite Friend"
+   * This is the primary action — automatically creates a room and triggers invite share
   * and we handle everything in one go.
   * MUST be called within a touch event for WeChat policy compliance.
   * @private
@@ -280,7 +280,7 @@ const RoomScene = {

      const shareData = {
        title: t('room.shareTitle'),
-        imageUrl: '',
+        imageUrl: 'js/ui/images/1v1.png',
        query: `roomId=${roomId}`,
      };

@@ -505,7 +505,7 @@ const RoomScene = {

    switch (this._state) {
      case ROOM_STATE.ERROR:
-        this._state = ROOM_STATE.IDLE;
+        this._state = ROOM_STATE.CREATING;
        this._errorMsg = '';
        break;

@@ -0,0 +1,16 @@
+/**
+ * Team2v2RoomScene.js
+ * 2v2 Brawl team room — delegates to the shared TeamRoomSceneFactory.
+ */
+
+const { createTeamRoomScene } = require('./TeamRoomSceneFactory');
+
+const Team2v2RoomScene = createTeamRoomScene({
+  teamSize: 2,
+  battleMode: '2v2',
+  i18nPrefix: 'team2v2Room',
+  logTag: 'Team2v2Room',
+  shareImageUrl: 'js/ui/images/2v2.png',
+});
+
+module.exports = Team2v2RoomScene;
@@ -1039,15 +1039,15 @@ const TeamGameScene = {

    // Validate pushed positions against terrain; revert if stuck in wall
    if (this._mapManager) {
-      const leftA = tankA.x - tankA.halfSize;
-      const topA = tankA.y - tankA.halfSize;
-      if (this._mapManager.rectCollidesWithTerrain(leftA, topA, tankA.size, tankA.size)) {
+      const leftA = tankA.x - tankA.colliderHalfSize;
+      const topA = tankA.y - tankA.colliderHalfSize;
+      if (this._mapManager.rectCollidesWithTerrain(leftA, topA, tankA.colliderSize, tankA.colliderSize)) {
        tankA.x = origAX;
        tankA.y = origAY;
      }
-      const leftB = tankB.x - tankB.halfSize;
-      const topB = tankB.y - tankB.halfSize;
-      if (this._mapManager.rectCollidesWithTerrain(leftB, topB, tankB.size, tankB.size)) {
+      const leftB = tankB.x - tankB.colliderHalfSize;
+      const topB = tankB.y - tankB.colliderHalfSize;
+      if (this._mapManager.rectCollidesWithTerrain(leftB, topB, tankB.colliderSize, tankB.colliderSize)) {
        tankB.x = origBX;
        tankB.y = origBY;
      }
@@ -0,0 +1,947 @@
+/**
+ * TeamRoomSceneFactory.js
+ * Factory function that creates a team room scene object.
+ * Shared by 2v2 and 3v3 team rooms — eliminates code duplication.
+ *
+ * Usage:
+ *   const Team2v2RoomScene = createTeamRoomScene({
+ *     teamSize: 2,
+ *     battleMode: '2v2',
+ *     i18nPrefix: 'team2v2Room',
+ *     logTag: 'Team2v2Room',
+ *   });
+ */
+
+const {
+  SCREEN_WIDTH,
+  SCREEN_HEIGHT,
+  COLORS,
+  SCENE,
+  NET_MSG,
+  SERVER_URL,
+} = require('../base/GameGlobal');
+const { t } = require('../i18n/I18n');
+
+// ============================================================
+// Layout Constants (shared across all team room variants)
+// ============================================================
+const BTN_WIDTH = Math.min(SCREEN_WIDTH * 0.35, 180);
+const BTN_HEIGHT = Math.min(36, SCREEN_HEIGHT * 0.07);
+const BTN_GAP = 10;
+const CENTER_X = SCREEN_WIDTH / 2;
+const SLOT_WIDTH = Math.min(SCREEN_WIDTH * 0.15, 80);
+const SLOT_HEIGHT = Math.min(SCREEN_HEIGHT * 0.18, 90);
+const SLOT_GAP = 8;
+
+// ============================================================
+// Team Room States (shared)
+// ============================================================
+const TEAM_STATE = {
+  MODE_SELECT: 'mode_select',
+  JOINING: 'joining',
+  FORMING: 'forming',
+  MATCHING: 'matching',
+  COUNTDOWN: 'countdown',
+  ERROR: 'error',
+};
+
+// ============================================================
+// i18n helper
+// ============================================================
+function tp(prefix, key, params) {
+  const fullKey = `${prefix}.${key}`;
+  return params ? t(fullKey, params) : t(fullKey);
+}
+
+// ============================================================
+// Factory
+// ============================================================
+function createTeamRoomScene(config) {
+  const {
+    teamSize,
+    battleMode,
+    i18nPrefix,
+    logTag,
+    shareImageUrl = '',
+  } = config;
+
+  return {
+    _state: TEAM_STATE.MODE_SELECT,
+    _teamData: null,
+    _errorMsg: '',
+    _animTimer: 0,
+    _matchTimer: 0,
+    _countdown: 3,
+    _countdownTimer: 0,
+    _networkManager: null,
+    _unsubscribers: [],
+    _isLeader: false,
+    _myPlayerId: null,
+    _serverUrl: SERVER_URL,
+
+    // Button rects
+    _createTeamBtnRect: null,
+    _soloMatchBtnRect: null,
+    _backBtnRect: null,
+    _inviteBtnRect: null,
+    _matchBtnRect: null,
+    _readyBtnRect: null,
+    _disbandBtnRect: null,
+    _leaveBtnRect: null,
+    _cancelMatchBtnRect: null,
+    _slotRects: [],
+    _kickBtnRects: [],
+    _avatarImages: {},
+
+    // ---- Lifecycle ----
+
+    enter(params) {
+      this._state = TEAM_STATE.MODE_SELECT;
+      this._teamData = null;
+      this._errorMsg = '';
+      this._animTimer = 0;
+      this._matchTimer = 0;
+      this._countdown = 3;
+      this._countdownTimer = 0;
+      this._networkManager = GameGlobal.networkManager;
+      this._myPlayerId = this._networkManager ? this._networkManager.playerId : 'player_' + Date.now();
+      this._isLeader = false;
+      this._avatarImages = {};
+
+      this._buildLayout();
+      this._setupNetworkEvents();
+      this._setupProfileListener();
+
+      if (params && params.teamId) {
+        this._autoJoinTeam(params.teamId);
+      }
+    },
+
+    exit() {
+      this._cleanupNetworkEvents();
+      this._cleanupProfileListener();
+      const shareManager = GameGlobal.shareManager;
+      if (shareManager) {
+        shareManager.resetShareContent();
+      }
+    },
+
+    update(dt) {
+      this._animTimer += dt;
+
+      if (this._state === TEAM_STATE.MATCHING) {
+        this._matchTimer += dt;
+      }
+
+      if (this._state === TEAM_STATE.COUNTDOWN) {
+        this._countdownTimer += dt;
+        if (this._countdownTimer >= 1) {
+          this._countdownTimer -= 1;
+          this._countdown--;
+        }
+      }
+    },
+
+    // ---- Layout ----
+
+    _buildLayout() {
+      const modeY = SCREEN_HEIGHT * 0.4;
+
+      this._createTeamBtnRect = {
+        x: CENTER_X - BTN_WIDTH / 2,
+        y: modeY,
+        w: BTN_WIDTH,
+        h: BTN_HEIGHT,
+      };
+      this._soloMatchBtnRect = {
+        x: CENTER_X - BTN_WIDTH / 2,
+        y: modeY + BTN_HEIGHT + BTN_GAP,
+        w: BTN_WIDTH,
+        h: BTN_HEIGHT,
+      };
+      this._backBtnRect = { x: 10, y: 10, w: 60, h: 30 };
+
+      const totalSlotsWidth = teamSize * SLOT_WIDTH + (teamSize - 1) * SLOT_GAP;
+      const slotsStartX = CENTER_X - totalSlotsWidth / 2;
+      const slotsY = SCREEN_HEIGHT * 0.25;
+
+      this._slotRects = [];
+      this._kickBtnRects = [];
+      for (let i = 0; i < teamSize; i++) {
+        const x = slotsStartX + i * (SLOT_WIDTH + SLOT_GAP);
+        this._slotRects.push({ x, y: slotsY, w: SLOT_WIDTH, h: SLOT_HEIGHT });
+        this._kickBtnRects.push({ x: x + SLOT_WIDTH - 18, y: slotsY + 2, w: 16, h: 16 });
+      }
+
+      const actionY = SCREEN_HEIGHT * 0.58;
+      const smallBtnW = BTN_WIDTH * 0.8;
+
+      this._inviteBtnRect = {
+        x: CENTER_X - smallBtnW - BTN_GAP / 2,
+        y: actionY,
+        w: smallBtnW,
+        h: BTN_HEIGHT,
+      };
+      this._matchBtnRect = {
+        x: CENTER_X + BTN_GAP / 2,
+        y: actionY,
+        w: smallBtnW,
+        h: BTN_HEIGHT,
+      };
+      this._readyBtnRect = {
+        x: CENTER_X - smallBtnW / 2,
+        y: actionY,
+        w: smallBtnW,
+        h: BTN_HEIGHT,
+      };
+      this._disbandBtnRect = {
+        x: CENTER_X - smallBtnW - BTN_GAP / 2,
+        y: actionY + BTN_HEIGHT + BTN_GAP,
+        w: smallBtnW,
+        h: BTN_HEIGHT,
+      };
+      this._leaveBtnRect = {
+        x: CENTER_X - smallBtnW / 2,
+        y: actionY + BTN_HEIGHT + BTN_GAP,
+        w: smallBtnW,
+        h: BTN_HEIGHT,
+      };
+      this._cancelMatchBtnRect = {
+        x: CENTER_X - BTN_WIDTH / 2,
+        y: SCREEN_HEIGHT * 0.7,
+        w: BTN_WIDTH,
+        h: BTN_HEIGHT,
+      };
+    },
+
+    // ---- Share ----
+
+    _updateShareContent() {
+      if (!this._teamData || !this._teamData.teamId) return;
+      const shareManager = GameGlobal.shareManager;
+      if (shareManager) {
+        shareManager.setShareContent({
+          title: tp(i18nPrefix, 'shareTitle'),
+          imageUrl: shareImageUrl,
+          query: `teamId=${this._teamData.teamId}&mode=${battleMode}`,
+        });
+      }
+    },
+
+    // ---- Network Events ----
+
+    _setupNetworkEvents() {
+      this._cleanupNetworkEvents();
+      const nm = this._networkManager;
+      if (!nm) return;
+
+      const unsubs = [];
+
+      unsubs.push(nm.on(NET_MSG.TEAM_STATE, (data) => {
+        if (data.teamA) {
+          for (const m of data.teamA) {
+            if (m.avatarUrl && this._avatarImages[m.playerId] === null) {
+              delete this._avatarImages[m.playerId];
+            }
+          }
+        }
+        if (data.teamB) {
+          for (const m of data.teamB) {
+            if (m.avatarUrl && this._avatarImages[m.playerId] === null) {
+              delete this._avatarImages[m.playerId];
+            }
+          }
+        }
+
+        this._teamData = data;
+        this._isLeader = data.leaderId === this._myPlayerId;
+
+        if (data.state === 'forming') {
+          this._state = TEAM_STATE.FORMING;
+        } else if (data.state === 'matching') {
+          this._state = TEAM_STATE.MATCHING;
+        }
+
+        this._updateShareContent();
+      }));
+
+      unsubs.push(nm.on(NET_MSG.TEAM_DISBAND, (data) => {
+        this._teamData = null;
+        this._state = TEAM_STATE.MODE_SELECT;
+        if (data.reason === 'kicked') {
+          this._errorMsg = t('common.kicked');
+          this._state = TEAM_STATE.ERROR;
+        }
+      }));
+
+      unsubs.push(nm.on(NET_MSG.MATCH_FOUND, () => {
+        this._state = TEAM_STATE.COUNTDOWN;
+        this._countdown = 3;
+        this._countdownTimer = 0;
+      }));
+
+      unsubs.push(nm.on(NET_MSG.TEAM_GAME_START, (data) => {
+        this._startTeamGame(data);
+      }));
+
+      unsubs.push(nm.on(NET_MSG.ROOM_ERROR, (data) => {
+        this._errorMsg = data.message || 'Unknown error';
+        if (this._state !== TEAM_STATE.COUNTDOWN) {
+          this._state = TEAM_STATE.ERROR;
+        }
+      }));
+
+      unsubs.push(nm.on('error', () => {
+        this._errorMsg = t('common.connectFailed');
+        this._state = TEAM_STATE.ERROR;
+      }));
+
+      unsubs.push(nm.on('disconnected', () => {
+        if (this._state !== TEAM_STATE.MODE_SELECT) {
+          this._errorMsg = t('common.disconnected');
+          this._state = TEAM_STATE.ERROR;
+        }
+      }));
+
+      this._unsubscribers = unsubs;
+    },
+
+    _cleanupNetworkEvents() {
+      for (const unsub of this._unsubscribers) {
+        if (typeof unsub === 'function') unsub();
+      }
+      this._unsubscribers = [];
+    },
+
+    // ---- Profile Listener ----
+
+    _setupProfileListener() {
+      this._cleanupProfileListener();
+      const bus = (typeof GameGlobal !== 'undefined') ? GameGlobal.eventBus : null;
+      if (!bus || typeof bus.on !== 'function') return;
+
+      this._profileUnsub = bus.on('profile:updated', () => {
+        if (this._teamData && this._networkManager && this._networkManager.connected) {
+          this._networkManager.send(NET_MSG.PING);
+        }
+        if (this._myPlayerId && this._avatarImages[this._myPlayerId] !== undefined) {
+          delete this._avatarImages[this._myPlayerId];
+        }
+      });
+    },
+
+    _cleanupProfileListener() {
+      if (this._profileUnsub) {
+        this._profileUnsub();
+        this._profileUnsub = null;
+      }
+    },
+
+    // ---- Game Start ----
+
+    _startTeamGame(data) {
+      const sm = GameGlobal.sceneManager;
+      if (!sm._scenes.has(SCENE.TEAM_GAME)) {
+        const TeamGameScene = require('./TeamGameScene');
+        sm.register(SCENE.TEAM_GAME, TeamGameScene);
+      }
+      sm.switchTo(SCENE.TEAM_GAME, {
+        teamId: this._teamData ? this._teamData.teamId : null,
+        mapId: data.mapId,
+        teamA: data.teamA,
+        teamB: data.teamB,
+        teamABaseHp: data.teamABaseHp,
+        teamBBaseHp: data.teamBBaseHp,
+        battleMode: data.battleMode || battleMode,
+        roomId: data.roomId || '',
+        myPlayerId: this._myPlayerId,
+      });
+    },
+
+    // ---- Render ----
+
+    render(ctx) {
+      ctx.fillStyle = COLORS.MENU_BG;
+      ctx.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
+
+      const gradient = ctx.createLinearGradient(0, 0, SCREEN_WIDTH, 0);
+      gradient.addColorStop(0, '#0f3460');
+      gradient.addColorStop(0.5, '#e94560');
+      gradient.addColorStop(1, '#0f3460');
+      ctx.fillStyle = gradient;
+      ctx.fillRect(0, 0, SCREEN_WIDTH, 4);
+
+      this._drawButton(ctx, this._backBtnRect, t('common.back'), false, 12);
+
+      ctx.fillStyle = COLORS.MENU_TITLE;
+      ctx.font = 'bold 22px Arial';
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(tp(i18nPrefix, 'title'), CENTER_X, SCREEN_HEIGHT * 0.08);
+
+      switch (this._state) {
+        case TEAM_STATE.MODE_SELECT:
+          this._renderModeSelect(ctx);
+          break;
+        case TEAM_STATE.JOINING:
+          this._renderJoining(ctx);
+          break;
+        case TEAM_STATE.FORMING:
+          this._renderForming(ctx);
+          break;
+        case TEAM_STATE.MATCHING:
+          this._renderMatching(ctx);
+          break;
+        case TEAM_STATE.COUNTDOWN:
+          this._renderCountdown(ctx);
+          break;
+        case TEAM_STATE.ERROR:
+          this._renderError(ctx);
+          break;
+      }
+    },
+
+    _renderJoining(ctx) {
+      const dots = '.'.repeat(Math.floor(this._animTimer * 3) % 4);
+      ctx.fillStyle = '#FFFFFF';
+      ctx.font = '18px Arial';
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(tp(i18nPrefix, 'joining') + dots, CENTER_X, SCREEN_HEIGHT * 0.45);
+    },
+
+    _renderModeSelect(ctx) {
+      ctx.fillStyle = '#AAAAAA';
+      ctx.font = '14px Arial';
+      ctx.textAlign = 'center';
+      ctx.fillText(tp(i18nPrefix, 'chooseMode'), CENTER_X, SCREEN_HEIGHT * 0.28);
+
+      this._drawButton(ctx, this._createTeamBtnRect, tp(i18nPrefix, 'createTeam'));
+      this._drawButton(ctx, this._soloMatchBtnRect, tp(i18nPrefix, 'soloMatch'));
+    },
+
+    _renderForming(ctx) {
+      if (!this._teamData) return;
+
+      ctx.fillStyle = '#AAAAAA';
+      ctx.font = '12px Arial';
+      ctx.textAlign = 'center';
+      ctx.fillText(tp(i18nPrefix, 'teamId', { id: this._teamData.teamId }), CENTER_X, SCREEN_HEIGHT * 0.16);
+
+      const members = this._teamData.teamA || [];
+      for (let i = 0; i < teamSize; i++) {
+        const rect = this._slotRects[i];
+        const member = members[i];
+
+        ctx.fillStyle = member ? '#1e3a5f' : '#0d1b2a';
+        ctx.strokeStyle = member ? (member.isLeader ? '#FFD700' : '#0f3460') : '#333333';
+        ctx.lineWidth = member && member.isLeader ? 3 : 1;
+        this._drawRoundRect(ctx, rect.x, rect.y, rect.w, rect.h, 8);
+        ctx.fill();
+        ctx.stroke();
+
+        if (member) {
+          const avatarR = Math.min(rect.w, rect.h) * 0.32;
+          const avatarCX = rect.x + rect.w / 2;
+          const avatarCY = rect.y + rect.h * 0.42;
+          this._drawAvatar(ctx, member, avatarCX, avatarCY, avatarR);
+
+          if (!member.isLeader) {
+            ctx.fillStyle = member.ready ? '#00FF00' : '#FF6347';
+            ctx.font = 'bold 10px Arial';
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            ctx.fillText(
+              member.ready ? tp(i18nPrefix, 'ready') : tp(i18nPrefix, 'notReady'),
+              avatarCX, rect.y + rect.h * 0.88,
+            );
+          }
+
+          if (this._isLeader && !member.isLeader && member.playerId !== this._myPlayerId) {
+            const kickRect = this._kickBtnRects[i];
+            ctx.fillStyle = '#FF4444';
+            ctx.font = 'bold 12px Arial';
+            ctx.fillText('✕', kickRect.x + kickRect.w / 2, kickRect.y + kickRect.h / 2);
+          }
+        } else {
+          ctx.fillStyle = '#555555';
+          ctx.font = '24px Arial';
+          ctx.textAlign = 'center';
+          ctx.textBaseline = 'middle';
+          ctx.fillText('+', rect.x + rect.w / 2, rect.y + rect.h / 2);
+
+          ctx.fillStyle = '#666666';
+          ctx.font = '10px Arial';
+          ctx.fillText(tp(i18nPrefix, 'emptySlot'), rect.x + rect.w / 2, rect.y + rect.h * 0.78);
+        }
+      }
+
+      if (this._isLeader) {
+        this._drawButton(ctx, this._inviteBtnRect, tp(i18nPrefix, 'invite'));
+        const allReady = members.length > 0 && members.every(m => m.ready || m.isLeader);
+        this._drawButton(ctx, this._matchBtnRect, tp(i18nPrefix, 'startMatch'), false, 14, allReady ? null : '#555555');
+        this._drawButton(ctx, this._disbandBtnRect, tp(i18nPrefix, 'disband'), false, 12, '#8B0000');
+      } else {
+        const myMember = members.find(m => m.playerId === this._myPlayerId);
+        const readyLabel = myMember && myMember.ready ? tp(i18nPrefix, 'cancelReady') : tp(i18nPrefix, 'readyBtn');
+        this._drawButton(ctx, this._readyBtnRect, readyLabel);
+        this._drawButton(ctx, this._leaveBtnRect, tp(i18nPrefix, 'leaveTeam'), false, 12, '#8B0000');
+      }
+    },
+
+    _renderMatching(ctx) {
+      if (!this._teamData) return;
+
+      const members = this._teamData.teamA || [];
+      for (let i = 0; i < teamSize; i++) {
+        const rect = this._slotRects[i];
+        const member = members[i];
+
+        ctx.fillStyle = member ? '#1e3a5f' : '#0d1b2a';
+        ctx.strokeStyle = member ? (member.isLeader ? '#FFD700' : '#0f3460') : '#333333';
+        ctx.lineWidth = member && member.isLeader ? 3 : 1;
+        this._drawRoundRect(ctx, rect.x, rect.y, rect.w, rect.h, 8);
+        ctx.fill();
+        ctx.stroke();
+
+        if (member) {
+          const avatarR = Math.min(rect.w, rect.h) * 0.32;
+          const avatarCX = rect.x + rect.w / 2;
+          const avatarCY = rect.y + rect.h * 0.42;
+          this._drawAvatar(ctx, member, avatarCX, avatarCY, avatarR);
+
+          if (!member.isLeader) {
+            ctx.fillStyle = member.ready ? '#00FF00' : '#FF6347';
+            ctx.font = 'bold 10px Arial';
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            ctx.fillText(
+              member.ready ? tp(i18nPrefix, 'ready') : tp(i18nPrefix, 'notReady'),
+              avatarCX, rect.y + rect.h * 0.88,
+            );
+          }
+        } else {
+          ctx.fillStyle = '#555555';
+          ctx.font = '24px Arial';
+          ctx.textAlign = 'center';
+          ctx.textBaseline = 'middle';
+          ctx.fillText('+', rect.x + rect.w / 2, rect.y + rect.h / 2);
+        }
+      }
+
+      const elapsed = Math.floor(this._matchTimer);
+      const dots = '.'.repeat(Math.floor(this._animTimer * 3) % 4);
+      ctx.fillStyle = '#FFFFFF';
+      ctx.font = '18px Arial';
+      ctx.textAlign = 'center';
+      ctx.fillText(tp(i18nPrefix, 'matching', { dots }), CENTER_X, SCREEN_HEIGHT * 0.55);
+
+      ctx.fillStyle = '#AAAAAA';
+      ctx.font = '14px Arial';
+      ctx.fillText(tp(i18nPrefix, 'waitTime', { seconds: elapsed }), CENTER_X, SCREEN_HEIGHT * 0.62);
+
+      if (this._isLeader) {
+        this._drawButton(ctx, this._cancelMatchBtnRect, tp(i18nPrefix, 'cancelMatch'));
+      }
+    },
+
+    _renderCountdown(ctx) {
+      ctx.fillStyle = '#00FF00';
+      ctx.font = '16px Arial';
+      ctx.textAlign = 'center';
+      ctx.fillText(tp(i18nPrefix, 'matchFound'), CENTER_X, SCREEN_HEIGHT * 0.35);
+
+      ctx.fillStyle = COLORS.MENU_TITLE;
+      ctx.font = 'bold 64px Arial';
+      ctx.fillText(String(Math.max(1, this._countdown)), CENTER_X, SCREEN_HEIGHT * 0.52);
+
+      ctx.fillStyle = '#AAAAAA';
+      ctx.font = '14px Arial';
+      ctx.fillText(tp(i18nPrefix, 'enterBattle'), CENTER_X, SCREEN_HEIGHT * 0.65);
+    },
+
+    _renderError(ctx) {
+      ctx.fillStyle = '#FF4444';
+      ctx.font = '16px Arial';
+      ctx.textAlign = 'center';
+      ctx.fillText(this._errorMsg, CENTER_X, SCREEN_HEIGHT * 0.45);
+
+      ctx.fillStyle = '#AAAAAA';
+      ctx.font = '14px Arial';
+      ctx.fillText(tp(i18nPrefix, 'tapBack'), CENTER_X, SCREEN_HEIGHT * 0.55);
+    },
+
+    // ---- Drawing Helpers ----
+
+    _drawButton(ctx, rect, label, pressed, fontSize, bgColor) {
+      if (!rect) return;
+      const fs = fontSize || 14;
+
+      ctx.fillStyle = bgColor || (pressed ? '#0f3460' : COLORS.MENU_BTN);
+      ctx.strokeStyle = COLORS.MENU_BTN_BORDER;
+      ctx.lineWidth = 2;
+
+      this._drawRoundRect(ctx, rect.x, rect.y, rect.w, rect.h, 6);
+      ctx.fill();
+      ctx.stroke();
+
+      ctx.fillStyle = pressed ? COLORS.MENU_TITLE : COLORS.MENU_BTN_TEXT;
+      ctx.font = `bold ${fs}px Arial`;
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(label, rect.x + rect.w / 2, rect.y + rect.h / 2);
+    },
+
+    _drawRoundRect(ctx, x, y, w, h, r) {
+      ctx.beginPath();
+      ctx.moveTo(x + r, y);
+      ctx.lineTo(x + w - r, y);
+      ctx.arcTo(x + w, y, x + w, y + r, r);
+      ctx.lineTo(x + w, y + h - r);
+      ctx.arcTo(x + w, y + h, x + w - r, y + h, r);
+      ctx.lineTo(x + r, y + h);
+      ctx.arcTo(x, y + h, x, y + h - r, r);
+      ctx.lineTo(x, y + r);
+      ctx.arcTo(x, y, x + r, y, r);
+      ctx.closePath();
+    },
+
+    _hitTest(tx, ty, rect) {
+      if (!rect) return false;
+      return tx >= rect.x && tx <= rect.x + rect.w && ty >= rect.y && ty <= rect.y + rect.h;
+    },
+
+    _drawAvatar(ctx, member, cx, cy, r) {
+      const img = this._avatarImages[member.playerId];
+      if (img) {
+        ctx.save();
+        ctx.beginPath();
+        ctx.arc(cx, cy, r, 0, Math.PI * 2);
+        ctx.clip();
+        ctx.drawImage(img, cx - r, cy - r, r * 2, r * 2);
+        ctx.restore();
+
+        ctx.strokeStyle = member.isLeader ? '#FFD700' : '#4a90d9';
+        ctx.lineWidth = 2;
+        ctx.beginPath();
+        ctx.arc(cx, cy, r + 1, 0, Math.PI * 2);
+        ctx.stroke();
+      } else {
+        if (member.playerId === this._myPlayerId) {
+          const profile = (typeof GameGlobal !== 'undefined') ? GameGlobal.playerProfile : null;
+          if (profile && profile.avatarUrl && !this._avatarImages[member.playerId]) {
+            this._loadAvatar(member);
+          }
+        }
+
+        const bgColor = member.isLeader ? '#FFD700' : '#4a90d9';
+        ctx.fillStyle = bgColor;
+        ctx.beginPath();
+        ctx.arc(cx, cy, r, 0, Math.PI * 2);
+        ctx.fill();
+
+        ctx.fillStyle = 'rgba(255,255,255,0.7)';
+        ctx.beginPath();
+        ctx.arc(cx, cy - r * 0.2, r * 0.3, 0, Math.PI * 2);
+        ctx.fill();
+        ctx.beginPath();
+        ctx.ellipse(cx, cy + r * 0.55, r * 0.55, r * 0.35, 0, Math.PI, 0);
+        ctx.fill();
+
+        ctx.strokeStyle = bgColor;
+        ctx.lineWidth = 2;
+        ctx.beginPath();
+        ctx.arc(cx, cy, r + 1, 0, Math.PI * 2);
+        ctx.stroke();
+
+        this._loadAvatar(member);
+      }
+    },
+
+    _loadAvatar(member) {
+      let avatarUrl = member.avatarUrl;
+      if (member.playerId === this._myPlayerId) {
+        const profile = (typeof GameGlobal !== 'undefined') ? GameGlobal.playerProfile : null;
+        if (profile && profile.avatarUrl) {
+          avatarUrl = profile.avatarUrl;
+        }
+      }
+
+      if (!avatarUrl || this._avatarImages[member.playerId] !== undefined) return;
+
+      this._avatarImages[member.playerId] = null;
+
+      try {
+        const img = wx.createImage();
+        img.onload = () => {
+          this._avatarImages[member.playerId] = img;
+        };
+        img.onerror = () => {
+          // Keep null so we don't retry endlessly
+        };
+        img.src = avatarUrl;
+      } catch (e) {
+        // wx.createImage not available
+      }
+    },
+
+    _getDisplayName(member) {
+      if (!member) return '';
+      const profile = GameGlobal.playerProfile;
+      let raw = member.nickname || '';
+      if (!raw) {
+        if (profile && typeof profile.getDisplayName === 'function') {
+          raw = profile.getDisplayName(member.playerId);
+        } else {
+          raw = member.playerId || '';
+        }
+      }
+      if (profile && typeof profile.truncate === 'function') {
+        return profile.truncate(raw, 4);
+      }
+      return raw.length > 8 ? raw.substring(0, 8) + '..' : raw;
+    },
+
+    // ---- Touch Handling ----
+
+    handleTouch(eventType, e) {
+      if (eventType !== 'touchstart') return;
+
+      const touch = e.touches[0];
+      const tx = touch.clientX;
+      const ty = touch.clientY;
+
+      if (this._hitTest(tx, ty, this._backBtnRect)) {
+        this._goBack();
+        return;
+      }
+
+      switch (this._state) {
+        case TEAM_STATE.MODE_SELECT:
+          if (this._hitTest(tx, ty, this._createTeamBtnRect)) {
+            this._handleCreateTeam();
+          } else if (this._hitTest(tx, ty, this._soloMatchBtnRect)) {
+            this._handleSoloMatch();
+          }
+          break;
+
+        case TEAM_STATE.FORMING:
+          this._handleFormingTouch(tx, ty);
+          break;
+
+        case TEAM_STATE.MATCHING:
+          if (this._isLeader && this._hitTest(tx, ty, this._cancelMatchBtnRect)) {
+            this._handleCancelMatch();
+          }
+          break;
+
+        case TEAM_STATE.ERROR:
+          this._state = TEAM_STATE.MODE_SELECT;
+          this._errorMsg = '';
+          break;
+      }
+    },
+
+    _handleFormingTouch(tx, ty) {
+      if (!this._teamData) return;
+
+      if (this._isLeader) {
+        if (this._hitTest(tx, ty, this._inviteBtnRect)) {
+          this._handleInvite();
+          return;
+        }
+        if (this._hitTest(tx, ty, this._matchBtnRect)) {
+          this._handleStartMatch();
+          return;
+        }
+        if (this._hitTest(tx, ty, this._disbandBtnRect)) {
+          this._handleDisband();
+          return;
+        }
+
+        const members = this._teamData.teamA || [];
+        for (let i = 0; i < members.length; i++) {
+          const member = members[i];
+          if (member && !member.isLeader && member.playerId !== this._myPlayerId) {
+            if (this._hitTest(tx, ty, this._kickBtnRects[i])) {
+              this._handleKick(member.playerId);
+              return;
+            }
+          }
+        }
+      } else {
+        if (this._hitTest(tx, ty, this._readyBtnRect)) {
+          this._handleReady();
+          return;
+        }
+        if (this._hitTest(tx, ty, this._leaveBtnRect)) {
+          this._handleLeave();
+          return;
+        }
+      }
+    },
+
+    // ---- Action Handlers ----
+
+    async _handleCreateTeam() {
+      const nm = this._networkManager;
+      if (!nm) return;
+
+      if (!nm.connected) {
+        const ok = await nm.connect(this._serverUrl);
+        if (!ok) {
+          this._errorMsg = t('common.cannotConnect');
+          this._state = TEAM_STATE.ERROR;
+          return;
+        }
+      }
+
+      this._myPlayerId = nm.playerId;
+      nm.createTeam(battleMode);
+    },
+
+    async _handleSoloMatch() {
+      const nm = this._networkManager;
+      if (!nm) return;
+
+      if (!nm.connected) {
+        const ok = await nm.connect(this._serverUrl);
+        if (!ok) {
+          this._errorMsg = t('common.cannotConnect');
+          this._state = TEAM_STATE.ERROR;
+          return;
+        }
+      }
+
+      this._myPlayerId = nm.playerId;
+      this._matchTimer = 0;
+      nm.soloMatch(battleMode);
+    },
+
+    async _autoJoinTeam(teamId) {
+      const nm = this._networkManager;
+      if (!nm) {
+        this._errorMsg = t('common.cannotConnect');
+        this._state = TEAM_STATE.ERROR;
+        return;
+      }
+
+      this._state = TEAM_STATE.JOINING;
+      this._errorMsg = '';
+
+      try {
+        if (!nm.connected) {
+          const ok = await nm.connect(this._serverUrl);
+          if (!ok) {
+            this._errorMsg = t('common.cannotConnect');
+            this._state = TEAM_STATE.ERROR;
+            return;
+          }
+        }
+
+        this._myPlayerId = nm.playerId;
+        console.log(`[${logTag}] Auto-joining team ${teamId} as ${this._myPlayerId}`);
+        nm.send(NET_MSG.JOIN_TEAM, { teamId });
+      } catch (e) {
+        console.error(`[${logTag}] Auto-join failed:`, e);
+        this._errorMsg = t('common.cannotConnect');
+        this._state = TEAM_STATE.ERROR;
+      }
+    },
+
+    _handleInvite() {
+      if (!this._teamData) return;
+
+      const teamId = this._teamData.teamId;
+      const shareData = {
+        title: tp(i18nPrefix, 'shareTitle'),
+        imageUrl: shareImageUrl,
+        query: `teamId=${teamId}&mode=${battleMode}`,
+      };
+
+      console.log(`[${logTag}] Sharing invite with query: teamId=${teamId}&mode=${battleMode}`);
+
+      const shareManager = GameGlobal.shareManager;
+      if (shareManager) {
+        shareManager.triggerShare(shareData);
+      } else {
+        try {
+          wx.showToast({
+            title: '请点击右上角 ··· 转发给好友',
+            icon: 'none',
+            duration: 2500,
+          });
+        } catch (e) {
+          console.log(`[${logTag}] Share not available, teamId:`, teamId);
+        }
+      }
+    },
+
+    _handleStartMatch() {
+      const nm = this._networkManager;
+      if (!nm || !this._teamData) return;
+
+      const members = this._teamData.teamA || [];
+      const allReady = members.length > 0 && members.every(m => m.ready || m.isLeader);
+      if (!allReady) return;
+
+      this._matchTimer = 0;
+      nm.send(NET_MSG.MATCH_START, {});
+    },
+
+    _handleCancelMatch() {
+      const nm = this._networkManager;
+      if (!nm) return;
+      nm.send(NET_MSG.MATCH_CANCEL, {});
+    },
+
+    _handleReady() {
+      const nm = this._networkManager;
+      if (!nm || !this._teamData) return;
+
+      const myMember = (this._teamData.teamA || []).find(m => m.playerId === this._myPlayerId);
+      nm.send(NET_MSG.TEAM_READY, { ready: myMember ? !myMember.ready : true });
+    },
+
+    _handleKick(playerId) {
+      const nm = this._networkManager;
+      if (!nm) return;
+      nm.send(NET_MSG.TEAM_KICK, { playerId });
+    },
+
+    _handleDisband() {
+      const nm = this._networkManager;
+      if (!nm) return;
+      nm.send(NET_MSG.TEAM_DISBAND, {});
+    },
+
+    _handleLeave() {
+      const nm = this._networkManager;
+      if (!nm) return;
+      nm.send(NET_MSG.LEAVE_TEAM, {});
+      this._teamData = null;
+      this._state = TEAM_STATE.MODE_SELECT;
+    },
+
+    _goBack() {
+      if (this._teamData) {
+        const nm = this._networkManager;
+        if (nm) {
+          if (this._state === TEAM_STATE.MATCHING && this._isLeader) {
+            nm.send(NET_MSG.MATCH_CANCEL, {});
+          }
+          if (this._isLeader) {
+            nm.send(NET_MSG.TEAM_DISBAND, {});
+          } else {
+            nm.send(NET_MSG.LEAVE_TEAM, {});
+          }
+        }
+      }
+
+      const sm = GameGlobal.sceneManager;
+      sm.switchTo(SCENE.MENU);
+    },
+  };
+}
+
+module.exports = { createTeamRoomScene, TEAM_STATE };