Move UI visibility handling to vuex

src/components/Sidebar.vue

@@ -17,32 +17,34 @@
 <template>
 	<aside class="sidebar">
 		<header class="sidebar__buttons">
-			<button v-if="mapCount > 1" :class="{'button--maps': true, 'active': menusActive.has('maps')}"
+			<button v-if="mapCount > 1" :class="{'button--maps': true, 'active':visibleUIElements.has('maps')}"
-					@click="toggleMenu('maps')" title="Map list" aria-label="Map list">
+					@click="toggleElement('maps')" title="Map list" aria-label="Map list">
 				<SvgIcon name="maps"></SvgIcon>
 			</button>
-			<button :class="{'button--players': true, 'active': menusActive.has('players')}"
+			<button :class="{'button--players': true, 'active': visibleUIElements.has('players')}"
-					@click="toggleMenu('players')" title="Player list" aria-label="Player list">
+					@click="toggleElement('players')" title="Player list" aria-label="Player list">
 				<SvgIcon name="players"></SvgIcon>
 			</button>
-<!--			<button :class="{'button&#45;&#45;settings': true, 'active': menusActive.has('settings')}"-->
+<!--			<button :class="{'button&#45;&#45;settings': true, 'active': visibleUIElements.has('settings'))}"-->
-<!--					@click="toggleMenu('settings')" title="Settings" aria-label="Settings">-->
+<!--					@click="toggleElement('settings')" title="Settings" aria-label="Settings">-->
 <!--				<SvgIcon name="settings"></SvgIcon>-->
 <!--			</button>-->
 		</header>
-		<WorldList v-if="mapCount > 1" v-show="menusActive.has('maps')"></WorldList>
+		<WorldList v-if="mapCount > 1" v-show="visibleUIElements.has('maps')"></WorldList>
-		<PlayerList v-show="menusActive.has('players')"></PlayerList>
+		<PlayerList v-show="visibleUIElements.has('players')"></PlayerList>
 		<FollowTarget v-if="following" v-show="followActive" :target="following"></FollowTarget>
 	</aside>
 </template>
 
 <script lang="ts">
-import {defineComponent, ref, reactive, computed, onMounted, onUnmounted, watch} from "@vue/runtime-core";
+import {defineComponent, computed} from "@vue/runtime-core";
 import PlayerList from './sidebar/PlayerList.vue';
 import WorldList from './sidebar/WorldList.vue';
 import FollowTarget from './sidebar/FollowTarget.vue';
 import {useStore} from "@/store";
 import SvgIcon from "@/components/SvgIcon.vue";
+import {MutationTypes} from "@/store/mutation-types";
+import {DynmapUIElement} from "@/dynmap";
 
 export default defineComponent({
 	components: {
@@ -54,47 +56,27 @@ export default defineComponent({
 
 	setup() {
 		const store = useStore(),
-			onResize = () => {
+			visibleUIElements = computed(() => store.state.ui.visibleElements),
-				smallScreen.value = window.innerWidth < 480 || window.innerHeight < 500;
+			smallScreen = computed(() => store.state.ui.smallScreen),
-			},
+			mapCount = computed(() => store.state.maps.size),
-			toggleMenu = (menu: string) => {
+			following = computed(() => store.state.followTarget),
-				if(menusActive.has(menu)) {
-					menusActive.delete(menu);
-				} else {
-					if(smallScreen.value) {
-						menusActive.clear();
-					}
 
-					menusActive.add(menu);
+			toggleElement = (element: DynmapUIElement) => {
-				}
+				store.commit(MutationTypes.TOGGLE_UI_ELEMENT_VISIBILITY, element);
 			},
+
 			followActive = computed(() => {
 				//Show following alongside playerlist on small screens
-				return (!smallScreen.value && following) || (smallScreen.value && menusActive.has('players'));
+				return (!smallScreen.value && following)
+					|| (smallScreen.value && visibleUIElements.value.has('players'));
 			});
 
-		let menusActive = reactive(new Set<string>()),
-			smallScreen = ref(false),
-			mapCount = computed(() => store.state.maps.size),
-			following = computed(() => store.state.followTarget);
-
-		onResize();
-
-		onMounted(() => window.addEventListener('resize', onResize));
-		onUnmounted(() => window.addEventListener('resize', onResize));
-
-		watch(smallScreen, (newValue) => {
-			if(newValue && menusActive.size > 1) {
-				menusActive.clear();
-			}
-		});
-
 		return {
 			mapCount,
-			menusActive,
+			visibleUIElements,
+			toggleElement,
 			followActive,
-			toggleMenu,
+			following,
-			following
 		}
 	}
 })

src/dynmap.d.ts

@@ -304,3 +304,5 @@ interface DynmapChat {
 	// source?: string;
 	timestamp: number;
 }
+
+export type DynmapUIElement = 'chat' | 'players' | 'maps' | 'settings';

src/store/mutation-types.ts

@@ -46,5 +46,9 @@ export enum MutationTypes {
 	SET_PAN_TARGET = 'setPanTarget',
 
 	CLEAR_FOLLOW_TARGET = 'clearFollow',
-	CLEAR_PAN_TARGET = 'clearPanTarget'
+	CLEAR_PAN_TARGET = 'clearPanTarget',
+
+	SET_SMALL_SCREEN = 'setSmallScreen',
+	TOGGLE_UI_ELEMENT_VISIBILITY = 'toggleUIElementVisibility',
+	SET_UI_ELEMENT_VISIBILITY = 'setUIElementVisibility',
 }

src/store/mutations.ts

@@ -29,7 +29,7 @@ import {
 	DynmapPlayer,
 	DynmapServerConfig, DynmapTileUpdate,
 	DynmapWorld,
-	DynmapWorldState, DynmapParsedUrl, DynmapChat
+	DynmapWorldState, DynmapParsedUrl, DynmapChat, DynmapUIElement
 } from "@/dynmap";
 import {DynmapProjection} from "@/leaflet/projection/DynmapProjection";
 
@@ -69,6 +69,10 @@ export type Mutations<S = State> = {
 	[MutationTypes.SET_PAN_TARGET](state: S, payload: DynmapPlayer): void
 	[MutationTypes.CLEAR_FOLLOW_TARGET](state: S, a?: void): void
 	[MutationTypes.CLEAR_PAN_TARGET](state: S, a?: void): void
+
+	[MutationTypes.SET_SMALL_SCREEN](state: S, payload: boolean): void
+	[MutationTypes.TOGGLE_UI_ELEMENT_VISIBILITY](state: S, payload: DynmapUIElement): void
+	[MutationTypes.SET_UI_ELEMENT_VISIBILITY](state: S, payload: {element: DynmapUIElement, state: boolean}): void
 }
 
 export const mutations: MutationTree<State> & Mutations = {
@@ -238,6 +242,10 @@ export const mutations: MutationTree<State> & Mutations = {
 	//Adds chat messages from an update fetch to the chat history
 	[MutationTypes.ADD_CHAT](state: State, chat: Array<DynmapChat>) {
 		state.chat.unshift(...chat);
+
+		if(state.components.chat && isFinite(state.components.chat.messageHistory)) {
+			state.chat.splice(state.components.chat.messageHistory);
+		}
 	},
 
 	//Pops the specified number of marker updates from the pending updates list
@@ -397,5 +405,31 @@ export const mutations: MutationTree<State> & Mutations = {
 	//Clear the pan target
 	[MutationTypes.CLEAR_PAN_TARGET](state: State) {
 		state.panTarget = undefined;
+	},
+
+	[MutationTypes.SET_SMALL_SCREEN](state: State, smallScreen: boolean): void {
+		if(!state.ui.smallScreen && smallScreen && state.ui.visibleElements.size > 1) {
+			state.ui.visibleElements.clear();
+		}
+
+		state.ui.smallScreen = smallScreen;
+	},
+
+	[MutationTypes.TOGGLE_UI_ELEMENT_VISIBILITY](state: State, element: DynmapUIElement): void {
+		const newState = !state.ui.visibleElements.has(element);
+
+		if(newState && state.ui.smallScreen) {
+			state.ui.visibleElements.clear();
+		}
+
+		newState ? state.ui.visibleElements.add(element) : state.ui.visibleElements.delete(element);
+	},
+
+	[MutationTypes.SET_UI_ELEMENT_VISIBILITY](state: State, payload: {element: DynmapUIElement, state: boolean}): void {
+		if(payload.state && state.ui.smallScreen) {
+			state.ui.visibleElements.clear();
+		}
+
+		payload.state ? state.ui.visibleElements.add(payload.element) : state.ui.visibleElements.delete(payload.element);
 	}
 }

src/store/state.ts

@@ -20,7 +20,7 @@ import {
 	DynmapMessageConfig,
 	DynmapPlayer,
 	DynmapServerConfig, DynmapTileUpdate,
-	DynmapWorld, DynmapWorldState, Coordinate, DynmapParsedUrl, DynmapChat
+	DynmapWorld, DynmapWorldState, Coordinate, DynmapParsedUrl, DynmapChat, DynmapUIElement
 } from "@/dynmap";
 import {DynmapProjection} from "@/leaflet/projection/DynmapProjection";
 
@@ -52,6 +52,11 @@ export type State = {
 	updateRequestId: number;
 	updateTimestamp: Date;
 
+	ui: {
+		smallScreen: boolean;
+		visibleElements: Set<DynmapUIElement>;
+	};
+
 	parsedUrl: DynmapParsedUrl;
 }
 
@@ -145,6 +150,11 @@ export const state: State = {
 	updateRequestId: 0,
 	updateTimestamp: new Date(),
 
+	ui: {
+		smallScreen: false,
+		visibleElements:new Set(),
+	},
+
 	parsedUrl: {
 		world: undefined,
 		map: undefined,