pref: 进度条倒计时
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
<script setup>
|
||||
import { ref, onMounted, onBeforeUnmount, nextTick } from "vue";
|
||||
import { onLoad, onShow, onHide } from "@dcloudio/uni-app";
|
||||
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";
|
||||
@@ -11,13 +11,14 @@ 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 {laserCloseAPI, getBattleAPI} from "@/apis";
|
||||
import {MESSAGETYPESV2} from "@/constants";
|
||||
import audioManager from "@/audioManager";
|
||||
import useStore from "@/store";
|
||||
import { storeToRefs } from "pinia";
|
||||
import {storeToRefs} from "pinia";
|
||||
|
||||
const store = useStore();
|
||||
const { user } = storeToRefs(store);
|
||||
const {user} = storeToRefs(store);
|
||||
const start = ref(null);
|
||||
const tips = ref("");
|
||||
const battleId = ref("");
|
||||
@@ -36,15 +37,16 @@ const bluePoints = ref(0);
|
||||
const showRoundTip = ref(false);
|
||||
const isFinalShoot = ref(false);
|
||||
const matchStatus = ref(undefined);
|
||||
const updateRemainSecond = ref(0);
|
||||
|
||||
const recoverData = (battleInfo, { force = false, arrowOnly = false } = {}) => {
|
||||
const recoverData = (battleInfo, {force = false, arrowOnly = false} = {}) => {
|
||||
try {
|
||||
battleId.value = battleInfo.matchId;
|
||||
|
||||
|
||||
// 优先使用接口返回的队伍数据，如果没有则尝试从缓存读取（应对匹配刚完成接口未就绪的情况）
|
||||
const t1 = battleInfo.teams?.[1] || {};
|
||||
const t2 = battleInfo.teams?.[2] || {};
|
||||
|
||||
|
||||
if (t1.players) blueTeam.value = [...t1.players];
|
||||
else {
|
||||
const cached = uni.getStorageSync("blue-team");
|
||||
@@ -56,7 +58,7 @@ const recoverData = (battleInfo, { force = false, arrowOnly = false } = {}) => {
|
||||
const cached = uni.getStorageSync("red-team");
|
||||
if (cached && cached.length) redTeam.value = cached;
|
||||
}
|
||||
|
||||
|
||||
start.value = battleInfo.status !== 0;
|
||||
|
||||
if (battleInfo.status === 0) {
|
||||
@@ -71,28 +73,27 @@ const recoverData = (battleInfo, { force = false, arrowOnly = false } = {}) => {
|
||||
if (!arrowOnly) {
|
||||
currentShooterId.value = battleInfo.current.playerId;
|
||||
const redPlayer = battleInfo.teams[2].players.find(
|
||||
(item) => item.id === battleInfo.current.playerId
|
||||
(item) => item.id === battleInfo.current.playerId
|
||||
);
|
||||
let nextTips = redPlayer ? "请红队射箭" : "请蓝队射箭";
|
||||
if (force) nextTips += "重回";
|
||||
if (
|
||||
battleInfo.current.playerId === user.value.id &&
|
||||
redTeam.value.length > 1
|
||||
battleInfo.current.playerId === user.value.id &&
|
||||
redTeam.value.length > 1
|
||||
) {
|
||||
nextTips += "你";
|
||||
}
|
||||
tips.value = nextTips;
|
||||
uni.$emit("update-tips", nextTips);
|
||||
uni.$emit("update-remain", {reset: true, value: 15, team: redTeam?'red':'blue'});
|
||||
if (force) {
|
||||
const remain = (Date.now() - battleInfo.current.startTime) / 1000;
|
||||
console.log(`当前轮已进行${remain}秒`);
|
||||
if (remain > 0 && remain < 15) {
|
||||
setTimeout(() => {
|
||||
uni.$emit("update-remain", 15 - remain - 0.2);
|
||||
}, 200);
|
||||
updateRemainSecond.value = 15 - remain - 0.2
|
||||
}
|
||||
} else {
|
||||
uni.$emit("update-remain", battleInfo.readyTime);
|
||||
updateRemainSecond.value = battleInfo.readyTime
|
||||
}
|
||||
} else {
|
||||
currentRound.value = battleInfo.current.round || 1;
|
||||
@@ -111,15 +112,39 @@ const recoverData = (battleInfo, { force = false, arrowOnly = false } = {}) => {
|
||||
}
|
||||
};
|
||||
|
||||
function onBattleEnd(){
|
||||
showRoundTip.value = false
|
||||
console.log("onBattleEnd ended...")
|
||||
function onAudioEnded(s) {
|
||||
if (s.indexOf('请红方射箭') >= 0 || s.indexOf('请蓝方射箭') >= 0) {
|
||||
let team = s.indexOf('请红方射箭') >= 0 ? 'red' : 'blue';
|
||||
uni.$emit("update-remain", {stop: false, value: updateRemainSecond.value, team: team});
|
||||
}
|
||||
if (s.indexOf("比赛结束") >= 0) {
|
||||
onBattleEnd()
|
||||
}
|
||||
}
|
||||
|
||||
function onBattleEnd() {
|
||||
if (matchStatus.value === 2) {
|
||||
uni.redirectTo({
|
||||
url: `/pages/battle-result?battleId=${battleId.value}`,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function onNewRound(msg) {
|
||||
showRoundTip.value = true;
|
||||
isFinalShoot.value = msg.current.goldRound;
|
||||
const latestRound = msg.rounds[currentRound.value - 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) {
|
||||
@@ -127,21 +152,13 @@ async function onReceiveMessage(msg) {
|
||||
} 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 });
|
||||
recoverData(msg, {arrowOnly: true});
|
||||
} else if (msg.type === MESSAGETYPESV2.NewRound) {
|
||||
showRoundTip.value = true;
|
||||
isFinalShoot.value = msg.current.goldRound;
|
||||
const latestRound = msg.rounds[currentRound.value - 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;
|
||||
}
|
||||
}
|
||||
setTimeout(() => {
|
||||
onNewRound(msg)
|
||||
}, 800)
|
||||
} else if (msg.type === MESSAGETYPESV2.BattleEnd) {
|
||||
matchStatus.value = msg.status;
|
||||
if (msg.status === 4) {
|
||||
@@ -169,13 +186,14 @@ onMounted(async () => {
|
||||
keepScreenOn: true,
|
||||
});
|
||||
uni.$on("socket-inbox", onReceiveMessage);
|
||||
uni.$on("audioEnded", onAudioEnded);
|
||||
await laserCloseAPI();
|
||||
});
|
||||
onBeforeUnmount(() => {
|
||||
uni.setKeepScreenOn({
|
||||
keepScreenOn: false,
|
||||
});
|
||||
uni.$off("socket-inbox", onReceiveMessage);
|
||||
uni.$off("audioEnded", onAudioEnded);
|
||||
audioManager.stopAll();
|
||||
});
|
||||
const refreshTimer = ref(null);
|
||||
@@ -192,7 +210,7 @@ onShow(async () => {
|
||||
delta: 2,
|
||||
});
|
||||
} else {
|
||||
recoverData(result, { force: true });
|
||||
recoverData(result, {force: true});
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -202,53 +220,53 @@ onShow(async () => {
|
||||
<Container :bgType="start ? 3 : 1">
|
||||
<view class="container">
|
||||
<BattleHeader
|
||||
v-if="start === false"
|
||||
:redTeam="redTeam"
|
||||
:blueTeam="blueTeam"
|
||||
v-if="start === false"
|
||||
:redTeam="redTeam"
|
||||
:blueTeam="blueTeam"
|
||||
/>
|
||||
<TestDistance v-if="start === false" :guide="false" :isBattle="true" />
|
||||
<TestDistance v-if="start === false" :guide="false" :isBattle="true"/>
|
||||
<view v-if="start" class="players-row">
|
||||
<TeamAvatars
|
||||
:team="blueTeam"
|
||||
:isRed="false"
|
||||
:currentShooterId="currentShooterId"
|
||||
:team="blueTeam"
|
||||
:isRed="false"
|
||||
:currentShooterId="currentShooterId"
|
||||
/>
|
||||
<ShootProgress2
|
||||
:tips="tips"
|
||||
:currentRound="
|
||||
:tips="tips"
|
||||
:currentRound="
|
||||
goldenRound > 0 ? 'gold' + goldenRound : 'round' + currentRound
|
||||
"
|
||||
/>
|
||||
<TeamAvatars :team="redTeam" :currentShooterId="currentShooterId" />
|
||||
<TeamAvatars :team="redTeam" :currentShooterId="currentShooterId"/>
|
||||
</view>
|
||||
<BowTarget
|
||||
v-if="start"
|
||||
mode="team"
|
||||
:scores="scores"
|
||||
:blueScores="blueScores"
|
||||
v-if="start"
|
||||
mode="team"
|
||||
:scores="scores"
|
||||
:blueScores="blueScores"
|
||||
/>
|
||||
<BattleFooter
|
||||
v-if="start"
|
||||
:roundResults="roundResults"
|
||||
:redPoints="redPoints"
|
||||
:bluePoints="bluePoints"
|
||||
:goldenRound="goldenRound"
|
||||
v-if="start"
|
||||
:roundResults="roundResults"
|
||||
:redPoints="redPoints"
|
||||
:bluePoints="bluePoints"
|
||||
:goldenRound="goldenRound"
|
||||
/>
|
||||
<ScreenHint
|
||||
:show="showRoundTip"
|
||||
:onClose="() => (showRoundTip = false)"
|
||||
:mode="isFinalShoot ? 'tall' : 'normal'"
|
||||
:show="showRoundTip"
|
||||
:onClose="() => (showRoundTip = false)"
|
||||
:mode="isFinalShoot ? 'tall' : 'normal'"
|
||||
>
|
||||
<RoundEndTip
|
||||
v-if="showRoundTip"
|
||||
:isFinal="isFinalShoot"
|
||||
:round="currentRound"
|
||||
:bluePoint="currentBluePoint"
|
||||
:redPoint="currentRedPoint"
|
||||
:roundData="
|
||||
v-if="showRoundTip"
|
||||
:isFinal="isFinalShoot"
|
||||
:round="currentRound"
|
||||
:bluePoint="currentBluePoint"
|
||||
:redPoint="currentRedPoint"
|
||||
:roundData="
|
||||
roundResults[currentRound - 1] ? roundResults[currentRound - 1] : []
|
||||
"
|
||||
:onAutoClose="onBattleEnd"
|
||||
:onAutoClose="()=>{ showRoundTip = false}"
|
||||
/>
|
||||
</ScreenHint>
|
||||
</view>
|
||||
@@ -260,6 +278,7 @@ onShow(async () => {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.players-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
Reference in New Issue
Block a user