添加2v2页面

2025-08-13 16:44:25 +08:00
parent 5709035d4b
commit f388270fff
18 changed files with 779 additions and 54 deletions
--- a/src/components/HeaderProgress.vue
+++ b/src/components/HeaderProgress.vue
@@ -0,0 +1,134 @@
+<script setup>
+import { ref, watch, onMounted, onUnmounted } from "vue";
+import audioManager from "@/audioManager";
+import { MESSAGETYPES } from "@/constants";
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+const store = useStore();
+const { user } = storeToRefs(store);
+
+const tips = ref("请蓝队射击");
+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 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);
+//       }
+//     }
+//   }
+// );
+
+const updateSound = () => {
+  sound.value = !sound.value;
+  if (!sound.value) audioManager.stop(currentSound.value);
+};
+
+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 (melee.value && msg.userId !== user.value.id) return;
+      if (!halfTime.value && msg.target) {
+        currentSound.value = msg.target.ring
+          ? `${msg.target.ring}环`
+          : "未上靶";
+        audioManager.play(currentSound.value);
+      }
+    } else if (msg.constructor === MESSAGETYPES.AllReady) {
+      audioManager.play("比赛开始");
+    } else if (msg.constructor === MESSAGETYPES.MeleeAllReady) {
+      halfTime.value = false;
+      audioManager.play("比赛开始");
+    } else if (msg.constructor === MESSAGETYPES.CurrentRoundEnded) {
+      currentRoundEnded.value = true;
+    } else if (msg.constructor === MESSAGETYPES.HalfTimeOver) {
+      halfTime.value = true;
+      audioManager.play("中场休息");
+    } else if (msg.constructor === MESSAGETYPES.MatchOver) {
+      audioManager.play("比赛结束");
+    } else if (msg.constructor === MESSAGETYPES.FinalShoot) {
+      audioManager.play("决金箭轮");
+    } else if (msg.constructor === MESSAGETYPES.ShootSyncMePracticeID) {
+      ended.value = true;
+    } else if (msg.constructor === MESSAGETYPES.MatchOver) {
+      ended.value = true;
+    }
+  });
+}
+
+const playSound = (key) => {
+  currentSound.value = key;
+  audioManager.play(key);
+};
+
+onMounted(() => {
+  uni.$on("socket-inbox", onReceiveMessage);
+  uni.$on("play-sound", playSound);
+});
+
+onUnmounted(() => {
+  uni.$off("socket-inbox", onReceiveMessage);
+  uni.$off("play-sound", playSound);
+  if (timer.value) clearInterval(timer.value);
+});
+</script>
+
+<template>
+  <view class="container">
+    <text>{{ tips }}</text>
+    <text>({{ currentRound }}/{{ totalRound }})</text>
+    <button hover-class="none" @click="updateSound">
+      <image
+        :src="`../static/sound${sound ? '' : '-off'}-yellow.png`"
+        mode="widthFix"
+      />
+    </button>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  width: 50vw;
+  color: #fed847;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.container > button:last-child {
+  width: 36px;
+  height: 36px;
+}
+.container > button:last-child > image {
+  width: 36px;
+  min-height: 36px;
+}
+</style>