Add setting for displaying players above/below other markers (Fixes #14)

src/api.ts

@@ -57,7 +57,7 @@ function buildServerConfig(response: any): DynmapServerConfig {
 }
 
 function buildMessagesConfig(response: any): LiveAtlasMessageConfig {
-	const liveAtlasMessages = window.liveAtlasConfig ? window.liveAtlasConfig.messages || {} : {};
+	const liveAtlasMessages = window.liveAtlasConfig?.messages || {};
 
 	return {
 		chatPlayerJoin: response.joinmessage || '',

src/components/map/layer/PlayersLayer.vue

@@ -42,12 +42,17 @@ export default defineComponent({
 			playerPane = props.leaflet.createPane('players'),
 			players = computed(() => store.state.players),
 			playerCount = computed(() => store.state.players.size),
+			playersAboveMarkers = computed(() => store.state.ui.playersAboveMarkers),
 			componentSettings = computed(() => store.state.components.playerMarkers),
 			layerGroup = new LayerGroup([],{
 				pane: 'players'
 			});
 
-		watch(playerCount, (newValue) => playerPane.classList.toggle('no-animations', newValue > 150))
+		watch(playerCount, (newValue) => playerPane.classList.toggle('no-animations', newValue > 150));
+
+		if(playersAboveMarkers.value) {
+			playerPane.style.zIndex = '600';
+		}
 
 		return {
 			players,
@@ -80,7 +85,3 @@ export default defineComponent({
 	}
 })
 </script>
-
-<style scoped>
-
-</style>

src/scss/_leaflet.scss

@@ -15,7 +15,3 @@
 		}
 	}
 }
-
-.leaflet-players-pane {
-	z-index: 600;
-}

src/store/state.ts

@@ -69,6 +69,7 @@ export type State = {
 	updateTimestamp: Date;
 
 	ui: {
+		playersAboveMarkers: boolean;
 		smallScreen: boolean;
 		visibleElements: Set<LiveAtlasUIElement>;
 		previouslyVisibleElements: Set<LiveAtlasUIElement>;
@@ -221,6 +222,8 @@ export const state: State = {
 	updateTimestamp: new Date(),
 
 	ui: {
+		playersAboveMarkers: window.liveAtlasConfig?.ui?.playersAboveMarkers || false,
+
 		smallScreen: false,
 		visibleElements: new Set(),
 		previouslyVisibleElements: new Set(),