removed text from dmg-chart, decreased count of meta data + minor adjustments

This commit is contained in:
2021-10-24 19:35:12 +02:00
committed by Giovanni Harting
parent 5e23e5b148
commit 617b48a87b

View File

@@ -223,8 +223,8 @@
<ul v-for="mate in data.playerMeta.most_mates" :key="mate.player.steamid64" class="list-unstyled"> <ul v-for="mate in data.playerMeta.most_mates" :key="mate.player.steamid64" class="list-unstyled">
<li @click="GoToPlayer(mate.player.vanity_url || mate.player.steamid64)"> <li @click="GoToPlayer(mate.player.vanity_url || mate.player.steamid64)">
<span class="start"> <span class="start">
<img :src="constructAvatarUrl(mate.player.avatar)" alt="Player avatar"> <img :class="mate.player.tracked ? 'tracked' : ''" :src="constructAvatarUrl(mate.player.avatar)"
<i v-if="mate.player.tracked" class="far fa-dot-circle text-success tracked" title="Tracked user"></i> :title="mate.player.tracked ? 'Tracked' : ''" alt="Player avatar">
<span class="text">{{ mate.player.name }}</span> <span class="text">{{ mate.player.name }}</span>
</span> </span>
<span class="end"> <span class="end">
@@ -241,8 +241,8 @@
<ul v-for="mate in data.playerMeta.best_mates" :key="mate.player.steamid64" class="list-unstyled"> <ul v-for="mate in data.playerMeta.best_mates" :key="mate.player.steamid64" class="list-unstyled">
<li @click="GoToPlayer(mate.player.vanity_url || mate.player.steamid64)"> <li @click="GoToPlayer(mate.player.vanity_url || mate.player.steamid64)">
<span class="start"> <span class="start">
<img :src="constructAvatarUrl(mate.player.avatar)" alt="Player avatar"> <img :class="mate.player.tracked ? 'tracked' : ''" :src="constructAvatarUrl(mate.player.avatar)"
<i v-if="mate.player.tracked" class="far fa-dot-circle text-success tracked" title="Tracked user"></i> :title="mate.player.tracked ? 'Tracked' : ''" alt="Player avatar">
<span class="text">{{ mate.player.name }}</span> <span class="text">{{ mate.player.name }}</span>
</span> </span>
<span class="end"> <span class="end">
@@ -261,13 +261,10 @@
<span class="start"> <span class="start">
<span class="text">{{ id[0] }}</span> <span class="text">{{ id[0] }}</span>
</span> </span>
<span class="end" :title="id[0] + ' - ' + id[1] + ' dmg'"> <span :title="id[0] + ' - ' + id[1] + ' dmg'" class="end">
<span :class="'dmg-chart-' + key"> <span :class="'dmg-chart-' + key">
{{ id[1] }} {{ id[1] }}
</span> </span>
<span class="text">
{{ id[1] }}
</span>
</span> </span>
</li> </li>
</ul> </ul>
@@ -336,6 +333,8 @@ export default {
// Variables // Variables
const store = useStore() const store = useStore()
const displayCounter = 3
const data = reactive({ const data = reactive({
userData: { userData: {
authcode: '', authcode: '',
@@ -404,7 +403,7 @@ export default {
const GetPlayer = async () => { const GetPlayer = async () => {
if (props.id) { if (props.id) {
const [res, resData] = await GetUser(props.id) const [res, resData] = await GetUser(props.id)
data.playerMeta = await getPlayerMeta(props.id) data.playerMeta = await getPlayerMeta(props.id, displayCounter)
if (res === 200 && resData) { if (res === 200 && resData) {
store.commit({ store.commit({
@@ -510,12 +509,12 @@ export default {
}) })
watch(() => data.playerMeta, () => { watch(() => data.playerMeta, () => {
mapWeaponDamage()
data.best_maps = sortObjectValue(data.playerMeta.win_maps, 'desc') data.best_maps = sortObjectValue(data.playerMeta.win_maps, 'desc')
if (data.best_maps.length > 4) if (data.best_maps.length > displayCounter)
data.best_maps.splice(4, data.best_maps.length - 4) data.best_maps.splice(displayCounter, data.best_maps.length - displayCounter)
mapWeaponDamage()
}) })
onBeforeUnmount(() => { onBeforeUnmount(() => {
@@ -761,6 +760,11 @@ export default {
height: 25px; height: 25px;
border-radius: 50%; border-radius: 50%;
margin-right: 5px; margin-right: 5px;
margin-left: 5px;
&.tracked {
border: 2px solid var(--bs-success);
}
} }
} }
@@ -784,22 +788,19 @@ export default {
.end { .end {
position: relative; position: relative;
@for $i from 0 through 4 { @for $i from 0 through 3 {
.dmg-chart-#{$i} { .dmg-chart-#{$i} {
position: absolute; position: absolute;
background: rgba(150, 50, 50, .8); background: rgba(150, 50, 50, 1);
border-radius: 15px; border-radius: 15px;
color: transparent; color: transparent;
user-select: none; user-select: none;
} cursor: help;
}
.text { &:hover {
z-index: 1; background: rgba(220, 50, 50, 1);
padding-right: 5px; }
text-align: end; }
user-select: none;
color: #e5e5e5;
} }
} }
} }