Sort player list by dynmap sort value, then alphabetically (Fixes #37)

src/components/sidebar/PlayerList.vue

@@ -16,10 +16,10 @@
 
 <template>
 	<CollapsibleSection name="players">
-		<template v-slot:heading>{{ heading }} [{{ players.size }}/{{ maxPlayers }}]</template>
+		<template v-slot:heading>{{ heading }} [{{ players.length }}/{{ maxPlayers }}]</template>
 		<template v-slot:default>
-			<RadioList class="section__content" v-if="players.size" aria-labelledby="players-heading">
-				<PlayerListItem v-for="[account, player] in players" :key="account" :player="player"></PlayerListItem>
+			<RadioList class="section__content" v-if="players.length" aria-labelledby="players-heading">
+				<PlayerListItem v-for="player in players" :key="player.account" :player="player"></PlayerListItem>
 			</RadioList>
 			<div v-else class="section__content section__skeleton">{{ skeletonPlayers }}</div>
 		</template>
@@ -50,7 +50,7 @@ export default defineComponent({
 		},
 
 		players() {
-			return useStore().state.players;
+			return useStore().state.sortedPlayers;
 		},
 
 		maxPlayers(): number {

src/index.d.ts

@@ -1,5 +1,5 @@
 import {State} from "@/store";
-import {DynmapUrlConfig} from "@/dynmap";
+import {DynmapPlayer, DynmapUrlConfig} from "@/dynmap";
 
 declare module "*.png" {
    const value: any;
@@ -64,4 +64,8 @@ interface LiveAtlasMessageConfig {
 }
 
 export type LiveAtlasUIElement = 'layers' | 'chat' | 'players' | 'maps' | 'settings';
-export type LiveAtlasSidebarSection = 'servers' | 'players' | 'maps';
+export type LiveAtlasSidebarSection = 'servers' | 'players' | 'maps';
+
+interface LiveAtlasSortedPlayers extends Array<DynmapPlayer> {
+	dirty?: boolean;
+}

src/store/mutations.ts

@@ -31,7 +31,13 @@ import {
 	DynmapWorldState, DynmapParsedUrl, DynmapChat
 } from "@/dynmap";
 import {DynmapProjection} from "@/leaflet/projection/DynmapProjection";
-import {LiveAtlasMessageConfig, LiveAtlasServerDefinition, LiveAtlasSidebarSection, LiveAtlasUIElement} from "@/index";
+import {
+	LiveAtlasMessageConfig,
+	LiveAtlasServerDefinition,
+	LiveAtlasSidebarSection,
+	LiveAtlasSortedPlayers,
+	LiveAtlasUIElement
+} from "@/index";
 
 export type CurrentMapPayload = {
 	worldName: string;
@@ -381,7 +387,12 @@ export const mutations: MutationTree<State> & Mutations = {
 				existing!.hidden = player.hidden;
 				existing!.name = player.name;
 				existing!.sort = player.sort;
+
+				if(existing!.name !== player.name || existing!.sort !== player.sort) {
+					state.sortedPlayers.dirty = true;
+				}
 			} else {
+				state.sortedPlayers.dirty = true;
 				state.players.set(player.account, {
 					account: player.account,
 					health: player.health,
@@ -400,6 +411,17 @@ export const mutations: MutationTree<State> & Mutations = {
 			}
 		}
 
+		//Re-sort sortedPlayers array if needed
+		if(!players.size && state.sortedPlayers.dirty) {
+			state.sortedPlayers = [...state.players.values()].sort((a, b) => {
+				if(a.sort !== b.sort) {
+					return a.sort - b.sort;
+				}
+
+				return a.account.toLowerCase().localeCompare(b.account.toLowerCase());
+			}) as LiveAtlasSortedPlayers;
+		}
+
 		return players;
 	},
 
@@ -407,6 +429,7 @@ export const mutations: MutationTree<State> & Mutations = {
 	[MutationTypes.SYNC_PLAYERS](state: State, keep: Set<string>) {
 		for(const [key, player] of state.players) {
 			if(!keep.has(player.account)) {
+				state.sortedPlayers.splice(state.sortedPlayers.indexOf(player), 1);
 				state.players.delete(key);
 			}
 		}
@@ -417,6 +440,7 @@ export const mutations: MutationTree<State> & Mutations = {
 		state.followTarget = undefined;
 		state.panTarget = undefined;
 		state.players.clear();
+		state.sortedPlayers.splice(0, state.sortedPlayers.length);
 	},
 
 	//Sets the currently active server
@@ -563,4 +587,4 @@ export const mutations: MutationTree<State> & Mutations = {
 	[MutationTypes.SET_LOGGED_IN](state: State, payload: boolean): void {
 		state.loggedIn = payload;
 	}
-}
+}

src/store/state.ts

@@ -22,7 +22,13 @@ import {
 	DynmapWorld, DynmapWorldState, Coordinate, DynmapParsedUrl, DynmapChat
 } from "@/dynmap";
 import {DynmapProjection} from "@/leaflet/projection/DynmapProjection";
-import {LiveAtlasMessageConfig, LiveAtlasServerDefinition, LiveAtlasSidebarSection, LiveAtlasUIElement} from "@/index";
+import {
+	LiveAtlasMessageConfig,
+	LiveAtlasServerDefinition,
+	LiveAtlasSidebarSection,
+	LiveAtlasSortedPlayers,
+	LiveAtlasUIElement
+} from "@/index";
 
 export type State = {
 	version: string;
@@ -37,6 +43,7 @@ export type State = {
 	worlds: Map<string, DynmapWorld>;
 	maps: Map<string, DynmapWorldMap>;
 	players: Map<string, DynmapPlayer>;
+	sortedPlayers: LiveAtlasSortedPlayers;
 	markerSets: Map<string, DynmapMarkerSet>;
 
 	chat: {
@@ -142,6 +149,7 @@ export const state: State = {
 	worlds: new Map(), //Defined (loaded) worlds with maps from configuration.json
 	maps: new Map(), //Defined maps from configuration.json
 	players: new Map(), //Online players from world.json
+	sortedPlayers: [] as LiveAtlasSortedPlayers, //Online players from world.json, sorted by their sort property then alphabetically
 
 	chat: {
 		unread: 0,