322 lines
11 KiB
Vue
322 lines
11 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 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 {laserCloseAPI, getBattleAPI} from "@/apis";
|
||
import {MESSAGETYPESV2} from "@/constants";
|
||
import audioManager from "@/audioManager";
|
||
import useStore from "@/store";
|
||
import {storeToRefs} from "pinia";
|
||
|
||
const store = useStore();
|
||
const {user} = storeToRefs(store);
|
||
const start = ref(null);
|
||
const tips = ref("");
|
||
const battleId = ref("");
|
||
const currentRound = ref(0);
|
||
/** 专用于 RoundEndTip 展示的轮次，与进度条的 currentRound 解耦，避免 ToSomeoneShoot 提前更新 currentRound 导致 Tip 显示错误轮次 */
|
||
const roundTipRound = ref(0);
|
||
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 matchStatus = ref(undefined);
|
||
const updateRemainSecond = ref(0);
|
||
/** 对战来源类型（1=好友约战，2=匹配对战），用于结算页分流 */
|
||
const battleWay = ref(0);
|
||
|
||
const recoverData = (battleInfo, {force = false, arrowOnly = false} = {}) => {
|
||
try {
|
||
battleId.value = battleInfo.matchId;
|
||
// 存储对战来源，供结算跳转分流使用
|
||
if (battleInfo.way !== undefined) battleWay.value = battleInfo.way;
|
||
|
||
// 优先使用接口返回的队伍数据，如果没有则尝试从缓存读取（应对匹配刚完成接口未就绪的情况）
|
||
const t1 = battleInfo.teams?.[1] || {};
|
||
const t2 = battleInfo.teams?.[2] || {};
|
||
|
||
if (t1.players) blueTeam.value = [...t1.players];
|
||
else {
|
||
const cached = uni.getStorageSync("blue-team");
|
||
if (cached && cached.length) blueTeam.value = cached;
|
||
}
|
||
|
||
if (t2.players) redTeam.value = [...t2.players];
|
||
else {
|
||
const cached = uni.getStorageSync("red-team");
|
||
if (cached && cached.length) redTeam.value = cached;
|
||
}
|
||
|
||
start.value = battleInfo.status !== 0;
|
||
|
||
if (battleInfo.status === 0) {
|
||
const readyRemain = (Date.now() - (battleInfo.createTime || Date.now())) / 1000;
|
||
if (readyRemain > 0 && readyRemain < 15) {
|
||
setTimeout(() => {
|
||
uni.$emit("update-timer", 15 - readyRemain - 0.2);
|
||
}, 200);
|
||
}
|
||
return;
|
||
}
|
||
if (!arrowOnly) {
|
||
// 在 ToSomeoneShoot 时同步更新当前轮次，使进度条轮次图片及时切换
|
||
currentRound.value = battleInfo.current.round || 1;
|
||
currentShooterId.value = battleInfo.current.playerId;
|
||
const redPlayer = battleInfo.teams[2].players.find(
|
||
(item) => item.id === battleInfo.current.playerId
|
||
);
|
||
let nextTips = redPlayer ? "请红队射箭" : "请蓝队射箭";
|
||
if (force) nextTips += "重回";
|
||
if (
|
||
battleInfo.current.playerId === user.value.id &&
|
||
redTeam.value.length > 1
|
||
) {
|
||
nextTips += "你";
|
||
}
|
||
// 同队连续出手时 tips 值不变，HeaderProgress watch 不触发音频
|
||
// 需在赋值前比较旧值，手动播放音频确保始终触发 onAudioEnded 启动计时器
|
||
// 注意：使用 interrupt=false 避免打断上一支箭的环数播报音频
|
||
if (tips.value === nextTips && !nextTips.includes("重回")) {
|
||
const audioKey = redPlayer ? "请红方射箭" : "请蓝方射箭";
|
||
audioManager.play(audioKey, false);
|
||
}
|
||
tips.value = nextTips;
|
||
uni.$emit("update-tips", nextTips);
|
||
// redPlayer 已在上方 find() 确认：不为 null 则当前射手在红队
|
||
uni.$emit("update-remain", {reset: true, value: 15, team: redPlayer?'red':'blue'});
|
||
if (force) {
|
||
const remain = (Date.now() - battleInfo.current.startTime) / 1000;
|
||
console.log(`当前轮已进行${remain}秒`);
|
||
if (remain > 0 && remain < 15) {
|
||
updateRemainSecond.value = 15 - remain - 0.2
|
||
}
|
||
} else {
|
||
updateRemainSecond.value = battleInfo.readyTime
|
||
}
|
||
} else {
|
||
currentRound.value = battleInfo.current.round || 1;
|
||
const latestRound = battleInfo.rounds[currentRound.value - 1];
|
||
if (latestRound) {
|
||
blueScores.value = latestRound.shoots[1];
|
||
scores.value = latestRound.shoots[2];
|
||
}
|
||
}
|
||
roundResults.value = battleInfo.rounds || [];
|
||
isFinalShoot.value = battleInfo.current.goldRound;
|
||
bluePoints.value = battleInfo.teams[1].score;
|
||
redPoints.value = battleInfo.teams[2].score;
|
||
} catch (err) {
|
||
console.log(err);
|
||
}
|
||
};
|
||
|
||
function onAudioEnded(s) {
|
||
// "请红方射箭"/"请蓝方射箭"：队友或对手轮次；"轮到你了"：用户本人轮次（HeaderProgress特殊分支）
|
||
// 三者音频结束后均需启动倒计时进度条
|
||
if (s.indexOf('请红方射箭') >= 0 || s.indexOf('请蓝方射箭') >= 0 || s.indexOf('轮到你了') >= 0) {
|
||
let team;
|
||
if (s.indexOf('请红方射箭') >= 0) team = 'red';
|
||
else if (s.indexOf('请蓝方射箭') >= 0) team = 'blue';
|
||
else team = tips.value.includes('红队') ? 'red' : 'blue'; // 轮到你了：从当前tips判断用户所在队伍
|
||
uni.$emit("update-remain", {stop: false, value: updateRemainSecond.value, team: team});
|
||
}
|
||
if (s.indexOf("比赛结束") >= 0) {
|
||
console.log("比赛结束");
|
||
onBattleEnd()
|
||
}
|
||
}
|
||
|
||
function onBattleEnd() {
|
||
if (matchStatus.value === 2) {
|
||
// 全部跳转到新结算页
|
||
uni.redirectTo({
|
||
url: `/pages/friend-battle-result?battleId=${battleId.value}`,
|
||
});
|
||
}
|
||
}
|
||
|
||
/**
|
||
* @param {object} msg - NewRound 消息
|
||
* @param {number} prevRound - 在 NewRound 消息到达时即时捕获的旧轮次，用于 Tip 展示，避免异步延迟内 currentRound 已被更新
|
||
*/
|
||
function onNewRound(msg, prevRound) {
|
||
showRoundTip.value = true;
|
||
isFinalShoot.value = msg.current.goldRound;
|
||
// 决金箭轮每人只射一箭，重置箭数显示为 (0/1)
|
||
if (msg.current.goldRound) {
|
||
uni.$emit("update-shot", { currentShot: 0, totalShot: 1 });
|
||
}
|
||
// 用传入的 prevRound（捕获时刻的旧轮次）展示结算 Tip，与进度条 currentRound 解耦
|
||
roundTipRound.value = prevRound;
|
||
const latestRound = msg.rounds[prevRound - 1];
|
||
if (latestRound) {
|
||
if (isFinalShoot.value) {
|
||
currentBluePoint.value = msg.teams[1].score;
|
||
currentRedPoint.value = msg.teams[2].score;
|
||
} else {
|
||
currentBluePoint.value = latestRound.scores[1].score;
|
||
currentRedPoint.value = latestRound.scores[2].score;
|
||
}
|
||
}
|
||
}
|
||
|
||
async function onReceiveMessage(msg) {
|
||
if (Array.isArray(msg)) return;
|
||
if (msg.type === MESSAGETYPESV2.BattleStart) {
|
||
start.value = true;
|
||
} else if (msg.type === MESSAGETYPESV2.ToSomeoneShoot) {
|
||
recoverData(msg);
|
||
} else if (msg.type === MESSAGETYPESV2.ShootResult) {
|
||
uni.$emit("update-remain", {stop: true})
|
||
showRoundTip.value = false;
|
||
recoverData(msg, {arrowOnly: true});
|
||
} else if (msg.type === MESSAGETYPESV2.NewRound) {
|
||
// 在进入延迟前先捕获当前轮次，供 onNewRound 使用，防止 800ms 内 ToSomeoneShoot 提前更新 currentRound 造成 Tip 展示错轮
|
||
const prevRound = currentRound.value;
|
||
setTimeout(() => {
|
||
onNewRound(msg, prevRound)
|
||
}, 800)
|
||
} else if (msg.type === MESSAGETYPESV2.BattleEnd) {
|
||
matchStatus.value = msg.status;
|
||
if (msg.status === 4) {
|
||
showRoundTip.value = true;
|
||
currentBluePoint.value = 0;
|
||
currentRedPoint.value = 0;
|
||
setTimeout(() => {
|
||
uni.navigateBack();
|
||
}, 2000);
|
||
}
|
||
}
|
||
}
|
||
|
||
onLoad(async (options) => {
|
||
if (options.battleId) battleId.value = options.battleId;
|
||
// uni.enableAlertBeforeUnload({
|
||
// message: "离开比赛可能导致比赛失败，是否继续？",
|
||
// success: (res) => {
|
||
// console.log("已启用离开提示");
|
||
// },
|
||
// });
|
||
});
|
||
onMounted(async () => {
|
||
uni.setKeepScreenOn({
|
||
keepScreenOn: true,
|
||
});
|
||
uni.$on("socket-inbox", onReceiveMessage);
|
||
uni.$on("audioEnded", onAudioEnded);
|
||
await laserCloseAPI();
|
||
});
|
||
onBeforeUnmount(() => {
|
||
uni.setKeepScreenOn({
|
||
keepScreenOn: false,
|
||
});
|
||
uni.$off("audioEnded", onAudioEnded);
|
||
audioManager.stopAll();
|
||
});
|
||
const refreshTimer = ref(null);
|
||
onShow(async () => {
|
||
if (battleId.value) {
|
||
const result = await getBattleAPI(battleId.value);
|
||
if (!result) return;
|
||
if (result.status === 2) {
|
||
// 比赛已结束（如切后台再回来）：跳新结算页
|
||
uni.redirectTo({
|
||
url: `/pages/friend-battle-result?battleId=${result.matchId}`,
|
||
});
|
||
} else {
|
||
recoverData(result, {force: true});
|
||
}
|
||
}
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<Container :bgType="start ? 3 : 1">
|
||
<view class="container">
|
||
<BattleHeader
|
||
v-if="start === false"
|
||
:redTeam="redTeam"
|
||
:blueTeam="blueTeam"
|
||
/>
|
||
<TestDistance v-if="start === false" :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="roundTipRound"
|
||
:bluePoint="currentBluePoint"
|
||
:redPoint="currentRedPoint"
|
||
:roundData="
|
||
roundResults[roundTipRound - 1] ? roundResults[roundTipRound - 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>
|