完成大乱斗流程调试

src/apis.js

@@ -126,28 +126,40 @@ export const getGameAPI = async (battleId) => {
   });
   const { battleStats = {}, playerStats = {} } = result;
   const data = {
-    winner: battleStats.winner,
-    redTotal: battleStats.redTotal,
-    blueTotal: battleStats.blueTotal,
-    roundsData: {},
-    redPlayers: {},
-    bluePlayers: {},
+    mode: battleStats.mode,
   };
-  playerStats.forEach((item) => {
-    const { playerBattleStats = {}, roundRecords = [] } = item;
-    if (playerBattleStats.team === 0) {
-      data.redPlayers[playerBattleStats.playerId] = playerBattleStats;
-    }
-    if (playerBattleStats.team === 1) {
-      data.bluePlayers[playerBattleStats.playerId] = playerBattleStats;
-    }
-    roundRecords.forEach((round) => {
-      data.roundsData[round.roundNumber] = {
-        ...data.roundsData[round.roundNumber],
-        [round.playerId]: round.arrowHistory,
-      };
+  if (battleStats.mode === 1) {
+    data.winner = battleStats.winner;
+    data.redTotal = battleStats.redTotal;
+    data.blueTotal = battleStats.blueTotal;
+    data.roundsData = {};
+    data.redPlayers = {};
+    data.bluePlayers = {};
+    playerStats.forEach((item) => {
+      const { playerBattleStats = {}, roundRecords = [] } = item;
+      if (playerBattleStats.team === 0) {
+        data.redPlayers[playerBattleStats.playerId] = playerBattleStats;
+      }
+      if (playerBattleStats.team === 1) {
+        data.bluePlayers[playerBattleStats.playerId] = playerBattleStats;
+      }
+      roundRecords.forEach((round) => {
+        data.roundsData[round.roundNumber] = {
+          ...data.roundsData[round.roundNumber],
+          [round.playerId]: round.arrowHistory,
+        };
+      });
     });
-  });
+  }
+  if (battleStats.mode === 2) {
+    data.players = [];
+    playerStats.forEach((item) => {
+      data.players.push({
+        ...item.playerBattleStats,
+        arrowHistory: item.roundRecords[0].arrowHistory,
+      })
+    });
+  }
   console.log("game result:", result);
   console.log("format data:", data);
   return data;

src/components/MeleeResult.vue

@@ -1,7 +1,12 @@
 <script setup>
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import BowTarget from "@/components/BowTarget.vue";
 import Avatar from "@/components/Avatar.vue";
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+const store = useStore();
+const { user } = storeToRefs(store);
+const scores = ref([]);
 const props = defineProps({
   show: {
     type: Boolean,
@@ -11,7 +16,21 @@ const props = defineProps({
     type: Function,
     default: () => {},
   },
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
 });
+watch(
+  () => props.data,
+  (value) => {
+    const mine = value.players.find((p) => p.playerId === user.value.id);
+    if (mine.arrowHistory) {
+      scores.value = mine.arrowHistory;
+    }
+  },
+  { deep: true, immediate: true }
+);
 </script>
 
 <template>
@@ -23,21 +42,26 @@ const props = defineProps({
       </view>
     </view>
     <view class="rank-rows">
-      <view v-for="(item, index) in [1, 2, 3, 4, 5]" :key="index">
+      <view v-for="(player, index) in data.players" :key="index">
         <image v-if="index === 0" src="../static/champ1.png" mode="widthFix" />
         <image v-if="index === 1" src="../static/champ2.png" mode="widthFix" />
         <image v-if="index === 2" src="../static/champ3.png" mode="widthFix" />
-        <view v-if="index > 2" class="rank-view">{{ item }}</view>
+        <view v-if="index > 2" class="rank-view">{{ index + 1 }}</view>
         <Avatar src="../static/avatar.png" :size="24" />
-        <text>积分 + 117分</text>
-        <text>117环</text>
-        <text v-for="(round, index2) in new Array(12).fill(9)" :key="index2">
-          {{ round }}环
+        <text
+          >积分
+          {{
+            player.totalScore > 0 ? "+" + player.totalScore : player.totalScore
+          }}分</text
+        >
+        <text>{{ player.totalRings }}环</text>
+        <text v-for="(arrow, index2) in player.arrowHistory" :key="index2">
+          {{ arrow.ringScore }}环
         </text>
       </view>
     </view>
-    <view :style="{ width: '95%', marginTop: '-5%' }">
-      <BowTarget />
+    <view :style="{ width: '95%' }">
+      <BowTarget :scores="scores" />
     </view>
     <view class="score-text"
       ><text :style="{ color: '#fed847' }">12</text>支箭，共<text
@@ -47,12 +71,12 @@ const props = defineProps({
     >
     <view class="score-row">
       <view
-        v-for="(score, index) in new Array(12).fill(9)"
+        v-for="(score, index) in scores"
         :key="index"
         class="score-item"
         :style="{ width: '13vw', height: '13vw' }"
       >
-        {{ score }}
+        {{ score.ringScore }}
       </view>
     </view>
   </view>
@@ -153,10 +177,16 @@ const props = defineProps({
 .rank-rows > view > text {
   margin-left: 10px;
   flex: 0 0 auto;
+  display: block;
+  width: 25px;
+}
+.rank-rows > view > text:nth-child(3) {
+  width: 80px;
 }
 .rank-rows > view > text:nth-child(4) {
   color: #fed847;
   padding-right: 10px;
   border-right: 1px solid #fff3;
+  width: 32px;
 }
 </style>

src/components/PlayerScore.vue

@@ -23,16 +23,22 @@ const rowCount = new Array(6).fill(0);
     <view>
       <view>
         <view v-for="(_, index) in rowCount" :key="index">
-          <text>{{ scores[index + 6] ? `${scores[index + 6]}环` : "-" }}</text>
+          <text>{{ scores[index] ? `${scores[index].ring}环` : "-" }}</text>
         </view>
       </view>
       <view>
         <view v-for="(_, index) in rowCount" :key="index">
-          <text>{{ scores[index + 6] ? `${scores[index + 6]}环` : "-" }}</text>
+          <text>{{
+            scores[index + 6] ? `${scores[index + 6].ring}环` : "-"
+          }}</text>
         </view>
       </view>
     </view>
-    <text>{{ scores.reduce((last, next) => last + next) }}环</text>
+    <text
+      >{{
+        scores.map((s) => s.ring).reduce((last, next) => last + next, 0)
+      }}环</text
+    >
   </view>
 </template>
 
@@ -52,6 +58,7 @@ const rowCount = new Array(6).fill(0);
 }
 .container > image:first-child {
   width: 30px;
+  height: 30px;
   border: 1px solid #fff3;
   border-radius: 50%;
   margin-right: 10px;
@@ -80,7 +87,7 @@ const rowCount = new Array(6).fill(0);
   border-bottom: 1px solid #fff3;
 }
 .container > text:nth-child(4) {
-  width: 50px;
+  width: 40px;
   text-align: right;
 }
 </style>

src/constants.js

@@ -3,6 +3,7 @@ export const MESSAGETYPES = {
   ShootSyncMePracticeID: parseInt("0xD88AE05E"), // 3632980062
   WaitForAllReady: parseInt("0x615C13BE"), // 1633424318
   AllReady: parseInt("0x1CCB49FD"), // 483084797
+  MeleeAllReady: parseInt("0x37132BD5"), // 924003285
   ShootResult: parseInt("0xAA0795E2"), // 2852623842
   CurrentRoundEnded: parseInt("0x3E2CE041"), // 1043128385
   ToSomeoneShoot: parseInt("0x077ACD1A"), // 125488410

src/pages/battle-result.vue

@@ -4,6 +4,7 @@ import { onLoad } from "@dcloudio/uni-app";
 import { getGameAPI } from "@/apis";
 import TeamResult from "@/components/TeamResult.vue";
 import MeleeResult from "@/components/MeleeResult.vue";
+import Avatar from "@/components/Avatar.vue";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
 const store = useStore();
@@ -18,14 +19,15 @@ const show = ref(false);
 onLoad(async (options) => {
   battleId.value = options.battleId;
   const result = await getGameAPI(
-    options.battleId || "BATTLE-1749386862250435325-854"
+    // options.battleId || "BATTLE-1749386862250435325-854"
+    options.battleId || "BATTLE-1749397329251504706-197"
   );
   data.value = result;
-  if (result.redPlayers[user.value.id]) {
+  if (result.mode === 1 && result.redPlayers[user.value.id]) {
     totalPoints.value = result.redTotal;
     ifWin.value = result.winner === 0;
   }
-  if (result.bluePlayers[user.value.id]) {
+  if (result.mode === 1 && result.bluePlayers[user.value.id]) {
     totalPoints.value = result.redTotal;
     ifWin.value = result.winner === 1;
   }
@@ -44,26 +46,98 @@ onMounted(async () => {});
       src="../static/winner-yellow.png"
       mode="widthFix"
     />
-    <view>
-      <image src="../static/battle-result.png" mode="widthFix" />
-    </view>
-    <view>
-      <image src="../static/shining-bg.png" mode="widthFix" />
-      <image src="../static/throphy.png" mode="widthFix" />
-      <text>{{ ifWin && data.winner === 1 ? "蓝队" : "红队" }}获胜</text>
-      <text>强势登顶，荣耀加冕</text>
-    </view>
-    <view>
+    <block v-if="data.mode === 1">
+      <view class="header-team">
+        <image src="../static/battle-result.png" mode="widthFix" />
+      </view>
+      <view class="battle-winner">
+        <image src="../static/shining-bg.png" mode="widthFix" />
+        <image src="../static/throphy.png" mode="widthFix" />
+        <text>{{ ifWin && data.winner === 1 ? "蓝队" : "红队" }}获胜</text>
+        <text>强势登顶，荣耀加冕</text>
+      </view>
+    </block>
+    <block v-if="data.mode === 2">
+      <view class="header-melee">
+        <view />
+        <image src="../static/battle-result.png" mode="widthFix" />
+        <view />
+      </view>
+      <view class="players">
+        <view v-for="(player, index) in data.players" :key="index">
+          <image
+            v-if="index === 0"
+            class="player-bg"
+            src="../static/melee-player-bg1.png"
+            mode="aspectFill"
+          />
+          <image
+            v-if="index === 1"
+            class="player-bg"
+            src="../static/melee-player-bg2.png"
+            mode="aspectFill"
+          />
+          <image
+            v-if="index === 2"
+            class="player-bg"
+            src="../static/melee-player-bg3.png"
+            mode="aspectFill"
+          />
+          <image
+            v-if="index === 0"
+            class="player-crown"
+            src="../static/champ1.png"
+            mode="widthFix"
+          />
+          <image
+            v-if="index === 1"
+            class="player-crown"
+            src="../static/champ2.png"
+            mode="widthFix"
+          />
+          <image
+            v-if="index === 2"
+            class="player-crown"
+            src="../static/champ3.png"
+            mode="widthFix"
+          />
+          <view v-if="index > 2" class="view-crown">{{ index + 1 }}</view>
+          <Avatar src="../static/avatar.png" :size="36" />
+          <view class="player-title">
+            <text>{{ player.name }}</text>
+            <text>钻石三级</text>
+          </view>
+          <text
+            ><text :style="{ color: '#fff' }">{{ player.totalRings }}</text>
+            环</text
+          >
+        </view>
+      </view>
+    </block>
+    <view class="battle-e">
       <image src="../static/row-yellow-bg.png" mode="widthFix" />
       <text>经验 +{{ totalPoints }}</text>
     </view>
-    <text>你是朋友中的佼佼者哦</text>
-    <view>
+    <text v-if="data.mode === 1" class="description">你是朋友中的佼佼者哦</text>
+    <text v-if="data.mode === 2" class="description"
+      >好成绩！全国排位赛等着你！</text
+    >
+    <view class="op-btn">
       <view @click="() => (show = true)">查看靶纸</view>
       <view @click="exit">退出</view>
     </view>
-    <TeamResult :show="show" :onClose="() => (show = false)" :data="data" />
-    <!-- <MeleeResult :show="show" :onClose="() => (show = false)" /> -->
+    <TeamResult
+      v-if="data.mode === 1"
+      :show="show"
+      :onClose="() => (show = false)"
+      :data="data"
+    />
+    <MeleeResult
+      v-if="data.mode === 2"
+      :show="show"
+      :onClose="() => (show = false)"
+      :data="data"
+    />
   </view>
 </template>
 
@@ -77,6 +151,7 @@ onMounted(async () => {});
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  /* z-index: -1; */
 }
 .tag {
   position: absolute;
@@ -87,14 +162,14 @@ onMounted(async () => {});
 .container > view {
   position: relative;
 }
-.container > view:nth-child(2) {
+.header-team {
   width: 80%;
   margin: 10px;
 }
-.container > view:nth-child(2) > image {
+.header-team > image {
   width: 20vw;
 }
-.container > view:nth-child(3) {
+.battle-winner {
   width: 100%;
   height: 38%;
   display: flex;
@@ -104,32 +179,32 @@ onMounted(async () => {});
   color: #fff9;
   font-size: 14px;
 }
-.container > view:nth-child(3) > image {
+.battle-winner > image {
   position: absolute;
   width: 100vw;
   top: 0;
   left: 0;
 }
-.container > view:nth-child(3) > image:nth-child(2) {
+.battle-winner > image:nth-child(2) {
   top: 6vw;
 }
-.container > view:nth-child(3) > text:nth-child(3) {
+.battle-winner > text:nth-child(3) {
   font-size: 30px;
   margin: 10px;
   font-weight: bold;
   color: #fed847;
 }
-.container > view:nth-child(4) {
+.battle-e {
   width: 100%;
   height: 60px;
   margin: 20px 0;
 }
-.container > view:nth-child(4) > image {
+.battle-e > image {
   position: absolute;
   width: 100vw;
   top: 45%;
 }
-.container > view:nth-child(4) > text {
+.battle-e > text {
   position: absolute;
   width: 100%;
   font-size: 30px;
@@ -137,19 +212,19 @@ onMounted(async () => {});
   text-align: center;
   top: 54%;
 }
-.container > text:nth-child(5) {
+.description {
   margin: 50px 0;
   font-size: 14px;
   color: #fed847;
   width: 100%;
   text-align: center;
 }
-.container > view:nth-child(6) {
+.op-btn {
   width: 100%;
   display: flex;
   justify-content: center;
 }
-.container > view:nth-child(6) > view {
+.op-btn > view {
   width: 36%;
   margin: 0 10px;
   background-color: #fed847;
@@ -157,8 +232,85 @@ onMounted(async () => {});
   padding: 10px 0;
   text-align: center;
 }
-.container > view:nth-child(6) > view:last-child {
+.op-btn > view:last-child {
   color: #fff;
   background-color: #757575;
 }
+.header-melee {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  margin-bottom: 30px;
+}
+.header-melee > view {
+  height: 1px;
+  background-color: #fff3;
+  width: 18%;
+}
+.header-melee > image {
+  width: 27%;
+  margin: 0 20px;
+}
+.players {
+  color: #fff3;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: calc(100% - 60px);
+  height: 300px;
+  margin: 0 30px;
+}
+.players > view {
+  width: 100%;
+  height: 60px;
+  flex: 0 0 auto;
+  overflow: hidden;
+  position: relative;
+  background-color: #ffffff1a;
+  display: flex;
+  align-items: center;
+}
+.player-bg {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+.player-bg {
+  position: absolute;
+  width: 100%;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+.player-crown {
+  width: 27px;
+  margin: 0 15px;
+}
+.view-crown {
+  width: 27px;
+  height: 27px;
+  line-height: 27px;
+  text-align: center;
+  border-radius: 50%;
+  margin: 0 15px;
+  color: #fff;
+  background-color: #676767;
+}
+.player-title {
+  display: flex;
+  flex-direction: column;
+  margin-left: 15px;
+  width: calc(100% - 160px);
+}
+.player-title > text:first-child {
+  color: #fff;
+  margin-bottom: 3px;
+}
+.player-title > text:last-child {
+  font-size: 13px;
+}
 </style>

src/pages/melee-match.vue

@@ -6,10 +6,14 @@ import BowTarget from "@/components/BowTarget.vue";
 import ShootProgress from "@/components/ShootProgress.vue";
 import PlayersRow from "@/components/PlayersRow.vue";
 import Timer from "@/components/Timer.vue";
-import BattleFooter from "@/components/BattleFooter.vue";
+import PlayerScore from "@/components/PlayerScore.vue";
 import SButton from "@/components/SButton.vue";
 import { matchGameAPI, readyGameAPI } from "@/apis";
-import { MESSAGETYPES, roundsName } from "@/constants";
+import { MESSAGETYPES } from "@/constants";
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+const store = useStore();
+const { user } = storeToRefs(store);
 const gameType = ref(0);
 const teamSize = ref(0);
 const matching = ref(false);
@@ -19,14 +23,10 @@ const currentRound = ref(1);
 const totalRounds = ref(0);
 const power = ref(0);
 const scores = ref([]);
-const redTeam = ref([]);
-const blueTeam = ref([]);
-const currentShooterId = ref(0);
 const tips = ref("即将开始...");
-const seq = ref(0);
 const timerSeq = ref(0);
-const roundResults = ref([
-]);
+const players = ref([]);
+const playersScores = ref({});
 
 onLoad((options) => {
   gameType.value = options.gameType;
@@ -66,41 +66,36 @@ async function onReceiveMessage(content) {
       // 这里会掉多次;
       timerSeq.value += 1;
       battleId.value = msg.id;
-      redTeam.value = msg.groupUserStatus.redTeam;
-      blueTeam.value = msg.groupUserStatus.blueTeam;
-      totalRounds.value = msg.groupUserStatus.config.maxRounds;
+      players.value = [
+        ...msg.groupUserStatus.redTeam,
+        ...msg.groupUserStatus.blueTeam,
+      ];
+      players.value.forEach((p) => {
+        playersScores.value[p.id] = [];
+      });
+    }
+    if (!start.value && msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
+      scores.value.push(msg.target);
+      power.value = msg.target.battery;
     }
     if (msg.id !== battleId.value) return;
-    if (msg.constructor === MESSAGETYPES.AllReady) {
+    if (msg.constructor === MESSAGETYPES.MeleeAllReady) {
+      totalRounds.value = msg.groupUserStatus.config.maxRounds;
       start.value = true;
       timerSeq.value = 0;
-    }
-    if (msg.constructor === MESSAGETYPES.ToSomeoneShoot) {
+      tips.value = "请在90秒内射完12支箭";
       scores.value = [];
-      seq.value += 1;
-      currentShooterId.value = msg.userId;
-      if (redTeam.value[0].id === currentShooterId.value) {
-        tips.value = `请红队射箭-第${roundsName[currentRound.value]}轮`;
-      } else {
-        tips.value = `请蓝队射箭-第${roundsName[currentRound.value]}轮`;
-      }
     }
     if (msg.constructor === MESSAGETYPES.ShootResult) {
-      scores.value = [msg.target];
-    }
-    if (msg.constructor === MESSAGETYPES.CurrentRoundEnded) {
-      const result = msg.preRoundResult;
-      scores.value = [];
-      currentShooterId.value = 0;
-      if (result.currentRound > 0 && result.currentRound < totalRounds.value) {
-        // 开始下一轮;
-        roundResults.value = result.roundResults;
-        currentRound.value = result.currentRound + 1;
+      if (msg.userId === user.value.id) {
+        scores.value = [msg.target];
+        power.value = msg.target.battery;
       }
+      playersScores.value[msg.userId].push(msg.target);
     }
     if (msg.constructor === MESSAGETYPES.MatchOver) {
       uni.redirectTo({
-        url: "/pages/battle-result?battleId=" + msg.id,
+        url: `/pages/battle-result?battleId=${msg.id}&winner=${msg.endStatus.winner}&gameType=${gameType.value}`,
       });
     }
   });
@@ -117,25 +112,29 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <Container title="排位赛" :bgType="1">
+  <Container title="大乱斗排位赛" :bgType="1">
     <view class="container">
-      <ShootProgress v-if="start" :tips="tips" :seq="seq" />
-      <PlayersRow
+      <ShootProgress v-if="start" :tips="tips" />
+      <!-- <PlayersRow
         v-if="start"
         :currentShooterId="currentShooterId"
         :blueTeam="blueTeam"
         :redTeam="redTeam"
-      />
+      /> -->
       <BowTarget
-        v-if="start"
+        :avatar="user.avatarUrl"
         :power="power"
         :currentRound="currentRound"
         :totalRound="totalRounds"
         :scores="scores"
       />
-      <BattleFooter
-        v-if="roundResults.length > 0"
-        :roundResults="roundResults"
+      <PlayerScore
+        v-if="start"
+        v-for="(player, index) in players"
+        :key="index"
+        :name="player.name"
+        :avatar="player.avatar"
+        :scores="playersScores[player.id]"
       />
       <Timer :seq="timerSeq" :callBack="readyToGo" />
     </view>

src/pages/ranking.vue

@@ -21,7 +21,7 @@ const toTeamMatchPage = (gameType, teamSize) => {
 
 const toMeleeMatchPage = (gameType, teamSize) => {
   uni.navigateTo({
-    url: `/pages/team-match?gameType=${gameType}&teamSize=${teamSize}`,
+    url: `/pages/melee-match?gameType=${gameType}&teamSize=${teamSize}`,
   });
 };
 </script>

src/pages/team-match.vue

@@ -139,7 +139,7 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <Container title="排位赛" :bgType="1">
+  <Container title="1V1排位赛" :bgType="1">
     <view class="container">
       <BattleHeader v-if="!start" :redTeam="redTeam" :blueTeam="blueTeam" />
       <Guide noBg v-if="!start">