From 3acd40efd20851bd62fd99abc370d1a8db046732 Mon Sep 17 00:00:00 2001 From: James Lyne Date: Thu, 17 Dec 2020 00:13:28 +0000 Subject: [PATCH] Pan to players on click --- src/components/Map.vue | 16 ++++++++++++---- src/components/Sidebar.vue | 2 +- src/components/sidebar/FollowTarget.vue | 2 +- src/components/sidebar/PlayerListItem.vue | 6 +++--- src/store/mutation-types.ts | 9 +++++++-- src/store/mutations.ts | 20 +++++++++++++------- src/store/state.ts | 6 ++++-- 7 files changed, 41 insertions(+), 20 deletions(-) diff --git a/src/components/Map.vue b/src/components/Map.vue index f1c81b6..bc4f4c2 100644 --- a/src/components/Map.vue +++ b/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(); diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue index 9d98ef1..1ccc9b8 100644 --- a/src/components/Sidebar.vue +++ b/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, diff --git a/src/components/sidebar/FollowTarget.vue b/src/components/sidebar/FollowTarget.vue index 41205b1..4475e43 100644 --- a/src/components/sidebar/FollowTarget.vue +++ b/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 !== ' ') { diff --git a/src/components/sidebar/PlayerListItem.vue b/src/components/sidebar/PlayerListItem.vue index cb5d5bd..e724445 100644 --- a/src/components/sidebar/PlayerListItem.vue +++ b/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, undefined); + useStore().commit(MutationTypes.CLEAR_FOLLOW_TARGET, undefined); + useStore().commit(MutationTypes.SET_PAN_TARGET, this.player); }, onKeydown(e: KeyboardEvent) { if(e.key !== ' ') { diff --git a/src/store/mutation-types.ts b/src/store/mutation-types.ts index 1c85087..3de17ca 100644 --- a/src/store/mutation-types.ts +++ b/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' } \ No newline at end of file diff --git a/src/store/mutations.ts b/src/store/mutations.ts index d86a9f0..b8858c7 100644 --- a/src/store/mutations.ts +++ b/src/store/mutations.ts @@ -68,8 +68,9 @@ export type Mutations = { [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.CLEAR_FOLLOW](state: S, a?: void): void + [MutationTypes.SET_FOLLOW_TARGET](state: S, payload: DynmapPlayer): void + [MutationTypes.SET_PAN_TARGET](state: S, payload: DynmapPlayer): void + [MutationTypes.CLEAR_FOLLOW_TARGET](state: S, a?: void): void } export const mutations: MutationTree & Mutations = { @@ -90,7 +91,8 @@ export const mutations: MutationTree & 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 & Mutations = { state.parsedUrl = payload; }, - [MutationTypes.FOLLOW_PLAYER](state: State, player: DynmapPlayer) { - state.following = player; + [MutationTypes.SET_FOLLOW_TARGET](state: State, player: DynmapPlayer) { + state.followTarget = player; }, - [MutationTypes.CLEAR_FOLLOW](state: State) { - state.following = undefined; + [MutationTypes.SET_PAN_TARGET](state: State, player: DynmapPlayer) { + state.panTarget = player; + }, + + [MutationTypes.CLEAR_FOLLOW_TARGET](state: State) { + state.followTarget = undefined; } } \ No newline at end of file diff --git a/src/store/state.ts b/src/store/state.ts index 4f9caf5..7dff6cd 100644 --- a/src/store/state.ts +++ b/src/store/state.ts @@ -37,7 +37,8 @@ export type State = { pendingSetUpdates: Map; pendingTileUpdates: Array; - 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,