Merge branch 'new-race-mode' into test
This commit is contained in:
@@ -80,28 +80,35 @@ defineProps({
|
|||||||
/>
|
/>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view
|
<!-- 大乱斗玩家列表:scroll-view 作为横向滚动容器 -->
|
||||||
|
<!-- 小程序中 scroll-view 不支持直接 display:flex,需内部 wrapper view 承载 flex 布局 -->
|
||||||
|
<!-- 仅当玩家 >5 人(内容溢出宽度)时才阻止冒泡,防止与外层 swiper 切换 tab 的手势冲突 -->
|
||||||
|
<scroll-view
|
||||||
v-if="players.length"
|
v-if="players.length"
|
||||||
class="players-melee"
|
class="players-melee"
|
||||||
|
scroll-x
|
||||||
|
@touchmove="(e) => players.length > 5 && e.stopPropagation()"
|
||||||
:style="{ paddingTop: showHeader ? '15px' : '0' }"
|
:style="{ paddingTop: showHeader ? '15px' : '0' }"
|
||||||
>
|
>
|
||||||
<view
|
<view class="players-melee-inner">
|
||||||
v-for="(player, index) in players"
|
<view
|
||||||
:key="index"
|
v-for="(player, index) in players"
|
||||||
:style="{
|
:key="index"
|
||||||
backgroundColor: meleeAvatarColors[index],
|
:style="{
|
||||||
width: `${Math.max(100 / players.length, 18)}vw`,
|
backgroundColor: meleeAvatarColors[index],
|
||||||
}"
|
width: `${Math.max(100 / players.length, 18)}vw`,
|
||||||
>
|
}"
|
||||||
<Avatar
|
>
|
||||||
:src="player.avatar"
|
<Avatar
|
||||||
:rankLvl="showRank ? undefined : player.rankLvl"
|
:src="player.avatar"
|
||||||
:size="40"
|
:rankLvl="showRank ? undefined : player.rankLvl"
|
||||||
:rank="showRank ? index + 1 : 0"
|
:size="40"
|
||||||
/>
|
:rank="showRank ? index + 1 : 0"
|
||||||
<text class="player-name">{{ player.name }}</text>
|
/>
|
||||||
|
<text class="player-name">{{ player.name }}</text>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</scroll-view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -144,17 +151,21 @@ defineProps({
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
.players-melee {
|
.players-melee {
|
||||||
display: flex;
|
|
||||||
height: 80px;
|
height: 80px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
overflow-x: auto;
|
|
||||||
}
|
}
|
||||||
.players-melee::-webkit-scrollbar {
|
.players-melee::-webkit-scrollbar {
|
||||||
width: 0;
|
width: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
color: transparent;
|
color: transparent;
|
||||||
}
|
}
|
||||||
.players-melee > view {
|
/* 小程序 scroll-view 不支持直接 flex,通过内层 wrapper 承载横向排列 */
|
||||||
|
.players-melee-inner {
|
||||||
|
display: flex;
|
||||||
|
height: 100%;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
}
|
||||||
|
.players-melee-inner > view {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|||||||
@@ -52,7 +52,8 @@ async function onReceiveMessage(message) {
|
|||||||
const { type, mode, current, shootData } = message;
|
const { type, mode, current, shootData } = message;
|
||||||
if (type === MESSAGETYPESV2.BattleStart) {
|
if (type === MESSAGETYPESV2.BattleStart) {
|
||||||
melee.value = Boolean(mode > 3);
|
melee.value = Boolean(mode > 3);
|
||||||
totalShot.value = mode === 1 ? 3 : 2;
|
// 优先使用后端返回的 shootNumber,降级则根据 mode 推算
|
||||||
|
totalShot.value = message.shootNumber ?? (mode === 1 ? 3 : 2);
|
||||||
currentRoundEnded.value = true;
|
currentRoundEnded.value = true;
|
||||||
audioManager.play("比赛开始");
|
audioManager.play("比赛开始");
|
||||||
} else if (type === MESSAGETYPESV2.BattleEnd) {
|
} else if (type === MESSAGETYPESV2.BattleEnd) {
|
||||||
|
|||||||
@@ -43,7 +43,7 @@ const rowCount = new Array(6).fill(0);
|
|||||||
<view>
|
<view>
|
||||||
<view v-for="(_, index) in rowCount" :key="index">
|
<view v-for="(_, index) in rowCount" :key="index">
|
||||||
<text>{{
|
<text>{{
|
||||||
scores[1] && scores[1][index] ? `${scores[0][index].ring}环` : "-"
|
scores[1] && scores[1][index] ? `${scores[1][index].ring}环` : "-"
|
||||||
}}</text>
|
}}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
@@ -3,22 +3,90 @@ import { ref, onMounted, onBeforeUnmount } from "vue";
|
|||||||
import { onLoad, onShow, onHide } from "@dcloudio/uni-app";
|
import { onLoad, onShow, onHide } from "@dcloudio/uni-app";
|
||||||
import Container from "@/components/Container.vue";
|
import Container from "@/components/Container.vue";
|
||||||
import Matching from "@/components/Matching.vue";
|
import Matching from "@/components/Matching.vue";
|
||||||
import { matchGameAPI } from "@/apis";
|
import { matchGameAPI, getBattleAPI } from "@/apis";
|
||||||
import { MESSAGETYPESV2 } from "@/constants";
|
import { MESSAGETYPESV2 } from "@/constants";
|
||||||
|
|
||||||
const gameType = ref(0);
|
const gameType = ref(0);
|
||||||
const teamSize = ref(0);
|
const teamSize = ref(0);
|
||||||
const onComplete = ref(null);
|
const onComplete = ref(null);
|
||||||
|
|
||||||
|
/** 匹配超时计时器,用于检测 WS 消息丢失或真正超时 */
|
||||||
|
const matchTimeoutTimer = ref(null);
|
||||||
|
|
||||||
|
/** 匹配超时阈值(ms),后端设置 15s 匹配,前端预留 5s 冗余 */
|
||||||
|
const MATCH_TIMEOUT_MS = 20 * 1000;
|
||||||
|
|
||||||
|
/** 清除超时计时器 */
|
||||||
|
const clearMatchTimeout = () => {
|
||||||
|
if (matchTimeoutTimer.value) {
|
||||||
|
clearTimeout(matchTimeoutTimer.value);
|
||||||
|
matchTimeoutTimer.value = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 超时处理:查询后端是否已分配对局
|
||||||
|
* - 有对局 → WS 消息丢失场景,自动跳入
|
||||||
|
* - 无对局 → 真正超时,提示用户并返回大厅
|
||||||
|
*/
|
||||||
|
const handleMatchTimeout = async () => {
|
||||||
|
try {
|
||||||
|
const battle = await getBattleAPI();
|
||||||
|
if (battle && battle.matchId) {
|
||||||
|
uni.showToast({ title: "匹配成功,正在进入...", icon: "none" });
|
||||||
|
if (battle.mode <= 3) {
|
||||||
|
uni.redirectTo({ url: `/pages/team-battle?battleId=${battle.matchId}` });
|
||||||
|
} else {
|
||||||
|
uni.redirectTo({ url: `/pages/melee-battle?battleId=${battle.matchId}` });
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
uni.showToast({ title: "匹配超时,请重试", icon: "none" });
|
||||||
|
try {
|
||||||
|
if (gameType.value && teamSize.value) {
|
||||||
|
await matchGameAPI(false, gameType.value, teamSize.value);
|
||||||
|
}
|
||||||
|
} catch (_) { /* 取消失败忽略 */ }
|
||||||
|
uni.navigateBack();
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
uni.showToast({ title: "匹配超时,请重试", icon: "none" });
|
||||||
|
uni.navigateBack();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
async function stopMatch() {
|
async function stopMatch() {
|
||||||
uni.$showHint(3);
|
uni.$showHint(3);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 取消匹配,带容错处理:
|
||||||
|
* - 取消成功 → 返回大厅
|
||||||
|
* - 取消失败(后端已分配对局但 WS 未到达)→ 查询并跳入当前对局
|
||||||
|
*/
|
||||||
async function cancelMatch() {
|
async function cancelMatch() {
|
||||||
if (gameType.value && teamSize.value) {
|
clearMatchTimeout();
|
||||||
await matchGameAPI(false, gameType.value, teamSize.value);
|
try {
|
||||||
|
if (gameType.value && teamSize.value) {
|
||||||
|
await matchGameAPI(false, gameType.value, teamSize.value);
|
||||||
|
}
|
||||||
|
uni.navigateBack();
|
||||||
|
} catch (e) {
|
||||||
|
// 取消匹配接口失败,尝试查询是否已被分配对局
|
||||||
|
try {
|
||||||
|
const battle = await getBattleAPI();
|
||||||
|
if (battle && battle.matchId) {
|
||||||
|
if (battle.mode <= 3) {
|
||||||
|
uni.redirectTo({ url: `/pages/team-battle?battleId=${battle.matchId}` });
|
||||||
|
} else {
|
||||||
|
uni.redirectTo({ url: `/pages/melee-battle?battleId=${battle.matchId}` });
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
uni.navigateBack();
|
||||||
|
}
|
||||||
|
} catch (_) {
|
||||||
|
uni.navigateBack();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
uni.navigateBack()
|
|
||||||
}
|
}
|
||||||
|
|
||||||
async function onReceiveMessage(msg) {
|
async function onReceiveMessage(msg) {
|
||||||
@@ -26,6 +94,8 @@ async function onReceiveMessage(msg) {
|
|||||||
onComplete.value = () => {}
|
onComplete.value = () => {}
|
||||||
}
|
}
|
||||||
if (msg.type === MESSAGETYPESV2.AboutToStart) {
|
if (msg.type === MESSAGETYPESV2.AboutToStart) {
|
||||||
|
// 收到开始消息,清除超时计时器
|
||||||
|
clearMatchTimeout();
|
||||||
// 使用后端下发的 mode 字段判断跳转目标,与好友约战(battle-room.vue)保持一致
|
// 使用后端下发的 mode 字段判断跳转目标,与好友约战(battle-room.vue)保持一致
|
||||||
// mode <= 3 为团队对抗,mode > 3 为大乱斗,覆盖全部 gameType(1~5),不再遗漏
|
// mode <= 3 为团队对抗,mode > 3 为大乱斗,覆盖全部 gameType(1~5),不再遗漏
|
||||||
if (msg.mode <= 3) {
|
if (msg.mode <= 3) {
|
||||||
@@ -56,6 +126,7 @@ onMounted(() => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
onBeforeUnmount(() => {
|
||||||
|
clearMatchTimeout();
|
||||||
uni.setKeepScreenOn({
|
uni.setKeepScreenOn({
|
||||||
keepScreenOn: false,
|
keepScreenOn: false,
|
||||||
});
|
});
|
||||||
@@ -66,6 +137,9 @@ onBeforeUnmount(() => {
|
|||||||
onShow(async () => {
|
onShow(async () => {
|
||||||
if (gameType.value && teamSize.value) {
|
if (gameType.value && teamSize.value) {
|
||||||
matchGameAPI(true, gameType.value, teamSize.value);
|
matchGameAPI(true, gameType.value, teamSize.value);
|
||||||
|
// 启动超时计时器,防止 WS 消息丢失或长时间无对手导致用户卡死
|
||||||
|
clearMatchTimeout();
|
||||||
|
matchTimeoutTimer.value = setTimeout(handleMatchTimeout, MATCH_TIMEOUT_MS);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -115,7 +115,7 @@ onLoad((options) => {
|
|||||||
:blueTeam="item.teams[1] ? item.teams[1].players : []"
|
:blueTeam="item.teams[1] ? item.teams[1].players : []"
|
||||||
:redTeam="item.teams[2] ? item.teams[2].players : []"
|
:redTeam="item.teams[2] ? item.teams[2].players : []"
|
||||||
:winner="item.winTeam"
|
:winner="item.winTeam"
|
||||||
:showRank="item.teams[0]"
|
:showRank="!!item.teams[0]"
|
||||||
:showHeader="false"
|
:showHeader="false"
|
||||||
/>
|
/>
|
||||||
</view>
|
</view>
|
||||||
@@ -138,7 +138,7 @@ onLoad((options) => {
|
|||||||
:blueTeam="item.teams[1] ? item.teams[1].players : []"
|
:blueTeam="item.teams[1] ? item.teams[1].players : []"
|
||||||
:redTeam="item.teams[2] ? item.teams[2].players : []"
|
:redTeam="item.teams[2] ? item.teams[2].players : []"
|
||||||
:winner="item.winTeam"
|
:winner="item.winTeam"
|
||||||
:showRank="item.teams[0]"
|
:showRank="!!item.teams[0]"
|
||||||
:showHeader="false"
|
:showHeader="false"
|
||||||
/>
|
/>
|
||||||
</view>
|
</view>
|
||||||
|
|||||||
@@ -42,6 +42,8 @@ const matchStatus = ref(undefined);
|
|||||||
const updateRemainSecond = ref(0);
|
const updateRemainSecond = ref(0);
|
||||||
/** 对战来源类型(1=好友约战,2=匹配对战),用于结算页分流 */
|
/** 对战来源类型(1=好友约战,2=匹配对战),用于结算页分流 */
|
||||||
const battleWay = ref(0);
|
const battleWay = ref(0);
|
||||||
|
/** 上一次处理的 ToSomeoneShoot 关键字段,用于去重过滤重复消息 */
|
||||||
|
const lastToSomeoneShootKey = ref("");
|
||||||
|
|
||||||
const recoverData = (battleInfo, {force = false, arrowOnly = false} = {}) => {
|
const recoverData = (battleInfo, {force = false, arrowOnly = false} = {}) => {
|
||||||
try {
|
try {
|
||||||
@@ -183,6 +185,11 @@ async function onReceiveMessage(msg) {
|
|||||||
if (msg.type === MESSAGETYPESV2.BattleStart) {
|
if (msg.type === MESSAGETYPESV2.BattleStart) {
|
||||||
start.value = true;
|
start.value = true;
|
||||||
} else if (msg.type === MESSAGETYPESV2.ToSomeoneShoot) {
|
} else if (msg.type === MESSAGETYPESV2.ToSomeoneShoot) {
|
||||||
|
// 去重防护:如果 playerId + round 与上一次处理完全相同,则忽略重复推送的消息
|
||||||
|
// (防止 onBeforeUnmount 未及时 off 和页面重创建导致同一事件被处理多次)
|
||||||
|
const key = `${msg?.current?.playerId}-${msg?.current?.round}`;
|
||||||
|
if (key === lastToSomeoneShootKey.value) return;
|
||||||
|
lastToSomeoneShootKey.value = key;
|
||||||
recoverData(msg);
|
recoverData(msg);
|
||||||
} else if (msg.type === MESSAGETYPESV2.ShootResult) {
|
} else if (msg.type === MESSAGETYPESV2.ShootResult) {
|
||||||
uni.$emit("update-remain", {stop: true})
|
uni.$emit("update-remain", {stop: true})
|
||||||
@@ -228,6 +235,8 @@ onBeforeUnmount(() => {
|
|||||||
uni.setKeepScreenOn({
|
uni.setKeepScreenOn({
|
||||||
keepScreenOn: false,
|
keepScreenOn: false,
|
||||||
});
|
});
|
||||||
|
// 注销所有第三方事件盓听,防止页面重创建时监听叠加导致消息重复处理
|
||||||
|
uni.$off("socket-inbox", onReceiveMessage);
|
||||||
uni.$off("audioEnded", onAudioEnded);
|
uni.$off("audioEnded", onAudioEnded);
|
||||||
audioManager.stopAll();
|
audioManager.stopAll();
|
||||||
});
|
});
|
||||||
@@ -242,6 +251,10 @@ onShow(async () => {
|
|||||||
url: `/pages/friend-battle-result?battleId=${result.matchId}`,
|
url: `/pages/friend-battle-result?battleId=${result.matchId}`,
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
|
// shootNumber 来自后端,恢复状态时同步 totalShot,防止 BattleStart 不重新推送导致显示错误
|
||||||
|
if (result.shootNumber) {
|
||||||
|
uni.$emit("update-shot", { currentShot: 0, totalShot: result.shootNumber });
|
||||||
|
}
|
||||||
recoverData(result, {force: true});
|
recoverData(result, {force: true});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user