Player list search

This commit is contained in:
James Lyne 2021-07-21 16:19:18 +01:00
parent ffed2548ba
commit 028cb4e1af
6 changed files with 84 additions and 21 deletions

View File

@ -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>

View File

@ -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>
</RadioList>
<div v-else class="section__content section__skeleton">{{ skeletonPlayers }}</div>
<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-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>

3
src/index.d.ts vendored
View File

@ -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';

View File

@ -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);

View File

@ -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)) {

View File

@ -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(),