moving stuff yes

src/components/sprites/Character.vue

@@ -15,12 +15,13 @@
 </template>
 
 <script lang="ts" setup>
-import { Container, Image, RoundRectangle, Sprite, Text, useScene } from 'phavuer'
+import { Container, Image, refObj, refTo, RoundRectangle, Sprite, Text, useScene } from 'phavuer'
 import { type ExtendedCharacter as CharacterT } from '@/types'
 import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
 import { watch, computed, ref, onMounted, onUnmounted } from 'vue'
 import config from '@/config'
 import { useGameStore } from '@/stores/gameStore'
+import { useZoneStore } from '@/stores/zoneStore'
 
 enum Direction {
   POSITIVE,
@@ -28,7 +29,7 @@ enum Direction {
   NOCHANGE
 }
 
-const charContainer = ref<Phaser.GameObjects.Container | null>(null)
+const charContainer = refObj();
 
 interface Props {
   layer: Phaser.Tilemaps.TilemapLayer
@@ -40,6 +41,7 @@ const props = withDefaults(defineProps<Props>(), {
 })
 
 const gameStore = useGameStore()
+const zoneStore = useZoneStore()
 const scene = useScene()
 
 const isometricDepth = ref(calculateIsometricDepth(props.character!.positionX, props.character!.positionY, 28, 94, true))
@@ -167,7 +169,8 @@ onMounted(() => {
    */
   // Check if player is this character, then lock with camera
   if (props.character && props.character.id === gameStore.character?.id) {
-    scene.cameras.main.startFollow(charContainer.value as Phaser.GameObjects.Container)
+    charContainer.value?.setName(props.character.name)
+    zoneStore.characterLoaded = true;
   }
   if (props.character) {
     updatePosition(props.character.positionX, props.character.positionY, Direction.POSITIVE)

src/composables/useCameraControls.ts

@@ -1,7 +1,11 @@
 import { useGameStore } from '@/stores/gameStore'
+import { useScene } from 'phavuer'
+import { watch } from 'vue'
+import { useZoneStore } from '@/stores/zoneStore'
 
 export function useCameraControls(scene: Phaser.Scene): any {
   const gameStore = useGameStore()
+  const zoneStore = useZoneStore()
   const camera = scene.cameras.main
 
   function onPointerDown(pointer: Phaser.Input.Pointer) {
@@ -14,6 +18,15 @@ export function useCameraControls(scene: Phaser.Scene): any {
     gameStore.setPlayerDraggingCamera(false)
   }
 
+  watch(
+    () => zoneStore.characterLoaded,
+    (characterLoaded) => {
+      if(characterLoaded) {
+        scene.cameras.main.startFollow(scene.children.getByName(gameStore.character.name));
+      }
+    }
+  )
+
   scene.input.on(Phaser.Input.Events.POINTER_DOWN, onPointerDown)
   scene.input.on(Phaser.Input.Events.POINTER_UP, onPointerUp)
 

src/stores/gameStore.ts

@@ -3,6 +3,7 @@ import { io, Socket } from 'socket.io-client'
 import type { Asset, Character, Notification, User } from '@/types'
 import config from '@/config'
 import { useCookies } from '@vueuse/integrations/useCookies'
+import { BehaviorSubject } from 'rxjs'
 
 export const useGameStore = defineStore('game', {
   state: () => ({

src/stores/zoneStore.ts

@@ -4,7 +4,8 @@ import type { ExtendedCharacter, Zone } from '@/types'
 export const useZoneStore = defineStore('zone', {
   state: () => ({
     zone: null as Zone | null,
-    characters: [] as ExtendedCharacter[]
+    characters: [] as ExtendedCharacter[],
+    characterLoaded: false,
   }),
   getters: {
     getCharacterById: (state) => {