update:分包、对接个人练习

src/pages/practise-two.vue

@@ -14,10 +14,9 @@ import audioManager from "@/audioManager";
 
 import {
   createPractiseAPI,
-  startPractiseAPI,
-  endPractiseAPI,
   getPractiseAPI,
 } from "@/apis";
+import { connectMatchWebSocket, closeMatchWebSocket } from "@/matchWebsocket";
 import { sharePractiseData } from "@/canvas";
 import { wxShare, debounce } from "@/util";
 import { MESSAGETYPESV2 } from "@/constants";
@@ -26,7 +25,7 @@ import useStore from "@/store";
 import { storeToRefs } from "pinia";
 import {onLoad} from "@dcloudio/uni-app";
 const store = useStore();
-const { user } = storeToRefs(store);
+const { user, device } = storeToRefs(store);
 
 const start = ref(false);
 const scores = ref([]);
@@ -39,6 +38,7 @@ const practiseId = ref("");
 const showGuide = ref(false);
 const targetType = ref(1);
 const sharing = ref(false);
+const RESULT_TIP_CDN = "https://static.shelingxingqiu.com/shootmini/static";
 
 onLoad((options) => {
   if (options.target) {
@@ -46,8 +46,31 @@ onLoad((options) => {
   }
 });
 
+const createPractise = async () => {
+  closeMatchWebSocket({ reason: "practice-recreate" });
+  const result = await createPractiseAPI(
+    total,
+    3600,
+    targetType.value,
+    device.value.deviceId
+  );
+  if (result?.id) practiseId.value = result.id;
+  if (!result?.serverAddr) {
+    uni.showToast({
+      title: "练习连接信息异常，请重试",
+      icon: "none",
+    });
+    return null;
+  }
+  connectMatchWebSocket({
+    serverAddr: result.serverAddr,
+    matchId: result.id,
+    userId: user.value.id,
+  });
+  return result;
+};
+
 const onReady = async () => {
-  await startPractiseAPI();
   scores.value = [];
   isSvip.value = false;
   xRingStreak.value = 0; // 新一局开始，重置 X 环连续计数
@@ -55,8 +78,10 @@ const onReady = async () => {
   audioManager.play("练习开始");
 };
 
-const onOver = async () => {
-  practiseResult.value = await getPractiseAPI(practiseId.value);
+const onOver = async (message) => {
+  practiseResult.value = Array.isArray(message?.details)
+    ? message
+    : await getPractiseAPI(practiseId.value);
   start.value = false;
 };
 
@@ -86,14 +111,14 @@ async function onReceiveMessage(msg) {
   if (msg.type === MESSAGETYPESV2.ShootResult) {
     const prevLen = scores.value.length;
     isSvip.value = msg.sVip === true;
-    scores.value = msg.details;
+    scores.value = Array.isArray(msg.details) ? msg.details : scores.value;
     // 有新箭时取最后一箭判断是否 10 环及以上并检测连续计数
     if (scores.value.length > prevLen) {
       const latestArrow = scores.value[scores.value.length - 1];
       checkAndPlayTententen(isTenPlusRing(latestArrow));
     }
   } else if (msg.type === MESSAGETYPESV2.BattleEnd) {
-    setTimeout(onOver, 1500);
+    setTimeout(() => onOver(msg), 1500);
   }
   // messages.forEach((msg) => {
   //   if (msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
@@ -126,11 +151,17 @@ async function onComplete() {
     scores.value = [];
     isSvip.value = false;
     xRingStreak.value = 0; // 重新开始练习，重置 X 环连续计数
-    const result = await createPractiseAPI(total, 3600);
-    if (result) practiseId.value = result.id;
+    await createPractise();
   }
 }
 
+const getResultTipSrc = (result = {}) => {
+  const validCount = (result.details || []).filter(
+    (arrow) => arrow.x !== -30 && arrow.y !== -30
+  ).length;
+  return `${RESULT_TIP_CDN}/${validCount < total ? "2un" : ""}finish-tip.png`;
+};
+
 const onClickShare = debounce(async () => {
   if (sharing.value) return;
   sharing.value = true;
@@ -153,8 +184,7 @@ onMounted(async () => {
   });
   uni.$on("socket-inbox", onReceiveMessage);
   uni.$on("share-image", onClickShare);
-  const result = await createPractiseAPI(total, 3600, targetType.value);
-  if (result) practiseId.value = result.id;
+  await createPractise();
 });
 
 onBeforeUnmount(() => {
@@ -164,7 +194,7 @@ onBeforeUnmount(() => {
   uni.$off("socket-inbox", onReceiveMessage);
   uni.$off("share-image", onClickShare);
   audioManager.stopAll();
-  endPractiseAPI();
+  closeMatchWebSocket({ reason: "practice-leave" });
 });
 </script>
 
@@ -211,13 +241,7 @@ onBeforeUnmount(() => {
           :rowCount="9"
           :onClose="onComplete"
           :result="practiseResult"
-          :tipSrc="`../static/${
-            practiseResult.details.filter(
-              (arrow) => arrow.x !== -30 && arrow.y !== -30
-            ).length < total
-              ? '2un'
-              : ''
-          }finish-tip.png`"
+          :tipSrc="getResultTipSrc(practiseResult)"
         />
         <canvas class="share-canvas" id="shareCanvas" type="2d"></canvas>
       </block>