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

src/components/World.vue

@@ -2,8 +2,8 @@
   <TilemapLayer v-if="zoneStore.isLoaded" :tilemap="tileMap" :tileset="zoneStore.getTiles" ref="tilemapLayer" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" />
   <Controls :layer="layer" />
   <Character :layer="layer" />
-  <Container v-if="zoneStore.isLoaded && zoneStore.getPlayers.length > 0">
+  <Container v-if="zoneStore.isLoaded && zoneStore.getCharacters.length > 0">
-    <Character :layer="layer" v-for="player in zoneStore.getPlayers" :key="player.id" :player="player" />
+    <Character :layer="layer" v-for="character in zoneStore.getCharacters" :key="character.id" :character="character" />
   </Container>
 </template>
 
@@ -78,10 +78,6 @@ socket.getConnection.on('character:zone:load', (data) => {
 // Listen for player join events
 socket.getConnection.on('character:zone:character_join', (data: CharacterType) => {
   console.log('character:zone:character_join', data)
-  if (data.id === socket.getConnection.character.id) {
-    console.log('self')
-    return
-  }
   zoneStore.addCharacter(data)
 })
 

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: {
+  character: {
-    type: Object,
+    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) {
+if (props.character !== undefined) {
-  console.log('player', props.player)
+  console.log('character', props.character)
-  position.x = props.player?.coords.x
+  position.x = props.character?.position_x
-  position.y = props.player?.coords.y
+  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) => {
+socket.getConnection.on('character:move', (data: any) => {
-  console.log('player_moved', data)
+  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.x = data.position_x
-  position.y = data.coords.y
+  position.y = data.position_y
 })
 
 function getTile(x: number, y: number, layer: Phaser.Tilemaps.TilemapLayer): Phaser.Tilemaps.Tile | undefined {

src/engine/Map/IMap.ts

@@ -1,4 +1,4 @@
-import Player from '../Player/Player'
+import type { Character } from '@/types'
 
 export default interface IMap {
   readonly id: number
@@ -6,5 +6,5 @@ export default interface IMap {
   width: number
   height: number
   data: any
-  players: Array<Player> | []
+  characters: Array<Character> | []
 }

src/engine/Map/Map.ts

@@ -1,5 +1,6 @@
 import type IMap from '@/engine/Map/IMap'
 import Player from '@/engine/Player/Player'
+import type { Character } from '@/types'
 
 export default class Map implements IMap {
   id: number
@@ -7,31 +8,28 @@ export default class Map implements IMap {
   width: number
   height: number
   data: any
-  players: Array<Player> | []
+  characters: Character[]
 
-  constructor(id: number, name: string, width: number, height: number, data: any, players: Array<Player> | []) {
+  constructor(id: number, name: string, width: number, height: number, data: any, characters: Character[]) {
     this.id = id
     this.name = name
     this.width = width
     this.height = height
     this.data = data
-    this.players = players
+    this.characters = characters
   }
 
-  public addPlayer(player: Player) {
+  public addCharacter(character: Character) {
-    // @ts-ignore
+    this.characters.push(character)
-    this.players.push(player)
   }
 
-  public removePlayer(player: Player) {
+  public removeCharacter(character: Character) {
-    this.players = this.players.filter((p) => p.id !== player.id)
+    this.characters = this.characters.filter((c: Character) => c.id !== character.id)
   }
 
-  public movePlayer(player: Player, x: number, y: number) {
+  public moveCharacter(character: Character, x: number, y: number) {
-    const playerIndex = this.players.findIndex((p) => p.id === player.id)
+    const index = this.characters.findIndex((c: Character) => c.id === character.id)
-    if (playerIndex !== -1) {
+    this.characters[index].position_x = x
-      this.players[playerIndex].coords.x = x
+    this.characters[index].position_y = y
-      this.players[playerIndex].coords.y = y
-    }
   }
 }