细节优化

src/pages/battle-room.vue

@@ -13,8 +13,9 @@ import BowPower from "@/components/BowPower.vue";
 import ShootProgress from "@/components/ShootProgress.vue";
 import PlayersRow from "@/components/PlayersRow.vue";
 import SModal from "@/components/SModal.vue";
+import ScreenHint from "@/components/ScreenHint.vue";
 import { getRoomAPI, destroyRoomAPI, exitRoomAPI, startRoomAPI } from "@/apis";
-import { MESSAGETYPES, roundsName } from "@/constants";
+import { MESSAGETYPES, roundsName, getMessageTypeName } from "@/constants";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
 const store = useStore();
@@ -40,6 +41,9 @@ const tips = ref("即将开始...");
 const roundResults = ref([]);
 const redPoints = ref(0);
 const bluePoints = ref(0);
+const currentRedPoint = ref(0);
+const currentBluePoint = ref(0);
+const showRoundTip = ref(false);
 const playersScores = ref({});
 const showModal = ref(false);
 onLoad(async (options) => {
@@ -98,7 +102,7 @@ async function onReceiveMessage(messages = []) {
       (battleId.value && msg.id === battleId.value) ||
       msg.constructor === MESSAGETYPES.WaitForAllReady
     ) {
-      console.log("收到消息：", msg);
+      console.log("收到消息：", getMessageTypeName(msg.constructor), msg);
     }
     if (!start.value && msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
       scores.value.push(msg.target);
@@ -184,7 +188,8 @@ async function onReceiveMessage(messages = []) {
           scores.value.push(msg.target);
           power.value = msg.target.battery;
         }
-        playersScores.value[msg.userId].push(msg.target);
+        if (playersScores.value[msg.userId])
+          playersScores.value[msg.userId].push(msg.target);
       }
       if (msg.constructor === MESSAGETYPES.RoundPoint) {
         bluePoints.value += msg.blueScore;
@@ -194,6 +199,9 @@ async function onReceiveMessage(messages = []) {
         const result = msg.preRoundResult;
         scores.value = [];
         currentShooterId.value = 0;
+        currentBluePoint.value = result.blueScore;
+        currentRedPoint.value = result.redScore;
+        showRoundTip.value = true;
         if (
           result.currentRound > 0 &&
           result.currentRound < totalRounds.value
@@ -221,7 +229,7 @@ const onLeaveRoom = () => {
 };
 
 const destroyRoom = async () => {
-  await destroyRoomAPI(roomNumber.value);
+  if (roomNumber.value) await destroyRoomAPI(roomNumber.value);
 };
 
 const exitRoom = async () => {
@@ -349,10 +357,27 @@ onUnmounted(() => {
       />
     </view>
     <Timer :seq="timerSeq" />
+    <ScreenHint :show="showRoundTip" :onClose="() => (showRoundTip = false)">
+      <view class="round-end-tip">
+        <text>第{{ currentRound - 1 }}轮射击结束</text>
+        <view>
+          <text>蓝队</text>
+          <text>{{ currentBluePoint }}</text>
+          <text>分，红队</text>
+          <text>{{ currentRedPoint }}</text>
+          <text>分</text>
+        </view>
+      </view>
+    </ScreenHint>
     <SModal :show="showModal" :onClose="() => (showModal = false)">
       <view class="btns">
-        <button @click="exitRoom">暂时离开</button>
-        <button @click="destroyRoom">解散房间</button>
+        <SButton :onClick="exitRoom" width="200px" :rounded="20">
+          暂时离开
+        </SButton>
+        <view :style="{ height: '20px' }"></view>
+        <SButton :onClick="destroyRoom" width="200px" :rounded="20">
+          解散房间
+        </SButton>
       </view>
     </SModal>
   </Container>
@@ -450,7 +475,7 @@ onUnmounted(() => {
   align-items: center;
   justify-content: center;
 }
-.btns > button {
+/* .btns > button {
   color: #000;
   background-color: #fed847;
   padding: 10px;
@@ -458,5 +483,5 @@ onUnmounted(() => {
   border-radius: 20px;
   font-size: 14px;
   margin: 10px;
-}
+} */
 </style>