player movement (WIP)

src/components/World.vue

@@ -1,6 +1,6 @@
 <template>
   <TilemapLayer ref="tilemapLayer" :tilemap="map" :layerIndex="0" :cull-padding-x="10" :cull-padding-y="10" :tileset="data" />
-  <Player />
+  <Player :layer="layer" />
   <Controls :layer="layer" />
 </template>
 

src/components/sprites/player/Player.vue

@@ -5,8 +5,42 @@
 <script lang="ts" setup>
 import { Sprite, useScene } from 'phavuer'
 import { ref } from 'vue'
+import config from '@/config'
+
+const props = defineProps({
+  layer: Phaser.Tilemaps.TilemapLayer
+})
 
 const scene = useScene()
+const pointer_tile = ref(undefined);
 const x = ref(0);
 const y = ref(0);
+
+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) {
+
+    // Convert tile coordinates to world coordinates
+    const worldPoint = props.layer.tileToWorldXY(pointer_tile.value.x, pointer_tile.value.y);
+    x.value = worldPoint.x + config.tile_size.y;
+    y.value = worldPoint.y;
+  }
+}
+scene.input.on(Phaser.Input.Events.POINTER_DOWN, onPointerClick);
+
+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;
+  }
+
+  return tile;
+}
 </script>