moved player logic back into player component

src/components/World.vue

@@ -1,12 +1,11 @@
 <template>
-  <TilemapLayer ref="tilemapLayer" :tilemap="map" :layerIndex="0" :tileset="data" />
+  <TilemapLayer ref="tilemapLayer" :tilemap="map" :layerIndex="0" :cull-padding-x="5" :cull-padding-y="5" :tileset="data" />
-<!--  <Sprite ref="player" texture="player" :x="playerX" :y="playerY" />-->
+  <Player />
 </template>
 
 <script setup>
 import { Sprite, TilemapLayer, useScene, useGame } from 'phavuer'
 import Player from '@/components/player/Player.vue'
-import { ref } from 'vue'
 import config from '@/config'
 
 const scene = useScene()
@@ -24,8 +23,6 @@ const { width, height } = scene.cameras.main;
 const map = new Phaser.Tilemaps.Tilemap(scene, mapData);
 const tileset = map.addTilesetImage('default', 'tiles');
 const layer = map.createBlankLayer('layer', tileset, -config.tile_size.x + width / 2, height / 2 - (config.tile_size.x * tileSizeWidth * 0.25));
-layer.cullPaddingX = 20;
-layer.cullPaddingY = 20;
 
 const game = useGame();
 
@@ -47,40 +44,4 @@ data.forEach((row, y) => {
     layer.putTileAt(tile, x, y);
   });
 });
-
-
-const player = ref();
-let playerX = ref(0)
-let playerY = ref(0)
-
-// W,S,A,D
-// Listen for keydown events
-scene.input.keyboard.on('keydown', function (event) {
-  // Check which key was pressed
-  switch (event.code) {
-    case 'KeyW': // Move up and to the left
-      playerX.value -= config.tile_size.x / 2;
-      playerY.value -= config.tile_size.y / 2;
-      break;
-    case 'KeyS': // Move down and to the right
-      playerX.value += config.tile_size.x / 2;
-      playerY.value += config.tile_size.y / 2;
-      break;
-    case 'KeyA': // Move down and to the left
-      playerX.value -= config.tile_size.x / 2;
-      playerY.value += config.tile_size.y / 2;
-      break;
-    case 'KeyD': // Move up and to the right
-      playerX.value += config.tile_size.x / 2;
-      playerY.value -= config.tile_size.y / 2;
-      break;
-  }
-});
-
-/**
- * 1 tile is 64x32
- * the map is 10x10
- * so the map is 640x320
- */
-
 </script>

src/components/player/Player.vue

@@ -1,12 +1,67 @@
 <template>
-
+  <Sprite ref="player" texture="player" :x="playerX" :y="playerY" />
 </template>
 
 <script setup>
-import { Sprite, useScene, Body } from 'phavuer'
+import { Sprite, useScene } from 'phavuer'
 import { ref } from 'vue'
+import config from '@/config.js'
 
 const scene = useScene()
 
+const player = ref();
+let playerX = ref(0)
+let playerY = ref(0)
 
+// W,S,A,D
+// Listen for keydown events
+scene.input.keyboard.on('keydown', function (event) {
+  // Check which key was pressed
+  switch (event.code) {
+    case 'KeyW': // Move up and to the left
+      playerX.value -= config.tile_size.x / 2;
+      playerY.value -= config.tile_size.y / 2;
+      break;
+    case 'KeyS': // Move down and to the right
+      playerX.value += config.tile_size.x / 2;
+      playerY.value += config.tile_size.y / 2;
+      break;
+    case 'KeyA': // Move down and to the left
+      playerX.value -= config.tile_size.x / 2;
+      playerY.value += config.tile_size.y / 2;
+      break;
+    case 'KeyD': // Move up and to the right
+      playerX.value += config.tile_size.x / 2;
+      playerY.value -= config.tile_size.y / 2;
+      break;
+  }
+});
+
+scene.input.on('pointerdown', function (pointer) {
+  // Convert pointer coordinates to tile coordinates
+  const tileX = Math.floor(pointer.x / config.tile_size.x);
+  const tileY = Math.floor(pointer.y / config.tile_size.y);
+
+  // Convert tile coordinates to world coordinates (center of the tile)
+  const worldX = tileX * config.tile_size.x + config.tile_size.x / 2;
+  const worldY = tileY * config.tile_size.y + config.tile_size.y / 2;
+
+  // Update the sprite's position
+  playerX.value = gridToScreen(tileX, tileY, config.tile_size).screenX;
+  playerY.value = gridToScreen(tileX, tileY, config.tile_size).screenY;
+});
+
+/**
+ * 1 tile is 64x32
+ * the map is 10x10
+ * so the map is 640x320
+ */
+
+function gridToScreen(x, y, tileSize) {
+  // Convert grid coordinates to screen coordinates
+  const screenX = x * tileSize.x + tileSize.x / 2;
+  const screenY = y * tileSize.y + tileSize.y / 2;
+
+  return { screenX, screenY };
+}
 </script>