#187 - Enter to focus chat when not focused

src/components/gui/Chat.vue

@@ -21,8 +21,8 @@
 </template>
 
 <script setup lang="ts">
-import { onBeforeUnmount, ref, nextTick } from 'vue'
-import { onClickOutside } from '@vueuse/core'
+import { onBeforeUnmount, ref, nextTick, onMounted } from 'vue'
+import { onClickOutside, useFocus } from '@vueuse/core'
 import { useGameStore } from '@/stores/gameStore'
 import type { Chat } from '@/types'
 import { useZoneStore } from '@/stores/zoneStore'
@@ -37,6 +37,14 @@ const chats = ref([] as Chat[])
 const chatWindow = ref<HTMLElement | null>(null)
 const chatInput = ref<HTMLElement | null>(null)
 
+const { focused } = useFocus(chatInput)
+
+function focusChat(event: KeyboardEvent) {
+  if (event.key === 'Enter' && !focused.value) {
+    focused.value = true
+  }
+}
+
 onClickOutside(chatInput, (event) => unfocusChat(event, chatInput.value as HTMLElement))
 
 function unfocusChat(event: Event, targetElement: HTMLElement) {
@@ -128,7 +136,12 @@ gameStore.connection?.on('chat:message', (data: Chat) => {
 })
 scrollToBottom()
 
+onMounted(() => {
+  addEventListener('keydown', focusChat)
+})
+
 onBeforeUnmount(() => {
   gameStore.connection?.off('chat:message')
+  removeEventListener('keydown', focusChat)
 })
 </script>