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>
<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"
:disbled="player.hidden"
@click.prevent="pan"
@ -26,12 +26,12 @@
</template>
<script lang="ts">
import {defineComponent} from 'vue';
import {defineComponent, computed, ref} from 'vue';
import {DynmapPlayer} from "@/dynmap";
import {useStore} from "@/store";
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({
name: 'PlayerListItem',
@ -41,51 +41,58 @@ export default defineComponent({
required: true
}
},
data() {
return {
playerImage: playerImage,
}
},
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;
}
setup(props) {
const store = useStore(),
otherWorld = computed(() => {
return store.state.configuration.grayHiddenPlayers
&& (!store.state.currentWorld || store.state.currentWorld.name !== props.player.location.world);
}),
if(e.shiftKey) {
this.follow();
} else {
if(!this.player.hidden) {
this.pan();
title = computed(() => {
if(props.player.hidden) {
return 'This player is currently hidden from the map\nDouble-click to follow player when they become visible';
} else if(otherWorld.value) {
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>