UI完善

src/pages/team-match.vue

@@ -0,0 +1,167 @@
+<script setup>
+import { ref, onMounted, onUnmounted } from "vue";
+import { onLoad } from "@dcloudio/uni-app";
+import Container from "@/components/Container.vue";
+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 SButton from "@/components/SButton.vue";
+import { matchGameAPI, readyGameAPI } from "@/apis";
+import { MESSAGETYPES, roundsName } from "@/constants";
+const gameType = ref(0);
+const teamSize = ref(0);
+const matching = ref(false);
+const start = ref(false);
+const battleId = ref("");
+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([
+  // {
+  //   blueArrows: [{ ring: 2 }, { ring: 2 }],
+  //   redArrows: [{ ring: 2 }, { ring: 3 }],
+  // },
+]);
+
+onLoad((options) => {
+  gameType.value = options.gameType;
+  teamSize.value = options.teamSize;
+});
+async function startMatch() {
+  if (gameType.value && teamSize.value) {
+    await matchGameAPI(true, gameType.value, teamSize.value);
+    startMatch.value = true;
+  }
+}
+async function stopMatch() {
+  if (gameType.value && teamSize.value) {
+    await matchGameAPI(false, gameType.value, teamSize.value);
+    startMatch.value = false;
+  }
+}
+async function readyToGo() {
+  if (battleId.value) {
+    await readyGameAPI(battleId.value);
+    start.value = true;
+    timerSeq.value = 0;
+  }
+}
+
+async function onReceiveMessage(content) {
+  const messages = JSON.parse(content).data.updates || [];
+  messages.forEach((msg) => {
+    if (
+      !msg.id ||
+      (battleId.value && msg.id === battleId.value) ||
+      msg.constructor === MESSAGETYPES.WaitForAllReady
+    ) {
+      console.log("收到消息：", msg);
+    }
+    if (!start.value && msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
+      scores.value.push(msg.target);
+      power.value = msg.target.battery;
+    }
+    if (msg.constructor === MESSAGETYPES.WaitForAllReady) {
+      // 这里会掉多次;
+      timerSeq.value += 1;
+      battleId.value = msg.id;
+      redTeam.value = msg.groupUserStatus.redTeam;
+      blueTeam.value = msg.groupUserStatus.blueTeam;
+      totalRounds.value = msg.groupUserStatus.config.maxRounds;
+    }
+    if (msg.id !== battleId.value) return;
+    if (msg.constructor === MESSAGETYPES.AllReady) {
+      start.value = true;
+      timerSeq.value = 0;
+    }
+    if (msg.constructor === MESSAGETYPES.ToSomeoneShoot) {
+      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.constructor === MESSAGETYPES.MatchOver) {
+      uni.redirectTo({
+        url: "/pages/battle-result?battleId=" + msg.id,
+      });
+    }
+  });
+}
+onMounted(() => {
+  uni.$on("socket-inbox", onReceiveMessage);
+});
+onUnmounted(() => {
+  uni.$off("socket-inbox", onReceiveMessage);
+  if (startMatch.value) {
+    matchGameAPI(false, gameType.value, teamSize.value);
+  }
+});
+</script>
+
+<template>
+  <Container title="排位赛" :bgType="1">
+    <view class="container">
+      <ShootProgress v-if="start" :tips="tips" :seq="seq" />
+      <PlayersRow
+        v-if="start"
+        :currentShooterId="currentShooterId"
+        :blueTeam="blueTeam"
+        :redTeam="redTeam"
+      />
+      <BowTarget
+        :power="power"
+        :currentRound="currentRound"
+        :totalRound="totalRounds"
+        :scores="scores"
+        :tips="
+          !start && scores.length > 0
+            ? `本次射程${scores[scores.length - 1].dst / 100}米，${
+                scores[scores.length - 1].dst / 100 >= 5 ? '已' : '未'
+              }达到距离要求`
+            : ''
+        "
+      />
+      <BattleFooter
+        v-if="roundResults.length > 0"
+        :roundResults="roundResults"
+      />
+      <Timer :seq="timerSeq" :callBack="readyToGo" />
+    </view>
+    <SButton v-if="!battleId" :onClick="matching ? stopMatch : startMatch">{{
+      matching ? "取消匹配" : "开始匹配"
+    }}</SButton>
+    <SButton v-if="battleId && !start" :onClick="readyToGo">准备完毕</SButton>
+  </Container>
+</template>
+
+<style scoped>
+.container {
+  width: 100%;
+}
+</style>