From 8227dfe4b3359cfd0bd1a8ceb0477256f0025f0e Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Mon, 10 Jun 2024 15:11:14 +0200
Subject: [PATCH] improved tile finding logic, improved size and position of
 the character nickname and healthbar

---
 package-lock.json                    | 28 ++++++-------
 src/components/sprites/Character.vue | 60 ++++++++++++++--------------
 src/services/zone.ts                 | 15 +++++++
 3 files changed, 59 insertions(+), 44 deletions(-)
 create mode 100644 src/services/zone.ts

diff --git a/package-lock.json b/package-lock.json
index 55e8ce6..f7d9b25 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2134,19 +2134,19 @@
       }
     },
     "node_modules/@volar/language-core": {
-      "version": "2.3.0-alpha.15",
-      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.3.0-alpha.15.tgz",
-      "integrity": "sha512-uSfn1Dsl1w9o2aN9nnS6N/4FcjSbmpY6P/ypfW4kRhasEyICstu4swIz2joNR6532R02JwJY9Ta0pxRmXbBOqw==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.3.0.tgz",
+      "integrity": "sha512-pvhL24WUh3VDnv7Yw5N1sjhPtdx7q9g+Wl3tggmnkMcyK8GcCNElF2zHiKznryn0DiUGk+eez/p2qQhz+puuHw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@volar/source-map": "2.3.0-alpha.15"
+        "@volar/source-map": "2.3.0"
       }
     },
     "node_modules/@volar/source-map": {
-      "version": "2.3.0-alpha.15",
-      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.3.0-alpha.15.tgz",
-      "integrity": "sha512-DQr3FwhRxtxX4W6BoJkwajWjj6BAF5H/SgtzFaUP9z8txn6Y5oFxZPPDG+3Xwu3pTV3gvVlE7AL5E/G1jUr5Yg==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.3.0.tgz",
+      "integrity": "sha512-G/228aZjAOGhDjhlyZ++nDbKrS9uk+5DMaEstjvzglaAw7nqtDyhnQAsYzUg6BMP9BtwZ59RIw5HGePrutn00Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -2154,13 +2154,13 @@
       }
     },
     "node_modules/@volar/typescript": {
-      "version": "2.3.0-alpha.15",
-      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.3.0-alpha.15.tgz",
-      "integrity": "sha512-sTzUyqGC1wkzVyY0XZBO5smCPDRvIqxlMTUw7bZebuD/7sGaVfyk9ryE29aG6CLpuYDev/ugpQsKoFVhFaQQ8A==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.3.0.tgz",
+      "integrity": "sha512-PtUwMM87WsKVeLJN33GSTUjBexlKfKgouWlOUIv7pjrOnTwhXHZNSmpc312xgXdTjQPpToK6KXSIcKu9sBQ5LQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@volar/language-core": "2.3.0-alpha.15",
+        "@volar/language-core": "2.3.0",
         "path-browserify": "^1.0.1",
         "vscode-uri": "^3.0.8"
       }
@@ -2942,9 +2942,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001629",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001629.tgz",
-      "integrity": "sha512-c3dl911slnQhmxUIT4HhYzT7wnBK/XYpGnYLOj4nJBaRiw52Ibe7YxlDaAeRECvA786zCuExhxIUJ2K7nHMrBw==",
+      "version": "1.0.30001632",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001632.tgz",
+      "integrity": "sha512-udx3o7yHJfUxMLkGohMlVHCvFvWmirKh9JAH/d7WOLPetlH+LTL5cocMZ0t7oZx/mdlOWXti97xLZWc8uURRHg==",
       "dev": true,
       "funding": [
         {
diff --git a/src/components/sprites/Character.vue b/src/components/sprites/Character.vue
index 0266c27..def2b10 100644
--- a/src/components/sprites/Character.vue
+++ b/src/components/sprites/Character.vue
@@ -1,52 +1,53 @@
 <template>
   <Container>
-    <Rectangle 
-      :x="props.character?.position_x"
-      :y="props.character?.position_y" 
+    <Rectangle
+      :x="tileToWorldXY(layer, props.character?.position_x, props.character?.position_y).position_x"
+      :y="tileToWorldXY(layer, props.character?.position_x, props.character?.position_y).position_y"
       :origin-x="0.5"
-      :origin-y="12"
+      :origin-y="10.5"
       :fillColor="0xFFFFFF"
       :width="74"
       :height="8"
     >
       <Rectangle
-        :x="props.character?.position_x"
-        :y="props.character?.position_y" 
+        :x="tileToWorldXY(layer, props.character?.position_x, props.character?.position_y).position_x"
+        :y="tileToWorldXY(layer, props.character?.position_x, props.character?.position_y).position_y"
         :origin-x="0.5"
-        :origin-y="23.5"
+        :origin-y="20.5"
         :fillColor="0x09ad19"
         :width="70"
         :height="4"
       />
     </Rectangle>
     <Text
+      @create="createText"
       :text="props.character?.name"
-      :x="props.character?.position_x"
-      :y="props.character?.position_y" 
+      :x="tileToWorldXY(layer, props.character?.position_x, props.character?.position_y).position_x"
+      :y="tileToWorldXY(layer, props.character?.position_x, props.character?.position_y).position_y"
       :origin-x="0.5"
-      :origin-y="3.5"
+      :origin-y="4.5"
       :style="{
         fontFamily: 'Helvetica, Arial',
         color: '#FFF',
-        fontSize: '1rem',
-        strokeThickness: 4,
-        stroke: '#000'
+        fontSize: '14px',
       }"
     />
-    <Sprite ref="sprite" :x="props.character?.position_x" :y="props.character?.position_y" play="walk"  />
+    <Sprite
+      ref="sprite"
+      :x="tileToWorldXY(layer, props.character?.position_x, props.character?.position_y).position_x"
+      :y="tileToWorldXY(layer, props.character?.position_x, props.character?.position_y).position_y"
+      play="walk" />
   </Container>
 </template>
 
 <script lang="ts" setup>
 import { Container, Rectangle, Sprite, Text, useScene } from 'phavuer'
-import { onBeforeMount, onMounted, reactive, type Ref, ref, watch } from 'vue'
-import config from '@/config'
+import { onMounted, ref } from 'vue'
 import { useSocketStore } from '@/stores/socket'
 import { type Character as CharacterT } from '@/types'
-import { useZoneStore } from '@/stores/zone'
+import { getTile, tileToWorldXY } from '@/services/zone'
 
 const socket = useSocketStore()
-const zone = useZoneStore();
 
 const props = defineProps({
   layer: Phaser.Tilemaps.TilemapLayer,
@@ -55,7 +56,10 @@ const props = defineProps({
 
 const scene = useScene()
 const isSelf = props.character.id === socket.character.id;
-const pointer_tile = ref()
+
+const createText = (text: Phaser.GameObjects.Text) => {
+text.setLetterSpacing(1.5);
+}
 
 onMounted(() => {
   if (isSelf) setupSelf()
@@ -72,14 +76,13 @@ 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) as Phaser.Tilemaps.Tile
-  if (pointer_tile.value) {
-    const worldPoint = props.layer.tileToWorldXY(pointer_tile.value.x, pointer_tile.value.y)
-    const position_x = worldPoint.x + config.tile_size.y
-    const position_y = worldPoint.y
-    socket.getConnection.emit('character:move', { position_x, position_y })
+  const pointer_tile = getTile(px, py, props.layer) as Phaser.Tilemaps.Tile
+  if (!pointer_tile) {
+    return;
   }
 
+  socket.getConnection.emit('character:move', { position_x: pointer_tile.x, position_y: pointer_tile.y })
+
   //Directions for player sprites + animations
   if (px < 0 && py > 0) {
     console.log('down left')
@@ -92,11 +95,8 @@ function onPointerClick(pointer: Phaser.Input.Pointer) {
   }
 }
 
-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 undefined;
-  return tile
-}
+// spacing
+
 
 /**
  * Resources:
diff --git a/src/services/zone.ts b/src/services/zone.ts
new file mode 100644
index 0000000..793ed13
--- /dev/null
+++ b/src/services/zone.ts
@@ -0,0 +1,15 @@
+import config from '@/config'
+
+export 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 undefined;
+  return tile
+}
+
+export function tileToWorldXY(layer: Phaser.Tilemaps.TilemapLayer, pos_x: number, pos_y: number) {
+  const worldPoint = layer.tileToWorldXY(pos_x, pos_y)
+  const position_x = worldPoint.x + config.tile_size.y
+  const position_y = worldPoint.y
+
+  return { position_x, position_y }
+}
\ No newline at end of file