update: 修复飞行特效

src/pages/team-battle/components/BowTarget.vue

@@ -67,6 +67,10 @@ const props = defineProps({
     type: Number,
     default: 5,
   },
+  stableShotEffect: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const pMode = ref(true);
@@ -77,12 +81,14 @@ const dirTimer = ref(null);
 const angle = ref(null);
 const circleColor = ref("");
 const shotEffect = ref(null);
+const pendingShotEffect = ref(null);
 const hiddenRedLatestKey = ref("");
 const hiddenBlueLatestKey = ref("");
 const targetShaking = ref(false);
 const targetRect = ref({ left: 0, top: 0, width: 0, height: 0 });
 const shakeTimer = ref(null);
 const instance = getCurrentInstance();
+let shotEffectRequestGeneration = 0;
 const ROUND_TIP_OFFSET_Y = -32;
 const EXPERIENCE_TIP_OFFSET_Y = -68;
 
@@ -137,7 +143,7 @@ function showShotTip(team, shootData) {
   }, 1000);
 }
 
-function triggerShotEffect(team, shot, fallbackKey = "") {
+function triggerShotEffect(team, shot, fallbackKey = "", viewportMode = false) {
   const key = buildShotEffectKey(team, shot, fallbackKey);
 
   if (shotEffect.value?.team === "red") hiddenRedLatestKey.value = "";
@@ -151,7 +157,29 @@ function triggerShotEffect(team, shot, fallbackKey = "") {
     hiddenBlueLatestKey.value = key;
   }
 
-  shotEffect.value = { key, team, shot };
+  shotEffect.value = { key, team, shot, viewportMode };
+}
+
+async function prepareShotEffect(team, shot, fallbackKey = "") {
+  const requestGeneration = ++shotEffectRequestGeneration;
+  const key = buildShotEffectKey(team, shot, fallbackKey);
+  pendingShotEffect.value = { generation: requestGeneration, team, key };
+  clearTipTimer();
+  if (team === "red") latestOne.value = null;
+  if (team === "blue") bluelatestOne.value = null;
+
+  const viewportMode = props.stableShotEffect
+    ? await updateTargetRect()
+    : false;
+
+  if (requestGeneration !== shotEffectRequestGeneration) {
+    if (pendingShotEffect.value?.generation === requestGeneration) {
+      pendingShotEffect.value = null;
+    }
+    return;
+  }
+  pendingShotEffect.value = null;
+  triggerShotEffect(team, shot, fallbackKey, viewportMode);
 }
 
 function completeShotEffect(key) {
@@ -180,49 +208,74 @@ function shakeTarget() {
   });
 }
 
-function updateTargetRect() {
-  nextTick(() => {
-    const query = instance?.proxy
-      ? uni.createSelectorQuery().in(instance.proxy)
-      : uni.createSelectorQuery();
+function hasValidTargetRect(rect = targetRect.value) {
+  return (
+    Number.isFinite(Number(rect?.left)) &&
+    Number.isFinite(Number(rect?.top)) &&
+    Number(rect?.width) > 0 &&
+    Number(rect?.height) > 0
+  );
+}
 
-    query
-      .select(".target")
-      .boundingClientRect((rect) => {
-        const left = Number(rect?.left);
-        const top = Number(rect?.top);
-        const width = Number(rect?.width);
-        const height = Number(rect?.height);
-        if (
-          !Number.isFinite(left) ||
-          !Number.isFinite(top) ||
-          !Number.isFinite(width) ||
-          !Number.isFinite(height)
-        ) {
-          return;
-        }
-        if (width <= 0 || height <= 0) return;
-        targetRect.value = { left, top, width, height };
-      })
-      .exec();
+async function updateTargetRect() {
+  await nextTick();
+
+  return new Promise((resolve) => {
+    let settled = false;
+    const finish = (rect) => {
+      if (settled) return;
+      settled = true;
+
+      const isValid = hasValidTargetRect(rect);
+      if (isValid) {
+        targetRect.value = {
+          left: Number(rect.left),
+          top: Number(rect.top),
+          width: Number(rect.width),
+          height: Number(rect.height),
+        };
+      }
+      resolve(isValid);
+    };
+
+    try {
+      const query = instance?.proxy
+        ? uni.createSelectorQuery().in(instance.proxy)
+        : uni.createSelectorQuery();
+
+      query
+        .select(".target")
+        .boundingClientRect()
+        .exec((result) => finish(Array.isArray(result) ? result[0] : null));
+    } catch {
+      finish(null);
+    }
   });
 }
 
 function handleWindowResize() {
-  updateTargetRect();
+  void updateTargetRect();
 }
 
 function shouldHideRedHit(index) {
-  return !!hiddenRedLatestKey.value && index === props.scores.length - 1;
+  return (
+    (!!hiddenRedLatestKey.value || pendingShotEffect.value?.team === "red") &&
+    index === props.scores.length - 1
+  );
 }
 
 function shouldHideBlueHit(index) {
-  return !!hiddenBlueLatestKey.value && index === props.blueScores.length - 1;
+  return (
+    (!!hiddenBlueLatestKey.value || pendingShotEffect.value?.team === "blue") &&
+    index === props.blueScores.length - 1
+  );
 }
 
 function showShotFlash(flash) {
   const shootData = flash?.shootData;
   if (!shootData) {
+    shotEffectRequestGeneration += 1;
+    pendingShotEffect.value = null;
     hiddenRedLatestKey.value = "";
     hiddenBlueLatestKey.value = "";
     shotEffect.value = null;
@@ -231,10 +284,12 @@ function showShotFlash(flash) {
 
   const team = flash.team === "red" ? "red" : "blue";
   if (shouldPlayShotEffect(shootData, team)) {
-    triggerShotEffect(team, shootData, flash.key);
+    void prepareShotEffect(team, shootData, flash.key);
     return;
   }
 
+  shotEffectRequestGeneration += 1;
+  pendingShotEffect.value = null;
   showShotTip(team, shootData);
 }
 
@@ -250,6 +305,8 @@ watch(
   () => props.scores.length,
   (newLen, oldLen) => {
     if (newLen > oldLen) return;
+    shotEffectRequestGeneration += 1;
+    pendingShotEffect.value = null;
     latestOne.value = null;
     hiddenRedLatestKey.value = "";
     if (shotEffect.value?.team === "red") shotEffect.value = null;
@@ -260,6 +317,8 @@ watch(
   () => props.blueScores.length,
   (newLen, oldLen) => {
     if (newLen > oldLen) return;
+    shotEffectRequestGeneration += 1;
+    pendingShotEffect.value = null;
     bluelatestOne.value = null;
     hiddenBlueLatestKey.value = "";
     if (shotEffect.value?.team === "blue") shotEffect.value = null;
@@ -417,11 +476,13 @@ async function onReceiveMessage(message) {
 
 onMounted(() => {
   uni.$on("socket-inbox", onReceiveMessage);
-  updateTargetRect();
+  void updateTargetRect();
   if (uni.onWindowResize) uni.onWindowResize(handleWindowResize);
 });
 
 onBeforeUnmount(() => {
+  shotEffectRequestGeneration += 1;
+  pendingShotEffect.value = null;
   if (timer.value) {
     clearTimeout(timer.value);
     timer.value = null;
@@ -539,6 +600,7 @@ onBeforeUnmount(() => {
         </view>
       </block>
       <BowShotEffect
+        v-if="!shotEffect || !shotEffect.viewportMode"
         :shot="shotEffect && shotEffect.shot"
         :playKey="shotEffect ? shotEffect.key : ''"
         :targetRadius="safeTargetRadius"
@@ -552,6 +614,20 @@ onBeforeUnmount(() => {
       />
       <image src="https://static.shelingxingqiu.com/shootmini/static/bow-target.png" mode="widthFix" />
     </view>
+    <BowShotEffect
+      v-if="shotEffect && shotEffect.viewportMode"
+      :shot="shotEffect.shot"
+      :playKey="shotEffect.key"
+      :targetRadius="safeTargetRadius"
+      :targetLeft="targetRect.left"
+      :targetTop="targetRect.top"
+      :targetWidth="targetRect.width"
+      :targetHeight="targetRect.height"
+      :hitOffsetPx="currentHitRadiusPx"
+      :viewportMode="true"
+      @impact="shakeTarget"
+      @complete="completeShotEffect"
+    />
     <view class="footer">
       <PointSwitcher
         :onChange="(val) => (pMode = val)"