添加匹配中效果

src/components/Matching.vue

@@ -0,0 +1,190 @@
+<script setup>
+import { ref, onMounted, onUnmounted, watch } from "vue";
+const props = defineProps({
+  stopMatch: {
+    type: Function,
+    default: () => {},
+  },
+  onComplete: {
+    type: Function,
+    default: null,
+  },
+});
+const playerNames = [
+  "彭妮·希利",
+  "埃琳娜·奥西波娃",
+  "凯西·考夫霍尔德",
+  "起鼓相当的对手",
+  "马乌罗·内斯波利",
+  "埃琳娜·奥西波娃",
+  "凯西·考夫霍尔德",
+];
+
+const totalTop = ref(0);
+const timer = ref(null);
+const textStyles = ref([]);
+
+const getTextStyle = (top) => {
+  const styles = [
+    {
+      color: "#fff9",
+      fontSize: "20px",
+    },
+    {
+      color: "#fff",
+      fontSize: "24px",
+    },
+    {
+      color: "#fed847",
+      fontSize: "30px",
+    },
+  ];
+  const data = new Array(14).fill({
+    color: "#fff6",
+    fontSize: "16px",
+  });
+  const unitHeight = 100 / 7;
+  let style = {};
+  if (top >= 100 - unitHeight / 2) {
+    for (let j = 0; j < 5; j++) {
+      data[j + 1] = styles[j > 2 ? 4 - j : j];
+    }
+  } else {
+    new Array(7).fill(1).some((_, i) => {
+      if (
+        top >= unitHeight * i - unitHeight / 2 &&
+        top < unitHeight * (i + 1) - unitHeight / 2
+      ) {
+        for (let j = 0; j < 5; j++) {
+          data[7 + j + 1 - i] = styles[j > 2 ? 4 - j : j];
+        }
+        return true;
+      }
+      return false;
+    });
+  }
+  return data;
+};
+watch(
+  () => props.onComplete,
+  (newVal, oldVal) => {
+    if (newVal && !oldVal) {
+      if (timer.value) clearInterval(timer.value);
+      timer.value = setInterval(() => {
+        if (totalTop.value === 100) {
+          clearInterval(timer.value);
+          setTimeout(() => {
+            newVal();
+          }, 1000);
+        } else {
+          totalTop.value += 0.5;
+        }
+        textStyles.value = getTextStyle(totalTop.value);
+      }, 10);
+    }
+  }
+);
+onMounted(() => {
+  timer.value = setInterval(() => {
+    if (totalTop.value === 100) {
+      totalTop.value = 0;
+    } else {
+      totalTop.value += 0.5;
+    }
+    textStyles.value = getTextStyle(totalTop.value);
+  }, 10);
+});
+onUnmounted(() => {
+  if (timer.value) clearInterval(timer.value);
+});
+</script>
+
+<template>
+  <view class="matching">
+    <image
+      src="../static/matching-bg.png"
+      mode="widthFix"
+      class="matching-bg"
+    />
+    <view>
+      <view
+        class="player-names"
+        :style="{
+          top: `${totalTop - 100}%`,
+        }"
+      >
+        <text
+          v-for="(name, index) in playerNames"
+          :key="index"
+          :style="{
+            lineHeight: `${98 / 7}vw`,
+            ...(textStyles[index] || {}),
+          }"
+        >
+          {{ name }}
+        </text>
+      </view>
+      <view class="player-names" :style="{ top: `${totalTop}%` }">
+        <text
+          v-for="(name, index) in playerNames"
+          :key="index"
+          :style="{
+            lineHeight: `${98 / 7}vw`,
+            ...(textStyles[index + 7] || {}),
+          }"
+        >
+          {{ name }}
+        </text>
+      </view>
+    </view>
+    <button hover-class="none" @click="stopMatch">取消匹配</button>
+  </view>
+</template>
+
+<style scoped>
+.matching {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+.matching > view {
+  width: 70vw;
+  height: 98vw;
+  overflow: hidden;
+  position: relative;
+  transform: translateY(3vw);
+}
+.matching-bg {
+  position: absolute;
+  width: 70vw;
+  height: 102vw;
+  top: 30vw;
+}
+.matching > button {
+  width: 55%;
+  margin-top: 20vw;
+  padding: 18px;
+  color: #000;
+  background-color: #fed847;
+  font-size: 18px;
+  border-radius: 30px;
+}
+.player-names {
+  width: 100%;
+  height: 98vw;
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 0;
+  transform: translateY(3vw);
+}
+.player-names > text {
+  width: 100%;
+  text-align: center;
+  transition: all 0.3s ease;
+}
+</style>

src/components/Timer.vue

@@ -21,7 +21,7 @@ watch(
   () => props.seq,
   () => {
     if (props.seq > 0) {
-      if(show.value) return;
+      if (show.value) return;
       if (timer.value) clearInterval(timer.value);
       count.value = props.countdown;
       show.value = true;
@@ -38,6 +38,9 @@ watch(
       if (timer.value) clearInterval(timer.value);
       show.value = false;
     }
+  },
+  {
+    immediate: true,
   }
 );
 </script>

src/pages/melee-match.vue

@@ -11,6 +11,7 @@ import PlayerScore from "@/components/PlayerScore.vue";
 import SButton from "@/components/SButton.vue";
 import Avatar from "@/components/Avatar.vue";
 import ScreenHint from "@/components/ScreenHint.vue";
+import Matching from "@/components/Matching.vue";
 import { matchGameAPI, readyGameAPI } from "@/apis";
 import { MESSAGETYPES, getMessageTypeName } from "@/constants";
 import useStore from "@/store";
@@ -19,7 +20,6 @@ const store = useStore();
 const { user } = storeToRefs(store);
 const gameType = ref(0);
 const teamSize = ref(0);
-const matching = ref(false);
 const start = ref(false);
 const startCount = ref(false);
 const battleId = ref("");
@@ -33,18 +33,17 @@ const timerSeq = ref(0);
 const players = ref([]);
 const playersScores = ref({});
 const halfTimeTip = ref(false);
+const onComplete = ref(null);
 
-onLoad((options) => {
+onLoad(async (options) => {
   gameType.value = options.gameType;
   teamSize.value = options.teamSize;
+  if (gameType.value && teamSize.value) {
+    await matchGameAPI(true, gameType.value, teamSize.value);
+  }
 });
-async function startMatch() {
-  await matchGameAPI(true, gameType.value, teamSize.value);
-  matching.value = true;
-}
 async function stopMatch() {
-  await matchGameAPI(false, gameType.value, teamSize.value);
-  matching.value = false;
+  uni.navigateBack();
 }
 async function readyToGo() {
   if (battleId.value) {
@@ -65,16 +64,18 @@ async function onReceiveMessage(messages = []) {
       console.log("收到消息：", getMessageTypeName(msg.constructor), msg);
     }
     if (msg.constructor === MESSAGETYPES.WaitForAllReady) {
-      // 这里会掉多次;
-      timerSeq.value += 1;
-      battleId.value = msg.id;
-      players.value = [
-        ...msg.groupUserStatus.redTeam,
-        ...msg.groupUserStatus.blueTeam,
-      ];
-      players.value.forEach((p) => {
-        playersScores.value[p.id] = [];
-      });
+      onComplete.value = () => {
+        // 这里会掉多次;
+        timerSeq.value += 1;
+        battleId.value = msg.id;
+        players.value = [
+          ...msg.groupUserStatus.redTeam,
+          ...msg.groupUserStatus.blueTeam,
+        ];
+        players.value.forEach((p) => {
+          playersScores.value[p.id] = [];
+        });
+      };
     }
     if (!start.value && msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
       scores.value.push(msg.target);
@@ -113,62 +114,73 @@ onMounted(() => {
 });
 onUnmounted(() => {
   uni.$off("socket-inbox", onReceiveMessage);
-  if (startMatch.value) {
-    matchGameAPI(false, gameType.value, teamSize.value);
+  if (gameType.value && teamSize.value) {
+    matchGameAPI(true, gameType.value, teamSize.value);
   }
 });
 </script>
 
 <template>
-  <Container title="大乱斗排位赛" :bgType="1">
+  <Container :title="battleId ? '大乱斗排位赛' : '搜索对手...'" :bgType="1">
     <view class="container">
-      <BattleHeader v-if="!start && players.length" :players="players" />
-      <Guide noBg v-if="!start && matching">
-        <view :style="{ display: 'flex', justifyContent: 'space-between' }">
-          <view :style="{ display: 'flex', flexDirection: 'column' }">
-            <text :style="{ color: '#fed847' }">请预先射几箭测试</text>
-            <text>请确保射击距离只有5米</text>
+      <block v-if="battleId">
+        <BattleHeader v-if="players.length" :players="players" />
+        <Guide noBg v-if="!start && battleId">
+          <view :style="{ display: 'flex', justifyContent: 'space-between' }">
+            <view :style="{ display: 'flex', flexDirection: 'column' }">
+              <text :style="{ color: '#fed847' }">请预先射几箭测试</text>
+              <text>请确保射击距离只有5米</text>
+            </view>
+            <BowPower :power="45" />
           </view>
-          <BowPower :power="45" />
+        </Guide>
+        <ShootProgress
+          v-if="start"
+          :seq="seq"
+          :start="startCount"
+          :tips="tips"
+        />
+        <view v-if="start" class="infos">
+          <Avatar :src="user.avatar" :size="35" />
+          <BowPower :power="power" />
         </view>
-      </Guide>
-      <ShootProgress v-if="start" :seq="seq" :start="startCount" :tips="tips" />
-      <view v-if="start" class="infos">
-        <Avatar :src="user.avatar" :size="35" />
-        <BowPower :power="power" />
-      </view>
-      <BowTarget
-        v-if="matching"
-        :showE="start"
-        :currentRound="scores.length"
-        :totalRound="start ? 12 : 0"
-        :scores="scores"
-      />
-      <PlayerScore
-        v-if="start"
-        v-for="(player, index) in players"
-        :key="index"
-        :name="player.name"
-        :avatar="player.avatar"
-        :scores="playersScores[player.id]"
-        :done="playersScores[player.id].length === 12"
-      />
-      <Timer :seq="timerSeq" :callBack="readyToGo" />
-      <ScreenHint
-        :show="halfTimeTip"
-        mode="small"
-        :onClose="() => (halfTimeTip = false)"
-      >
-        <view class="half-time-tip">
-          <text>上半场结束，休息一下吧:）</text>
-          <text>20秒后开始下半场</text>
-        </view>
-      </ScreenHint>
+        <BowTarget
+          v-if="battleId"
+          :showE="start"
+          :currentRound="scores.length"
+          :totalRound="start ? 12 : 0"
+          :scores="scores"
+        />
+        <PlayerScore
+          v-if="start"
+          v-for="(player, index) in players"
+          :key="index"
+          :name="player.name"
+          :avatar="player.avatar"
+          :scores="playersScores[player.id]"
+          :done="playersScores[player.id].length === 12"
+        />
+        <Timer :seq="timerSeq" :callBack="readyToGo" />
+        <ScreenHint
+          :show="halfTimeTip"
+          mode="small"
+          :onClose="() => (halfTimeTip = false)"
+        >
+          <view class="half-time-tip">
+            <text>上半场结束，休息一下吧:）</text>
+            <text>20秒后开始下半场</text>
+          </view>
+        </ScreenHint>
+      </block>
+      <block v-else>
+        <Matching
+          v-if="!battleId"
+          :stopMatch="stopMatch"
+          :onComplete="onComplete"
+        />
+      </block>
     </view>
     <view :style="{ marginBottom: '20px' }">
-      <SButton v-if="!battleId" :onClick="matching ? stopMatch : startMatch">{{
-        matching ? "取消匹配" : "开始匹配"
-      }}</SButton>
       <SButton v-if="battleId && !start" :onClick="readyToGo">准备完毕</SButton>
     </view>
   </Container>
@@ -177,6 +189,7 @@ onUnmounted(() => {
 <style scoped>
 .container {
   width: 100%;
+  height: 100%;
 }
 .infos {
   display: flex;

src/pages/team-match.vue

@@ -11,6 +11,7 @@ import Timer from "@/components/Timer.vue";
 import BattleFooter from "@/components/BattleFooter.vue";
 import ScreenHint from "@/components/ScreenHint.vue";
 import SButton from "@/components/SButton.vue";
+import Matching from "@/components/Matching.vue";
 import { matchGameAPI, readyGameAPI } from "@/apis";
 import { MESSAGETYPES, roundsName, getMessageTypeName } from "@/constants";
 import useStore from "@/store";
@@ -19,7 +20,6 @@ const store = useStore();
 const { user } = storeToRefs(store);
 const gameType = ref(0);
 const teamSize = ref(0);
-const matching = ref(false);
 const start = ref(false);
 const battleId = ref("");
 const currentRound = ref(1);
@@ -34,32 +34,21 @@ const currentShooterId = ref(0);
 const tips = ref("即将开始...");
 const seq = ref(0);
 const timerSeq = ref(0);
-const roundResults = ref([
-  // {
-  //   blueArrows: [{ ring: 2 }, { ring: 2 }],
-  //   redArrows: [{ ring: 2 }, { ring: 3 }],
-  // },
-]);
+const roundResults = ref([]);
 const redPoints = ref(0);
 const bluePoints = ref(0);
 const showRoundTip = ref(false);
+const onComplete = ref(null);
 
-onLoad((options) => {
+onLoad(async (options) => {
   gameType.value = options.gameType;
   teamSize.value = options.teamSize;
-});
-async function startMatch() {
   if (gameType.value && teamSize.value) {
-    scores.value = [];
     await matchGameAPI(true, gameType.value, teamSize.value);
-    matching.value = true;
   }
-}
+});
 async function stopMatch() {
-  if (gameType.value && teamSize.value) {
-    await matchGameAPI(false, gameType.value, teamSize.value);
-    matching.value = false;
-  }
+  uni.navigateBack();
 }
 async function readyToGo() {
   if (battleId.value) {
@@ -84,10 +73,12 @@ async function onReceiveMessage(messages = []) {
     }
     if (msg.constructor === MESSAGETYPES.WaitForAllReady) {
       // 这里会掉多次;
-      timerSeq.value += 1;
-      battleId.value = msg.id;
-      redTeam.value = msg.groupUserStatus.redTeam;
-      blueTeam.value = msg.groupUserStatus.blueTeam;
+      onComplete.value = () => {
+        timerSeq.value += 1;
+        battleId.value = msg.id;
+        redTeam.value = msg.groupUserStatus.redTeam;
+        blueTeam.value = msg.groupUserStatus.blueTeam;
+      };
     }
     if (msg.id !== battleId.value) return;
     if (msg.constructor === MESSAGETYPES.AllReady) {
@@ -136,77 +127,85 @@ onMounted(() => {
 });
 onUnmounted(() => {
   uni.$off("socket-inbox", onReceiveMessage);
-  if (matching.value) {
-    matchGameAPI(false, gameType.value, teamSize.value);
+  if (gameType.value && teamSize.value) {
+    matchGameAPI(true, gameType.value, teamSize.value);
   }
 });
 </script>
 
 <template>
-  <Container title="1V1排位赛" :bgType="1">
+  <Container :title="battleId ? '1V1排位赛' : '搜索对手...'" :bgType="1">
     <view class="container">
-      <BattleHeader
-        v-if="!start && redTeam.length && blueTeam.length"
-        :redTeam="redTeam"
-        :blueTeam="blueTeam"
-      />
-      <Guide noBg v-if="!start && battleId">
-        <view :style="{ display: 'flex', justifyContent: 'space-between' }">
-          <view :style="{ display: 'flex', flexDirection: 'column' }">
-            <text :style="{ color: '#fed847' }">请预先射几箭测试</text>
-            <text>请确保射击距离只有5米</text>
+      <block v-if="battleId">
+        <BattleHeader
+          v-if="!start && redTeam.length && blueTeam.length"
+          :redTeam="redTeam"
+          :blueTeam="blueTeam"
+        />
+        <Guide noBg v-if="!start">
+          <view :style="{ display: 'flex', justifyContent: 'space-between' }">
+            <view :style="{ display: 'flex', flexDirection: 'column' }">
+              <text :style="{ color: '#fed847' }">请预先射几箭测试</text>
+              <text>请确保射击距离只有5米</text>
+            </view>
+            <BowPower :power="45" />
           </view>
-          <BowPower :power="45" />
-        </view>
-      </Guide>
-      <ShootProgress v-if="start" :tips="tips" :seq="seq" :total="15" />
-      <PlayersRow
-        v-if="start"
-        :currentShooterId="currentShooterId"
-        :blueTeam="blueTeam"
-        :redTeam="redTeam"
-      />
-      <BowTarget
-        v-if="battleId"
-        :showE="start && user.id === currentShooterId"
-        :power="start ? power : 0"
-        :currentRound="currentRound"
-        :totalRound="totalRounds"
-        :scores="scores"
-        :tips="
-          !start && scores.length > 0
-            ? `本次射程${scores[scores.length - 1].dst / 100}米，${
-                scores[scores.length - 1].dst / 100 >= 5 ? '已' : '未'
-              }达到距离要求`
-            : ''
-        "
-      />
-      <BattleFooter
-        v-if="start"
-        :roundResults="roundResults"
-        :redPoints="redPoints"
-        :bluePoints="bluePoints"
-      />
-      <Timer :seq="timerSeq" :callBack="readyToGo" />
-      <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>
-          <!-- <text>同分僵局！最后一箭定江山</text>
+        </Guide>
+        <ShootProgress v-if="start" :tips="tips" :seq="seq" :total="15" />
+        <PlayersRow
+          v-if="start"
+          :currentShooterId="currentShooterId"
+          :blueTeam="blueTeam"
+          :redTeam="redTeam"
+        />
+        <BowTarget
+          :showE="start && user.id === currentShooterId"
+          :power="start ? power : 0"
+          :currentRound="currentRound"
+          :totalRound="totalRounds"
+          :scores="scores"
+          :tips="
+            !start && scores.length > 0
+              ? `本次射程${scores[scores.length - 1].dst / 100}米，${
+                  scores[scores.length - 1].dst / 100 >= 5 ? '已' : '未'
+                }达到距离要求`
+              : ''
+          "
+        />
+        <BattleFooter
+          v-if="start"
+          :roundResults="roundResults"
+          :redPoints="redPoints"
+          :bluePoints="bluePoints"
+        />
+        <Timer :seq="timerSeq" :callBack="readyToGo" />
+        <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>
+            <!-- <text>同分僵局！最后一箭定江山</text>
           <text>10 秒后蓝红双方 决金箭 一箭决胜负</text> -->
-        </view>
-      </ScreenHint>
+          </view>
+        </ScreenHint>
+      </block>
+      <block v-else>
+        <Matching
+          v-if="!battleId"
+          :stopMatch="stopMatch"
+          :onComplete="onComplete"
+        />
+      </block>
     </view>
     <view :style="{ marginBottom: '20px' }">
-      <SButton v-if="!battleId" :onClick="matching ? stopMatch : startMatch">{{
-        matching ? "取消匹配" : "开始匹配"
-      }}</SButton>
       <SButton v-if="battleId && !start" :onClick="readyToGo">准备完毕</SButton>
     </view>
   </Container>
@@ -215,5 +214,6 @@ onUnmounted(() => {
 <style scoped>
 .container {
   width: 100%;
+  height: 100%;
 }
 </style>