Add compactPlayerMarkers ui option for pre-2.0 style markers

index.html

@@ -144,7 +144,10 @@
             	playersAboveMarkers: true,
 
                 // Whether to enable the player list search box
-                playersSearch: true
+                playersSearch: true,
+
+                // Use more compact pre-2.0 player marker style
+                compactPlayerMarkers: true,
             }
         };
     </script>

src/components/map/marker/PlayerMarker.vue

@@ -48,6 +48,7 @@ export default defineComponent({
 
 			//The player marker
 			marker = new PlayerMarker(props.player, {
+				compact: store.state.ui.compactPlayerMarkers,
 				imageSize: componentSettings.value!.imageSize,
 				showHealth: componentSettings.value!.showHealth,
 				showArmor: componentSettings.value!.showArmor,

src/index.d.ts

@@ -151,6 +151,7 @@ type LiveAtlasMessageConfig = LiveAtlasGlobalMessageConfig & LiveAtlasServerMess
 interface LiveAtlasUIConfig {
 	playersAboveMarkers: boolean;
 	playersSearch: boolean;
+	compactPlayerMarkers: boolean;
 }
 
 export type LiveAtlasUIElement = 'layers' | 'chat' | 'players' | 'maps';

src/leaflet/icon/PlayerIcon.ts

@@ -27,6 +27,7 @@ playerImage.src = defaultImage;
 playerImage.className = 'player__icon';
 
 export interface PlayerIconOptions extends BaseIconOptions {
+	compact: boolean;
 	imageSize: LiveAtlasPlayerImageSize,
 	showHealth: boolean,
 	showArmor: boolean,
@@ -67,6 +68,10 @@ export class PlayerIcon extends Layer implements Icon<PlayerIconOptions> {
 		this._playerName = document.createElement('span');
 		this._playerName.className = 'player__name';
 
+		if(this.options.compact) {
+			this._container.classList.add('marker--compact');
+		}
+
 		if (this.options.imageSize != 'none') {
 			this._playerImage = playerImage.cloneNode() as HTMLImageElement;
 			this._playerImage.height = this._playerImage.width = getImagePixelSize(this.options.imageSize);

src/leaflet/marker/PlayerMarker.ts

@@ -24,6 +24,7 @@ export interface PlayerMarkerOptions extends MarkerOptions {
 	imageSize: LiveAtlasPlayerImageSize,
 	showHealth: boolean,
 	showArmor: boolean,
+	compact: boolean,
 }
 
 export class PlayerMarker extends Marker {
@@ -41,6 +42,7 @@ export class PlayerMarker extends Marker {
 			imageSize: options.imageSize,
 			showHealth: options.showHealth,
 			showArmor: options.showArmor,
+			compact: options.compact,
 		});
 
 		Util.setOptions(this, options);

src/scss/leaflet/_markers.scss

@@ -69,6 +69,7 @@
 		.player__armor {
 			width: 7rem;
 			height: 0.7rem;
+			box-sizing: content-box;
 
 			&,
 			&::-webkit-meter-inner-element,
@@ -108,6 +109,34 @@
 		.player__armor::-moz-meter-bar {
 			background: url(../assets/images/armor.png) repeat-x left center;
 		}
+
+		&.marker--compact {
+			.marker__label {
+				background-color: transparent;
+			}
+
+			.player__icon {
+				margin-right: 0.2rem;
+			}
+
+			.player__armor, .player__health, .player__name {
+				background-color: var(--background-marker);
+			}
+
+			.player__name {
+				padding: 0.2rem;
+			}
+
+			.player__armor, .player__health {
+				border: 0.2rem solid var(--background-marker);
+				border-top-width: 0;
+				border-bottom-width: 0;
+			}
+
+			.player__armor:last-child, .player__health:last-child {
+				border-bottom-width: 0.2rem;
+			}
+		}
 	}
 
 	.marker__label {

src/store/mutations.ts

@@ -166,6 +166,10 @@ export const mutations: MutationTree<State> & Mutations = {
 			state.ui.playersAboveMarkers = uiConfig.playersAboveMarkers;
 		}
 
+		if(typeof uiConfig.compactPlayerMarkers === 'boolean') {
+			state.ui.compactPlayerMarkers = uiConfig.compactPlayerMarkers;
+		}
+
 		if(typeof uiConfig.playersSearch === 'boolean') {
 			state.ui.playersSearch = uiConfig.playersSearch;
 		}

src/store/state.ts

@@ -76,6 +76,7 @@ export type State = {
 	ui: {
 		playersAboveMarkers: boolean;
 		playersSearch: boolean;
+		compactPlayerMarkers: boolean;
 
 		smallScreen: boolean;
 		visibleElements: Set<LiveAtlasUIElement>;
@@ -252,6 +253,7 @@ export const state: State = {
 	ui: {
 		playersAboveMarkers: true,
 		playersSearch: true,
+		compactPlayerMarkers: false,
 
 		smallScreen: false,
 		visibleElements: new Set(),