1v1排位数据交互完善

2025-06-08 20:59:41 +08:00
parent 312906fec3
commit 80e0b07c0e
10 changed files with 232 additions and 84 deletions
--- a/src/apis.js
+++ b/src/apis.js
@@ -120,10 +120,37 @@ export const readyGameAPI = (battleId) => {
  });
 };

-export const getGameAPI = (battleId) => {
-  return request("POST", "/user/battle/detail", {
+export const getGameAPI = async (battleId) => {
+  const result = await request("POST", "/user/battle/detail", {
    id: battleId,
  });
+  const { battleStats = {}, playerStats = {} } = result;
+  const data = {
+    winner: battleStats.winner,
+    redTotal: battleStats.redTotal,
+    blueTotal: battleStats.blueTotal,
+    roundsData: {},
+    redPlayers: {},
+    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,
+      };
+    });
+  });
+  console.log("game result:", result);
+  console.log("format data:", data);
+  return data;
 };

 export const simulShootAPI = (device_id, x, y) => {
--- a/src/components/BattleFooter.vue
+++ b/src/components/BattleFooter.vue
@@ -4,12 +4,24 @@ defineProps({
    type: Array,
    default: () => [],
  },
+  bluePoints: {
+    type: Number,
+    default: 0,
+  },
+  redPoints: {
+    type: Number,
+    default: 0,
+  },
 });
 </script>

 <template>
  <view class="container">
-    <image src="../static/battle-header.png" mode="widthFix" />
+    <view>
+      <image src="../static/battle-header-melee.png" mode="widthFix" />
+      <text>蓝队({{ bluePoints }})</text>
+      <text>红队({{ redPoints }})</text>
+    </view>
    <view class="players">
      <view>
        <view v-for="(result, index) in roundResults" :key="index">
@@ -28,9 +40,11 @@ defineProps({
        <view v-for="(result, index) in roundResults" :key="index">
          <text>Round {{ index + 1 }}</text>
          <view>
-            <text>{{ result.redArrows
+            <text>{{
+              result.redArrows
                .map((item) => item.ring)
-                .reduce((last, next) => last + next, 0) }}</text>
+                .reduce((last, next) => last + next, 0)
+            }}</text>
            <text>环</text>
          </view>
        </view>
@@ -42,13 +56,29 @@ defineProps({
 <style scoped>
 .container {
  width: 100%;
-  position: relative;
  margin-top: 20px;
 }
-.container > image:first-child {
+.container > view:first-child {
+  position: relative;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  font-size: 13px;
+}
+.container > view:first-child > image:first-child {
  position: absolute;
  width: 100%;
-  top: -10px;
+  top: -6px;
+}
+.container > view:first-child > text {
+  z-index: 1;
+  margin-top: 2px;
+}
+.container > view:first-child > text:nth-child(2) {
+  color: #364469;
+}
+.container > view:first-child > text:nth-child(3) {
+  color: #692735;
 }
 .players {
  display: flex;
@@ -60,7 +90,7 @@ defineProps({
  align-items: center;
  justify-content: center;
  color: #fff;
-  padding-top: 20px;
+  padding-top: 5px;
 }
 .players > view:first-child {
  background-color: #364469;
--- a/src/components/BattleHeader.vue
+++ b/src/components/BattleHeader.vue
@@ -27,22 +27,26 @@ defineProps({
    </view>
    <view v-if="!isMelee" class="players">
      <view>
-        <Avatar v-if="blueTeam[0]" :src="blueTeam[0].avatar" frame />
-        <text>{{ blueTeam[0].name }}</text>
-        <image
-          v-if="blueTeam[0].winner"
-          src="../static/winner-badge.png"
-          mode="widthFix"
-        />
+        <block v-if="blueTeam[0]">
+          <Avatar :src="blueTeam[0].avatar" frame />
+          <text>{{ blueTeam[0].name }}</text>
+          <image
+            v-if="blueTeam[0].winner"
+            src="../static/winner-badge.png"
+            mode="widthFix"
+          />
+        </block>
      </view>
      <view>
-        <Avatar v-if="redTeam[0]" :src="redTeam[0].avatar" frame />
-        <text>{{ redTeam[0].name }}</text>
-        <image
-          v-if="redTeam[0].winner"
-          src="../static/winner-badge.png"
-          mode="widthFix"
-        />
+        <block v-if="redTeam[0]">
+          <Avatar v-if="redTeam[0]" :src="redTeam[0].avatar" frame />
+          <text>{{ redTeam[0].name }}</text>
+          <image
+            v-if="redTeam[0].winner"
+            src="../static/winner-badge.png"
+            mode="widthFix"
+          />
+        </block>
      </view>
    </view>
  </view>
--- a/src/components/BowTarget.vue
+++ b/src/components/BowTarget.vue
@@ -30,6 +30,10 @@ const props = defineProps({
    type: Array,
    default: () => [],
  },
+  showE: {
+    type: Boolean,
+    default: true,
+  },
 });

 const showRoundTips = ref(false);
@@ -71,10 +75,14 @@ function calcRealY(num) {
      <BowPower v-if="power > 0" :power="power" />
    </view>
    <view class="target">
-      <view v-if="scores.length && showRoundTips" class="e-value fade-in"
+      <view
+        v-if="scores.length && showRoundTips && showE"
+        class="e-value fade-in"
        >经验 +1</view
      >
-      <view v-if="scores.length && showRoundTips" class="round-tip fade-in"
+      <view
+        v-if="scores.length && showRoundTips && scores[scores.length - 1].ring"
+        class="round-tip fade-in"
        >{{ scores[scores.length - 1].ring }}<text>环</text></view
      >
      <image
@@ -152,7 +160,6 @@ function calcRealY(num) {
  display: flex;
  align-items: center;
  justify-content: space-between;
-  margin-bottom: 20px;
 }
 .header > image:first-child {
  width: 40px;
--- a/src/components/PlayersRow.vue
+++ b/src/components/PlayersRow.vue
@@ -113,7 +113,7 @@ defineProps({
 .container > view > view > text {
  margin: 0 10px;
  overflow: hidden;
-  width: 100px;
+  width: 120px;
  transition: all 0.3s linear;
 }
 .avatar {
--- a/src/components/TeamResult.vue
+++ b/src/components/TeamResult.vue
@@ -1,7 +1,8 @@
 <script setup>
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import BowTarget from "@/components/BowTarget.vue";
 import Avatar from "@/components/Avatar.vue";
+import { roundsName } from "@/constants";
 const props = defineProps({
  show: {
    type: Boolean,
@@ -11,9 +12,50 @@ const props = defineProps({
    type: Function,
    default: () => {},
  },
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
 });
 const selected = ref(0);
-const tabs = ["所有轮次", "决金箭", "第三轮", "第二轮", "第一轮"];
+const scores = ref([]);
+const tabs = ref(["所有轮次"]);
+const players = ref([]);
+const onClickTab = (index) => {
+  selected.value = index;
+  scores.value = [];
+  if (index === 0) {
+    Object.values(props.data.roundsData).forEach((round) => {
+      Object.values(round).forEach((arrows) => {
+        scores.value = [...scores.value, ...Object.values(arrows)];
+      });
+    });
+  } else {
+    Object.values(props.data.roundsData[index]).forEach((arrows) => {
+      scores.value = [...scores.value, ...Object.values(arrows)];
+    });
+  }
+};
+watch(
+  () => props.data,
+  (value) => {
+    if (value.winner === 0) {
+      players.value = [
+        ...Object.values(value.redPlayers),
+        ...Object.values(value.bluePlayers),
+      ];
+    } else if (value.winner === 1) {
+      players.value = [
+        ...Object.values(value.bluePlayers),
+        ...Object.values(value.redPlayers),
+      ];
+    }
+    Object.keys(value.roundsData).forEach((key) => {
+      tabs.value.push(`第${roundsName[key]}轮`);
+    });
+    onClickTab(0);
+  }
+);
 </script>

 <template>
@@ -28,35 +70,28 @@ const tabs = ["所有轮次", "决金箭", "第三轮", "第二轮", "第一轮"
      <view
        v-for="(tab, index) in tabs"
        :key="index"
-        @click="() => (selected = index)"
+        @click="() => onClickTab(index)"
        :class="selected === index ? 'selected-tab' : ''"
      >
        {{ tab }}
      </view>
    </view>
    <view :style="{ width: '95%' }">
-      <BowTarget />
+      <BowTarget :scores="scores" :showE="false" />
    </view>
-    <view class="score-row">
-      <Avatar src="../static/avatar.png" :borderColor="1" />
+    <view class="score-row" v-for="(player, index) in players" :key="index">
+      <Avatar
+        :src="player.avatar"
+        :borderColor="data.bluePlayers[player.playerId] ? 1 : 2"
+      />
      <view
-        v-for="(score, index) in [7, 9, 7, 3, 8]"
+        v-if="selected > 0"
+        v-for="(score, index) in data.roundsData[selected][player.playerId]"
        :key="index"
        class="score-item"
        :style="{ width: '13vw', height: '13vw' }"
      >
-        {{ score }}
-      </view>
-    </view>
-    <view class="score-row">
-      <Avatar src="../static/avatar.png" :borderColor="2" />
-      <view
-        v-for="(score, index) in [7, 9, 7, 3, 8]"
-        :key="index"
-        class="score-item"
-        :style="{ width: '13vw', height: '13vw' }"
-      >
-        {{ score }}
+        {{ score.ringScore }}
      </view>
    </view>
  </view>
@@ -88,7 +123,7 @@ const tabs = ["所有轮次", "决金箭", "第三轮", "第二轮", "第一轮"
 .container > view:first-child > view:last-child {
  position: absolute;
  right: 5px;
-  top:32px;
+  top: 32px;
 }
 .container > view:first-child > view:last-child > image {
  width: 40px;
@@ -97,9 +132,15 @@ const tabs = ["所有轮次", "决金箭", "第三轮", "第二轮", "第一轮"
  display: flex;
  align-items: center;
  justify-content: flex-start;
-  width: 100%;
+  width: calc(100% - 20px);
  color: #fff9;
-  padding-left: 15px;
+  padding: 0 10px;
+  overflow-x: auto;
+}
+.container > view:nth-child(2)::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+  color: transparent;
 }
 .container > view:nth-child(2) > view {
  border: 1px solid #fff9;
@@ -107,6 +148,7 @@ const tabs = ["所有轮次", "决金箭", "第三轮", "第二轮", "第一轮"
  padding: 7px 10px;
  margin: 0 5px;
  font-size: 14px;
+  flex: 0 0 auto;
 }
 .selected-tab {
  background-color: #fed847;
--- a/src/constants.js
+++ b/src/constants.js
@@ -8,6 +8,7 @@ export const MESSAGETYPES = {
  ToSomeoneShoot: parseInt("0x077ACD1A"), // 125488410
  SomeGuyIsReady: parseInt("0xAEE8C236"), // 2934489654
  MatchOver: parseInt("0xB7815EEF"), // 3078708975
+  RoundPoint: 4061248646,
 };

 export const roundsName = {
--- a/src/pages/battle-result.vue
+++ b/src/pages/battle-result.vue
@@ -4,15 +4,32 @@ import { onLoad } from "@dcloudio/uni-app";
 import { getGameAPI } from "@/apis";
 import TeamResult from "@/components/TeamResult.vue";
 import MeleeResult from "@/components/MeleeResult.vue";
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+const store = useStore();
+const { user } = storeToRefs(store);

 const battleId = ref("");
-const show = ref(true);
+const ifWin = ref(false);
+const data = ref({});
+const totalPoints = ref(0);
+const show = ref(false);

-// onLoad(async (options) => {
-//   battleId.value = options.battleId;
-//   const result = await getGameAPI(options.battleId);
-//   console.log(1111, result);
-// });
+onLoad(async (options) => {
+  battleId.value = options.battleId;
+  const result = await getGameAPI(
+    options.battleId || "BATTLE-1749386862250435325-854"
+  );
+  data.value = result;
+  if (result.redPlayers[user.value.id]) {
+    totalPoints.value = result.redTotal;
+    ifWin.value = result.winner === 0;
+  }
+  if (result.bluePlayers[user.value.id]) {
+    totalPoints.value = result.redTotal;
+    ifWin.value = result.winner === 1;
+  }
+});
 function exit() {
  uni.navigateBack();
 }
@@ -21,27 +38,32 @@ onMounted(async () => {});

 <template>
  <view class="container">
-    <image class="tag" src="../static/winner-yellow.png" mode="widthFix" />
+    <image
+      :style="{ opacity: ifWin ? '1' : '0' }"
+      class="tag"
+      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>蓝队获胜</text>
+      <text>{{ ifWin && data.winner === 1 ? "蓝队" : "红队" }}获胜</text>
      <text>强势登顶，荣耀加冕</text>
    </view>
    <view>
      <image src="../static/row-yellow-bg.png" mode="widthFix" />
-      <text>经验 +20</text>
+      <text>经验 +{{ totalPoints }}</text>
    </view>
    <text>你是朋友中的佼佼者哦</text>
    <view>
      <view @click="() => (show = true)">查看靶纸</view>
      <view @click="exit">退出</view>
    </view>
-    <!-- <TeamResult :show="show" :onClose="() => (show = false)" /> -->
-    <MeleeResult :show="show" :onClose="() => (show = false)" />
+    <TeamResult :show="show" :onClose="() => (show = false)" :data="data" />
+    <!-- <MeleeResult :show="show" :onClose="() => (show = false)" /> -->
  </view>
 </template>

--- a/src/pages/ranking.vue
+++ b/src/pages/ranking.vue
@@ -1,6 +1,11 @@
 <script setup>
 import Container from "@/components/Container.vue";
+import Avatar from "@/components/Avatar.vue";
 import { ref } from "vue";
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+const store = useStore();
+const { user } = storeToRefs(store);

 const selectedIndex = ref(0);

@@ -27,11 +32,8 @@ const toMeleeMatchPage = (gameType, teamSize) => {
      <view class="ranking-my-data">
        <view>
          <view class="user-info">
-            <view class="avatar" @click="toUserPage">
-              <image src="../static/avatar-frame.png" mode="widthFix" />
-              <image src="../static/avatar.png" mode="widthFix" />
-            </view>
-            <text>打酱油·路过</text>
+            <Avatar :src="user.avatarUrl" frame :size="30" />
+            <text>{{ user.nickName }}</text>
          </view>
          <view class="ranking-season">
            <text>第14赛季</text>
@@ -166,22 +168,8 @@ const toMeleeMatchPage = (gameType, teamSize) => {
  color: #fff;
  font-size: 14px;
 }
-.avatar {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: 15px;
-}
-.avatar > image:first-child {
-  position: absolute;
-  width: 40px;
-  height: 40px;
-}
-.avatar > image {
-  width: 30px;
-  height: 30px;
-  border-radius: 50%;
+.user-info > text {
+  margin-left: 15px;
 }
 .ranking-season {
  display: flex;
--- a/src/pages/team-match.vue
+++ b/src/pages/team-match.vue
@@ -2,6 +2,8 @@
 import { ref, onMounted, onUnmounted } from "vue";
 import { onLoad } from "@dcloudio/uni-app";
 import Container from "@/components/Container.vue";
+import BattleHeader from "@/components/BattleHeader.vue";
+import Guide from "@/components/Guide.vue";
 import BowTarget from "@/components/BowTarget.vue";
 import ShootProgress from "@/components/ShootProgress.vue";
 import PlayersRow from "@/components/PlayersRow.vue";
@@ -10,6 +12,10 @@ import BattleFooter from "@/components/BattleFooter.vue";
 import SButton from "@/components/SButton.vue";
 import { matchGameAPI, readyGameAPI } from "@/apis";
 import { MESSAGETYPES, roundsName } 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);
@@ -31,6 +37,8 @@ const roundResults = ref([
  //   redArrows: [{ ring: 2 }, { ring: 3 }],
  // },
 ]);
+const redPoints = ref(0);
+const bluePoints = ref(0);

 onLoad((options) => {
  gameType.value = options.gameType;
@@ -38,6 +46,7 @@ onLoad((options) => {
 });
 async function startMatch() {
  if (gameType.value && teamSize.value) {
+    scores.value = [];
    await matchGameAPI(true, gameType.value, teamSize.value);
    startMatch.value = true;
  }
@@ -82,6 +91,7 @@ async function onReceiveMessage(content) {
    if (msg.constructor === MESSAGETYPES.AllReady) {
      start.value = true;
      timerSeq.value = 0;
+      scores.value = [];
    }
    if (msg.constructor === MESSAGETYPES.ToSomeoneShoot) {
      scores.value = [];
@@ -96,6 +106,10 @@ async function onReceiveMessage(content) {
    if (msg.constructor === MESSAGETYPES.ShootResult) {
      scores.value = [msg.target];
    }
+    if (msg.constructor === MESSAGETYPES.RoundPoint) {
+      bluePoints.value += msg.blueScore;
+      redPoints.value += msg.redScore;
+    }
    if (msg.constructor === MESSAGETYPES.CurrentRoundEnded) {
      const result = msg.preRoundResult;
      scores.value = [];
@@ -108,7 +122,7 @@ async function onReceiveMessage(content) {
    }
    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}`,
      });
    }
  });
@@ -127,6 +141,16 @@ onUnmounted(() => {
 <template>
  <Container title="排位赛" :bgType="1">
    <view class="container">
+      <BattleHeader v-if="!start" :redTeam="redTeam" :blueTeam="blueTeam" />
+      <Guide noBg v-if="!start">
+        <view :style="{ display: 'flex', justifyContent: 'space-between' }">
+          <view :style="{ display: 'flex', flexDirection: 'column' }">
+            <text :style="{ color: '#fed847' }">请预先射几箭测试</text>
+            <text>请确保射击距离只有5米</text>
+          </view>
+          <BowPower :power="45" />
+        </view>
+      </Guide>
      <ShootProgress v-if="start" :tips="tips" :seq="seq" />
      <PlayersRow
        v-if="start"
@@ -135,7 +159,8 @@ onUnmounted(() => {
        :redTeam="redTeam"
      />
      <BowTarget
-        :power="power"
+        :showE="start && user.id === currentShooterId"
+        :power="start ? power : 0"
        :currentRound="currentRound"
        :totalRound="totalRounds"
        :scores="scores"
@@ -148,8 +173,10 @@ onUnmounted(() => {
        "
      />
      <BattleFooter
-        v-if="roundResults.length > 0"
+        v-if="start"
        :roundResults="roundResults"
+        :redPoints="redPoints"
+        :bluePoints="bluePoints"
      />
      <Timer :seq="timerSeq" :callBack="readyToGo" />
    </view>