diff --git a/src/apis.js b/src/apis.js index 3ad5f3c..0dacfa3 100644 --- a/src/apis.js +++ b/src/apis.js @@ -100,7 +100,7 @@ export const exitRoomAPI = (number) => { }; export const startRoomAPI = (number) => { - return request("GET", `/user/room/start?number=${number}`); + return request("POST", "/user/room/start", { number }); }; export const getPractiseResultListAPI = (page = 1, page_size = 10) => { diff --git a/src/components/BattleHeader.vue b/src/components/BattleHeader.vue index 26a2737..35ddba0 100644 --- a/src/components/BattleHeader.vue +++ b/src/components/BattleHeader.vue @@ -23,7 +23,7 @@ const bgColors = ["#364469", "#692735", "#934B4B", "#A98B69", "#8268A2 "]; :src="`../static/battle-header${blueTeam.length ? '' : '-melee'}.png`" mode="widthFix" /> - + {{ player.name }} - + - - - {{ blueTeam[0].name }} - - + + {{ blueTeam[0].name }} + - - - {{ redTeam[0].name }} - - + + {{ redTeam[0].name }} + diff --git a/src/components/CreateRoom.vue b/src/components/CreateRoom.vue index 876c69e..d7acb81 100644 --- a/src/components/CreateRoom.vue +++ b/src/components/CreateRoom.vue @@ -27,6 +27,7 @@ const createRoom = async () => { loading.value = false; }; const enterRoom = () => { + step.value = 1; props.onConfirm(); uni.navigateTo({ url: `/pages/battle-room?roomNumber=${roomNumber.value}`, diff --git a/src/constants.js b/src/constants.js index fd052f5..968f451 100644 --- a/src/constants.js +++ b/src/constants.js @@ -10,6 +10,9 @@ export const MESSAGETYPES = { SomeGuyIsReady: parseInt("0xAEE8C236"), // 2934489654 MatchOver: parseInt("0xB7815EEF"), // 3078708975 RoundPoint: 4061248646, + UserEnterRoom: 2133805521, + UserExitRoom: 3896523333, + RoomDestroy: 389652333311, }; export const roundsName = { diff --git a/src/pages/battle-room.vue b/src/pages/battle-room.vue index 56cd1ce..3f3e338 100644 --- a/src/pages/battle-room.vue +++ b/src/pages/battle-room.vue @@ -4,6 +4,7 @@ import { onLoad } from "@dcloudio/uni-app"; import Container from "@/components/Container.vue"; import PlayerSeats from "@/components/PlayerSeats.vue"; import Guide from "@/components/Guide.vue"; +import Timer from "@/components/Timer.vue"; import SButton from "@/components/SButton.vue"; import BowTarget from "@/components/BowTarget.vue"; import BattleHeader from "@/components/BattleHeader.vue"; @@ -12,46 +13,168 @@ import BowPower from "@/components/BowPower.vue"; import ShootProgress from "@/components/ShootProgress.vue"; import PlayersRow from "@/components/PlayersRow.vue"; import { getRoomAPI, destroyRoomAPI, exitRoomAPI, startRoomAPI } from "@/apis"; -import { MESSAGETYPES } from "@/constants"; -import websocket from "@/websocket"; +import { MESSAGETYPES, roundsName } from "@/constants"; import useStore from "@/store"; import { storeToRefs } from "pinia"; const store = useStore(); const { user } = storeToRefs(store); const step = ref(1); +const seq = ref(0); +const timerSeq = ref(0); +const battleId = ref(""); const room = ref({}); const roomNumber = ref(""); +const owner = ref({}); const opponent = ref({}); -const players = new Array(7).fill(1); +const redTeam = ref([]); +const blueTeam = ref([]); +const currentShooterId = ref(0); +const players = ref([]); +const currentRound = ref(1); +const totalRounds = ref(0); const start = ref(false); -const teams = [{ name: "选手1", avatar: "../static/avatar.png" }]; const power = ref(0); const scores = ref([]); -const tips = ref(""); +const tips = ref("即将开始..."); +const roundResults = ref([]); +const redPoints = ref(0); +const bluePoints = ref(0); +const playersScores = ref({}); onLoad(async (options) => { - if (!options.roomNumber) { + if (options.roomNumber) { roomNumber.value = options.roomNumber; - const result = await getRoomAPI(options.roomNumber || "15655424"); - console.log(11111, result); + const result = await getRoomAPI(options.roomNumber); room.value = result; + result.members.some((m) => { + if (m.userInfo.id === result.creator) { + owner.value = { + id: m.userInfo.id, + name: m.userInfo.name, + avatar: m.userInfo.avatar, + }; + return true; + } + return false; + }); + if (result.battleType === 1 && result.count === 2) { + if (user.value.id !== owner.value.id) { + opponent.value = { + id: user.value.id, + name: user.value.nickName, + avatar: user.value.avatarUrl, + }; + } else if (result.members.length > 1) { + result.members.some((m) => { + if (m.userInfo.id !== owner.value.id) { + opponent.value = { + id: m.userInfo.id, + name: m.userInfo.name, + avatar: m.userInfo.avatar, + }; + return true; + } + return false; + }); + } + } } }); const startGame = async () => { const result = await startRoomAPI(room.value.number); - start.value = true; - console.log(2222, result); + timerSeq.value += 1; step.value = 2; }; async function onReceiveMessage(content) { const messages = JSON.parse(content).data.updates || []; messages.forEach((msg) => { - console.log("收到消息:", msg); - if (msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) { + if ( + msg.roomNumber === roomNumber.value || + (battleId.value && msg.id === battleId.value) || + msg.constructor === MESSAGETYPES.WaitForAllReady + ) { + console.log("收到消息:", msg); + } + if (!start.value && msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) { scores.value.push(msg.target); - if (scores.value.length === total) { - showScore.value = true; - websocket.closeWebSocket(); + power.value = msg.target.battery; + } + if (msg.constructor === MESSAGETYPES.WaitForAllReady) { + // 这里会掉多次; + timerSeq.value += 1; + battleId.value = msg.id; + redTeam.value = msg.groupUserStatus.redTeam; + blueTeam.value = msg.groupUserStatus.blueTeam; + } + if (msg.roomNumber === roomNumber.value) { + if (msg.constructor === MESSAGETYPES.UserEnterRoom) { + if (room.value.battleType === 1 && room.value.count === 2) { + opponent.value = { + id: msg.userId, + name: msg.name, + avatar: msg.avatar, + }; + } + } + if (!start && msg.constructor === MESSAGETYPES.UserExitRoom) { + if (room.value.battleType === 1 && room.value.count === 2) { + opponent.value = { + id: "", + }; + } + } + if (msg.constructor === MESSAGETYPES.RoomDestroy) { + uni.showToast({ + title: "房间已解散", + icon: "none", + }); + setTimeout(() => { + uni.navigateBack(); + }, 1000); + } + } + if (msg.id === battleId.value) { + if (msg.constructor === MESSAGETYPES.AllReady) { + start.value = true; + timerSeq.value = 0; + scores.value = []; + totalRounds.value = msg.groupUserStatus.config.maxRounds; + step.value = 3; + } + if (msg.constructor === MESSAGETYPES.ToSomeoneShoot) { + scores.value = []; + seq.value += 1; + currentShooterId.value = msg.userId; + if (owner.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.RoundPoint) { + bluePoints.value += msg.blueScore; + redPoints.value += msg.redScore; + } + if (msg.constructor === MESSAGETYPES.CurrentRoundEnded) { + const result = msg.preRoundResult; + scores.value = []; + currentShooterId.value = 0; + if ( + result.currentRound > 0 && + result.currentRound < totalRounds.value + ) { + // 开始下一轮; + roundResults.value = result.roundResults; + currentRound.value = result.currentRound + 1; + } + } + if (msg.constructor === MESSAGETYPES.MatchOver) { + uni.redirectTo({ + url: `/pages/battle-result?battleId=${msg.id}&winner=${msg.endStatus.winner}`, + }); } } }); @@ -63,7 +186,7 @@ onMounted(() => { onUnmounted(() => { uni.$off("socket-inbox", onReceiveMessage); - if (user.value.id === room.value.creator) { + if (owner.value) { destroyRoomAPI(room.value.id); } else { exitRoomAPI(room.value.id); @@ -83,43 +206,66 @@ onUnmounted(() => { - - - - + + + {{ owner.name }} + + + + + {{ opponent.name }} + + + + + + + - + 进入对战 进入大乱斗 + 等待房主开启对战 创建者点击下一步,所有人即可进入游戏。 - - + + 请预先射几箭测试 请确保射击距离只有5米 - + - 开始 - - - - + + + + + + + @@ -198,15 +371,27 @@ onUnmounted(() => { align-items: center; height: 95%; } -.team-mode > view > image:first-child { +.player { width: 70px; - transform: translateY(-45px); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + transform: translateY(-60px); + color: #fff9; + font-size: 14px; +} +.player > image { + width: 70px; + height: 70px; border-radius: 50%; + background-color: #ccc; + margin-bottom: 5px; } .team-mode > view > image:nth-child(2) { width: 120px; } -.team-mode > view > view:nth-child(3) { +.no-player { width: 70px; height: 70px; border-radius: 50%; @@ -214,11 +399,10 @@ onUnmounted(() => { display: flex; justify-content: center; align-items: center; - transform: translateY(45px); + transform: translateY(60px); } -.team-mode > view > view:nth-child(3) > image { - width: 25px; - height: 25px; +.no-player > image { + width: 20px; margin-right: 2px; } diff --git a/src/pages/first-try.vue b/src/pages/first-try.vue index 261798d..2587fa5 100644 --- a/src/pages/first-try.vue +++ b/src/pages/first-try.vue @@ -10,7 +10,6 @@ import ScorePanel from "@/components/ScorePanel.vue"; import Container from "@/components/Container.vue"; import { createPractiseAPI } from "@/apis"; import { MESSAGETYPES } from "@/constants"; -import websocket from "@/websocket"; import useStore from "@/store"; import { storeToRefs } from "pinia"; const store = useStore(); @@ -87,7 +86,6 @@ const nextStep = async () => { const onClose = () => { showScore.value = false; - websocket.closeWebSocket(); setTimeout(() => { step.value = 5; }, 500); diff --git a/src/pages/friend-battle.vue b/src/pages/friend-battle.vue index beb492a..0fd6170 100644 --- a/src/pages/friend-battle.vue +++ b/src/pages/friend-battle.vue @@ -21,7 +21,7 @@ const enterRoom = async () => { if (room.number) { roomNumber.value = ""; uni.navigateTo({ - url: `/pages/battle-room?roomNumber=${roomNumber.value}`, + url: `/pages/battle-room?roomNumber=${room.number}`, }); } else { warnning.value = "查无此房"; @@ -152,7 +152,8 @@ const createRoom = () => { transform: translate(280%, -75px); } .create-room > view > view:nth-child(3) > image { - width: 40%; + width: 20px; + margin-right: 2px; } .create-room > view:last-child { transform: translateY(-110%); diff --git a/src/pages/my-growth.vue b/src/pages/my-growth.vue index e51de38..81fc787 100644 --- a/src/pages/my-growth.vue +++ b/src/pages/my-growth.vue @@ -9,20 +9,20 @@ import { ref } from "vue"; const selectedIndex = ref(0); const matchPage = ref(1); const matchList = ref([]); -const practiseList = ref([]); const battlePage = ref(1); const battleList = ref([]); +const practiseList = ref([]); const handleSelect = async (index) => { if (index === 0 && matchList.value.length === 0) { const result = await getBattleListAPI(matchPage.value, 2); - matchList.value = result.list; + matchList.value = result; matchPage.value += 1; } if (index === 1 && battleList.value.length === 0) { - // const result = await getBattleListAPI(battlePage.value, 1); - // battleList.value = result.list; - // battlePage.value += 1; + const result = await getBattleListAPI(battlePage.value, 1); + battleList.value = result; + battlePage.value += 1; } if (index === 2 && practiseList.value.length === 0) { const result = await getPractiseResultListAPI(); @@ -107,7 +107,44 @@ onMounted(async () => { :style="{ display: selectedIndex === 1 ? 'flex' : 'none', }" - > + > + + + {{ item.name }} + {{ item.createdAt }} + + + + + + {{ p.name }} + + + + + + + {{ p.name }} + + + +