shoot-miniprograms/src/pages/melee-match.vue

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import BowTarget from "@/components/BowTarget.vue";
import ShootProgress from "@/components/ShootProgress.vue";
import PlayersRow from "@/components/PlayersRow.vue";
import Timer from "@/components/Timer.vue";
import BattleFooter from "@/components/BattleFooter.vue";
import SButton from "@/components/SButton.vue";
import { matchGameAPI, readyGameAPI } from "@/apis";
import { MESSAGETYPES, roundsName } from "@/constants";
const gameType = ref(0);
const teamSize = ref(0);
const matching = ref(false);
const start = ref(false);
const battleId = ref("");
const currentRound = ref(1);
const totalRounds = ref(0);
const power = ref(0);
const scores = ref([]);
const redTeam = ref([]);
const blueTeam = ref([]);
const currentShooterId = ref(0);
const tips = ref("即将开始...");
const seq = ref(0);
const timerSeq = ref(0);
const roundResults = ref([
]);

onLoad((options) => {
  gameType.value = options.gameType;
  teamSize.value = options.teamSize;
});
async function startMatch() {
  if (gameType.value && teamSize.value) {
    await matchGameAPI(true, gameType.value, teamSize.value);
    startMatch.value = true;
  }
}
async function stopMatch() {
  if (gameType.value && teamSize.value) {
    await matchGameAPI(false, gameType.value, teamSize.value);
    startMatch.value = false;
  }
}
async function readyToGo() {
  if (battleId.value) {
    await readyGameAPI(battleId.value);
    start.value = true;
    timerSeq.value = 0;
  }
}

async function onReceiveMessage(content) {
  const messages = JSON.parse(content).data.updates || [];
  messages.forEach((msg) => {
    if (
      !msg.id ||
      (battleId.value && msg.id === battleId.value) ||
      msg.constructor === MESSAGETYPES.WaitForAllReady
    ) {
      console.log("收到消息：", msg);
    }
    if (msg.constructor === MESSAGETYPES.WaitForAllReady) {
      // 这里会掉多次;
      timerSeq.value += 1;
      battleId.value = msg.id;
      redTeam.value = msg.groupUserStatus.redTeam;
      blueTeam.value = msg.groupUserStatus.blueTeam;
      totalRounds.value = msg.groupUserStatus.config.maxRounds;
    }
    if (msg.id !== battleId.value) return;
    if (msg.constructor === MESSAGETYPES.AllReady) {
      start.value = true;
      timerSeq.value = 0;
    }
    if (msg.constructor === MESSAGETYPES.ToSomeoneShoot) {
      scores.value = [];
      seq.value += 1;
      currentShooterId.value = msg.userId;
      if (redTeam.value[0].id === currentShooterId.value) {
        tips.value = `请红队射箭-第${roundsName[currentRound.value]}轮`;
      } else {
        tips.value = `请蓝队射箭-第${roundsName[currentRound.value]}轮`;
      }
    }
    if (msg.constructor === MESSAGETYPES.ShootResult) {
      scores.value = [msg.target];
    }
    if (msg.constructor === MESSAGETYPES.CurrentRoundEnded) {
      const result = msg.preRoundResult;
      scores.value = [];
      currentShooterId.value = 0;
      if (result.currentRound > 0 && result.currentRound < totalRounds.value) {
        // 开始下一轮;
        roundResults.value = result.roundResults;
        currentRound.value = result.currentRound + 1;
      }
    }
    if (msg.constructor === MESSAGETYPES.MatchOver) {
      uni.redirectTo({
        url: "/pages/battle-result?battleId=" + msg.id,
      });
    }
  });
}
onMounted(() => {
  uni.$on("socket-inbox", onReceiveMessage);
});
onUnmounted(() => {
  uni.$off("socket-inbox", onReceiveMessage);
  if (startMatch.value) {
    matchGameAPI(false, gameType.value, teamSize.value);
  }
});
</script>

<template>
  <Container title="排位赛" :bgType="1">
    <view class="container">
      <ShootProgress v-if="start" :tips="tips" :seq="seq" />
      <PlayersRow
        v-if="start"
        :currentShooterId="currentShooterId"
        :blueTeam="blueTeam"
        :redTeam="redTeam"
      />
      <BowTarget
        v-if="start"
        :power="power"
        :currentRound="currentRound"
        :totalRound="totalRounds"
        :scores="scores"
      />
      <BattleFooter
        v-if="roundResults.length > 0"
        :roundResults="roundResults"
      />
      <Timer :seq="timerSeq" :callBack="readyToGo" />
    </view>
    <SButton v-if="!battleId" :onClick="matching ? stopMatch : startMatch">{{
      matching ? "取消匹配" : "开始匹配"
    }}</SButton>
    <SButton v-if="battleId && !start" :onClick="readyToGo">准备完毕</SButton>
  </Container>
</template>

<style scoped>
.container {
  width: 100%;
}
</style>