Support disabling player images in player list

- showplayerfacesinmenu in Dynmap
- Player image is removed entirely rather than mirroring Dynmap behaviour of showing a Steve head, to be consistent with player markers and chat.
- Images are also disabled in FollowTarget

src/components/sidebar/FollowTarget.vue

@@ -19,11 +19,9 @@
 		<h2>{{ heading }}</h2>
 
 		<div :class="{'following__target': true, 'following__target--hidden': target.hidden}">
-			<img width="32" height="32" class="target__icon" :src="image" alt="" />
+			<img v-if="imagesEnabled" width="32" height="32" class="target__icon" :src="image" alt="" />
-			<span class="target__info">
+			<span class="target__name" v-html="target.displayName"></span>
-				<span class="target__name" v-html="target.displayName"></span>
+			<span class="target__status" v-show="target.hidden">{{ messageHidden }}</span>
-				<span class="target__status" v-show="target.hidden">{{ messageHidden }}</span>
-			</span>
 			<button class="target__unfollow" type="button" :title="messageUnfollowTitle"
 				@click.prevent="unfollow" :aria-label="messageUnfollow">
 				<SvgIcon name="cross"></SvgIcon>
@@ -53,6 +51,7 @@ export default defineComponent({
 	},
 	setup(props) {
 		const store = useStore(),
+			imagesEnabled = computed(() => store.state.components.playerList.showImages),
 			image = ref(defaultImage),
 			account = ref(props.target.name),
 
@@ -67,7 +66,7 @@ export default defineComponent({
 			updatePlayerImage = async () => {
 				image.value = defaultImage;
 
-				if(store.state.components.playerMarkers && store.state.components.playerMarkers.showSkins) {
+				if(imagesEnabled.value) {
 					try {
 						const result = await getMinecraftHead(props.target, 'small');
 						image.value = result.src;
@@ -79,6 +78,7 @@ export default defineComponent({
 		onMounted(() => updatePlayerImage());
 
 		return {
+			imagesEnabled,
 			image,
 			unfollow,
 			heading,
@@ -97,7 +97,11 @@ export default defineComponent({
 		flex: 0 0 auto;
 
 		.following__target {
-			display: flex;
+			display: grid;
+			grid-template-columns: min-content 1fr;
+			grid-template-rows: 1fr min-content min-content 1fr;
+			grid-template-areas: "icon ." "icon name" "icon status" "icon .";
+			grid-auto-flow: column;
 			align-items: center;
 
 			.target__unfollow {
@@ -118,15 +122,18 @@ export default defineComponent({
 				}
 			}
 
-			.target__info {
+			.target__icon {
-				margin-left: 2rem;
+				margin-right: 2rem;
-				display: flex;
+				grid-area: icon;
-				flex-direction: column;
+			}
-				justify-content: flex-start;
 
-				.target__status {
+			.target__name {
-					font-size: 1.3rem;
+				grid-area: name;
-				}
+			}
+
+			.target__status {
+				grid-area: status;
+				font-size: 1.3rem;
 			}
 
 			&.following__target--hidden {

src/components/sidebar/PlayerListItem.vue

@@ -20,7 +20,7 @@
 	<label :for="`player-${player.name}`"
 	       :class="{'player': true, 'player--hidden' : !!player.hidden, 'player--other-world': otherWorld}" :title="title"
 	       @click.prevent="onLabelClick">
-		<img width="16" height="16" class="player__icon" :src="image" alt="" aria-hidden="true" />
+		<img v-if="imagesEnabled" width="16" height="16" class="player__icon" :src="image" alt="" aria-hidden="true" />
 		<span class="player__name" v-html="player.displayName"></span>
 	</label>
 </template>
@@ -43,6 +43,9 @@ export default defineComponent({
 	},
 	setup(props) {
 		const store = useStore(),
+			imagesEnabled = computed(() => store.state.components.playerList.showImages),
+			image = ref(defaultImage),
+
 			otherWorld = computed(() => {
 				return store.state.components.playerMarkers?.grayHiddenPlayers
 					&& !props.player.hidden
@@ -88,15 +91,14 @@ export default defineComponent({
 				}
 			};
 
-		let image = ref(defaultImage);
-
 		onMounted(() => {
-			if(store.state.components.playerMarkers && store.state.components.playerMarkers.showSkins) {
+			if(imagesEnabled.value) {
 				getMinecraftHead(props.player, 'small').then((result) => image.value = result.src).catch(() => {});
 			}
 		});
 
 		return {
+			imagesEnabled,
 			image,
 			title,
 			otherWorld,
@@ -113,19 +115,14 @@ export default defineComponent({
 	@import '../../scss/mixins';
 
 	.player {
-		.player__icon {
+		display: flex !important;
-			position: absolute;
+		align-items: center;
-			display: block;
-			top: 0;
-			bottom: 0;
-			left: 0.7rem;
-			pointer-events: none;
-			margin: auto;
-			z-index: 2;
-		}
 
-		.player__name {
+		.player__icon {
-			padding-left: 2.7rem;
+			position: relative;
+			pointer-events: none;
+			z-index: 2;
+			padding-right: 1.2rem;
 		}
 
 		&.player--hidden:not(:hover),

src/index.d.ts

@@ -288,6 +288,9 @@ interface LiveAtlasComponentConfig {
 		showLabels: boolean;
 	};
 	playerMarkers?: LiveAtlasPlayerMarkerConfig;
+	playerList: {
+		showImages: boolean;
+	},
 	coordinatesControl?: CoordinatesControlOptions;
 	clockControl?: ClockControlOptions;
 	linkControl: boolean;

src/providers/Pl3xmapMapProvider.ts

@@ -160,9 +160,6 @@ export default class Pl3xmapMapProvider extends MapProvider {
 
 	private static buildComponents(response: any): LiveAtlasComponentConfig {
 		const components: LiveAtlasComponentConfig = {
-			markers: {
-				showLabels: false,
-			},
 			coordinatesControl: undefined,
 			linkControl: !!response.ui?.link?.enabled,
 			layerControl: !!response.ui?.coordinates?.enabled,
@@ -170,6 +167,14 @@ export default class Pl3xmapMapProvider extends MapProvider {
 			//Configured per-world
 			playerMarkers: undefined,
 
+			//Not configurable
+			markers: {
+				showLabels: false,
+			},
+			playerList: {
+				showImages: true,
+			},
+
 			//Not used by pl3xmap
 			chatBox: undefined,
 			chatBalloons: false,

src/scss/style.scss

@@ -225,6 +225,8 @@ input {
 		height: 1px;
 		width: 1px;
 		position: absolute;
+		padding: 0;
+		border: none;
 
 		& + label {
 			@include button;

src/store/state.ts

@@ -198,6 +198,10 @@ export const state: State = {
 		// If not present, player markers will be disabled
 		playerMarkers: undefined,
 
+		playerList: {
+			showImages: false,
+		},
+
 		//Optional "coords" component. Adds control showing coordinates on map mouseover
 		coordinatesControl: undefined,
 

src/util/dynmap.ts

@@ -129,6 +129,9 @@ export function buildComponents(response: any): LiveAtlasComponentConfig {
 		chatBox: undefined,
 		chatBalloons: false,
 		playerMarkers: undefined,
+		playerList: {
+			showImages: response.showplayerfacesinmenu || false,
+		},
 		coordinatesControl: undefined,
 		layerControl: response.showlayercontrol && response.showlayercontrol !== 'false', //Sent as a string for some reason
 		linkControl: false,