diff --git a/index.html b/index.html
index f3e7159..b37b71a 100644
--- a/index.html
+++ b/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,
}
};
diff --git a/src/components/map/marker/PlayerMarker.vue b/src/components/map/marker/PlayerMarker.vue
index ebc74ca..d2bf852 100644
--- a/src/components/map/marker/PlayerMarker.vue
+++ b/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,
diff --git a/src/index.d.ts b/src/index.d.ts
index c397d08..bb93535 100644
--- a/src/index.d.ts
+++ b/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';
diff --git a/src/leaflet/icon/PlayerIcon.ts b/src/leaflet/icon/PlayerIcon.ts
index 16a475e..2e96219 100644
--- a/src/leaflet/icon/PlayerIcon.ts
+++ b/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 {
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);
diff --git a/src/leaflet/marker/PlayerMarker.ts b/src/leaflet/marker/PlayerMarker.ts
index 2ebe9ae..004e3b3 100644
--- a/src/leaflet/marker/PlayerMarker.ts
+++ b/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);
diff --git a/src/scss/leaflet/_markers.scss b/src/scss/leaflet/_markers.scss
index c6767e3..0c6d83c 100644
--- a/src/scss/leaflet/_markers.scss
+++ b/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 {
diff --git a/src/store/mutations.ts b/src/store/mutations.ts
index 925dda7..378e3fb 100644
--- a/src/store/mutations.ts
+++ b/src/store/mutations.ts
@@ -166,6 +166,10 @@ export const mutations: MutationTree & 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;
}
diff --git a/src/store/state.ts b/src/store/state.ts
index 840dec7..f974bf7 100644
--- a/src/store/state.ts
+++ b/src/store/state.ts
@@ -76,6 +76,7 @@ export type State = {
ui: {
playersAboveMarkers: boolean;
playersSearch: boolean;
+ compactPlayerMarkers: boolean;
smallScreen: boolean;
visibleElements: Set;
@@ -252,6 +253,7 @@ export const state: State = {
ui: {
playersAboveMarkers: true,
playersSearch: true,
+ compactPlayerMarkers: false,
smallScreen: false,
visibleElements: new Set(),