Implement skin images in player list

src/components/sidebar/PlayerListItem.vue

@@ -26,10 +26,11 @@
 </template>
 
 <script lang="ts">
-import {defineComponent, computed, ref} from 'vue';
+import {defineComponent, computed, ref, onMounted} from 'vue';
 import {DynmapPlayer} from "@/dynmap";
 import {useStore} from "@/store";
 import {MutationTypes} from "@/store/mutation-types";
+import Util from '@/util';
 
 const defaultImage = require('@/assets/images/player_face.png');
 
@@ -83,6 +84,12 @@ export default defineComponent({
 
 		let image = ref(defaultImage);
 
+		onMounted(() => {
+			if(store.state.components.playerMarkers && store.state.components.playerMarkers.showSkinFaces) {
+				Util.getMinecraftHead(props.player, '16').then((result) => image.value = result.src).catch(() => {});
+			}
+		});
+
 		return {
 			image,
 			title,

src/util.ts

@@ -17,7 +17,8 @@
 import {DynmapPlayer} from "@/dynmap";
 import {useStore} from "@/store";
 
-const headCache = new Map<DynmapPlayer, HTMLImageElement>();
+const headCache = new Map<DynmapPlayer, HTMLImageElement>(),
+	headUnresolvedCache = new Map<DynmapPlayer, Promise<HTMLImageElement>>();
 
 export default {
 	getMinecraftTime(serverTime: number) {
@@ -42,7 +43,11 @@ export default {
 			return Promise.resolve(headCache.get(player) as HTMLImageElement);
 		}
 
-		return new Promise((resolve, reject) => {
+		if(headUnresolvedCache.has(player)) {
+			return headUnresolvedCache.get(player) as Promise<HTMLImageElement>;
+		}
+
+		const promise = new Promise((resolve, reject) => {
 			const faceImage = new Image();
 
 			faceImage.onload = function() {
@@ -57,7 +62,11 @@ export default {
 
 			const src = (size === 'body') ? `faces/body/${player.account}.png` :`faces/${size}x${size}/${player.account}.png`;
 			faceImage.src = this.concatURL(window.config.url.markers, src);
-		});
+		}).finally(() => headUnresolvedCache.delete(player)) as Promise<HTMLImageElement>;
+
+		headUnresolvedCache.set(player, promise);
+
+		return promise;
 	},
 
 	concatURL(base: string, addition: string) {