完成新手试炼接口调试

src/components/BowTarget.vue

@@ -44,7 +44,7 @@ function calcRealY(num) {
 <template>
   <view class="container">
     <view class="header">
-      <!-- <text v-if="debug" class="header-tips">大人，请射箭</text> -->
+      <text v-if="debug" class="header-tips">大人，请射箭</text>
       <text v-if="totalRound > 0" class="round-count">{{
         currentRound + "/" + totalRound
       }}</text>
@@ -77,7 +77,6 @@ function calcRealY(num) {
 }
 .target {
   position: relative;
-  overflow: hidden;
 }
 .target > image:last-child {
   width: 100%;
@@ -104,6 +103,7 @@ function calcRealY(num) {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  margin-bottom: 20px;
 }
 .header > image:first-child {
   width: 40px;
@@ -127,6 +127,7 @@ function calcRealY(num) {
 .footer > image {
   width: 40px;
   height: 40px;
+  border-radius: 50%;
 }
 .container > text {
   width: 100%;

src/components/CreateRoom.vue

@@ -13,7 +13,7 @@ const toBattleRoom = () => {
 };
 </script>
 <template>
-  <view v-if="!warnning" class="container">
+  <view class="container">
     <image
       v-if="step === 1"
       src="../static/choose-battle-mode.png"

src/pages/battle-room.vue

@@ -13,9 +13,7 @@ import PlayersRow from "@/components/PlayersRow.vue";
 const step = ref(1);
 const seats = new Array(10).fill(1);
 const players = new Array(7).fill(1);
-const teams = [
-  { name: "选手1", avatar: "../static/avatar.png" },
-];
+const teams = [{ name: "选手1", avatar: "../static/avatar.png" }];
 </script>
 
 <template>
@@ -61,7 +59,7 @@ const teams = [
             <text :style="{ color: '#fed847' }">请预先射几箭测试</text>
             <text>请确保射击距离只有5米</text>
           </view>
-          <BowPower power="45" />
+          <BowPower :power="45" />
         </view>
       </Guide>
       <BowTarget tips="本次射程5.2米，已达距离要求" />
@@ -70,7 +68,7 @@ const teams = [
     <view v-if="step === 3">
       <ShootProgress tips="请红队射箭-第一轮" />
       <PlayersRow :blueTeam="teams" :redTeam="teams" />
-      <BowTarget power="45" currentRound="1" totalRound="3" debug />
+      <BowTarget :power="45" currentRound="1" totalRound="3" debug />
       <BattleFooter :blueTeam="[6, 2, 3]" :redTeam="[4, 5, 2]" />
     </view>
   </view>

src/pages/equipment-debug.vue

@@ -12,7 +12,7 @@ const getMyDevice = async () => {
 </script>
 
 <template>
-  <Container bgType="1" title="弓箭调试">
+  <Container :bgType="1" title="弓箭调试">
     <!-- <Guide>
       <view class="guide-tips">
         <text>请预先射几箭测试</text>

src/pages/first-try.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from "vue";
+import { ref, onUnmounted } from "vue";
 import Guide from "@/components/Guide.vue";
 import SButton from "@/components/SButton.vue";
 import Swiper from "@/components/Swiper.vue";
@@ -8,8 +8,17 @@ import ShootProgress from "@/components/ShootProgress.vue";
 import ScoreResult from "@/components/ScoreResult.vue";
 import ScorePanel from "@/components/ScorePanel.vue";
 import Container from "@/components/Container.vue";
-const scores = ref(new Array(10).fill(9));
+import { createPractiseAPI } from "@/apis";
+import { MESSAGETYPES } from "@/constants";
+import websocket from "@/websocket";
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+const store = useStore();
+const { user } = storeToRefs(store);
+const scores = ref([]);
 const step = ref(0);
+const showScore = ref(false);
+const total = 12;
 const stepButtonTexts = [
   "开始",
   "进入下一个任务",
@@ -18,6 +27,29 @@ const stepButtonTexts = [
   "",
   "退出新手试炼",
 ];
+
+const onReady = async () => {
+  const result = await createPractiseAPI(total);
+  const token = uni.getStorageSync("token");
+
+  websocket.createWebSocket(token, (content) => {
+    const messages = JSON.parse(content).data.updates || [];
+    messages.forEach((msg) => {
+      if (msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
+        scores.value.push(msg.target);
+        if (scores.value.length === total) {
+          showScore.value = true;
+          websocket.closeWebSocket();
+        }
+      }
+    });
+  });
+};
+
+onUnmounted(() => {
+  websocket.closeWebSocket();
+});
+
 const nextStep = () => {
   if (step.value === 0) {
     step.value = 1;
@@ -27,18 +59,17 @@ const nextStep = () => {
     step.value = 3;
   } else if (step.value === 3) {
     step.value = 4;
+    onReady();
   } else if (step.value === 5) {
     uni.navigateBack({
       delta: 1,
     });
   }
 };
-const showScore = ref(false);
-setTimeout(() => {
-  showScore.value = true;
-}, 1000);
+
 const onClose = () => {
   showScore.value = false;
+  websocket.closeWebSocket();
   setTimeout(() => {
     step.value = 5;
   }, 500);
@@ -46,10 +77,10 @@ const onClose = () => {
 </script>
 
 <template>
-  <Container bgType="1" title="新手试炼场">
+  <Container :bgType="1" title="新手试炼场">
     <Guide v-if="step !== 4" :tall="step === 2 || step === 5">
       <text v-if="step === 0">
-        hi，<text :style="{ color: '#fed847' }">Rocker</text>
+        hi，<text :style="{ color: '#fed847' }">{{ user.nickName }}</text>
         ，这是新人必刷小任务，0基础小白也能快速掌握弓箭技巧和游戏规则哦~：）
       </text>
       <text v-if="step === 1"
@@ -109,21 +140,33 @@ const onClose = () => {
         ]"
       />
     </view>
-    <ShootProgress v-if="step === 4" tips="请开始连续射箭" total="10" />
+    <ShootProgress
+      v-if="step === 4"
+      tips="请开始连续射箭"
+      :total="100"
+      :start="true"
+    />
     <BowTarget
-      avatar="../static/avatar.png"
-      power="45"
+      :avatar="user.avatarUrl"
+      :power="45"
       :debug="step === 2"
       v-if="step === 2 || step === 4"
       :tips="step === 4 ? '' : '本次射程5.2米，已达到距离要求'"
+      :scores="scores"
+    />
+    <ScorePanel
+      v-if="step === 4"
+      :total="total"
+      :rowCount="6"
+      :scores="scores.map((s) => s.ring)"
     />
-    <ScorePanel v-if="step === 4" :scores="scores" :total="12" :rowCount="6" />
     <ScoreResult
-      :total="12"
+      :total="total"
       :rowCount="6"
       :show="showScore"
       v-if="step === 4"
       :onClose="onClose"
+      :scores="scores.map((s) => s.ring)"
     />
     <SButton v-if="step !== 4" :onClick="nextStep">{{
       stepButtonTexts[step]

src/pages/match-room.vue

@@ -19,7 +19,7 @@ const teams = [
     <view>
       <ShootProgress tips="请红队射箭-第一轮" />
       <PlayersRow :blueTeam="teams" :redTeam="teams" />
-      <BowTarget power="45" currentRound="1" totalRound="3" debug />
+      <BowTarget :power="45" currentRound="1" totalRound="3" debug />
       <PlayerScore
         name="某某选手"
         avatar="../static/avatar.png"

src/pages/practise-one.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, onUnmounted } from "vue";
+import { ref, onUnmounted } from "vue";
 import AppBackground from "@/components/AppBackground.vue";
 import Header from "@/components/Header.vue";
 import ShootProgress from "@/components/ShootProgress.vue";
@@ -20,8 +20,8 @@ const onReady = async () => {
   start.value = true;
   const token = uni.getStorageSync("token");
 
-  websocket.createWebSocket(token, (result) => {
-    const messages = JSON.parse(result).data.updates || [];
+  websocket.createWebSocket(token, (content) => {
+    const messages = JSON.parse(content).data.updates || [];
     messages.forEach((msg) => {
       if (msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
         scores.value.push(msg.target);

src/pages/practise-two.vue

@@ -20,8 +20,8 @@ const onReady = async () => {
   start.value = true;
   const token = uni.getStorageSync("token");
 
-  websocket.createWebSocket(token, (result) => {
-    const messages = JSON.parse(result).data.updates || [];
+  websocket.createWebSocket(token, (content) => {
+    const messages = JSON.parse(content).data.updates || [];
     messages.forEach((msg) => {
       if (msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
         scores.value.push(msg.target);

src/websocket.js

@@ -30,7 +30,10 @@ function createWebSocket(token, onMessage) {
 }
 
 function closeWebSocket() {
-  if (socket) socket.close();
+  if (socket) {
+    socket.close();
+    stopHeartbeat();
+  }
 }
 
 /**