Pan to players on click

src/components/Map.vue

@@ -72,8 +72,10 @@ export default defineComponent({
 			currentWorld = computed(() => store.state.currentWorld),
 			currentMap = computed(() => store.state.currentMap),
 			currentProjection = computed(() => store.state.currentProjection),
-			following = computed(() => store.state.following),
+			mapBackground = computed(() => store.getters.mapBackground),
-			mapBackground = computed(() => store.getters.mapBackground);
+
+			followTarget = computed(() => store.state.followTarget),
+			panTarget = computed(() => store.state.panTarget);
 
 		return {
 			leaflet,
@@ -85,7 +87,8 @@ export default defineComponent({
 			clockControlEnabled,
 			linkControlEnabled,
 			logoControls,
-			following,
+			followTarget,
+			panTarget,
 			mapBackground,
 			currentWorld,
 			currentMap,
@@ -94,7 +97,7 @@ export default defineComponent({
 	},
 
 	watch: {
-		following: {
+		followTarget: {
 			handler(newValue, oldValue) {
 				if (newValue) {
 					this.updateFollow(newValue, !oldValue || newValue.account !== oldValue.account);
@@ -102,6 +105,11 @@ export default defineComponent({
 			},
 			deep: true
 		},
+		panTarget(newValue) {
+			if(newValue) {
+				this.updateFollow(newValue, false);
+			}
+		},
 		currentWorld(newValue, oldValue) {
 			const store = useStore();
 

src/components/Sidebar.vue

@@ -58,7 +58,7 @@ export default defineComponent({
 			playersActive = ref(false),
 			settingsActive = ref(false),
 			mapCount = computed(() => store.state.maps.size),
-			following = computed(() => store.state.following);
+			following = computed(() => store.state.followTarget);
 
 		return {
 			mapCount,

src/components/sidebar/FollowTarget.vue

@@ -51,7 +51,7 @@ export default defineComponent({
 	},
 	methods: {
 		unfollow() {
-			useStore().commit(MutationTypes.CLEAR_FOLLOW, undefined);
+			useStore().commit(MutationTypes.CLEAR_FOLLOW_TARGET, undefined);
 		},
 		onKeydown(e: KeyboardEvent) {
 			if(e.key !== ' ') {

src/components/sidebar/PlayerListItem.vue

@@ -47,11 +47,11 @@ export default defineComponent({
 	},
 	methods: {
 		follow() {
-			useStore().commit(MutationTypes.FOLLOW_PLAYER, this.player);
+			useStore().commit(MutationTypes.SET_FOLLOW_TARGET, this.player);
 		},
 		pan() {
-			useStore().commit(MutationTypes.FOLLOW_PLAYER, this.player);
+			useStore().commit(MutationTypes.CLEAR_FOLLOW_TARGET, undefined);
-			useStore().commit(MutationTypes.CLEAR_FOLLOW, undefined);
+			useStore().commit(MutationTypes.SET_PAN_TARGET, this.player);
 		},
 		onKeydown(e: KeyboardEvent) {
 			if(e.key !== ' ') {

src/store/mutation-types.ts

@@ -34,11 +34,16 @@ export enum MutationTypes {
 	SET_PLAYERS = 'setPlayers',
 	SET_PLAYERS_ASYNC = 'setPlayersAsync',
 	SYNC_PLAYERS = 'syncPlayers',
+
 	SET_CURRENT_MAP = 'setCurrentMap',
 	SET_CURRENT_PROJECTION = 'setCurrentProjection',
 	SET_CURRENT_LOCATION = 'setCurrentLocation',
 	SET_CURRENT_ZOOM = 'setCurrentZoom',
 	SET_PARSED_URL = 'setParsedUrl',
-	FOLLOW_PLAYER = 'followPlayer',
+
-	CLEAR_FOLLOW = 'clearFollow',
+	SET_FOLLOW_TARGET = 'setFollowTarget',
+	SET_PAN_TARGET = 'setPanTarget',
+
+	CLEAR_FOLLOW_TARGET = 'clearFollow',
+	CLEAR_PAN_TARGET = 'clearPanTarget'
 }

src/store/mutations.ts

@@ -68,8 +68,9 @@ export type Mutations<S = State> = {
 	[MutationTypes.SET_CURRENT_LOCATION](state: S, payload: Coordinate): void
 	[MutationTypes.SET_CURRENT_ZOOM](state: S, payload: number): void
 	[MutationTypes.SET_PARSED_URL](state: S, payload: DynmapParsedUrl): void
-	[MutationTypes.FOLLOW_PLAYER](state: S, payload: DynmapPlayer): void
+	[MutationTypes.SET_FOLLOW_TARGET](state: S, payload: DynmapPlayer): void
-	[MutationTypes.CLEAR_FOLLOW](state: S, a?: void): void
+	[MutationTypes.SET_PAN_TARGET](state: S, payload: DynmapPlayer): void
+	[MutationTypes.CLEAR_FOLLOW_TARGET](state: S, a?: void): void
 }
 
 export const mutations: MutationTree<State> & Mutations = {
@@ -90,7 +91,8 @@ export const mutations: MutationTree<State> & Mutations = {
 
 		state.currentMap = undefined;
 		state.currentWorld = undefined;
-		state.following = undefined;
+		state.followTarget = undefined;
+		state.panTarget = undefined;
 
 		state.currentWorldState.timeOfDay = 0;
 		state.currentWorldState.raining = false;
@@ -319,11 +321,15 @@ export const mutations: MutationTree<State> & Mutations = {
 		state.parsedUrl = payload;
 	},
 
-	[MutationTypes.FOLLOW_PLAYER](state: State, player: DynmapPlayer) {
+	[MutationTypes.SET_FOLLOW_TARGET](state: State, player: DynmapPlayer) {
-		state.following = player;
+		state.followTarget = player;
 	},
 
-	[MutationTypes.CLEAR_FOLLOW](state: State) {
+	[MutationTypes.SET_PAN_TARGET](state: State, player: DynmapPlayer) {
-		state.following = undefined;
+		state.panTarget = player;
+	},
+
+	[MutationTypes.CLEAR_FOLLOW_TARGET](state: State) {
+		state.followTarget = undefined;
 	}
 }

src/store/state.ts

@@ -37,7 +37,8 @@ export type State = {
 	pendingSetUpdates: Map<string, DynmapMarkerSetUpdates>;
 	pendingTileUpdates: Array<DynmapTileUpdate>;
 
-	following?: DynmapPlayer;
+	followTarget?: DynmapPlayer;
+	panTarget?: DynmapPlayer;
 
 	currentWorldState: DynmapWorldState;
 	currentWorld?: DynmapWorld;
@@ -116,7 +117,8 @@ export const state: State = {
 		logoControls: [],
 	},
 
-	following: undefined,
+	followTarget: undefined,
+	panTarget: undefined,
 
 	currentWorld: undefined,
 	currentMap: undefined,