From 76c5892c664c5406de4b8bc23af6c4b855c7e97c Mon Sep 17 00:00:00 2001
From: James Lyne <jim+github@not-null.co.uk>
Date: Tue, 5 Jan 2021 23:54:50 +0000
Subject: [PATCH] Disable player marker animations at high player counts

---
 src/components/map/layer/PlayersLayer.vue | 8 +++++---
 src/scss/style.scss                       | 6 ++++++
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/map/layer/PlayersLayer.vue b/src/components/map/layer/PlayersLayer.vue
index f76a444..ac2e23e 100644
--- a/src/components/map/layer/PlayersLayer.vue
+++ b/src/components/map/layer/PlayersLayer.vue
@@ -20,7 +20,7 @@
 
 <script lang="ts">
 import PlayerMarker from "@/components/map/marker/PlayerMarker.vue";
-import {defineComponent, computed} from "@vue/runtime-core";
+import {defineComponent, computed, watch} from "@vue/runtime-core";
 import {useStore} from "@/store";
 import {LayerGroup} from 'leaflet';
 import DynmapMap from "@/leaflet/DynmapMap";
@@ -38,15 +38,17 @@ export default defineComponent({
 	},
 
 	setup(props) {
-		props.leaflet.createPane('players');
-
 		const store = useStore(),
+			playerPane = props.leaflet.createPane('players'),
 			players = computed(() => store.state.players),
+			playerCount = computed(() => store.state.players.size),
 			componentSettings = store.state.components.playerMarkers,
 			layerGroup = new LayerGroup([],{
 				pane: 'players'
 			});
 
+		watch(playerCount, (newValue) => playerPane.classList.toggle('no-animations', newValue > 150))
+
 		return {
 			players,
 			componentSettings,
diff --git a/src/scss/style.scss b/src/scss/style.scss
index 6444ac3..b623979 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -327,6 +327,12 @@ button {
 		display: block;
 		outline: auto;
 	}
+
+	@at-root {
+		.no-animations .marker.marker--player {
+			transition: none;
+		}
+	}
 }
 
 /*******************