update:会员特效

src/components/BowTarget.vue

@@ -1,6 +1,7 @@
 <script setup>
-import { ref, watch, onMounted, onBeforeUnmount, computed } from "vue";
+import { ref, watch, onMounted, onBeforeUnmount, computed, nextTick } from "vue";
 import PointSwitcher from "@/components/PointSwitcher.vue";
+import BowShotEffect from "@/components/BowShotEffect.vue";
 
 import { MESSAGETYPES, MESSAGETYPESV2 } from "@/constants";
 import { simulShootAPI } from "@/apis";
@@ -57,18 +58,120 @@ const timer = ref(null);
 const dirTimer = ref(null);
 const angle = ref(null);
 const circleColor = ref("");
+const shotEffect = ref(null);
+const hiddenRedLatestKey = ref("");
+const hiddenBlueLatestKey = ref("");
+const targetShaking = ref(false);
+const shakeTimer = ref(null);
 const ROUND_TIP_OFFSET_Y = -32;
 const EXPERIENCE_TIP_OFFSET_Y = -68;
 
+function buildShotEffectKey(team, shot, index) {
+  return [
+    team,
+    index,
+    shot?.playerId ?? "",
+    shot?.x ?? "",
+    shot?.y ?? "",
+    shot?.ring ?? "",
+    shot?.ringX ? 1 : 0,
+  ].join("-");
+}
+
+function shouldPlayShotEffect(shot) {
+  return !!shot && Number(shot.ring) > 0;
+}
+
+function clearTipTimer() {
+  if (timer.value) {
+    clearTimeout(timer.value);
+    timer.value = null;
+  }
+}
+
+function showShotTip(team, shot) {
+  clearTipTimer();
+  if (team === "red") {
+    latestOne.value = shot;
+    timer.value = setTimeout(() => {
+      latestOne.value = null;
+      timer.value = null;
+    }, 1000);
+    return;
+  }
+
+  bluelatestOne.value = shot;
+  timer.value = setTimeout(() => {
+    bluelatestOne.value = null;
+    timer.value = null;
+  }, 1000);
+}
+
+function triggerShotEffect(team, shot, index) {
+  const key = buildShotEffectKey(team, shot, index);
+
+  if (shotEffect.value?.team === "red") hiddenRedLatestKey.value = "";
+  if (shotEffect.value?.team === "blue") hiddenBlueLatestKey.value = "";
+
+  if (team === "red") {
+    latestOne.value = null;
+    hiddenRedLatestKey.value = key;
+  } else {
+    bluelatestOne.value = null;
+    hiddenBlueLatestKey.value = key;
+  }
+
+  shotEffect.value = { key, team, shot };
+}
+
+function completeShotEffect(key) {
+  if (!shotEffect.value || shotEffect.value.key !== key) return;
+
+  const { team, shot } = shotEffect.value;
+  if (team === "red") hiddenRedLatestKey.value = "";
+  if (team === "blue") hiddenBlueLatestKey.value = "";
+  shotEffect.value = null;
+  showShotTip(team, shot);
+}
+
+function shakeTarget() {
+  targetShaking.value = false;
+  if (shakeTimer.value) {
+    clearTimeout(shakeTimer.value);
+    shakeTimer.value = null;
+  }
+
+  nextTick(() => {
+    targetShaking.value = true;
+    shakeTimer.value = setTimeout(() => {
+      targetShaking.value = false;
+      shakeTimer.value = null;
+    }, 260);
+  });
+}
+
+function shouldHideRedHit(index) {
+  return !!hiddenRedLatestKey.value && index === props.scores.length - 1;
+}
+
+function shouldHideBlueHit(index) {
+  return !!hiddenBlueLatestKey.value && index === props.blueScores.length - 1;
+}
+
 watch(
   () => props.scores,
   (newVal) => {
     if (newVal.length - prevScores.value.length === 1) {
-      latestOne.value = newVal[newVal.length - 1];
-      if (timer.value) clearTimeout(timer.value);
-      timer.value = setTimeout(() => {
-        latestOne.value = null;
-      }, 1000);
+      const latestShot = newVal[newVal.length - 1];
+      if (shouldPlayShotEffect(latestShot)) {
+        triggerShotEffect("red", latestShot, newVal.length - 1);
+      } else {
+        showShotTip("red", latestShot);
+      }
+    } else if (newVal.length <= prevScores.value.length) {
+      latestOne.value = null;
+      hiddenRedLatestKey.value = "";
+      if (shotEffect.value?.team === "red") shotEffect.value = null;
     }
     prevScores.value = [...newVal];
   },
@@ -81,11 +184,16 @@ watch(
   () => props.blueScores,
   (newVal) => {
     if (newVal.length - prevBlueScores.value.length === 1) {
-      bluelatestOne.value = newVal[newVal.length - 1];
-      if (timer.value) clearTimeout(timer.value);
-      timer.value = setTimeout(() => {
-        bluelatestOne.value = null;
-      }, 1000);
+      const latestShot = newVal[newVal.length - 1];
+      if (shouldPlayShotEffect(latestShot)) {
+        triggerShotEffect("blue", latestShot, newVal.length - 1);
+      } else {
+        showShotTip("blue", latestShot);
+      }
+    } else if (newVal.length <= prevBlueScores.value.length) {
+      bluelatestOne.value = null;
+      hiddenBlueLatestKey.value = "";
+      if (shotEffect.value?.team === "blue") shotEffect.value = null;
     }
     prevBlueScores.value = [...newVal];
   },
@@ -239,12 +347,16 @@ onBeforeUnmount(() => {
     clearTimeout(dirTimer.value);
     dirTimer.value = null;
   }
+  if (shakeTimer.value) {
+    clearTimeout(shakeTimer.value);
+    shakeTimer.value = null;
+  }
   uni.$off("socket-inbox", onReceiveMessage);
 });
 </script>
 
 <template>
-  <view class="container">
+  <view :class="['container', { 'container--effecting': shotEffect }]">
     <view class="header" v-if="totalRound > 0">
       <text v-if="totalRound > 0" class="round-count">{{
         (currentRound > totalRound ? totalRound : currentRound) +
@@ -252,7 +364,7 @@ onBeforeUnmount(() => {
         totalRound
       }}</text>
     </view>
-    <view class="target">
+    <view :class="['target', { 'target--shake': targetShaking }]">
       <view v-if="angle !== null" class="arrow-dir" :style="arrowStyle">
         <view :style="{ background: circleColor }">
           <image src="../static/dot-circle.png" mode="widthFix" />
@@ -293,7 +405,7 @@ onBeforeUnmount(() => {
       >
       <block v-for="(bow, index) in scores" :key="index">
         <view
-          v-if="bow.ring > 0"
+          v-if="bow.ring > 0 && !shouldHideRedHit(index)"
           :class="`hit ${pMode ? 'b' : 's'}-point ${
             index === scores.length - 1 && latestOne ? 'pump-in' : ''
           }`"
@@ -306,7 +418,7 @@ onBeforeUnmount(() => {
       </block>
       <block v-for="(bow, index) in blueScores" :key="index">
         <view
-          v-if="bow.ring > 0"
+          v-if="bow.ring > 0 && !shouldHideBlueHit(index)"
           :class="`hit ${pMode ? 'b' : 's'}-point ${
             index === blueScores.length - 1 && bluelatestOne ? 'pump-in' : ''
           }`"
@@ -318,6 +430,13 @@ onBeforeUnmount(() => {
           <text v-if="pMode">{{ index + 1 }}</text>
         </view>
       </block>
+      <BowShotEffect
+        :shot="shotEffect && shotEffect.shot"
+        :playKey="shotEffect ? shotEffect.key : ''"
+        :targetRadius="safeTargetRadius"
+        @impact="shakeTarget"
+        @complete="completeShotEffect"
+      />
       <image src="../static/bow-target.png" mode="widthFix" />
     </view>
     <view class="footer">
@@ -339,13 +458,22 @@ onBeforeUnmount(() => {
   height: calc(100vw - 30px);
   padding: 0px 15px;
   position: relative;
+  z-index: 3;
+}
+.container--effecting {
+  z-index: 10000;
 }
 .target {
   position: relative;
   margin: 10px;
   width: calc(100% - 20px);
   height: calc(100% - 20px);
-  z-index: -1;
+  z-index: 1;
+  pointer-events: none;
+  transform-origin: center center;
+}
+.target--shake {
+  animation: target-shake 0.26s ease-out;
 }
 .e-value {
   position: absolute;
@@ -405,7 +533,7 @@ onBeforeUnmount(() => {
   border-radius: 50%;
   z-index: 1;
   color: #fff;
-  transition: all 0.3s ease;
+  transition: transform 0.2s ease, opacity 0.2s ease;
   box-sizing: border-box;
 }
 .b-point {
@@ -435,6 +563,29 @@ onBeforeUnmount(() => {
     transform: translate(-50%, -50%) scale(1);
   }
 }
+@keyframes target-shake {
+  0% {
+    transform: translate(0, 0);
+  }
+  14% {
+    transform: translate(-20rpx, 8rpx);
+  }
+  28% {
+    transform: translate(16rpx, -8rpx);
+  }
+  44% {
+    transform: translate(-12rpx, 6rpx);
+  }
+  64% {
+    transform: translate(8rpx, -4rpx);
+  }
+  82% {
+    transform: translate(-4rpx, 2rpx);
+  }
+  100% {
+    transform: translate(0, 0);
+  }
+}
 .hit.pump-in {
   animation: target-pump-in 0.3s ease-out forwards;
   transform-origin: center center;