房间1v1流程完善

src/pages/battle-room.vue

@@ -4,6 +4,7 @@ import { onLoad } from "@dcloudio/uni-app";
 import Container from "@/components/Container.vue";
 import PlayerSeats from "@/components/PlayerSeats.vue";
 import Guide from "@/components/Guide.vue";
+import Timer from "@/components/Timer.vue";
 import SButton from "@/components/SButton.vue";
 import BowTarget from "@/components/BowTarget.vue";
 import BattleHeader from "@/components/BattleHeader.vue";
@@ -12,46 +13,168 @@ import BowPower from "@/components/BowPower.vue";
 import ShootProgress from "@/components/ShootProgress.vue";
 import PlayersRow from "@/components/PlayersRow.vue";
 import { getRoomAPI, destroyRoomAPI, exitRoomAPI, startRoomAPI } from "@/apis";
-import { MESSAGETYPES } from "@/constants";
-import websocket from "@/websocket";
+import { MESSAGETYPES, roundsName } from "@/constants";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
 const store = useStore();
 const { user } = storeToRefs(store);
 const step = ref(1);
+const seq = ref(0);
+const timerSeq = ref(0);
+const battleId = ref("");
 const room = ref({});
 const roomNumber = ref("");
+const owner = ref({});
 const opponent = ref({});
-const players = new Array(7).fill(1);
+const redTeam = ref([]);
+const blueTeam = ref([]);
+const currentShooterId = ref(0);
+const players = ref([]);
+const currentRound = ref(1);
+const totalRounds = ref(0);
 const start = ref(false);
-const teams = [{ name: "选手1", avatar: "../static/avatar.png" }];
 const power = ref(0);
 const scores = ref([]);
-const tips = ref("");
+const tips = ref("即将开始...");
+const roundResults = ref([]);
+const redPoints = ref(0);
+const bluePoints = ref(0);
+const playersScores = ref({});
 onLoad(async (options) => {
-  if (!options.roomNumber) {
+  if (options.roomNumber) {
     roomNumber.value = options.roomNumber;
-    const result = await getRoomAPI(options.roomNumber || "15655424");
-    console.log(11111, result);
+    const result = await getRoomAPI(options.roomNumber);
     room.value = result;
+    result.members.some((m) => {
+      if (m.userInfo.id === result.creator) {
+        owner.value = {
+          id: m.userInfo.id,
+          name: m.userInfo.name,
+          avatar: m.userInfo.avatar,
+        };
+        return true;
+      }
+      return false;
+    });
+    if (result.battleType === 1 && result.count === 2) {
+      if (user.value.id !== owner.value.id) {
+        opponent.value = {
+          id: user.value.id,
+          name: user.value.nickName,
+          avatar: user.value.avatarUrl,
+        };
+      } else if (result.members.length > 1) {
+        result.members.some((m) => {
+          if (m.userInfo.id !== owner.value.id) {
+            opponent.value = {
+              id: m.userInfo.id,
+              name: m.userInfo.name,
+              avatar: m.userInfo.avatar,
+            };
+            return true;
+          }
+          return false;
+        });
+      }
+    }
   }
 });
 const startGame = async () => {
   const result = await startRoomAPI(room.value.number);
-  start.value = true;
-  console.log(2222, result);
+  timerSeq.value += 1;
   step.value = 2;
 };
 
 async function onReceiveMessage(content) {
   const messages = JSON.parse(content).data.updates || [];
   messages.forEach((msg) => {
-    console.log("收到消息：", msg);
-    if (msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
+    if (
+      msg.roomNumber === roomNumber.value ||
+      (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);
-      if (scores.value.length === total) {
-        showScore.value = true;
-        websocket.closeWebSocket();
+      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;
+    }
+    if (msg.roomNumber === roomNumber.value) {
+      if (msg.constructor === MESSAGETYPES.UserEnterRoom) {
+        if (room.value.battleType === 1 && room.value.count === 2) {
+          opponent.value = {
+            id: msg.userId,
+            name: msg.name,
+            avatar: msg.avatar,
+          };
+        }
+      }
+      if (!start && msg.constructor === MESSAGETYPES.UserExitRoom) {
+        if (room.value.battleType === 1 && room.value.count === 2) {
+          opponent.value = {
+            id: "",
+          };
+        }
+      }
+      if (msg.constructor === MESSAGETYPES.RoomDestroy) {
+        uni.showToast({
+          title: "房间已解散",
+          icon: "none",
+        });
+        setTimeout(() => {
+          uni.navigateBack();
+        }, 1000);
+      }
+    }
+    if (msg.id === battleId.value) {
+      if (msg.constructor === MESSAGETYPES.AllReady) {
+        start.value = true;
+        timerSeq.value = 0;
+        scores.value = [];
+        totalRounds.value = msg.groupUserStatus.config.maxRounds;
+        step.value = 3;
+      }
+      if (msg.constructor === MESSAGETYPES.ToSomeoneShoot) {
+        scores.value = [];
+        seq.value += 1;
+        currentShooterId.value = msg.userId;
+        if (owner.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.RoundPoint) {
+        bluePoints.value += msg.blueScore;
+        redPoints.value += msg.redScore;
+      }
+      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}&winner=${msg.endStatus.winner}`,
+        });
       }
     }
   });
@@ -63,7 +186,7 @@ onMounted(() => {
 
 onUnmounted(() => {
   uni.$off("socket-inbox", onReceiveMessage);
-  if (user.value.id === room.value.creator) {
+  if (owner.value) {
     destroyRoomAPI(room.value.id);
   } else {
     exitRoomAPI(room.value.id);
@@ -83,43 +206,66 @@ onUnmounted(() => {
       <view v-if="room.battleType === 1 && room.count === 2" class="team-mode">
         <image src="../static/1v1-bg.png" mode="widthFix" />
         <view>
-          <image :src="user.avatarUrl" mode="widthFix" />
-          <image src="../static/versus.png" mode="widthFix" />
-          <view>
-            <image src="../static/question-mark.png" mode="widthFix" />
+          <view class="player" :style="{ transform: 'translateY(-60px)' }">
+            <image :src="owner.avatar" mode="widthFix" />
+            <text>{{ owner.name }}</text>
           </view>
+          <image src="../static/versus.png" mode="widthFix" />
+          <block v-if="opponent.id">
+            <view class="player" :style="{ transform: 'translateY(60px)' }">
+              <image :src="opponent.avatar" mode="widthFix" />
+              <text v-if="opponent.name">{{ opponent.name }}</text>
+            </view>
+          </block>
+          <block v-else>
+            <view class="no-player">
+              <image src="../static/question-mark.png" mode="widthFix" />
+            </view>
+          </block>
         </view>
       </view>
       <PlayerSeats
         v-if="room.battleType === 2 && room.count === 10"
         :players="players"
       />
-      <view v-if="!start">
+      <view>
         <SButton
-          v-if="room.battleType === 1 && room.count === 2"
+          v-if="
+            user.id === owner.id && room.battleType === 1 && room.count === 2
+          "
+          :disabled="!opponent"
           :onClick="startGame"
           >进入对战</SButton
         >
         <SButton
-          v-if="room.battleType === 2 && room.count === 10"
+          v-if="
+            user.id === owner.id && room.battleType === 2 && room.count === 10
+          "
+          :disabled="players.length === 1"
           :onClick="startGame"
           >进入大乱斗</SButton
         >
+        <SButton v-if="user.id !== owner.id" disabled>等待房主开启对战</SButton>
         <text class="tips">创建者点击下一步，所有人即可进入游戏。</text>
       </view>
     </view>
-    <view v-if="step === 2">
-      <BattleHeader />
+    <view v-if="step === 2" :style="{ width: '100%' }">
+      <BattleHeader
+        :blueTeam="blueTeam"
+        :redTeam="redTeam"
+        :players="players"
+      />
       <Guide noBg>
         <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" />
+          <BowPower :power="power" />
         </view>
       </Guide>
       <BowTarget
+        :scores="scores"
         :tips="
           !start && scores.length > 0
             ? `本次射程${scores[scores.length - 1].dst / 100}米，${
@@ -128,14 +274,41 @@ onUnmounted(() => {
             : ''
         "
       />
-      <SButton :onClick="() => (step = 3)">开始</SButton>
     </view>
     <view v-if="step === 3">
-      <ShootProgress tips="请红队射箭-第一轮" />
-      <PlayersRow :blueTeam="teams" :redTeam="teams" />
-      <BowTarget :power="45" :currentRound="1" :totalRound="3" />
-      <BattleFooter :blueTeam="[6, 2, 3]" :redTeam="[4, 5, 2]" />
+      <ShootProgress :tips="tips" :seq="seq" :start="start" />
+      <PlayersRow
+        v-if="room.battleType === 1 && room.count === 2"
+        :blueTeam="blueTeam"
+        :redTeam="redTeam"
+        :currentShooterId="currentShooterId"
+      />
+      <BattleHeader
+        v-if="room.battleType === 2 && room.count === 10"
+        :players="players"
+      />
+      <BowTarget
+        :power="power"
+        :currentRound="currentRound"
+        :totalRound="totalRounds"
+        :scores="scores"
+      />
+      <BattleFooter
+        v-if="room.battleType === 1 && room.count === 2"
+        :roundResults="roundResults"
+        :redPoints="redPoints"
+        :bluePoints="bluePoints"
+      />
+      <PlayerScore
+        v-if="room.battleType === 2 && room.count === 10"
+        v-for="(player, index) in players"
+        :key="index"
+        :name="player.name"
+        :avatar="player.avatar"
+        :scores="playersScores[player.id]"
+      />
     </view>
+    <Timer :seq="timerSeq" />
   </Container>
 </template>
 
@@ -198,15 +371,27 @@ onUnmounted(() => {
   align-items: center;
   height: 95%;
 }
-.team-mode > view > image:first-child {
+.player {
   width: 70px;
-  transform: translateY(-45px);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  transform: translateY(-60px);
+  color: #fff9;
+  font-size: 14px;
+}
+.player > image {
+  width: 70px;
+  height: 70px;
   border-radius: 50%;
+  background-color: #ccc;
+  margin-bottom: 5px;
 }
 .team-mode > view > image:nth-child(2) {
   width: 120px;
 }
-.team-mode > view > view:nth-child(3) {
+.no-player {
   width: 70px;
   height: 70px;
   border-radius: 50%;
@@ -214,11 +399,10 @@ onUnmounted(() => {
   display: flex;
   justify-content: center;
   align-items: center;
-  transform: translateY(45px);
+  transform: translateY(60px);
 }
-.team-mode > view > view:nth-child(3) > image {
-  width: 25px;
-  height: 25px;
+.no-player > image {
+  width: 20px;
   margin-right: 2px;
 }
 </style>