细节完善

2025-08-15 11:23:23 +08:00
parent 2a9a373743
commit b46bc7aaa5
9 changed files with 121 additions and 80 deletions
--- a/src/apis.js
+++ b/src/apis.js
@@ -259,12 +259,14 @@ export const getGameAPI = async (battleId) => {
    battleId,
    mode: battleStats.mode, // 1.几V几 2.大乱斗
    gameMode: battleStats.gameMode, // 1.约战 2.排位
+    teamSize: battleStats.teamSize,
  };
  if (battleStats && battleStats.mode === 1) {
    data.winner = battleStats.winner;
    data.roundsData = {};
    data.redPlayers = {};
    data.bluePlayers = {};
+    data.mvps = [];
    data.goldenRound =
      goldenRoundRecords && goldenRoundRecords.length
        ? goldenRoundRecords[0]
@@ -277,6 +279,9 @@ export const getGameAPI = async (battleId) => {
      if (playerBattleStats.team === 1) {
        data.bluePlayers[playerBattleStats.playerId] = playerBattleStats;
      }
+      if (playerBattleStats.mvp) {
+        data.mvps.push(playerBattleStats);
+      }
      roundRecords.forEach((round) => {
        data.roundsData[round.roundNumber] = {
          ...data.roundsData[round.roundNumber],
@@ -284,6 +289,7 @@ export const getGameAPI = async (battleId) => {
        };
      });
    });
+    data.mvps.sort((a, b) => b.totalRings - a.totalRings);
  }
  if (battleStats && battleStats.mode === 2) {
    data.players = [];
--- a/src/components/BattleFooter.vue
+++ b/src/components/BattleFooter.vue
@@ -1,3 +1,4 @@
+=
 <script setup>
 import BowPower from "@/components/BowPower.vue";
 import { RoundImages } from "@/constants";
@@ -14,6 +15,10 @@ defineProps({
    type: Number,
    default: 0,
  },
+  power: {
+    type: Number,
+    default: 0,
+  },
 });
 </script>

@@ -21,8 +26,13 @@ defineProps({
  <view class="container">
    <view class="guide-row">
      <image src="../static/shooter.png" mode="widthFix" />
-      <view :style="{ marginBottom: '10px', transform: 'scale(0.8) translateX(10px)' }">
-        <BowPower :power="20" />
+      <view
+        :style="{
+          marginBottom: '10px',
+          transform: 'scale(0.8) translateX(10px)',
+        }"
+      >
+        <BowPower :power="power" />
      </view>
    </view>
    <view>
@@ -47,9 +57,12 @@ defineProps({
        </view>
        <block v-if="roundResults.length < 3">
          <view v-for="i in 3 - roundResults.length" :key="i">
-            <image :src="RoundImages[`round${i}`]" mode="widthFix" />
+            <image
+              :src="RoundImages[`round${i + roundResults.length}`]"
+              mode="widthFix"
+            />
            <view>
-              <text>{{ i }}</text>
+              <text></text>
              <text>环</text>
            </view>
          </view>
@@ -71,7 +84,10 @@ defineProps({
        </view>
        <block v-if="roundResults.length < 3">
          <view v-for="i in 3 - roundResults.length" :key="i">
-            <image :src="RoundImages[`round${i}`]" mode="widthFix" />
+            <image
+              :src="RoundImages[`round${i + roundResults.length}`]"
+              mode="widthFix"
+            />
            <view>
              <text></text>
              <text>环</text>
--- a/src/components/BowTarget.vue
+++ b/src/components/BowTarget.vue
@@ -295,7 +295,7 @@ onMounted(() => {
 }
 .simul {
  position: absolute;
-  bottom: 20px;
+  bottom: 40px;
  right: 20px;
  margin-left: 20px;
 }
--- a/src/components/HeaderProgress.vue
+++ b/src/components/HeaderProgress.vue
@@ -27,7 +27,6 @@ watch(
    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("第二轮");
@@ -63,14 +62,17 @@ async function onReceiveMessage(messages = []) {
    } else if (msg.constructor === MESSAGETYPES.WaitForAllReady) {
      battleId.value = msg.id;
    } else if (msg.constructor === MESSAGETYPES.AllReady) {
+      currentRoundEnded.value = true;
      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;
+      if (msg.preRoundResult && msg.preRoundResult.currentRound) {
+        currentRound.value = msg.preRoundResult.currentRound + 1;
        currentRoundEnded.value = true;
+      }
    } else if (msg.constructor === MESSAGETYPES.HalfTimeOver) {
      halfTime.value = true;
      audioManager.play("中场休息");
@@ -113,7 +115,7 @@ onUnmounted(() => {
  <view class="container">
    <text>{{ tips }}</text>
    <!-- <text> ({{ currentRound }}/{{ totalRound }}) </text> -->
-    <button hover-class="none" @click="updateSound">
+    <button v-if="!!tips" hover-class="none" @click="updateSound">
      <image
        :src="`../static/sound${sound ? '' : '-off'}-yellow.png`"
        mode="widthFix"
--- a/src/components/ShootProgress2.vue
+++ b/src/components/ShootProgress2.vue
@@ -16,7 +16,7 @@ const props = defineProps({
  },
 });

-const barColor = ref("linear-gradient( 180deg, #FFA0A0 0%, #FF6060 100%)");
+const barColor = ref("");
 const remain = ref(15);
 const timer = ref(null);

--- a/src/components/TeamAvatars.vue
+++ b/src/components/TeamAvatars.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch } from "vue";
+import { ref, watch, onMounted } from "vue";
 const props = defineProps({
  isRed: {
    type: Boolean,
@@ -18,13 +18,33 @@ const props = defineProps({
    default: false,
  },
 });
-const players = ref(props.team);
+const players = ref({});
 const youTurn = ref(false);
+const firstName = ref("");
+
+onMounted(() => {
+  props.team.forEach((p, index) => {
+    players.value[p.id] = { sort: index, ...p };
+  });
+});
+
 watch(
  () => props.currentShooterId,
  (newVal) => {
-    const exit = props.team.some((p) => p.id === newVal);
-    youTurn.value = !!exit;
+    if (!newVal) return;
+    const index = props.team.findIndex((p) => p.id === newVal);
+    youTurn.value = index >= 0;
+    if (index >= 0) {
+      const newPlayers = [...props.team];
+      const target = newPlayers.splice(index, 1)[0];
+      if (target) {
+        newPlayers.unshift(target);
+        firstName.value = target.name;
+        newPlayers.forEach((p, index) => {
+          players.value[p.id] = { sort: index, ...p };
+        });
+      }
+    }
  },
  { immediate: true }
 );
@@ -37,17 +57,22 @@ watch(
      :key="index"
      class="player"
      :style="{
-        width: (youTurn ? 40 - index * 5 : 30) + 'px',
-        height: (youTurn ? 40 - index * 5 : 30) + 'px',
+        width:
+          (youTurn ? 40 - ((players[item.id] || {}).sort || 0) * 5 : 35) + 'px',
+        height:
+          (youTurn ? 40 - ((players[item.id] || {}).sort || 0) * 5 : 35) + 'px',
        borderColor: isRed ? '#ff6060' : '#5fadff',
-        zIndex: players.length - index,
-        top: youTurn ? index * 2 + 'px' : '6px',
-        left: (isRed ? index * 20 : 35 - index * 15) + 'px',
+        zIndex: team.length - ((players[item.id] || {}).sort || 0),
+        top: youTurn ? ((players[item.id] || {}).sort || 0) * 2 + 'px' : '6px',
+        left:
+          (isRed
+            ? ((players[item.id] || {}).sort || 0) * 20
+            : 35 - ((players[item.id] || {}).sort || 0) * 15) + 'px',
      }"
    >
      <image :src="item.avatar || '../static/user-icon.png'" mode="widthFix" />
      <text
-        v-if="youTurn && index === 0"
+        v-if="youTurn && ((players[item.id] || {}).sort || 0) === 0"
        :style="{ backgroundColor: isRed ? '#ff6060' : '#5fadff' }"
        >{{ isRed ? "红队" : "蓝队" }}</text
      >
@@ -59,7 +84,7 @@ watch(
        color: isRed ? '#ff6060' : '#5fadff',
        [isRed ? 'left' : 'right']: 0,
      }"
-      >{{ team[0].name }}</text
+      >{{ firstName }}</text
    >
  </view>
 </template>
--- a/src/pages/battle-result.vue
+++ b/src/pages/battle-result.vue
@@ -21,12 +21,10 @@ function exit() {
 }

 onLoad(async (options) => {
-  // const myId = user.value.id;
-  const myId = 39;
+  const myId = user.value.id;
  if (options.battleId) {
    const result = await getGameAPI(
-      options.battleId || "BATTLE-1754302650041171466-546"
-      // options.battleId || "BATTLE-1754017978280570919-571"
+      options.battleId || "BATTLE-1755156795334880000-865"
    );
    data.value = {
      ...result,
@@ -58,12 +56,17 @@ onLoad(async (options) => {
  } else {
    const battleInfo = uni.getStorageSync("last-battle");
    if (!battleInfo) return;
-    data.value = battleInfo;
+    data.value = {
+      mvps: [],
+      ...battleInfo,
+    };
    if (battleInfo.mode === 1) {
      battleInfo.playerStats.forEach((p) => {
        if (p.team === 1) data.value.bluePlayers = [p];
        if (p.team === 0) data.value.redPlayers = [p];
+        if (p.mvp) data.value.mvps.push(p);
      });
+      data.value.mvps.sort((a, b) => b.totalRings - a.totalRings);
    }
    rank.value = 0;
    const mine = battleInfo.playerStats.find((p, index) => {
@@ -90,7 +93,7 @@ const checkBowData = () => {
    <block v-if="data.mode === 1">
      <view class="header-team" :style="{ marginTop: '25%' }">
        <image src="../static/battle-result.png" mode="widthFix" />
-        <!-- <view class="header-solo">
+        <view class="header-solo" v-if="data.teamSize === 2">
          <text
            :style="{
              background:
@@ -110,47 +113,38 @@ const checkBowData = () => {
            :borderColor="data.winner === 1 ? '#5FADFF' : '#FF5656'"
            mode="widthFix"
          />
-        </view> -->
        </view>
-      <view class="header-mvp">
-        <image src="../static/red-team-win.png" mode="widthFix" />
-        <view>
+      </view>
+      <view class="header-mvp" v-if="data.teamSize !== 2">
+        <image
+          :src="`../static/${data.winner === 1 ? 'blue' : 'red'}-team-win.png`"
+          mode="widthFix"
+        />
        <view>
+          <view v-if="data.mvps && data.mvps[0].totalRings">
            <image src="../static/title-mvp.png" mode="widthFix" />
            <text
              >斩获<text
                :style="{ color: '#fed847', fontSize: '18px', margin: '0 2px' }"
-                >60</text
+                >{{ data.mvps[0].totalRings }}</text
              >环</text
            >
          </view>
-          <view>
-            <view>
+          <view v-if="data.mvps && data.mvps.length">
+            <view v-for="(player, index) in data.mvps" :key="index">
              <view class="team-avatar">
                <Avatar
-                  :src="user.avatar"
+                  :src="player.avatar"
                  :size="40"
                  :borderColor="data.myTeam === 1 ? '#5fadff' : '#ff6060'"
                />
-                <text :style="{ backgroundColor: '#ff6060' }">自己</text>
+                <text
+                  v-if="player.id === user.id"
+                  :style="{ backgroundColor: '#ff6060' }"
+                  >自己</text
+                >
              </view>
-              <text>某某某</text>
-            </view>
-            <view>
-              <Avatar
-                :src="user.avatar"
-                :size="40"
-                :borderColor="data.myTeam === 1 ? '#5fadff' : '#ff6060'"
-              />
-              <text>某某某</text>
-            </view>
-            <view>
-              <Avatar
-                :src="user.avatar"
-                :size="40"
-                :borderColor="data.myTeam === 1 ? '#5fadff' : '#ff6060'"
-              />
-              <text>某某某</text>
+              <text>{{ player.name }}</text>
            </view>
          </view>
        </view>
@@ -522,6 +516,7 @@ const checkBowData = () => {
  font-size: 8px;
  text-align: center;
  transform: translateY(-16px) skewY(-6deg);
+  min-width: 40%;
 }
 .header-mvp > view > view:last-child > view {
  margin-right: 4vw;
--- a/src/pages/ranking.vue
+++ b/src/pages/ranking.vue
@@ -13,6 +13,8 @@ const { getLvlName } = store;

 const defaultSeasonData = {
  "1v1": { totalGames: 0, winCount: 0, winRate: 0 },
+  "2v2": { totalGames: 0, winCount: 0, winRate: 0 },
+  "3v3": { totalGames: 0, winCount: 0, winRate: 0 },
  "5m": { totalGames: 0, winCount: 0, winRate: 0 },
  "10m": { totalGames: 0, winCount: 0, winRate: 0 },
 };
@@ -98,6 +100,8 @@ const updateData = () => {
      }
      let keyName = "";
      if (item.gameType === 1 && item.teamSize === 2) keyName = "1v1";
+      if (item.gameType === 1 && item.teamSize === 3) keyName = "2v2";
+      if (item.gameType === 1 && item.teamSize === 5) keyName = "3v3";
      if (item.gameType === 2 && item.teamSize === 5) keyName = "5m";
      if (item.gameType === 2 && item.teamSize === 10) keyName = "10m";
      if (keyName) {
@@ -234,13 +238,13 @@ onShow(async () => {
        <view class="data-progress">
          <text>
            {{
-              `【2 V 2】${currentSeasonData["1v1"].totalGames}场 胜率 ${currentSeasonData["1v1"].winRate}%`
+              `【2 V 2】${currentSeasonData["2v2"].totalGames}场 胜率 ${currentSeasonData["2v2"].winRate}%`
            }}
          </text>
          <view>
            <view
              :style="{
-                width: `${currentSeasonData['1v1'].winRate}%`,
+                width: `${currentSeasonData['2v2'].winRate}%`,
                backgroundColor: '#69B5FF',
              }"
            />
@@ -249,7 +253,7 @@ onShow(async () => {
        <view class="data-progress">
          <text>
            {{
-              `【3 V 3】${currentSeasonData["1v1"].totalGames}场 胜率 ${currentSeasonData["1v1"].winRate}%`
+              `【3 V 3】${currentSeasonData["3v3"].totalGames}场 胜率 ${currentSeasonData["3v3"].winRate}%`
            }}
          </text>
          <view>
--- a/src/pages/team-battle.vue
+++ b/src/pages/team-battle.vue
@@ -130,17 +130,10 @@ function recoverData(battleInfo) {
    // if (battleInfo.status !== 11) return;
    if (battleInfo.firePlayerIndex) {
      currentShooterId.value = battleInfo.firePlayerIndex;
-      // const teamPrefix =
-      //   redTeam.value[0].id === currentShooterId.value
-      //     ? "请红队射箭 - "
-      //     : "请蓝队射箭 - ";
-      // const roundSuffix = isFinalShoot.value
-      //   ? "决金箭"
-      //   : `第${roundsName[currentRound.value]}轮`;
-      tips.value =
-        redTeam.value[0].id === currentShooterId.value
-          ? "请红队射箭"
-          : "请蓝队射箭";
+      const redPlayer = redTeam.value.find(
+        (item) => item.id === currentShooterId.value
+      );
+      tips.value = redPlayer ? "请红队射箭" : "请蓝队射箭";
      uni.$emit("update-tips", tips.value);
    }
    if (battleInfo.fireTime > 0) {
@@ -171,17 +164,16 @@ async function onReceiveMessage(messages = []) {
    if (msg.constructor === MESSAGETYPES.ToSomeoneShoot) {
      if (currentShooterId.value !== msg.userId) {
        currentShooterId.value = msg.userId;
-        // const teamPrefix =
-        //   redTeam.value[0].id === currentShooterId.value
-        //     ? "请红队射箭 - "
-        //     : "请蓝队射箭 - ";
-        // const roundSuffix = isFinalShoot.value
-        //   ? "决金箭"
-        //   : `第${roundsName[currentRound.value]}轮`;
-        tips.value =
-          redTeam.value[0].id === currentShooterId.value
-            ? "请红队射箭"
-            : "请蓝队射箭";
+        const redPlayer = redTeam.value.find(
+          (item) => item.id === currentShooterId.value
+        );
+        tips.value = redPlayer ? "请红队射箭" : "请蓝队射箭";
+        uni.$emit("update-tips", tips.value);
+        // if (redPlayer) tips.value = "红队" + redPlayer.id;
+        // const bluePlayer = blueTeam.value.find(
+        //   (item) => item.id === currentShooterId.value
+        // );
+        // if (bluePlayer) tips.value = "蓝队" + bluePlayer.id;
        uni.$emit("update-tips", tips.value);
      }
    }
@@ -331,6 +323,7 @@ onHide(() => {
        :roundResults="roundResults"
        :redPoints="redPoints"
        :bluePoints="bluePoints"
+        :power="power"
      />
      <Timer v-if="!start" />
      <ScreenHint