显示已准备状态

src/components/PlayerSeats.vue

@@ -1,4 +1,6 @@
 <script setup>
+import Avatar from "@/components/Avatar.vue";
+
 const props = defineProps({
   total: {
     type: Number,
@@ -16,11 +18,16 @@ const seats = new Array(props.total).fill(1);
   <view class="players">
     <view v-for="(_, index) in seats" :key="index">
       <image src="../static/player-bg.png" mode="widthFix" />
-      <image
+      <view v-if="players[index] && players[index].name" class="avatar">
-        v-if="players[index] && players[index].name"
+        <Avatar
           :src="players[index].avatar || '../static/user-icon.png'"
-        mode="widthFix"
+          :size="40"
         />
+        <text
+          :style="{ opacity: players[index] && !!players[index].state ? 1 : 0 }"
+          >已准备</text
+        >
+      </view>
       <view v-else class="player-unknow">
         <image src="../static/question-mark.png" mode="widthFix" />
       </view>
@@ -28,7 +35,7 @@ const seats = new Array(props.total).fill(1);
         players[index].name
       }}</text>
       <text v-else :style="{ color: '#fff9' }">虚位以待</text>
-      <view v-if="index === 0" class="founder">创建者</view>
+      <view v-if="index === 0" class="founder">管理员</view>
       <image
         :src="`../static/player-${index + 1}.png`"
         mode="widthFix"
@@ -63,13 +70,25 @@ const seats = new Array(props.total).fill(1);
   position: absolute;
   z-index: -1;
 }
-.players > view > image:nth-child(2) {
+.avatar {
-  width: 40px;
+  display: flex;
-  height: 40px;
+  flex-direction: column;
-  min-height: 40px;
+  align-items: center;
-  margin: 0 10px;
+  padding: 0 24rpx;
-  border: 1px solid #fff;
+  margin-top: 16rpx;
-  border-radius: 50%;
+}
+.avatar > text {
+  background-color: #2c261fb3;
+  border-color: #a3793f66;
+  color: #fed847;
+  font-size: 16rpx;
+  border-radius: 20rpx;
+  width: 70rpx;
+  text-align: center;
+  margin-top: -16rpx;
+  position: relative;
+  height: 28rpx;
+  line-height: 28rpx;
 }
 .players > view > text:nth-child(3) {
   width: 20vw;
@@ -95,7 +114,7 @@ const seats = new Array(props.total).fill(1);
 .player-unknow {
   width: 40px;
   height: 40px;
-  margin: 0 10px;
+  margin: 0 24rpx;
   border: 1px solid #fff3;
   border-radius: 50%;
   display: flex;

src/pages/battle-room.vue

@@ -32,7 +32,6 @@ const redTeam = ref([]);
 
 const showModal = ref(false);
 const battleType = ref(0);
-const refreshRoomTimer = ref(null);
 const ready = ref(false);
 const allReady = ref(false);
 const timer = ref(null);
@@ -61,6 +60,7 @@ async function refreshRoomData() {
         name: m.userInfo.name,
         avatar: m.userInfo.avatar,
         rankLvl: m.userInfo.rankLvl,
+        ready: !!m.userInfo.state,
       };
       return true;
     }
@@ -74,6 +74,7 @@ async function refreshRoomData() {
           name: m.userInfo.name,
           avatar: m.userInfo.avatar,
           rankLvl: m.userInfo.rankLvl,
+          ready: !!m.userInfo.state,
         };
       }
     });
@@ -128,62 +129,13 @@ async function onReceiveMessage(message) {
     message.forEach((msg) => {
       if (msg.roomNumber !== roomNumber.value) return;
       if (msg.constructor === MESSAGETYPES.UserEnterRoom) {
-        if (battleType.value === 1) {
+        refreshRoomData();
-          if (msg.userId === room.value.creator) {
-            owner.value = {
-              id: msg.userId,
-              name: msg.name,
-              avatar: msg.avatar,
-              rankLvl: msg.rankLvl,
-            };
-          } else {
-            opponent.value = {
-              id: msg.userId,
-              name: msg.name,
-              avatar: msg.avatar,
-              rankLvl: msg.rankLvl,
-            };
-          }
-        }
-        if (battleType.value === 2) {
-          if (room.value.creator === msg.userId) {
-            players.value[0] = {
-              id: msg.userId,
-              name: msg.name,
-              avatar: msg.avatar,
-              rankLvl: msg.rankLvl,
-            };
-          } else {
-            players.value.push({
-              id: msg.userId,
-              name: msg.name,
-              avatar: msg.avatar,
-              rankLvl: msg.rankLvl,
-            });
-          }
-        }
       } else if (msg.constructor === MESSAGETYPES.UserExitRoom) {
-        if (battleType.value === 1) {
+        refreshRoomData();
-          if (msg.userId === room.value.creator) {
-            owner.value = {
-              id: "",
-            };
-          } else {
-            opponent.value = {
-              id: "",
-            };
-          }
-        }
-        if (battleType.value === 2) {
-          players.value = players.value.filter((p) => p.id !== msg.userId);
-        }
-        if (msg.room && msg.room.members) {
-          refreshMembers(msg.room.members);
-        }
       } else if (msg.constructor === MESSAGETYPES.TeamUpdate) {
-        if (msg.room && msg.room.members) {
+        refreshRoomData();
-          refreshMembers(msg.room.members);
+      } else if (msg.constructor === MESSAGETYPES.SomeoneIsReady) {
-        }
+        refreshRoomData();
       } else if (msg.constructor === MESSAGETYPES.RoomDestroy) {
         uni.showToast({
           title: "房间已解散",
@@ -192,31 +144,7 @@ async function onReceiveMessage(message) {
         setTimeout(() => {
           uni.navigateBack();
         }, 1000);
-      } else if (msg.constructor === MESSAGETYPES.SomeoneIsReady) {
-        refreshRoomData();
       }
-      // else if (msg.constructor === MESSAGETYPES.WaitForAllReady) {
-      //   if (msg.groupUserStatus) {
-      //     uni.setStorageSync("red-team", msg.groupUserStatus.redTeam);
-      //     uni.setStorageSync("blue-team", msg.groupUserStatus.blueTeam);
-      //     uni.setStorageSync("melee-players", [
-      //       ...msg.groupUserStatus.redTeam,
-      //       ...msg.groupUserStatus.blueTeam,
-      //     ]);
-      //     uni.removeStorageSync("current-battle");
-      //     // 避免离开页面，触发退出房间
-      //     roomNumber.value = "";
-      //     if (msg.groupUserStatus.config.mode == 1) {
-      //       uni.redirectTo({
-      //         url: `/pages/team-battle?battleId=${msg.id}&gameMode=1`,
-      //       });
-      //     } else if (msg.groupUserStatus.config.mode == 2) {
-      //       uni.redirectTo({
-      //         url: `/pages/melee-match?battleId=${msg.id}&gameMode=1`,
-      //       });
-      //     }
-      //   }
-      // }
     });
   } else if (message.type === MESSAGETYPESV2.AboutToStart) {
     uni.setStorageSync("blue-team", message.teams[1].players || []);
@@ -255,15 +183,6 @@ const exitRoom = async () => {
   uni.navigateBack();
 };
 
-const setClipboardData = () => {
-  uni.setClipboardData({
-    data: roomNumber.value,
-    success() {
-      uni.showToast({ title: "复制成功" });
-    },
-  });
-};
-
 onShareAppMessage(() => {
   return {
     title: "邀请您进入房间对战",
@@ -288,7 +207,6 @@ onMounted(() => {
 });
 
 onBeforeUnmount(() => {
-  if (refreshRoomTimer.value) clearInterval(refreshRoomTimer.value);
   uni.setKeepScreenOn({
     keepScreenOn: false,
   });
@@ -325,9 +243,9 @@ onBeforeUnmount(() => {
             class="player"
             :style="{ transform: 'translateY(-60px)' }"
           >
-            <Avatar :rankLvl="owner.rankLvl" :src="owner.avatar" :size="60" />
+            <Avatar :src="owner.avatar" :size="60" />
+            <text>管理员</text>
             <text>{{ owner.name }}</text>
-            <text>创建者</text>
           </view>
           <view
             v-else
@@ -342,12 +260,11 @@ onBeforeUnmount(() => {
             class="player"
             :style="{ transform: 'translateY(60px)' }"
           >
-            <Avatar
+            <Avatar :src="opponent.avatar" :size="60" />
-              :rankLvl="opponent.rankLvl"
+            <text :class="{ ready: opponent.ready }">{{
-              :src="opponent.avatar"
+              opponent.ready ? "已准备" : ""
-              :size="60"
+            }}</text>
-            />
+            <text>{{ opponent.name }}</text>
-            <text v-if="opponent.name">{{ opponent.name }}</text>
           </view>
           <view class="no-player" v-else>
             <image src="../static/question-mark.png" mode="widthFix" />
@@ -378,7 +295,7 @@ onBeforeUnmount(() => {
           <view>
             <view v-for="(item, index) in players" :key="index">
               <Avatar v-if="item.id" :src="item.avatar" :size="36" />
-              <text v-if="owner.id === item.id">创建者</text>
+              <text v-if="owner.id === item.id">管理员</text>
             </view>
           </view>
         </view>
@@ -397,7 +314,10 @@ onBeforeUnmount(() => {
                 <image src="../static/close-grey.png" mode="widthFix" />
               </button>
               <text class="truncate">{{ item.name || "我要加入" }}</text>
-              <Avatar v-if="item.id" :src="item.avatar" :size="36" />
+              <view v-if="item.id">
+                <Avatar :src="item.avatar" :size="36" />
+                <text v-if="!!item.state">已准备</text>
+              </view>
               <button v-else hover-class="none" @click="chooseTeam(1)">
                 <image src="../static/add-grey.png" mode="widthFix" />
               </button>
@@ -409,7 +329,10 @@ onBeforeUnmount(() => {
               :key="index"
               class="choose-side-right-item"
             >
-              <Avatar v-if="item.id" :src="item.avatar" :size="36" />
+              <view v-if="item.id">
+                <Avatar :src="item.avatar" :size="36" />
+                <text v-if="!!item.state">已准备</text>
+              </view>
               <button v-else hover-class="none" @click="chooseTeam(0)">
                 <image src="../static/add-grey.png" mode="widthFix" />
               </button>
@@ -534,6 +457,19 @@ onBeforeUnmount(() => {
   background-color: #ccc;
   margin-bottom: 5px;
 }
+.player > text:nth-child(2) {
+  color: #000;
+  background-color: #fed847;
+  font-size: 16rpx;
+  border-radius: 20rpx;
+  line-height: 26rpx;
+  padding: 0 10rpx;
+  margin-top: -16rpx;
+  position: relative;
+}
+.player > text:nth-child(3) {
+  margin-top: 6rpx;
+}
 .player > text {
   max-width: 100px;
   white-space: nowrap;
@@ -541,12 +477,10 @@ onBeforeUnmount(() => {
   text-overflow: ellipsis;
   text-align: center;
 }
-.player > text:nth-child(3) {
+.player .ready {
-  color: #000;
+  background-color: #2c261fb3 !important;
-  background-color: #fed847;
+  border-color: #a3793f66 !important;
-  font-size: 8px;
+  color: #fed847 !important;
-  border-radius: 10px;
-  padding: 2rpx 10rpx;
 }
 .team-mode > view > image:nth-child(2) {
   width: 120px;
@@ -664,6 +598,7 @@ onBeforeUnmount(() => {
   left: calc(50% - 15px);
   width: 30px;
   text-align: center;
+  color: #333;
 }
 .choose-side {
   display: flex;
@@ -727,4 +662,22 @@ onBeforeUnmount(() => {
 .choose-side-right-item > button:first-child > image {
   width: 18px;
 }
+.choose-side-left-item > view,
+.choose-side-right-item > view {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.choose-side-left-item > view > text,
+.choose-side-right-item > view > text {
+  font-size: 16rpx;
+  border-radius: 20rpx;
+  line-height: 26rpx;
+  padding: 0 10rpx;
+  margin-top: -16rpx;
+  position: relative;
+  background-color: #2c261fb3;
+  border-color: #a3793f66;
+  color: #fed847;
+}
 </style>