clean

src/components/Controls.vue

@@ -38,14 +38,7 @@ scene.input.on(Phaser.Input.Events.POINTER_MOVE, onPointerMove)
 
 function getTile(x: number, y: number, layer: Phaser.Tilemaps.TilemapLayer): Phaser.Tilemaps.Tile | undefined {
   const tile: Phaser.Tilemaps.Tile = layer.getTileAtWorldXY(x, y)
-
-  // console.log(x,y);
-  // console.log('tile', tile);
-
-  if (!tile) {
-    return undefined
-  }
-
+  if (!tile) return undefined;
   return tile
 }
 

src/components/World.vue

@@ -1,7 +1,7 @@
 <template>
   <TilemapLayerC v-if="zoneStore.isLoaded" :tilemap="tileMap" :tileset="zoneStore.getTiles" ref="tilemapLayer" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />
   <Controls :layer="layer" />
-  <Container v-if="zoneStore.isLoaded && zoneStore.getCharacters.length">
+  <Container v-if="zoneStore.isLoaded">
     <Character :layer="layer" v-for="character in zoneStore.getCharacters" :key="character.id" :character="character" />
   </Container>
 </template>
@@ -12,7 +12,7 @@ import Tileset = Phaser.Tilemaps.Tileset
 import TilemapLayer = Phaser.Tilemaps.TilemapLayer
 import { Container, TilemapLayer as TilemapLayerC, useScene } from 'phavuer'
 import Character from '@/components/sprites/Character.vue'
-import {type Character as CharacterType} from '@/types'
+import { type Character as CharacterType } from '@/types'
 import { onBeforeMount, ref, type Ref, watch } from 'vue'
 import Controls from '@/components/Controls.vue'
 import { useSocketStore } from '@/stores/socket'
@@ -74,6 +74,11 @@ socket.getConnection.on('user:disconnect', (data: CharacterType) => {
   zoneStore.removeCharacter(data)
 })
 
+socket.getConnection.on('character:moved', (data: CharacterType) => {
+  console.log('character:moved', data)
+  zoneStore.updateCharacter(data);
+})
+
 /**
  * 1 tile is 64x32
  * the zone is 10x10

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>