385 lines
12 KiB
Vue
385 lines
12 KiB
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 ShootProgress from "@/components/ShootProgress.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 totalRounds = 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);
|
||
|
||
const onBack = () => {
|
||
uni.$showHint(2);
|
||
};
|
||
|
||
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;
|
||
totalRounds.value = battleInfo.maxRound;
|
||
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;
|
||
}
|
||
});
|
||
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,
|
||
});
|
||
}
|
||
if (battleInfo.goldenRound) {
|
||
const { ShotCount, RedRecords, BlueRecords } = battleInfo.goldenRound;
|
||
currentRound.value += ShotCount;
|
||
goldenRound.value += ShotCount;
|
||
isFinalShoot.value = true;
|
||
for (let i = 0; i < ShotCount; i++) {
|
||
const roundData = {
|
||
redArrows:
|
||
RedRecords && RedRecords[i] ? RedRecords[i].Arrows || [] : [],
|
||
blueArrows:
|
||
BlueRecords && BlueRecords[i] ? BlueRecords[i].Arrows || [] : [],
|
||
gold: true,
|
||
};
|
||
roundResults.value.push(roundData);
|
||
}
|
||
} else {
|
||
[...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);
|
||
const blueArrows = roundResults.value[lastIndex].blueArrows;
|
||
blueScores.value = [...blueArrows].filter((item) => !!item.playerId);
|
||
}
|
||
// if (battleInfo.status !== 11) return;
|
||
if (battleInfo.firePlayerIndex) {
|
||
currentShooterId.value = battleInfo.firePlayerIndex;
|
||
const redPlayer = redTeam.value.find(
|
||
(item) => item.id === currentShooterId.value
|
||
);
|
||
tips.value = redPlayer ? "请红队射箭" : "请蓝队射箭";
|
||
uni.$emit("update-tips", tips.value);
|
||
}
|
||
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.AllReady) {
|
||
start.value = true;
|
||
totalRounds.value = msg.groupUserStatus.config.maxRounds;
|
||
}
|
||
if (msg.constructor === MESSAGETYPES.ToSomeoneShoot) {
|
||
if (currentShooterId.value !== msg.userId) {
|
||
currentShooterId.value = msg.userId;
|
||
const redPlayer = redTeam.value.find(
|
||
(item) => item.id === currentShooterId.value
|
||
);
|
||
if (msg.userId === user.value.id) audioManager.play("轮到你了");
|
||
const nextTips = redPlayer ? "请红队射箭" : "请蓝队射箭";
|
||
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 (currentShooterId.value !== msg.userId) return;
|
||
const isRed = redTeam.value.find((item) => item.id === msg.userId);
|
||
if (isRed) scores.value.push({ ...msg.target });
|
||
else blueScores.value.push({ ...msg.target });
|
||
// 下标从0开始的，要减1
|
||
if (!roundResults.value[currentRound.value - 1]) {
|
||
roundResults.value.push({
|
||
redArrows: [],
|
||
blueArrows: [],
|
||
gold: goldenRound.value > 0,
|
||
});
|
||
}
|
||
roundResults.value[currentRound.value - 1][
|
||
isRed ? "redArrows" : "blueArrows"
|
||
].push({ ...msg.target });
|
||
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;
|
||
currentRound.value = result.currentRound + 1;
|
||
if (!result.goldenRound) {
|
||
showRoundTip.value = true;
|
||
}
|
||
}
|
||
if (msg.constructor === MESSAGETYPES.FinalShoot) {
|
||
currentShooterId.value = 0;
|
||
currentRound.value = msg.groupUserStatus.currentRound + 1;
|
||
goldenRound.value += 1;
|
||
roundResults.value.push({
|
||
redArrows: [],
|
||
blueArrows: [],
|
||
});
|
||
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) {
|
||
currentRound.value += 1;
|
||
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);
|
||
}
|
||
}
|
||
});
|
||
onMounted(async () => {
|
||
uni.setKeepScreenOn({
|
||
keepScreenOn: true,
|
||
});
|
||
uni.$on("socket-inbox", onReceiveMessage);
|
||
await laserCloseAPI();
|
||
});
|
||
onBeforeUnmount(() => {
|
||
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 :bgType="start ? 3 : 1" :onBack="onBack">
|
||
<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 - 1"
|
||
:bluePoint="currentBluePoint"
|
||
:redPoint="currentRedPoint"
|
||
:roundData="
|
||
roundResults[currentRound - 2] ? roundResults[currentRound - 2] : []
|
||
"
|
||
: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-bottom: -7vw;
|
||
margin-top: -3vw;
|
||
}
|
||
</style>
|