添加为上靶的方向指示

src/components/BowTarget.vue

@@ -1,6 +1,7 @@
 <script setup>
-import { ref, watch, onMounted, onBeforeUnmount } from "vue";
+import { ref, watch, onMounted, onBeforeUnmount, computed } from "vue";
 import StartCountdown from "@/components/StartCountdown.vue";
+import { MESSAGETYPES } from "@/constants";
 import { simulShootAPI } from "@/apis";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
@@ -42,12 +43,13 @@ const props = defineProps({
   },
 });
 
-const showsimul = ref(false);
 const latestOne = ref(null);
 const bluelatestOne = ref(null);
 const prevScores = ref([]);
 const prevBlueScores = ref([]);
 const timer = ref(null);
+const dirTimer = ref(null);
+const angle = ref(null);
 
 watch(
   () => props.scores,
@@ -98,10 +100,38 @@ const simulShoot2 = async () => {
   if (device.value.deviceId) await simulShootAPI(device.value.deviceId, 1, 1);
 };
 
-onMounted(() => {
+const env = computed(() => {
   const accountInfo = uni.getAccountInfoSync();
-  const envVersion = accountInfo.miniProgram.envVersion;
-  if (envVersion !== "release") showsimul.value = true;
+  return accountInfo.miniProgram.envVersion;
+});
+
+const arrowStyle = computed(() => {
+  return {
+    transform: `rotateX(180deg) translate(-50%, -50%) rotate(${
+      360 - angle.value
+    }deg) translateY(100%)`,
+  };
+});
+
+async function onReceiveMessage(messages = []) {
+  messages.forEach((msg) => {
+    if (
+      msg.constructor === MESSAGETYPES.ShootSyncMeArrowID ||
+      msg.constructor === MESSAGETYPES.ShootResult
+    ) {
+      if (msg.userId === user.value.id) {
+        angle.value =
+          !msg.target.ring && msg.target.angle >= 0 ? msg.target.angle : null;
+        dirTimer.value = setTimeout(() => {
+          angle.value = null;
+        }, 1200);
+      }
+    }
+  });
+}
+
+onMounted(() => {
+  uni.$on("socket-inbox", onReceiveMessage);
 });
 
 onBeforeUnmount(() => {
@@ -109,6 +139,11 @@ onBeforeUnmount(() => {
     clearTimeout(timer.value);
     timer.value = null;
   }
+  if (dirTimer.value) {
+    clearTimeout(dirTimer.value);
+    dirTimer.value = null;
+  }
+  uni.$off("socket-inbox", onReceiveMessage);
 });
 </script>
 
@@ -122,6 +157,9 @@ onBeforeUnmount(() => {
       }}</text>
     </view>
     <view class="target">
+      <view v-if="angle !== null" class="arrow-dir" :style="arrowStyle">
+        <image src="../static/arrow-direction.png" mode="widthFix" />
+      </view>
       <view v-if="stop" class="stop-sign">中场休息</view>
       <view
         v-if="latestOne && latestOne.ring && user.id === latestOne.playerId"
@@ -206,7 +244,7 @@ onBeforeUnmount(() => {
     <view v-if="avatar" class="footer">
       <image :src="avatar" mode="widthFix" />
     </view>
-    <view class="simul" v-if="showsimul">
+    <view class="simul" v-if="env !== 'release'">
       <button @click="simulShoot">模拟</button>
       <button @click="simulShoot2">射箭</button>
     </view>
@@ -339,4 +377,24 @@ 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%;
+  left: 50%;
+  bottom: 50%;
+}
+.arrow-dir > image {
+  animation: spring-in 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+  width: 100%;
+}
 </style>