完成用新UI跑1v1

src/components/HeaderProgress.vue

@@ -7,42 +7,42 @@ import { storeToRefs } from "pinia";
 const store = useStore();
 const { user } = storeToRefs(store);
 
-const tips = ref("请蓝队射击");
+const tips = ref("");
+const melee = ref(false);
 const battleId = ref("");
-const isMelee = ref("");
 const timer = ref(null);
 const sound = ref(true);
 const currentSound = ref("");
 const currentRound = ref(1);
-const totalRound = ref(6);
+const totalRound = ref(1);
 const currentRoundEnded = ref(false);
 const ended = ref(false);
 const halfTime = ref(false);
 
-// watch(
-//   () => props.tips,
-//   (newVal) => {
-//     let key = "";
-//     if (newVal.includes("红队")) key = "请红方射击";
-//     if (newVal.includes("蓝队")) key = "请蓝方射击";
-//     if (key && sound.value) {
-//       if (currentRoundEnded.value) {
-//         currentRound.value += 1;
-//         currentRoundEnded.value = false;
-//         if (currentRound.value === 1) audioManager.play("第一轮");
-//         if (currentRound.value === 2) audioManager.play("第二轮");
-//         if (currentRound.value === 3) audioManager.play("第三轮");
-//         if (currentRound.value === 4) audioManager.play("第四轮");
-//         if (currentRound.value === 5) audioManager.play("第五轮");
-//         setTimeout(() => {
-//           audioManager.play(key);
-//         }, 1000);
-//       } else {
-//         audioManager.play(key);
-//       }
-//     }
-//   }
-// );
+watch(
+  () => tips.value,
+  (newVal) => {
+    let key = "";
+    if (newVal.includes("红队")) key = "请红方射击";
+    if (newVal.includes("蓝队")) key = "请蓝方射击";
+    if (key && sound.value) {
+      if (currentRoundEnded.value) {
+        currentRound.value += 1;
+        currentRoundEnded.value = false;
+        if (currentRound.value === 1) audioManager.play("第一轮");
+        if (currentRound.value === 2) audioManager.play("第二轮");
+        if (currentRound.value === 3) audioManager.play("第三轮");
+        if (currentRound.value === 4) audioManager.play("第四轮");
+        if (currentRound.value === 5) audioManager.play("第五轮");
+        setTimeout(() => {
+          audioManager.play(key);
+        }, 1000);
+      } else {
+        audioManager.play(key);
+      }
+    }
+  }
+);
 
 const updateSound = () => {
   sound.value = !sound.value;
@@ -52,10 +52,7 @@ const updateSound = () => {
 async function onReceiveMessage(messages = []) {
   if (!sound.value || ended.value) return;
   messages.forEach((msg) => {
-    if (
-      (battleId.value && msg.constructor === MESSAGETYPES.ShootResult) ||
-      (!battleId.value && msg.constructor === MESSAGETYPES.ShootSyncMeArrowID)
-    ) {
+    if (battleId.value && msg.constructor === MESSAGETYPES.ShootResult) {
       if (melee.value && msg.userId !== user.value.id) return;
       if (!halfTime.value && msg.target) {
         currentSound.value = msg.target.ring
@@ -63,12 +60,16 @@ async function onReceiveMessage(messages = []) {
           : "未上靶";
         audioManager.play(currentSound.value);
       }
+    } else if (msg.constructor === MESSAGETYPES.WaitForAllReady) {
+      battleId.value = msg.id;
     } else if (msg.constructor === MESSAGETYPES.AllReady) {
       audioManager.play("比赛开始");
     } else if (msg.constructor === MESSAGETYPES.MeleeAllReady) {
+      melee.value = true;
       halfTime.value = false;
       audioManager.play("比赛开始");
     } else if (msg.constructor === MESSAGETYPES.CurrentRoundEnded) {
+      currentRound.value += 1;
       currentRoundEnded.value = true;
     } else if (msg.constructor === MESSAGETYPES.HalfTimeOver) {
       halfTime.value = true;
@@ -90,12 +91,18 @@ const playSound = (key) => {
   audioManager.play(key);
 };
 
+const onUpdateTips = (newVal) => {
+  tips.value = newVal;
+};
+
 onMounted(() => {
+  uni.$on("update-tips", onUpdateTips);
   uni.$on("socket-inbox", onReceiveMessage);
   uni.$on("play-sound", playSound);
 });
 
 onUnmounted(() => {
+  uni.$off("update-tips", onUpdateTips);
   uni.$off("socket-inbox", onReceiveMessage);
   uni.$off("play-sound", playSound);
   if (timer.value) clearInterval(timer.value);
@@ -105,7 +112,7 @@ onUnmounted(() => {
 <template>
   <view class="container">
     <text>{{ tips }}</text>
-    <text>({{ currentRound }}/{{ totalRound }})</text>
+    <!-- <text> ({{ currentRound }}/{{ totalRound }}) </text> -->
     <button hover-class="none" @click="updateSound">
       <image
         :src="`../static/sound${sound ? '' : '-off'}-yellow.png`"