完成大乱斗流程调试

2025-06-09 01:17:18 +08:00
parent 80e0b07c0e
commit e49de0e288
11 changed files with 308 additions and 107 deletions
--- a/src/pages/battle-result.vue
+++ b/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>
--- a/src/pages/melee-match.vue
+++ b/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>
--- a/src/pages/ranking.vue
+++ b/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>
--- a/src/pages/team-match.vue
+++ b/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">