#244: Allow nickname changes, fixed listening for notifications

src/components/screens/Characters.vue

@@ -27,7 +27,7 @@
               </div>
             </div>
             <div class="py-6 px-8 h-[calc(100%_-_48px)] flex flex-col items-center gap-6 justify-center" v-if="selectedCharacterId">
-              <input class="input-field w-[158px]" type="text" name="name" :placeholder="characters.find((c) => c.id == selectedCharacterId)?.name" />
+              <input class="input-field w-[158px]" type="text" name="name" :placeholder="characters.find((c) => c.id == selectedCharacterId)?.name" v-model="newNickname" />
               <div class="flex flex-col gap-4 items-center">
                 <div class="flex flex-col gap-3">
                   <div class="bg-[url('/assets/ui-elements/character-select-ui-shape.svg')] w-[190px] h-52 bg-no-repeat bg-center flex items-center justify-between">
@@ -133,6 +133,7 @@ const isLoading = ref<boolean>(true)
 const characters = ref<CharacterT[]>([])
 const selectedCharacterId = ref<string | null>(null)
 const isCreateNewCharacterModalOpen = ref<boolean>(false)
+const newNickname = ref<string>('')
 const newCharacterName = ref<string>('')
 const characterHairs = ref<CharacterHair[]>([])
 const selectedHairId = ref<string | null>(null)
@@ -179,7 +180,8 @@ function loginWithCharacter() {
     SocketEvent.CHARACTER_CONNECT,
     {
       characterId: selectedCharacterId.value,
-      characterHairId: selectedHairId.value
+      characterHairId: selectedHairId.value,
+      newNickname: newNickname.value
     },
     (response: { character: CharacterT; map: Map; characters: CharacterT[] }) => {
       gameStore.setCharacter(response.character)
@@ -198,6 +200,7 @@ function createCharacter() {
 // Watch changes for selected character and update hairs
 watch(selectedCharacterId, (characterId) => {
   if (!characterId) return
+  newNickname.value = ''
   selectedHairId.value = characters.value.find((c) => c.id == characterId)?.characterHair ?? null
 })
 

src/components/utilities/Notifications.vue

@@ -14,7 +14,7 @@ import { SocketEvent } from '@/application/enums'
 import Modal from '@/components/utilities/Modal.vue'
 import { socketManager } from '@/managers/SocketManager'
 import { useGameStore } from '@/stores/gameStore'
-import { onBeforeMount, onBeforeUnmount, onMounted, onUnmounted, watch } from 'vue'
+import { onMounted, onUnmounted, watch } from 'vue'
 
 const gameStore = useGameStore()
 
@@ -37,13 +37,13 @@ function setupNotificationListener(connection: any) {
 }
 
 onMounted(() => {
-  const connection = gameStore.connection
+  const connection = socketManager.connection
   if (connection) {
     setupNotificationListener(connection)
   } else {
     // Watch for changes in the socket connection
     watch(
-      () => gameStore.connection,
+      () => socketManager.connection,
       (newConnection) => {
         if (newConnection) setupNotificationListener(newConnection)
       }
@@ -52,7 +52,7 @@ onMounted(() => {
 })
 
 onUnmounted(() => {
-  const connection = gameStore.connection
+  const connection = socketManager.connection
   if (connection) {
     connection.off(SocketEvent.NOTIFICATION)
   }