clean

src/components/sprites/Character.vue

@@ -3,8 +3,8 @@
     <!-- @TODO : Text position X must be calculated based on the character name length -->
     <Text
       :text="props.character?.name"
-      :x="position.x - 40"
-      :y="position.y - 80"
+      :x="props.character.position_x - 40"
+      :y="props.character.position_y - 80"
       :style="{
         fontFamily: 'Helvetica, Arial',
         color: '#42B883',
@@ -14,18 +14,20 @@
         stroke: '#213547'
       }"
     />
-    <Sprite ref="sprite" texture="character" :x="position.x" :y="position.y" />
+    <Sprite ref="sprite" texture="character" :x="props.character.position_x" :y="props.character.position_y" />
   </Container>
 </template>
 
 <script lang="ts" setup>
-import { Container, onPostUpdate, onPreUpdate, Sprite, Text, useScene } from 'phavuer'
-import { onMounted, reactive, type Ref, ref } from 'vue'
+import { Container, Sprite, Text, useScene } from 'phavuer'
+import { onMounted, reactive, type Ref, ref, watch } from 'vue'
 import config from '@/config'
 import { useSocketStore } from '@/stores/socket'
 import { type Character as CharacterT } from '@/types'
+import { useZoneStore } from '@/stores/zone'
 
 const socket = useSocketStore()
+const zone = useZoneStore();
 
 const props = defineProps({
   layer: Phaser.Tilemaps.TilemapLayer,
@@ -33,20 +35,16 @@ const props = defineProps({
 })
 
 const scene = useScene()
-const position = reactive({ x: props.character.position_x, y: props.character.position_y })
 const isSelf = props.character.id === socket.character.id;
+const pointer_tile = ref()
 
 onMounted(() => {
   if (isSelf) setupSelf()
-
-  if (!isSelf) {
-  }
 });
 
 function setupSelf()
 {
   scene.input.on(Phaser.Input.Events.POINTER_UP, onPointerClick)
-  const pointer_tile = ref(undefined)
   function onPointerClick(pointer: Phaser.Input.Pointer) {
     if (!isSelf) return;
 
@@ -79,11 +77,4 @@ function setupSelf()
     return tile
   }
 }
-
-socket.getConnection.on('character:moved', (data: CharacterT) => {
-  console.log('character:moved', data);
-  if (data.id !== props.character.id) return; // Only update the character that moved
-  position.x = data.position_x
-  position.y = data.position_y
-})
 </script>