Decouple player image pixel size from PlayerMarker.

- Use single template image and set size after cloning
- Use util method to retrieve pixel size when needed
- Use LiveAtlasPlayerImageSize in getMinecraftHead

src/index.d.ts

@@ -269,7 +269,7 @@ interface HeadQueueEntry {
 	cacheKey: string;
 	name: string;
 	uuid?: string;
-	size: string;
+	size: LiveAtlasPlayerImageSize;
 	image: HTMLImageElement;
 }
 

src/leaflet/icon/PlayerIcon.ts

@@ -18,28 +18,13 @@
  */
 
 import {BaseIconOptions, DomUtil, Icon, Layer, LayerOptions, Util} from 'leaflet';
-import {getMinecraftHead} from '@/util';
+import {getImagePixelSize, getMinecraftHead} from '@/util';
-import playerImage from '@/assets/images/player_face.png';
+import defaultImage from '@/assets/images/player_face.png';
 import {LiveAtlasPlayer, LiveAtlasPlayerImageSize} from "@/index";
 
-const noSkinImage: HTMLImageElement = document.createElement('img');
+const playerImage: HTMLImageElement = document.createElement('img');
-noSkinImage.height = 16;
+playerImage.src = defaultImage;
-noSkinImage.width = 16;
+playerImage.className = 'player__icon';
-
-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';
 
 export interface PlayerIconOptions extends BaseIconOptions {
 	imageSize: LiveAtlasPlayerImageSize,
@@ -86,30 +71,13 @@ export class PlayerIcon extends Layer implements Icon<PlayerIconOptions> {
 		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;
+			getMinecraftHead(player, this.options.imageSize).then(head => {
-
-			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 => {
 				this._playerImage!.src = head.src;
 			}).catch(() => {});
-		} else {
-			this._playerImage = noSkinImage.cloneNode(false) as HTMLImageElement;
 		}
 
 		this._playerInfo.appendChild(this._playerImage);

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 {

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<string, HTMLImageElement>(),
 	headUnresolvedCache = new Map<string, Promise<HTMLImageElement>>(),
@@ -45,7 +45,19 @@ export const getMinecraftTime = (serverTime: number) => {
 	};
 }
 
-export const getMinecraftHead = (player: LiveAtlasPlayer | string, size: string): Promise<HTMLImageElement> => {
+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<HTMLImageElement> => {
 	const account = typeof  player === 'string' ? player : player.name,
 		uuid = typeof  player === 'string' ? undefined : player.uuid,
 		cacheKey = `${account}-${size}`;