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

97
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(() => {
} return store.state.configuration.grayHiddenPlayers
}, && (!store.state.currentWorld || store.state.currentWorld.name !== props.player.location.world);
computed: { }),
otherWorld(): boolean {
const store = useStore();
return store.state.configuration.grayHiddenPlayers
&& (!store.state.currentWorld || store.state.currentWorld.name !== this.player.location.world);
},
title(): string {
if(this.player.hidden) {
return 'This player is currently hidden from the map\nDouble-click to follow player when they become visible';
} else if(this.otherWorld) {
return 'This player is in another world.\nClick to center on player\nDouble-click to follow player';
} else {
return 'Click to center on player\nDouble-click to follow player';
}
}
},
methods: {
follow() {
useStore().commit(MutationTypes.SET_FOLLOW_TARGET, this.player);
},
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') {
return;
}
if(e.shiftKey) { title = computed(() => {
this.follow(); if(props.player.hidden) {
} else { return 'This player is currently hidden from the map\nDouble-click to follow player when they become visible';
if(!this.player.hidden) { } else if(otherWorld.value) {
this.pan(); return 'This player is in another world.\nClick to center on player\nDouble-click to follow player';
} else {
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);
}
},
follow = () => store.commit(MutationTypes.SET_FOLLOW_TARGET, props.player),
onKeydown = (e: KeyboardEvent) => {
if(e.key !== ' ' && e.key !== 'Enter') {
return;
}
if(e.shiftKey) {
follow();
} else {
if(!props.player.hidden) {
pan();
}
}
};
let image = ref(defaultImage);
return {
image,
title,
otherWorld,
pan,
follow,
onKeydown
} }
} },
}); });
</script> </script>