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

package.json

@@ -18,10 +18,12 @@
     "@vueuse/integrations": "^10.5.0",
     "axios": "^1.7.7",
     "dexie": "^4.0.8",
-    "phaser": "^3.86.0",
+    "phaser": "3.87.0",
     "pinia": "^2.1.6",
+    "sharp": "^0.33.5",
     "socket.io-client": "^4.8.0",
     "universal-cookie": "^6.1.3",
+    "vite-plugin-image-optimizer": "^1.1.8",
     "vue": "^3.5.12",
     "zod": "^3.22.2"
   },

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 () => {

src/stores/mapStore.ts

@@ -6,7 +6,6 @@ export const useMapStore = defineStore('map', {
     return {
       mapId: '',
       characters: [] as MapCharacter[],
-      characterLoaded: false
     }
   },
   getters: {
@@ -36,9 +35,6 @@ export const useMapStore = defineStore('map', {
     removeCharacter(characterId: UUID) {
       this.characters = this.characters.filter((char) => char.character.id !== characterId)
     },
-    setCharacterLoaded(loaded: boolean) {
-      this.characterLoaded = loaded
-    },
     updateCharacterPosition(data: { characterId: UUID; positionX: number; positionY: number; rotation: number; isMoving: boolean }) {
       const character = this.characters.find((char) => char.character.id === data.characterId)
       if (character) {
@@ -51,7 +47,6 @@ export const useMapStore = defineStore('map', {
     reset() {
       this.mapId = ''
       this.characters = []
-      this.characterLoaded = false
     }
   }
 })

vite.config.ts

@@ -2,6 +2,7 @@ import { fileURLToPath, URL } from 'node:url'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue';
 import viteCompression from 'vite-plugin-compression';
+import {ViteImageOptimizer} from "vite-plugin-image-optimizer";
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -11,7 +12,8 @@ export default defineConfig({
       algorithm: 'gzip',
       ext: '.gz',
       threshold: 10240 // Only compress files larger than 10KB
-    })
+    }),
+    ViteImageOptimizer()
   ],
   build: {
     minify: 'terser', // Better minification