Add player image to FollowTarget
This commit is contained in:
parent
1f3ba13194
commit
30d0219535
@ -239,17 +239,17 @@ export default defineComponent({
|
||||
}
|
||||
|
||||
if(!this.leaflet) {
|
||||
console.warn(`Cannot follow ${player.name}. Map not yet initialized.`);
|
||||
console.warn(`Cannot follow ${player.account}. Map not yet initialized.`);
|
||||
return;
|
||||
}
|
||||
|
||||
if(player.hidden) {
|
||||
console.warn(`Cannot follow ${player.name}. Player is hidden from the map.`);
|
||||
console.warn(`Cannot follow ${player.account}. Player is hidden from the map.`);
|
||||
return;
|
||||
}
|
||||
|
||||
if(!player.location.world) {
|
||||
console.warn(`Cannot follow ${player.name}. Player isn't in a known world.`);
|
||||
console.warn(`Cannot follow ${player.account}. Player isn't in a known world.`);
|
||||
return;
|
||||
}
|
||||
|
||||
@ -258,7 +258,7 @@ export default defineComponent({
|
||||
world = store.state.worlds.get(player.location.world);
|
||||
|
||||
if(!world) {
|
||||
console.warn(`Cannot follow ${player.name}. Player isn't in a known world.`);
|
||||
console.warn(`Cannot follow ${player.account}. Player isn't in a known world.`);
|
||||
return;
|
||||
}
|
||||
|
||||
|
@ -19,7 +19,7 @@
|
||||
<h2>Following</h2>
|
||||
|
||||
<div :class="{'following__target': true, 'following__target--hidden': target.hidden}">
|
||||
<img width="32" height="32" class="target__icon" :src="playerImage" alt="" />
|
||||
<img width="32" height="32" class="target__icon" :src="image" alt="" />
|
||||
<span class="target__info">
|
||||
<span class="target__name" v-html="target.name"></span>
|
||||
<span class="target__status" v-show="target.hidden">Currently hidden</span>
|
||||
@ -32,12 +32,13 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import {defineComponent} from 'vue';
|
||||
import {DynmapPlayer} from "@/dynmap";
|
||||
import {useStore} from "@/store";
|
||||
import {MutationTypes} from "@/store/mutation-types";
|
||||
import {defineComponent, onMounted, ref, watch} from "@vue/runtime-core";
|
||||
import Util from '@/util';
|
||||
|
||||
const playerImage = require('@/assets/images/player_face.png');
|
||||
const defaultImage = require('@/assets/images/player_face.png');
|
||||
|
||||
export default defineComponent({
|
||||
name: 'FollowTarget',
|
||||
@ -47,23 +48,38 @@ export default defineComponent({
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
setup(props) {
|
||||
const store = useStore(),
|
||||
image = ref(defaultImage),
|
||||
account = ref(props.target.account),
|
||||
|
||||
unfollow = () => {
|
||||
useStore().commit(MutationTypes.CLEAR_FOLLOW_TARGET, undefined);
|
||||
},
|
||||
onKeydown = (e: KeyboardEvent) => {
|
||||
if(e.key !== ' ') {
|
||||
return;
|
||||
}
|
||||
|
||||
unfollow();
|
||||
},
|
||||
updatePlayerImage = () => {
|
||||
image.value = defaultImage;
|
||||
|
||||
if(store.state.components.playerMarkers && store.state.components.playerMarkers.showSkinFaces) {
|
||||
Util.getMinecraftHead(props.target, '16').then((result) => image.value = result.src).catch(() => {});
|
||||
}
|
||||
};
|
||||
|
||||
watch(account, () => updatePlayerImage());
|
||||
onMounted(() => updatePlayerImage());
|
||||
|
||||
return {
|
||||
playerImage,
|
||||
image,
|
||||
onKeydown,
|
||||
unfollow
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
unfollow() {
|
||||
useStore().commit(MutationTypes.CLEAR_FOLLOW_TARGET, undefined);
|
||||
},
|
||||
onKeydown(e: KeyboardEvent) {
|
||||
if(e.key !== ' ') {
|
||||
return;
|
||||
}
|
||||
|
||||
this.unfollow();
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user