Skirda/LiveAtlas
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Disable player marker animations at high player counts

Browse Source
This commit is contained in:
James Lyne 2021-01-05 23:54:50 +00:00
parent 3573694df0
commit 76c5892c66
2 changed files with 11 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/map/layer/PlayersLayer.vue
View File

@ -20,7 +20,7 @@
<script lang="ts"> <script lang="ts">
import PlayerMarker from "@/components/map/marker/PlayerMarker.vue"; 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 {useStore} from "@/store";
import {LayerGroup} from 'leaflet'; import {LayerGroup} from 'leaflet';
import DynmapMap from "@/leaflet/DynmapMap"; import DynmapMap from "@/leaflet/DynmapMap";
@ -38,15 +38,17 @@ export default defineComponent({
}, },
setup(props) { setup(props) {
props.leaflet.createPane('players');
const store = useStore(), const store = useStore(),
playerPane = props.leaflet.createPane('players'),
players = computed(() => store.state.players), players = computed(() => store.state.players),
playerCount = computed(() => store.state.players.size),
componentSettings = store.state.components.playerMarkers, componentSettings = store.state.components.playerMarkers,
layerGroup = new LayerGroup([],{ layerGroup = new LayerGroup([],{
pane: 'players' pane: 'players'
}); });
watch(playerCount, (newValue) => playerPane.classList.toggle('no-animations', newValue > 150))
return { return {
players, players,
componentSettings, componentSettings,

6
src/scss/style.scss
View File

@ -327,6 +327,12 @@ button {
display: block; display: block;
outline: auto; outline: auto;
} }
@at-root {
.no-animations .marker.marker--player {
transition: none;
}
}
} }
/******************* /*******************