房间1v1流程完善

2025-06-13 14:05:30 +08:00
parent dce1806f97
commit 2c7eb5a737
9 changed files with 290 additions and 70 deletions
--- a/src/apis.js
+++ b/src/apis.js
@@ -100,7 +100,7 @@ export const exitRoomAPI = (number) => {
 };

 export const startRoomAPI = (number) => {
-  return request("GET", `/user/room/start?number=${number}`);
+  return request("POST", "/user/room/start", { number });
 };

 export const getPractiseResultListAPI = (page = 1, page_size = 10) => {
--- a/src/components/BattleHeader.vue
+++ b/src/components/BattleHeader.vue
@@ -23,7 +23,7 @@ const bgColors = ["#364469", "#692735", "#934B4B", "#A98B69", "#8268A2 "];
      :src="`../static/battle-header${blueTeam.length ? '' : '-melee'}.png`"
      mode="widthFix"
    />
-    <view v-if="!blueTeam.length" class="players-melee">
+    <view v-if="players.length" class="players-melee">
      <view
        v-for="(player, index) in players"
        :key="index"
@@ -33,28 +33,24 @@ const bgColors = ["#364469", "#692735", "#934B4B", "#A98B69", "#8268A2 "];
        <text class="player-name">{{ player.name }}</text>
      </view>
    </view>
-    <view v-if="blueTeam.length" class="players">
+    <view v-if="blueTeam.length && redTeam.length" class="players">
      <view>
-        <block v-if="blueTeam[0]">
-          <Avatar :src="blueTeam[0].avatar" frame />
-          <text class="player-name">{{ blueTeam[0].name }}</text>
-          <image
-            v-if="blueTeam[0].winner"
-            src="../static/winner-badge.png"
-            mode="widthFix"
-          />
-        </block>
+        <Avatar :src="blueTeam[0].avatar" frame />
+        <text class="player-name">{{ blueTeam[0].name }}</text>
+        <image
+          v-if="blueTeam[0].winner"
+          src="../static/winner-badge.png"
+          mode="widthFix"
+        />
      </view>
      <view>
-        <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>
+        <Avatar v-if="redTeam[0]" :src="redTeam[0].avatar" frame />
+        <text class="player-name">{{ redTeam[0].name }}</text>
+        <image
+          v-if="redTeam[0].winner"
+          src="../static/winner-badge.png"
+          mode="widthFix"
+        />
      </view>
    </view>
  </view>
--- a/src/components/CreateRoom.vue
+++ b/src/components/CreateRoom.vue
@@ -27,6 +27,7 @@ const createRoom = async () => {
  loading.value = false;
 };
 const enterRoom = () => {
+  step.value = 1;
  props.onConfirm();
  uni.navigateTo({
    url: `/pages/battle-room?roomNumber=${roomNumber.value}`,
--- a/src/constants.js
+++ b/src/constants.js
@@ -10,6 +10,9 @@ export const MESSAGETYPES = {
  SomeGuyIsReady: parseInt("0xAEE8C236"), // 2934489654
  MatchOver: parseInt("0xB7815EEF"), // 3078708975
  RoundPoint: 4061248646,
+  UserEnterRoom: 2133805521,
+  UserExitRoom: 3896523333,
+  RoomDestroy: 389652333311,
 };

 export const roundsName = {
--- a/src/pages/battle-room.vue
+++ b/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>
--- a/src/pages/first-try.vue
+++ b/src/pages/first-try.vue
@@ -10,7 +10,6 @@ import ScorePanel from "@/components/ScorePanel.vue";
 import Container from "@/components/Container.vue";
 import { createPractiseAPI } from "@/apis";
 import { MESSAGETYPES } from "@/constants";
-import websocket from "@/websocket";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
 const store = useStore();
@@ -87,7 +86,6 @@ const nextStep = async () => {

 const onClose = () => {
  showScore.value = false;
-  websocket.closeWebSocket();
  setTimeout(() => {
    step.value = 5;
  }, 500);
--- a/src/pages/friend-battle.vue
+++ b/src/pages/friend-battle.vue
@@ -21,7 +21,7 @@ const enterRoom = async () => {
    if (room.number) {
      roomNumber.value = "";
      uni.navigateTo({
-        url: `/pages/battle-room?roomNumber=${roomNumber.value}`,
+        url: `/pages/battle-room?roomNumber=${room.number}`,
      });
    } else {
      warnning.value = "查无此房";
@@ -152,7 +152,8 @@ const createRoom = () => {
  transform: translate(280%, -75px);
 }
 .create-room > view > view:nth-child(3) > image {
-  width: 40%;
+  width: 20px;
+  margin-right: 2px;
 }
 .create-room > view:last-child {
  transform: translateY(-110%);
--- a/src/pages/my-growth.vue
+++ b/src/pages/my-growth.vue
@@ -9,20 +9,20 @@ import { ref } from "vue";
 const selectedIndex = ref(0);
 const matchPage = ref(1);
 const matchList = ref([]);
-const practiseList = ref([]);
 const battlePage = ref(1);
 const battleList = ref([]);
+const practiseList = ref([]);

 const handleSelect = async (index) => {
  if (index === 0 && matchList.value.length === 0) {
    const result = await getBattleListAPI(matchPage.value, 2);
-    matchList.value = result.list;
+    matchList.value = result;
    matchPage.value += 1;
  }
  if (index === 1 && battleList.value.length === 0) {
-    // const result = await getBattleListAPI(battlePage.value, 1);
-    // battleList.value = result.list;
-    // battlePage.value += 1;
+    const result = await getBattleListAPI(battlePage.value, 1);
+    battleList.value = result;
+    battlePage.value += 1;
  }
  if (index === 2 && practiseList.value.length === 0) {
    const result = await getPractiseResultListAPI();
@@ -107,7 +107,44 @@ onMounted(async () => {
          :style="{
            display: selectedIndex === 1 ? 'flex' : 'none',
          }"
-        ></view>
+        >
+          <view
+            v-for="(item, index) in battleList"
+            :key="index"
+            @click="() => toMatchDetail(item.battleId)"
+          >
+            <view class="contest-header">
+              <text>{{ item.name }}</text>
+              <text>{{ item.createdAt }}</text>
+              <image src="../static/back.png" mode="widthFix" />
+            </view>
+            <view v-if="item.mode === 1" class="contest-team">
+              <view
+                class="player"
+                v-for="(p, index2) in item.players"
+                :key="index2"
+              >
+                <Avatar frame :src="p.avatar" />
+                <text>{{ p.name }}</text>
+                <image
+                  v-if="index2 === 0"
+                  src="../static/winner-badge.png"
+                  mode="widthFix"
+                />
+              </view>
+            </view>
+            <view v-if="item.mode === 2" class="contest-multi">
+              <view
+                class="player"
+                v-for="(p, index2) in item.players"
+                :key="index2"
+              >
+                <Avatar :rank="index2 + 1" :src="p.avatar" />
+                <text>{{ p.name }}</text>
+              </view>
+            </view>
+          </view>
+        </view>
        <view
          :style="{
            display: selectedIndex === 2 ? 'flex' : 'none',
--- a/src/pages/team-match.vue
+++ b/src/pages/team-match.vue
@@ -85,13 +85,13 @@ async function onReceiveMessage(content) {
      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;
      scores.value = [];
+      totalRounds.value = msg.groupUserStatus.config.maxRounds;
    }
    if (msg.constructor === MESSAGETYPES.ToSomeoneShoot) {
      scores.value = [];