update:会员特效

src/components/BowShotEffect.vue

@@ -0,0 +1,387 @@
+<script setup>
+import { computed, onBeforeUnmount, ref, watch } from "vue";
+
+const props = defineProps({
+  shot: {
+    type: Object,
+    default: null,
+  },
+  playKey: {
+    type: [String, Number],
+    default: "",
+  },
+  targetRadius: {
+    type: Number,
+    default: 20,
+  },
+  targetWidth: {
+    type: Number,
+    default: 0,
+  },
+  targetHeight: {
+    type: Number,
+    default: 0,
+  },
+  hitOffsetPx: {
+    type: Number,
+    default: 0,
+  },
+});
+
+const emit = defineEmits(["complete", "impact"]);
+
+const phase = ref("idle");
+const activePlayKey = ref("");
+const animationKey = ref("");
+const impactEmitted = ref(false);
+let timers = [];
+
+const isActive = computed(() => phase.value !== "idle");
+const ARROW_IMPACT_MS = 340;
+const COMPLETE_FALLBACK_MS = 980;
+
+const safeTargetRadius = computed(() => {
+  const radius = Number(props.targetRadius);
+  return Number.isFinite(radius) && radius > 0 ? radius : 20;
+});
+
+const safeTargetSize = computed(() => {
+  const width = Number(props.targetWidth);
+  const height = Number(props.targetHeight);
+  return {
+    width: Number.isFinite(width) && width > 0 ? width : 0,
+    height: Number.isFinite(height) && height > 0 ? height : 0,
+  };
+});
+
+const shotPoint = computed(() => {
+  const x = Number(props.shot?.x);
+  const y = Number(props.shot?.y);
+  return {
+    x: Number.isFinite(x) ? x : 0,
+    y: Number.isFinite(y) ? y : 0,
+  };
+});
+
+const pointDirection = computed(() => {
+  const point = shotPoint.value;
+  const distance = Math.sqrt(point.x * point.x + point.y * point.y);
+  if (distance === 0) return null;
+
+  return {
+    x: point.x / distance,
+    y: point.y / distance,
+  };
+});
+
+const hitOffset = computed(() => {
+  const offset = Number(props.hitOffsetPx);
+  const safeOffset = Number.isFinite(offset) && offset > 0 ? offset : 0;
+  const direction = pointDirection.value;
+
+  return {
+    x: direction ? direction.x * safeOffset : 0,
+    y: direction ? -direction.y * safeOffset : 0,
+  };
+});
+
+const hitPercent = computed(() => {
+  const point = shotPoint.value;
+  const radius = safeTargetRadius.value;
+  const diameter = radius * 2;
+
+  return {
+    left: ((point.x + radius) / diameter) * 100,
+    top: ((radius - point.y) / diameter) * 100,
+  };
+});
+
+const arrowAngle = computed(() => {
+  const size = safeTargetSize.value;
+  if (!size.width || !size.height) {
+    const dx = hitPercent.value.left - 50;
+    const dy = 114 - hitPercent.value.top;
+    const fallbackAngle = Math.atan2(dx, dy || 1) * (180 / Math.PI);
+    return Math.max(-18, Math.min(18, fallbackAngle));
+  }
+
+  const startX = size.width * 0.5;
+  const startY = size.height * 1.14;
+  const endX = size.width * (hitPercent.value.left / 100) + hitOffset.value.x;
+  const endY = size.height * (hitPercent.value.top / 100) + hitOffset.value.y;
+  const dx = endX - startX;
+  const dy = startY - endY;
+  const angle = Math.atan2(dx, dy || 1) * (180 / Math.PI);
+  return Math.max(-18, Math.min(18, angle));
+});
+
+function formatPxOffset(value) {
+  if (!value) return "";
+  const operator = value > 0 ? "+" : "-";
+  return ` ${operator} ${Math.abs(value)}px`;
+}
+
+function formatTargetPosition(percent, offset) {
+  const pxOffset = formatPxOffset(offset);
+  return pxOffset ? `calc(${percent}%${pxOffset})` : `${percent}%`;
+}
+
+const crackStyle = computed(() => ({
+  left: formatTargetPosition(hitPercent.value.left, hitOffset.value.x),
+  top: formatTargetPosition(hitPercent.value.top, hitOffset.value.y),
+}));
+
+function getTargetTranslate(percent) {
+  const absPercent = Math.abs(percent);
+  const operator = percent >= 0 ? "-" : "+";
+  return `calc(${percent}vw ${operator} ${absPercent * 0.5}px)`;
+}
+
+const arrowMoveStyle = computed(() => {
+  const size = safeTargetSize.value;
+  let x = getTargetTranslate(hitPercent.value.left - 50);
+  let y = getTargetTranslate(hitPercent.value.top - 114);
+
+  if (size.width && size.height) {
+    const startX = size.width * 0.5;
+    const startY = size.height * 1.14;
+    const endX = size.width * (hitPercent.value.left / 100) + hitOffset.value.x;
+    const endY = size.height * (hitPercent.value.top / 100) + hitOffset.value.y;
+    x = `${endX - startX}px`;
+    y = `${endY - startY}px`;
+  }
+
+  return {
+    "--shot-tx": x,
+    "--shot-ty": y,
+    "--shot-angle": `${arrowAngle.value}deg`,
+  };
+});
+
+function clearTimers() {
+  timers.forEach((timer) => clearTimeout(timer));
+  timers = [];
+}
+
+function queueTimer(callback, delay) {
+  const timer = setTimeout(callback, delay);
+  timers.push(timer);
+}
+
+function emitImpactOnce(playKey) {
+  if (phase.value === "idle" || activePlayKey.value !== playKey || impactEmitted.value) return;
+  impactEmitted.value = true;
+  emit("impact");
+}
+
+function finish(playKey) {
+  if (phase.value === "idle" || activePlayKey.value !== playKey) return;
+  clearTimers();
+  phase.value = "idle";
+  activePlayKey.value = "";
+  emit("complete", playKey);
+}
+
+function play() {
+  if (!props.playKey || !props.shot || !props.shot.ring) return;
+
+  clearTimers();
+  activePlayKey.value = props.playKey;
+  animationKey.value = `${props.playKey}`;
+  impactEmitted.value = false;
+  phase.value = "playing";
+
+  queueTimer(() => {
+    emitImpactOnce(activePlayKey.value);
+  }, ARROW_IMPACT_MS);
+  queueTimer(() => {
+    finish(activePlayKey.value);
+  }, COMPLETE_FALLBACK_MS);
+}
+
+function handleArrowAnimationEnd() {
+  emitImpactOnce(activePlayKey.value);
+}
+
+function handleCrackAnimationEnd() {
+  finish(activePlayKey.value);
+}
+
+watch(
+  () => props.playKey,
+  () => {
+    play();
+  },
+  { immediate: true }
+);
+
+onBeforeUnmount(() => {
+  clearTimers();
+});
+</script>
+
+<template>
+  <view
+    v-show="isActive"
+    :class="['shot-effect', `shot-effect--${phase}`]"
+    :style="arrowMoveStyle"
+  >
+    <view
+      :key="`arrow-${animationKey}`"
+      class="shot-arrow-track"
+      @animationend="handleArrowAnimationEnd"
+    >
+      <image
+        class="shot-arrow"
+        src="../static/vip/svip-jian.png"
+        mode="heightFix"
+      />
+    </view>
+    <view
+      :key="`flash-${animationKey}`"
+      class="shot-flash"
+      :style="crackStyle"
+    ></view>
+    <view
+      :key="`crack-anchor-${animationKey}`"
+      class="shot-crack-anchor"
+      :style="crackStyle"
+    >
+      <image
+        :key="`crack-${animationKey}`"
+        class="shot-crack"
+        src="../static/vip/svip-lie.png"
+        mode="aspectFit"
+        @animationend="handleCrackAnimationEnd"
+      />
+    </view>
+  </view>
+</template>
+
+<style scoped lang="scss">
+.shot-effect {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 9999;
+  pointer-events: none;
+  overflow: visible;
+  transform: translateZ(0);
+}
+
+.shot-arrow-track {
+  position: absolute;
+  left: 50%;
+  top: 114%;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  transform: translate3d(0, 0, 0);
+  animation: none;
+  backface-visibility: hidden;
+  will-change: transform, opacity;
+}
+
+.shot-arrow {
+  position: absolute;
+  width: 248rpx;
+  height: 1186rpx;
+  left: 0;
+  top: 0;
+  opacity: 1;
+  transform-origin: 44.35% 3.04%;
+  transform: translate(-44.35%, -3.04%) rotate(var(--shot-angle));
+  backface-visibility: hidden;
+  will-change: transform;
+}
+
+.shot-effect--playing .shot-arrow-track {
+  animation: shot-arrow-fly 0.38s cubic-bezier(0.68, 0, 0.9, 0.62) forwards;
+}
+
+.shot-flash,
+.shot-crack-anchor {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  backface-visibility: hidden;
+  will-change: transform, opacity;
+}
+
+.shot-flash {
+  width: 86rpx;
+  height: 86rpx;
+  border-radius: 50%;
+  border: 3rpx solid rgba(255, 236, 166, 0.9);
+  opacity: 0;
+  animation: none;
+}
+
+.shot-crack-anchor {
+  width: 750rpx;
+  height: 750rpx;
+}
+
+.shot-crack {
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  transform-origin: center center;
+  animation: none;
+  will-change: transform, opacity;
+}
+
+.shot-effect--playing .shot-flash {
+  animation: shot-flash 0.42s ease-out 0.32s forwards;
+}
+
+.shot-effect--playing .shot-crack {
+  animation: shot-crack-hit 0.52s ease-out 0.34s forwards;
+}
+
+@keyframes shot-arrow-fly {
+  0% {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+  86% {
+    opacity: 1;
+    transform: translate3d(var(--shot-tx), var(--shot-ty), 0);
+  }
+  100% {
+    opacity: 0;
+    transform: translate3d(var(--shot-tx), var(--shot-ty), 0);
+  }
+}
+
+@keyframes shot-flash {
+  0% {
+    opacity: 0.95;
+    transform: translate(-50%, -50%) scale(0.2);
+  }
+  100% {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(1.9);
+  }
+}
+
+@keyframes shot-crack-hit {
+  0% {
+    opacity: 0;
+    transform: scale(0.55);
+  }
+  28% {
+    opacity: 1;
+    transform: scale(1.08);
+  }
+  56% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(1.18);
+  }
+}
+</style>

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;

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

@@ -1,6 +1,15 @@
 <script setup>
-import { ref, watch, onMounted, onBeforeUnmount, computed } from "vue";
+import {
+  ref,
+  watch,
+  onMounted,
+  onBeforeUnmount,
+  computed,
+  nextTick,
+  getCurrentInstance,
+} from "vue";
 import PointSwitcher from "./PointSwitcher.vue";
+import BowShotEffect from "@/components/BowShotEffect.vue";
 
 import { MESSAGETYPES, MESSAGETYPESV2 } from "@/constants";
 import { simulShootAPI } from "@/apis";
@@ -59,18 +68,47 @@ 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 targetSize = ref({ width: 0, height: 0 });
+const shakeTimer = ref(null);
+const instance = getCurrentInstance();
 const ROUND_TIP_OFFSET_Y = -32;
 const EXPERIENCE_TIP_OFFSET_Y = -68;
 
-function showShotFlash(flash) {
-  const shootData = flash?.shootData;
-  if (!shootData) return;
-  if (timer.value) clearTimeout(timer.value);
+function buildShotEffectKey(team, shot, fallbackKey = "") {
+  return (
+    fallbackKey ||
+    [
+      team,
+      shot?.playerId ?? "",
+      shot?.x ?? "",
+      shot?.y ?? "",
+      shot?.ring ?? "",
+      shot?.ringX ? 1 : 0,
+    ].join("-")
+  );
+}
 
-  if (flash.team === "red") {
+function shouldPlayShotEffect(shot) {
+  return !!shot && Number(shot.ring) > 0;
+}
+
+function clearTipTimer() {
+  if (timer.value) clearTimeout(timer.value);
+  timer.value = null;
+}
+
+function showShotTip(team, shootData) {
+  clearTipTimer();
+
+  if (team === "red") {
     latestOne.value = shootData;
     timer.value = setTimeout(() => {
       latestOne.value = null;
+      timer.value = null;
     }, 1000);
     return;
   }
@@ -78,9 +116,102 @@ function showShotFlash(flash) {
   bluelatestOne.value = shootData;
   timer.value = setTimeout(() => {
     bluelatestOne.value = null;
+    timer.value = null;
   }, 1000);
 }
 
+function triggerShotEffect(team, shot, fallbackKey = "") {
+  const key = buildShotEffectKey(team, shot, fallbackKey);
+
+  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 updateTargetSize() {
+  nextTick(() => {
+    const query = instance?.proxy
+      ? uni.createSelectorQuery().in(instance.proxy)
+      : uni.createSelectorQuery();
+
+    query
+      .select(".target")
+      .boundingClientRect((rect) => {
+        const width = Number(rect?.width);
+        const height = Number(rect?.height);
+        if (!Number.isFinite(width) || !Number.isFinite(height)) return;
+        if (width <= 0 || height <= 0) return;
+        targetSize.value = { width, height };
+      })
+      .exec();
+  });
+}
+
+function handleWindowResize() {
+  updateTargetSize();
+}
+
+function shouldHideRedHit(index) {
+  return !!hiddenRedLatestKey.value && index === props.scores.length - 1;
+}
+
+function shouldHideBlueHit(index) {
+  return !!hiddenBlueLatestKey.value && index === props.blueScores.length - 1;
+}
+
+function showShotFlash(flash) {
+  const shootData = flash?.shootData;
+  if (!shootData) {
+    hiddenRedLatestKey.value = "";
+    hiddenBlueLatestKey.value = "";
+    shotEffect.value = null;
+    return;
+  }
+
+  const team = flash.team === "red" ? "red" : "blue";
+  if (shouldPlayShotEffect(shootData)) {
+    triggerShotEffect(team, shootData, flash.key);
+    return;
+  }
+
+  showShotTip(team, shootData);
+}
+
 watch(
   () => props.latestShotFlash,
   (newVal) => {
@@ -89,6 +220,26 @@ watch(
   { immediate: true }
 );
 
+watch(
+  () => props.scores.length,
+  (newLen, oldLen) => {
+    if (newLen > oldLen) return;
+    latestOne.value = null;
+    hiddenRedLatestKey.value = "";
+    if (shotEffect.value?.team === "red") shotEffect.value = null;
+  }
+);
+
+watch(
+  () => props.blueScores.length,
+  (newLen, oldLen) => {
+    if (newLen > oldLen) return;
+    bluelatestOne.value = null;
+    hiddenBlueLatestKey.value = "";
+    if (shotEffect.value?.team === "blue") shotEffect.value = null;
+  }
+);
+
 const safeTargetRadius = computed(() => {
   const radius = Number(props.targetRadius);
   return Number.isFinite(radius) && radius > 0 ? radius : 20;
@@ -223,6 +374,8 @@ async function onReceiveMessage(message) {
 
 onMounted(() => {
   uni.$on("socket-inbox", onReceiveMessage);
+  updateTargetSize();
+  if (uni.onWindowResize) uni.onWindowResize(handleWindowResize);
 });
 
 onBeforeUnmount(() => {
@@ -234,12 +387,17 @@ onBeforeUnmount(() => {
     clearTimeout(dirTimer.value);
     dirTimer.value = null;
   }
+  if (shakeTimer.value) {
+    clearTimeout(shakeTimer.value);
+    shakeTimer.value = null;
+  }
   uni.$off("socket-inbox", onReceiveMessage);
+  if (uni.offWindowResize) uni.offWindowResize(handleWindowResize);
 });
 </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) +
@@ -247,7 +405,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" />
@@ -288,7 +446,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' : ''
           }`"
@@ -301,7 +459,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' : ''
           }`"
@@ -313,6 +471,16 @@ onBeforeUnmount(() => {
           <text v-if="pMode">{{ index + 1 }}</text>
         </view>
       </block>
+      <BowShotEffect
+        :shot="shotEffect && shotEffect.shot"
+        :playKey="shotEffect ? shotEffect.key : ''"
+        :targetRadius="safeTargetRadius"
+        :targetWidth="targetSize.width"
+        :targetHeight="targetSize.height"
+        :hitOffsetPx="currentHitRadiusPx"
+        @impact="shakeTarget"
+        @complete="completeShotEffect"
+      />
       <image src="../../../static/bow-target.png" mode="widthFix" />
     </view>
     <view class="footer">
@@ -334,13 +502,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;
@@ -400,7 +577,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 {
@@ -430,6 +607,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;
@@ -457,6 +657,8 @@ onBeforeUnmount(() => {
   display: flex;
   margin-top: -40px;
   justify-content: flex-end;
+  position: relative;
+  z-index: 999;
 }
 .footer > image {
   width: 40px;