678 lines
18 KiB
Vue
678 lines
18 KiB
Vue
<script setup>
|
||
import { ref, watch, onMounted, onBeforeUnmount } from "vue";
|
||
import { onLoad, onShow, onHide } from "@dcloudio/uni-app";
|
||
import Container from "@/components/Container.vue";
|
||
import PlayerSeats from "@/components/PlayerSeats.vue";
|
||
import Guide from "@/components/Guide.vue";
|
||
import SButton from "@/components/SButton.vue";
|
||
import SModal from "@/components/SModal.vue";
|
||
import Avatar from "@/components/Avatar.vue";
|
||
import {
|
||
getRoomAPI,
|
||
destroyRoomAPI,
|
||
exitRoomAPI,
|
||
startRoomAPI,
|
||
chooseTeamAPI,
|
||
} from "@/apis";
|
||
import { MESSAGETYPES } from "@/constants";
|
||
import useStore from "@/store";
|
||
import { storeToRefs } from "pinia";
|
||
const store = useStore();
|
||
const { user } = storeToRefs(store);
|
||
const room = ref({});
|
||
const roomNumber = ref("");
|
||
const owner = ref({});
|
||
const opponent = ref({});
|
||
const players = ref([]);
|
||
const blueTeam = ref([]);
|
||
const redTeam = ref([]);
|
||
|
||
const showModal = ref(false);
|
||
const battleType = ref(0);
|
||
const refreshRoomTimer = ref(null);
|
||
|
||
async function refreshRoomData() {
|
||
if (!roomNumber.value) return;
|
||
const result = await getRoomAPI(roomNumber.value);
|
||
if (result.started) return;
|
||
room.value = result;
|
||
battleType.value = result.battleType;
|
||
(result.members || []).some((m) => {
|
||
if (m.userInfo.id === result.creator) {
|
||
owner.value = {
|
||
id: m.userInfo.id,
|
||
name: m.userInfo.name,
|
||
avatar: m.userInfo.avatar,
|
||
rankLvl: m.userInfo.rankLvl,
|
||
};
|
||
return true;
|
||
}
|
||
return false;
|
||
});
|
||
if (result.battleType === 1 && result.count === 2) {
|
||
result.members.forEach((m) => {
|
||
if (m.userInfo.id !== owner.value.id) {
|
||
opponent.value = {
|
||
id: m.userInfo.id,
|
||
name: m.userInfo.name,
|
||
avatar: m.userInfo.avatar,
|
||
rankLvl: m.userInfo.rankLvl,
|
||
};
|
||
}
|
||
});
|
||
} else if (result.battleType === 2) {
|
||
players.value = [];
|
||
const ownerIndex = result.members.findIndex(
|
||
(m) => m.userInfo.id === result.creator
|
||
);
|
||
if (ownerIndex !== -1) {
|
||
players.value.push(result.members[ownerIndex].userInfo);
|
||
} else {
|
||
players.value.push({});
|
||
}
|
||
result.members.forEach((m, index) => {
|
||
if (ownerIndex !== index) players.value.push(m.userInfo);
|
||
});
|
||
} else {
|
||
players.value = new Array(result.count).fill({});
|
||
refreshMembers(result.members);
|
||
}
|
||
}
|
||
|
||
const startGame = async () => {
|
||
const result = await startRoomAPI(room.value.number);
|
||
};
|
||
|
||
const refreshMembers = (members) => {
|
||
blueTeam.value = [];
|
||
redTeam.value = [];
|
||
members.forEach((m, index) => {
|
||
players.value[index] = { ...m.userInfo, groupType: m.groupType };
|
||
if (m.groupType === 1) {
|
||
blueTeam.value.push({ ...m.userInfo, groupType: 1 });
|
||
} else if (m.groupType === 0) {
|
||
redTeam.value.push({ ...m.userInfo, groupType: 0 });
|
||
}
|
||
});
|
||
for (let i = 0; i < room.value.count / 2; i++) {
|
||
if (!blueTeam.value[i]) blueTeam.value[i] = {};
|
||
if (!redTeam.value[i]) redTeam.value[i] = {};
|
||
}
|
||
};
|
||
|
||
async function onReceiveMessage(messages = []) {
|
||
messages.forEach((msg) => {
|
||
if (msg.roomNumber === roomNumber.value) {
|
||
if (msg.constructor === MESSAGETYPES.UserEnterRoom) {
|
||
if (battleType.value === 1) {
|
||
if (msg.userId === room.value.creator) {
|
||
owner.value = {
|
||
id: msg.userId,
|
||
name: msg.name,
|
||
avatar: msg.avatar,
|
||
rankLvl: msg.rankLvl,
|
||
};
|
||
} else {
|
||
opponent.value = {
|
||
id: msg.userId,
|
||
name: msg.name,
|
||
avatar: msg.avatar,
|
||
rankLvl: msg.rankLvl,
|
||
};
|
||
}
|
||
}
|
||
if (battleType.value === 2) {
|
||
if (room.value.creator === msg.userId) {
|
||
players.value[0] = {
|
||
id: msg.userId,
|
||
name: msg.name,
|
||
avatar: msg.avatar,
|
||
rankLvl: msg.rankLvl,
|
||
};
|
||
} else {
|
||
players.value.push({
|
||
id: msg.userId,
|
||
name: msg.name,
|
||
avatar: msg.avatar,
|
||
rankLvl: msg.rankLvl,
|
||
});
|
||
}
|
||
}
|
||
}
|
||
if (msg.constructor === MESSAGETYPES.UserExitRoom) {
|
||
if (battleType.value === 1) {
|
||
if (msg.userId === room.value.creator) {
|
||
owner.value = {
|
||
id: "",
|
||
};
|
||
} else {
|
||
opponent.value = {
|
||
id: "",
|
||
};
|
||
}
|
||
}
|
||
if (battleType.value === 2) {
|
||
players.value = players.value.filter((p) => p.id !== msg.userId);
|
||
}
|
||
if (msg.room && msg.room.members) {
|
||
refreshMembers(msg.room.members);
|
||
}
|
||
}
|
||
if (msg.constructor === MESSAGETYPES.TeamUpdate) {
|
||
if (msg.room && msg.room.members) {
|
||
refreshMembers(msg.room.members);
|
||
}
|
||
}
|
||
if (msg.constructor === MESSAGETYPES.RoomDestroy) {
|
||
uni.showToast({
|
||
title: "房间已解散",
|
||
icon: "none",
|
||
});
|
||
roomNumber.value = "";
|
||
setTimeout(() => {
|
||
uni.navigateBack();
|
||
}, 1000);
|
||
}
|
||
}
|
||
if (msg.constructor === MESSAGETYPES.WaitForAllReady) {
|
||
roomNumber.value = "";
|
||
if (msg.groupUserStatus) {
|
||
uni.setStorageSync("red-team", msg.groupUserStatus.redTeam);
|
||
uni.setStorageSync("blue-team", msg.groupUserStatus.blueTeam);
|
||
uni.setStorageSync("melee-players", [
|
||
...msg.groupUserStatus.redTeam,
|
||
...msg.groupUserStatus.blueTeam,
|
||
]);
|
||
uni.removeStorageSync("current-battle");
|
||
if (msg.groupUserStatus.config.mode == 1) {
|
||
uni.redirectTo({
|
||
url: `/pages/team-battle?battleId=${msg.id}&gameMode=1`,
|
||
});
|
||
} else if (msg.groupUserStatus.config.mode == 2) {
|
||
uni.redirectTo({
|
||
url: `/pages/melee-match?battleId=${msg.id}&gameMode=1`,
|
||
});
|
||
}
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
const chooseTeam = async (team) => {
|
||
if (team !== 2) {
|
||
const notInTeam = room.value.members.some(
|
||
(m) => m.userInfo.id === user.value.id && m.groupType === 2
|
||
);
|
||
if (!notInTeam) return;
|
||
}
|
||
const result = await chooseTeamAPI(roomNumber.value, team);
|
||
refreshMembers(result.members);
|
||
};
|
||
|
||
const destroyRoom = async () => {
|
||
if (roomNumber.value) await destroyRoomAPI(roomNumber.value);
|
||
};
|
||
|
||
const exitRoom = async () => {
|
||
uni.navigateBack();
|
||
};
|
||
|
||
const setClipboardData = () => {
|
||
uni.setClipboardData({
|
||
data: roomNumber.value,
|
||
success() {
|
||
uni.showToast({ title: "复制成功" });
|
||
},
|
||
});
|
||
};
|
||
|
||
const onBack = () => {
|
||
showModal.value = true;
|
||
};
|
||
|
||
onLoad(async (options) => {
|
||
if (options.roomNumber) {
|
||
roomNumber.value = options.roomNumber;
|
||
refreshRoomData();
|
||
refreshRoomTimer.value = setInterval(refreshRoomData, 2000);
|
||
}
|
||
});
|
||
|
||
onMounted(() => {
|
||
uni.setKeepScreenOn({
|
||
keepScreenOn: true,
|
||
});
|
||
uni.$on("socket-inbox", onReceiveMessage);
|
||
});
|
||
|
||
onBeforeUnmount(() => {
|
||
if (refreshRoomTimer.value) clearInterval(refreshRoomTimer.value);
|
||
uni.setKeepScreenOn({
|
||
keepScreenOn: false,
|
||
});
|
||
uni.$off("socket-inbox", onReceiveMessage);
|
||
if (roomNumber.value && owner.value.id !== user.value.id) {
|
||
exitRoomAPI(roomNumber.value);
|
||
}
|
||
});
|
||
|
||
onShow(async () => {
|
||
refreshRoomData();
|
||
});
|
||
onHide(() => {});
|
||
</script>
|
||
|
||
<template>
|
||
<Container :title="`好友约战 - ${roomNumber}`" :onBack="onBack">
|
||
<view class="standby-phase">
|
||
<Guide>
|
||
<view class="battle-guide">
|
||
<view :style="{ display: 'flex', flexDirection: 'column' }">
|
||
<text :style="{ color: '#fed847' }">弓箭手们，人都到齐了吗?</text>
|
||
<text v-if="battleType === 1">1v1比赛即将开始! </text>
|
||
<text v-if="battleType === 3">2v2比赛即将开始! </text>
|
||
<text v-if="battleType === 4">3v3比赛即将开始! </text>
|
||
<text v-if="battleType === 2">大乱斗即将开始! </text>
|
||
</view>
|
||
<view @click="setClipboardData">复制房间号</view>
|
||
</view>
|
||
</Guide>
|
||
<view v-if="battleType === 1 && room.count === 2" class="team-mode">
|
||
<image
|
||
src="https://static.shelingxingqiu.com/attachment/2025-08-05/dbua9nuf5fyeph7cxi.png"
|
||
mode="widthFix"
|
||
/>
|
||
<view>
|
||
<view
|
||
v-if="owner.id"
|
||
class="player"
|
||
:style="{ transform: 'translateY(-60px)' }"
|
||
>
|
||
<Avatar :rankLvl="owner.rankLvl" :src="owner.avatar" :size="60" />
|
||
<text>{{ owner.name }}</text>
|
||
<text>创建者</text>
|
||
</view>
|
||
<view
|
||
v-else
|
||
class="no-player"
|
||
:style="{ transform: 'translateY(-60px)' }"
|
||
>
|
||
<image src="../static/question-mark.png" mode="widthFix" />
|
||
</view>
|
||
<image src="../static/versus.png" mode="widthFix" />
|
||
<view
|
||
v-if="opponent.id"
|
||
class="player"
|
||
:style="{ transform: 'translateY(60px)' }"
|
||
>
|
||
<Avatar
|
||
:rankLvl="opponent.rankLvl"
|
||
:src="opponent.avatar"
|
||
:size="60"
|
||
/>
|
||
<text v-if="opponent.name">{{ opponent.name }}</text>
|
||
</view>
|
||
<view class="no-player" v-else>
|
||
<image src="../static/question-mark.png" mode="widthFix" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<PlayerSeats
|
||
v-if="battleType === 2"
|
||
:total="room.count || 10"
|
||
:players="players"
|
||
/>
|
||
<block v-if="battleType === 1 && room.count >= 4">
|
||
<view class="all-players">
|
||
<image
|
||
src="https://static.shelingxingqiu.com/attachment/2025-08-13/dc0x1p59iab6cvbhqc.png"
|
||
mode="widthFix"
|
||
/>
|
||
<image v-if="room.count === 4" src="../static/title-2v2.png" mode="widthFix" />
|
||
<image v-if="room.count === 6" src="../static/title-3v3.png" mode="widthFix" />
|
||
<view>
|
||
<view v-for="(item, index) in players" :key="index">
|
||
<Avatar v-if="item.id" :src="item.avatar" :size="36" />
|
||
<text v-if="owner.id === item.id">创建者</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="choose-side">
|
||
<view>
|
||
<view
|
||
v-for="(item, index) in blueTeam"
|
||
:key="index"
|
||
class="choose-side-left-item"
|
||
>
|
||
<button
|
||
hover-class="none"
|
||
v-if="item.id === user.id"
|
||
@click="chooseTeam(2)"
|
||
>
|
||
<image src="../static/close-grey.png" mode="widthFix" />
|
||
</button>
|
||
<text class="truncate">{{ item.name || "我要加入" }}</text>
|
||
<Avatar v-if="item.id" :src="item.avatar" :size="36" />
|
||
<button v-else hover-class="none" @click="chooseTeam(1)">
|
||
<image src="../static/add-grey.png" mode="widthFix" />
|
||
</button>
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<view
|
||
v-for="(item, index) in redTeam"
|
||
:key="index"
|
||
class="choose-side-right-item"
|
||
>
|
||
<Avatar v-if="item.id" :src="item.avatar" :size="36" />
|
||
<button v-else hover-class="none" @click="chooseTeam(0)">
|
||
<image src="../static/add-grey.png" mode="widthFix" />
|
||
</button>
|
||
<text class="truncate">{{ item.name || "我要加入" }}</text>
|
||
<button
|
||
hover-class="none"
|
||
v-if="item.id === user.id"
|
||
@click="chooseTeam(2)"
|
||
>
|
||
<image src="../static/close-grey.png" mode="widthFix" />
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</block>
|
||
<view>
|
||
<SButton
|
||
v-if="user.id === owner.id && battleType === 1 && room.count === 2"
|
||
:disabled="!opponent.id"
|
||
:onClick="startGame"
|
||
>进入对战</SButton
|
||
>
|
||
<SButton
|
||
v-if="user.id === owner.id && battleType === 2"
|
||
:disabled="players.length < 3"
|
||
:onClick="startGame"
|
||
>进入大乱斗</SButton
|
||
>
|
||
<SButton
|
||
v-if="user.id === owner.id && battleType === 1 && room.count >= 4"
|
||
:disabled="
|
||
players.some((p) => p.groupType === undefined || p.groupType === 2)
|
||
"
|
||
:onClick="startGame"
|
||
>开启对局</SButton
|
||
>
|
||
<SButton v-if="user.id !== owner.id" disabled>等待房主开启对战</SButton>
|
||
<text class="tips">创建者点击下一步，所有人即可进入游戏。</text>
|
||
</view>
|
||
</view>
|
||
<SModal :show="showModal" :onClose="() => (showModal = false)">
|
||
<view class="btns">
|
||
<SButton :onClick="exitRoom" width="200px" :rounded="20">
|
||
暂时离开
|
||
</SButton>
|
||
<block v-if="owner.id === user.id">
|
||
<view :style="{ height: '20px' }"></view>
|
||
<SButton :onClick="destroyRoom" width="200px" :rounded="20">
|
||
解散房间
|
||
</SButton>
|
||
</block>
|
||
</view>
|
||
</SModal>
|
||
</Container>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.standby-phase {
|
||
width: 100%;
|
||
height: calc(100% - 40px);
|
||
overflow-x: hidden;
|
||
}
|
||
.tips {
|
||
color: #fff9;
|
||
width: 100%;
|
||
text-align: center;
|
||
display: block;
|
||
margin-top: 10px;
|
||
font-size: 12px;
|
||
}
|
||
.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%;
|
||
}
|
||
.team-mode {
|
||
width: calc(100vw - 30px);
|
||
height: 125vw;
|
||
margin: 15px;
|
||
}
|
||
.team-mode > image:first-child {
|
||
position: absolute;
|
||
width: calc(100vw - 30px);
|
||
z-index: -1;
|
||
}
|
||
.team-mode > view {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 95%;
|
||
}
|
||
.player {
|
||
width: 70px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
transform: translateY(-60px);
|
||
color: #fff;
|
||
font-size: 14px;
|
||
}
|
||
.player > image {
|
||
width: 70px;
|
||
height: 70px;
|
||
border-radius: 50%;
|
||
background-color: #ccc;
|
||
margin-bottom: 5px;
|
||
}
|
||
.player > text {
|
||
max-width: 100px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
text-align: center;
|
||
}
|
||
.player > text:nth-child(3) {
|
||
color: #000;
|
||
background-color: #fed847;
|
||
font-size: 8px;
|
||
border-radius: 10px;
|
||
padding: 2px 5px;
|
||
}
|
||
.team-mode > view > image:nth-child(2) {
|
||
width: 120px;
|
||
}
|
||
.no-player {
|
||
width: 70px;
|
||
height: 70px;
|
||
border-radius: 50%;
|
||
background-color: #ccc;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
transform: translateY(60px);
|
||
}
|
||
.no-player > image {
|
||
width: 20px;
|
||
margin-right: 2px;
|
||
}
|
||
.btns {
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.battle-guide {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.battle-guide > view:last-child {
|
||
color: #fed847;
|
||
border: 1px solid #fed847;
|
||
margin-right: 10px;
|
||
padding: 5px 12px;
|
||
border-radius: 20px;
|
||
position: relative;
|
||
}
|
||
.all-players {
|
||
position: relative;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
height: 83vw;
|
||
}
|
||
.all-players > image:first-child {
|
||
position: absolute;
|
||
width: 100%;
|
||
}
|
||
.all-players > image:nth-child(2) {
|
||
width: 25vw;
|
||
position: relative;
|
||
}
|
||
.all-players > view {
|
||
position: relative;
|
||
width: 42vw;
|
||
height: 42vw;
|
||
margin-top: 7vw;
|
||
}
|
||
.all-players > view > view {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
}
|
||
/* 4个头像 - 正方形排列 */
|
||
.all-players > view > view:nth-child(1):nth-last-child(4) {
|
||
transform: translate(-50%, -50%) rotate(-30deg) translateY(-21.5vw)
|
||
rotate(30deg);
|
||
}
|
||
.all-players > view > view:nth-child(2):nth-last-child(3) {
|
||
transform: translate(-50%, -50%) rotate(-120deg) translateY(-21.5vw)
|
||
rotate(120deg);
|
||
}
|
||
.all-players > view > view:nth-child(3):nth-last-child(2) {
|
||
transform: translate(-50%, -50%) rotate(-210deg) translateY(-21.5vw)
|
||
rotate(210deg);
|
||
}
|
||
.all-players > view > view:nth-child(4):nth-last-child(1) {
|
||
transform: translate(-50%, -50%) rotate(-300deg) translateY(-21.5vw)
|
||
rotate(300deg);
|
||
}
|
||
/* 6个头像 - 六边形排列 */
|
||
.all-players > view > view:nth-child(1):nth-last-child(6) {
|
||
transform: translate(-50%, -50%) rotate(-30deg) translateY(-21vw)
|
||
rotate(30deg);
|
||
}
|
||
.all-players > view > view:nth-child(2):nth-last-child(5) {
|
||
transform: translate(-50%, -50%) rotate(-90deg) translateY(-21vw)
|
||
rotate(90deg);
|
||
}
|
||
.all-players > view > view:nth-child(3):nth-last-child(4) {
|
||
transform: translate(-50%, -50%) rotate(-150deg) translateY(-21vw)
|
||
rotate(150deg);
|
||
}
|
||
.all-players > view > view:nth-child(4):nth-last-child(3) {
|
||
transform: translate(-50%, -50%) rotate(-210deg) translateY(-21vw)
|
||
rotate(210deg);
|
||
}
|
||
.all-players > view > view:nth-child(5):nth-last-child(2) {
|
||
transform: translate(-50%, -50%) rotate(-270deg) translateY(-21vw)
|
||
rotate(270deg);
|
||
}
|
||
.all-players > view > view:nth-child(6):nth-last-child(1) {
|
||
transform: translate(-50%, -50%) rotate(-330deg) translateY(-21vw)
|
||
rotate(330deg);
|
||
}
|
||
.all-players > view > view > text {
|
||
position: absolute;
|
||
background-color: #fed847;
|
||
font-size: 8px;
|
||
border-radius: 10px;
|
||
padding: 1px 0px;
|
||
bottom: -20%;
|
||
left: calc(50% - 15px);
|
||
width: 30px;
|
||
text-align: center;
|
||
}
|
||
.choose-side {
|
||
display: flex;
|
||
}
|
||
.choose-side > view {
|
||
width: 50%;
|
||
}
|
||
.choose-side > view:first-child > view {
|
||
background: linear-gradient(270deg, #6a1212 0%, rgba(74, 0, 0, 0) 100%);
|
||
}
|
||
.choose-side > view:last-child > view {
|
||
background: linear-gradient(270deg, rgba(13, 0, 74, 0) 0%, #172a86 100%);
|
||
}
|
||
.choose-side-left-item,
|
||
.choose-side-right-item {
|
||
display: flex;
|
||
align-items: center;
|
||
color: #fff;
|
||
border-radius: 12px;
|
||
padding: 10px;
|
||
align-items: center;
|
||
margin: 10px 5px;
|
||
position: relative;
|
||
}
|
||
.choose-side-left-item {
|
||
justify-content: flex-end;
|
||
}
|
||
.choose-side-left-item > text,
|
||
.choose-side-right-item > text {
|
||
margin: 10px;
|
||
max-width: 100px;
|
||
font-size: 14px;
|
||
}
|
||
.choose-side-left-item > button:first-child,
|
||
.choose-side-right-item > button:last-child {
|
||
position: absolute;
|
||
top: 0;
|
||
}
|
||
.choose-side-left-item > button:first-child > image,
|
||
.choose-side-right-item > button:last-child > image {
|
||
width: 28px;
|
||
}
|
||
.choose-side-left-item > button:first-child {
|
||
left: 0;
|
||
}
|
||
|
||
.choose-side-right-item > button:last-child {
|
||
right: 0;
|
||
}
|
||
.choose-side-left-item > button:last-child,
|
||
.choose-side-right-item > button:first-child {
|
||
background-color: #fff;
|
||
border-radius: 50%;
|
||
width: 38px;
|
||
height: 38px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.choose-side-left-item > button:last-child > image,
|
||
.choose-side-right-item > button:first-child > image {
|
||
width: 18px;
|
||
}
|
||
</style>
|