Add player image to FollowTarget
This commit is contained in:
parent
1f3ba13194
commit
30d0219535
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user