679 lines
18 KiB
Vue
679 lines
18 KiB
Vue
<script setup>
|
||
import { ref, watch, onMounted, onBeforeUnmount } from "vue";
|
||
import { onShow, onLoad, onShareAppMessage } 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,
|
||
getReadyAPI,
|
||
} from "@/apis";
|
||
|
||
import { MESSAGETYPES, MESSAGETYPESV2 } 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 ready = ref(false);
|
||
const allReady = ref(false);
|
||
const timer = 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;
|
||
const members = result.members || [];
|
||
if (members.length === result.count) {
|
||
allReady.value = members.every((m) => !!m.userInfo.state);
|
||
}
|
||
members.some((m) => {
|
||
if (m.userInfo.id === user.value.id) {
|
||
ready.value = !!m.userInfo.state;
|
||
return true;
|
||
}
|
||
return false;
|
||
});
|
||
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,
|
||
ready: !!m.userInfo.state,
|
||
};
|
||
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,
|
||
ready: !!m.userInfo.state,
|
||
};
|
||
}
|
||
});
|
||
} 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);
|
||
}
|
||
if (timer.value) clearInterval(timer.value);
|
||
// timer.value = setTimeout(refreshRoomData, 2000);
|
||
}
|
||
|
||
const startGame = async () => {
|
||
const result = await startRoomAPI(room.value.number);
|
||
};
|
||
|
||
const getReady = async () => {
|
||
await getReadyAPI(roomNumber.value);
|
||
};
|
||
|
||
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 === 2) {
|
||
redTeam.value.push({ ...m.userInfo, groupType: 2 });
|
||
}
|
||
});
|
||
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(message) {
|
||
if (Array.isArray(message)) {
|
||
message.forEach((msg) => {
|
||
if (msg.roomNumber !== roomNumber.value) return;
|
||
if (msg.constructor === MESSAGETYPES.UserEnterRoom) {
|
||
refreshRoomData();
|
||
} else if (msg.constructor === MESSAGETYPES.UserExitRoom) {
|
||
refreshRoomData();
|
||
} else if (msg.constructor === MESSAGETYPES.TeamUpdate) {
|
||
refreshRoomData();
|
||
} else if (msg.constructor === MESSAGETYPES.SomeoneIsReady) {
|
||
refreshRoomData();
|
||
} else if (msg.constructor === MESSAGETYPES.RoomDestroy) {
|
||
uni.showToast({
|
||
title: "房间已解散",
|
||
icon: "none",
|
||
});
|
||
setTimeout(() => {
|
||
uni.navigateBack();
|
||
}, 1000);
|
||
}
|
||
});
|
||
} else if (message.type === MESSAGETYPESV2.AboutToStart) {
|
||
uni.setStorageSync("blue-team", message.teams[1].players || []);
|
||
uni.setStorageSync("red-team", message.teams[2].players || []);
|
||
uni.removeStorageSync("current-battle");
|
||
roomNumber.value = "";
|
||
let params = `?gameMode=1&battleId=${message.matchId}`;
|
||
if (message.way == 1) {
|
||
uni.redirectTo({
|
||
url: "/pages/team-battle" + params,
|
||
});
|
||
} else if (message.way == 2) {
|
||
uni.redirectTo({
|
||
url: "/pages/melee-match" + params,
|
||
});
|
||
}
|
||
}
|
||
}
|
||
|
||
const chooseTeam = async (team) => {
|
||
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();
|
||
};
|
||
|
||
onShareAppMessage(() => {
|
||
return {
|
||
title: "邀请您进入房间对战",
|
||
path: "/pages/friend-battle?roomID=" + roomNumber.value,
|
||
imageUrl: "",
|
||
};
|
||
});
|
||
|
||
onShow(() => {
|
||
refreshRoomData();
|
||
});
|
||
|
||
onLoad(async (options) => {
|
||
if (options.roomNumber) roomNumber.value = options.roomNumber;
|
||
});
|
||
|
||
onMounted(() => {
|
||
uni.setKeepScreenOn({
|
||
keepScreenOn: true,
|
||
});
|
||
uni.$on("socket-inbox", onReceiveMessage);
|
||
});
|
||
|
||
onBeforeUnmount(() => {
|
||
uni.setKeepScreenOn({
|
||
keepScreenOn: false,
|
||
});
|
||
uni.$off("socket-inbox", onReceiveMessage);
|
||
if (roomNumber.value) exitRoomAPI(roomNumber.value);
|
||
if (timer.value) clearInterval(timer.value);
|
||
timer.value = null;
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<Container :title="`好友约战 - ${roomNumber}`">
|
||
<view class="standby-phase">
|
||
<Guide>
|
||
<view class="battle-guide">
|
||
<view class="guide-tips">
|
||
<text>弓箭手们，人都到齐了吗?</text>
|
||
<text v-if="battleType === 1">{{
|
||
`${room.count / 2}v${room.count / 2}比赛即将开始!`
|
||
}}</text>
|
||
<text v-if="battleType === 2">大乱斗即将开始! </text>
|
||
</view>
|
||
<button hover-class="none" open-type="share">邀请</button>
|
||
</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 :src="owner.avatar" :size="60" />
|
||
<text>管理员</text>
|
||
<text>{{ owner.name }}</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 :src="opponent.avatar" :size="60" />
|
||
<text :class="{ ready: opponent.ready }">{{
|
||
opponent.ready ? "已准备" : ""
|
||
}}</text>
|
||
<text>{{ 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 redTeam"
|
||
:key="index"
|
||
class="choose-side-left-item"
|
||
>
|
||
<button
|
||
hover-class="none"
|
||
v-if="item.id === user.id"
|
||
@click="chooseTeam(0)"
|
||
>
|
||
<image src="../static/close-grey.png" mode="widthFix" />
|
||
</button>
|
||
<text class="truncate">{{ item.name || "我要加入" }}</text>
|
||
<view v-if="item.id">
|
||
<Avatar :src="item.avatar" :size="36" />
|
||
<text :style="{ opacity: !!item.state ? 1 : 0 }">已准备</text>
|
||
</view>
|
||
<button v-else hover-class="none" @click="chooseTeam(2)">
|
||
<image src="../static/add-grey.png" mode="widthFix" />
|
||
</button>
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<view
|
||
v-for="(item, index) in blueTeam"
|
||
:key="index"
|
||
class="choose-side-right-item"
|
||
>
|
||
<view v-if="item.id">
|
||
<Avatar :src="item.avatar" :size="36" />
|
||
<text :style="{ opacity: !!item.state ? 1 : 0 }">已准备</text>
|
||
</view>
|
||
<button v-else hover-class="none" @click="chooseTeam(1)">
|
||
<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(0)"
|
||
>
|
||
<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> -->
|
||
<SButton :disabled="ready" :onClick="getReady">{{
|
||
allReady.value ? "即将进入对局..." : "我准备好了"
|
||
}}</SButton>
|
||
<!-- <text class="tips">创建者点击下一步，所有人即可进入游戏。</text> -->
|
||
</view>
|
||
</view>
|
||
<!-- <SModal
|
||
:show="showModal"
|
||
:onClose="() => (showModal = false)"
|
||
height="520rpx"
|
||
>
|
||
<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:nth-child(2) {
|
||
color: #000;
|
||
background-color: #fed847;
|
||
font-size: 16rpx;
|
||
border-radius: 20rpx;
|
||
line-height: 26rpx;
|
||
padding: 0 10rpx;
|
||
margin-top: -16rpx;
|
||
position: relative;
|
||
}
|
||
.player > text:nth-child(3) {
|
||
margin-top: 6rpx;
|
||
}
|
||
.player > text {
|
||
max-width: 100px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
text-align: center;
|
||
}
|
||
.player .ready {
|
||
background-color: #2c261fb3 !important;
|
||
border: 1rpx solid #a3793f66 !important;
|
||
color: #fed847 !important;
|
||
}
|
||
.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 > button:last-child {
|
||
color: #fed847;
|
||
border: 1px solid #fed847;
|
||
margin-right: 10px;
|
||
padding: 5px 12px;
|
||
border-radius: 20px;
|
||
position: relative;
|
||
font-size: 28rpx;
|
||
}
|
||
.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;
|
||
color: #333;
|
||
}
|
||
.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;
|
||
margin-bottom: 14rpx;
|
||
}
|
||
.choose-side-left-item > button:last-child > image,
|
||
.choose-side-right-item > button:first-child > image {
|
||
width: 18px;
|
||
}
|
||
.choose-side-left-item > view,
|
||
.choose-side-right-item > view {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
.choose-side-left-item > view > text,
|
||
.choose-side-right-item > view > text {
|
||
font-size: 16rpx;
|
||
border-radius: 20rpx;
|
||
line-height: 26rpx;
|
||
padding: 0 10rpx;
|
||
margin-top: -16rpx;
|
||
position: relative;
|
||
background-color: #2c261fb3;
|
||
border: 1rpx solid #a3793f66;
|
||
color: #fed847;
|
||
}
|
||
</style>
|