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(),