细节优化

src/pages/battle-room.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch, onMounted, onUnmounted } from "vue";
+import { ref, watch, onMounted, onUnmounted, nextTick } from "vue";
 import { onLoad, onShow, onHide } from "@dcloudio/uni-app";
 import Container from "@/components/Container.vue";
 import PlayerSeats from "@/components/PlayerSeats.vue";
@@ -64,6 +64,8 @@ const isFinalShoot = ref(false);
 const total = ref(15);
 const battleType = ref(0);
 const isEnded = ref(false);
+const refreshRoomTimer = ref(null);
+const refreshTimer = ref(null);
 
 watch(
   () => [players.value, playersScores.value],
@@ -125,14 +127,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]
@@ -170,14 +164,22 @@ 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 =
-        tips.value = "请红队射箭";
+        redTeam.value[0].id === currentShooterId.value
-      else tips.value = "请蓝队射箭";
+          ? "请红队射箭 - "
+          : "请蓝队射箭 - ";
       tips.value += isFinalShoot.value
         ? "决金箭"
         : `第${roundsName[currentRound.value]}轮`;
@@ -224,7 +226,7 @@ async function refreshRoomData() {
   const result = await getRoomAPI(roomNumber.value);
   room.value = result;
   battleType.value = result.battleType;
-  result.members.some((m) => {
+  (result.members || []).some((m) => {
     if (m.userInfo.id === result.creator) {
       owner.value = {
         id: m.userInfo.id,
@@ -278,14 +280,8 @@ const startGame = async () => {
 
 async function onReceiveMessage(messages = []) {
   messages.forEach((msg) => {
-    if (
-      msg.roomNumber === roomNumber.value ||
-      (battleId.value && msg.id === battleId.value) ||
-      msg.constructor === MESSAGETYPES.WaitForAllReady
-    ) {
-      console.log("收到消息：", getMessageTypeName(msg.constructor), msg);
-    }
     if (msg.constructor === MESSAGETYPES.WaitForAllReady) {
+      if (refreshRoomTimer.value) clearInterval(refreshRoomTimer.value);
       // 这里会掉多次;
       battleId.value = msg.id;
       step.value = 2;
@@ -389,26 +385,23 @@ async function onReceiveMessage(messages = []) {
           if (currentShooterId.value !== msg.userId) {
             seq.value += 1;
             currentShooterId.value = msg.userId;
-            if (redTeam.value[0].id === currentShooterId.value) {
+            tips.value =
-              tips.value = "请红队射箭-";
+              redTeam.value[0].id === currentShooterId.value
-            } else {
+                ? "请红队射箭 - "
-              tips.value = "请蓝队射箭-";
+                : "请蓝队射箭 - ";
-            }
+            tips.value += isFinalShoot.value
-            if (isFinalShoot.value) {
+              ? "决金箭"
-              tips.value += "决金箭";
+              : `第${roundsName[currentRound.value]}轮`;
-            } else {
-              tips.value += `第${roundsName[currentRound.value]}轮`;
-            }
           }
         }
       }
       if (msg.constructor === MESSAGETYPES.ShootResult) {
         if (battleType.value === 1) {
-          // 会有蓝队射箭时间，红队射箭也有结果返回的情况
+          // 会有在蓝队射箭时间，红队射箭也有结果返回的情况
           if (currentShooterId.value !== msg.userId) return;
           const isRed = redTeam.value.find((item) => item.id === msg.userId);
-          if (isRed) scores.value.push(msg.target);
+          if (isRed) scores.value.push({ ...msg.target });
-          else blueScores.value.push(msg.target);
+          else blueScores.value.push({ ...msg.target });
           if (!roundResults.value[currentRound.value - 1]) {
             roundResults.value.push({
               redArrows: [],
@@ -417,7 +410,7 @@ async function onReceiveMessage(messages = []) {
           }
           roundResults.value[currentRound.value - 1][
             isRed ? "redArrows" : "blueArrows"
-          ].push(msg.target);
+          ].push({ ...msg.target });
         }
         if (battleType.value === 2 && msg.userId === user.value.id) {
           scores.value.push({ ...msg.target });
@@ -529,11 +522,16 @@ const onBack = () => {
 onLoad(async (options) => {
   if (options.battleId) {
     const battleInfo = uni.getStorageSync("current-battle");
-    if (battleInfo) recoverData(battleInfo);
+    if (battleInfo) {
+      await nextTick(() => {
+        recoverData(battleInfo);
+      });
       setTimeout(getCurrentGameAPI, 2000);
+    }
   } else if (options.roomNumber) {
     roomNumber.value = options.roomNumber;
     refreshRoomData();
+    refreshRoomTimer.value = setInterval(refreshRoomData, 2000);
   }
 });
 
@@ -545,6 +543,8 @@ onMounted(() => {
 });
 
 onUnmounted(() => {
+  if (refreshRoomTimer.value) clearInterval(refreshRoomTimer.value);
+  if (refreshTimer.value) clearInterval(refreshTimer.value);
   uni.setKeepScreenOn({
     keepScreenOn: false,
   });
@@ -554,18 +554,14 @@ onUnmounted(() => {
   }
 });
 
-const refreshTimer = ref(null);
 onShow(async () => {
   if (battleId.value) {
     if (!isEnded.value && (await isGameEnded(battleId.value))) return;
     getCurrentGameAPI();
     const refreshData = () => {
       const lastAwakeTime = uni.getStorageSync("last-awake-time");
-      if (lastAwakeTime) {
+      if (lastAwakeTime) getCurrentGameAPI();
-        getCurrentGameAPI();
+      else clearInterval(refreshTimer.value);
-      } else {
-        clearInterval(refreshTimer.value);
-      }
     };
     refreshTimer.value = setInterval(refreshData, 2000);
   } else {
@@ -703,6 +699,7 @@ onHide(() => {
       :mode="isFinalShoot ? 'tall' : 'normal'"
     >
       <RoundEndTip
+        v-if="showRoundTip"
         :isFinal="isFinalShoot"
         :round="currentRound - 1"
         :bluePoint="currentBluePoint"

src/pages/melee-match.vue

@@ -95,6 +95,7 @@ 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;
@@ -110,13 +111,6 @@ async function stopMatch() {
 
 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 = () => {
         // 这里会掉多次;

src/pages/ranking.vue

@@ -195,7 +195,9 @@ onShow(async () => {
           <view>
             <text>赛季胜率</text>
             <text :style="{ color: '#FF507E' }">{{
-              rankData.user.avg_win ? rankData.user.avg_win * 100 + "%" : "-"
+              rankData.user.avg_win
+                ? Number((rankData.user.avg_win * 100).toFixed(2)) + "%"
+                : "-"
             }}</text>
           </view>
         </view>

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)
+    const teamPrefix =
-      tips.value = "请红队射箭";
+      redTeam.value[0].id === currentShooterId.value
-    else tips.value = "请蓝队射箭";
+        ? "请红队射箭 - "
-    tips.value += isFinalShoot.value
+        : "请蓝队射箭 - ";
+    const roundSuffix = isFinalShoot.value
       ? "决金箭"
       : `第${roundsName[currentRound.value]}轮`;
+    tips.value = teamPrefix + roundSuffix;
   }
   if (battleInfo.fireTime > 0) {
     const remain = Date.now() / 1000 - battleInfo.fireTime;
@@ -150,35 +151,15 @@ 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) {
       // 这里会掉多次;
+      if (!onComplete.value) {
         onComplete.value = () => {
           battleId.value = msg.id;
           redTeam.value = msg.groupUserStatus.redTeam;
@@ -186,36 +167,37 @@ async function onReceiveMessage(messages = []) {
           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({
+      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) {
+        const teamPrefix =
-          tips.value = "请红队射箭-";
+          redTeam.value[0].id === currentShooterId.value
-        } else {
+            ? "请红队射箭 - "
-          tips.value = "请蓝队射箭-";
+            : "请蓝队射箭 - ";
-        }
+        const roundSuffix = isFinalShoot.value
-        if (isFinalShoot.value) {
+          ? "决金箭"
-          tips.value += "决金箭";
+          : `第${roundsName[currentRound.value]}轮`;
-        } else {
+        tips.value = teamPrefix + roundSuffix;
-          tips.value += `第${roundsName[currentRound.value]}轮`;
-        }
       }
     }
     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);
+      if (isRed) scores.value.push({ ...msg.target });
-      else blueScores.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
+        <BattleHeader v-if="!start" :redTeam="redTeam" :blueTeam="blueTeam" />
-          v-if="!start && redTeam.length && blueTeam.length"
-          :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"

src/websocket.js

@@ -1,4 +1,4 @@
-import { MESSAGETYPES } from "@/constants";
+import { MESSAGETYPES, getMessageTypeName } from "@/constants";
 let socket = null;
 let heartbeatInterval = null;
 let reconnectTimer = null;
@@ -27,6 +27,7 @@ function createWebSocket(token, onMessage) {
     if (onMessage) onMessage(data.data.updates);
     const msg = data.data.updates[0];
     if (!msg) return;
+    console.log("收到消息：", getMessageTypeName(msg.constructor), msg);
     if (msg.constructor === MESSAGETYPES.BackToGame) {
       const pages = getCurrentPages();
       const currentPage = pages[pages.length - 1];