靶子组件优化

src/components/BowData.vue

@@ -40,7 +40,7 @@ const props = defineProps({
       </view>
     </view>
     <view :style="{ width: '100%', marginBottom: '20px' }">
-      <BowTarget :scores="arrows" :showLatestArrow="false" />
+      <BowTarget :scores="arrows" />
     </view>
     <view class="desc">
       <text>{{ arrows.length }}</text>

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) => {
+  (newVal, oldVal) => {
-    if (newVal.length - prevLength.value === 1) {
+    latestOne.value = newVal[newVal.length - 1];
     if (timer.value) clearTimeout(timer.value);
-      showRoundTips.value = true;
     timer.value = setTimeout(() => {
-        showRoundTips.value = false;
+      latestOne.value = null;
     }, 1000);
-    }
-    prevLength.value = newVal.length;
   },
   {
     deep: true,
@@ -90,14 +78,11 @@ watch(
 watch(
   () => props.blueScores,
   (newVal) => {
-    if (newVal.length - prevLength.value === 1) {
+    latestOne.value = newVal[newVal.length - 1];
     if (timer.value) clearTimeout(timer.value);
-      showRoundTips.value = true;
     timer.value = setTimeout(() => {
-        showRoundTips.value = false;
+      latestOne.value = null;
     }, 1000);
-    }
-    prevLength.value = newVal.length;
   },
   {
     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(
+          left: calcRealX(latestOne.ring ? latestOne.x : 0, 66),
-            scores[scores.length - 1].ring ? scores[scores.length - 1].x : 0,
+          top: calcRealY(latestOne.ring ? latestOne.y : 0, 150),
-            66
-          ),
-          top: calcRealY(
-            scores[scores.length - 1].ring ? scores[scores.length - 1].y : 0,
-            150
-          ),
         }"
       >
         经验 +1
       </view>
       <view
-        v-if="scores.length && showRoundTips && showLatestArrow"
+        v-if="latestOne"
         class="round-tip fade-in-out"
         :style="{
-          left: calcRealX(
+          left: calcRealX(latestOne.ring ? latestOne.x : 0, 100),
-            scores[scores.length - 1].ring ? scores[scores.length - 1].x : 0,
+          top: calcRealY(latestOne.ring ? latestOne.y : 0, 100),
-            100
-          ),
-          top: calcRealY(
-            scores[scores.length - 1].ring ? scores[scores.length - 1].y : 0,
-            100
-          ),
         }"
-        >{{ scores[scores.length - 1].ring || "未上靶"
+        >{{ latestOne.ring || "未上靶"
-        }}<text v-if="scores[scores.length - 1].ring">环</text></view
+        }}<text v-if="latestOne.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
       >
       <block v-for="(bow, index) in scores" :key="index">
         <view
           v-if="bow.ring > 0"
           :class="`hit ${
-            index === scores.length - 1 && !blueScores.length && showLatestArrow
+            index === scores.length - 1 && showLatestArrow ? 'pump-in' : ''
-              ? '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
+            index === blueScores.length - 1 && showLatestArrow ? 'pump-in' : ''
-              ? 'pump-in'
-              : ''
           }`"
           :style="{
             left: calcRealX(bow.x),

src/components/MeleeResult.vue

@@ -76,7 +76,6 @@ const onSelect = (userId) => {
     <view :style="{ width: '95%' }">
       <BowTarget
         :scores="scores"
-        :showLatestArrow="false"
         :avatar="currentUser ? currentUser.avatar : ''"
       />
     </view>

src/components/TeamResult.vue

@@ -106,11 +106,7 @@ watch(
       </view>
     </view>
     <view :style="{ width: '95%' }">
-      <BowTarget
+      <BowTarget :scores="redScores" :blueScores="blueScores" />
-        :scores="redScores"
-        :blueScores="blueScores"
-        :showLatestArrow="false"
-      />
     </view>
     <view class="score-row" v-for="(player, index) in players" :key="index">
       <Avatar

src/pages/battle-room.vue

@@ -321,8 +321,6 @@ async function onReceiveMessage(messages = []) {
       if (msg.constructor === MESSAGETYPES.ToSomeoneShoot) {
         if (room.value.battleType === 1) {
           if (currentShooterId.value !== msg.userId) {
-            scores.value = [];
-            blueScores.value = [];
             seq.value += 1;
             currentShooterId.value = msg.userId;
             if (redTeam.value[0].id === currentShooterId.value) {
@@ -341,8 +339,8 @@ async function onReceiveMessage(messages = []) {
       if (msg.constructor === MESSAGETYPES.ShootResult) {
         if (room.value.battleType === 1) {
           const isRed = redTeam.value.find((item) => item.id === msg.userId);
-          if (isRed) scores.value = [msg.target];
+          if (isRed) scores.value.push(msg.target);
-          else blueScores.value = [msg.target];
+          else blueScores.value.push(msg.target);
           if (roundResults.value[currentRound.value - 1]) {
             if (isRed && roundResults.value[currentRound.value - 1].redArrows) {
               roundResults.value[currentRound.value - 1].redArrows.push(
@@ -551,7 +549,6 @@ onUnmounted(() => {
       />
       <BowTarget
         :mode="room.battleType ? 'team' : 'solo'"
-        :showE="start && user.id === currentShooterId"
         :power="start ? power : 0"
         :currentRound="currentRound"
         :totalRound="totalRounds"

src/pages/first-try.vue

@@ -239,7 +239,6 @@ const onClose = () => {
       </view>
       <BowTarget
         v-if="step === 4"
-        :start="start"
         :currentRound="step === 4 ? scores.length : 0"
         :totalRound="step === 4 ? total : 0"
         :scores="scores"

src/pages/melee-bow-data.vue

@@ -54,7 +54,7 @@ onLoad(async (options) => {
         </view>
       </view>
       <view :style="{ marginTop: '10px' }">
-        <BowTarget :scores="scores" :showLatestArrow="false" />
+        <BowTarget :scores="scores" />
       </view>
       <view class="score-text"
         ><text :style="{ color: '#fed847' }">{{ scores.length }}</text

src/pages/melee-match.vue

@@ -207,7 +207,6 @@ onUnmounted(() => {
         </view>
         <BowTarget
           v-if="start"
-          :showE="start"
           :currentRound="scores.length"
           :totalRound="start ? 12 : 0"
           :scores="scores"

src/pages/mine-bow-data.vue

@@ -33,7 +33,7 @@ onLoad(async (options) => {
         </view>
       </view> -->
       <view :style="{ marginBottom: '20px' }">
-        <BowTarget :scores="arrows" :showLatestArrow="false" />
+        <BowTarget :scores="arrows" />
       </view>
       <view class="desc">
         <text>{{ arrows.length }}</text>

src/pages/practise-one.vue

@@ -123,7 +123,6 @@ onUnmounted(() => {
           <BowPower :power="power" />
         </view>
         <BowTarget
-          :start="start"
           :totalRound="start ? total / 4 : 0"
           :currentRound="currentRound"
           :scores="scores"

src/pages/practise-two.vue

@@ -117,7 +117,6 @@ onUnmounted(() => {
           <BowPower :power="power" />
         </view>
         <BowTarget
-          :start="start"
           :currentRound="scores.length"
           :totalRound="start ? total : 0"
           :scores="scores"

src/pages/team-bow-data.vue

@@ -98,11 +98,7 @@ const onClickTab = (index) => {
         </view>
       </view>
       <view :style="{ margin: '20px 0' }">
-        <BowTarget
+        <BowTarget :scores="redScores" :blueScores="blueScores" />
-          :scores="redScores"
-          :blueScores="blueScores"
-          :showLatestArrow="false"
-        />
       </view>
       <view class="score-row" v-for="(player, index) in players" :key="index">
         <Avatar

src/pages/team-match.vue

@@ -140,8 +140,6 @@ async function onReceiveMessage(messages = []) {
     }
     if (msg.constructor === MESSAGETYPES.ToSomeoneShoot) {
       if (currentShooterId.value !== msg.userId) {
-        scores.value = [];
-        blueScores.value = [];
         seq.value += 1;
         currentShooterId.value = msg.userId;
         if (redTeam.value[0].id === currentShooterId.value) {
@@ -158,8 +156,8 @@ async function onReceiveMessage(messages = []) {
     }
     if (msg.constructor === MESSAGETYPES.ShootResult) {
       const isRed = redTeam.value.find((item) => item.id === msg.userId);
-      if (isRed) scores.value = [msg.target];
+      if (isRed) scores.value.push(msg.target);
-      else blueScores.value = [msg.target];
+      else blueScores.value.push(msg.target);
       if (roundResults.value[currentRound.value - 1]) {
         if (isRed && roundResults.value[currentRound.value - 1].redArrows) {
           roundResults.value[currentRound.value - 1].redArrows.push(msg.target);
@@ -266,7 +264,6 @@ onUnmounted(() => {
         <BowTarget
           v-if="start"
           mode="team"
-          :showE="start && user.id === currentShooterId"
           :power="start ? power : 0"
           :currentRound="currentRound"
           :totalRound="totalRounds"