靶子组件优化

src/components/BowTarget.vue

@@ -6,14 +6,14 @@ import { simulShootAPI } from "@/apis";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
 const store = useStore();
-const { device } = storeToRefs(store);
+const { user, device } = storeToRefs(store);
 
 const props = defineProps({
-  totalRound: {
+  currentRound: {
     type: Number,
     default: 0,
   },
-  currentRound: {
+  totalRound: {
     type: Number,
     default: 0,
   },
@@ -33,31 +33,22 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
-  showLatestArrow: {
-    type: Boolean,
-    default: true,
-  },
-  start: {
-    type: Boolean,
-    default: false,
-  },
-  showE: {
-    type: Boolean,
-    default: true,
-  },
   mode: {
     type: String,
     default: "solo", // solo 单排，team 双排
   },
+  // start: {
+  //   type: Boolean,
+  //   default: false,
+  // },
   stop: {
     type: Boolean,
     default: false,
   },
 });
 
-const showRoundTips = ref(false);
+const latestOne = ref(null);
 // const startCount = ref(false);
-const prevLength = ref(0);
 const timer = ref(null);
 
 // watch(
@@ -72,15 +63,12 @@ const timer = ref(null);
 
 watch(
   () => props.scores,
-  (newVal) => {
-    if (newVal.length - prevLength.value === 1) {
-      if (timer.value) clearTimeout(timer.value);
-      showRoundTips.value = true;
-      timer.value = setTimeout(() => {
-        showRoundTips.value = false;
-      }, 1000);
-    }
-    prevLength.value = newVal.length;
+  (newVal, oldVal) => {
+    latestOne.value = newVal[newVal.length - 1];
+    if (timer.value) clearTimeout(timer.value);
+    timer.value = setTimeout(() => {
+      latestOne.value = null;
+    }, 1000);
   },
   {
     deep: true,
@@ -90,14 +78,11 @@ watch(
 watch(
   () => props.blueScores,
   (newVal) => {
-    if (newVal.length - prevLength.value === 1) {
-      if (timer.value) clearTimeout(timer.value);
-      showRoundTips.value = true;
-      timer.value = setTimeout(() => {
-        showRoundTips.value = false;
-      }, 1000);
-    }
-    prevLength.value = newVal.length;
+    latestOne.value = newVal[newVal.length - 1];
+    if (timer.value) clearTimeout(timer.value);
+    timer.value = setTimeout(() => {
+      latestOne.value = null;
+    }, 1000);
   },
   {
     deep: true,
@@ -133,64 +118,30 @@ const simulShoot2 = async () => {
     <view class="target">
       <view v-if="stop" class="stop-sign">中场休息</view>
       <view
-        v-if="scores.length && showRoundTips && showLatestArrow && showE"
+        v-if="latestOne && user.id === latestOne.playerId"
         class="e-value fade-in-out"
         :style="{
-          left: calcRealX(
-            scores[scores.length - 1].ring ? scores[scores.length - 1].x : 0,
-            66
-          ),
-          top: calcRealY(
-            scores[scores.length - 1].ring ? scores[scores.length - 1].y : 0,
-            150
-          ),
+          left: calcRealX(latestOne.ring ? latestOne.x : 0, 66),
+          top: calcRealY(latestOne.ring ? latestOne.y : 0, 150),
         }"
       >
         经验 +1
       </view>
       <view
-        v-if="scores.length && showRoundTips && showLatestArrow"
+        v-if="latestOne"
         class="round-tip fade-in-out"
         :style="{
-          left: calcRealX(
-            scores[scores.length - 1].ring ? scores[scores.length - 1].x : 0,
-            100
-          ),
-          top: calcRealY(
-            scores[scores.length - 1].ring ? scores[scores.length - 1].y : 0,
-            100
-          ),
+          left: calcRealX(latestOne.ring ? latestOne.x : 0, 100),
+          top: calcRealY(latestOne.ring ? latestOne.y : 0, 100),
         }"
-        >{{ scores[scores.length - 1].ring || "未上靶"
-        }}<text v-if="scores[scores.length - 1].ring">环</text></view
-      >
-      <view
-        v-if="blueScores.length && showRoundTips && showLatestArrow"
-        class="round-tip fade-in-out"
-        :style="{
-          left: calcRealX(
-            blueScores[blueScores.length - 1].ring
-              ? blueScores[blueScores.length - 1].x
-              : 0,
-            100
-          ),
-          top: calcRealY(
-            blueScores[blueScores.length - 1].ring
-              ? blueScores[blueScores.length - 1].y
-              : 0,
-            100
-          ),
-        }"
-        >{{ blueScores[blueScores.length - 1].ring || "未上靶"
-        }}<text v-if="blueScores[blueScores.length - 1].ring">环</text></view
+        >{{ latestOne.ring || "未上靶"
+        }}<text v-if="latestOne.ring">环</text></view
       >
       <block v-for="(bow, index) in scores" :key="index">
         <view
           v-if="bow.ring > 0"
           :class="`hit ${
-            index === scores.length - 1 && !blueScores.length && showLatestArrow
-              ? 'pump-in'
-              : ''
+            index === scores.length - 1 && showLatestArrow ? 'pump-in' : ''
           }`"
           :style="{
             left: calcRealX(bow.x),
@@ -210,9 +161,7 @@ const simulShoot2 = async () => {
         <view
           v-if="bow.ring > 0"
           :class="`hit ${
-            index === scores.length - 1 && !blueScores.length && showLatestArrow
-              ? 'pump-in'
-              : ''
+            index === blueScores.length - 1 && showLatestArrow ? 'pump-in' : ''
           }`"
           :style="{
             left: calcRealX(bow.x),