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

靶子组件优化

Browse Source
This commit is contained in:
kron
2025-07-16 09:33:33 +08:00
parent 9db88fb945
commit d5bc1a6a89
13 changed files with 38 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/BowData.vue
View File

@@ -40,7 +40,7 @@ const props = defineProps({
</view>
</view>
<view :style="{ width: '100%', marginBottom: '20px' }">
<BowTarget :scores="arrows" :showLatestArrow="false" />
<BowTarget :scores="arrows" />
</view>
<view class="desc">
<text>{{ arrows.length }}</text>

97
src/components/BowTarget.vue
View File

@@ -6,14 +6,14 @@ import { simulShootAPI } from "@/apis";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
const { device } = storeToRefs(store);
const { user, device } = storeToRefs(store);
const props = defineProps({
totalRound: {
currentRound: {
type: Number,
default: 0,
},
currentRound: {
totalRound: {
type: Number,
default: 0,
},
@@ -33,31 +33,22 @@ const props = defineProps({
type: Array,
default: () => [],
},
showLatestArrow: {
type: Boolean,
default: true,
},
start: {
type: Boolean,
default: false,
},
showE: {
type: Boolean,
default: true,
},
mode: {
type: String,
default: "solo", // solo 单排，team 双排
},
// start: {
// type: Boolean,
// default: false,
// },
stop: {
type: Boolean,
default: false,
},
});
const showRoundTips = ref(false);
const latestOne = ref(null);
// const startCount = ref(false);
const prevLength = ref(0);
const timer = ref(null);
// watch(
@@ -72,15 +63,12 @@ const timer = ref(null);
watch(
() => props.scores,
(newVal) => {
if (newVal.length - prevLength.value === 1) {
(newVal, oldVal) => {
latestOne.value = newVal[newVal.length - 1];
if (timer.value) clearTimeout(timer.value);
showRoundTips.value = true;
timer.value = setTimeout(() => {
showRoundTips.value = false;
latestOne.value = null;
}, 1000);
}
prevLength.value = newVal.length;
},
{
deep: true,
@@ -90,14 +78,11 @@ watch(
watch(
() => props.blueScores,
(newVal) => {
if (newVal.length - prevLength.value === 1) {
latestOne.value = newVal[newVal.length - 1];
if (timer.value) clearTimeout(timer.value);
showRoundTips.value = true;
timer.value = setTimeout(() => {
showRoundTips.value = false;
latestOne.value = null;
}, 1000);
}
prevLength.value = newVal.length;
},
{
deep: true,
@@ -133,64 +118,30 @@ const simulShoot2 = async () => {
<view class="target">
<view v-if="stop" class="stop-sign">中场休息</view>
<view
v-if="scores.length && showRoundTips && showLatestArrow && showE"
v-if="latestOne && user.id === latestOne.playerId"
class="e-value fade-in-out"
:style="{
left: calcRealX(
scores[scores.length - 1].ring ? scores[scores.length - 1].x : 0,
66
),
top: calcRealY(
scores[scores.length - 1].ring ? scores[scores.length - 1].y : 0,
150
),
left: calcRealX(latestOne.ring ? latestOne.x : 0, 66),
top: calcRealY(latestOne.ring ? latestOne.y : 0, 150),
}"
>
经验 +1
</view>
<view
v-if="scores.length && showRoundTips && showLatestArrow"
v-if="latestOne"
class="round-tip fade-in-out"
:style="{
left: calcRealX(
scores[scores.length - 1].ring ? scores[scores.length - 1].x : 0,
100
),
top: calcRealY(
scores[scores.length - 1].ring ? scores[scores.length - 1].y : 0,
100
),
left: calcRealX(latestOne.ring ? latestOne.x : 0, 100),
top: calcRealY(latestOne.ring ? latestOne.y : 0, 100),
}"
>{{ scores[scores.length - 1].ring || "未上靶"
}}<text v-if="scores[scores.length - 1].ring">环</text></view
>
<view
v-if="blueScores.length && showRoundTips && showLatestArrow"
class="round-tip fade-in-out"
:style="{
left: calcRealX(
blueScores[blueScores.length - 1].ring
? blueScores[blueScores.length - 1].x
: 0,
100
),
top: calcRealY(
blueScores[blueScores.length - 1].ring
? blueScores[blueScores.length - 1].y
: 0,
100
),
}"
>{{ blueScores[blueScores.length - 1].ring || "未上靶"
}}<text v-if="blueScores[blueScores.length - 1].ring">环</text></view
>{{ latestOne.ring || "未上靶"
}}<text v-if="latestOne.ring">环</text></view
>
<block v-for="(bow, index) in scores" :key="index">
<view
v-if="bow.ring > 0"
:class="`hit ${
index === scores.length - 1 && !blueScores.length && showLatestArrow
? 'pump-in'
: ''
index === scores.length - 1 && showLatestArrow ? 'pump-in' : ''
}`"
:style="{
left: calcRealX(bow.x),
@@ -210,9 +161,7 @@ const simulShoot2 = async () => {
<view
v-if="bow.ring > 0"
:class="`hit ${
index === scores.length - 1 && !blueScores.length && showLatestArrow
? 'pump-in'
: ''
index === blueScores.length - 1 && showLatestArrow ? 'pump-in' : ''
}`"
:style="{
left: calcRealX(bow.x),

1
src/components/MeleeResult.vue
View File

@@ -76,7 +76,6 @@ const onSelect = (userId) => {
<view :style="{ width: '95%' }">
<BowTarget
:scores="scores"
:showLatestArrow="false"
:avatar="currentUser ? currentUser.avatar : ''"
/>
</view>

6
src/components/TeamResult.vue
View File

@@ -106,11 +106,7 @@ watch(
</view>
</view>
<view :style="{ width: '95%' }">
<BowTarget
:scores="redScores"
:blueScores="blueScores"
:showLatestArrow="false"
/>
<BowTarget :scores="redScores" :blueScores="blueScores" />
</view>
<view class="score-row" v-for="(player, index) in players" :key="index">
<Avatar

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

@@ -321,8 +321,6 @@ async function onReceiveMessage(messages = []) {
if (msg.constructor === MESSAGETYPES.ToSomeoneShoot) {
if (room.value.battleType === 1) {
if (currentShooterId.value !== msg.userId) {
scores.value = [];
blueScores.value = [];
seq.value += 1;
currentShooterId.value = msg.userId;
if (redTeam.value[0].id === currentShooterId.value) {
@@ -341,8 +339,8 @@ async function onReceiveMessage(messages = []) {
if (msg.constructor === MESSAGETYPES.ShootResult) {
if (room.value.battleType === 1) {
const isRed = redTeam.value.find((item) => item.id === msg.userId);
if (isRed) scores.value = [msg.target];
else blueScores.value = [msg.target];
if (isRed) scores.value.push(msg.target);
else blueScores.value.push(msg.target);
if (roundResults.value[currentRound.value - 1]) {
if (isRed && roundResults.value[currentRound.value - 1].redArrows) {
roundResults.value[currentRound.value - 1].redArrows.push(
@@ -551,7 +549,6 @@ onUnmounted(() => {
/>
<BowTarget
:mode="room.battleType ? 'team' : 'solo'"
:showE="start && user.id === currentShooterId"
:power="start ? power : 0"
:currentRound="currentRound"
:totalRound="totalRounds"

1
src/pages/first-try.vue
View File

@@ -239,7 +239,6 @@ const onClose = () => {
</view>
<BowTarget
v-if="step === 4"
:start="start"
:currentRound="step === 4 ? scores.length : 0"
:totalRound="step === 4 ? total : 0"
:scores="scores"

2
src/pages/melee-bow-data.vue
View File

@@ -54,7 +54,7 @@ onLoad(async (options) => {
</view>
</view>
<view :style="{ marginTop: '10px' }">
<BowTarget :scores="scores" :showLatestArrow="false" />
<BowTarget :scores="scores" />
</view>
<view class="score-text"
><text :style="{ color: '#fed847' }">{{ scores.length }}</text

1
src/pages/melee-match.vue
View File

@@ -207,7 +207,6 @@ onUnmounted(() => {
</view>
<BowTarget
v-if="start"
:showE="start"
:currentRound="scores.length"
:totalRound="start ? 12 : 0"
:scores="scores"

2
src/pages/mine-bow-data.vue
View File

@@ -33,7 +33,7 @@ onLoad(async (options) => {
</view>
</view> -->
<view :style="{ marginBottom: '20px' }">
<BowTarget :scores="arrows" :showLatestArrow="false" />
<BowTarget :scores="arrows" />
</view>
<view class="desc">
<text>{{ arrows.length }}</text>

1
src/pages/practise-one.vue
View File

@@ -123,7 +123,6 @@ onUnmounted(() => {
<BowPower :power="power" />
</view>
<BowTarget
:start="start"
:totalRound="start ? total / 4 : 0"
:currentRound="currentRound"
:scores="scores"

1
src/pages/practise-two.vue
View File

@@ -117,7 +117,6 @@ onUnmounted(() => {
<BowPower :power="power" />
</view>
<BowTarget
:start="start"
:currentRound="scores.length"
:totalRound="start ? total : 0"
:scores="scores"

6
src/pages/team-bow-data.vue
View File

@@ -98,11 +98,7 @@ const onClickTab = (index) => {
</view>
</view>
<view :style="{ margin: '20px 0' }">
<BowTarget
:scores="redScores"
:blueScores="blueScores"
:showLatestArrow="false"
/>
<BowTarget :scores="redScores" :blueScores="blueScores" />
</view>
<view class="score-row" v-for="(player, index) in players" :key="index">
<Avatar

7
src/pages/team-match.vue
View File

@@ -140,8 +140,6 @@ async function onReceiveMessage(messages = []) {
}
if (msg.constructor === MESSAGETYPES.ToSomeoneShoot) {
if (currentShooterId.value !== msg.userId) {
scores.value = [];
blueScores.value = [];
seq.value += 1;
currentShooterId.value = msg.userId;
if (redTeam.value[0].id === currentShooterId.value) {
@@ -158,8 +156,8 @@ async function onReceiveMessage(messages = []) {
}
if (msg.constructor === MESSAGETYPES.ShootResult) {
const isRed = redTeam.value.find((item) => item.id === msg.userId);
if (isRed) scores.value = [msg.target];
else blueScores.value = [msg.target];
if (isRed) scores.value.push(msg.target);
else blueScores.value.push(msg.target);
if (roundResults.value[currentRound.value - 1]) {
if (isRed && roundResults.value[currentRound.value - 1].redArrows) {
roundResults.value[currentRound.value - 1].redArrows.push(msg.target);
@@ -266,7 +264,6 @@ onUnmounted(() => {
<BowTarget
v-if="start"
mode="team"
:showE="start && user.id === currentShooterId"
:power="start ? power : 0"
:currentRound="currentRound"
:totalRound="totalRounds"