细节优化

src/pages/team-match.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, onUnmounted } from "vue";
+import { ref, onMounted, onUnmounted, nextTick } from "vue";
 import { onLoad, onShow, onHide } from "@dcloudio/uni-app";
 import Container from "@/components/Container.vue";
 import BattleHeader from "@/components/BattleHeader.vue";
@@ -16,7 +16,7 @@ import RoundEndTip from "@/components/RoundEndTip.vue";
 import TestDistance from "@/components/TestDistance.vue";
 import { getCurrentGameAPI, matchGameAPI } from "@/apis";
 import { isGameEnded } from "@/util";
-import { MESSAGETYPES, roundsName, getMessageTypeName } from "@/constants";
+import { MESSAGETYPES, roundsName } from "@/constants";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
 const store = useStore();
@@ -83,14 +83,6 @@ function recoverData(battleInfo) {
         redPoints.value += 2;
       }
     });
-    if (battleInfo.roundResults[battleInfo.roundResults.length - 1]) {
-      scores.value = battleInfo.roundResults[
-        battleInfo.roundResults.length - 1
-      ].redArrows.filter((item) => !!item.playerId);
-      blueScores.value = battleInfo.roundResults[
-        battleInfo.roundResults.length - 1
-      ].blueArrows.filter((item) => !!item.playerId);
-    }
     if (
       battleInfo.redTeam[0].shotHistory[battleInfo.currentRound] ||
       battleInfo.blueTeam[0].shotHistory[battleInfo.currentRound]
@@ -128,16 +120,25 @@ function recoverData(battleInfo) {
         }
       }
     }
+    const lastIndex = roundResults.value.length - 1;
+    if (roundResults.value[lastIndex]) {
+      const redArrows = roundResults.value[lastIndex].redArrows;
+      scores.value = [...redArrows].filter((item) => !!item.playerId);
+      const blueArrows = roundResults.value[lastIndex].blueArrows;
+      blueScores.value = [...blueArrows].filter((item) => !!item.playerId);
+    }
   }
   // if (battleInfo.status !== 11) return;
   if (battleInfo.firePlayerIndex) {
     currentShooterId.value = battleInfo.firePlayerIndex;
-    if (redTeam.value[0].id === currentShooterId.value)
-      tips.value = "请红队射箭";
-    else tips.value = "请蓝队射箭";
-    tips.value += isFinalShoot.value
+    const teamPrefix =
+      redTeam.value[0].id === currentShooterId.value
+        ? "请红队射箭 - "
+        : "请蓝队射箭 - ";
+    const roundSuffix = isFinalShoot.value
       ? "决金箭"
       : `第${roundsName[currentRound.value]}轮`;
+    tips.value = teamPrefix + roundSuffix;
   }
   if (battleInfo.fireTime > 0) {
     const remain = Date.now() / 1000 - battleInfo.fireTime;
@@ -150,72 +151,53 @@ function recoverData(battleInfo) {
     }
   }
 }
-
-onLoad(async (options) => {
-  if (options.battleId) {
-    const battleInfo = uni.getStorageSync("current-battle");
-    if (battleInfo) recoverData(battleInfo);
-    setTimeout(getCurrentGameAPI, 2000);
-  } else {
-    gameType.value = options.gameType;
-    teamSize.value = options.teamSize;
-    if (gameType.value && teamSize.value) {
-      await matchGameAPI(true, gameType.value, teamSize.value);
-    }
-  }
-});
 async function stopMatch() {
   uni.$showHint(3);
 }
 
 async function onReceiveMessage(messages = []) {
   messages.forEach((msg) => {
-    if (
-      !msg.id ||
-      (battleId.value && msg.id === battleId.value) ||
-      msg.constructor === MESSAGETYPES.WaitForAllReady
-    ) {
-      console.log("收到消息：", getMessageTypeName(msg.constructor), msg);
-    }
     if (msg.constructor === MESSAGETYPES.WaitForAllReady) {
       // 这里会掉多次;
-      onComplete.value = () => {
-        battleId.value = msg.id;
-        redTeam.value = msg.groupUserStatus.redTeam;
-        blueTeam.value = msg.groupUserStatus.blueTeam;
-        uni.$hideHint();
-      };
+      if (!onComplete.value) {
+        onComplete.value = () => {
+          battleId.value = msg.id;
+          redTeam.value = msg.groupUserStatus.redTeam;
+          blueTeam.value = msg.groupUserStatus.blueTeam;
+          uni.$hideHint();
+        };
+      }
     }
     if (msg.id !== battleId.value) return;
     if (msg.constructor === MESSAGETYPES.AllReady) {
       start.value = true;
       totalRounds.value = msg.groupUserStatus.config.maxRounds;
-      roundResults.value.push({
-        redArrows: [],
-        blueArrows: [],
-      });
+      roundResults.value = [
+        {
+          redArrows: [],
+          blueArrows: [],
+        },
+      ];
     }
     if (msg.constructor === MESSAGETYPES.ToSomeoneShoot) {
       if (currentShooterId.value !== msg.userId) {
         seq.value += 1;
         currentShooterId.value = msg.userId;
-        if (redTeam.value[0].id === currentShooterId.value) {
-          tips.value = "请红队射箭-";
-        } else {
-          tips.value = "请蓝队射箭-";
-        }
-        if (isFinalShoot.value) {
-          tips.value += "决金箭";
-        } else {
-          tips.value += `第${roundsName[currentRound.value]}轮`;
-        }
+        const teamPrefix =
+          redTeam.value[0].id === currentShooterId.value
+            ? "请红队射箭 - "
+            : "请蓝队射箭 - ";
+        const roundSuffix = isFinalShoot.value
+          ? "决金箭"
+          : `第${roundsName[currentRound.value]}轮`;
+        tips.value = teamPrefix + roundSuffix;
       }
     }
     if (msg.constructor === MESSAGETYPES.ShootResult) {
       if (currentShooterId.value !== msg.userId) return;
       const isRed = redTeam.value.find((item) => item.id === msg.userId);
-      if (isRed) scores.value.push(msg.target);
-      else blueScores.value.push(msg.target);
+      if (isRed) scores.value.push({ ...msg.target });
+      else blueScores.value.push({ ...msg.target });
       if (!roundResults.value[currentRound.value - 1]) {
         roundResults.value.push({
           redArrows: [],
@@ -224,7 +206,7 @@ async function onReceiveMessage(messages = []) {
       }
       roundResults.value[currentRound.value - 1][
         isRed ? "redArrows" : "blueArrows"
-      ].push(msg.target);
+      ].push({ ...msg.target });
     }
     if (msg.constructor === MESSAGETYPES.CurrentRoundEnded) {
       const result = msg.preRoundResult;
@@ -289,6 +271,24 @@ const onBack = () => {
     uni.$showHint(3);
   }
 };
+
+onLoad(async (options) => {
+  if (options.battleId) {
+    const battleInfo = uni.getStorageSync("current-battle");
+    if (battleInfo) {
+      await nextTick(() => {
+        recoverData(battleInfo);
+      });
+      setTimeout(getCurrentGameAPI, 2000);
+    }
+  } else {
+    gameType.value = options.gameType;
+    teamSize.value = options.teamSize;
+    if (gameType.value && teamSize.value) {
+      await matchGameAPI(true, gameType.value, teamSize.value);
+    }
+  }
+});
 onMounted(() => {
   uni.setKeepScreenOn({
     keepScreenOn: true,
@@ -334,11 +334,7 @@ onHide(() => {
   >
     <view class="container">
       <block v-if="battleId">
-        <BattleHeader
-          v-if="!start && redTeam.length && blueTeam.length"
-          :redTeam="redTeam"
-          :blueTeam="blueTeam"
-        />
+        <BattleHeader v-if="!start" :redTeam="redTeam" :blueTeam="blueTeam" />
         <TestDistance v-if="!start" :guide="false" />
         <ShootProgress
           :show="start"
@@ -376,6 +372,7 @@ onHide(() => {
           :mode="isFinalShoot ? 'tall' : 'normal'"
         >
           <RoundEndTip
+            v-if="showRoundTip"
             :isFinal="isFinalShoot"
             :round="currentRound - 1"
             :bluePoint="currentBluePoint"