Implement skin images in player list

This commit is contained in:
James Lyne 2020-12-23 03:07:44 +00:00
parent ce7827659a
commit 42cdb8fba7
2 changed files with 20 additions and 4 deletions

View File

@ -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,

View File

@ -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) {