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

update:优化新版个人训练

Browse Source
This commit is contained in:
zhangyi
2026-07-23 14:38:45 +08:00
parent c0d061d7d5
commit ef499e1448
6 changed files with 293 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/training/practise-one.vue
+224 -12
View File
@@ -25,7 +25,7 @@ import {
MATCH_WS_STATE_EVENT,
} from "@/matchWebsocket";
import { sharePractiseData } from "@/canvas";
import { wxShare, debounce } from "@/util";
import { wxShare, debounce, getDirectionText } from "@/util";
import { MESSAGETYPESV2, roundsName } from "@/constants";
import useStore from "@/store";
@@ -56,6 +56,11 @@ const tips = ref("");
const targetType = ref(defaultTargetType);
const trainingParams = ref({});
const practiceInfo = ref({});
// 服务端状态立即落到 practiceInfo，精准训练的目标区域单独延迟展示。
const visiblePrecisionTarget = ref({
randomBlock: 0,
randomRingArea: 0,
});
const trainingDifficultyStorageKey = "training-selection";
const trainingDifficultyRefreshEvent = "training-difficulty-refresh";
const useHighlightTest = ref(false);
@@ -75,7 +80,14 @@ const connectionClosed = ref(true);
let stopPracticeTask = null;
let practiceSyncTimer = null;
let waitingPracticeSync = false;
let shotPresentationGeneration = 0;
const audioWaiters = new Set();
const shotEffectWaiters = new Map();
const PRACTICE_SYNC_TIMEOUT_MS = 5000;
const SHOT_EFFECT_WAIT_TIMEOUT_MS = 1200;
const AUDIO_TIMEOUT_BASE = 3500;
const AUDIO_TIMEOUT_PER_KEY = 2600;
const AUDIO_TIMEOUT_MAX = 12000;
const env = computed(() => {
try {
@@ -92,6 +104,9 @@ const showResult = computed(
() => pageStage.value === pageStages.RESULT && hasPractiseResult.value
);
const isSvip = computed(() => practiceInfo.value.sVip === true);
const isVip = computed(
() => practiceInfo.value.vip === true && !isSvip.value
);
const trainingType = computed(
() => practiceInfo.value.trainingType || trainingParams.value.type || ""
@@ -108,6 +123,15 @@ const getPositiveInteger = (value) => {
return Number.isInteger(numberValue) && numberValue > 0 ? numberValue : 0;
};
const getPrecisionTargetSnapshot = (source = {}) => ({
randomBlock: getPositiveInteger(source.randomBlock),
randomRingArea: getPositiveInteger(source.randomRingArea),
});
const applyVisiblePrecisionTarget = (source = {}) => {
visiblePrecisionTarget.value = getPrecisionTargetSnapshot(source);
};
const currentDifficultyLevel = computed(
() =>
getPositiveInteger(practiseResult.value.difficultyLevel) ||
@@ -136,7 +160,7 @@ const precisionRandomBlock = computed(() => {
const block = getPositiveInteger(
useHighlightTest.value
? highlightTestState.value.randomBlock
: practiceInfo.value.randomBlock
: visiblePrecisionTarget.value.randomBlock
);
return block <= precisionBlocks.value ? block : 0;
});
@@ -145,7 +169,7 @@ const precisionRandomRingArea = computed(() => {
const ring = getPositiveInteger(
useHighlightTest.value
? highlightTestState.value.randomRingArea
: practiceInfo.value.randomRingArea
: visiblePrecisionTarget.value.randomRingArea
);
return ring >= 1 && ring <= 10 ? ring : 0;
});
@@ -239,6 +263,7 @@ const practiceInfoFields = [
"statusText",
"startTime",
"targetType",
"vip",
"sVip",
"trainingType",
"difficultyLevel",
@@ -332,6 +357,143 @@ const syncPracticeInfo = (message = {}) => {
};
};
const buildShootResultAudioKeys = (message = {}) => {
const latestDetail =
Array.isArray(message.details) && message.details.length > 0
? message.details[message.details.length - 1]
: null;
// 与原 ShootProgress 保持一致：优先使用当前箭，details 仅作兼容兜底。
const arrow = message.shootData || latestDetail;
if (!arrow) return [];
if (
arrow.playerId !== undefined &&
arrow.playerId !== null &&
String(arrow.playerId) !== String(user.value?.id)
) {
return [];
}
const keys = [
arrow.ring ? `${arrow.ringX ? "X" : arrow.ring}环` : "未上靶",
];
if (arrow.angle !== null && arrow.angle !== undefined) {
keys.push(`向${getDirectionText(arrow.angle)}调整`);
}
if (arrow.threeConsecutive10Rings === true) {
keys.push("tententen");
}
return keys;
};
const playAudioKeysAndWait = (keys) => {
const audioKeys = (Array.isArray(keys) ? keys : [keys]).filter(Boolean);
if (audioKeys.length === 0) return Promise.resolve();
const expectedKey = audioKeys[audioKeys.length - 1];
const waitTime = Math.min(
AUDIO_TIMEOUT_MAX,
Math.max(AUDIO_TIMEOUT_BASE, audioKeys.length * AUDIO_TIMEOUT_PER_KEY)
);
return new Promise((resolve) => {
let settled = false;
let timer = null;
const waiter = {
expectedKey,
done: () => {
if (settled) return;
settled = true;
if (timer) clearTimeout(timer);
audioWaiters.delete(waiter);
resolve();
},
};
timer = setTimeout(() => {
if (typeof audioManager.recoverIfStale === "function") {
audioManager.recoverIfStale(expectedKey);
}
waiter.done();
}, waitTime);
audioWaiters.add(waiter);
try {
audioManager.play(audioKeys, false);
} catch (error) {
console.error("training shoot result audio failed", error);
waiter.done();
}
});
};
const shouldWaitForShotEffect = (shot) => {
const x = Number(shot?.x);
const y = Number(shot?.y);
return (
isSvip.value &&
Number(shot?.ring) > 0 &&
Number.isFinite(x) &&
Number.isFinite(y)
);
};
const waitForShotEffect = (token, shouldWait) => {
if (!shouldWait) return Promise.resolve();
return new Promise((resolve) => {
let settled = false;
let timer = null;
const waiter = {
done: () => {
if (settled) return;
settled = true;
if (timer) clearTimeout(timer);
if (shotEffectWaiters.get(token) === waiter) {
shotEffectWaiters.delete(token);
}
resolve();
},
};
timer = setTimeout(waiter.done, SHOT_EFFECT_WAIT_TIMEOUT_MS);
shotEffectWaiters.set(token, waiter);
});
};
const invalidateShotPresentations = ({ resetVisible = false } = {}) => {
shotPresentationGeneration += 1;
Array.from(audioWaiters).forEach((waiter) => waiter.done());
Array.from(shotEffectWaiters.values()).forEach((waiter) => waiter.done());
if (resetVisible) {
applyVisiblePrecisionTarget();
}
return shotPresentationGeneration;
};
const onShotEffectComplete = (payload = {}) => {
const token = Number(payload?.token ?? payload);
if (!Number.isFinite(token)) return;
shotEffectWaiters.get(token)?.done();
};
const commitPrecisionTargetAfterPresentation = async ({
generation,
target,
audioPromise,
effectPromise,
}) => {
await Promise.all([audioPromise, effectPromise]);
if (
generation !== shotPresentationGeneration ||
practiceEnded.value ||
!isShootingStage.value ||
trainingType.value !== "precision"
) {
return;
}
visiblePrecisionTarget.value = target;
};
const createPracticeEndSnapshot = (message = {}) => {
const source = {
...practiceInfo.value,
@@ -436,11 +598,13 @@ const onPracticeInfoSync = (payload = {}) => {
const shouldShowDistance =
waitingPracticeSync && pageStage.value === pageStages.LOADING;
cancelPracticeSyncWait();
invalidateShotPresentations();
// 14 是完整快照，先清空旧值，避免 proto3 省略的 0 沿用上一份状态。
practiceInfo.value = {};
practiceEndSnapshot.value = {};
syncPracticeInfo(snapshot);
applyVisiblePrecisionTarget(practiceInfo.value);
scores.value = Array.isArray(snapshot.details) ? snapshot.details : [];
if (shouldShowDistance) {
@@ -667,6 +831,7 @@ const onReady = async () => {
clearHighlightTestTimer();
useHighlightTest.value = false;
practiceEndSnapshot.value = {};
invalidateShotPresentations();
try {
await startPractiseAPI(practiseId.value);
practiseResult.value = {};
@@ -694,6 +859,7 @@ const enterPracticeResult = (result = {}) => {
// 正常结算不调用 stop，只清理上下文并断开比赛服连接。
practiceEnded.value = true;
invalidateShotPresentations();
clearPracticeRuntimeContext();
closePracticeConnection("training-practice-result");
pageStage.value = pageStages.RESULT;
@@ -724,15 +890,47 @@ const onOver = async () => {
};
async function onReceiveMessage(msg) {
const previousScoreLength = scores.value.length;
syncPracticeInfo(msg);
if (msg.type === MESSAGETYPESV2.ShootResult && isShootingStage.value) {
if (msg.type === MESSAGETYPESV2.BattleStart) {
invalidateShotPresentations();
applyVisiblePrecisionTarget(practiceInfo.value);
} else if (
msg.type === MESSAGETYPESV2.ShootResult &&
isShootingStage.value
) {
let hasNewShot = false;
let latestShot = null;
if (Array.isArray(msg.details)) {
const previousScoreLength = scores.value.length;
scores.value = msg.details;
if (msg.details.length === previousScoreLength + 1) {
shotEffectToken.value += 1;
hasNewShot = msg.details.length === previousScoreLength + 1;
latestShot = hasNewShot ? msg.details[msg.details.length - 1] : null;
}
if (trainingType.value === "precision") {
const generation = invalidateShotPresentations();
const target = getPrecisionTargetSnapshot(practiceInfo.value);
const nextEffectToken = hasNewShot ? shotEffectToken.value + 1 : 0;
const effectPromise = waitForShotEffect(
nextEffectToken,
hasNewShot && shouldWaitForShotEffect(latestShot)
);
const audioPromise = playAudioKeysAndWait(
buildShootResultAudioKeys(msg)
);
if (hasNewShot) {
shotEffectToken.value = nextEffectToken;
}
void commitPrecisionTargetAfterPresentation({
generation,
target,
audioPromise,
effectPromise,
});
} else if (hasNewShot) {
shotEffectToken.value += 1;
}
} else if (msg.type === MESSAGETYPESV2.BattleEnd) {
practiceEndSnapshot.value = createPracticeEndSnapshot(msg);
@@ -747,6 +945,7 @@ async function onReceiveMessage(msg) {
};
}
practiceEnded.value = true;
invalidateShotPresentations();
clearPracticeRuntimeContext();
// setTimeout(onOver, 1500);
}
@@ -756,6 +955,7 @@ function onComplete() {
pageStage.value = pageStages.LOADING;
start.value = false;
practiceEnded.value = true;
invalidateShotPresentations();
clearPracticeRuntimeContext();
closePracticeConnection("training-practice-complete");
uni.$emit(trainingDifficultyRefreshEvent);
@@ -771,6 +971,7 @@ async function onRetry() {
practiseResult.value = {};
practiceEndSnapshot.value = {};
practiceInfo.value = {};
invalidateShotPresentations({ resetVisible: true });
start.value = false;
scores.value = [];
shotEffectToken.value = 0;
@@ -788,9 +989,12 @@ const onClickShare = debounce(async () => {
await wxShare("shareCanvas");
});
function onAudioEnded(s) {
if (s.indexOf("比赛结束") >= 0) {
onOver()
function onAudioEnded(key) {
Array.from(audioWaiters).forEach((waiter) => {
if (waiter.expectedKey === key) waiter.done();
});
if (String(key || "").includes("比赛结束")) {
void onOver();
}
}
@@ -802,6 +1006,7 @@ const updateSound = () => {
const exitPractice = async () => {
if (exiting.value) return;
exiting.value = true;
invalidateShotPresentations();
try {
await stopCurrentPractice();
@@ -813,6 +1018,7 @@ const exitPractice = async () => {
};
onHide(() => {
invalidateShotPresentations();
// 小程序被切到后台时尽早通知后端，作为杀进程前的尽力兜底。
if (
!exiting.value &&
@@ -842,6 +1048,7 @@ onShow(async () => {
});
onUnload(() => {
invalidateShotPresentations();
clearPracticeRuntimeContext();
void stopCurrentPractice();
closePracticeConnection("training-practice-unload");
@@ -869,6 +1076,7 @@ onMounted(() => {
});
onBeforeUnmount(() => {
invalidateShotPresentations();
clearPracticeRuntimeContext();
void stopCurrentPractice();
uni.setKeepScreenOn({
@@ -904,6 +1112,9 @@ onBeforeUnmount(() => {
:total="timeLimit"
:countdownEnabled="hasTimeLimit"
:trainingType="trainingType"
:isVip="isVip"
:isSvip="isSvip"
:externalShootResultAudio="trainingType === 'precision'"
:onStop="onTimeLimitReached"
/>
<view class="user-row">
@@ -925,8 +1136,9 @@ onBeforeUnmount(() => {
:activeSector="precisionRandomBlock"
:activeRing="precisionRandomRingArea"
:showSectorLabels="precisionBlocks > 0"
@shot-effect-complete="onShotEffectComplete"
/>
<view v-if="env !== 'release'" class="highlight-test-actions">
<!-- <view v-if="env !== 'release'" class="highlight-test-actions">
<button
class="highlight-test-btn"
hover-class="none"
@@ -941,7 +1153,7 @@ onBeforeUnmount(() => {
>
重置高亮
</button>
</view>
</view> -->
<view class="sound-text-box">
<button class="sound-btn" hover-class="none" @click="updateSound">
<image