Player list search

index.html

@@ -98,6 +98,8 @@
                 playersTitle: 'Click to center on player\nDouble-click to follow player',
                 playersTitleHidden: 'This player is currently hidden from the map\nDouble-click to follow player when they become visible',
                 playersTitleOtherWorld: 'This player is in another world.\nClick to center on player\nDouble-click to follow player',
+                playersSearchPlaceholder: 'Search players...',
+                playersSearchSkeleton: 'No matching players found',
                 followingHeading: 'Following',
                 followingUnfollow: 'Unfollow',
                 followingTitleUnfollow: 'Stop following this player',
@@ -117,7 +119,10 @@
 
             ui: {
             	// If true, player markers will always be displayed in front of other marker types
-            	playersAboveMarkers: true
+            	playersAboveMarkers: true,
+
+                // Whether to enable the player list search box
+                playersSearch: true
             }
         };
     </script>

src/components/sidebar/PlayerList.vue

@@ -15,23 +15,30 @@
   -->
 
 <template>
-	<CollapsibleSection name="players">
-		<template v-slot:heading>{{ heading }} [{{ players.length }}/{{ maxPlayers }}]</template>
+	<CollapsibleSection name="players" class="players">
+		<template v-slot:heading>{{ messageHeading }} [{{ players.length }}/{{ maxPlayers }}]</template>
 		<template v-slot:default>
-			<RadioList class="section__content" v-if="players.length" aria-labelledby="players-heading">
-				<PlayerListItem v-for="player in players" :key="player.account" :player="player"></PlayerListItem>
+			<div class="section__content">
+				<input v-if="players && searchEnabled" id="players__search" type="text" name="search"
+				       v-model="searchQuery" :placeholder="messagePlayersSearchPlaceholder" @keydown="onKeydown">
+				<RadioList v-if="filteredPlayers.length" aria-labelledby="players-heading">
+					<PlayerListItem v-for="player in filteredPlayers" :key="player.account"
+					                :player="player"></PlayerListItem>
 				</RadioList>
-			<div v-else class="section__content section__skeleton">{{ skeletonPlayers }}</div>
+				<div v-else-if="searchQuery" class="section__skeleton">{{ messageSkeletonPlayersSearch }}</div>
+				<div v-else class="section__skeleton">{{ messageSkeletonPlayers }}</div>
+			</div>
 		</template>
 	</CollapsibleSection>
 </template>
 
 <script lang="ts">
 import PlayerListItem from "./PlayerListItem.vue";
-import {defineComponent} from "@vue/runtime-core";
+import {computed, defineComponent} from "@vue/runtime-core";
 import {useStore} from "@/store";
 import CollapsibleSection from "@/components/sidebar/CollapsibleSection.vue";
 import RadioList from "@/components/util/RadioList.vue";
+import {ref} from "vue";
 
 export default defineComponent({
 	components: {
@@ -40,22 +47,59 @@ export default defineComponent({
 		PlayerListItem
 	},
 
-	computed: {
-		heading() {
-			return useStore().state.messages.playersHeading;
-		},
+	setup() {
+		const store = useStore(),
+			messageHeading = computed(() => store.state.messages.playersHeading),
+			messageSkeletonPlayers = computed(() => store.state.messages.playersSkeleton),
+			messageSkeletonPlayersSearch = computed(() => store.state.messages.playersSearchSkeleton),
+			messagePlayersSearchPlaceholder = computed(() => store.state.messages.playersSearchPlaceholder),
 
-		skeletonPlayers() {
-			return useStore().state.messages.playersSkeleton;
-		},
+			searchEnabled = computed(() => store.state.ui.playersSearch),
+			searchQuery = ref(""),
 
-		players() {
-			return useStore().state.sortedPlayers;
-		},
+			players = computed(() => store.state.sortedPlayers),
+			filteredPlayers = computed(() => {
+				const query = searchQuery.value.toLowerCase();
 
-		maxPlayers(): number {
-			return useStore().state.configuration.maxPlayers;
+				return query ? store.state.sortedPlayers.filter(p => {
+					return p.account.toLowerCase().indexOf(query) > -1;
+				}) : store.state.sortedPlayers;
+			}),
+			maxPlayers = computed(() => store.state.configuration.maxPlayers),
+
+			onKeydown = (e: KeyboardEvent) => {
+				e.stopImmediatePropagation();
+			};
+
+		return {
+			messageHeading,
+			messageSkeletonPlayers,
+			messageSkeletonPlayersSearch,
+			messagePlayersSearchPlaceholder,
+
+			searchEnabled,
+			searchQuery,
+
+			players,
+			filteredPlayers,
+			maxPlayers,
+			onKeydown
 		}
 	}
 });
 </script>
+
+<style lang="scss" scoped>
+	.players {
+		#players__search {
+			margin-bottom: 1.5rem;
+			padding: 0.5rem 1rem;
+			box-sizing: border-box;
+			width: 100%;
+
+			& + .section__skeleton {
+				margin-top: 0;
+			}
+		}
+	}
+</style>

src/index.d.ts

@@ -64,6 +64,8 @@ interface LiveAtlasGlobalMessageConfig {
 	playersTitle: string;
 	playersTitleHidden: string;
 	playersTitleOtherWorld: string;
+	playersSearchPlaceholder: string;
+	playersSearchSkeleton: string;
 	followingHeading: string;
 	followingUnfollow: string;
 	followingTitleUnfollow: string;
@@ -98,6 +100,7 @@ type LiveAtlasMessageConfig = LiveAtlasGlobalMessageConfig & LiveAtlasServerMess
 
 interface LiveAtlasUIConfig {
 	playersAboveMarkers: boolean;
+	playersSearch: boolean;
 }
 
 export type LiveAtlasUIElement = 'layers' | 'chat' | 'players' | 'maps' | 'settings';

src/scss/style.scss

@@ -71,7 +71,7 @@ input {
 	font-size: 1.6rem;
 	padding: 1rem;
 	border: 0.2rem solid var(--border-color);
-	border-radius: 0;
+	border-radius: 0.3rem;
 
 	@include focus {
 		color: var(--text-emphasis);

src/store/mutations.ts

@@ -123,6 +123,8 @@ export const mutations: MutationTree<State> & Mutations = {
 			playersTitle: messageConfig.playersTitle || '',
 			playersTitleHidden: messageConfig.playersTitleHidden || '',
 			playersTitleOtherWorld: messageConfig.playersTitleOtherWorld || '',
+			playersSearchPlaceholder: messageConfig.playersSearchPlaceholder || '',
+			playersSearchSkeleton: messageConfig.playersSearchSkeleton || '',
 			followingHeading: messageConfig.followingHeading || '',
 			followingHidden: messageConfig.followingHidden || '',
 			followingUnfollow: messageConfig.followingUnfollow || '',
@@ -146,6 +148,10 @@ export const mutations: MutationTree<State> & Mutations = {
 			state.ui.playersAboveMarkers = uiConfig.playersAboveMarkers;
 		}
 
+		if(typeof uiConfig.playersSearch === 'boolean') {
+			state.ui.playersSearch = uiConfig.playersSearch;
+		}
+
 		state.servers = config.servers;
 
 		if(state.currentServer && !state.servers.has(state.currentServer.id)) {

src/store/state.ts

@@ -74,6 +74,8 @@ export type State = {
 
 	ui: {
 		playersAboveMarkers: boolean;
+		playersSearch: boolean;
+
 		smallScreen: boolean;
 		visibleElements: Set<LiveAtlasUIElement>;
 		previouslyVisibleElements: Set<LiveAtlasUIElement>;
@@ -132,6 +134,8 @@ export const state: State = {
 		playersTitle: '',
 		playersTitleHidden: '',
 		playersTitleOtherWorld: '',
+		playersSearchPlaceholder: '',
+		playersSearchSkeleton: '',
 		followingHeading: '',
 		followingUnfollow: '',
 		followingTitleUnfollow: '',
@@ -227,6 +231,7 @@ export const state: State = {
 
 	ui: {
 		playersAboveMarkers: true,
+		playersSearch: true,
 
 		smallScreen: false,
 		visibleElements: new Set(),