269 lines
8.4 KiB
Vue
269 lines
8.4 KiB
Vue
<script setup>
|
|
import { ref, onMounted, onUnmounted } from "vue";
|
|
import { onLoad } from "@dcloudio/uni-app";
|
|
import Container from "@/components/Container.vue";
|
|
import BattleHeader from "@/components/BattleHeader.vue";
|
|
import Guide from "@/components/Guide.vue";
|
|
import BowTarget from "@/components/BowTarget.vue";
|
|
import ShootProgress from "@/components/ShootProgress.vue";
|
|
import PlayersRow from "@/components/PlayersRow.vue";
|
|
import Timer from "@/components/Timer.vue";
|
|
import BattleFooter from "@/components/BattleFooter.vue";
|
|
import ScreenHint from "@/components/ScreenHint.vue";
|
|
import SButton from "@/components/SButton.vue";
|
|
import Matching from "@/components/Matching.vue";
|
|
import SModal from "@/components/SModal.vue";
|
|
import RoundEndTip from "@/components/RoundEndTip.vue";
|
|
import TestDistance from "@/components/TestDistance.vue";
|
|
import { matchGameAPI, readyGameAPI } from "@/apis";
|
|
import { MESSAGETYPES, roundsName, getMessageTypeName } from "@/constants";
|
|
import useStore from "@/store";
|
|
import { storeToRefs } from "pinia";
|
|
const store = useStore();
|
|
const { user } = storeToRefs(store);
|
|
const gameType = ref(0);
|
|
const teamSize = ref(0);
|
|
const start = ref(false);
|
|
const battleId = ref("");
|
|
const currentRound = ref(1);
|
|
const currentRedPoint = ref(0);
|
|
const currentBluePoint = ref(0);
|
|
const totalRounds = ref(0);
|
|
const power = ref(0);
|
|
const scores = ref([]);
|
|
const blueScores = ref([]);
|
|
const redTeam = ref([]);
|
|
const blueTeam = ref([]);
|
|
const currentShooterId = ref(0);
|
|
const tips = ref("即将开始...");
|
|
const seq = ref(0);
|
|
const timerSeq = ref(0);
|
|
const roundResults = ref([]);
|
|
const redPoints = ref(0);
|
|
const bluePoints = ref(0);
|
|
const showRoundTip = ref(false);
|
|
const onComplete = ref(null);
|
|
const showModal = ref(false);
|
|
const isFinalShoot = ref(false);
|
|
|
|
onLoad(async (options) => {
|
|
if (options.battleId) {
|
|
const battleInfo = uni.getStorageSync(`battle-${options.battleId}`);
|
|
// console.log("----battleInfo", battleInfo);
|
|
if (battleInfo) {
|
|
battleId.value = battleInfo.id;
|
|
start.value = true;
|
|
redTeam.value = battleInfo.redTeam;
|
|
blueTeam.value = battleInfo.blueTeam;
|
|
currentRound.value = battleInfo.currentRound;
|
|
bluePoints.value = battleInfo.blueScore;
|
|
redPoints.value = battleInfo.redScore;
|
|
totalRounds.value = battleInfo.maxRound;
|
|
roundResults.value = battleInfo.roundResults;
|
|
if (battleInfo.firePlayerIndex) {
|
|
currentShooterId.value = battleInfo.firePlayerIndex;
|
|
if (redTeam.value[0].id === currentShooterId.value) {
|
|
tips.value = `请红队射箭-第${roundsName[currentRound.value]}轮`;
|
|
} else {
|
|
tips.value = `请蓝队射箭-第${roundsName[currentRound.value]}轮`;
|
|
}
|
|
}
|
|
const remain = Date.now() / 1000 - battleInfo.fireTime;
|
|
if (remain > 0 && remain <= 15) {
|
|
// 等渲染好再通知
|
|
setTimeout(() => {
|
|
uni.$emit("update-ramain", remain);
|
|
}, 300);
|
|
}
|
|
}
|
|
} else {
|
|
gameType.value = options.gameType;
|
|
teamSize.value = options.teamSize;
|
|
if (gameType.value && teamSize.value) {
|
|
await matchGameAPI(true, gameType.value, teamSize.value);
|
|
}
|
|
}
|
|
});
|
|
async function stopMatch() {
|
|
uni.navigateBack();
|
|
}
|
|
async function readyToGo() {
|
|
if (battleId.value) {
|
|
await readyGameAPI(battleId.value);
|
|
start.value = true;
|
|
timerSeq.value = 0;
|
|
}
|
|
}
|
|
|
|
async function onReceiveMessage(messages = []) {
|
|
messages.forEach((msg) => {
|
|
if (
|
|
!msg.id ||
|
|
(battleId.value && msg.id === battleId.value) ||
|
|
msg.constructor === MESSAGETYPES.WaitForAllReady
|
|
) {
|
|
console.log("收到消息：", getMessageTypeName(msg.constructor), msg);
|
|
}
|
|
if (msg.constructor === MESSAGETYPES.WaitForAllReady) {
|
|
// 这里会掉多次;
|
|
onComplete.value = () => {
|
|
timerSeq.value += 1;
|
|
battleId.value = msg.id;
|
|
redTeam.value = msg.groupUserStatus.redTeam;
|
|
blueTeam.value = msg.groupUserStatus.blueTeam;
|
|
};
|
|
}
|
|
if (msg.id !== battleId.value) return;
|
|
if (msg.constructor === MESSAGETYPES.AllReady) {
|
|
start.value = true;
|
|
timerSeq.value = 0;
|
|
scores.value = [];
|
|
totalRounds.value = msg.groupUserStatus.config.maxRounds;
|
|
}
|
|
if (msg.constructor === MESSAGETYPES.ToSomeoneShoot) {
|
|
if (currentShooterId.value !== msg.userId) {
|
|
scores.value = [];
|
|
blueScores.value = [];
|
|
seq.value += 1;
|
|
currentShooterId.value = msg.userId;
|
|
if (redTeam.value[0].id === currentShooterId.value) {
|
|
tips.value = "请红队射箭-";
|
|
} else {
|
|
tips.value = "请蓝队射箭-";
|
|
}
|
|
if (isFinalShoot.value) {
|
|
tips.value += "决金箭";
|
|
} else {
|
|
tips.value += `第${roundsName[currentRound.value]}轮`;
|
|
}
|
|
}
|
|
}
|
|
if (msg.constructor === MESSAGETYPES.ShootResult) {
|
|
const isRed = redTeam.value.find((item) => item.id === msg.userId);
|
|
if (isRed) scores.value = [msg.target];
|
|
else blueScores.value = [msg.target];
|
|
}
|
|
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;
|
|
roundResults.value = result.roundResults;
|
|
currentRound.value = result.currentRound + 1;
|
|
if (result.currentRound < 5) showRoundTip.value = true;
|
|
}
|
|
if (msg.constructor === MESSAGETYPES.FinalShoot) {
|
|
if (!isFinalShoot.value) {
|
|
isFinalShoot.value = true;
|
|
showRoundTip.value = true;
|
|
tips.value = "准备开始决金箭";
|
|
}
|
|
}
|
|
if (msg.constructor === MESSAGETYPES.MatchOver) {
|
|
uni.redirectTo({
|
|
url: `/pages/battle-result?battleId=${msg.id}`,
|
|
});
|
|
}
|
|
});
|
|
}
|
|
const onBack = () => {
|
|
if (battleId.value) {
|
|
showModal.value = true;
|
|
} else {
|
|
uni.navigateBack();
|
|
}
|
|
};
|
|
onMounted(() => {
|
|
uni.$on("socket-inbox", onReceiveMessage);
|
|
});
|
|
onUnmounted(() => {
|
|
uni.$off("socket-inbox", onReceiveMessage);
|
|
if (gameType.value && teamSize.value && !battleId.value) {
|
|
matchGameAPI(false, gameType.value, teamSize.value);
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<Container
|
|
:title="battleId ? '1V1排位赛' : '搜索对手...'"
|
|
:bgType="1"
|
|
:onBack="onBack"
|
|
>
|
|
<view class="container">
|
|
<block v-if="battleId">
|
|
<BattleHeader
|
|
v-if="!start && redTeam.length && blueTeam.length"
|
|
:redTeam="redTeam"
|
|
:blueTeam="blueTeam"
|
|
/>
|
|
<TestDistance v-if="!start" :guide="false" />
|
|
<ShootProgress v-if="start" :tips="tips" :seq="seq" :total="15" />
|
|
<PlayersRow
|
|
v-if="start"
|
|
:currentShooterId="currentShooterId"
|
|
:blueTeam="blueTeam"
|
|
:redTeam="redTeam"
|
|
/>
|
|
<BowTarget
|
|
v-if="start"
|
|
mode="team"
|
|
:showE="start && user.id === currentShooterId"
|
|
:power="start ? power : 0"
|
|
:currentRound="currentRound"
|
|
:totalRound="totalRounds"
|
|
:scores="scores"
|
|
:blueScores="blueScores"
|
|
/>
|
|
<BattleFooter
|
|
v-if="start"
|
|
:roundResults="roundResults"
|
|
:redPoints="redPoints"
|
|
:bluePoints="bluePoints"
|
|
/>
|
|
<Timer :seq="timerSeq" :callBack="readyToGo" />
|
|
<ScreenHint
|
|
:show="showRoundTip"
|
|
:onClose="() => (showRoundTip = false)"
|
|
:mode="isFinalShoot ? 'tall' : 'normal'"
|
|
>
|
|
<RoundEndTip
|
|
:isFinal="isFinalShoot"
|
|
:round="currentRound - 1"
|
|
:bluePoint="currentBluePoint"
|
|
:redPoint="currentRedPoint"
|
|
:roundData="roundResults[roundResults.length - 1]"
|
|
:onAutoClose="() => (showRoundTip = false)"
|
|
/>
|
|
</ScreenHint>
|
|
</block>
|
|
<block v-else>
|
|
<Matching
|
|
v-if="!battleId"
|
|
:stopMatch="stopMatch"
|
|
:onComplete="onComplete"
|
|
/>
|
|
</block>
|
|
<SModal :show="showModal" :onClose="() => (showModal = false)">
|
|
<view class="modal" :style="{ color: '#fff9' }"
|
|
>排位赛进行过程无法退出</view
|
|
>
|
|
</SModal>
|
|
</view>
|
|
<view :style="{ marginBottom: '20px' }">
|
|
<SButton v-if="battleId && !start" :onClick="readyToGo">准备完毕</SButton>
|
|
</view>
|
|
</Container>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.container {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
</style>
|