laoma/shoot-miniprograms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

显示已准备状态

Browse Source
This commit is contained in:
kron
2026-02-05 10:35:12 +08:00
parent 7f73f3ebb3
commit 93c549109f
2 changed files with 92 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/PlayerSeats.vue
View File

@@ -1,4 +1,6 @@
<script setup>
import Avatar from "@/components/Avatar.vue";
const props = defineProps({
total: {
type: Number,
@@ -16,11 +18,16 @@ const seats = new Array(props.total).fill(1);
<view class="players">
<view v-for="(_, index) in seats" :key="index">
<image src="../static/player-bg.png" mode="widthFix" />
<image
v-if="players[index] && players[index].name"
:src="players[index].avatar || '../static/user-icon.png'"
mode="widthFix"
/>
<view v-if="players[index] && players[index].name" class="avatar">
<Avatar
:src="players[index].avatar || '../static/user-icon.png'"
:size="40"
/>
<text
:style="{ opacity: players[index] && !!players[index].state ? 1 : 0 }"
>已准备</text
>
</view>
<view v-else class="player-unknow">
<image src="../static/question-mark.png" mode="widthFix" />
</view>
@@ -28,7 +35,7 @@ const seats = new Array(props.total).fill(1);
players[index].name
}}</text>
<text v-else :style="{ color: '#fff9' }">虚位以待</text>
<view v-if="index === 0" class="founder">创建者</view>
<view v-if="index === 0" class="founder">管理员</view>
<image
:src="`../static/player-${index + 1}.png`"
mode="widthFix"
@@ -63,13 +70,25 @@ const seats = new Array(props.total).fill(1);
position: absolute;
z-index: -1;
}
.players > view > image:nth-child(2) {
width: 40px;
height: 40px;
min-height: 40px;
margin: 0 10px;
border: 1px solid #fff;
border-radius: 50%;
.avatar {
display: flex;
flex-direction: column;
align-items: center;
padding: 0 24rpx;
margin-top: 16rpx;
}
.avatar > text {
background-color: #2c261fb3;
border-color: #a3793f66;
color: #fed847;
font-size: 16rpx;
border-radius: 20rpx;
width: 70rpx;
text-align: center;
margin-top: -16rpx;
position: relative;
height: 28rpx;
line-height: 28rpx;
}
.players > view > text:nth-child(3) {
width: 20vw;
@@ -95,7 +114,7 @@ const seats = new Array(props.total).fill(1);
.player-unknow {
width: 40px;
height: 40px;
margin: 0 10px;
margin: 0 24rpx;
border: 1px solid #fff3;
border-radius: 50%;
display: flex;

165
src/pages/battle-room.vue
View File

@@ -32,7 +32,6 @@ const redTeam = ref([]);
const showModal = ref(false);
const battleType = ref(0);
const refreshRoomTimer = ref(null);
const ready = ref(false);
const allReady = ref(false);
const timer = ref(null);
@@ -61,6 +60,7 @@ async function refreshRoomData() {
name: m.userInfo.name,
avatar: m.userInfo.avatar,
rankLvl: m.userInfo.rankLvl,
ready: !!m.userInfo.state,
};
return true;
}
@@ -74,6 +74,7 @@ async function refreshRoomData() {
name: m.userInfo.name,
avatar: m.userInfo.avatar,
rankLvl: m.userInfo.rankLvl,
ready: !!m.userInfo.state,
};
}
});
@@ -128,62 +129,13 @@ async function onReceiveMessage(message) {
message.forEach((msg) => {
if (msg.roomNumber !== roomNumber.value) return;
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,
});
}
}
refreshRoomData();
} else 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);
}
refreshRoomData();
} else if (msg.constructor === MESSAGETYPES.TeamUpdate) {
if (msg.room && msg.room.members) {
refreshMembers(msg.room.members);
}
refreshRoomData();
} else if (msg.constructor === MESSAGETYPES.SomeoneIsReady) {
refreshRoomData();
} else if (msg.constructor === MESSAGETYPES.RoomDestroy) {
uni.showToast({
title: "房间已解散",
@@ -192,31 +144,7 @@ async function onReceiveMessage(message) {
setTimeout(() => {
uni.navigateBack();
}, 1000);
} else if (msg.constructor === MESSAGETYPES.SomeoneIsReady) {
refreshRoomData();
}
// else if (msg.constructor === MESSAGETYPES.WaitForAllReady) {
// 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");
// // 避免离开页面，触发退出房间
// roomNumber.value = "";
// 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`,
// });
// }
// }
// }
});
} else if (message.type === MESSAGETYPESV2.AboutToStart) {
uni.setStorageSync("blue-team", message.teams[1].players || []);
@@ -255,15 +183,6 @@ const exitRoom = async () => {
uni.navigateBack();
};
const setClipboardData = () => {
uni.setClipboardData({
data: roomNumber.value,
success() {
uni.showToast({ title: "复制成功" });
},
});
};
onShareAppMessage(() => {
return {
title: "邀请您进入房间对战",
@@ -288,7 +207,6 @@ onMounted(() => {
});
onBeforeUnmount(() => {
if (refreshRoomTimer.value) clearInterval(refreshRoomTimer.value);
uni.setKeepScreenOn({
keepScreenOn: false,
});
@@ -325,9 +243,9 @@ onBeforeUnmount(() => {
class="player"
:style="{ transform: 'translateY(-60px)' }"
>
<Avatar :rankLvl="owner.rankLvl" :src="owner.avatar" :size="60" />
<Avatar :src="owner.avatar" :size="60" />
<text>管理员</text>
<text>{{ owner.name }}</text>
<text>创建者</text>
</view>
<view
v-else
@@ -342,12 +260,11 @@ onBeforeUnmount(() => {
class="player"
:style="{ transform: 'translateY(60px)' }"
>
<Avatar
:rankLvl="opponent.rankLvl"
:src="opponent.avatar"
:size="60"
/>
<text v-if="opponent.name">{{ opponent.name }}</text>
<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" />
@@ -378,7 +295,7 @@ onBeforeUnmount(() => {
<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>
<text v-if="owner.id === item.id">管理员</text>
</view>
</view>
</view>
@@ -397,7 +314,10 @@ onBeforeUnmount(() => {
<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" />
<view v-if="item.id">
<Avatar :src="item.avatar" :size="36" />
<text v-if="!!item.state">已准备</text>
</view>
<button v-else hover-class="none" @click="chooseTeam(1)">
<image src="../static/add-grey.png" mode="widthFix" />
</button>
@@ -409,7 +329,10 @@ onBeforeUnmount(() => {
:key="index"
class="choose-side-right-item"
>
<Avatar v-if="item.id" :src="item.avatar" :size="36" />
<view v-if="item.id">
<Avatar :src="item.avatar" :size="36" />
<text v-if="!!item.state">已准备</text>
</view>
<button v-else hover-class="none" @click="chooseTeam(0)">
<image src="../static/add-grey.png" mode="widthFix" />
</button>
@@ -534,6 +457,19 @@ onBeforeUnmount(() => {
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;
@@ -541,12 +477,10 @@ onBeforeUnmount(() => {
text-overflow: ellipsis;
text-align: center;
}
.player > text:nth-child(3) {
color: #000;
background-color: #fed847;
font-size: 8px;
border-radius: 10px;
padding: 2rpx 10rpx;
.player .ready {
background-color: #2c261fb3 !important;
border-color: #a3793f66 !important;
color: #fed847 !important;
}
.team-mode > view > image:nth-child(2) {
width: 120px;
@@ -664,6 +598,7 @@ onBeforeUnmount(() => {
left: calc(50% - 15px);
width: 30px;
text-align: center;
color: #333;
}
.choose-side {
display: flex;
@@ -727,4 +662,22 @@ onBeforeUnmount(() => {
.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-color: #a3793f66;
color: #fed847;
}
</style>