1v1流程调试完成
This commit is contained in:
kron
@@ -1,5 +1,5 @@
|
||||
<script setup>
|
||||
import { ref, onUnmounted } from "vue";
|
||||
import { ref, onMounted, onUnmounted } from "vue";
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
import Container from "@/components/Container.vue";
|
||||
import PlayerSeats from "@/components/PlayerSeats.vue";
|
||||
@@ -30,33 +30,37 @@ onLoad(async (options) => {
|
||||
room.value = result;
|
||||
}
|
||||
});
|
||||
const startGame = async () => {
|
||||
const result = await startRoomAPI(room.value.number);
|
||||
console.log(result);
|
||||
step.value = 2;
|
||||
};
|
||||
|
||||
async function onReceiveMessage(content) {
|
||||
const messages = JSON.parse(content).data.updates || [];
|
||||
messages.forEach((msg) => {
|
||||
if (msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
|
||||
scores.value.push(msg.target);
|
||||
if (scores.value.length === total) {
|
||||
showScore.value = true;
|
||||
websocket.closeWebSocket();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
uni.$on("socket-inbox", onReceiveMessage);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
websocket.closeWebSocket();
|
||||
uni.$off("socket-inbox", onReceiveMessage);
|
||||
if (user.value.id === room.value.creator) {
|
||||
destroyRoomAPI(room.value.id);
|
||||
} else {
|
||||
exitRoomAPI(room.value.id);
|
||||
}
|
||||
});
|
||||
const startGame = async () => {
|
||||
const result = await startRoomAPI(room.value.number);
|
||||
console.log(result);
|
||||
step.value = 2;
|
||||
const token = uni.getStorageSync("token");
|
||||
|
||||
websocket.createWebSocket(token, (content) => {
|
||||
const messages = JSON.parse(content).data.updates || [];
|
||||
messages.forEach((msg) => {
|
||||
if (msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
|
||||
scores.value.push(msg.target);
|
||||
if (scores.value.length === total) {
|
||||
showScore.value = true;
|
||||
websocket.closeWebSocket();
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@@ -1,108 +1,162 @@
|
||||
<script setup>
|
||||
import AppBackground from "@/components/AppBackground.vue";
|
||||
import Header from "@/components/Header.vue";
|
||||
import { ref, onMounted, onUnmounted } from "vue";
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
import Container from "@/components/Container.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 PlayerScore from "@/components/PlayerScore.vue";
|
||||
const teams = [
|
||||
{ name: "选手1", avatar: "../static/avatar.png" },
|
||||
{ name: "选手1", avatar: "../static/avatar.png" },
|
||||
{ name: "选手1", avatar: "../static/avatar.png" },
|
||||
];
|
||||
import SButton from "@/components/SButton.vue";
|
||||
import { matchGameAPI, readyGameAPI } from "@/apis";
|
||||
import { MESSAGETYPES, roundsName } 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 matching = ref(false);
|
||||
const start = ref(false);
|
||||
const battleId = ref("");
|
||||
const currentRound = ref(1);
|
||||
const totalRounds = ref(0);
|
||||
const power = ref(0);
|
||||
const scores = ref([]);
|
||||
const redTeam = ref([]);
|
||||
const blueTeam = ref([]);
|
||||
const currentShooterId = ref(0);
|
||||
const tips = ref("即将开始...");
|
||||
const seq = ref(0);
|
||||
const timerSeq = ref(0);
|
||||
|
||||
onLoad((options) => {
|
||||
gameType.value = options.gameType;
|
||||
teamSize.value = options.teamSize;
|
||||
});
|
||||
async function startMatch() {
|
||||
if (gameType.value && teamSize.value) {
|
||||
await matchGameAPI(true, gameType.value, teamSize.value);
|
||||
startMatch.value = true;
|
||||
}
|
||||
}
|
||||
async function stopMatch() {
|
||||
if (gameType.value && teamSize.value) {
|
||||
await matchGameAPI(false, gameType.value, teamSize.value);
|
||||
startMatch.value = false;
|
||||
}
|
||||
}
|
||||
async function readyToGo() {
|
||||
if (battleId.value) {
|
||||
await readyGameAPI(battleId.value);
|
||||
start.value = true;
|
||||
timerSeq.value = 0;
|
||||
}
|
||||
}
|
||||
|
||||
async function onReceiveMessage(content) {
|
||||
const messages = JSON.parse(content).data.updates || [];
|
||||
messages.forEach((msg) => {
|
||||
if (
|
||||
!msg.id ||
|
||||
(battleId.value && msg.id === battleId.value) ||
|
||||
msg.constructor === MESSAGETYPES.WaitForAllReady
|
||||
) {
|
||||
console.log("收到消息：", msg);
|
||||
}
|
||||
if (msg.constructor === MESSAGETYPES.WaitForAllReady) {
|
||||
// 这里会掉多次;
|
||||
timerSeq.value += 1;
|
||||
battleId.value = msg.id;
|
||||
redTeam.value = msg.groupUserStatus.redTeam;
|
||||
blueTeam.value = msg.groupUserStatus.blueTeam;
|
||||
totalRounds.value = msg.groupUserStatus.config.maxRounds;
|
||||
}
|
||||
if (msg.id !== battleId.value) return;
|
||||
if (msg.constructor === MESSAGETYPES.AllReady) {
|
||||
start.value = true;
|
||||
timerSeq.value = 0;
|
||||
}
|
||||
if (msg.constructor === MESSAGETYPES.ToSomeoneShoot) {
|
||||
scores.value = [];
|
||||
seq.value += 1;
|
||||
currentShooterId.value = msg.userId;
|
||||
if (redTeam.value[0].id === currentShooterId.value) {
|
||||
tips.value = `请红队射箭-第${roundsName[currentRound.value]}轮`;
|
||||
} else {
|
||||
tips.value = `请蓝队射箭-第${roundsName[currentRound.value]}轮`;
|
||||
}
|
||||
}
|
||||
if (msg.constructor === MESSAGETYPES.ShootResult) {
|
||||
scores.value = [msg.target];
|
||||
}
|
||||
if (msg.constructor === MESSAGETYPES.CurrentRoundEnded) {
|
||||
scores.value = [];
|
||||
currentShooterId.value = 0;
|
||||
if (
|
||||
msg.preRoundResult.currentRound > 0 &&
|
||||
msg.preRoundResult.currentRound < totalRounds.value
|
||||
) {
|
||||
// 开始下一轮;
|
||||
currentRound.value = msg.preRoundResult.currentRound + 1;
|
||||
}
|
||||
}
|
||||
if (msg.constructor === MESSAGETYPES.MatchOver) {
|
||||
uni.redirectTo({
|
||||
url: "/pages/battle-result?battleId=" + msg.id,
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
onMounted(() => {
|
||||
uni.$on("socket-inbox", onReceiveMessage);
|
||||
});
|
||||
onUnmounted(() => {
|
||||
uni.$off("socket-inbox", onReceiveMessage);
|
||||
if (startMatch.value) {
|
||||
matchGameAPI(false, gameType.value, teamSize.value);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="container">
|
||||
<AppBackground />
|
||||
<Header title="排位赛" />
|
||||
<view>
|
||||
<ShootProgress tips="请红队射箭-第一轮" />
|
||||
<PlayersRow :blueTeam="teams" :redTeam="teams" />
|
||||
<BowTarget :power="45" currentRound="1" :totalRound="3" debug />
|
||||
<PlayerScore
|
||||
<Container title="排位赛" :bgType="1">
|
||||
<view class="container">
|
||||
<ShootProgress v-if="start" :tips="tips" :seq="seq" />
|
||||
<PlayersRow
|
||||
v-if="start"
|
||||
:currentShooterId="currentShooterId"
|
||||
:blueTeam="blueTeam"
|
||||
:redTeam="redTeam"
|
||||
/>
|
||||
<BowTarget
|
||||
v-if="start"
|
||||
:power="power"
|
||||
:currentRound="currentRound"
|
||||
:totalRound="totalRounds"
|
||||
:scores="scores"
|
||||
/>
|
||||
<!-- <PlayerScore
|
||||
name="某某选手"
|
||||
avatar="../static/avatar.png"
|
||||
:scores="[1, 4, 7, 4, 2, 2, 4, 4, 5, 8]"
|
||||
/>
|
||||
<PlayerScore
|
||||
name="下个选手"
|
||||
avatar="../static/avatar.png"
|
||||
:scores="[1, 4, 7, 4, 2, 2, 4, 4, 5, 8]"
|
||||
/>
|
||||
/> -->
|
||||
<Timer :seq="timerSeq" :callBack="readyToGo" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="footer">
|
||||
<SButton v-if="!battleId" :onClick="matching ? stopMatch : startMatch">{{
|
||||
matching ? "取消匹配" : "开始匹配"
|
||||
}}</SButton>
|
||||
<SButton v-if="battleId && !start" :onClick="readyToGo">准备完毕</SButton>
|
||||
</view>
|
||||
</Container>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
width: 100vw;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
.players {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
column-gap: 15px;
|
||||
row-gap: 10px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.players > view {
|
||||
width: 45%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
height: 90px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.players > view > image:first-child {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
}
|
||||
.players > view > image:nth-child(2) {
|
||||
width: 40px;
|
||||
margin: 0 10px;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.founder {
|
||||
position: absolute;
|
||||
background-color: #fed847;
|
||||
top: 0;
|
||||
color: #000;
|
||||
font-size: 12px;
|
||||
padding: 2px 5px;
|
||||
border-top-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
}
|
||||
.player-bg {
|
||||
position: absolute;
|
||||
width: 52px;
|
||||
right: 0;
|
||||
}
|
||||
.tips {
|
||||
color: #fff9;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.player-unknow {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 0 10px;
|
||||
border: 1px solid #fff3;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #69686866;
|
||||
}
|
||||
.player-unknow > image {
|
||||
width: 40%;
|
||||
.footer {
|
||||
margin: 25px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user