bit of cleaning, npm updated, working on character moving, typescript improvements

src/components/sprites/Character.vue

@@ -1,8 +1,9 @@
 <template>
   <Container>
+    <!-- @TODO : Text position X must be calculated based on the character name length -->
     <Text
-      :text="props.character?.name ?? socket.character.name"
-      :x="position.x - 50"
+      :text="props.character?.name"
+      :x="position.x - 40"
       :y="position.y - 80"
       :style="{
         fontFamily: 'Helvetica, Arial',
@@ -13,91 +14,76 @@
         stroke: '#213547'
       }"
     />
-    <Sprite ref="sprite" texture="player" :x="position.x" :y="position.y" />
+    <Sprite ref="sprite" texture="character" :x="position.x" :y="position.y" />
   </Container>
 </template>
 
 <script lang="ts" setup>
 import { Container, onPostUpdate, onPreUpdate, Sprite, Text, useScene } from 'phavuer'
-import { reactive, type Ref, ref } from 'vue'
+import { onMounted, reactive, type Ref, ref } from 'vue'
 import config from '@/config'
 import { useSocketStore } from '@/stores/socket'
-import {type Character as CharacterT } from '@/types'
+import { type Character as CharacterT } from '@/types'
 
 const socket = useSocketStore()
 
 const props = defineProps({
   layer: Phaser.Tilemaps.TilemapLayer,
-  character: {
-    type: Object as () => CharacterT | undefined,
-    default: undefined
-  }
+  character: Object as () => CharacterT
 })
 
 const scene = useScene()
+const position = reactive({ x: props.character.position_x, y: props.character.position_y })
+const isSelf = props.character.id === socket.character.id;
 
-// onPreUpdate((time, delta) => {
-//   console.log(time, delta);
-// })
+onMounted(() => {
+  if (isSelf) setupSelf()
 
-const position = reactive({ x: 0, y: 0 })
-
-if (props.character !== undefined) {
-  console.log('character', props.character)
-  position.x = props.character?.position_x
-  position.y = props.character?.position_y
-}
-
-const pointer_tile = ref(undefined)
-
-function onPointerClick(pointer: Phaser.Input.Pointer) {
-  const px = scene.cameras.main.worldView.x + pointer.x
-  const py = scene.cameras.main.worldView.y + pointer.y
-
-  pointer_tile.value = getTile(px, py, props.layer)
-  if (pointer_tile.value) {
-    const worldPoint = props.layer.tileToWorldXY(pointer_tile.value.x, pointer_tile.value.y)
-    position.x = worldPoint.x + config.tile_size.y
-    position.y = worldPoint.y
-
-    socket.getConnection.emit('move', { x: position.x, y: position.y })
+  if (!isSelf) {
   }
+});
 
-  //Directions for player sprites + animations
-  if (px < 0 && py > 0) {
-    console.log('down left')
-  } else if (px < 0 && py < 0) {
-    console.log('top left')
-  } else if (px > 0 && py > 0) {
-    console.log('down right')
-  } else if (px > 0 && py < 0) {
-    console.log('top right')
-  }
-}
-
-if (!props.character) {
+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;
 
-socket.getConnection.on('character:move', (data: any) => {
-  console.log('character moved', data)
+    const px = scene.cameras.main.worldView.x + pointer.x
+    const py = scene.cameras.main.worldView.y + pointer.y
 
-  if (data.id !== props.character?.id) {
-    console.log('not you')
-    return
+    pointer_tile.value = getTile(px, py, props.layer) as Phaser.Tilemaps.Tile
+    if (pointer_tile.value) {
+      const worldPoint = props.layer.tileToWorldXY(pointer_tile.value.x, pointer_tile.value.y)
+      const position_x = worldPoint.x + config.tile_size.y
+      const position_y = worldPoint.y
+      socket.getConnection.emit('character:move', { position_x, position_y })
+    }
+
+    //Directions for player sprites + animations
+    if (px < 0 && py > 0) {
+      console.log('down left')
+    } else if (px < 0 && py < 0) {
+      console.log('top left')
+    } else if (px > 0 && py > 0) {
+      console.log('down right')
+    } else if (px > 0 && py < 0) {
+      console.log('top right')
+    }
   }
 
+  function getTile(x: number, y: number, layer: Phaser.Tilemaps.TilemapLayer): Phaser.Tilemaps.Tile | undefined {
+    const tile: Phaser.Tilemaps.Tile = layer.getTileAtWorldXY(x, y)
+    if (!tile) return undefined;
+    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
 })
-
-function getTile(x: number, y: number, layer: Phaser.Tilemaps.TilemapLayer): Phaser.Tilemaps.Tile | undefined {
-  const tile: Phaser.Tilemaps.Tile = layer.getTileAtWorldXY(x, y)
-
-  if (!tile) {
-    return undefined
-  }
-
-  return tile
-}
 </script>