Added better security for character loading, worked on zone joining and moving logic

src/components/sprites/Character.vue

@@ -1,7 +1,7 @@
 <template>
   <Container>
     <Text
-      :text="props.player?.name"
+      :text="props.character?.name"
       :x="position.x - 50"
       :y="position.y - 80"
       :style="{
@@ -22,13 +22,14 @@ import { Container, onPostUpdate, onPreUpdate, Sprite, Text, useScene } from 'ph
 import { reactive, type Ref, ref } from 'vue'
 import config from '@/config'
 import { useSocketStore } from '@/stores/socket'
+import {type Character as CharacterT } from '@/types'
 
 const socket = useSocketStore()
 
 const props = defineProps({
   layer: Phaser.Tilemaps.TilemapLayer,
-  player: {
-    type: Object,
+  character: {
+    type: Object as () => CharacterT | undefined,
     default: undefined
   }
 })
@@ -41,10 +42,10 @@ const scene = useScene()
 
 const position = reactive({ x: 0, y: 0 })
 
-if (props.player !== undefined) {
-  console.log('player', props.player)
-  position.x = props.player?.coords.x
-  position.y = props.player?.coords.y
+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)
@@ -74,20 +75,20 @@ function onPointerClick(pointer: Phaser.Input.Pointer) {
   }
 }
 
-if (!props.player) {
+if (!props.character) {
   scene.input.on(Phaser.Input.Events.POINTER_UP, onPointerClick)
 }
 
-socket.getConnection.on('player_moved', (data: any) => {
-  console.log('player_moved', data)
+socket.getConnection.on('character:move', (data: any) => {
+  console.log('character moved', data)
 
-  if (data.id !== props.player?.id) {
+  if (data.id !== props.character?.id) {
     console.log('not you')
     return
   }
 
-  position.x = data.coords.x
-  position.y = data.coords.y
+  position.x = data.position_x
+  position.y = data.position_y
 })
 
 function getTile(x: number, y: number, layer: Phaser.Tilemaps.TilemapLayer): Phaser.Tilemaps.Tile | undefined {