Add player image to FollowTarget

This commit is contained in:
James Lyne 2020-12-31 13:55:05 +00:00
parent 1f3ba13194
commit 30d0219535
2 changed files with 37 additions and 21 deletions

View File

@ -239,17 +239,17 @@ export default defineComponent({
} }
if(!this.leaflet) { if(!this.leaflet) {
console.warn(`Cannot follow ${player.name}. Map not yet initialized.`); console.warn(`Cannot follow ${player.account}. Map not yet initialized.`);
return; return;
} }
if(player.hidden) { 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; return;
} }
if(!player.location.world) { 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; return;
} }
@ -258,7 +258,7 @@ export default defineComponent({
world = store.state.worlds.get(player.location.world); world = store.state.worlds.get(player.location.world);
if(!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; return;
} }

View File

@ -19,7 +19,7 @@
<h2>Following</h2> <h2>Following</h2>
<div :class="{'following__target': true, 'following__target--hidden': target.hidden}"> <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__info">
<span class="target__name" v-html="target.name"></span> <span class="target__name" v-html="target.name"></span>
<span class="target__status" v-show="target.hidden">Currently hidden</span> <span class="target__status" v-show="target.hidden">Currently hidden</span>
@ -32,12 +32,13 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import {defineComponent} from 'vue';
import {DynmapPlayer} from "@/dynmap"; import {DynmapPlayer} from "@/dynmap";
import {useStore} from "@/store"; import {useStore} from "@/store";
import {MutationTypes} from "@/store/mutation-types"; 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({ export default defineComponent({
name: 'FollowTarget', name: 'FollowTarget',
@ -47,23 +48,38 @@ export default defineComponent({
required: true 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 { return {
playerImage, image,
onKeydown,
unfollow
} }
}, },
methods: {
unfollow() {
useStore().commit(MutationTypes.CLEAR_FOLLOW_TARGET, undefined);
},
onKeydown(e: KeyboardEvent) {
if(e.key !== ' ') {
return;
}
this.unfollow();
}
}
}); });
</script> </script>