细节完善

src/components/TeamAvatars.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch } from "vue";
+import { ref, watch, onMounted } from "vue";
 const props = defineProps({
   isRed: {
     type: Boolean,
@@ -18,13 +18,33 @@ const props = defineProps({
     default: false,
   },
 });
-const players = ref(props.team);
+const players = ref({});
 const youTurn = ref(false);
+const firstName = ref("");
+
+onMounted(() => {
+  props.team.forEach((p, index) => {
+    players.value[p.id] = { sort: index, ...p };
+  });
+});
+
 watch(
   () => props.currentShooterId,
   (newVal) => {
-    const exit = props.team.some((p) => p.id === newVal);
-    youTurn.value = !!exit;
+    if (!newVal) return;
+    const index = props.team.findIndex((p) => p.id === newVal);
+    youTurn.value = index >= 0;
+    if (index >= 0) {
+      const newPlayers = [...props.team];
+      const target = newPlayers.splice(index, 1)[0];
+      if (target) {
+        newPlayers.unshift(target);
+        firstName.value = target.name;
+        newPlayers.forEach((p, index) => {
+          players.value[p.id] = { sort: index, ...p };
+        });
+      }
+    }
   },
   { immediate: true }
 );
@@ -37,17 +57,22 @@ watch(
       :key="index"
       class="player"
       :style="{
-        width: (youTurn ? 40 - index * 5 : 30) + 'px',
-        height: (youTurn ? 40 - index * 5 : 30) + 'px',
+        width:
+          (youTurn ? 40 - ((players[item.id] || {}).sort || 0) * 5 : 35) + 'px',
+        height:
+          (youTurn ? 40 - ((players[item.id] || {}).sort || 0) * 5 : 35) + 'px',
         borderColor: isRed ? '#ff6060' : '#5fadff',
-        zIndex: players.length - index,
-        top: youTurn ? index * 2 + 'px' : '6px',
-        left: (isRed ? index * 20 : 35 - index * 15) + 'px',
+        zIndex: team.length - ((players[item.id] || {}).sort || 0),
+        top: youTurn ? ((players[item.id] || {}).sort || 0) * 2 + 'px' : '6px',
+        left:
+          (isRed
+            ? ((players[item.id] || {}).sort || 0) * 20
+            : 35 - ((players[item.id] || {}).sort || 0) * 15) + 'px',
       }"
     >
       <image :src="item.avatar || '../static/user-icon.png'" mode="widthFix" />
       <text
-        v-if="youTurn && index === 0"
+        v-if="youTurn && ((players[item.id] || {}).sort || 0) === 0"
         :style="{ backgroundColor: isRed ? '#ff6060' : '#5fadff' }"
         >{{ isRed ? "红队" : "蓝队" }}</text
       >
@@ -59,7 +84,7 @@ watch(
         color: isRed ? '#ff6060' : '#5fadff',
         [isRed ? 'left' : 'right']: 0,
       }"
-      >{{ team[0].name }}</text
+      >{{ firstName }}</text
     >
   </view>
 </template>