流程完善

src/App.vue

@@ -194,4 +194,15 @@ button::after {
   padding-top: 20px;
   position: relative;
 }
+.half-time-tip {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.half-time-tip > text:last-child {
+  margin-top: 20px;
+  color: #fff9;
+}
 </style>

src/components/BattleHeader.vue

@@ -42,6 +42,7 @@ defineProps({
       >
         <Avatar
           :src="player.avatar"
+          :rankLvl="player.rankLvl"
           :size="40"
           :rank="showRank ? index + 1 : 0"
         />

src/components/PlayerSeats.vue

@@ -17,14 +17,16 @@ const seats = new Array(props.total).fill(1);
     <view v-for="(_, index) in seats" :key="index">
       <image src="../static/player-bg.png" mode="widthFix" />
       <image
-        v-if="players[index]"
+        v-if="players[index] && players[index].name"
         :src="players[index].avatar || '../static/user-icon.png'"
         mode="widthFix"
       />
       <view v-else class="player-unknow">
         <image src="../static/question-mark.png" mode="widthFix" />
       </view>
-      <text v-if="players[index]">{{ players[index].name }}</text>
+      <text v-if="players[index] && players[index].name">{{
+        players[index].name
+      }}</text>
       <text v-else :style="{ color: '#fff9' }">虚位以待</text>
       <view v-if="index === 0" class="founder">创建者</view>
       <image

src/components/ShootProgress.vue

@@ -2,6 +2,10 @@
 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 props = defineProps({
   start: {
     type: Boolean,
@@ -27,6 +31,10 @@ const props = defineProps({
     type: String,
     default: "",
   },
+  melee: {
+    type: Boolean,
+    default: false,
+  },
 });
 
 const barColor = ref("#fed847");
@@ -36,6 +44,7 @@ const sound = ref(true);
 const currentSound = ref("");
 const currentRound = ref(props.currentRound);
 const currentRoundEnded = ref(!props.battleId);
+const halfTimeTip = ref(false);
 
 watch(
   () => props.tips,
@@ -125,6 +134,7 @@ async function onReceiveMessage(messages = []) {
       (props.battleId && msg.constructor === MESSAGETYPES.ShootResult) ||
       (!props.battleId && msg.constructor === MESSAGETYPES.ShootSyncMeArrowID)
     ) {
+      if (props.melee && msg.userId !== user.value.id) return;
       if (msg.target) {
         currentSound.value = msg.target.ring
           ? `${msg.target.ring}环`
@@ -134,10 +144,11 @@ async function onReceiveMessage(messages = []) {
     } else if (msg.constructor === MESSAGETYPES.AllReady) {
       audioManager.play("比赛开始");
     } else if (msg.constructor === MESSAGETYPES.MeleeAllReady) {
-      audioManager.play("比赛开始");
+      if (!halfTimeTip.value) audioManager.play("比赛开始");
     } else if (msg.constructor === MESSAGETYPES.CurrentRoundEnded) {
       currentRoundEnded.value = true;
     } else if (msg.constructor === MESSAGETYPES.HalfTimeOver) {
+      halfTimeTip.value = true;
       audioManager.play("中场休息");
     } else if (msg.constructor === MESSAGETYPES.MatchOver) {
       audioManager.play("比赛结束");

src/pages/battle-result.vue

@@ -19,7 +19,7 @@ onLoad(async (options) => {
   battleId.value = options.battleId;
   const result = await getGameAPI(
     // options.battleId || "BATTLE-1750867490990424058-718"
-    options.battleId || "BATTLE-1750688536849458226-518"
+    options.battleId || "BATTLE-1752563964391008873-624"
   );
   data.value = result;
   if (result.mode === 1 && result.redPlayers[user.value.id]) {
@@ -285,8 +285,8 @@ const checkBowData = () => {
   margin: 0 20px;
 }
 .players {
-  flex-wrap: wrap;
   display: flex;
+  flex-direction: column;
   overflow: auto;
   width: calc(100% - 60px);
   color: #fff6;

src/pages/battle-room.vue

@@ -16,6 +16,7 @@ import SModal from "@/components/SModal.vue";
 import ScreenHint from "@/components/ScreenHint.vue";
 import RoundEndTip from "@/components/RoundEndTip.vue";
 import TestDistance from "@/components/TestDistance.vue";
+import PlayerScore from "@/components/PlayerScore.vue";
 import { getRoomAPI, destroyRoomAPI, exitRoomAPI, startRoomAPI } from "@/apis";
 import { MESSAGETYPES, roundsName, getMessageTypeName } from "@/constants";
 import useStore from "@/store";
@@ -53,7 +54,7 @@ const playersScores = ref({});
 const showModal = ref(false);
 const halfTimeTip = ref(false);
 const isFinalShoot = ref(false);
-const total = ref(90);
+const total = ref(15);
 
 watch(
   () => [players.value, playersScores.value],
@@ -132,7 +133,7 @@ onLoad(async (options) => {
             }, 300);
           } else if (remain > 90 && remain <= 110) {
             halfTimeTip.value = true;
-            countDown.value = 20;
+            total.value = 20;
             tips.value = "准备下半场";
             setTimeout(() => {
               uni.$emit("update-ramain", 110 - remain);
@@ -162,7 +163,6 @@ onLoad(async (options) => {
       return false;
     });
     if (result.battleType === 1) {
-      total.value = 15;
       if (user.value.id !== owner.value.id) {
         opponent.value = {
           id: user.value.id,
@@ -183,12 +183,21 @@ onLoad(async (options) => {
         });
       }
     } else if (result.battleType === 2) {
-      result.members.forEach((m) => {
+      const ownerIndex = result.members.findIndex(
-        players.value.push(m.userInfo);
+        (m) => m.userInfo.id === result.creator
+      );
+      if (ownerIndex !== -1) {
+        players.value.push(result.members[ownerIndex].userInfo);
+      } else {
+        players.value.push({});
+      }
+      result.members.forEach((m, index) => {
+        if (ownerIndex !== index) players.value.push(m.userInfo);
       });
     }
   }
 });
+
 const startGame = async () => {
   const result = await startRoomAPI(room.value.number);
   timerSeq.value += 1;
@@ -208,11 +217,19 @@ async function onReceiveMessage(messages = []) {
       // 这里会掉多次;
       timerSeq.value += 1;
       battleId.value = msg.id;
+      step.value = 2;
       if (room.value.battleType === 1) {
         redTeam.value = msg.groupUserStatus.redTeam;
         blueTeam.value = msg.groupUserStatus.blueTeam;
+      } else if (room.value.battleType === 2) {
+        players.value = [
+          ...msg.groupUserStatus.redTeam,
+          ...msg.groupUserStatus.blueTeam,
+        ];
+        players.value.forEach((p) => {
+          playersScores.value[p.id] = [];
+        });
       }
-      step.value = 2;
     }
     if (msg.roomNumber === roomNumber.value) {
       if (msg.constructor === MESSAGETYPES.UserEnterRoom) {
@@ -232,11 +249,19 @@ async function onReceiveMessage(messages = []) {
           }
         }
         if (room.value.battleType === 2) {
-          players.value.push({
+          if (room.value.creator === msg.userId) {
-            id: msg.userId,
+            players.value[0] = {
-            name: msg.name,
+              id: msg.userId,
-            avatar: msg.avatar,
+              name: msg.name,
-          });
+              avatar: msg.avatar,
+            };
+          } else {
+            players.value.push({
+              id: msg.userId,
+              name: msg.name,
+              avatar: msg.avatar,
+            });
+          }
         }
       }
       if (!start.value && msg.constructor === MESSAGETYPES.UserExitRoom) {
@@ -281,14 +306,17 @@ async function onReceiveMessage(messages = []) {
           redArrows: [],
           blueArrows: [],
         });
+        total.value = 15;
       }
       if (msg.constructor === MESSAGETYPES.MeleeAllReady) {
         start.value = true;
         startCount.value = true;
+        step.value = 3;
         seq.value += 1;
         timerSeq.value = 0;
         tips.value = "请连续射出6支箭";
         scores.value = [];
+        total.value = 90;
       }
       if (msg.constructor === MESSAGETYPES.ToSomeoneShoot) {
         if (room.value.battleType === 1) {
@@ -373,6 +401,7 @@ async function onReceiveMessage(messages = []) {
       }
       if (msg.constructor === MESSAGETYPES.HalfTimeOver) {
         startCount.value = false;
+        total.value = 20;
         halfTimeTip.value = true;
         tips.value = "准备下半场";
       }
@@ -488,7 +517,7 @@ onUnmounted(() => {
         >
         <SButton
           v-if="user.id === owner.id && room.battleType === 2"
-          :disabled="players.length < 2"
+          :disabled="players.length < 3"
           :onClick="startGame"
           >进入大乱斗</SButton
         >
@@ -504,7 +533,7 @@ onUnmounted(() => {
       />
       <TestDistance :guide="false" />
     </view>
-    <view v-if="step === 3">
+    <view v-if="step === 3" :style="{ width: '100%' }">
       <ShootProgress
         :tips="tips"
         :seq="seq"
@@ -512,6 +541,7 @@ onUnmounted(() => {
         :total="total"
         :currentRound="currentRound"
         :battleId="battleId"
+        :melee="room.battleType === 2"
       />
       <PlayersRow
         v-if="room.battleType === 1"
@@ -529,13 +559,13 @@ onUnmounted(() => {
         :blueScores="blueScores"
       />
       <BattleFooter
-        v-if="room.battleType === 1"
+        v-if="roundResults.length"
         :roundResults="roundResults"
         :redPoints="redPoints"
         :bluePoints="bluePoints"
       />
       <PlayerScore
-        v-if="room.battleType === 2"
+        v-if="playersSorted.length"
         v-for="(player, index) in playersSorted"
         :key="index"
         :name="player.name"

src/pages/melee-match.vue

@@ -195,6 +195,7 @@ onUnmounted(() => {
           :start="start"
           :tips="tips"
           :total="countDown"
+          :melee="true"
         />
         <view v-if="start" class="user-row">
           <Avatar :src="user.avatar" :size="35" />
@@ -248,15 +249,4 @@ onUnmounted(() => {
   width: 100%;
   height: 100%;
 }
-.half-time-tip {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-.half-time-tip > text:last-child {
-  margin-top: 20px;
-  color: #fff9;
-}
 </style>