1v1流程调试完成

src/components/BattleHeader.vue

@@ -1,9 +1,18 @@
 <script setup>
+import Avatar from "@/components/Avatar.vue";
 defineProps({
   isMelee: {
     type: Boolean,
     default: false,
   },
+  blueTeam: {
+    type: Array,
+    default: () => [],
+  },
+  redTeam: {
+    type: Array,
+    default: () => [],
+  },
 });
 </script>
 
@@ -18,18 +27,12 @@ defineProps({
     </view>
     <view v-if="!isMelee" class="players">
       <view>
-        <view class="avatar">
-          <image src="../static/avatar-frame.png" mode="widthFix" />
-          <image src="../static/avatar.png" mode="widthFix" />
-        </view>
-        <text>选手1</text>
+        <Avatar v-if="blueTeam[0]" :src="blueTeam[0].avatar" frame />
+        <text>{{ blueTeam[0].name }}</text>
       </view>
       <view>
-        <view class="avatar">
-          <image src="../static/avatar-frame.png" mode="widthFix" />
-          <image src="../static/avatar.png" mode="widthFix" />
-        </view>
-        <text>选手2</text>
+        <Avatar v-if="redTeam[0]" :src="redTeam[0].avatar" frame />
+        <text>{{ redTeam[0].name }}</text>
       </view>
     </view>
   </view>
@@ -59,6 +62,7 @@ defineProps({
   color: #fff9;
   font-size: 14px;
   padding-top: 20px;
+  overflow: hidden;
 }
 .players > view:first-child {
   background-color: #364469;
@@ -66,21 +70,4 @@ defineProps({
 .players > view:last-child {
   background-color: #692735;
 }
-.avatar {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 5px 0;
-}
-.avatar > image:first-child {
-  position: absolute;
-  width: 55px;
-  height: 55px;
-}
-.avatar > image {
-  width: 45px;
-  height: 45px;
-  border-radius: 50%;
-}
 </style>

src/components/PlayersRow.vue

@@ -12,15 +12,22 @@ defineProps({
     type: Array,
     default: () => [],
   },
+  currentShooterId: {
+    type: Number,
+    default: 0,
+  },
 });
 </script>
 
 <template>
   <view class="container">
     <image v-if="avatar" class="avatar" :src="avatar" mode="widthFix" />
-    <view v-if="!avatar" :style="{ height: 20 + blueTeam.length * 20 + 'px' }">
     <view
-        v-for="(item, index) in blueTeam"
+      v-if="blueTeam.length && redTeam.length"
+      :style="{ height: 20 + blueTeam.length * 20 + 'px' }"
+    >
+      <view
+        v-for="(player, index) in blueTeam"
         :key="index"
         :style="{
           top: index * 20 + 'px',
@@ -30,51 +37,52 @@ defineProps({
       >
         <image
           class="avatar"
-          :src="item.avatar"
+          :src="player.avatar"
           mode="widthFix"
           :style="{
-            borderColor: index === 0 ? '#5fadff' : '#fff',
+            borderColor: currentShooterId === player.id ? '#5fadff' : '#fff',
           }"
         />
         <text
           :style="{
-            color: index === 0 ? '#5fadff' : '#fff',
-            fontSize: index === 0 ? 16 : 12 + 'px',
+            color: currentShooterId === player.id ? '#5fadff' : '#fff',
+            fontSize: currentShooterId === player.id ? 16 : 12 + 'px',
           }"
         >
-          {{ item.name }}
+          {{ player.name }}
         </text>
       </view>
     </view>
     <view
       v-if="!avatar"
       :style="{
-        height: 20 + blueTeam.length * 20 + 'px',
+        height: 20 + redTeam.length * 20 + 'px',
       }"
     >
       <view
-        v-for="(item, index) in blueTeam"
+        v-for="(player, index) in redTeam"
         :key="index"
         :style="{
           top: index * 20 + 'px',
-          zIndex: blueTeam.length - index,
+          zIndex: redTeam.length - index,
           right: 0,
         }"
       >
         <text
           :style="{
-            color: index === 0 ? '#ff6060' : '#fff',
-            fontSize: index === 0 ? 16 : 12 + 'px',
+            color: currentShooterId === player.id ? '#ff6060' : '#fff',
+            fontSize: currentShooterId === player.id ? 16 : 12 + 'px',
+            textAlign: 'right',
           }"
         >
-          {{ item.name }}
+          {{ player.name }}
         </text>
         <image
           class="avatar"
-          :src="item.avatar"
+          :src="player.avatar"
           mode="widthFix"
           :style="{
-            borderColor: index === 0 ? '#ff6060' : '#fff',
+            borderColor: currentShooterId === player.id ? '#ff6060' : '#fff',
           }"
         />
       </view>
@@ -104,6 +112,8 @@ defineProps({
 }
 .container > view > view > text {
   margin: 0 10px;
+  overflow: hidden;
+  width: 100px;
 }
 .avatar {
   width: 40px;

src/components/ShootProgress.vue

@@ -13,23 +13,43 @@ const props = defineProps({
     type: Number,
     default: 90,
   },
+  seq: {
+    type: Number,
+    default: 0,
+  },
 });
 
 let barColor = "#fed847";
 if (props.tips.includes("红队")) barColor = "#FF6060";
 if (props.tips.includes("蓝队")) barColor = "#5FADFF";
 const remain = ref(props.total);
+const timer = ref(null);
+
+watch(
+  () => props.seq,
+  () => {
+    if (timer.value) clearInterval(timer.value);
+    remain.value = props.total;
+    timer.value = setInterval(() => {
+      if (remain.value > 0) {
+        remain.value--;
+      }
+    }, 1000);
+  }
+);
 
 watch(
   () => props.start,
   (newVal, oldVal) => {
     if (oldVal === false && newVal === true) {
       remain.value = props.total;
-      setInterval(() => {
+      timer.value = setInterval(() => {
         if (remain.value > 0) {
           remain.value--;
         }
       }, 1000);
+    } else {
+      if (timer.value) clearInterval(timer.value);
     }
   }
 );

src/components/Timer.vue

@@ -0,0 +1,86 @@
+<script setup>
+import { ref, watch } from "vue";
+const props = defineProps({
+  seq: {
+    type: Number,
+    default: 0,
+  },
+  countdown: {
+    type: Number,
+    default: 15,
+  },
+  callBack: {
+    type: Function,
+    default: () => {},
+  },
+});
+const show = ref(false);
+const count = ref(0);
+const timer = ref(null);
+watch(
+  () => props.seq,
+  () => {
+    if (props.seq > 0) {
+      if(show.value) return;
+      if (timer.value) clearInterval(timer.value);
+      count.value = props.countdown;
+      show.value = true;
+      timer.value = setInterval(() => {
+        if (count.value === 0) {
+          show.value = false;
+          clearInterval(timer.value);
+          props.callBack();
+        } else {
+          count.value -= 1;
+        }
+      }, 1000);
+    } else {
+      if (timer.value) clearInterval(timer.value);
+      show.value = false;
+    }
+  }
+);
+</script>
+
+<template>
+  <view
+    class="container"
+    :style="{ transform: `translateX(${show ? '0' : '100'}%)` }"
+  >
+    <view>距离正式比赛</view>
+    <view>
+      <text>开始还有</text>
+      <text>{{ count }}</text>
+      <text>秒</text>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.container {
+  transform: translateX(100%);
+  position: fixed;
+  bottom: 20%;
+  right: 0;
+  transition: all 0.3s ease;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  color: #fff9;
+  font-size: 14px;
+  padding: 10px;
+  background-color: #00000066;
+  border-top-left-radius: 10px;
+  border-bottom-left-radius: 10px;
+}
+.container > view {
+  display: flex;
+  align-items: center;
+}
+.container > view:last-child > text:nth-child(2) {
+  color: #fed847;
+  font-size: 16px;
+  width: 16px;
+  text-align: center;
+}
+</style>

src/pages/battle-room.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onUnmounted } from "vue";
+import { ref, onMounted, onUnmounted } from "vue";
 import { onLoad } from "@dcloudio/uni-app";
 import Container from "@/components/Container.vue";
 import PlayerSeats from "@/components/PlayerSeats.vue";
@@ -30,21 +30,13 @@ onLoad(async (options) => {
     room.value = result;
   }
 });
-onUnmounted(() => {
-  websocket.closeWebSocket();
-  if (user.value.id === room.value.creator) {
-    destroyRoomAPI(room.value.id);
-  } else {
-    exitRoomAPI(room.value.id);
-  }
-});
 const startGame = async () => {
   const result = await startRoomAPI(room.value.number);
   console.log(result);
   step.value = 2;
-  const token = uni.getStorageSync("token");
+};
 
-  websocket.createWebSocket(token, (content) => {
+async function onReceiveMessage(content) {
   const messages = JSON.parse(content).data.updates || [];
   messages.forEach((msg) => {
     if (msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
@@ -55,8 +47,20 @@ const startGame = async () => {
       }
     }
   });
+}
+
+onMounted(() => {
+  uni.$on("socket-inbox", onReceiveMessage);
+});
+
+onUnmounted(() => {
+  uni.$off("socket-inbox", onReceiveMessage);
+  if (user.value.id === room.value.creator) {
+    destroyRoomAPI(room.value.id);
+  } else {
+    exitRoomAPI(room.value.id);
+  }
 });
-};
 </script>
 
 <template>

src/pages/match-room.vue

@@ -1,108 +1,162 @@
 <script setup>
-import AppBackground from "@/components/AppBackground.vue";
-import Header from "@/components/Header.vue";
+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 PlayerScore from "@/components/PlayerScore.vue";
-const teams = [
-  { name: "选手1", avatar: "../static/avatar.png" },
-  { name: "选手1", avatar: "../static/avatar.png" },
-  { name: "选手1", avatar: "../static/avatar.png" },
-];
+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);
+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);
+
+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 (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) {
+      scores.value = [];
+      currentShooterId.value = 0;
+      if (
+        msg.preRoundResult.currentRound > 0 &&
+        msg.preRoundResult.currentRound < totalRounds.value
+      ) {
+        // 开始下一轮;
+        currentRound.value = msg.preRoundResult.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">
-    <AppBackground />
-    <Header title="排位赛" />
-    <view>
-      <ShootProgress tips="请红队射箭-第一轮" />
-      <PlayersRow :blueTeam="teams" :redTeam="teams" />
-      <BowTarget :power="45" currentRound="1" :totalRound="3" debug />
-      <PlayerScore
+      <ShootProgress v-if="start" :tips="tips" :seq="seq" />
+      <PlayersRow
+        v-if="start"
+        :currentShooterId="currentShooterId"
+        :blueTeam="blueTeam"
+        :redTeam="redTeam"
+      />
+      <BowTarget
+        v-if="start"
+        :power="power"
+        :currentRound="currentRound"
+        :totalRound="totalRounds"
+        :scores="scores"
+      />
+      <!-- <PlayerScore
         name="某某选手"
         avatar="../static/avatar.png"
         :scores="[1, 4, 7, 4, 2, 2, 4, 4, 5, 8]"
-      />
-      <PlayerScore
-        name="下个选手"
-        avatar="../static/avatar.png"
-        :scores="[1, 4, 7, 4, 2, 2, 4, 4, 5, 8]"
-      />
+      /> -->
+      <Timer :seq="timerSeq" :callBack="readyToGo" />
     </view>
+    <view class="footer">
+      <SButton v-if="!battleId" :onClick="matching ? stopMatch : startMatch">{{
+        matching ? "取消匹配" : "开始匹配"
+      }}</SButton>
+      <SButton v-if="battleId && !start" :onClick="readyToGo">准备完毕</SButton>
     </view>
+  </Container>
 </template>
 
 <style scoped>
 .container {
-  width: 100vw;
-  padding-bottom: 20px;
-}
-.players {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  column-gap: 15px;
-  row-gap: 10px;
-  margin-bottom: 20px;
-  font-size: 14px;
-}
-.players > view {
-  width: 45%;
-  display: flex;
-  align-items: center;
-  position: relative;
-  color: #fff;
-  height: 90px;
-  overflow: hidden;
-}
-.players > view > image:first-child {
   width: 100%;
-  position: absolute;
-  z-index: -1;
 }
-.players > view > image:nth-child(2) {
-  width: 40px;
-  margin: 0 10px;
-  border: 1px solid #fff;
-  border-radius: 50%;
-}
-.founder {
-  position: absolute;
-  background-color: #fed847;
-  top: 0;
-  color: #000;
-  font-size: 12px;
-  padding: 2px 5px;
-  border-top-left-radius: 10px;
-  border-bottom-right-radius: 10px;
-}
-.player-bg {
-  position: absolute;
-  width: 52px;
-  right: 0;
-}
-.tips {
-  color: #fff9;
-  width: 100%;
-  text-align: center;
-  display: block;
-  margin-top: 10px;
-  font-size: 14px;
-}
-.player-unknow {
-  width: 40px;
-  height: 40px;
-  margin: 0 10px;
-  border: 1px solid #fff3;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: #69686866;
-}
-.player-unknow > image {
-  width: 40%;
+.footer {
+  margin: 25px 0;
 }
 </style>