diff --git a/src/index.d.ts b/src/index.d.ts index a7f3d3b..9f8004c 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -269,7 +269,7 @@ interface HeadQueueEntry { cacheKey: string; name: string; uuid?: string; - size: string; + size: LiveAtlasPlayerImageSize; image: HTMLImageElement; } diff --git a/src/leaflet/icon/PlayerIcon.ts b/src/leaflet/icon/PlayerIcon.ts index e69d837..37b876c 100644 --- a/src/leaflet/icon/PlayerIcon.ts +++ b/src/leaflet/icon/PlayerIcon.ts @@ -18,28 +18,13 @@ */ import {BaseIconOptions, DomUtil, Icon, Layer, LayerOptions, Util} from 'leaflet'; -import {getMinecraftHead} from '@/util'; -import playerImage from '@/assets/images/player_face.png'; +import {getImagePixelSize, getMinecraftHead} from '@/util'; +import defaultImage from '@/assets/images/player_face.png'; import {LiveAtlasPlayer, LiveAtlasPlayerImageSize} from "@/index"; -const noSkinImage: HTMLImageElement = document.createElement('img'); -noSkinImage.height = 16; -noSkinImage.width = 16; - -const smallImage: HTMLImageElement = document.createElement('img'); -smallImage.height = 16; -smallImage.width = 16; - -const largeImage: HTMLImageElement = document.createElement('img'); -largeImage.height = 32; -largeImage.width = 32; - -const bodyImage: HTMLImageElement = document.createElement('img'); -bodyImage.height = 32; -bodyImage.width = 32; - -noSkinImage.src = smallImage.src = largeImage.src = bodyImage.src = playerImage; -noSkinImage.className = smallImage.className = largeImage.className = bodyImage.className = 'player__icon'; +const playerImage: HTMLImageElement = document.createElement('img'); +playerImage.src = defaultImage; +playerImage.className = 'player__icon'; export interface PlayerIconOptions extends BaseIconOptions { imageSize: LiveAtlasPlayerImageSize, @@ -86,30 +71,13 @@ export class PlayerIcon extends Layer implements Icon { this._playerName.className = 'player__name'; this._playerName.innerHTML = this._currentName = player.displayName; + this._playerImage = playerImage.cloneNode() as HTMLImageElement; + this._playerImage.height = this._playerImage.width = getImagePixelSize(this.options.imageSize); + if (this.options.showSkin) { - let size; - - switch(this.options.imageSize) { - case 'small': - this._playerImage = smallImage.cloneNode() as HTMLImageElement; - size = '16'; - break; - - case 'body': - this._playerImage = bodyImage.cloneNode() as HTMLImageElement; - size = 'body'; - break; - - default: - this._playerImage = largeImage.cloneNode() as HTMLImageElement; - size = '32'; - } - - getMinecraftHead(player, size).then(head => { + getMinecraftHead(player, this.options.imageSize).then(head => { this._playerImage!.src = head.src; }).catch(() => {}); - } else { - this._playerImage = noSkinImage.cloneNode(false) as HTMLImageElement; } this._playerInfo.appendChild(this._playerImage); diff --git a/src/providers/DynmapMapProvider.ts b/src/providers/DynmapMapProvider.ts index d5e41fb..29ccb1c 100644 --- a/src/providers/DynmapMapProvider.ts +++ b/src/providers/DynmapMapProvider.ts @@ -34,6 +34,7 @@ import { buildMessagesConfig, buildServerConfig, buildUpdates, buildWorlds } from "@/util/dynmap"; +import {getImagePixelSize} from "@/util"; export default class DynmapMapProvider extends MapProvider { private configurationAbort?: AbortController = undefined; @@ -265,9 +266,14 @@ export default class DynmapMapProvider extends MapProvider { } getPlayerHeadUrl(head: HeadQueueEntry): string { - const icon = (head.size === 'body') ? `faces/body/${head.name}` :`faces/${head.size}x${head.size}/${head.name}` + const baseUrl = `${this.config.dynmap!.markers}faces/`; - return `${this.config.dynmap!.markers}${icon}.png`; + if(head.size === 'body') { + return `${baseUrl}body/${head.name}.png`; + } + + const pixels = getImagePixelSize(head.size); + return `${baseUrl}${pixels}x${pixels}/${head.name}.png`; } getMarkerIconUrl(icon: string): string { diff --git a/src/util.ts b/src/util.ts index 16dd382..d03defe 100644 --- a/src/util.ts +++ b/src/util.ts @@ -16,7 +16,7 @@ import {useStore} from "@/store"; import LiveAtlasMapDefinition from "@/model/LiveAtlasMapDefinition"; -import {HeadQueueEntry, LiveAtlasPlayer} from "@/index"; +import {HeadQueueEntry, LiveAtlasPlayer, LiveAtlasPlayerImageSize} from "@/index"; const headCache = new Map(), headUnresolvedCache = new Map>(), @@ -45,7 +45,19 @@ export const getMinecraftTime = (serverTime: number) => { }; } -export const getMinecraftHead = (player: LiveAtlasPlayer | string, size: string): Promise => { +export const getImagePixelSize = (imageSize: LiveAtlasPlayerImageSize) => { + switch(imageSize) { + case 'large': + case 'body': + return 32; + + case 'small': + default: + return 16; + } +} + +export const getMinecraftHead = (player: LiveAtlasPlayer | string, size: LiveAtlasPlayerImageSize): Promise => { const account = typeof player === 'string' ? player : player.name, uuid = typeof player === 'string' ? undefined : player.uuid, cacheKey = `${account}-${size}`;