房间大乱斗调试

src/components/PlayerSeats.vue

@@ -1,22 +1,30 @@
 <script setup>
-defineProps({
+const props = defineProps({
+  total: {
+    type: Number,
+    default: 10,
+  },
   players: {
     type: Array,
     default: () => [],
   },
 });
-const seats = new Array(10).fill(1);
+const seats = new Array(props.total).fill(1);
 </script>
 
 <template>
   <view class="players">
     <view v-for="(_, index) in seats" :key="index">
       <image src="../static/player-bg.png" mode="widthFix" />
-      <image v-if="players[index]" src="../static/avatar.png" mode="widthFix" />
+      <image
+        v-if="players[index]"
+        :src="players[index].avatar"
+        mode="widthFix"
+      />
       <view v-else class="player-unknow">
         <image src="../static/question-mark.png" mode="widthFix" />
       </view>
-      <text v-if="players[index]">选手{{ index + 1 }}</text>
+      <text v-if="players[index]">{{ players[index].name }}</text>
       <text v-else :style="{ color: '#fff9' }">虚位以待</text>
       <view v-if="index === 0" class="founder">创建者</view>
       <image
@@ -32,19 +40,20 @@ const seats = new Array(10).fill(1);
 .players {
   display: flex;
   flex-wrap: wrap;
-  justify-content: center;
-  column-gap: 15px;
-  row-gap: 10px;
+  justify-content: flex-start;
+  -moz-column-gap: 20px;
+  column-gap: 14px;
   margin-bottom: 20px;
   font-size: 14px;
+  padding: 0 14px;
 }
 .players > view {
-  width: 45%;
+  width: calc(50% - 7px);
   display: flex;
   align-items: center;
   position: relative;
   color: #fff;
-  height: 90px;
+  height: 100px;
   overflow: hidden;
 }
 .players > view > image:first-child {
@@ -54,16 +63,23 @@ const seats = new Array(10).fill(1);
 }
 .players > view > image:nth-child(2) {
   width: 40px;
+  height: 40px;
   margin: 0 10px;
   border: 1px solid #fff;
   border-radius: 50%;
 }
+.players > view > text:nth-child(3) {
+  width: 20vw;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 .founder {
   position: absolute;
   background-color: #fed847;
   top: 0;
   color: #000;
-  font-size: 12px;
+  font-size: 10px;
   padding: 2px 5px;
   border-top-left-radius: 10px;
   border-bottom-right-radius: 10px;

src/components/ScorePanel.vue

@@ -39,6 +39,7 @@ watch(
       :style="{
         width: 100 / (rowCount + 2) + 'vw',
         height: 100 / (rowCount + 2) + 'vw',
+        lineHeight: 100 / (rowCount + 2) + 'vw',
         fontSize: fontSize + 'px',
         margin: margin + 'px',
       }"

src/pages/battle-room.vue

@@ -56,7 +56,7 @@ onLoad(async (options) => {
       }
       return false;
     });
-    if (result.battleType === 1 && result.count === 2) {
+    if (result.battleType === 1) {
       if (user.value.id !== owner.value.id) {
         opponent.value = {
           id: user.value.id,
@@ -76,6 +76,10 @@ onLoad(async (options) => {
           return false;
         });
       }
+    } else if (result.battleType === 2) {
+      result.members.forEach((m) => {
+        players.value.push(m.userInfo);
+      });
     }
   }
 });
@@ -103,26 +107,38 @@ async function onReceiveMessage(content) {
       // 这里会掉多次;
       timerSeq.value += 1;
       battleId.value = msg.id;
-      redTeam.value = msg.groupUserStatus.redTeam;
-      blueTeam.value = msg.groupUserStatus.blueTeam;
+      if (room.value.battleType === 1) {
+        redTeam.value = msg.groupUserStatus.redTeam;
+        blueTeam.value = msg.groupUserStatus.blueTeam;
+      }
       step.value = 2;
     }
     if (msg.roomNumber === roomNumber.value) {
       if (msg.constructor === MESSAGETYPES.UserEnterRoom) {
-        if (room.value.battleType === 1 && room.value.count === 2) {
+        if (room.value.battleType === 1) {
           opponent.value = {
             id: msg.userId,
             name: msg.name,
             avatar: msg.avatar,
           };
         }
+        if (room.value.battleType === 2) {
+          players.value.push({
+            id: msg.userId,
+            name: msg.name,
+            avatar: msg.avatar,
+          });
+        }
       }
       if (!start.value && msg.constructor === MESSAGETYPES.UserExitRoom) {
-        if (room.value.battleType === 1 && room.value.count === 2) {
+        if (room.value.battleType === 1) {
           opponent.value = {
             id: "",
           };
         }
+        if (room.value.battleType === 2) {
+          players.value = players.value.filter((p) => p.id !== msg.userId);
+        }
       }
       if (msg.constructor === MESSAGETYPES.RoomDestroy) {
         uni.showToast({
@@ -142,19 +158,32 @@ async function onReceiveMessage(content) {
         scores.value = [];
         totalRounds.value = msg.groupUserStatus.config.maxRounds;
         step.value = 3;
+        if (room.value.battleType === 2) {
+          tips.value = "请在90秒内射完12支箭";
+          seq.value += 1;
+        }
       }
       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 (room.value.battleType === 1) {
+          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 (room.value.battleType === 1) {
+          scores.value = [msg.target];
+        }
+        if (room.value.battleType === 2) {
+          scores.value.push(msg.target);
+          power.value = msg.target.battery;
+        }
+        playersScores.value[msg.userId].push(msg.target);
       }
       if (msg.constructor === MESSAGETYPES.RoundPoint) {
         bluePoints.value += msg.blueScore;
@@ -205,7 +234,7 @@ onUnmounted(() => {
           <text>天赋异禀的弓箭手们，比赛即将开始！</text>
         </view>
       </Guide>
-      <view v-if="room.battleType === 1 && room.count === 2" class="team-mode">
+      <view v-if="room.battleType === 1" class="team-mode">
         <image src="../static/1v1-bg.png" mode="widthFix" />
         <view>
           <view class="player" :style="{ transform: 'translateY(-60px)' }">
@@ -227,23 +256,20 @@ onUnmounted(() => {
         </view>
       </view>
       <PlayerSeats
-        v-if="room.battleType === 2 && room.count === 10"
+        v-if="room.battleType === 2"
+        :total="room.count || 10"
         :players="players"
       />
       <view>
         <SButton
-          v-if="
-            user.id === owner.id && room.battleType === 1 && room.count === 2
-          "
+          v-if="user.id === owner.id && room.battleType === 1"
           :disabled="!opponent.id"
           :onClick="startGame"
           >进入对战</SButton
         >
         <SButton
-          v-if="
-            user.id === owner.id && room.battleType === 2 && room.count === 10
-          "
-          :disabled="players.length === 1"
+          v-if="user.id === owner.id && room.battleType === 2"
+          :disabled="players.length < 2"
           :onClick="startGame"
           >进入大乱斗</SButton
         >
@@ -280,15 +306,11 @@ onUnmounted(() => {
     <view v-if="step === 3">
       <ShootProgress :tips="tips" :seq="seq" :start="start" />
       <PlayersRow
-        v-if="room.battleType === 1 && room.count === 2"
+        v-if="room.battleType === 1"
         :blueTeam="blueTeam"
         :redTeam="redTeam"
         :currentShooterId="currentShooterId"
       />
-      <BattleHeader
-        v-if="room.battleType === 2 && room.count === 10"
-        :players="players"
-      />
       <BowTarget
         :power="power"
         :currentRound="currentRound"
@@ -296,13 +318,13 @@ onUnmounted(() => {
         :scores="scores"
       />
       <BattleFooter
-        v-if="room.battleType === 1 && room.count === 2"
+        v-if="room.battleType === 1"
         :roundResults="roundResults"
         :redPoints="redPoints"
         :bluePoints="bluePoints"
       />
       <PlayerScore
-        v-if="room.battleType === 2 && room.count === 10"
+        v-if="room.battleType === 2"
         v-for="(player, index) in players"
         :key="index"
         :name="player.name"
@@ -341,7 +363,7 @@ onUnmounted(() => {
   text-align: center;
   display: block;
   margin-top: 10px;
-  font-size: 14px;
+  font-size: 12px;
 }
 .player-unknow {
   width: 40px;

src/pages/index.vue

@@ -81,9 +81,9 @@ onMounted(async () => {
             mode="widthFix"
             @click="() => toPage('/pages/my-device')"
           />
-          <text>{{
-            user.id && !device.deviceId ? "请绑定设备" : "我的弓箭"
-          }}</text>
+          <text v-if="!user.id">我的弓箭</text>
+          <text v-if="user.id && !device.deviceId">请绑定设备</text>
+          <text v-if="user.id && device.deviceId">{{ device.deviceName }}</text>
           <image
             src="../static/a2@2x.png"
             mode="widthFix"
@@ -207,6 +207,7 @@ onMounted(async () => {
   top: 67%;
   left: 50%;
   transform: translate(-50%, -50%);
+  white-space: nowrap;
   font-size: 13px;
   color: #b3b3b3;
 }