Implement skin images in player list
This commit is contained in:
parent
ce7827659a
commit
42cdb8fba7
@ -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,
|
||||
|
15
src/util.ts
15
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) {
|
||||
|
Loading…
Reference in New Issue
Block a user