页面调整

src/components/BowTarget.vue

@@ -150,8 +150,8 @@ const simulShoot2 = async () => {
         v-if="blueScores.length && showRoundTips && showLatestArrow"
         class="round-tip fade-in-out"
         :style="{
-          left: calcRealX(scores[scores.length - 1].x, 70),
+          left: calcRealX(blueScores[blueScores.length - 1].x, 70),
-          top: calcRealY(scores[scores.length - 1].y, 100),
+          top: calcRealY(blueScores[blueScores.length - 1].y, 100),
         }"
         >{{ blueScores[blueScores.length - 1].ring }}<text>环</text></view
       >

src/components/PlayerScore.vue

@@ -12,10 +12,6 @@ defineProps({
     type: Array,
     default: () => [],
   },
-  done: {
-    type: Boolean,
-    default: false,
-  },
 });
 const rowCount = new Array(6).fill(0);
 </script>
@@ -23,11 +19,11 @@ const rowCount = new Array(6).fill(0);
 <template>
   <view class="container">
     <image
-      :style="{ opacity: done ? 1 : 0 }"
+      :style="{ opacity: scores.length === 12 ? 1 : 0 }"
       src="../static/checked-green.png"
       mode="widthFix"
     />
-    <image :src="avatar" mode="widthFix" />
+    <image :src="avatar || '../static/user-icon.png'" mode="widthFix" />
     <text>{{ name }}</text>
     <view>
       <view>

src/components/PlayerScore2.vue

@@ -52,7 +52,7 @@ const rowCount = new Array(6).fill(0);
       />
       <view v-if="rank > 3" class="rank-view">{{ rank }}</view>
       <image
-        :src="avatar"
+        :src="avatar || '../static/user-icon.png'"
         mode="widthFix"
         :style="{ borderColor: topThreeColors[rank - 1] || '#fff' }"
       />

src/components/RoundEndTip.vue

@@ -57,16 +57,16 @@ onUnmounted(() => {
     <text>第{{ round }}轮射击结束</text>
     <block v-if="!isFinal">
       <view class="point-view1">
-        <text>本轮红队</text>
+        <text>本轮蓝队</text>
         <text>{{
-          (roundData.redArrows || []).reduce(
+          (roundData.blueArrows || []).reduce(
             (last, next) => last + next.ring,
             0
           )
         }}</text>
-        <text>环，蓝队</text>
+        <text>环，红队</text>
         <text>{{
-          (roundData.blueArrows || []).reduce(
+          (roundData.redArrows || []).reduce(
             (last, next) => last + next.ring,
             0
           )

src/pages/battle-room.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, onUnmounted } from "vue";
+import { ref, watch, onMounted, onUnmounted } from "vue";
 import { onLoad } from "@dcloudio/uni-app";
 import Container from "@/components/Container.vue";
 import PlayerSeats from "@/components/PlayerSeats.vue";
@@ -34,6 +34,7 @@ const redTeam = ref([]);
 const blueTeam = ref([]);
 const currentShooterId = ref(0);
 const players = ref([]);
+const playersSorted = ref([]);
 const currentRound = ref(1);
 const totalRounds = ref(0);
 const start = ref(false);
@@ -54,6 +55,21 @@ const halfTimeTip = ref(false);
 const isFinalShoot = ref(false);
 const total = ref(90);
 
+watch(
+  () => [players.value, playersScores.value],
+  ([n_players, n_scores]) => {
+    if (n_players.length) {
+      playersSorted.value = Object.keys(n_scores)
+        .sort((a, b) => n_scores[b].length - n_scores[a].length)
+        .map((pid) => n_players.find((p) => p.id == pid));
+    }
+  },
+  {
+    deep: true, // 添加深度监听
+    immediate: true,
+  }
+);
+
 onLoad(async (options) => {
   if (options.battleId) {
     const battleInfo = uni.getStorageSync(`battle-${options.battleId}`);
@@ -243,6 +259,26 @@ async function onReceiveMessage(messages = []) {
           const isRed = redTeam.value.find((item) => item.id === msg.userId);
           if (isRed) scores.value = [msg.target];
           else blueScores.value = [msg.target];
+          if (roundResults.value[currentRound.value - 1]) {
+            if (isRed && roundResults.value[currentRound.value - 1].redArrows) {
+              roundResults.value[currentRound.value - 1].redArrows.push(
+                msg.target
+              );
+            }
+            if (
+              !isRed &&
+              roundResults.value[currentRound.value - 1].blueArrows
+            ) {
+              roundResults.value[currentRound.value - 1].blueArrows.push(
+                msg.target
+              );
+            }
+          } else {
+            roundResults.value.push({
+              redArrows: isRed ? [msg.target] : [],
+              blueArrows: isRed ? [] : [msg.target],
+            });
+          }
         }
         if (room.value.battleType === 2) {
           scores.value.push(msg.target);
@@ -261,7 +297,7 @@ async function onReceiveMessage(messages = []) {
           currentRedPoint.value = result.redScore;
           bluePoints.value += result.blueScore;
           redPoints.value += result.redScore;
-          roundResults.value = result.roundResults;
+          // roundResults.value = result.roundResults;
           currentRound.value = result.currentRound + 1;
           if (result.currentRound < 5) showRoundTip.value = true;
         }
@@ -419,14 +455,11 @@ onUnmounted(() => {
       />
       <PlayerScore
         v-if="room.battleType === 2"
-        v-for="(player, index) in players"
+        v-for="(player, index) in playersSorted"
         :key="index"
         :name="player.name"
         :avatar="player.avatar"
         :scores="playersScores[player.id] || []"
-        :done="
-          playersScores[player.id] && playersScores[player.id].length === 12
-        "
       />
     </view>
     <Timer :seq="timerSeq" />

src/pages/melee-match.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, onUnmounted } from "vue";
+import { ref, watch, onMounted, onUnmounted } from "vue";
 import { onLoad } from "@dcloudio/uni-app";
 import Container from "@/components/Container.vue";
 import BowTarget from "@/components/BowTarget.vue";
@@ -32,10 +32,26 @@ const tips = ref("即将开始...");
 const seq = ref(0);
 const timerSeq = ref(0);
 const players = ref([]);
+const playersSorted = ref([]);
 const playersScores = ref({});
 const halfTimeTip = ref(false);
 const onComplete = ref(null);
 
+watch(
+  () => [players.value, playersScores.value],
+  ([n_players, n_scores]) => {
+    if (n_players.length) {
+      playersSorted.value = Object.keys(n_scores)
+        .sort((a, b) => n_scores[b].length - n_scores[a].length)
+        .map((pid) => n_players.find((p) => p.id == pid));
+    }
+  },
+  {
+    deep: true, // 添加深度监听
+    immediate: true,
+  }
+);
+
 onLoad(async (options) => {
   if (options.battleId) {
     const battleInfo = uni.getStorageSync(`battle-${options.battleId}`);
@@ -188,14 +204,11 @@ onUnmounted(() => {
         <view :style="{ paddingBottom: '20px' }">
           <PlayerScore
             v-if="start"
-            v-for="(player, index) in players"
+            v-for="(player, index) in playersSorted"
             :key="index"
             :name="player.name"
             :avatar="player.avatar"
             :scores="playersScores[player.id] || []"
-            :done="
-              playersScores[player.id] && playersScores[player.id].length === 12
-            "
           />
         </view>
         <Timer :seq="timerSeq" :callBack="readyToGo" />

src/pages/team-match.vue

@@ -140,6 +140,21 @@ async function onReceiveMessage(messages = []) {
       const isRed = redTeam.value.find((item) => item.id === msg.userId);
       if (isRed) scores.value = [msg.target];
       else blueScores.value = [msg.target];
+      if (roundResults.value[currentRound.value - 1]) {
+        if (isRed && roundResults.value[currentRound.value - 1].redArrows) {
+          roundResults.value[currentRound.value - 1].redArrows.push(msg.target);
+        }
+        if (!isRed && roundResults.value[currentRound.value - 1].blueArrows) {
+          roundResults.value[currentRound.value - 1].blueArrows.push(
+            msg.target
+          );
+        }
+      } else {
+        roundResults.value.push({
+          redArrows: isRed ? [msg.target] : [],
+          blueArrows: isRed ? [] : [msg.target],
+        });
+      }
     }
     if (msg.constructor === MESSAGETYPES.CurrentRoundEnded) {
       const result = msg.preRoundResult;
@@ -150,7 +165,7 @@ async function onReceiveMessage(messages = []) {
       currentRedPoint.value = result.redScore;
       bluePoints.value += result.blueScore;
       redPoints.value += result.redScore;
-      roundResults.value = result.roundResults;
+      // roundResults.value = result.roundResults;
       currentRound.value = result.currentRound + 1;
       if (result.currentRound < 5) showRoundTip.value = true;
     }