fix 扫雷格子和头像

pages-game/game/minesweeper/play.scss

@@ -712,6 +712,8 @@
     background: $bg-dark-card;
     border-radius: $radius-lg;
     border: 1px solid $border-dark;
+    // 确保格子始终保持正方形
+    aspect-ratio: 1 / 1;
 }
 
 .grid-cell {
@@ -722,6 +724,10 @@
     align-items: center;
     transition: all $transition-fast;
     position: relative;
+    // 确保每个格子都是正方形
+    aspect-ratio: 1 / 1;
+    width: 100%;
+    height: auto;
 
     &:active {
         transform: scale(0.95);

pages-game/game/minesweeper/play.vue

@@ -103,7 +103,7 @@
                 'healed': healedPlayers.includes(p.userId)
               }"
             >
-              <text class="avatar">{{ p.avatar }}</text>
+              <text class="avatar">{{ getPlayerAvatar(p) }}</text>
               <view class="player-info">
                 <text class="username">{{ p.username || '对手' }}</text>
                 <view class="hp-bar">
@@ -193,7 +193,7 @@
               'healed': healedPlayers.includes(myPlayer.userId)
             }"
           >
-            <text class="avatar lg">{{ myPlayer.avatar }}</text>
+            <text class="avatar lg">{{ getPlayerAvatar(myPlayer) }}</text>
             <view class="player-info">
               <text class="username font-bold">我</text>
               <view class="hp-bar">
@@ -660,6 +660,26 @@ export default {
       if (content === 'empty') return '✅';
       return this.getItemIcon(content);
     },
+    getPlayerAvatar(player) {
+      // 如果服务器已经发送了avatar字段，直接使用
+      if (player.avatar) {
+        return player.avatar;
+      }
+
+      // 否则，根据userId或username确定性分配一个动物头像
+      const avatars = ['🐶', '🐘', '🐯', '🐵', '🦥', '🦛'];
+
+      // 使用userId或username作为哈希种子，确保同一玩家总是获得相同的头像
+      const seed = player.userId || player.username || player.id || '';
+      let hash = 0;
+      for (let i = 0; i < seed.length; i++) {
+        hash = ((hash << 5) - hash) + seed.charCodeAt(i);
+        hash = hash & hash; // 转换为32位整数
+      }
+
+      const index = Math.abs(hash) % avatars.length;
+      return avatars[index];
+    },
     getNumColor(n) { return ['','blue','green','red','purple','orange'][n] || 'black'; },
     getOpCodeName(code) {
       const map = {