npm update, player movement logic

src/components/World.vue

@@ -46,19 +46,38 @@ scene.cameras.main.centerOn(centerX, centerY)
 const mapStore = useMapStore();
 const socket = useSocketStore();
 
+// Watch for changes in the mapStore and update the layer
 watch (() => mapStore.loaded, () => {
   mapStore.getTiles.forEach((row, y) => row.forEach((tile, x) => layer.putTileAt(tile, x, y)));
 }, { deep: true })
 
+
+// Load the map from the server
 onBeforeMount(() => {
   socket.socket?.emit('get_map');
 })
 
+// Listen for the map event from the server and load the map
 socket.socket?.on('map', (data) => {
   mapStore.loadTiles(data.tiles)
+
+
+  /**
+   * @TODO
+   * bug , when 2nd player joins, the first player is not added to the map
+   */
+
+  console.log(data.players);
+
+  console.log(data.players[1]); // key is user id
+
+  // remove self from the players list
+  delete data.players[socket.socket?.id];
+
   mapStore.addPlayers(data.players);
 })
 
+// Listen for player join events
 socket.socket?.on('player_join', (data) => {
   console.log('player_join', data)
   mapStore.addPlayer(data);

src/components/sprites/player/Player.vue

@@ -48,11 +48,21 @@ function onPointerClick(pointer: Phaser.Input.Pointer) {
   }
 }
 
-/**
- * @BUG
- * when this component is spawned multiple times, the event listener is also added multiple times
- */
-scene.input.on(Phaser.Input.Events.POINTER_UP, onPointerClick);
+if (!props.player) {
+  scene.input.on(Phaser.Input.Events.POINTER_UP, onPointerClick);
+}
+
+socket.socket?.on('player_moved', (data) => {
+  console.log('player_moved', data);
+
+  if (data.id !== props.player?.id) {
+    console.log('not you');
+    return;
+  }
+
+  position.x = data.coords.x;
+  position.y = data.coords.y;
+})
 
 function getTile (x: number, y: number, layer: Phaser.Tilemaps.TilemapLayer): Phaser.Tilemaps.Tile | undefined {
   const tile: Phaser.Tilemaps.Tile = layer.getTileAtWorldXY(x, y);