Temp. fix for finding children in scene, character create bug fix, chat logic improvements, added image compression upon build

src/components/game/character/Character.vue

@@ -92,7 +92,6 @@ watch(
 onMounted(async () => {
   await initializeSprite()
   if (props.mapCharacter.character.id === gameStore.character!.id) {
-    mapStore.setCharacterLoaded(true)
     scene.cameras.main.startFollow(characterContainer.value as Phaser.GameObjects.Container)
   }
 })

src/components/game/character/partials/ChatBubble.vue

@@ -1,5 +1,5 @@
 <template>
-  <Container ref="characterChatContainer" :depth="999">
+  <Container ref="characterChatContainer">
     <RoundRectangle @create="createChatBubble" :origin-x="0.5" :origin-y="7.5" :fillColor="0xffffff" :width="194" :height="21" :radius="20" />
     <Text @create="createChatText" :style="{ fontSize: 13, fontFamily: 'Arial', color: '#000' }" />
   </Container>

src/components/game/gui/Chat.vue

@@ -2,7 +2,7 @@
   <div class="w-full md:min-w-[350px] max-w-[750px] flex flex-col absolute left-1/2 -translate-x-1/2 bottom-5">
     <div ref="chatWindow" class="w-full overflow-auto h-32 mb-5 bg-gray rounded-md border-2 border-solid border-gray-500 text-gray-300" v-show="gameStore.uiSettings.isChatOpen">
       <div v-for="message in chats" class="flex-col py-2 items-center p-3">
-        <span class="text-ellipsis overflow-hidden whitespace-nowrap text-sm" :class="{ 'text-cyan-300': gameStore.character?.role == 'gm' }">{{ message.character.name }}</span>
+        <span class="text-ellipsis overflow-hidden whitespace-nowrap text-sm" :class="{ 'text-cyan-300': gameStore.character?.role == 'gm' }">{{ message.character }}</span>
         <p class="text-gray-50 m-0">{{ message.message }}</p>
       </div>
     </div>
@@ -22,7 +22,6 @@
 
 <script setup lang="ts">
 import { SocketEvent } from '@/application/enums'
-import type { Chat } from '@/application/types'
 import { useGameStore } from '@/stores/gameStore'
 import { useMapStore } from '@/stores/mapStore'
 import { onClickOutside, useFocus } from '@vueuse/core'
@@ -34,7 +33,7 @@ const gameStore = useGameStore()
 const mapStore = useMapStore()
 
 const message = ref('')
-const chats = ref([] as Chat[])
+const chats = ref<{ character: string; message: string }[]>([])
 const chatWindow = ref<HTMLElement | null>(null)
 const chatInput = ref<HTMLElement | null>(null)
 
@@ -80,21 +79,31 @@ const scrollToBottom = () => {
   })
 }
 
-gameStore.connection?.on(SocketEvent.CHAT_MESSAGE, (data: Chat) => {
-  chats.value.push(data)
+gameStore.connection?.on(SocketEvent.CHAT_MESSAGE, (data: { character: string; message: string }) => {
+  if (!data.character || !data.message) return
+
+
+  chats.value.push({ character: data.character, message: data.message })
   scrollToBottom()
 
-  if (!mapStore.characterLoaded) return
+  const characterContainer = scene.children.getByName(data.character) as Phaser.GameObjects.Container
+  if (!characterContainer) {
+    console.log('No character container found')
+    return
+  }
 
-  const characterContainer = scene.children.getByName(data.character.name) as Phaser.GameObjects.Container
-  if (!characterContainer) return
+  const characterChatContainer = characterContainer.getByName(data.character + '_chatContainer') as Phaser.GameObjects.Container
+  if (!characterChatContainer) {
+    console.log('No character chat container found')
+    return
+  }
 
-  const characterChatContainer = characterContainer.getByName(data.character.name + '_chatContainer') as Phaser.GameObjects.Container
-  if (!characterChatContainer) return
-
-  const chatBubble = characterChatContainer.getByName(data.character.name + '_chatBubble') as Phaser.GameObjects.Container
-  const chatText = characterChatContainer.getByName(data.character.name + '_chatText') as Phaser.GameObjects.Text
-  if (!chatText || !chatBubble) return
+  const chatBubble = characterChatContainer.getByName(data.character + '_chatBubble') as Phaser.GameObjects.Container
+  const chatText = characterChatContainer.getByName(data.character + '_chatText') as Phaser.GameObjects.Text
+  if (!chatText || !chatBubble) {
+    console.log('No chat text or bubble found')
+    return
+  }
 
   function calculateTextWidth(text: string, font: string, fontSize: number): number {
     // Create a canvas element

src/components/screens/Characters.vue

@@ -169,7 +169,7 @@ function loginWithCharacter() {
 
 // Create character logics
 function createCharacter() {
-  gameStore.connection?.emit(SocketEvent.CHARACTER_LIST, { name: newCharacterName.value }, (success: boolean) => {
+  gameStore.connection?.emit(SocketEvent.CHARACTER_CREATE, { name: newCharacterName.value }, (success: boolean) => {
     if (success) return
     isCreateNewCharacterModalOpen.value = false
   })
@@ -178,7 +178,7 @@ function createCharacter() {
 // Watch changes for selected character and update hairs
 watch(selectedCharacterId, (characterId) => {
   if (!characterId) return
-  // selectedHairId.value = characters.value.find((c) => c.id == characterId)?.characterHairId ?? null
+  selectedHairId.value = characters.value.find((c) => c.id == characterId)?.characterHair ?? null
 })
 
 onMounted(async () => {