17 Commits

23 changed files with 905 additions and 234 deletions

View File

@@ -22,7 +22,8 @@
const {
updateUser,
updateOnline,
clearSessionState
clearSessionState,
clearDevice
} = store;
watch(
@@ -63,6 +64,11 @@
updateOnline(data.online);
}
function onDeviceBindInvalid() {
clearDevice();
uni.setStorageSync("calibration", false);
}
function onDeviceShoot() {
// audioManager.play("射箭声音")
}
@@ -78,6 +84,7 @@
uni.$on("update-user", emitUpdateUser);
uni.$on("update-online", emitUpdateOnline);
uni.$on("session-kicked-out", onSessionKickedOut);
uni.$on("device-bind-invalid", onDeviceBindInvalid);
const token = uni.getStorageSync(
`${uni.getAccountInfoSync().miniProgram.envVersion}_token`
);
@@ -91,6 +98,7 @@
uni.$off("update-user", emitUpdateUser);
uni.$off("update-online", emitUpdateOnline);
uni.$off("session-kicked-out", onSessionKickedOut);
uni.$off("device-bind-invalid", onDeviceBindInvalid);
websocket.closeWebSocket();
});
</script>

View File

@@ -70,6 +70,15 @@ function request(method, url, data = {}) {
resolve({binded: true});
return;
}
if (message === "BIND_FAILD") {
uni.$emit("device-bind-invalid");
uni.showToast({
title: "设备绑定状态已失效,请重新绑定",
icon: "none",
});
reject({type: "DEVICE_BIND_INVALID", message});
return;
}
if (message === "ERROR_ORDER_UNPAY") {
uni.showToast({
title: "当前有未支付订单",

View File

@@ -1,3 +1,6 @@
export const AUDIO_INTERRUPTION_BEGIN_EVENT = "audio-interruption-begin";
export const AUDIO_INTERRUPTION_END_EVENT = "audio-interruption-end";
export const audioFils = {
tententen: "https://static.shelingxingqiu.com/shootmini/static/audio/tententen.mp3",
点击按钮: "https://static.shelingxingqiu.com/shootmini/static/audio/%E7%82%B9%E5%87%BB%E6%8C%89%E9%92%AE.mp3",
@@ -97,7 +100,7 @@ function debugLog(...args) {
const envVersion = accountInfo.miniProgram.envVersion;
// 只在体验版打印日志,正式版(release)和开发版(develop)不打印
if (envVersion === "trial") {
if (envVersion === "trial" || envVersion === "develop") {
console.log(...args);
}
}
@@ -127,6 +130,7 @@ class AudioManager {
// 防重复播放保护
this.lastPlayKey = null;
this.lastPlayAt = 0;
this.isInterrupted = false;
// 静音开关
this.isMuted = false;
@@ -141,10 +145,41 @@ class AudioManager {
this.localFileCache = uni.getStorageSync("audio_local_files") || {};
// 启动时自动清理过期的缓存文件URL 已不在 audioFils 中的文件)
this.cleanObsoleteCache();
this.bindAudioInterruptionEvents();
this.initAudios();
}
bindAudioInterruptionEvents() {
if (this._audioInterruptionBound) return;
this._audioInterruptionBound = true;
const begin = () => {
if (this.isInterrupted) return;
this.isInterrupted = true;
this.stopAll();
this.isSequenceRunning = false;
this.sequenceQueue = [];
this.sequenceIndex = 0;
this.pendingPlayKey = null;
uni.$emit(AUDIO_INTERRUPTION_BEGIN_EVENT);
};
const end = () => {
if (!this.isInterrupted) return;
this.isInterrupted = false;
uni.$emit(AUDIO_INTERRUPTION_END_EVENT);
void this.reloadAll();
};
if (typeof uni?.onAudioInterruptionBegin === "function") {
uni.onAudioInterruptionBegin(begin);
}
if (typeof uni?.onAudioInterruptionEnd === "function") {
uni.onAudioInterruptionEnd(end);
}
}
// 清理不再使用的缓存文件
cleanObsoleteCache() {
const activeUrls = new Set(Object.values(audioFils));
@@ -461,6 +496,10 @@ class AudioManager {
// 播放指定音频或音频数组(数组则按顺序连续播放)
play(input, interrupt = true) {
if (this.isInterrupted) {
debugLog("音频处理中断状态,忽略播放请求");
return;
}
// 统一规范化为队列
let queue = [];
if (Array.isArray(input)) {
@@ -514,6 +553,10 @@ class AudioManager {
// 内部方法:播放单个 key
_playSingle(key, forceStopAll = false) {
if (this.isInterrupted) {
debugLog(`音频处理中断状态,跳过播放: ${key}`);
return;
}
// 200ms 内的同 key 重复播放直接忽略,避免“比比赛开始”这类重复首音
const now = Date.now();
if (this.lastPlayKey === key && now - this.lastPlayAt < 250) {
@@ -557,7 +600,13 @@ class AudioManager {
// 显式授权播放并立即播放
this.allowPlayMap.set(key, true);
try {
audio.play();
} catch (err) {
this.allowPlayMap.set(key, false);
debugLog(`音频 ${key} 播放调用失败`, err?.errMsg || err);
return;
}
this.currentPlayingKey = key;
this.lastPlayKey = key;
this.lastPlayAt = Date.now();

View File

@@ -34,6 +34,18 @@ const props = defineProps({
type: Boolean,
default: false,
},
targetRadius: {
type: Number,
default: 20,
},
hitRadiusPx: {
type: Number,
default: 2,
},
zoomHitRadiusPx: {
type: Number,
default: 5,
},
});
const pMode = ref(true);
@@ -45,6 +57,8 @@ const timer = ref(null);
const dirTimer = ref(null);
const angle = ref(null);
const circleColor = ref("");
const ROUND_TIP_OFFSET_Y = -32;
const EXPERIENCE_TIP_OFFSET_Y = -68;
watch(
() => props.scores,
@@ -80,13 +94,92 @@ watch(
}
);
function calcRealX(num, offset = 3.4) {
const len = 20.4 + num;
return `calc(${(len / 40.8) * 100 - offset / 2}%)`;
const safeTargetRadius = computed(() => {
const radius = Number(props.targetRadius);
return Number.isFinite(radius) && radius > 0 ? radius : 20;
});
const currentHitRadiusPx = computed(() => {
const radius = Number(
pMode.value ? props.zoomHitRadiusPx : props.hitRadiusPx
);
return Number.isFinite(radius) && radius >= 0 ? radius : 0;
});
function getShotPoint(shot, fallbackCenter = false) {
const x = Number(shot?.x);
const y = Number(shot?.y);
if (Number.isFinite(x) && Number.isFinite(y)) return { x, y };
return fallbackCenter ? { x: 0, y: 0 } : null;
}
function calcRealY(num, offset = 3.4) {
const len = num < 0 ? Math.abs(num) + 20.4 : 20.4 - num;
return `calc(${(len / 40.8) * 100 - offset / 2}%)`;
function getPointDirection(point) {
if (!point) return null;
const distance = Math.sqrt(point.x * point.x + point.y * point.y);
if (distance === 0) return null;
return {
x: point.x / distance,
y: point.y / distance,
};
}
function formatPxOffset(value) {
if (!value) return "";
const operator = value > 0 ? "+" : "-";
return ` ${operator} ${Math.abs(value)}px`;
}
function formatTargetPosition(percent, offset) {
const pxOffset = formatPxOffset(offset);
return pxOffset ? `calc(${percent}%${pxOffset})` : `${percent}%`;
}
function getTargetPositionStyle(point, offsetPx = 0, extraOffset = {}) {
if (!point) return { display: "none" };
const radius = safeTargetRadius.value;
const diameter = radius * 2;
const direction = getPointDirection(point);
const xOffset = (direction ? direction.x * offsetPx : 0) + (extraOffset.x || 0);
const yOffset = (direction ? -direction.y * offsetPx : 0) + (extraOffset.y || 0);
const leftPercent = ((point.x + radius) / diameter) * 100;
const topPercent = ((radius - point.y) / diameter) * 100;
return {
left: formatTargetPosition(leftPercent, xOffset),
top: formatTargetPosition(topPercent, yOffset),
transform: "translate(-50%, -50%)",
};
}
function getHitStyle(shot) {
const radius = currentHitRadiusPx.value;
const point = getShotPoint(shot);
return {
...getTargetPositionStyle(point, radius),
width: `${radius * 2}px`,
height: `${radius * 2}px`,
};
}
function getRoundTipStyle(shot) {
const point = getShotPoint(shot, true);
return getTargetPositionStyle(
point,
shot?.ring ? currentHitRadiusPx.value : 0,
{ y: ROUND_TIP_OFFSET_Y }
);
}
function getExperienceTipStyle(shot) {
const point = getShotPoint(shot, true);
return getTargetPositionStyle(
point,
shot?.ring ? currentHitRadiusPx.value : 0,
{ y: EXPERIENCE_TIP_OFFSET_Y }
);
}
const simulShoot = async () => {
if (device.value.deviceId) await simulShootAPI(device.value.deviceId);
@@ -169,20 +262,14 @@ onBeforeUnmount(() => {
<view
v-if="latestOne && latestOne.ring && user.id === latestOne.playerId"
class="e-value fade-in-out"
:style="{
left: calcRealX(latestOne.ring ? latestOne.x : 0, 20),
top: calcRealY(latestOne.ring ? latestOne.y : 0, 40),
}"
:style="getExperienceTipStyle(latestOne)"
>
经验 +1
</view>
<view
v-if="latestOne"
class="round-tip fade-in-out"
:style="{
left: calcRealX(latestOne.ring ? latestOne.x : 0, 28),
top: calcRealY(latestOne.ring ? latestOne.y : 0, 28),
}"
:style="getRoundTipStyle(latestOne)"
>{{ latestOne.ringX ? "X" : latestOne.ring || "未上靶"
}}<text v-if="latestOne.ring"></text>
</view>
@@ -193,20 +280,14 @@ onBeforeUnmount(() => {
user.id === bluelatestOne.playerId
"
class="e-value fade-in-out"
:style="{
left: calcRealX(bluelatestOne.ring ? bluelatestOne.x : 0, 20),
top: calcRealY(bluelatestOne.ring ? bluelatestOne.y : 0, 40),
}"
:style="getExperienceTipStyle(bluelatestOne)"
>
经验 +1
</view>
<view
v-if="bluelatestOne"
class="round-tip fade-in-out"
:style="{
left: calcRealX(bluelatestOne.ring ? bluelatestOne.x : 0, 28),
top: calcRealY(bluelatestOne.ring ? bluelatestOne.y : 0, 28),
}"
:style="getRoundTipStyle(bluelatestOne)"
>{{ bluelatestOne.ringX ? "X" : bluelatestOne.ring || "未上靶"
}}<text v-if="bluelatestOne.ring">环</text></view
>
@@ -217,8 +298,7 @@ onBeforeUnmount(() => {
index === scores.length - 1 && latestOne ? 'pump-in' : ''
}`"
:style="{
left: calcRealX(bow.x, pMode ? '3.4' : '2'),
top: calcRealY(bow.y, pMode ? '3.4' : '2'),
...getHitStyle(bow),
backgroundColor: mode === 'solo' ? '#00bf04' : '#FF0000',
}"
><text v-if="pMode">{{ index + 1 }}</text></view
@@ -231,8 +311,7 @@ onBeforeUnmount(() => {
index === blueScores.length - 1 && bluelatestOne ? 'pump-in' : ''
}`"
:style="{
left: calcRealX(bow.x, pMode ? '3.4' : '2'),
top: calcRealY(bow.y, pMode ? '3.4' : '2'),
...getHitStyle(bow),
backgroundColor: '#1840FF',
}"
>
@@ -292,6 +371,31 @@ onBeforeUnmount(() => {
font-size: 24px;
margin-left: 5px;
}
@keyframes target-tip-fade-in-out {
0% {
transform: translate(-50%, -50%) translateY(20px);
opacity: 0;
}
30% {
transform: translate(-50%, -50%);
opacity: 1;
}
80% {
transform: translate(-50%, -50%);
opacity: 1;
}
100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
.round-tip.fade-in-out,
.e-value.fade-in-out {
animation: target-tip-fade-in-out 1.2s ease forwards;
}
.target > image:last-child {
width: 100%;
height: 100%;
@@ -302,21 +406,11 @@ onBeforeUnmount(() => {
z-index: 1;
color: #fff;
transition: all 0.3s ease;
}
.s-point {
width: 4px;
height: 4px;
min-width: 4px;
min-height: 4px;
box-sizing: border-box;
}
.b-point {
width: 10px;
height: 10px;
min-width: 10px;
min-height: 10px;
border: 1px solid #fff;
z-index: 1;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
@@ -332,6 +426,19 @@ onBeforeUnmount(() => {
transform: translate(-50%, -50%);*/
margin-top: 2rpx;
}
@keyframes target-pump-in {
from {
transform: translate(-50%, -50%) scale(2);
}
to {
transform: translate(-50%, -50%) scale(1);
}
}
.hit.pump-in {
animation: target-pump-in 0.3s ease-out forwards;
transform-origin: center center;
}
.header {
width: 100%;
display: flex;

View File

@@ -142,8 +142,8 @@ onBeforeUnmount(() => {
</view>
<block
v-if="
'-凹造型-感知距离-小试牛刀'.indexOf(title) === -1 ||
'-凹造型-感知距离-小试牛刀'.indexOf(title) === 10
'-箭前准备-感知距离-小试牛刀'.indexOf(title) === -1 ||
'-箭前准备-感知距离-小试牛刀'.indexOf(title) === 11
"
>
<text>{{ title }}</text>
@@ -151,12 +151,12 @@ onBeforeUnmount(() => {
<block
v-if="
title &&
'-凹造型-感知距离-小试牛刀'.indexOf(title) !== -1 &&
'-凹造型-感知距离-小试牛刀'.indexOf(title) !== 10
'-箭前准备-感知距离-小试牛刀'.indexOf(title) !== -1 &&
'-箭前准备-感知距离-小试牛刀'.indexOf(title) !== 11
"
>
<view class="first-try-steps">
<text :class="title === '-凹造型' ? 'current-step' : ''">凹造型</text>
<text :class="title === '-箭前准备' ? 'current-step' : ''">箭前准备</text>
<text>-</text>
<text :class="title === '-感知距离' ? 'current-step' : ''"
>感知距离</text

View File

@@ -15,6 +15,12 @@ const props = defineProps({
});
const rowCount = new Array(6).fill(0);
const getRingText = (arrow) => {
if (!arrow) return "-";
if (arrow.ringX && arrow.ring) return "X环";
return arrow.ring ? `${arrow.ring}` : "-";
};
</script>
<template>
@@ -35,23 +41,19 @@ const rowCount = new Array(6).fill(0);
<view>
<view>
<view v-for="(_, index) in rowCount" :key="index">
<text>{{
scores[0] && scores[0][index] ? `${scores[0][index].ring}` : "-"
}}</text>
<text>{{ getRingText(scores[0]?.[index]) }}</text>
</view>
</view>
<view>
<view v-for="(_, index) in rowCount" :key="index">
<text>{{
scores[1] && scores[1][index] ? `${scores[1][index].ring}` : "-"
}}</text>
<text>{{ getRingText(scores[1]?.[index]) }}</text>
</view>
</view>
</view>
<text
>{{
scores
.map((s) => s.reduce((last, next) => last + next.ring, 0))
.map((s) => (s || []).reduce((last, next) => last + next.ring, 0))
.reduce((last, next) => last + next, 0)
}}</text
>

View File

@@ -16,7 +16,7 @@ import {
import useStore from "@/store";
const store = useStore();
const { updateUser, updateDevice, updateOnline } = store;
const { updateUser, updateDevice, updateOnline, clearDevice } = store;
const props = defineProps({
show: {
@@ -107,6 +107,8 @@ async function doLogin() {
);
const data = await getDeviceBatteryAPI();
updateOnline(data.online);
} else {
clearDevice();
}
props.onClose();
} catch (error) {

View File

@@ -1,5 +1,5 @@
<script setup>
import { ref } from "vue";
import { ref, watch } from "vue";
const props = defineProps({
interval: {
@@ -14,13 +14,24 @@ const props = defineProps({
type: Array,
default: () => [],
},
current: {
type: Number,
default: 0,
},
onChange: {
type: Function,
default: (index) => {},
},
});
const currentIndex = ref(0);
const currentIndex = ref(props.current);
watch(
() => props.current,
(index) => {
currentIndex.value = index;
}
);
const handleChange = (e) => {
currentIndex.value = e.detail.current;
@@ -75,7 +86,7 @@ const handleChange = (e) => {
.dots {
position: absolute;
bottom: 5%;
bottom: 2%;
left: 50%;
transform: translateX(-50%);
display: flex;

View File

@@ -1,5 +1,5 @@
<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import { computed, ref, onMounted, onBeforeUnmount } from "vue";
import Guide from "@/components/Guide.vue";
import SButton from "@/components/SButton.vue";
import Swiper from "@/components/Swiper.vue";
@@ -18,6 +18,8 @@ import {
startPractiseAPI,
endPractiseAPI,
getPractiseAPI,
laserAimAPI,
laserCloseAPI,
} from "@/apis";
import { sharePractiseData } from "@/canvas";
import { wxShare, debounce } from "@/util";
@@ -32,6 +34,7 @@ const total = 12;
const stepButtonTexts = [
"开始",
"进入下一个任务",
"我已校准",
"进入下一个任务",
"我准备好了,开始",
"",
@@ -43,8 +46,11 @@ const practiseResult = ref({});
const btnDisabled = ref(false);
const practiseId = ref("");
const showGuide = ref(false);
const laserActive = ref(false);
const guideSwiperIndex = ref(0);
const guideImages = [
"https://static.shelingxingqiu.com/shootmini/static/target.png",
"https://static.shelingxingqiu.com/attachment/2026-02-08/dg9ev0wwdpgwt9e6du.png",
"https://static.shelingxingqiu.com/attachment/2026-02-08/dg9ev0wvv9sw4zioqk.png",
"https://static.shelingxingqiu.com/attachment/2026-02-08/dg9ev0ww3khaycallu.png",
@@ -54,10 +60,45 @@ const guideImages = [
"https://static.shelingxingqiu.com/attachment/2026-02-08/dg9ev0wwr6hfjhyfn5.png",
];
const calibrationGuides = [
{
title: "箭头面向靶子",
src: "https://static.shelingxingqiu.com/attachment/2025-10-30/ddv9p5fk5wscg7hrfo.png",
},
{
title: "摆出拉弓姿势",
src: "https://static.shelingxingqiu.com/attachment/2025-10-30/ddv9p5fk5b7ljrhx3o.png",
},
{
title: "调整瞄准器",
src: "https://static.shelingxingqiu.com/attachment/2025-10-29/dduexjgrcxf9wjaiv4.png",
},
];
const onSwiperIndexChange = (index) => {
if (index + 1 === guideImages.length) {
showGuide.value = true;
}
guideSwiperIndex.value = index;
showGuide.value = index + 1 === guideImages.length;
};
const isGuideLastImage = computed(
() => guideSwiperIndex.value + 1 === guideImages.length
);
const currentStepButtonText = computed(() => {
if (step.value === 1 && isGuideLastImage.value) return "去校准智能弓";
return stepButtonTexts[step.value];
});
const openCalibrationLaser = async () => {
if (laserActive.value) return;
await laserAimAPI();
laserActive.value = true;
};
const closeCalibrationLaser = async () => {
if (!laserActive.value) return;
await laserCloseAPI();
laserActive.value = false;
};
const createPractise = async (arrows) => {
@@ -75,7 +116,7 @@ async function onReceiveMessage(msg) {
scores.value = msg.details;
} else if (msg.type === MESSAGETYPESV2.BattleEnd) {
setTimeout(onOver, 1500);
} else if (msg.type === MESSAGETYPESV2.TestDistance) {
} else if (msg.type === MESSAGETYPESV2.TestDistance && step.value === 3) {
if (msg.shootData.distance / 100 >= 5) {
audioManager.play("距离合格");
btnDisabled.value = false;
@@ -110,12 +151,13 @@ onMounted(() => {
uni.$on("share-image", onClickShare);
});
onBeforeUnmount(() => {
onBeforeUnmount(async () => {
uni.setKeepScreenOn({
keepScreenOn: false,
});
uni.$off("socket-inbox", onReceiveMessage);
uni.$off("share-image", onClickShare);
await closeCalibrationLaser();
audioManager.stopAll();
endPractiseAPI();
});
@@ -123,28 +165,39 @@ onBeforeUnmount(() => {
const nextStep = async () => {
if (step.value === 0) {
step.value = 1;
title.value = "-凹造型";
title.value = "-箭前准备";
} else if (step.value === 1) {
if (!isGuideLastImage.value) {
guideSwiperIndex.value += 1;
showGuide.value = guideSwiperIndex.value + 1 === guideImages.length;
return;
}
showGuide.value = false;
step.value = 2;
// title.value = "-校准智能弓";
await openCalibrationLaser();
} else if (step.value === 2) {
await closeCalibrationLaser();
showGuide.value = false;
btnDisabled.value = true;
step.value = 2;
step.value = 3;
title.value = "-感知距离";
const result = await createPractiseAPI(total, 120);
if (result) practiseId.value = result.id;
} else if (step.value === 2) {
showGuide.value = false;
step.value = 3;
title.value = "-小试牛刀";
} else if (step.value === 3) {
showGuide.value = false;
step.value = 4;
title.value = "-小试牛刀";
} else if (step.value === 4) {
title.value = "小试牛刀";
await startPractiseAPI();
scores.value = [];
step.value = 4;
step.value = 5;
start.value = true;
setTimeout(() => {
uni.$emit("play-sound", "请开始射击");
}, 300);
} else if (step.value === 5) {
} else if (step.value === 6) {
uni.navigateBack({
delta: 1,
});
@@ -159,13 +212,13 @@ const onClose = async () => {
setTimeout(() => {
practiseResult.value = {};
showGuide.value = false;
step.value = 5;
step.value = 6;
}, 500);
} else {
practiseResult.value = {};
start.value = false;
scores.value = [];
step.value = 3;
step.value = 4;
const result = await createPractiseAPI(total, 120);
if (result) practiseId.value = result.id;
}
@@ -173,14 +226,14 @@ const onClose = async () => {
</script>
<template>
<Container :bgType="1" :title="title" :showBottom="step !== 4">
<Container :bgType="1" :title="title" :showBottom="step !== 5">
<view class="container">
<Guide
v-if="step !== 4"
v-if="step !== 5"
:type="
step === 2
step === 3
? 2
: step === 5 || (step === 0 && user.nickName.length > 6)
: step === 6 || (step === 0 && user.nickName.length > 6)
? 1
: 0
"
@@ -196,25 +249,28 @@ const onClose = async () => {
这是新人必刷小任务0基础小白也能快速掌握弓箭技巧和游戏规则哦~
</text>
<text v-if="step === 1" :style="{ fontSize: '28rpx' }"
>这是我们人帅技高的高教练首先请按教练示范尝试自己去做这些动作和手势吧</text
>位就是人帅技高的高教练接下来请跟随教练指引做好射箭前期准备</text
>
<text v-if="step === 2" :style="{ fontSize: '28rpx' }"
>请按下方步骤完成智能弓校准让瞄准器和靶子保持对齐</text
>
<view
class="guide-tips"
:style="{ marginTop: '8rpx' }"
v-if="step === 2"
v-if="step === 3"
>
<text>你知道5米射程有多远吗</text>
<text>
在我们的排位赛中射程小于5米的成绩无效建议平时练习距离至少5米现在来边射箭边调整你的站位点吧
</text>
</view>
<view class="guide-tips" v-if="step === 3">
<view class="guide-tips" v-if="step === 4">
<text>一切准备就绪</text>
<text :style="{ fontSize: '28rpx' }"
>试着完成一个真正的弓箭手任务吧</text
>
</view>
<view class="guide-tips" v-if="step === 5">
<view class="guide-tips" v-if="step === 6">
<text>新手试炼场通关啦优秀</text>
<text :style="{ fontSize: '28rpx' }"
>反曲弓运动基本知识和射灵世界系统规则你已Get是不是挺容易呀</text
@@ -231,35 +287,53 @@ const onClose = async () => {
src="https://static.shelingxingqiu.com/attachment/2025-11-17/deas80ef1sf9td0leq.png"
class="try-tip"
mode="widthFix"
v-if="step === 3"
v-if="step === 4"
/>
<image
src="https://static.shelingxingqiu.com/attachment/2025-07-01/db0ehpz9lav58g5drl.png"
class="try-tip"
mode="widthFix"
v-if="step === 5"
v-if="step === 6"
/>
<view style="height: 570px" v-if="step === 1">
<Swiper :onChange="onSwiperIndexChange" :data="guideImages" />
<Swiper
:current="guideSwiperIndex"
:onChange="onSwiperIndexChange"
:data="guideImages"
/>
</view>
<ShootProgress v-if="step === 4" tips="请开始连续射箭" :start="start" />
<TestDistance v-if="step === 2" :guide="false" />
<view class="calibration-container" v-if="step === 2">
<view
v-for="(guide, index) in calibrationGuides"
:key="guide.title"
class="calibration-guide"
>
<view>
<text>{{ index + 1 }}</text>
<text>{{ guide.title }}</text>
</view>
<image :src="guide.src" mode="widthFix" />
</view>
<text>请完成以上步骤校准智能弓</text>
</view>
<ShootProgress v-if="step === 5" tips="请开始连续射箭" :start="start" />
<TestDistance v-if="step === 3" :guide="false" />
<view
class="user-row"
v-if="step === 4"
:style="{ marginBottom: step === 2 ? '40px' : '0' }"
v-if="step === 5"
:style="{ marginBottom: '0' }"
>
<Avatar :src="user.avatar" :size="35" />
<BowPower />
</view>
<BowTarget
v-if="step === 4"
:currentRound="step === 4 ? scores.length : 0"
:totalRound="step === 4 ? total : 0"
v-if="step === 5"
:currentRound="step === 5 ? scores.length : 0"
:totalRound="step === 5 ? total : 0"
:scores="scores"
/>
<ScorePanel
v-if="step === 4"
v-if="step === 5"
:total="total"
:rowCount="6"
:arrows="scores"
@@ -287,7 +361,7 @@ const onClose = async () => {
step === 1 ? "学会了,我摆得比教练还帅" : "我找到合适的点位了"
}}</text>
</BubbleTip>
{{ stepButtonTexts[step] }}
{{ currentStepButtonText }}
</SButton>
</template>
</Container>
@@ -301,4 +375,43 @@ const onClose = async () => {
width: calc(100% - 20px);
margin: 0 10px;
}
.calibration-container {
display: flex;
flex-direction: column;
align-items: center;
}
.calibration-guide {
display: flex;
flex-direction: column;
align-items: center;
font-size: 26rpx;
color: #ffffff;
margin-bottom: 15rpx;
}
.calibration-guide > view {
width: 100%;
margin: 25rpx 0;
display: flex;
align-items: center;
}
.calibration-guide > view > text:first-child {
font-size: 24rpx;
background: #e89024;
border-radius: 50%;
width: 32rpx;
height: 32rpx;
line-height: 32rpx;
display: block;
text-align: center;
margin-right: 15rpx;
}
.calibration-guide > image {
width: 630rpx;
height: 250rpx;
}
.calibration-container > text {
font-size: 24rpx;
color: #fff9;
margin: 30rpx;
}
</style>

View File

@@ -305,7 +305,7 @@ function goBack() {
<Container
:bgType="data.mode > 3 ? -1 : 0"
bgColor="#000000"
:onBack="goBack"
:onBack="exit"
>
<!-- ----- Banner game 胜负展示图 NvN 对抗模式----- -->

View File

@@ -26,6 +26,7 @@ const {
updateConfig,
updateUser,
updateDevice,
clearDevice,
getLvlName,
getLvlNameByScore,
updateOnline,
@@ -127,6 +128,8 @@ onShow(async () => {
);
const data = await getDeviceBatteryAPI();
updateOnline(data.online);
} else {
clearDevice();
}
}
}

View File

@@ -30,11 +30,65 @@ const playersSorted = ref([]);
const playersScores = ref([]);
const halfTimeTip = ref(false);
const halfRest = ref(false);
const HALF_REST_SECONDS = 20;
const halfRestRemain = ref(HALF_REST_SECONDS);
let halfRestTimer = null;
/** 控制设备离线提示弹窗的显示状态 */
const showOfflineModal = ref(false);
/** 记录每位玩家当前半场连续 X 环key 为 playerId用于触发 tententen 音效 */
/** 记录每位玩家当前半场连续 10 环及以上次key 为 playerId用于触发 tententen 音效 */
const xRingStreaks = ref({});
function clearHalfRestCountdown() {
if (halfRestTimer) {
clearInterval(halfRestTimer);
halfRestTimer = null;
}
}
function getHalfRestSeconds(battleInfo) {
const remainCandidates = [
battleInfo?.halfRestRemain,
battleInfo?.halfRestRemainSeconds,
battleInfo?.restRemain,
battleInfo?.restRemainSeconds,
];
for (const item of remainCandidates) {
const remain = Number(item);
if (Number.isFinite(remain) && remain > 0 && remain <= HALF_REST_SECONDS) {
return Math.ceil(remain);
}
}
const endTime = Number(battleInfo?.halfRestEndTime ?? battleInfo?.restEndTime);
if (!Number.isFinite(endTime) || endTime <= 0) return HALF_REST_SECONDS;
const timestamp = endTime < 1e12 ? endTime * 1000 : endTime;
const diffSeconds = (timestamp - Date.now()) / 1000;
if (diffSeconds > 0 && diffSeconds <= HALF_REST_SECONDS) {
return Math.ceil(diffSeconds);
}
return HALF_REST_SECONDS;
}
function startHalfRestCountdown(seconds = HALF_REST_SECONDS) {
clearHalfRestCountdown();
halfRestRemain.value = Math.max(0, Math.ceil(Number(seconds) || HALF_REST_SECONDS));
if (halfRestRemain.value <= 0) return;
halfRestTimer = setInterval(() => {
if (halfRestRemain.value <= 1) {
halfRestRemain.value = 0;
clearHalfRestCountdown();
return;
}
halfRestRemain.value -= 1;
}, 1000);
}
/**
* 监听设备在线状态,大乱斗比赛进行中设备离线时弹窗提示用户
*/
@@ -91,8 +145,7 @@ function recoverData(battleInfo, { force = false } = {}) {
halfTimeTip.value = true;
halfRest.value = true;
tips.value = "准备下半场";
// 剩余休息时间
// const remain = (Date.now() - battleInfo.timeoutTime) / 1000;
startHalfRestCountdown(getHalfRestSeconds(battleInfo));
setTimeout(() => {
uni.$emit("update-remain", 0);
}, 200);
@@ -123,23 +176,27 @@ onLoad(async (options) => {
});
/**
* 检测指定玩家连续 X 环是否达到 3 箭,达到则在环数播报入队后追加 tententen 音效
* 检测指定玩家连续 10 环及以上是否达到 3 箭,达到则在环数播报入队后追加 tententen 音效
* @param {number|string} playerId - 本次射手的 ID大乱斗中 ShootResult 保留 playerId
* @param {boolean} isXRing - 本次射击是否为 X 环
* @param {boolean} isTenPlusRingShot - 本次射击是否为 10 环及以上
*/
function checkAndPlayTententen(playerId, isXRing) {
function isTenPlusRing(shot) {
return !!(shot?.ringX || Number(shot?.ring) >= 10);
}
function checkAndPlayTententen(playerId, isTenPlusRingShot) {
if (!playerId) return;
const id = parseInt(playerId);
if (isXRing) {
if (isTenPlusRingShot) {
xRingStreaks.value[id] = (xRingStreaks.value[id] || 0) + 1;
// 同一玩家连续 3 箭均为 X 环,追加到环数音效队列尾部播放
// 同一玩家连续 3 箭均为 10 环及以上,追加到环数音效队列尾部播放
if (xRingStreaks.value[id] >= 3) {
xRingStreaks.value[id] = 0;
// nextTick 确保 HeaderProgress 的环数播报已入队后再追加 tententen避免播放顺序颠倒
nextTick(() => audioManager.play("tententen", false));
}
} else {
// 非 X 环则重置该玩家的连续计数
// 低于 10 环或未上靶则重置该玩家的连续计数
xRingStreaks.value[id] = 0;
}
}
@@ -147,6 +204,7 @@ function checkAndPlayTententen(playerId, isXRing) {
async function onReceiveMessage(msg) {
if (Array.isArray(msg)) return;
if (msg.type === MESSAGETYPESV2.BattleStart) {
clearHalfRestCountdown();
halfTimeTip.value = false;
halfRest.value = false;
recoverData(msg);
@@ -161,22 +219,23 @@ async function onReceiveMessage(msg) {
// 对比更新后数据找出箭数增加的玩家(即本次射手),并读取其最新箭的 ring 数据
const newRound = playersScores.value[playersScores.value.length - 1] || {};
let shooterId = null;
let isXRing = false;
let isTenPlusRingShot = false;
for (const pid of Object.keys(newRound)) {
const newLen = (newRound[pid] || []).length;
if (newLen > (prevCounts[pid] || 0)) {
shooterId = parseInt(pid);
const shot = newRound[pid][newLen - 1];
isXRing = !!(shot?.ringX && shot?.ring);
isTenPlusRingShot = isTenPlusRing(shot);
break;
}
}
// 检测同一玩家三箭全 X 环,触发 tententen 音效
checkAndPlayTententen(shooterId, isXRing);
// 检测同一玩家连续三箭 10 环及以上,触发 tententen 音效
checkAndPlayTententen(shooterId, isTenPlusRingShot);
} else if (msg.type === MESSAGETYPESV2.HalfRest) {
halfTimeTip.value = true;
halfRest.value = true;
tips.value = "准备下半场";
startHalfRestCountdown();
} else if (msg.type === MESSAGETYPESV2.BattleEnd) {
setTimeout(() => {
// 全部跳转到新结算页
@@ -197,6 +256,7 @@ onBeforeUnmount(() => {
uni.setKeepScreenOn({
keepScreenOn: false,
});
clearHalfRestCountdown();
uni.$off("socket-inbox", onReceiveMessage);
audioManager.stopAll();
});
@@ -261,7 +321,7 @@ onShow(async () => {
>
<view class="half-time-tip">
<text>上半场结束休息一下吧:</text>
<text>20秒后开始下半场</text>
<text>{{ halfRestRemain }}秒后开始下半场</text>
</view>
</ScreenHint>
<!-- 设备离线提示弹窗 -->

View File

@@ -16,7 +16,7 @@ const showTip = ref(false);
const confirmBindTip = ref(false);
const addDevice = ref();
const store = useStore();
const { updateDevice } = store;
const { updateDevice, clearDevice } = store;
const { user, device } = storeToRefs(store);
const justBind = ref(false);
const calibration = ref(false);
@@ -84,13 +84,21 @@ const toFristTryPage = () => {
};
const unbindDevice = async () => {
try {
await unbindDeviceAPI(device.value.deviceId);
} catch (error) {
if (error?.type === "DEVICE_BIND_INVALID") {
uni.setStorageSync("calibration", false);
clearDevice();
}
return;
}
uni.setStorageSync("calibration", false);
uni.showToast({
title: "解绑成功",
icon: "success",
});
device.value = {};
clearDevice();
};
const toDeviceIntroPage = () => {
@@ -122,8 +130,23 @@ const goCalibration = async () => {
});
};
onShow(() => {
const syncDeviceBinding = async () => {
if (!user.value.id) return;
try {
const devices = await getMyDevicesAPI();
if (devices.bindings && devices.bindings.length) {
updateDevice(devices.bindings[0].deviceId, devices.bindings[0].deviceName);
} else {
clearDevice();
}
} catch (error) {
console.log("sync device binding error", error);
}
};
onShow(async () => {
calibration.value = uni.getStorageSync("calibration");
await syncDeviceBinding();
});
</script>
@@ -212,11 +235,19 @@ onShow(() => {
<text>{{ user.nickName }}</text>
</view>
</view>
<block v-if="calibration">
<SButton :onClick="toFristTryPage" width="60vw" :rounded="40"
>进入新手试炼</SButton
>
<view :style="{ marginTop: '15px' }">
<!-- <block v-if="calibration"> -->
<view>
<text>恭喜你的弓箭和账号已成功绑定</text>
<text :style="{ color: '#fed847' }">已赠送6个月射灵世界会员</text>
</view>
<!-- <SButton :onClick="goCalibration" width="60vw" :rounded="40">
开启智能弓进行校准
</SButton>
<text :style="{ marginTop: '20rpx', fontSize: '24rpx', color: '#fff9' }"
>校准时弓箭激光将开启请勿直视激光</text
> -->
<view>
<SButton
:onClick="backToHome"
backgroundColor="#fff3"
@@ -226,19 +257,13 @@ onShow(() => {
>返回首页</SButton
>
</view>
</block>
<block v-else>
<view>
<text>恭喜你的弓箭和账号已成功绑定</text>
<text :style="{ color: '#fed847' }">已赠送6个月射灵世界会员</text>
<view :style="{ marginTop: '15px' }">
<SButton :onClick="toFristTryPage" width="60vw" :rounded="40">进入新手试炼</SButton>
</view>
<SButton :onClick="goCalibration" width="60vw" :rounded="40">
开启智能弓进行校准
</SButton>
<text :style="{ marginTop: '20rpx', fontSize: '24rpx', color: '#fff9' }"
>校准时弓箭激光将开启请勿直视激光</text
>
</block>
<!-- </block> -->
<!-- <block v-else>
</block> -->
</view>
<view v-if="device.deviceId && !justBind" class="has-device">
<view class="device-binded">
@@ -394,7 +419,7 @@ onShow(() => {
width: 140rpx;
height: 140rpx;
margin-bottom: 5px;
border-radius: 10px;
border-radius: 12px;
}
.device-binded > view > text {
width: 120px;

View File

@@ -31,7 +31,7 @@ const { user } = storeToRefs(store);
const start = ref(false);
const scores = ref([]);
const total = 12;
/** 当前练习中连续 X 环计数,用于触发 tententen 音效 */
/** 当前练习中连续 10 环及以上计数,用于触发 tententen 音效 */
const xRingStreak = ref(0);
const practiseResult = ref({});
const practiseId = ref("");
@@ -48,7 +48,7 @@ onLoad((options) => {
const onReady = async () => {
await startPractiseAPI();
scores.value = [];
xRingStreak.value = 0; // 新一局开始,重置 X 环连续计数
xRingStreak.value = 0; // 新一局开始,重置 10 环及以上连续计数
start.value = true;
audioManager.play("练习开始");
};
@@ -59,19 +59,23 @@ const onOver = async () => {
};
/**
* 检测连续 X 环是否达到 3 箭,达到则播放 tententen 音效
* @param {boolean} isXRing - 本次射击是否为 X 环
* 检测连续 10 环及以上是否达到 3 箭,达到则播放 tententen 音效
* @param {boolean} isTenPlusRingShot - 本次射击是否为 10 环及以上
*/
function checkAndPlayTententen(isXRing) {
if (isXRing) {
function isTenPlusRing(shot) {
return !!(shot?.ringX || Number(shot?.ring) >= 10);
}
function checkAndPlayTententen(isTenPlusRingShot) {
if (isTenPlusRingShot) {
xRingStreak.value += 1;
// 连续 3 箭均为 X 环,在环数播报入队后追加 tententen避免播放顺序颠倒
// 连续 3 箭均为 10 环及以上,在环数播报入队后追加 tententen避免播放顺序颠倒
if (xRingStreak.value >= 3) {
xRingStreak.value = 0;
nextTick(() => audioManager.play("tententen", false));
}
} else {
// 非 X 环则重置连续计数
// 低于 10 环或未上靶则重置连续计数
xRingStreak.value = 0;
}
}
@@ -80,10 +84,10 @@ async function onReceiveMessage(msg) {
if (msg.type === MESSAGETYPESV2.ShootResult) {
const prevLen = scores.value.length;
scores.value = msg.details;
// 有新箭时取最后一箭判断是否 X 环并检测连续计数
// 有新箭时取最后一箭判断是否 10 环及以上并检测连续计数
if (scores.value.length > prevLen) {
const latestArrow = scores.value[scores.value.length - 1];
checkAndPlayTententen(!!(latestArrow?.ringX && latestArrow?.ring));
checkAndPlayTententen(isTenPlusRing(latestArrow));
}
} else if (msg.type === MESSAGETYPESV2.BattleEnd) {
// setTimeout(onOver, 1500);
@@ -101,7 +105,7 @@ async function onComplete() {
practiseResult.value = {};
start.value = false;
scores.value = [];
xRingStreak.value = 0; // 重新开始练习,重置 X 环连续计数
xRingStreak.value = 0; // 重新开始练习,重置 10 环及以上连续计数
const result = await createPractiseAPI(total, 120);
if (result) practiseId.value = result.id;
}

View File

@@ -31,7 +31,7 @@ const { user } = storeToRefs(store);
const start = ref(false);
const scores = ref([]);
const total = 36;
/** 当前练习中连续 X 环计数,用于触发 tententen 音效 */
/** 当前练习中连续 10 环及以上计数,用于触发 tententen 音效 */
const xRingStreak = ref(0);
const practiseResult = ref({});
const practiseId = ref("");
@@ -47,7 +47,7 @@ onLoad((options) => {
const onReady = async () => {
await startPractiseAPI();
scores.value = [];
xRingStreak.value = 0; // 新一局开始,重置 X 环连续计数
xRingStreak.value = 0; // 新一局开始,重置 10 环及以上连续计数
start.value = true;
audioManager.play("练习开始");
};
@@ -58,19 +58,23 @@ const onOver = async () => {
};
/**
* 检测连续 X 环是否达到 3 箭,达到则播放 tententen 音效
* @param {boolean} isXRing - 本次射击是否为 X 环
* 检测连续 10 环及以上是否达到 3 箭,达到则播放 tententen 音效
* @param {boolean} isTenPlusRingShot - 本次射击是否为 10 环及以上
*/
function checkAndPlayTententen(isXRing) {
if (isXRing) {
function isTenPlusRing(shot) {
return !!(shot?.ringX || Number(shot?.ring) >= 10);
}
function checkAndPlayTententen(isTenPlusRingShot) {
if (isTenPlusRingShot) {
xRingStreak.value += 1;
// 连续 3 箭均为 X 环,在环数播报入队后追加 tententen避免播放顺序颠倒
// 连续 3 箭均为 10 环及以上,在环数播报入队后追加 tententen避免播放顺序颠倒
if (xRingStreak.value >= 3) {
xRingStreak.value = 0;
nextTick(() => audioManager.play("tententen", false));
}
} else {
// 非 X 环则重置连续计数
// 低于 10 环或未上靶则重置连续计数
xRingStreak.value = 0;
}
}
@@ -79,10 +83,10 @@ async function onReceiveMessage(msg) {
if (msg.type === MESSAGETYPESV2.ShootResult) {
const prevLen = scores.value.length;
scores.value = msg.details;
// 有新箭时取最后一箭判断是否 X 环并检测连续计数
// 有新箭时取最后一箭判断是否 10 环及以上并检测连续计数
if (scores.value.length > prevLen) {
const latestArrow = scores.value[scores.value.length - 1];
checkAndPlayTententen(!!(latestArrow?.ringX && latestArrow?.ring));
checkAndPlayTententen(isTenPlusRing(latestArrow));
}
} else if (msg.type === MESSAGETYPESV2.BattleEnd) {
setTimeout(onOver, 1500);
@@ -116,7 +120,7 @@ async function onComplete() {
practiseResult.value = {};
start.value = false;
scores.value = [];
xRingStreak.value = 0; // 重新开始练习,重置 X 环连续计数
xRingStreak.value = 0; // 重新开始练习,重置 10 环及以上连续计数
const result = await createPractiseAPI(total, 3600);
if (result) practiseId.value = result.id;
}

View File

@@ -49,7 +49,7 @@ const battleWay = ref(0);
const lastToSomeoneShootKey = ref("");
/** 控制设备离线提示弹窗的显示状态 */
const showOfflineModal = ref(false);
/** 记录每位玩家当前轮连续 X 环key 为 playerId用于触发 tententen 音效 */
/** 记录每位玩家当前轮连续 10 环及以上次key 为 playerId用于触发 tententen 音效 */
const xRingStreaks = ref({});
/**
@@ -234,22 +234,26 @@ function onNewRound(msg, prevRound) {
}
/**
* 检测指定射手连续 X 环是否达到 3 箭,达到则在环数播报入队后追加 tententen 音效
* 检测指定射手连续 10 环及以上是否达到 3 箭,达到则在环数播报入队后追加 tententen 音效
* @param {number} shooterId - 本次射手的 ID取自 currentShooterId.value
* @param {boolean} isXRing - 本次射击是否为 X 环
* @param {boolean} isTenPlusRingShot - 本次射击是否为 10 环及以上
*/
function checkAndPlayTententen(shooterId, isXRing) {
function isTenPlusRing(shot) {
return !!(shot?.ringX || Number(shot?.ring) >= 10);
}
function checkAndPlayTententen(shooterId, isTenPlusRingShot) {
if (!shooterId) return;
if (isXRing) {
if (isTenPlusRingShot) {
xRingStreaks.value[shooterId] = (xRingStreaks.value[shooterId] || 0) + 1;
// 同一玩家连续 3 箭均为 X 环,追加到环数音效队列尾部播放
// 同一玩家连续 3 箭均为 10 环及以上,追加到环数音效队列尾部播放
if (xRingStreaks.value[shooterId] >= 3) {
xRingStreaks.value[shooterId] = 0;
// nextTick 确保 HeaderProgress 的环数播报已入队后再追加 tententen避免播放顺序颠倒
nextTick(() => audioManager.play("tententen", false));
}
} else {
// 非 X 环则重置该玩家的连续计数
// 低于 10 环或未上靶则重置该玩家的连续计数
xRingStreaks.value[shooterId] = 0;
}
}
@@ -268,9 +272,9 @@ async function onReceiveMessage(msg) {
} else if (msg.type === MESSAGETYPESV2.ShootResult) {
showRoundTip.value = false;
recoverData(msg, {arrowOnly: true});
// 检测同一玩家三箭全 X 环,触发 tententen 音效
// 检测同一玩家连续三箭 10 环及以上,触发 tententen 音效
// currentShooterId 在 ToSomeoneShoot 时写入ShootResult 不会覆盖,可靠识别本次射手
checkAndPlayTententen(currentShooterId.value, !!(msg.shootData?.ringX && msg.shootData?.ring));
checkAndPlayTententen(currentShooterId.value, isTenPlusRing(msg.shootData));
} else if (msg.type === MESSAGETYPESV2.NewRound) {
// 在进入延迟前先捕获当前轮次,供 onNewRound 使用,防止 800ms 内 ToSomeoneShoot 提前更新 currentRound 造成 Tip 展示错轮
const prevRound = currentRound.value;

View File

@@ -38,6 +38,18 @@ const props = defineProps({
type: Boolean,
default: false,
},
targetRadius: {
type: Number,
default: 20,
},
hitRadiusPx: {
type: Number,
default: 2,
},
zoomHitRadiusPx: {
type: Number,
default: 5,
},
});
const pMode = ref(true);
@@ -47,6 +59,8 @@ const timer = ref(null);
const dirTimer = ref(null);
const angle = ref(null);
const circleColor = ref("");
const ROUND_TIP_OFFSET_Y = -32;
const EXPERIENCE_TIP_OFFSET_Y = -68;
function showShotFlash(flash) {
const shootData = flash?.shootData;
@@ -75,13 +89,92 @@ watch(
{ immediate: true }
);
function calcRealX(num, offset = 3.4) {
const len = 20.4 + num;
return `calc(${(len / 40.8) * 100 - offset / 2}%)`;
const safeTargetRadius = computed(() => {
const radius = Number(props.targetRadius);
return Number.isFinite(radius) && radius > 0 ? radius : 20;
});
const currentHitRadiusPx = computed(() => {
const radius = Number(
pMode.value ? props.zoomHitRadiusPx : props.hitRadiusPx
);
return Number.isFinite(radius) && radius >= 0 ? radius : 0;
});
function getShotPoint(shot, fallbackCenter = false) {
const x = Number(shot?.x);
const y = Number(shot?.y);
if (Number.isFinite(x) && Number.isFinite(y)) return { x, y };
return fallbackCenter ? { x: 0, y: 0 } : null;
}
function calcRealY(num, offset = 3.4) {
const len = num < 0 ? Math.abs(num) + 20.4 : 20.4 - num;
return `calc(${(len / 40.8) * 100 - offset / 2}%)`;
function getPointDirection(point) {
if (!point) return null;
const distance = Math.sqrt(point.x * point.x + point.y * point.y);
if (distance === 0) return null;
return {
x: point.x / distance,
y: point.y / distance,
};
}
function formatPxOffset(value) {
if (!value) return "";
const operator = value > 0 ? "+" : "-";
return ` ${operator} ${Math.abs(value)}px`;
}
function formatTargetPosition(percent, offset) {
const pxOffset = formatPxOffset(offset);
return pxOffset ? `calc(${percent}%${pxOffset})` : `${percent}%`;
}
function getTargetPositionStyle(point, offsetPx = 0, extraOffset = {}) {
if (!point) return { display: "none" };
const radius = safeTargetRadius.value;
const diameter = radius * 2;
const direction = getPointDirection(point);
const xOffset = (direction ? direction.x * offsetPx : 0) + (extraOffset.x || 0);
const yOffset = (direction ? -direction.y * offsetPx : 0) + (extraOffset.y || 0);
const leftPercent = ((point.x + radius) / diameter) * 100;
const topPercent = ((radius - point.y) / diameter) * 100;
return {
left: formatTargetPosition(leftPercent, xOffset),
top: formatTargetPosition(topPercent, yOffset),
transform: "translate(-50%, -50%)",
};
}
function getHitStyle(shot) {
const radius = currentHitRadiusPx.value;
const point = getShotPoint(shot);
return {
...getTargetPositionStyle(point, radius),
width: `${radius * 2}px`,
height: `${radius * 2}px`,
};
}
function getRoundTipStyle(shot) {
const point = getShotPoint(shot, true);
return getTargetPositionStyle(
point,
shot?.ring ? currentHitRadiusPx.value : 0,
{ y: ROUND_TIP_OFFSET_Y }
);
}
function getExperienceTipStyle(shot) {
const point = getShotPoint(shot, true);
return getTargetPositionStyle(
point,
shot?.ring ? currentHitRadiusPx.value : 0,
{ y: EXPERIENCE_TIP_OFFSET_Y }
);
}
const simulShoot = async () => {
if (device.value.deviceId) await simulShootAPI(device.value.deviceId);
@@ -164,20 +257,14 @@ onBeforeUnmount(() => {
<view
v-if="latestOne && latestOne.ring && user.id === latestOne.playerId"
class="e-value fade-in-out"
:style="{
left: calcRealX(latestOne.ring ? latestOne.x : 0, 20),
top: calcRealY(latestOne.ring ? latestOne.y : 0, 40),
}"
:style="getExperienceTipStyle(latestOne)"
>
经验 +1
</view>
<view
v-if="latestOne"
class="round-tip fade-in-out"
:style="{
left: calcRealX(latestOne.ring ? latestOne.x : 0, 28),
top: calcRealY(latestOne.ring ? latestOne.y : 0, 28),
}"
:style="getRoundTipStyle(latestOne)"
>{{ latestOne.ringX ? "X" : latestOne.ring || "未上靶"
}}<text v-if="latestOne.ring"></text>
</view>
@@ -188,20 +275,14 @@ onBeforeUnmount(() => {
user.id === bluelatestOne.playerId
"
class="e-value fade-in-out"
:style="{
left: calcRealX(bluelatestOne.ring ? bluelatestOne.x : 0, 20),
top: calcRealY(bluelatestOne.ring ? bluelatestOne.y : 0, 40),
}"
:style="getExperienceTipStyle(bluelatestOne)"
>
经验 +1
</view>
<view
v-if="bluelatestOne"
class="round-tip fade-in-out"
:style="{
left: calcRealX(bluelatestOne.ring ? bluelatestOne.x : 0, 28),
top: calcRealY(bluelatestOne.ring ? bluelatestOne.y : 0, 28),
}"
:style="getRoundTipStyle(bluelatestOne)"
>{{ bluelatestOne.ringX ? "X" : bluelatestOne.ring || "未上靶"
}}<text v-if="bluelatestOne.ring">环</text></view
>
@@ -212,8 +293,7 @@ onBeforeUnmount(() => {
index === scores.length - 1 && latestOne ? 'pump-in' : ''
}`"
:style="{
left: calcRealX(bow.x, pMode ? '3.4' : '2'),
top: calcRealY(bow.y, pMode ? '3.4' : '2'),
...getHitStyle(bow),
backgroundColor: mode === 'solo' ? '#00bf04' : '#FF0000',
}"
><text v-if="pMode">{{ index + 1 }}</text></view
@@ -226,8 +306,7 @@ onBeforeUnmount(() => {
index === blueScores.length - 1 && bluelatestOne ? 'pump-in' : ''
}`"
:style="{
left: calcRealX(bow.x, pMode ? '3.4' : '2'),
top: calcRealY(bow.y, pMode ? '3.4' : '2'),
...getHitStyle(bow),
backgroundColor: '#1840FF',
}"
>
@@ -287,6 +366,31 @@ onBeforeUnmount(() => {
font-size: 24px;
margin-left: 5px;
}
@keyframes target-tip-fade-in-out {
0% {
transform: translate(-50%, -50%) translateY(20px);
opacity: 0;
}
30% {
transform: translate(-50%, -50%);
opacity: 1;
}
80% {
transform: translate(-50%, -50%);
opacity: 1;
}
100% {
transform: translate(-50%, -50%);
opacity: 0;
}
}
.round-tip.fade-in-out,
.e-value.fade-in-out {
animation: target-tip-fade-in-out 1.2s ease forwards;
}
.target > image:last-child {
width: 100%;
height: 100%;
@@ -297,21 +401,11 @@ onBeforeUnmount(() => {
z-index: 1;
color: #fff;
transition: all 0.3s ease;
}
.s-point {
width: 4px;
height: 4px;
min-width: 4px;
min-height: 4px;
box-sizing: border-box;
}
.b-point {
width: 10px;
height: 10px;
min-width: 10px;
min-height: 10px;
border: 1px solid #fff;
z-index: 1;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
@@ -327,6 +421,19 @@ onBeforeUnmount(() => {
transform: translate(-50%, -50%);*/
margin-top: 2rpx;
}
@keyframes target-pump-in {
from {
transform: translate(-50%, -50%) scale(2);
}
to {
transform: translate(-50%, -50%) scale(1);
}
}
.hit.pump-in {
animation: target-pump-in 0.3s ease-out forwards;
transform-origin: center center;
}
.header {
width: 100%;
display: flex;

View File

@@ -142,8 +142,8 @@ onBeforeUnmount(() => {
</view>
<block
v-if="
'-凹造型-感知距离-小试牛刀'.indexOf(title) === -1 ||
'-凹造型-感知距离-小试牛刀'.indexOf(title) === 10
'-箭前准备-感知距离-小试牛刀'.indexOf(title) === -1 ||
'-箭前准备-感知距离-小试牛刀'.indexOf(title) === 11
"
>
<text>{{ title }}</text>
@@ -151,12 +151,12 @@ onBeforeUnmount(() => {
<block
v-if="
title &&
'-凹造型-感知距离-小试牛刀'.indexOf(title) !== -1 &&
'-凹造型-感知距离-小试牛刀'.indexOf(title) !== 10
'-箭前准备-感知距离-小试牛刀'.indexOf(title) !== -1 &&
'-箭前准备-感知距离-小试牛刀'.indexOf(title) !== 11
"
>
<view class="first-try-steps">
<text :class="title === '-凹造型' ? 'current-step' : ''">凹造型</text>
<text :class="title === '-箭前准备' ? 'current-step' : ''">箭前准备</text>
<text>-</text>
<text :class="title === '-感知距离' ? 'current-step' : ''"
>感知距离</text

View File

@@ -24,12 +24,14 @@ const onUpdateTips = (newVal) => {
// 监听 Pinia store 中 totalShot 变化,用于比赛恢复时同步箭数(替代 uni.$emit 避免时序问题)
// 使用 immediate: true 确保组件创建时立即读取 store 当前值(解决重入时 totalShot 值不变 watch 不触发的问题)
watch(() => store.game.totalShot, (newVal) => {
if (newVal > 0) {
totalShot.value = newVal;
currentShot.value = store.game.currentShot;
}
}, { immediate: true });
watch(
() => [store.game.currentShot, store.game.totalShot],
([newCurrentShot, newTotalShot]) => {
currentShot.value = newCurrentShot || 0;
totalShot.value = newTotalShot || 0;
},
{ immediate: true }
);
// 监听 Pinia store 中 tips 变化,用于比赛恢复时同步提示文案(替代 uni.$emit 避免时序问题)
// 使用 immediate: true 确保组件创建时立即读取 store 当前值(解决 onShow 早于 onMounted 导致 uni.$emit 事件丢失的问题)

View File

@@ -9,7 +9,7 @@ const props = defineProps({
},
total: {
type: Number,
default: 15,
default: 12,
},
currentRound: {
type: String,
@@ -18,9 +18,9 @@ const props = defineProps({
});
const barColor = ref("");
const remain = ref(15);
const remain = ref(12);
const timer = ref(null);
const loading = ref(false);
const loading = ref(true);
const transitionStyle = ref("all 1s linear");
const currentTeam = ref(null);
const MIN_TICK_MS = 1;

View File

@@ -1,6 +1,6 @@
<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick, watch } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { onHide, onLoad, onShow } from "@dcloudio/uni-app";
import Container from "./components/Container.vue";
import BattleHeader from "./components/BattleHeader.vue";
import BowTarget from "./components/BowTarget.vue";
@@ -15,7 +15,10 @@ import SModal from "./components/SModal.vue";
import { laserCloseAPI, getBattleAPI } from "@/apis";
import { MESSAGETYPESV2 } from "@/constants";
import { getDirectionText } from "@/util";
import audioManager from "@/audioManager";
import audioManager, {
AUDIO_INTERRUPTION_BEGIN_EVENT,
AUDIO_INTERRUPTION_END_EVENT,
} from "@/audioManager";
import useStore from "@/store";
import { storeToRefs } from "pinia";
@@ -38,6 +41,7 @@ const AUDIO_TIMEOUT_PER_KEY = 2600;
const AUDIO_TIMEOUT_MAX = 12000;
const BATTLE_CANCEL_RETURN_DELAY = 2000;
const ROUND_AUDIO_NAMES = ["一", "二", "三", "四", "五"];
const X_RING_STREAKS_KEY = "team-battle-x-ring-streaks";
const PROGRESS_ZERO_EVENT = "team-battle-progress-zero";
const COUNTDOWN_READY_EVENT = "team-battle-countdown-ready";
@@ -104,6 +108,21 @@ watch(online, (newVal, oldVal) => {
});
// 统一把秒级或毫秒级时间戳转成毫秒,方便和本机时间比较。
function loadXRingStreaks() {
const cached = uni.getStorageSync(X_RING_STREAKS_KEY);
xRingStreaks.value =
cached && typeof cached === "object" && !Array.isArray(cached) ? cached : {};
}
function saveXRingStreaks() {
uni.setStorageSync(X_RING_STREAKS_KEY, xRingStreaks.value);
}
function clearXRingStreaks() {
xRingStreaks.value = {};
uni.removeStorageSync(X_RING_STREAKS_KEY);
}
function normalizeTimestamp(value) {
const numberValue = Number(value || 0);
if (!numberValue) return 0;
@@ -210,11 +229,19 @@ function waitForRoundTipClosed(isFinal) {
});
}
function handleRoundTipAutoClose() {
function closeRoundTip() {
showRoundTip.value = false;
clearRoundTipWaiters();
}
function cancelRoundTipDisplay() {
closeRoundTip();
}
function handleRoundTipAutoClose() {
closeRoundTip();
}
function markProgressDeadline(countdown, delayMs = 0) {
if (!countdown?.value || !countdown?.durationMs) {
progressDeadlineAt = 0;
@@ -280,7 +307,7 @@ function invalidateBattleQueue({ stopAudio = false, stopProgress = false } = {})
clearAudioWaiters();
progressDeadlineAt = 0;
clearProgressZeroWaiters();
clearRoundTipWaiters();
cancelRoundTipDisplay();
if (stopAudio) audioManager.stopAll();
if (stopProgress) uni.$emit("update-remain", { stop: true });
}
@@ -291,6 +318,22 @@ function enqueueBattleMessage(message) {
if (battleEnded && message.type !== MESSAGETYPESV2.BattleEnd) return;
if (message.type === MESSAGETYPESV2.BattleEnd) battleEnded = true;
if (message.type === MESSAGETYPESV2.InvalidShot) {
const receivedAt = Date.now();
const order = ++queueOrder;
battleQueue.value.push({
message,
type: message.type,
key: `${message.type}:invalid:${receivedAt}:${order}`,
serverTime: 0,
receivedAt,
order,
});
sortBattleQueue();
runBattleQueue();
return;
}
// 入队阶段只做排序、去重和时间边界判断,不直接改 UI。
const serverTime = getServerTime(message);
const key = getMessageKey(message);
@@ -402,6 +445,20 @@ function onAudioEnded(key) {
});
}
function handleBattleCovered() {
if (pendingRestoreTimer) {
clearTimeout(pendingRestoreTimer);
pendingRestoreTimer = null;
}
hideRestoreLoading();
pendingRoundAudio = false;
invalidateBattleQueue({ stopAudio: true, stopProgress: true });
}
function handleBattleRecovered() {
scheduleRestoreLatestBattle();
}
// 队伍信息优先用接口返回值;接口缺失时使用本地缓存,避免重进页面时头像为空。
function loadTeamPlayers(teamInfo, storageKey) {
if (Array.isArray(teamInfo?.players)) return [...teamInfo.players];
@@ -422,7 +479,46 @@ function updateGoldenRound(battleInfo) {
}
const rounds = Array.isArray(battleInfo.rounds) ? battleInfo.rounds : [];
const finishedGoldCount = rounds.filter((round) => !!round?.ifGold).length;
goldenRound.value = Math.max(1, finishedGoldCount + (battleInfo.current?.playerId ? 1 : 0));
// goldenRound.value = Math.max(1, finishedGoldCount + (battleInfo.current?.playerId ? 1 : 0));
goldenRound.value = Math.max(1, finishedGoldCount);
}
// Restore an info snapshot whose eventType points at the NewRound phase.
function getRestorePrevRound(battleInfo) {
const currentRoundValue = Number(battleInfo?.current?.round || 0);
if (currentRoundValue > 1) return currentRoundValue - 1;
const rounds = Array.isArray(battleInfo?.rounds) ? battleInfo.rounds : [];
return Math.max(1, rounds.length || 1);
}
function applyRestoreNewRoundSnapshot(battleInfo) {
const prevRound = getRestorePrevRound(battleInfo);
start.value = true;
showRoundTip.value = false;
scores.value = [];
blueScores.value = [];
currentRound.value = prevRound;
if (battleInfo.current?.goldRound) {
store.updateShotInfo(0, 0);
currentBluePoint.value = battleInfo.teams?.[1]?.score ?? 0;
currentRedPoint.value = battleInfo.teams?.[2]?.score ?? 0;
} else {
const latestRound = battleInfo.rounds?.[prevRound - 1];
if (battleInfo?.shootNumber) {
store.updateShotInfo(0, battleInfo.shootNumber);
}
if (latestRound) {
currentBluePoint.value = latestRound.scores?.[1]?.score ?? 0;
currentRedPoint.value = latestRound.scores?.[2]?.score ?? 0;
} else {
currentBluePoint.value = 0;
currentRedPoint.value = 0;
}
}
return prevRound;
}
// 回填比赛基础信息:队伍、比分、轮次、金箭状态等公共字段都在这里统一处理。
@@ -633,7 +729,7 @@ function applyReadyState(battleInfo) {
updateTips("");
progressDeadlineAt = 0;
clearProgressZeroWaiters();
clearRoundTipWaiters();
cancelRoundTipDisplay();
const createTime = normalizeTimestamp(battleInfo?.createTime || Date.now());
const readyElapsed = (Date.now() - createTime) / 1000;
@@ -645,7 +741,7 @@ function applyReadyState(battleInfo) {
}
// 快照恢复入口:只把页面拉到服务端最新状态,不重放已经发生过的语音。
function applyBattleSnapshot(battleInfo, { restore = false } = {}) {
function applyBattleSnapshot(battleInfo, { restore = false, restoreEventType = 0 } = {}) {
// 快照恢复只负责“把页面拉回最新状态”,不重放历史语音。
applyBattleBase(battleInfo);
if (battleInfo.status === 0) {
@@ -655,6 +751,12 @@ function applyBattleSnapshot(battleInfo, { restore = false } = {}) {
start.value = true;
showRoundTip.value = false;
if (restore && restoreEventType === MESSAGETYPESV2.NewRound) {
applyRestoreNewRoundSnapshot(battleInfo);
return;
}
updateShotInfo(battleInfo);
updateCurrentRoundScores(battleInfo);
@@ -682,6 +784,7 @@ function applyBattleSnapshot(battleInfo, { restore = false } = {}) {
// 开局任务:切换到正式比赛态,并播报“比赛开始”。
async function runBattleStartTask(task, runId) {
// 开赛任务只负责切换正式态并播“比赛开始”,后续进入队列顺序。
clearXRingStreaks();
applyBattleBase(task.message);
start.value = true;
pendingRoundAudio = true;
@@ -694,12 +797,20 @@ async function runBattleStartTask(task, runId) {
async function runToSomeoneShootTask(task, runId) {
// 新射手任务:先等上一轮倒计时归零,再更新展示、播轮次/射手语音、启动倒计时。
const battleInfo = task.message;
const shouldEnterImmediately = showRoundTip.value;
if (shouldEnterImmediately) {
cancelRoundTipDisplay();
progressDeadlineAt = 0;
clearProgressZeroWaiters();
} else {
await waitForProgressZero();
}
if (!isQueueAlive(runId)) return;
applyBattleBase(battleInfo);
start.value = true;
showRoundTip.value = false;
hideRestoreLoading();
cancelRoundTipDisplay();
updateShotInfo(battleInfo);
const current = battleInfo.current || {};
@@ -747,17 +858,26 @@ async function runToSomeoneShootTask(task, runId) {
});
}
function updateXRingStreak(shooterId, isXRing) {
function isTenPlusRing(shot) {
return !!(shot?.ringX || Number(shot?.ring) >= 10);
}
function updateXRingStreak(shooterId, isTenPlusRingShot) {
if (!shooterId) return false;
const id = String(shooterId);
if (!isXRing) {
if (!isTenPlusRingShot) {
xRingStreaks.value[id] = 0;
saveXRingStreaks();
return false;
}
xRingStreaks.value[id] = (xRingStreaks.value[id] || 0) + 1;
if (xRingStreaks.value[id] < 3) return false;
if (xRingStreaks.value[id] < 3) {
saveXRingStreaks();
return false;
}
xRingStreaks.value[id] = 0;
saveXRingStreaks();
return true;
}
@@ -790,7 +910,7 @@ async function runShootResultTask(task) {
const isTententen = updateXRingStreak(
currentShooterId.value,
!!(battleInfo.shootData?.ringX && battleInfo.shootData?.ring)
isTenPlusRing(battleInfo.shootData)
);
const audioKeys = buildShootResultAudioKeys(battleInfo.shootData);
if (isTententen) audioKeys.push("tententen");
@@ -801,7 +921,7 @@ async function runShootResultTask(task) {
async function runNewRoundTask(task, runId) {
// 新回合提示要故意延后一点,避免和上一箭结果展示抢先后顺序。
const battleInfo = task.message;
const prevRound = currentRound.value;
const prevRound = task.restorePrevRound || currentRound.value;
await new Promise((resolve) => setTimeout(resolve, ROUND_TIP_DELAY));
if (!isQueueAlive(runId)) return;
@@ -837,9 +957,6 @@ async function runNewRoundTask(task, runId) {
currentRedPoint.value = 0;
}
pendingRoundAudio = true;
await waitForRoundTipClosed(!!battleInfo.current?.goldRound);
if (!isQueueAlive(runId)) return;
showRoundTip.value = false;
}
// 终局任务:播放结束语音后,根据状态跳结果页或返回上一页。
@@ -847,6 +964,7 @@ async function runBattleEndTask(task, runId) {
const battleInfo = task.message;
applyBattleBase(battleInfo);
battleEnded = true;
clearXRingStreaks();
matchStatus.value = battleInfo.status;
if (battleInfo.status === 4) {
showRoundTip.value = true;
@@ -907,15 +1025,44 @@ async function restoreLatestBattle() {
latestAppliedServerTime.value = Math.max(latestAppliedServerTime.value, snapshotTime);
}
const restoreEventType = Number(result?.eventType || 0);
if (result.status === 2) {
clearXRingStreaks();
hideRestoreLoading();
uni.redirectTo({
url: `/pages/friend-battle-result?battleId=${result.matchId}`,
});
return;
}
if (result.status === 4) {
clearXRingStreaks();
}
applyBattleSnapshot(result, { restore: true });
if (restoreEventType === MESSAGETYPESV2.NewRound) {
const prevRound = getRestorePrevRound(result);
const restoreMessage = { ...result, type: MESSAGETYPESV2.NewRound };
const restoreKey = getMessageKey(restoreMessage);
applyBattleSnapshot(result, { restore: true, restoreEventType });
if (!handledMessageKeys.has(restoreKey) && !queuedMessageKeys.has(restoreKey)) {
queuedMessageKeys.add(restoreKey);
battleQueue.value.unshift({
message: result,
type: MESSAGETYPESV2.NewRound,
key: restoreKey,
serverTime: snapshotTime,
receivedAt: Date.now(),
order: ++queueOrder,
restorePrevRound: prevRound,
});
}
runBattleQueue();
return;
}
applyBattleSnapshot(result, { restore: true, restoreEventType });
runBattleQueue();
}
@@ -967,7 +1114,7 @@ onLoad((options) => {
shootTimeTotal.value = DEFAULT_SHOOT_TIME;
showOfflineModal.value = false;
hideRestoreLoading();
xRingStreaks.value = {};
loadXRingStreaks();
queueGeneration += 1;
battleQueue.value = [];
queueRunning.value = false;
@@ -981,7 +1128,7 @@ onLoad((options) => {
queuedMessageKeys.clear();
progressDeadlineAt = 0;
clearProgressZeroWaiters();
clearRoundTipWaiters();
cancelRoundTipDisplay();
store.updateShotInfo(0, 0);
store.updateTips("");
latestShotFlash.value = null;
@@ -995,6 +1142,8 @@ onMounted(async () => {
});
uni.$on("socket-inbox", onReceiveMessage);
uni.$on("audioEnded", onAudioEnded);
uni.$on(AUDIO_INTERRUPTION_BEGIN_EVENT, handleBattleCovered);
uni.$on(AUDIO_INTERRUPTION_END_EVENT, handleBattleRecovered);
uni.$on(PROGRESS_ZERO_EVENT, onProgressZero);
uni.$on(COUNTDOWN_READY_EVENT, hideRestoreLoading);
await laserCloseAPI();
@@ -1015,9 +1164,17 @@ onBeforeUnmount(() => {
}
hideRestoreLoading();
invalidateBattleQueue({ stopAudio: true, stopProgress: true });
console.log('onBeforeUnmount', '页面卸载前')
audioManager.stopAll();
uni.$off(AUDIO_INTERRUPTION_BEGIN_EVENT, handleBattleCovered);
uni.$off(AUDIO_INTERRUPTION_END_EVENT, handleBattleRecovered);
});
onHide(()=>{
console.log('onHide', '页面大退')
handleBattleCovered();
})
// 每次回到前台都重新拉最新比赛快照,确保画面与后端一致。
onShow(() => {
console.log('onshow')
@@ -1097,7 +1254,7 @@ onShow(() => {
<view class="offline-modal">
<text class="offline-title">设备已离线</text>
<text class="offline-desc">检测到设备已断开连接请检查设备后继续比赛</text>
<SButton @click="showOfflineModal = false">我知道了</SButton>
<SButton :onClick="() => (showOfflineModal = false)">我知道了</SButton>
</view>
</SModal>
</view>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 8.5 KiB

After

Width:  |  Height:  |  Size: 12 KiB

View File

@@ -137,6 +137,10 @@ export default defineStore("store", {
this.device.deviceId = deviceId;
this.device.deviceName = deviceName;
},
clearDevice() {
this.device = getDefaultDevice();
this.online = false;
},
async updateConfig(config) {
this.config = config;
if (this.user.scores !== undefined) {