shoot-miniprograms/src/pages/team-battle.vue

<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick } from "vue";
import { onLoad, onShow, onHide } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import BattleHeader from "@/components/BattleHeader.vue";
import BowTarget from "@/components/BowTarget.vue";
import PlayersRow from "@/components/PlayersRow.vue";
import BattleFooter from "@/components/BattleFooter.vue";
import ScreenHint from "@/components/ScreenHint.vue";
import SButton from "@/components/SButton.vue";
import RoundEndTip from "@/components/RoundEndTip.vue";
import TestDistance from "@/components/TestDistance.vue";
import TeamAvatars from "@/components/TeamAvatars.vue";
import ShootProgress2 from "@/components/ShootProgress2.vue";
import { getCurrentGameAPI, laserCloseAPI } from "@/apis";
import { isGameEnded } from "@/util";
import { MESSAGETYPES, roundsName } from "@/constants";
import audioManager from "@/audioManager";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user } = storeToRefs(store);
const start = ref(false);
const tips = ref("");
const battleId = ref("");
const currentRound = ref(1);
const goldenRound = ref(0);
const currentRedPoint = ref(0);
const currentBluePoint = ref(0);
const scores = ref([]);
const blueScores = ref([]);
const redTeam = ref([]);
const blueTeam = ref([]);
const currentShooterId = ref(0);
const roundResults = ref([]);
const redPoints = ref(0);
const bluePoints = ref(0);
const showRoundTip = ref(false);
const isFinalShoot = ref(false);
const isEnded = ref(false);

function recoverData(battleInfo) {
  uni.removeStorageSync("last-awake-time");
  battleId.value = battleInfo.id;
  redTeam.value = battleInfo.redTeam;
  blueTeam.value = battleInfo.blueTeam;
  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;
    bluePoints.value = 0;
    redPoints.value = 0;
    currentRound.value = battleInfo.currentRound;
    roundResults.value = [...battleInfo.roundResults];
    // 算得分
    battleInfo.roundResults.forEach((round) => {
      const blueTotal = round.blueArrows.reduce(
        (last, next) => last + next.ring,
        0
      );
      const redTotal = round.redArrows.reduce(
        (last, next) => last + next.ring,
        0
      );
      if (blueTotal === redTotal) {
        bluePoints.value += 1;
        redPoints.value += 1;
      } else if (blueTotal > redTotal) {
        bluePoints.value += 2;
      } else {
        redPoints.value += 2;
      }
    });
    if (battleInfo.goldenRoundNumber) {
      currentRound.value += battleInfo.goldenRoundNumber;
      goldenRound.value = battleInfo.goldenRoundNumber;
      isFinalShoot.value = true;
      for (let i = 1; i <= battleInfo.goldenRoundNumber; i++) {
        const redArrows = [];
        battleInfo.redTeam.forEach((item) => {
          if (item.shotHistory[roundResults.value.length + 1]) {
            item.shotHistory[roundResults.value.length + 1]
              .filter((item) => !!item.playerId)
              .forEach((item) => redArrows.push(item));
          }
        });
        const blueArrows = [];
        battleInfo.blueTeam.forEach((item) => {
          if (item.shotHistory[roundResults.value.length + 1]) {
            item.shotHistory[roundResults.value.length + 1]
              .filter((item) => !!item.playerId)
              .forEach((item) => blueArrows.push(item));
          }
        });
        roundResults.value.push({
          number: roundResults.value.length + 1,
          blueArrows,
          redArrows,
          blueTotal: blueArrows.reduce((last, next) => last + next.ring, 0),
          redTotal: redArrows.reduce((last, next) => last + next.ring, 0),
        });
      }
    } else {
      const hasCurrentRoundData =
        battleInfo.redTeam.some(
          (item) => !!item.shotHistory[battleInfo.currentRound]
        ) ||
        battleInfo.blueTeam.some(
          (item) => !!item.shotHistory[battleInfo.currentRound]
        );
      if (
        battleInfo.currentRound > battleInfo.roundResults.length &&
        hasCurrentRoundData
      ) {
        const blueArrows = [];
        const redArrows = [];
        battleInfo.redTeam.forEach((item) =>
          item.shotHistory[battleInfo.currentRound]
            .filter((item) => !!item.playerId)
            .forEach((item) => redArrows.push(item))
        );
        battleInfo.blueTeam.forEach((item) =>
          item.shotHistory[battleInfo.currentRound]
            .filter((item) => !!item.playerId)
            .forEach((item) => blueArrows.push(item))
        );
        roundResults.value.push({
          redArrows,
          blueArrows,
        });
      }
      [...battleInfo.redTeam, ...battleInfo.blueTeam].some((p) => {
        if (p.id === user.value.id) {
          const roundArrows = Object.values(p.shotHistory);
          if (roundArrows.length) {
            uni.$emit("update-shot", {
              currentShot: roundArrows[roundArrows.length - 1].length,
              totalShot: battleInfo.config.teamSize === 2 ? 3 : 2,
            });
          }
          return true;
        }
        return false;
      });
    }
    const lastIndex = roundResults.value.length - 1;
    if (roundResults.value[lastIndex]) {
      const redArrows = roundResults.value[lastIndex].redArrows;
      scores.value = [...redArrows]
        .filter((item) => !!item.playerId)
        .sort((a, b) => a.shotTimeUnix - b.shotTimeUnix);
      const blueArrows = roundResults.value[lastIndex].blueArrows;
      blueScores.value = [...blueArrows]
        .filter((item) => !!item.playerId)
        .sort((a, b) => a.shotTimeUnix - b.shotTimeUnix);
    }
    if (battleInfo.firePlayerIndex) {
      currentShooterId.value = battleInfo.firePlayerIndex;
      const redPlayer = redTeam.value.find(
        (item) => item.id === currentShooterId.value
      );
      let nextTips = redPlayer ? "请红队射箭" : "请蓝队射箭";
      nextTips += "重回";
      // if (battleInfo.firePlayerIndex === user.value.id) nextTips += "你";
      tips.value = nextTips;
      uni.$emit("update-tips", nextTips);
    }
    if (battleInfo.fireTime > 0) {
      const remain = Date.now() / 1000 - battleInfo.fireTime;
      console.log(`当前箭已过${remain}秒`);
      if (remain > 0 && remain <= 15) {
        // 等渲染好再通知
        setTimeout(() => {
          uni.$emit("update-ramain", 15 - remain);
        }, 300);
      }
    }
  }
}

async function onReceiveMessage(messages = []) {
  messages.forEach((msg) => {
    if (msg.constructor === MESSAGETYPES.WaitForAllReady) {
      redTeam.value = msg.groupUserStatus.redTeam;
      blueTeam.value = msg.groupUserStatus.blueTeam;
    }
    if (msg.constructor === MESSAGETYPES.AllReady) {
      start.value = true;
    }
    if (msg.constructor === MESSAGETYPES.ToSomeoneShoot) {
      if (currentShooterId.value !== msg.userId) {
        currentShooterId.value = msg.userId;
        const redPlayer = redTeam.value.find(
          (item) => item.id === currentShooterId.value
        );

        let nextTips = redPlayer ? "请红队射箭" : "请蓝队射箭";
        if (msg.userId === user.value.id && redTeam.value.length > 1) {
          nextTips += "你";
        }
        if (nextTips !== tips.value) {
          tips.value = nextTips;
          uni.$emit("update-tips", tips.value);
        } else {
          uni.$emit("update-ramain", 15);
        }
      }
    }
    if (msg.constructor === MESSAGETYPES.ShootResult) {
      if (msg.battleInfo) recoverData(msg.battleInfo);
    }
    if (msg.constructor === MESSAGETYPES.CurrentRoundEnded) {
      const result = msg.preRoundResult;
      scores.value = [];
      blueScores.value = [];
      currentShooterId.value = 0;
      currentBluePoint.value = result.blueScore;
      currentRedPoint.value = result.redScore;
      bluePoints.value += result.blueScore;
      redPoints.value += result.redScore;
      if (!result.goldenRound) {
        showRoundTip.value = true;
      }
    }
    if (msg.constructor === MESSAGETYPES.FinalShoot) {
      currentShooterId.value = 0;
      currentBluePoint.value = bluePoints.value;
      currentRedPoint.value = redPoints.value;
      if (!isFinalShoot.value) {
        isFinalShoot.value = true;
        showRoundTip.value = true;
        tips.value = "准备开始决金箭";
      }
    }
    if (msg.constructor === MESSAGETYPES.MatchOver) {
      if (msg.endStatus.noSaved) {
        currentBluePoint.value = 0;
        currentRedPoint.value = 0;
        showRoundTip.value = true;
        isFinalShoot.value = false;
        setTimeout(() => {
          uni.navigateBack();
        }, 3000);
      } else {
        isEnded.value = true;
        uni.setStorageSync("last-battle", msg.endStatus);
        setTimeout(() => {
          uni.redirectTo({
            url: "/pages/battle-result",
          });
        }, 1000);
      }
    }
    if (msg.constructor === MESSAGETYPES.BackToGame) {
      uni.$emit("update-header-loading", false);
      if (msg.battleInfo) recoverData(msg.battleInfo);
    }
  });
}

onLoad(async (options) => {
  if (options.battleId) {
    battleId.value = options.battleId;
    redTeam.value = uni.getStorageSync("red-team");
    blueTeam.value = uni.getStorageSync("blue-team");
    const battleInfo = uni.getStorageSync("current-battle");
    if (battleInfo) {
      await nextTick(() => {
        recoverData(battleInfo);
      });
      setTimeout(getCurrentGameAPI, 2000);
    }
  }
  uni.enableAlertBeforeUnload({
    message: "离开比赛可能导致比赛失败，是否继续？",
    success: (res) => {
      console.log("已启用离开提示");
    },
  });
});
onMounted(async () => {
  uni.setKeepScreenOn({
    keepScreenOn: true,
  });
  uni.$on("socket-inbox", onReceiveMessage);
  await laserCloseAPI();
});
onBeforeUnmount(() => {
  uni.setKeepScreenOn({
    keepScreenOn: false,
  });
  uni.$off("socket-inbox", onReceiveMessage);
  audioManager.stopAll();
});
const refreshTimer = ref(null);
onShow(async () => {
  if (battleId.value) {
    if (!isEnded.value && (await isGameEnded(battleId.value))) return;
    getCurrentGameAPI();
    const refreshData = () => {
      const lastAwakeTime = uni.getStorageSync("last-awake-time");
      if (lastAwakeTime) {
        getCurrentGameAPI();
      } else {
        clearInterval(refreshTimer.value);
      }
    };
    refreshTimer.value = setInterval(refreshData, 2000);
  }
});
onHide(() => {
  if (refreshTimer.value) clearInterval(refreshTimer.value);
  uni.setStorageSync("last-awake-time", Date.now());
});
</script>

<template>
  <Container :bgType="start ? 3 : 1">
    <view class="container">
      <BattleHeader v-if="!start" :redTeam="redTeam" :blueTeam="blueTeam" />
      <TestDistance v-if="!start" :guide="false" :isBattle="true" />
      <view v-if="start" class="players-row">
        <TeamAvatars
          :team="blueTeam"
          :isRed="false"
          :currentShooterId="currentShooterId"
        />
        <ShootProgress2
          :tips="tips"
          :currentRound="
            goldenRound > 0 ? 'gold' + goldenRound : 'round' + currentRound
          "
        />
        <TeamAvatars :team="redTeam" :currentShooterId="currentShooterId" />
      </view>
      <BowTarget
        v-if="start"
        mode="team"
        :scores="scores"
        :blueScores="blueScores"
      />
      <BattleFooter
        v-if="start"
        :roundResults="roundResults"
        :redPoints="redPoints"
        :bluePoints="bluePoints"
        :goldenRound="goldenRound"
      />
      <ScreenHint
        :show="showRoundTip"
        :onClose="() => (showRoundTip = false)"
        :mode="isFinalShoot ? 'tall' : 'normal'"
      >
        <RoundEndTip
          v-if="showRoundTip"
          :isFinal="isFinalShoot"
          :round="currentRound"
          :bluePoint="currentBluePoint"
          :redPoint="currentRedPoint"
          :roundData="
            roundResults[currentRound - 1] ? roundResults[currentRound - 1] : []
          "
          :onAutoClose="() => (showRoundTip = false)"
        />
      </ScreenHint>
    </view>
  </Container>
</template>

<style scoped>
.container {
  width: 100%;
  height: 100%;
}
.players-row {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -2%;
  margin-bottom: 6%;
}
</style>