From 30d02195356c51c11bd0b6f9859ca9beb7e6358e Mon Sep 17 00:00:00 2001
From: James Lyne <jim+github@not-null.co.uk>
Date: Thu, 31 Dec 2020 13:55:05 +0000
Subject: [PATCH] Add player image to FollowTarget

---
 src/components/Map.vue                  |  8 ++--
 src/components/sidebar/FollowTarget.vue | 50 ++++++++++++++++---------
 2 files changed, 37 insertions(+), 21 deletions(-)

diff --git a/src/components/Map.vue b/src/components/Map.vue
index cb91f07..4523d4d 100644
--- a/src/components/Map.vue
+++ b/src/components/Map.vue
@@ -239,17 +239,17 @@ export default defineComponent({
 			}
 
 			if(!this.leaflet) {
-				console.warn(`Cannot follow ${player.name}. Map not yet initialized.`);
+				console.warn(`Cannot follow ${player.account}. Map not yet initialized.`);
 				return;
 			}
 
 			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;
 			}
 
 			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;
 			}
 
@@ -258,7 +258,7 @@ export default defineComponent({
 					world = store.state.worlds.get(player.location.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;
 				}
 
diff --git a/src/components/sidebar/FollowTarget.vue b/src/components/sidebar/FollowTarget.vue
index 1806461..2dcec1d 100644
--- a/src/components/sidebar/FollowTarget.vue
+++ b/src/components/sidebar/FollowTarget.vue
@@ -19,7 +19,7 @@
 		<h2>Following</h2>
 
 		<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__name" v-html="target.name"></span>
 				<span class="target__status" v-show="target.hidden">Currently hidden</span>
@@ -32,12 +32,13 @@
 </template>
 
 <script lang="ts">
-import {defineComponent} from 'vue';
 import {DynmapPlayer} from "@/dynmap";
 import {useStore} from "@/store";
 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({
 	name: 'FollowTarget',
@@ -47,23 +48,38 @@ export default defineComponent({
 			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 {
-			playerImage,
+			image,
+			onKeydown,
+			unfollow
 		}
 	},
-	methods: {
-		unfollow() {
-			useStore().commit(MutationTypes.CLEAR_FOLLOW_TARGET, undefined);
-		},
-		onKeydown(e: KeyboardEvent) {
-			if(e.key !== ' ') {
-				return;
-			}
-
-			this.unfollow();
-		}
-	}
 });
 </script>