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/components/BowData.vue
+21 -3
View File
@@ -1,4 +1,5 @@
<script setup>
import { computed } from "vue";
import AppBackground from "@/components/AppBackground.vue";
import Avatar from "@/components/Avatar.vue";
import BowTarget from "./BowTarget.vue";
@@ -7,6 +8,8 @@ import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { user } = storeToRefs(store);
const isSvip = computed(() => user.value.sVip === true);
const isVip = computed(() => user.value.vip === true && !isSvip.value);
const props = defineProps({
show: {
@@ -35,8 +38,20 @@ const props = defineProps({
<view>
<Avatar :src="user.avatar" :rankLvl="user.rankLvl" :size="45" />
<view>
<text>{{ user.nickName }}</text>
<!-- <text>{{ user.lvlName }}</text> -->
<view
:class="[
'header-nickname',
'member-nickname',
isVip ? 'member-nickname--vip' : '',
isSvip ? 'member-nickname--svip' : '',
]"
>
<text class="member-nickname__text">{{ user.nickName }}</text>
<text v-if="isSvip" class="member-nickname__shine">
{{ user.nickName }}
</text>
</view>
<text>{{ user.lvlName }}</text>
</view>
</view>
<view @click="onClose">
@@ -95,9 +110,12 @@ const props = defineProps({
margin-left: 10px;
color: #fff;
}
.header-nickname {
max-width: 240rpx;
}
.header > view:first-child > view:last-child > text:last-child {
font-size: 10px;
background-color: #5f51ff;
/* background-color: #5f51ff; */
padding: 2px 5px;
border-radius: 10px;
margin-top: 5px;
src/pages/training/components/BowTarget.vue
+13 -2
View File
@@ -86,6 +86,8 @@ const props = defineProps({
},
});
const emit = defineEmits(["shot-effect-complete"]);
const pMode = ref(true);
const latestOne = ref(null);
const bluelatestOne = ref(null);
@@ -248,16 +250,25 @@ function triggerShotEffect(shot, index) {
clearTipTimer();
latestOne.value = null;
hiddenLatestKey.value = key;
shotEffect.value = { key, shot };
shotEffect.value = {
key,
shot,
token: props.shotEffectToken,
};
}
function completeShotEffect(key) {
if (!shotEffect.value || shotEffect.value.key !== key) return;
const shot = shotEffect.value.shot;
const completedEffect = shotEffect.value;
const shot = completedEffect.shot;
hiddenLatestKey.value = "";
shotEffect.value = null;
showShotTip(shot);
emit("shot-effect-complete", {
key,
token: completedEffect.token,
});
}
function shouldHideLatestHit(index) {
src/pages/training/components/ShootProgress.vue
+29 -2
View File
@@ -35,6 +35,18 @@ const props = defineProps({
type: String,
default: "precision",
},
isVip: {
type: Boolean,
default: false,
},
isSvip: {
type: Boolean,
default: false,
},
externalShootResultAudio: {
type: Boolean,
default: false,
},
currentRound: {
type: Number,
default: 0,
@@ -195,6 +207,8 @@ async function onReceiveMessage(msg) {
} else if (msg.type === MESSAGETYPESV2.BattleEnd) {
audioManager.play("比赛结束", false);
} else if (msg.type === MESSAGETYPESV2.ShootResult) {
// 精准训练由页面统一等待语音和飞箭结束，其他训练保持原播放链路。
if (props.externalShootResultAudio) return;
const latestDetail =
Array.isArray(msg.details) && msg.details.length > 0
? msg.details[msg.details.length - 1]
@@ -261,7 +275,19 @@ onBeforeUnmount(() => {
image-mode="aspectFill"
/>
</view>
<text class="progress-card__name">{{ displayName }}</text>
<view
:class="[
'progress-card__name',
'member-nickname',
isVip && !isSvip ? 'member-nickname--vip' : '',
isSvip ? 'member-nickname--svip' : '',
]"
>
<text class="member-nickname__text">{{ displayName }}</text>
<text v-if="isSvip" class="member-nickname__shine">
{{ displayName }}
</text>
</view>
</view>
<!-- <button class="progress-card__sound" hover-class="none" @click="updateSound">
@@ -338,9 +364,10 @@ onBeforeUnmount(() => {
.progress-card__name {
width: 86rpx;
color: #E7BA80;
color: #fff;
font-size: 18rpx;
line-height: 1;
justify-content: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
src/pages/training/index.vue
+4 -5
View File
@@ -30,6 +30,8 @@ const trainingModeIconMap = {
};
// 训练项目卡片标题图，按接口 id 映射 CDN 资源。
const trainingModeTitleImageMap = {
base:
"https://static.shelingxingqiu.com/shootmini/static/training-home/jichuxunlian.png",
endurance:
"https://static.shelingxingqiu.com/shootmini/static/training-home/nailixunlian.png",
precision:
@@ -515,7 +517,6 @@ onShow(async () => {
/>
<view class="featured-card-mask"></view>
<view class="featured-card-copy">
<text class="featured-card-title">常规训练</text>
<text class="featured-card-subtitle">12箭练习</text>
</view>
</view>
@@ -857,13 +858,12 @@ onShow(async () => {
top: 0;
width: 278rpx;
height: 150rpx;
background: linear-gradient(90deg, #ffdaa0 0%, #f5c580 74%, rgba(245, 197, 128, 0) 100%);
}
.featured-card-copy {
position: absolute;
left: 30rpx;
top: 34rpx;
left: 174rpx;
top: 58rpx;
display: flex;
flex-direction: column;
}
@@ -883,7 +883,6 @@ onShow(async () => {
color: #895409;
font-size: 22rpx;
line-height: 32rpx;
opacity: 0.72;
}
.mode-grid {
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