返回游戏流程完善

src/App.vue

@@ -90,7 +90,7 @@ button::after {
 }
 
 .fade-in-out {
-  animation: fadeInOut 1s ease forwards;
+  animation: fadeInOut 1.2s ease forwards;
 }
 
 @keyframes fadeOut {

src/components/BowTarget.vue

@@ -303,5 +303,7 @@ const simulShoot2 = async () => {
   height: 60px;
   left: calc(50% - 100px);
   top: calc(50% - 30px);
+  z-index: 99;
+  font-weight: bold;
 }
 </style>

src/components/ScreenHint.vue

@@ -67,7 +67,7 @@ const getContentHeight = () => {
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  z-index: 10;
+  z-index: 999;
 }
 .container > view:first-child {
   display: flex;

src/components/ShootProgress.vue

@@ -89,7 +89,7 @@ watch(
 );
 
 watch(
-  () => [props.seq, props.total],
+  () => [props.seq],
   () => {
     if (timer.value) clearInterval(timer.value);
     remain.value = props.total;

src/components/Timer.vue

@@ -1,48 +1,35 @@
 <script setup>
-import { ref, watch } from "vue";
+import { ref, watch, onMounted, onUnmounted } from "vue";
 const props = defineProps({
-  seq: {
-    type: Number,
-    default: 0,
-  },
   countdown: {
     type: Number,
     default: 15,
   },
-  callBack: {
-    type: Function,
-    default: () => {},
-  },
 });
 const show = ref(false);
-const count = ref(0);
+const count = ref(props.countdown);
 const timer = ref(null);
-watch(
+const updateTimer = (value) => {
-  () => props.seq,
+  count.value = Math.round(value);
-  () => {
+};
-    if (props.seq > 0) {
+onMounted(() => {
-      if (show.value) return;
+  setTimeout(() => {
-      if (timer.value) clearInterval(timer.value);
-      count.value = props.countdown;
     show.value = true;
     timer.value = setInterval(() => {
       if (count.value === 0) {
         show.value = false;
         clearInterval(timer.value);
-          props.callBack();
       } else {
         count.value -= 1;
       }
     }, 1000);
-    } else {
+  }, 300);
+  uni.$on("update-timer", updateTimer);
+});
+onUnmounted(() => {
   if (timer.value) clearInterval(timer.value);
-      show.value = false;
+  uni.$off("update-timer", updateTimer);
-    }
+});
-  },
-  {
-    immediate: true,
-  }
-);
 </script>
 
 <template>

src/pages/battle-room.vue

@@ -25,7 +25,6 @@ const store = useStore();
 const { user } = storeToRefs(store);
 const step = ref(1);
 const seq = ref(0);
-const timerSeq = ref(0);
 const battleId = ref("");
 const room = ref({});
 const roomNumber = ref("");
@@ -80,14 +79,26 @@ onLoad(async (options) => {
       battleId.value = battleInfo.id;
       battleType.value = battleInfo.config.mode;
       step.value = 2;
+      if (battleInfo.status === 0) {
+        const readyRemain = Date.now() / 1000 - battleInfo.startTime;
+        console.log(`当前局已进行${readyRemain}秒`);
+        if (readyRemain > 0) {
+          setTimeout(() => {
+            uni.$emit("update-timer", 15 - readyRemain);
+          }, 200);
+        }
+        return;
+      } else {
+        step.value = 3;
+        start.value = true;
+      }
       if (battleInfo.config.mode === 1) {
         redTeam.value = battleInfo.redTeam;
         blueTeam.value = battleInfo.blueTeam;
+        if (battleInfo.status !== 0) {
           currentRound.value = battleInfo.currentRound;
           totalRounds.value = battleInfo.maxRound;
-        if (battleInfo.startTime < 0) return;
+          roundResults.value = battleInfo.roundResults;
-        start.value = true;
-        step.value = 3;
           battleInfo.roundResults.forEach((round) => {
             if (round.blueTotal && round.redTotal) {
               if (round.blueTotal === round.redTotal) {
@@ -100,8 +111,6 @@ onLoad(async (options) => {
               }
             }
           });
-        roundResults.value = battleInfo.roundResults;
-        currentShooterId.value = battleInfo.firePlayerIndex;
           setTimeout(() => {
             if (battleInfo.roundResults[battleInfo.roundResults.length - 1]) {
               scores.value = battleInfo.roundResults[
@@ -130,6 +139,8 @@ onLoad(async (options) => {
               blueArrows: [],
             });
           }
+        }
+        if (battleInfo.status !== 11) return;
         if (battleInfo.firePlayerIndex) {
           currentShooterId.value = battleInfo.firePlayerIndex;
           if (redTeam.value[0].id === currentShooterId.value) {
@@ -149,28 +160,29 @@ onLoad(async (options) => {
           }
         }
       } else if (battleInfo.config.mode === 2) {
+        total.value = 90;
         players.value = [...battleInfo.blueTeam, ...battleInfo.redTeam];
-        if (battleInfo.startTime < 0) return;
-        start.value = true;
-        step.value = 3;
         players.value.forEach((p) => {
           playersScores.value[p.id] = [...p.arrows];
           if (p.id === user.value.id) {
             scores.value = [...p.arrows];
           }
         });
+        if (battleInfo.status === 2) {
           const remain = Date.now() / 1000 - battleInfo.startTime;
           console.log(`当前局已进行${remain}秒`);
-        if (battleInfo.status === 2) {
+          tips.value = battleInfo.halfGame
-          tips.value = `${
+            ? "下半场：请再射6箭"
-            battleInfo.halfGame ? "下半场-" : "上半场-"
+            : "上半场：请先射6箭";
-          }请连续射6箭`;
           setTimeout(() => {
             uni.$emit("update-ramain", 90 - remain);
           }, 300);
         } else if (battleInfo.status === 9) {
           startCount.value = false;
           tips.value = "准备下半场";
+          setTimeout(() => {
+            uni.$emit("update-ramain", 0);
+          }, 300);
         }
       }
     }
@@ -229,7 +241,6 @@ onLoad(async (options) => {
 
 const startGame = async () => {
   const result = await startRoomAPI(room.value.number);
-  timerSeq.value += 1;
   step.value = 2;
 };
 
@@ -244,7 +255,6 @@ async function onReceiveMessage(messages = []) {
     }
     if (msg.constructor === MESSAGETYPES.WaitForAllReady) {
       // 这里会掉多次;
-      timerSeq.value += 1;
       battleId.value = msg.id;
       step.value = 2;
       if (battleType.value === 1) {
@@ -323,8 +333,6 @@ async function onReceiveMessage(messages = []) {
     if (msg.id === battleId.value) {
       if (msg.constructor === MESSAGETYPES.AllReady) {
         start.value = true;
-        timerSeq.value = 0;
-        scores.value = [];
         totalRounds.value = msg.groupUserStatus.config.maxRounds;
         step.value = 3;
         roundResults.value.push({
@@ -338,18 +346,13 @@ async function onReceiveMessage(messages = []) {
         startCount.value = true;
         step.value = 3;
         seq.value += 1;
-        timerSeq.value = 0;
+        tips.value = scores.value.length
-        tips.value = `${
+          ? "下半场：请再射6箭"
-          scores.value.length ? "下半场-" : "上半场-"
+          : "上半场：请先射6箭";
-        }请连续射6箭`;
         total.value = 90;
         halfTimeTip.value = false;
       }
       if (msg.constructor === MESSAGETYPES.ToSomeoneShoot) {
-        if (!start.value) {
-          start.value = true;
-          step.value = 3;
-        }
         if (battleType.value === 1) {
           if (currentShooterId.value !== msg.userId) {
             seq.value += 1;
@@ -571,6 +574,7 @@ onUnmounted(() => {
         :players="players"
       />
       <TestDistance :guide="false" />
+      <Timer />
     </view>
     <view v-if="step === 3" :style="{ width: '100%' }">
       <ShootProgress
@@ -612,7 +616,6 @@ onUnmounted(() => {
         :scores="playersScores[player.id] || []"
       />
     </view>
-    <Timer :seq="timerSeq" />
     <ScreenHint
       :show="showRoundTip"
       :onClose="() => (showRoundTip = false)"

src/pages/melee-match.vue

@@ -13,7 +13,7 @@ import Avatar from "@/components/Avatar.vue";
 import ScreenHint from "@/components/ScreenHint.vue";
 import Matching from "@/components/Matching.vue";
 import TestDistance from "@/components/TestDistance.vue";
-import { matchGameAPI, readyGameAPI } from "@/apis";
+import { matchGameAPI } from "@/apis";
 import { MESSAGETYPES, getMessageTypeName } from "@/constants";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
@@ -29,7 +29,6 @@ const power = ref(0);
 const scores = ref([]);
 const tips = ref("即将开始...");
 const seq = ref(0);
-const timerSeq = ref(0);
 const players = ref([]);
 const playersSorted = ref([]);
 const playersScores = ref({});
@@ -58,8 +57,6 @@ onLoad(async (options) => {
     if (battleInfo) {
       battleId.value = battleInfo.id;
       players.value = [...battleInfo.blueTeam, ...battleInfo.redTeam];
-      if (battleInfo.startTime <= 0) return;
-      start.value = true;
       players.value.forEach((p) => {
         playersScores.value[p.id] = [...p.arrows];
         if (p.id === user.value.id) {
@@ -67,18 +64,30 @@ onLoad(async (options) => {
         }
       });
       const remain = Date.now() / 1000 - battleInfo.startTime;
-      // 这里的开始时间不是游戏开始时间，而是上半场或者下半场或者中场的开始时间，还要根据状态来判断
       console.log(`当前局已进行${remain}秒`);
+      if (battleInfo.status === 0) {
+        if (remain > 0) {
+          setTimeout(() => {
+            uni.$emit("update-timer", 15 - remain);
+          }, 200);
+        }
+      } else {
+        start.value = true;
+      }
       if (battleInfo.status === 2) {
-        tips.value = `${
+        // 这里的开始时间不是游戏开始时间，而是上半场或者下半场或者中场的开始时间，还要根据状态来判断
-          battleInfo.halfGame ? "下半场-" : "上半场-"
+        tips.value = battleInfo.halfGame
-        }请连续射6箭`;
+          ? "下半场：请再射6箭"
+          : "上半场：请先射6箭";
         setTimeout(() => {
           uni.$emit("update-ramain", 90 - remain);
-        }, 300);
+        }, 200);
       } else if (battleInfo.status === 9) {
         startCount.value = false;
         tips.value = "准备下半场";
+        setTimeout(() => {
+          uni.$emit("update-ramain", 0);
+        }, 200);
       }
     }
   } else {
@@ -89,17 +98,10 @@ onLoad(async (options) => {
     }
   }
 });
+
 async function stopMatch() {
   uni.$showHint(3);
 }
-async function readyToGo() {
-  if (battleId.value) {
-    await readyGameAPI(battleId.value);
-    scores.value = [];
-    start.value = true;
-    timerSeq.value = 0;
-  }
-}
 
 async function onReceiveMessage(messages = []) {
   messages.forEach((msg) => {
@@ -113,7 +115,6 @@ async function onReceiveMessage(messages = []) {
     if (msg.constructor === MESSAGETYPES.WaitForAllReady) {
       onComplete.value = () => {
         // 这里会掉多次;
-        timerSeq.value += 1;
         battleId.value = msg.id;
         players.value = [
           ...msg.groupUserStatus.redTeam,
@@ -130,8 +131,9 @@ async function onReceiveMessage(messages = []) {
       start.value = true;
       startCount.value = true;
       seq.value += 1;
-      timerSeq.value = 0;
+      tips.value = scores.value.length
-      tips.value = `${scores.value.length ? "下半场-" : "上半场-"}请连续射6箭`;
+        ? "下半场：请再射6箭"
+        : "上半场：请先射6箭";
       halfTimeTip.value = false;
     }
     if (msg.constructor === MESSAGETYPES.ShootResult) {
@@ -218,7 +220,7 @@ onUnmounted(() => {
         <BowTarget
           v-if="start"
           :currentRound="scores.length"
-          :totalRound="start ? 12 : 0"
+          :totalRound="12"
           :scores="scores"
           :stop="!startCount"
         />
@@ -232,7 +234,7 @@ onUnmounted(() => {
             :scores="playersScores[player.id] || []"
           />
         </view>
-        <Timer :seq="timerSeq" :callBack="readyToGo" />
+        <Timer v-if="!start" />
         <ScreenHint
           :show="halfTimeTip"
           mode="small"
@@ -252,9 +254,6 @@ onUnmounted(() => {
         />
       </block>
     </view>
-    <!-- <view :style="{ marginBottom: '20px' }">
-      <SButton v-if="battleId && !start" :onClick="readyToGo">准备完毕</SButton>
-    </view> -->
   </Container>
 </template>
 

src/pages/ranking.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { ref, onMounted } from "vue";
+import { ref } from "vue";
-import { onShow, onHide } from "@dcloudio/uni-app";
+import { onShow } from "@dcloudio/uni-app";
 import Container from "@/components/Container.vue";
 import Avatar from "@/components/Avatar.vue";
 import { getRankListAPI, isGamingAPI } from "@/apis";
@@ -37,15 +37,6 @@ const handleSelect = (index) => {
   }
 };
 
-onShow(async () => {
-  const result = await getHomeData();
-  currentList.value = result.rank;
-  rankData.value = result;
-  const { userGameStats, seasonList } = result;
-  seasonData.value = seasonList;
-  updateData();
-});
-
 const toTeamMatchPage = async (gameType, teamSize) => {
   if (!device.value.deviceId) {
     return uni.showToast({
@@ -137,10 +128,14 @@ const updateData = () => {
     });
   }
 };
-onShow,
+onShow(async () => {
-  () => {
+  const result = await getHomeData();
+  rankData.value = result;
+  handleSelect(selectedIndex.value);
+  seasonData.value = result.seasonList;
+  updateData();
   showSeasonList.value = false;
-  };
+});
 </script>
 
 <template>

src/pages/team-match.vue

@@ -14,7 +14,7 @@ import SButton from "@/components/SButton.vue";
 import Matching from "@/components/Matching.vue";
 import RoundEndTip from "@/components/RoundEndTip.vue";
 import TestDistance from "@/components/TestDistance.vue";
-import { matchGameAPI, readyGameAPI } from "@/apis";
+import { matchGameAPI } from "@/apis";
 import { MESSAGETYPES, roundsName, getMessageTypeName } from "@/constants";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
@@ -36,7 +36,6 @@ const blueTeam = ref([]);
 const currentShooterId = ref(0);
 const tips = ref("即将开始...");
 const seq = ref(0);
-const timerSeq = ref(0);
 const roundResults = ref([]);
 const redPoints = ref(0);
 const bluePoints = ref(0);
@@ -52,9 +51,19 @@ onLoad(async (options) => {
       battleId.value = battleInfo.id;
       redTeam.value = battleInfo.redTeam;
       blueTeam.value = battleInfo.blueTeam;
-      if (battleInfo.startTime < 0) return;
+      if (battleInfo.status === 0) {
+        const readyRemain = Date.now() / 1000 - battleInfo.startTime;
+        console.log(`当前局已进行${readyRemain}秒`);
+        if (readyRemain > 0) {
+          setTimeout(() => {
+            uni.$emit("update-timer", 15 - readyRemain);
+          }, 200);
+        }
+      } else {
         start.value = true;
         currentRound.value = battleInfo.currentRound;
+        totalRounds.value = battleInfo.maxRound;
+        roundResults.value = battleInfo.roundResults;
         battleInfo.roundResults.forEach((round) => {
           if (round.blueTotal && round.redTotal) {
             if (round.blueTotal === round.redTotal) {
@@ -67,8 +76,6 @@ onLoad(async (options) => {
             }
           }
         });
-      totalRounds.value = battleInfo.maxRound;
-      roundResults.value = battleInfo.roundResults;
         setTimeout(() => {
           if (battleInfo.roundResults[battleInfo.roundResults.length - 1]) {
             scores.value = battleInfo.roundResults[
@@ -97,6 +104,8 @@ onLoad(async (options) => {
             blueArrows: [],
           });
         }
+      }
+      if (battleInfo.status !== 11) return;
       if (battleInfo.firePlayerIndex) {
         currentShooterId.value = battleInfo.firePlayerIndex;
         if (redTeam.value[0].id === currentShooterId.value) {
@@ -127,13 +136,6 @@ onLoad(async (options) => {
 async function stopMatch() {
   uni.$showHint(3);
 }
-async function readyToGo() {
-  if (battleId.value) {
-    await readyGameAPI(battleId.value);
-    start.value = true;
-    timerSeq.value = 0;
-  }
-}
 
 async function onReceiveMessage(messages = []) {
   messages.forEach((msg) => {
@@ -147,7 +149,6 @@ async function onReceiveMessage(messages = []) {
     if (msg.constructor === MESSAGETYPES.WaitForAllReady) {
       // 这里会掉多次;
       onComplete.value = () => {
-        timerSeq.value += 1;
         battleId.value = msg.id;
         redTeam.value = msg.groupUserStatus.redTeam;
         blueTeam.value = msg.groupUserStatus.blueTeam;
@@ -157,8 +158,6 @@ async function onReceiveMessage(messages = []) {
     if (msg.id !== battleId.value) return;
     if (msg.constructor === MESSAGETYPES.AllReady) {
       start.value = true;
-      timerSeq.value = 0;
-      scores.value = [];
       totalRounds.value = msg.groupUserStatus.config.maxRounds;
       roundResults.value.push({
         redArrows: [],
@@ -166,10 +165,6 @@ async function onReceiveMessage(messages = []) {
       });
     }
     if (msg.constructor === MESSAGETYPES.ToSomeoneShoot) {
-      if (!start.value) {
-        start.value = true;
-        step.value = 3;
-      }
       if (currentShooterId.value !== msg.userId) {
         seq.value += 1;
         currentShooterId.value = msg.userId;
@@ -314,7 +309,7 @@ onUnmounted(() => {
           :redPoints="redPoints"
           :bluePoints="bluePoints"
         />
-        <Timer :seq="timerSeq" :callBack="readyToGo" />
+        <Timer v-if="!start" />
         <ScreenHint
           :show="showRoundTip"
           :onClose="() => (showRoundTip = false)"
@@ -342,9 +337,6 @@ onUnmounted(() => {
         />
       </block>
     </view>
-    <!-- <view :style="{ marginBottom: '20px' }">
-      <SButton v-if="battleId && !start" :onClick="readyToGo">准备完毕</SButton>
-    </view> -->
   </Container>
 </template>