Skirda/LiveAtlas
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Convert PlayerListItem to component api

Browse Source
This commit is contained in:
James Lyne 2020-12-23 03:07:19 +00:00
parent c49e3daecd
commit ce7827659a
1 changed files with 52 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
src/components/sidebar/PlayerListItem.vue
View File

@ -16,7 +16,7 @@
<template> <template>
<li :class="{'player': true, 'player--hidden' : !!player.hidden, 'player--other-world': otherWorld}"> <li :class="{'player': true, 'player--hidden' : !!player.hidden, 'player--other-world': otherWorld}">
<img width="16" height="16" class="player__icon" :src="playerImage" alt="" /> <img width="16" height="16" class="player__icon" :src="image" alt="" />
<button class="player__name" type="button" :title="title" <button class="player__name" type="button" :title="title"
:disbled="player.hidden" :disbled="player.hidden"
@click.prevent="pan" @click.prevent="pan"
@ -26,12 +26,12 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import {defineComponent} from 'vue'; import {defineComponent, computed, ref} 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";
const playerImage = require('@/assets/images/player_face.png'); const defaultImage = require('@/assets/images/player_face.png');
export default defineComponent({ export default defineComponent({
name: 'PlayerListItem', name: 'PlayerListItem',
@ -41,51 +41,58 @@ export default defineComponent({
required: true required: true
} }
}, },
data() { setup(props) {
return { const store = useStore(),
playerImage: playerImage, otherWorld = computed(() => {
}
},
computed: {
otherWorld(): boolean {
const store = useStore();
return store.state.configuration.grayHiddenPlayers return store.state.configuration.grayHiddenPlayers
&& (!store.state.currentWorld || store.state.currentWorld.name !== this.player.location.world); && (!store.state.currentWorld || store.state.currentWorld.name !== props.player.location.world);
}, }),
title(): string {
if(this.player.hidden) { title = computed(() => {
if(props.player.hidden) {
return 'This player is currently hidden from the map\nDouble-click to follow player when they become visible'; return 'This player is currently hidden from the map\nDouble-click to follow player when they become visible';
} else if(this.otherWorld) { } else if(otherWorld.value) {
return 'This player is in another world.\nClick to center on player\nDouble-click to follow player'; return 'This player is in another world.\nClick to center on player\nDouble-click to follow player';
} else { } else {
return 'Click to center on player\nDouble-click to follow player'; return 'Click to center on player\nDouble-click to follow player';
} }
}),
pan = () => {
if(!props.player.hidden) {
store.commit(MutationTypes.CLEAR_FOLLOW_TARGET, undefined);
store.commit(MutationTypes.SET_PAN_TARGET, props.player);
} }
}, },
methods: {
follow() { follow = () => store.commit(MutationTypes.SET_FOLLOW_TARGET, props.player),
useStore().commit(MutationTypes.SET_FOLLOW_TARGET, this.player);
}, onKeydown = (e: KeyboardEvent) => {
pan() {
if(!this.player.hidden) {
useStore().commit(MutationTypes.CLEAR_FOLLOW_TARGET, undefined);
useStore().commit(MutationTypes.SET_PAN_TARGET, this.player);
}
},
onKeydown(e: KeyboardEvent) {
if(e.key !== ' ' && e.key !== 'Enter') { if(e.key !== ' ' && e.key !== 'Enter') {
return; return;
} }
if(e.shiftKey) { if(e.shiftKey) {
this.follow(); follow();
} else { } else {
if(!this.player.hidden) { if(!props.player.hidden) {
this.pan(); pan();
}
} }
} }
};
let image = ref(defaultImage);
return {
image,
title,
otherWorld,
pan,
follow,
onKeydown
} }
},
}); });
</script> </script>