From cfc9912a4a619b018463fbbc73edd925fddd6a3e Mon Sep 17 00:00:00 2001
From: kron <kai_hong@126.com>
Date: Thu, 13 Nov 2025 09:59:35 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B9=E5=90=91=E8=B0=83=E6=95=B4=E6=95=88?=
 =?UTF-8?q?=E6=9E=9C=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/BowTarget.vue |  91 ++++++++++++++++++++++++++++-------
 src/static/dot-circle.png    | Bin 0 -> 1350 bytes
 2 files changed, 73 insertions(+), 18 deletions(-)
 create mode 100644 src/static/dot-circle.png

diff --git a/src/components/BowTarget.vue b/src/components/BowTarget.vue
index eac590a..c9e10e9 100644
--- a/src/components/BowTarget.vue
+++ b/src/components/BowTarget.vue
@@ -50,6 +50,7 @@ const prevBlueScores = ref([]);
 const timer = ref(null);
 const dirTimer = ref(null);
 const angle = ref(null);
+const circleColor = ref("");
 
 watch(
   () => props.scores,
@@ -124,10 +125,14 @@ async function onReceiveMessage(messages = []) {
         !msg.target.ring &&
         msg.target.angle >= 0
       ) {
-        angle.value = msg.target.angle;
-        dirTimer.value = setTimeout(() => {
-          angle.value = null;
-        }, 1200);
+        angle.value = null;
+        setTimeout(() => {
+          if (props.scores[0]) {
+            circleColor.value =
+              msg.userId === props.scores[0].playerId ? "#ff4444" : "blue";
+          }
+          angle.value = msg.target.angle;
+        }, 200);
       }
     }
   });
@@ -161,7 +166,9 @@ onBeforeUnmount(() => {
     </view>
     <view class="target">
       <view v-if="angle !== null" class="arrow-dir" :style="arrowStyle">
-        <image src="../static/arrow-direction.png" mode="widthFix" />
+        <view :style="{ background: circleColor }">
+          <image src="../static/dot-circle.png" mode="widthFix" />
+        </view>
       </view>
       <view v-if="stop" class="stop-sign">中场休息</view>
       <view
@@ -380,24 +387,72 @@ onBeforeUnmount(() => {
   z-index: 99;
   font-weight: bold;
 }
-@keyframes spring-in {
-  0% {
-    transform: translateY(-20px);
-    opacity: 0;
-  }
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
 .arrow-dir {
   position: absolute;
-  width: 36%;
+  width: 100%;
+  height: 52%;
   left: 50%;
   bottom: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
-.arrow-dir > image {
-  animation: spring-in 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+.arrow-dir > view {
+  width: 40rpx;
+  height: 40rpx;
+  border-radius: 50%;
+}
+.arrow-dir > view > image {
+  width: 100rpx;
+  height: 100rpx;
+  transform: translate(-30%, -30%);
+}
+@keyframes spring-in {
+  0% {
+    transform: scale(2);
+    opacity: 0.4;
+  }
+  15% {
+    transform: scale(3);
+    opacity: 1;
+  }
+  30% {
+    transform: scale(2);
+    opacity: 0.4;
+  }
+  45% {
+    transform: scale(3);
+    opacity: 1;
+  }
+  60% {
+    transform: scale(2);
+    opacity: 0.4;
+  }
+  75% {
+    transform: scale(3);
+    opacity: 1;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 0;
+  }
+}
+@keyframes disappear {
+  0% {
+    opacity: 1;
+  }
+  75% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+.arrow-dir > view {
+  animation: disappear 3s ease forwards;
+}
+.arrow-dir > view > image {
+  animation: spring-in 3s ease forwards;
   width: 100%;
 }
 </style>
diff --git a/src/static/dot-circle.png b/src/static/dot-circle.png
new file mode 100644
index 0000000000000000000000000000000000000000..bff5e345f1f108eb7976367aeecb4fd9fc144a7d
GIT binary patch
literal 1350
zcmeAS@N?(olHy`uVBq!ia0vp^bwFIr!3-o@4UTXEsnr2KA+A9B{}2IZ*RPlfbgo57
zkY6yv?=PnO-)FyDI4v(TIhy^%#_B*FS;>$0&-Cjni?M7EJG8vagX?Ld&8@2!+MF%b
zd0sx0_p{rxy7T5fu}%gC79md;$B>MBZ*R9(-7*kh|FB<NVgqlS&h0lF+}&>9`E4J`
zEhcbCqfhlpU3?wCK;$!(yK`k~et(OP>i6z;T)O(`gv3mN#b(^ora5d_aK~KTV#TG-
zs<lFnGY;fll0PL-?P`^*CZPDyifier8?P@|ivQ_7rC)O4z`b3L=~WMMAKP7KXO-z`
zOZ~q0%FLA|0nF*wF2DRzGKYIlVfuHTQ!Fu=zP}QF?K@<8t|;*J`U6)_Eogo|t^c>{
z(!Sk}e)}`l-z=TrxS@CY%Kn<FDYGh1q|JHPW>!>qd25>TYN4fGd_^9=T=b{1%-ky&
z%savT!m;T(9h(0dc(!?IhMxQJFUS5Lmr>5IDXX$?mRY5qd)_)#^xN-r4u$x;b|17W
zB&2d`<jXHD-xA6uo}cs2-|AiP;<;QuK8Tz$n#<TdO=3>TRG!QWlWcRu@7%a;zcQm-
zF2q{5;EAZ`+7!!&Rh$)G*Oc!ZPD+$=YTMzVlQ{X%lDUjaK3rZgUv)xLu7$J5##`cC
zMPDxOh;|m)pMGZgj%6p!WCFkB?o3&eueSWWmCMUbLLa*-{6gZLB=pbjDT#T=v)k~<
z#ojgQJ3DUVIZcw^BJ4P6<sRF=5kEr|JKd}eRXnQ$<y16dZbv*$W%>9<+xxsxhnIk!
zhrcQNa;K+``#o<h$&U9ij27tqn)tT6cR@MF^+ju0{boMmZ+@I@*T3mr^CTOw6fwW0
zysu4Jl6l*snu1GjUHZr{(e_|^W)r`s%q=4Y&pF@X6+CBL+d3g-%CiL(6Y6!o1f1FU
zVMnUs`UxrL&K+d$XgfHyZxY+bV_cf=p33Mn6x^zt_dGU5_>r!jdBp9s<vbrFwk11G
zdM;ylF1y@Z#^d0pKb9(nk*m~Cc3+WN?;G94XXzF6x_WuV>fM66QQjRX_g}r;5_+-q
z-1#qe@4rZ2t=Lkzw{o$W_+GW++jq@+bHS9UBWSOs{r}J5j!A9b^W)Pr1X)&IkpH{?
zZrTii)DJ;AFX~UTPBBZdxR+u%Vey9j2c{~o^WNiS{qB^%;S+<W_nyAwy|wXRU`Dz7
zj`J=L>mC}d5jJh|VLvQ#XOHB|yz===PL;o{^xF2b#dgs?X1`rt&l31bKgh*?Rct)!
zw%-3kh4SPZFSKpu*<07?e>eT6U)-d>iN{NHtIhqD|EkV@T$wQMqO9pzyIA(f4R@Po
zuKnn0Wys4fS$Ran?Z+myw|`}nCL3|@(ktqaDlw2fGSmBIT1$+XZYv*8aqDhgk)SBP
zPnVv3am=q(4p0}3KJK`K=iuM{!pk`II`18`@6GMm*R*?L^b%%XcHz^jrra%DXdIro
zo`KQrDVyQje$$&f)sDO<n{xSHgX{De0;)10(rJG-s#ty(dEm(QC30ify$6A2##TYA
vTfL<DO;=6fT6*o!+KQ--{QLj3_cJcJ%kTUmI3N#L!Z3Kc`njxgN@xNAFpJO=

literal 0
HcmV?d00001