完成创建房间相关接口

src/pages/battle-room.vue

@@ -1,5 +1,7 @@
 <script setup>
-import { ref } from "vue";
+import { ref, onUnmounted } from "vue";
+import { onLoad } from "@dcloudio/uni-app";
+import Container from "@/components/Container.vue";
 import AppBackground from "@/components/AppBackground.vue";
 import Header from "@/components/Header.vue";
 import Guide from "@/components/Guide.vue";
@@ -10,24 +12,75 @@ import BattleFooter from "@/components/BattleFooter.vue";
 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 useStore from "@/store";
+import { storeToRefs } from "pinia";
+const store = useStore();
+const { user } = storeToRefs(store);
 const step = ref(1);
+const room = ref({});
+const roomNumber = ref("");
 const seats = new Array(10).fill(1);
 const players = new Array(7).fill(1);
 const teams = [{ name: "选手1", avatar: "../static/avatar.png" }];
+onLoad(async (options) => {
+  if (options.roomNumber) {
+    roomNumber.value = options.roomNumber;
+    const result = await getRoomAPI(options.roomNumber);
+    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) => {
+    const messages = JSON.parse(content).data.updates || [];
+    messages.forEach((msg) => {
+      if (msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
+        scores.value.push(msg.target);
+        if (scores.value.length === total) {
+          showScore.value = true;
+          websocket.closeWebSocket();
+        }
+      }
+    });
+  });
+};
 </script>
 
 <template>
-  <view class="container">
-    <AppBackground />
-    <Header title="对战" />
-    <view v-if="step === 1">
+  <Container title="对战">
+    <view class="standby-phase" v-if="step === 1">
       <Guide>
         <view :style="{ display: 'flex', flexDirection: 'column' }">
           <text :style="{ color: '#fed847' }">人都到齐了吗？</text>
           <text>天赋异禀的弓箭手们，比赛即将开始！</text>
         </view>
       </Guide>
-      <view class="players">
+      <view v-if="room.battleType === 1 && room.count === 2" class="one-on-one">
+        <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>
+        </view>
+      </view>
+      <view v-if="room.battleType === 2 && room.count === 10" class="players">
         <view v-for="(_, index) in seats" :key="index">
           <image src="../static/player-bg.png" mode="widthFix" />
           <image
@@ -48,8 +101,19 @@ const teams = [{ name: "选手1", avatar: "../static/avatar.png" }];
           />
         </view>
       </view>
-      <SButton :onClick="() => (step = 2)">进入大乱斗</SButton>
-      <text class="tips">创建者点击下一步，所有人即可进入游戏。</text>
+      <view>
+        <SButton
+          v-if="room.battleType === 1 && room.count === 2"
+          :onClick="startGame"
+          >进入对战</SButton
+        >
+        <SButton
+          v-if="room.battleType === 2 && room.count === 10"
+          :onClick="startGame"
+          >进入大乱斗</SButton
+        >
+        <text class="tips">创建者点击下一步，所有人即可进入游戏。</text>
+      </view>
     </view>
     <view v-if="step === 2">
       <BattleHeader />
@@ -71,12 +135,14 @@ const teams = [{ name: "选手1", avatar: "../static/avatar.png" }];
       <BowTarget :power="45" currentRound="1" totalRound="3" debug />
       <BattleFooter :blueTeam="[6, 2, 3]" :redTeam="[4, 5, 2]" />
     </view>
-  </view>
+  </Container>
 </template>
 
 <style scoped>
-.container {
-  width: 100vw;
+.standby-phase {
+  width: 100%;
+  height: calc(100% - 40px);
+  overflow-x: hidden;
 }
 .players {
   display: flex;
@@ -144,4 +210,43 @@ const teams = [{ name: "选手1", avatar: "../static/avatar.png" }];
 .player-unknow > image {
   width: 40%;
 }
+.one-on-one {
+  width: calc(100vw - 30px);
+  height: 120vw;
+  margin: 15px;
+}
+.one-on-one > image:first-child {
+  position: absolute;
+  width: calc(100vw - 30px);
+  z-index: -1;
+}
+.one-on-one > view {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 95%;
+}
+.one-on-one > view > image:first-child {
+  width: 70px;
+  transform: translateY(-45px);
+  border-radius: 50%;
+}
+.one-on-one > view > image:nth-child(2) {
+  width: 120px;
+}
+.one-on-one > view > view:nth-child(3) {
+  width: 70px;
+  height: 70px;
+  border-radius: 50%;
+  background-color: #ccc;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transform: translateY(45px);
+}
+.one-on-one > view > view:nth-child(3) > image {
+  width: 25px;
+  height: 25px;
+  margin-right: 2px;
+}
 </style>

src/pages/friend-battle.vue

@@ -6,18 +6,28 @@ import Guide from "@/components/Guide.vue";
 import SButton from "@/components/SButton.vue";
 import SModal from "@/components/SModal.vue";
 import CreateRoom from "@/components/CreateRoom.vue";
+import { getRoomAPI } from "@/apis";
 
 const showModal = ref(false);
 const warnning = ref("");
 const roomNumber = ref("");
 
-const enterRoom = () => {
+const enterRoom = async () => {
   if (!roomNumber.value) {
     warnning.value = "请输入房间号";
+    showModal.value = true;
   } else {
-    warnning.value = "查无此房";
+    const room = await getRoomAPI(roomNumber.value);
+    if (room.number) {
+      roomNumber.value = "";
+      uni.navigateTo({
+        url: `/pages/battle-room?roomNumber=${roomNumber.value}`,
+      });
+    } else {
+      warnning.value = "查无此房";
+      showModal.value = true;
+    }
   }
-  showModal.value = true;
 };
 const createRoom = () => {
   warnning.value = "";
@@ -61,7 +71,7 @@ const createRoom = () => {
       <view v-if="warnning" class="warnning">
         {{ warnning }}
       </view>
-      <CreateRoom v-if="!warnning" />
+      <CreateRoom v-if="!warnning" :onConfirm="() => (showModal = false)" />
     </SModal>
   </view>
 </template>

src/pages/index.vue

@@ -11,15 +11,26 @@ const store = useStore();
 // 使用storeToRefs，用于UI里显示，保持响应性
 const { user } = storeToRefs(store);
 
+const isLogin = () => {
+  if (!user.value.id) {
+    uni.showToast({
+      title: "还未登录",
+      icon: "none",
+    });
+  }
+  return !!user.value.id;
+};
 const toLoginPage = () => {
   uni.navigateTo({
     url: "/pages/login",
   });
 };
 const toFristTryPage = () => {
-  uni.navigateTo({
-    url: "/pages/first-try",
-  });
+  if (isLogin()) {
+    uni.navigateTo({
+      url: "/pages/first-try",
+    });
+  }
 };
 const toRankingPage = () => {
   uni.navigateTo({
@@ -27,27 +38,35 @@ const toRankingPage = () => {
   });
 };
 const toFriendBattlePage = () => {
-  uni.navigateTo({
-    url: "/pages/friend-battle",
-  });
+  if (isLogin()) {
+    uni.navigateTo({
+      url: "/pages/friend-battle",
+    });
+  }
 };
 
 const toPractisePage = () => {
-  uni.navigateTo({
-    url: "/pages/practise",
-  });
+  if (isLogin()) {
+    uni.navigateTo({
+      url: "/pages/practise",
+    });
+  }
 };
 
 const toQquipmentPage = () => {
-  uni.navigateTo({
-    url: "/pages/equipment-debug",
-  });
+  if (isLogin()) {
+    uni.navigateTo({
+      url: "/pages/equipment-debug",
+    });
+  }
 };
 
 const toAddDevicePage = () => {
-  uni.navigateTo({
-    url: "/pages/add-device",
-  });
+  if (isLogin()) {
+    uni.navigateTo({
+      url: "/pages/add-device",
+    });
+  }
 };
 
 // 获取全局配置