From 731edba4bfd4c0d2b462e46bab05b7a49454a779 Mon Sep 17 00:00:00 2001
From: root <root@xanax.lol>
Date: Wed, 1 May 2024 23:49:11 +0200
Subject: [PATCH] location work

---
 package-lock.json                |  22 ++++++++--
 package.json                     |   1 +
 public/assets/waypoint.png       | Bin 0 -> 2192 bytes
 src/App.vue                      |   2 +-
 src/components/Game.vue          |   1 +
 src/components/World.vue         |  10 ++---
 src/components/player/Player.vue |  70 +++++++++++++++++++++----------
 src/{config.js => config.ts}     |   0
 src/stores/map.ts                |   0
 9 files changed, 72 insertions(+), 34 deletions(-)
 create mode 100644 public/assets/waypoint.png
 rename src/{config.js => config.ts} (100%)
 create mode 100644 src/stores/map.ts

diff --git a/package-lock.json b/package-lock.json
index 06b3a31..98b7f99 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index deef89c..a0f6667 100644
--- a/package.json
+++ b/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",
diff --git a/public/assets/waypoint.png b/public/assets/waypoint.png
new file mode 100644
index 0000000000000000000000000000000000000000..7fcd1fb791c19dd8a40e8107f6c00450b865258c
GIT binary patch
literal 2192
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
SN&oTy0000<MNUMnLSTZQ@DEr3

literal 0
HcmV?d00001

diff --git a/src/App.vue b/src/App.vue
index 0dfe2f8..974f8ec 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <Login />
+  <Game />
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/Game.vue b/src/components/Game.vue
index 27474d8..510add6 100644
--- a/src/components/Game.vue
+++ b/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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')
 }
 
diff --git a/src/components/World.vue b/src/components/World.vue
index 7900213..6d242f3 100644
--- a/src/components/World.vue
+++ b/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 ],
diff --git a/src/components/player/Player.vue b/src/components/player/Player.vue
index 62dbecd..f0f698b 100644
--- a/src/components/player/Player.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/config.js b/src/config.ts
similarity index 100%
rename from src/config.js
rename to src/config.ts
diff --git a/src/stores/map.ts b/src/stores/map.ts
new file mode 100644
index 0000000..e69de29