refactor(travel): split autofocus

Author: SugarF0x

src/views/Travel/AutoFocus/AutoFocus.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import StepButton from "./StepButton.vue"
+import Encounters from "./Encounters.vue"
+</script>
+
+<template>
+  <StepButton />
+  <Encounters />
+</template>

src/views/Travel/AutoFocus.vue src/views/Travel/AutoFocus/Encounters.vue

@@ -1,15 +1,12 @@
 <script setup lang="ts">
 import { Checkbox } from "@/components"
-
-import { watch } from "vue"
-import { useTravelStore } from "./store"
+import { useTravelStore } from "../store"
 import { storeToRefs } from "pinia"
-import { focusOnButtonEnable, wrapAnchorWithButton } from "@/utils"
+import { watch } from "vue"
+import { wrapAnchorWithButton } from "@/utils"
 
 const travelStore = useTravelStore()
-const { shouldAutoFocusStep, shouldAutoFocusEncounters, lastStepResponse } = storeToRefs(travelStore)
-
-/** Encounter auto focus */
+const { shouldAutoFocusEncounters, lastStepResponse } = storeToRefs(travelStore)
 
 watch(lastStepResponse, async (response) => {
   if (!response) return
@@ -31,31 +28,9 @@ watch(lastStepResponse, async (response) => {
     }
   })
 })
-
-/** Travel button auto focus */
-
-const travelButton = document.querySelector<HTMLButtonElement>(".px-4.py-4 button")
-const observer = travelButton && focusOnButtonEnable(travelButton)
-
-watch(
-  shouldAutoFocusStep,
-  (val) => {
-    if (!observer) return
-
-    if (val) observer.connect()
-    else observer.disconnect()
-  },
-  {
-    immediate: true,
-  }
-)
 </script>
 
 <template>
-  <Checkbox v-model="shouldAutoFocusStep">
-    <template #default> Autofocus step button </template>
-    <template #subtitle> Just hit space/enter! </template>
-  </Checkbox>
   <Checkbox v-model="shouldAutoFocusEncounters">
     <template #default> Autofocus encounters </template>
     <template #subtitle> Hit space/enter to attack/gather </template>

src/views/Travel/AutoFocus/StepButton.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { Checkbox } from "@/components"
+import { useTravelStore } from "../store"
+import { storeToRefs } from "pinia"
+import { focusOnButtonEnable } from "@/utils"
+import { watch } from "vue"
+
+const travelStore = useTravelStore()
+const { shouldAutoFocusStep } = storeToRefs(travelStore)
+
+const travelButton = document.querySelector<HTMLButtonElement>(".px-4.py-4 button")
+const observer = travelButton && focusOnButtonEnable(travelButton)
+
+watch(
+  shouldAutoFocusStep,
+  (val) => {
+    if (!observer) return
+
+    if (val) observer.connect()
+    else observer.disconnect()
+  },
+  {
+    immediate: true,
+  }
+)
+</script>
+
+<template>
+  <Checkbox v-model="shouldAutoFocusStep">
+    <template #default> Autofocus step button </template>
+    <template #subtitle> Just hit space/enter! </template>
+  </Checkbox>
+</template>

src/views/Travel/AutoFocus/index.ts

@@ -0,0 +1 @@
+export { default as AutoFocus } from "./AutoFocus.vue"

src/views/Travel/Travel.vue

@@ -3,7 +3,7 @@ import { Controls } from "@/components"
 
 import DataBridge from "./DataBridge.vue"
 import StepButton from "./StepButton.vue"
-import AutoFocus from "./AutoFocus.vue"
+import { AutoFocus } from "./AutoFocus"
 </script>
 
 <template>

src/views/Travel/store.ts

@@ -4,11 +4,13 @@ import { computed, onMounted, ref } from "vue"
 export const useTravelStore = defineStore(
   "travel",
   () => {
-    const lastStepResponse = ref<null | TravelResponse>(null)
-    const cooldownTimestamp = ref<null | string>(null)
     const shouldAutoFocusStep = ref(false)
     const shouldPersistCooldown = ref(false)
     const shouldAutoFocusEncounters = ref(false)
+    // const shouldAutoFocusVerification = ref(false)
+
+    const lastStepResponse = ref<null | TravelResponse>(null)
+    const cooldownTimestamp = ref<null | string>(null)
 
     const cooldownTimeLeft = computed(() => {
       if (!cooldownTimestamp.value) return 0
@@ -24,12 +26,13 @@ export const useTravelStore = defineStore(
     })
 
     return {
-      cooldownTimestamp,
-      cooldownTimeLeft,
-      lastStepResponse,
       shouldAutoFocusStep,
       shouldPersistCooldown,
       shouldAutoFocusEncounters,
+      // shouldAutoFocusVerification,
+      cooldownTimestamp,
+      cooldownTimeLeft,
+      lastStepResponse,
     }
   },
   {