From 910a9fa2cf7c6686fe3b6a70b39cc039e6ec575a Mon Sep 17 00:00:00 2001
From: Zaxiure <daniel@zaxiure.nl>
Date: Wed, 25 Sep 2024 01:13:04 +0200
Subject: [PATCH] moving stuff yes

---
 src/components/sprites/Character.vue |  9 ++++++---
 src/composables/useCameraControls.ts | 13 +++++++++++++
 src/stores/gameStore.ts              |  1 +
 src/stores/zoneStore.ts              |  3 ++-
 4 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/src/components/sprites/Character.vue b/src/components/sprites/Character.vue
index a6de646..ef8bf79 100644
--- a/src/components/sprites/Character.vue
+++ b/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)
diff --git a/src/composables/useCameraControls.ts b/src/composables/useCameraControls.ts
index 3ad53e3..6725248 100644
--- a/src/composables/useCameraControls.ts
+++ b/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)
 
diff --git a/src/stores/gameStore.ts b/src/stores/gameStore.ts
index 6af343e..272f662 100644
--- a/src/stores/gameStore.ts
+++ b/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: () => ({
diff --git a/src/stores/zoneStore.ts b/src/stores/zoneStore.ts
index db56041..a69f2a9 100644
--- a/src/stores/zoneStore.ts
+++ b/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) => {