151 lines
3.3 KiB
Vue
151 lines
3.3 KiB
Vue
<script setup>
|
||
import { ref, watch } from "vue";
|
||
const props = defineProps({
|
||
isRed: {
|
||
type: Boolean,
|
||
default: true,
|
||
},
|
||
team: {
|
||
type: Array,
|
||
default: () => [],
|
||
},
|
||
currentShooterId: {
|
||
type: [Number, String],
|
||
default: "",
|
||
},
|
||
});
|
||
const players = ref({});
|
||
const currentTeam = ref(false);
|
||
const firstName = ref("");
|
||
|
||
// 抽出判断：当前队伍且该玩家排序为 0（队伍首位）
|
||
const isFirst = (id) =>
|
||
currentTeam.value && ((players.value[id] || {}).sort || 0) === 0;
|
||
|
||
const getPos = (id) => {
|
||
const sort = (players.value[id] || {}).sort || 0;
|
||
if (currentTeam.value) {
|
||
return 30 * (sort + Math.ceil(sort / 2));
|
||
}
|
||
return sort * 40;
|
||
};
|
||
|
||
const syncPlayers = () => {
|
||
const nextPlayers = {};
|
||
const shooterId = props.currentShooterId;
|
||
const shooterIndex = props.team.findIndex(
|
||
(p) => String(p?.id) === String(shooterId)
|
||
);
|
||
const nextTeam = [...props.team];
|
||
|
||
currentTeam.value = !!shooterId && shooterIndex >= 0;
|
||
firstName.value = "";
|
||
|
||
if (currentTeam.value) {
|
||
const target = nextTeam.splice(shooterIndex, 1)[0];
|
||
if (target) {
|
||
nextTeam.unshift(target);
|
||
firstName.value = target.name || "";
|
||
}
|
||
}
|
||
|
||
nextTeam.forEach((p, index) => {
|
||
if (p?.id) nextPlayers[p.id] = { sort: index, ...p };
|
||
});
|
||
players.value = nextPlayers;
|
||
};
|
||
|
||
watch(
|
||
[() => props.team, () => props.currentShooterId],
|
||
syncPlayers,
|
||
{ immediate: true, deep: true }
|
||
);
|
||
</script>
|
||
|
||
<template>
|
||
<view class="container">
|
||
<image
|
||
:src="isRed ? '../static/flag-red.png' : '../static/flag-blue.png'"
|
||
class="flag"
|
||
:style="{
|
||
[isRed ? 'left' : 'right']: '10rpx',
|
||
top: currentTeam ? '-36rpx' : '-24rpx',
|
||
}"
|
||
/>
|
||
<view
|
||
v-for="(item, index) in team"
|
||
:key="item.id || index"
|
||
class="player"
|
||
:style="{
|
||
width: (isFirst(item.id) ? 80 : 60) + 'rpx',
|
||
height: (isFirst(item.id) ? 80 : 60) + 'rpx',
|
||
zIndex: team.length - ((players[item.id] || {}).sort || 0),
|
||
border: isFirst(item.id) ? '3.5rpx solid' : '2rpx solid',
|
||
borderColor: isRed ? '#ff6060' : '#5fadff',
|
||
top: isFirst(item.id) ? '0rpx' : '12rpx',
|
||
[isRed ? 'left' : 'right']: getPos(item.id) + 'rpx',
|
||
}"
|
||
>
|
||
<image :src="item.avatar || '../static/user-icon.png'" mode="widthFix" />
|
||
<text
|
||
v-if="isFirst(item.id)"
|
||
:style="{ backgroundColor: isRed ? '#ff6060' : '#5fadff' }"
|
||
>{{ isRed ? "红队" : "蓝队" }}</text
|
||
>
|
||
</view>
|
||
<text
|
||
v-if="currentTeam"
|
||
class="truncate"
|
||
:style="{
|
||
color: isRed ? '#ff6060' : '#5fadff',
|
||
[isRed ? 'left' : 'right']: '-4rpx',
|
||
}"
|
||
>{{ firstName }}</text
|
||
>
|
||
</view>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.container {
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
width: 20vw;
|
||
height: 10rpx;
|
||
margin: 0 20rpx;
|
||
}
|
||
.container > text {
|
||
position: absolute;
|
||
font-size: 20rpx;
|
||
text-align: center;
|
||
width: 80rpx;
|
||
bottom: -100rpx;
|
||
}
|
||
.player {
|
||
transition: all 0.3s ease;
|
||
position: absolute;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
box-sizing: border-box;
|
||
}
|
||
.player > image {
|
||
width: 100%;
|
||
min-height: 100%;
|
||
}
|
||
.player > text {
|
||
position: absolute;
|
||
font-size: 15rpx;
|
||
text-align: center;
|
||
width: 76rpx;
|
||
left: 0;
|
||
bottom: 0;
|
||
color: #fff;
|
||
}
|
||
.flag {
|
||
position: absolute;
|
||
width: 45rpx;
|
||
height: 45rpx;
|
||
transition: all 0.3s ease;
|
||
}
|
||
</style>
|