feat(travel): add button step autofocus

Author: SugarF0x

src/views/Travel/AutoFocus.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { onMounted, watch } from "vue"
+import { useTravelStore } from "@/store"
+import { storeToRefs } from "pinia"
+
+const travelStore = useTravelStore()
+const { cooldownTimeLeft } = storeToRefs(travelStore)
+
+const travelButton = document.querySelector<HTMLButtonElement>(".px-4.py-4 button")
+
+watch(
+  cooldownTimeLeft,
+  (val) => {
+    if (!val) return
+    if (!travelButton) return
+
+    setTimeout(() => {
+      travelButton.focus()
+    }, val + 10)
+  },
+  {
+    immediate: true,
+  }
+)
+
+onMounted(() => {
+  if (!travelButton) return
+  travelButton.focus()
+})
+</script>
+
+<template>
+  <slot></slot>
+</template>

src/views/Travel/Travel.vue

@@ -2,10 +2,12 @@
 import TravelBridge from "./TravelBridge.vue"
 import TravelBar from "./TravelBar.vue"
 import TravelButton from "./TravelButton.vue"
+import AutoFocus from "./AutoFocus.vue"
 </script>
 
 <template>
   <TravelBridge />
   <TravelBar />
   <TravelButton />
+  <AutoFocus />
 </template>