location work

package-lock.json

@@ -21,6 +21,7 @@
         "@vue/eslint-config-typescript": "^12.0.0",
         "@vue/test-utils": "^2.4.5",
         "@vue/tsconfig": "^0.5.1",
+        "easystarjs": "^0.4.4",
         "eslint": "^8.49.0",
         "eslint-plugin-vue": "^9.17.0",
         "jsdom": "^24.0.0",
@@ -1624,9 +1625,9 @@
       "dev": true
     },
     "node_modules/@types/node": {
-      "version": "20.12.7",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.7.tgz",
-      "integrity": "sha512-wq0cICSkRLVaf3UGLMGItu/PtdY7oaXaI/RVU+xliKVOtRna3PRY57ZDfztpDL0n11vfymMUnXv8QwYCO7L1wg==",
+      "version": "20.12.8",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.12.8.tgz",
+      "integrity": "sha512-NU0rJLJnshZWdE/097cdCBbyW1h4hEg0xpovcoAQYHl8dnEyp/NAOiE45pvc+Bd1Dt+2r94v2eGFpQJ4R7g+2w==",
       "dev": true,
       "dependencies": {
         "undici-types": "~5.26.4"
@@ -2901,6 +2902,15 @@
       "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
       "dev": true
     },
+    "node_modules/easystarjs": {
+      "version": "0.4.4",
+      "resolved": "https://registry.npmjs.org/easystarjs/-/easystarjs-0.4.4.tgz",
+      "integrity": "sha512-ZSt0TkB8xuIXRIrKsM3jkmk1/cZUtyvf0DqOXf6wuKq9slx9UA5kkLtiaWhtmOQFJFKdabbvXwk6RO0znghArQ==",
+      "dev": true,
+      "dependencies": {
+        "heap": "0.2.6"
+      }
+    },
     "node_modules/editorconfig": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/editorconfig/-/editorconfig-1.0.4.tgz",
@@ -3610,6 +3620,12 @@
         "he": "bin/he"
       }
     },
+    "node_modules/heap": {
+      "version": "0.2.6",
+      "resolved": "https://registry.npmjs.org/heap/-/heap-0.2.6.tgz",
+      "integrity": "sha512-MzzWcnfB1e4EG2vHi3dXHoBupmuXNZzx6pY6HldVS55JKKBoq3xOyzfSaZRkJp37HIhEYC78knabHff3zc4dQQ==",
+      "dev": true
+    },
     "node_modules/hookable": {
       "version": "5.5.3",
       "resolved": "https://registry.npmjs.org/hookable/-/hookable-5.5.3.tgz",

package.json

@@ -27,6 +27,7 @@
     "@vue/eslint-config-typescript": "^12.0.0",
     "@vue/test-utils": "^2.4.5",
     "@vue/tsconfig": "^0.5.1",
+    "easystarjs": "^0.4.4",
     "eslint": "^8.49.0",
     "eslint-plugin-vue": "^9.17.0",
     "jsdom": "^24.0.0",

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <Login />
+  <Game />
 </template>
 
 <script setup lang="ts">

src/components/Game.vue

@@ -34,6 +34,7 @@ const preloadScene = (scene: Phaser.Scene) => {
    * Don't forget to check how intensive that operation is for performance
    */
   scene.load.image('tiles', '/assets/tiles/default.png');
+  scene.load.image('waypoint', '/assets/waypoint.png');
   scene.textures.addBase64('player', 'data:image/png;base64,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')
 }
 

src/components/World.vue

@@ -1,10 +1,10 @@
 <template>
   <TilemapLayer ref="tilemapLayer" :tilemap="map" :layerIndex="0" :cull-padding-x="50" :cull-padding-y="50" :tileset="data" />
-  <Player />
+  <Player :layer="tilemapLayer" />
 </template>
 
 <script setup lang="ts">
-import { Sprite, TilemapLayer, useScene, useGame } from 'phavuer'
+import { refObj, TilemapLayer, useScene } from 'phavuer'
 import Player from '@/components/player/Player.vue'
 import config from '@/config'
 
@@ -24,11 +24,7 @@ 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));
 
-const tilemapLayer = (t: Phaser.Tilemaps.TilemapLayer) => {
-  // t.setCullPadding(50,50);
-}
-
-const game = useGame();
+const tilemapLayer = refObj();
 
 const data = [
   [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ],

src/components/player/Player.vue

@@ -1,11 +1,12 @@
 <template>
   <Sprite ref="sprite" texture="player" :x :y />
+  <Image ref="waypoint" texture="waypoint" :x="waypoint_x" :y="waypoint_y" :visible="waypoint_visible" />
 </template>
 
-<script setup>
-import { Sprite, useScene } from 'phavuer'
+<script lang="ts" setup>
+import { Image, onPreUpdate, refObj, Sprite, useScene } from 'phavuer'
 import { ref } from 'vue'
-import config from '@/config.js'
+import config from '@/config'
 
 /**
  * 1 tile is 64x32
@@ -15,33 +16,56 @@ import config from '@/config.js'
 
 // const props = defineProps({
 //   x: Number,
-//   y: Number
+//    y: Number
 // })
-const scene = useScene()
 
+const props = defineProps({
+  layer: Phaser.Tilemaps.TilemapLayer
+})
+const scene = useScene()
+const waypoint = refObj();
 const x = ref(0);
 const y = ref(0);
+const current_tile = ref(undefined);
 
-const sprite = v => {
-  v.object.add.graphics({ lineStyle: { color: 0xffff00, width: 2, alpha: 0.5 } });
+const waypoint_visible = ref(false);
+const waypoint_x = ref(0);
+const waypoint_y = ref(0);
+
+const onPointerMove = (e: Phaser.Input.Pointer) => {
+  const px = scene.cameras.main.worldView.x + e.x - 32;
+  const py = scene.cameras.main.worldView.y + e.y;
+
+  console.log(px, py);
+
+  current_tile.value = getTile(px, py, props.layer);
+  waypoint_visible.value = true;
+
+  if (current_tile.value !== undefined) {
+    waypoint_x.value = current_tile.value.pixelX;
+    waypoint_y.value = current_tile.value.pixelY + 32;
+  }
+};
+
+onPreUpdate(() => {
+
+})
+
+scene.input.on(Phaser.Input.Events.POINTER_MOVE, onPointerMove);
+
+function getTile (x: number, y: number, layer: Phaser.Tilemaps.TilemapLayer): Phaser.Tilemaps.Tile | undefined {
+  const tile: Phaser.Tilemaps.Tile = layer.getTileAtWorldXY(x, y);
+  if (tile) return tile;
+  else return undefined;
 }
 
-scene.input.on('pointerdown', function (pointer) {
-  const { x: mapX, y: mapY } = getTileCoordinates(pointer.x, pointer.y);
-  x.value = mapX * config.tile_size.x;
-  y.value = mapY * config.tile_size.y;
-  sprite.value.x = x.value;
-  sprite.value.y = y.value;
-});
+function getTileAt (iX: number, iY: number, layer: Phaser.Tilemaps.TilemapLayer): Phaser.Tilemaps.Tile | undefined {
+  const tile: Phaser.Tilemaps.Tile = layer.getTileAt(iX, iY);
+  if (tile) return tile;
+  else return undefined;
+}
 
-// a function that translates click coordinates to map tile coordinates
-function getTileCoordinates(x, y) {
-  const tileWidth = config.tile_size.x;
-  const tileHeight = config.tile_size.y;
-  const mapWidth = 10;
-  const mapHeight = 10;
-  const mapX = Math.floor((x - tileWidth / 2) / tileWidth);
-  const mapY = Math.floor((y - tileHeight / 2) / tileHeight);
-  return { x: mapX, y: mapY };
+function getDepth(tile: Phaser.Tilemaps.Tile): number {
+  return 32;
 }
 </script>