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

<script setup>
import { ref, watch, onMounted, onUnmounted } from "vue";
import { onLoad, onShow, onHide } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import BowTarget from "@/components/BowTarget.vue";
import ShootProgress from "@/components/ShootProgress.vue";
import BattleHeader from "@/components/BattleHeader.vue";
import Timer from "@/components/Timer.vue";
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 TestDistance from "@/components/TestDistance.vue";
import { getCurrentGameAPI } from "@/apis";
import { isGameEnded } from "@/util";
import { MESSAGETYPES } from "@/constants";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user } = storeToRefs(store);
const title = ref("大乱斗");
const start = ref(false);
const startCount = ref(true);
const battleId = ref("");
const currentRound = ref(1);
const power = ref(0);
const scores = ref([]);
const tips = ref("即将开始...");
const players = ref([]);
const playersSorted = ref([]);
const playersScores = ref({});
const halfTimeTip = ref(false);
const isEnded = ref(false);

watch(
  () => [players.value, playersScores.value],
  ([n_players, n_scores]) => {
    if (n_players.length) {
      playersSorted.value = Object.keys(n_scores)
        .sort((a, b) => n_scores[b].length - n_scores[a].length)
        .map((pid) => n_players.find((p) => p.id == pid));
    }
  },
  {
    deep: true, // 添加深度监听
    immediate: true,
  }
);

function recoverData(battleInfo) {
  uni.removeStorageSync("last-awake-time");
  battleId.value = battleInfo.id;
  players.value = [...battleInfo.blueTeam, ...battleInfo.redTeam];
  players.value.forEach((p) => {
    playersScores.value[p.id] = [...p.arrows];
    if (p.id === user.value.id) scores.value = [...p.arrows];
  });
  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) {
    const elapsedTime = (Date.now() - Date.parse(battleInfo.createdAt)) / 1000;
    console.log("elapsedTime:", elapsedTime);
    startCount.value = true;
    // 这里的开始时间不是游戏开始时间，而是上半场或者下半场或者中场的开始时间，还要根据状态来判断
    tips.value = battleInfo.halfGame
      ? "下半场：请再射6箭"
      : "上半场：请先射6箭";
    setTimeout(() => {
      uni.$emit("update-ramain", 90 - remain);
    }, 200);
  } else if (battleInfo.status === 9) {
    startCount.value = false;
    tips.value = "准备下半场";
    setTimeout(() => {
      uni.$emit("update-ramain", 0);
    }, 200);
  }
}

onLoad(async (options) => {
  if (options.gameMode == 1) title.value = "好友约战 - 大乱斗";
  if (options.gameMode == 2) title.value = "排位赛 - 大乱斗";
  if (options.battleId) {
    battleId.value = options.battleId;
    const players = uni.getStorageSync("melee-players");
    if (players) {
      players.value = players;
      players.value.forEach((p) => {
        playersScores.value[p.id] = [];
      });
    }
    const battleInfo = uni.getStorageSync("current-battle");
    if (battleInfo) {
      recoverData(battleInfo);
      setTimeout(getCurrentGameAPI, 2000);
    }
  }
});

async function onReceiveMessage(messages = []) {
  messages.forEach((msg) => {
    if (msg.id !== battleId.value) return;
    if (msg.constructor === MESSAGETYPES.MeleeAllReady) {
      start.value = true;
      startCount.value = true;
      tips.value = scores.value.length
        ? "下半场：请再射6箭"
        : "上半场：请先射6箭";
      halfTimeTip.value = false;
    }
    if (msg.constructor === MESSAGETYPES.ShootResult) {
      if (!start.value) getCurrentGameAPI();
      if (msg.userId === user.value.id) {
        scores.value.push({ ...msg.target });
        power.value = msg.target.battery;
      }
      playersScores.value[msg.userId].push({ ...msg.target });
    }
    if (msg.constructor === MESSAGETYPES.HalfTimeOver) {
      uni.$emit("update-ramain", 0);
      [...msg.groupUserStatus.redTeam, ...msg.groupUserStatus.blueTeam].forEach(
        (player) => {
          playersScores.value[player.id] = [...player.arrows];
          if (player.id === user.value.id) scores.value = [...player.arrows];
        }
      );
      startCount.value = false;
      halfTimeTip.value = true;
      tips.value = "准备下半场";
    }
    if (msg.constructor === MESSAGETYPES.MatchOver) {
      isEnded.value = true;
      uni.setStorageSync("last-battle", msg.endStatus);
      setTimeout(() => {
        uni.redirectTo({
          url: "/pages/battle-result",
        });
      }, 3000);
    }
    if (msg.constructor === MESSAGETYPES.BackToGame) {
      uni.$emit("update-header-loading", false);
      if (msg.battleInfo) recoverData(msg.battleInfo);
    }
  });
}
const onBack = () => {
  uni.$showHint(2);
};
onMounted(() => {
  uni.setKeepScreenOn({
    keepScreenOn: true,
  });
  uni.$on("socket-inbox", onReceiveMessage);
});
onUnmounted(() => {
  uni.setKeepScreenOn({
    keepScreenOn: false,
  });
  uni.$off("socket-inbox", onReceiveMessage);
});
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 :title="title" :bgType="1" :onBack="onBack">
    <view class="container">
      <BattleHeader v-if="!start" :players="players" />
      <TestDistance v-if="!start" :guide="false" />
      <ShootProgress
        :show="start"
        :start="start && startCount"
        :tips="tips"
        :total="90"
        :melee="true"
        :battleId="battleId"
      />
      <view v-if="start" class="user-row">
        <Avatar :src="user.avatar" :size="35" />
        <BowPower :power="power" />
      </view>
      <BowTarget
        v-if="start"
        :currentRound="scores.length"
        :totalRound="12"
        :scores="scores"
        :stop="!startCount"
      />
      <view :style="{ paddingBottom: '20px' }">
        <PlayerScore
          v-if="start"
          v-for="(player, index) in playersSorted"
          :key="index"
          :name="player.name"
          :avatar="player.avatar"
          :scores="playersScores[player.id] || []"
        />
      </view>
      <Timer v-if="!start" />
      <ScreenHint
        :show="halfTimeTip"
        mode="small"
        :onClose="() => (halfTimeTip = false)"
      >
        <view class="half-time-tip">
          <text>上半场结束，休息一下吧:）</text>
          <text>20秒后开始下半场</text>
        </view>
      </ScreenHint>
    </view>
  </Container>
</template>

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