细节完善

src/components/BattleFooter.vue

@@ -1,3 +1,4 @@
+=
 <script setup>
 import BowPower from "@/components/BowPower.vue";
 import { RoundImages } from "@/constants";
@@ -14,6 +15,10 @@ defineProps({
     type: Number,
     default: 0,
   },
+  power: {
+    type: Number,
+    default: 0,
+  },
 });
 </script>
 
@@ -21,8 +26,13 @@ defineProps({
   <view class="container">
     <view class="guide-row">
       <image src="../static/shooter.png" mode="widthFix" />
-      <view :style="{ marginBottom: '10px', transform: 'scale(0.8) translateX(10px)' }">
-        <BowPower :power="20" />
+      <view
+        :style="{
+          marginBottom: '10px',
+          transform: 'scale(0.8) translateX(10px)',
+        }"
+      >
+        <BowPower :power="power" />
       </view>
     </view>
     <view>
@@ -47,9 +57,12 @@ defineProps({
         </view>
         <block v-if="roundResults.length < 3">
           <view v-for="i in 3 - roundResults.length" :key="i">
-            <image :src="RoundImages[`round${i}`]" mode="widthFix" />
+            <image
+              :src="RoundImages[`round${i + roundResults.length}`]"
+              mode="widthFix"
+            />
             <view>
-              <text>{{ i }}</text>
+              <text></text>
               <text>环</text>
             </view>
           </view>
@@ -71,7 +84,10 @@ defineProps({
         </view>
         <block v-if="roundResults.length < 3">
           <view v-for="i in 3 - roundResults.length" :key="i">
-            <image :src="RoundImages[`round${i}`]" mode="widthFix" />
+            <image
+              :src="RoundImages[`round${i + roundResults.length}`]"
+              mode="widthFix"
+            />
             <view>
               <text></text>
               <text>环</text>

src/components/BowTarget.vue

@@ -295,7 +295,7 @@ onMounted(() => {
 }
 .simul {
   position: absolute;
-  bottom: 20px;
+  bottom: 40px;
   right: 20px;
   margin-left: 20px;
 }

src/components/HeaderProgress.vue

@@ -27,7 +27,6 @@ watch(
     if (newVal.includes("蓝队")) key = "请蓝方射击";
     if (key && sound.value) {
       if (currentRoundEnded.value) {
-        currentRound.value += 1;
         currentRoundEnded.value = false;
         if (currentRound.value === 1) audioManager.play("第一轮");
         if (currentRound.value === 2) audioManager.play("第二轮");
@@ -63,14 +62,17 @@ async function onReceiveMessage(messages = []) {
     } else if (msg.constructor === MESSAGETYPES.WaitForAllReady) {
       battleId.value = msg.id;
     } else if (msg.constructor === MESSAGETYPES.AllReady) {
+      currentRoundEnded.value = true;
       audioManager.play("比赛开始");
     } else if (msg.constructor === MESSAGETYPES.MeleeAllReady) {
       melee.value = true;
       halfTime.value = false;
       audioManager.play("比赛开始");
     } else if (msg.constructor === MESSAGETYPES.CurrentRoundEnded) {
-      currentRound.value += 1;
-      currentRoundEnded.value = true;
+      if (msg.preRoundResult && msg.preRoundResult.currentRound) {
+        currentRound.value = msg.preRoundResult.currentRound + 1;
+        currentRoundEnded.value = true;
+      }
     } else if (msg.constructor === MESSAGETYPES.HalfTimeOver) {
       halfTime.value = true;
       audioManager.play("中场休息");
@@ -113,7 +115,7 @@ onUnmounted(() => {
   <view class="container">
     <text>{{ tips }}</text>
     <!-- <text> ({{ currentRound }}/{{ totalRound }}) </text> -->
-    <button hover-class="none" @click="updateSound">
+    <button v-if="!!tips" hover-class="none" @click="updateSound">
       <image
         :src="`../static/sound${sound ? '' : '-off'}-yellow.png`"
         mode="widthFix"

src/components/ShootProgress2.vue

@@ -16,7 +16,7 @@ const props = defineProps({
   },
 });
 
-const barColor = ref("linear-gradient( 180deg, #FFA0A0 0%, #FF6060 100%)");
+const barColor = ref("");
 const remain = ref(15);
 const timer = ref(null);
 

src/components/TeamAvatars.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, watch } from "vue";
+import { ref, watch, onMounted } from "vue";
 const props = defineProps({
   isRed: {
     type: Boolean,
@@ -18,13 +18,33 @@ const props = defineProps({
     default: false,
   },
 });
-const players = ref(props.team);
+const players = ref({});
 const youTurn = ref(false);
+const firstName = ref("");
+
+onMounted(() => {
+  props.team.forEach((p, index) => {
+    players.value[p.id] = { sort: index, ...p };
+  });
+});
+
 watch(
   () => props.currentShooterId,
   (newVal) => {
-    const exit = props.team.some((p) => p.id === newVal);
-    youTurn.value = !!exit;
+    if (!newVal) return;
+    const index = props.team.findIndex((p) => p.id === newVal);
+    youTurn.value = index >= 0;
+    if (index >= 0) {
+      const newPlayers = [...props.team];
+      const target = newPlayers.splice(index, 1)[0];
+      if (target) {
+        newPlayers.unshift(target);
+        firstName.value = target.name;
+        newPlayers.forEach((p, index) => {
+          players.value[p.id] = { sort: index, ...p };
+        });
+      }
+    }
   },
   { immediate: true }
 );
@@ -37,17 +57,22 @@ watch(
       :key="index"
       class="player"
       :style="{
-        width: (youTurn ? 40 - index * 5 : 30) + 'px',
-        height: (youTurn ? 40 - index * 5 : 30) + 'px',
+        width:
+          (youTurn ? 40 - ((players[item.id] || {}).sort || 0) * 5 : 35) + 'px',
+        height:
+          (youTurn ? 40 - ((players[item.id] || {}).sort || 0) * 5 : 35) + 'px',
         borderColor: isRed ? '#ff6060' : '#5fadff',
-        zIndex: players.length - index,
-        top: youTurn ? index * 2 + 'px' : '6px',
-        left: (isRed ? index * 20 : 35 - index * 15) + 'px',
+        zIndex: team.length - ((players[item.id] || {}).sort || 0),
+        top: youTurn ? ((players[item.id] || {}).sort || 0) * 2 + 'px' : '6px',
+        left:
+          (isRed
+            ? ((players[item.id] || {}).sort || 0) * 20
+            : 35 - ((players[item.id] || {}).sort || 0) * 15) + 'px',
       }"
     >
       <image :src="item.avatar || '../static/user-icon.png'" mode="widthFix" />
       <text
-        v-if="youTurn && index === 0"
+        v-if="youTurn && ((players[item.id] || {}).sort || 0) === 0"
         :style="{ backgroundColor: isRed ? '#ff6060' : '#5fadff' }"
         >{{ isRed ? "红队" : "蓝队" }}</text
       >
@@ -59,7 +84,7 @@ watch(
         color: isRed ? '#ff6060' : '#5fadff',
         [isRed ? 'left' : 'right']: 0,
       }"
-      >{{ team[0].name }}</text
+      >{{ firstName }}</text
     >
   </view>
 </template>