npm update, modal bug fix, separated logics for easier maintainability, modal fe bugfix

package-lock.json

@@ -1436,9 +1436,9 @@
       }
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.19.0",
+      "version": "4.19.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.19.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.19.1.tgz",
-      "integrity": "sha512-JlPfZ/C7yn5S5p0yKk7uhHTTnFlvTgLetl2VxqE518QgyM7C9bSfFTYvB/Q/ftkq0RIPY4ySxTz+/wKJ/dXC0w==",
+      "integrity": "sha512-XzqSg714++M+FXhHfXpS1tDnNZNpgxxuGZWlRG/jSj+VEPmZ0yg6jV4E0AL3uyBKxO8mO3xtOsP5mQ+XLfrlww==",
       "cpu": [
         "arm"
       ],
@@ -1450,9 +1450,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.19.0",
+      "version": "4.19.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.19.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.19.1.tgz",
-      "integrity": "sha512-RDxUSY8D1tWYfn00DDi5myxKgOk6RvWPxhmWexcICt/MEC6yEMr4HNCu1sXXYLw8iAsg0D44NuU+qNq7zVWCrw==",
+      "integrity": "sha512-thFUbkHteM20BGShD6P08aungq4irbIZKUNbG70LN8RkO7YztcGPiKTTGZS7Kw+x5h8hOXs0i4OaHwFxlpQN6A==",
       "cpu": [
         "arm64"
       ],
@@ -1464,9 +1464,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.19.0",
+      "version": "4.19.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.19.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.19.1.tgz",
-      "integrity": "sha512-emvKHL4B15x6nlNTBMtIaC9tLPRpeA5jMvRLXVbl/W9Ie7HhkrE7KQjvgS9uxgatL1HmHWDXk5TTS4IaNJxbAA==",
+      "integrity": "sha512-8o6eqeFZzVLia2hKPUZk4jdE3zW7LCcZr+MD18tXkgBBid3lssGVAYuox8x6YHoEPDdDa9ixTaStcmx88lio5Q==",
       "cpu": [
         "arm64"
       ],
@@ -1478,9 +1478,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.19.0",
+      "version": "4.19.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.19.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.19.1.tgz",
-      "integrity": "sha512-fO28cWA1dC57qCd+D0rfLC4VPbh6EOJXrreBmFLWPGI9dpMlER2YwSPZzSGfq11XgcEpPukPTfEVFtw2q2nYJg==",
+      "integrity": "sha512-4T42heKsnbjkn7ovYiAdDVRRWZLU9Kmhdt6HafZxFcUdpjlBlxj4wDrt1yFWLk7G4+E+8p2C9tcmSu0KA6auGA==",
       "cpu": [
         "x64"
       ],
@@ -1492,9 +1492,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.19.0",
+      "version": "4.19.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.19.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.19.1.tgz",
-      "integrity": "sha512-2Rn36Ubxdv32NUcfm0wB1tgKqkQuft00PtM23VqLuCUR4N5jcNWDoV5iBC9jeGdgS38WK66ElncprqgMUOyomw==",
+      "integrity": "sha512-MXg1xp+e5GhZ3Vit1gGEyoC+dyQUBy2JgVQ+3hUrD9wZMkUw/ywgkpK7oZgnB6kPpGrxJ41clkPPnsknuD6M2Q==",
       "cpu": [
         "arm"
       ],
@@ -1506,9 +1506,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.19.0",
+      "version": "4.19.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.19.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.19.1.tgz",
-      "integrity": "sha512-gJuzIVdq/X1ZA2bHeCGCISe0VWqCoNT8BvkQ+BfsixXwTOndhtLUpOg0A1Fcx/+eA6ei6rMBzlOz4JzmiDw7JQ==",
+      "integrity": "sha512-DZNLwIY4ftPSRVkJEaxYkq7u2zel7aah57HESuNkUnz+3bZHxwkCUkrfS2IWC1sxK6F2QNIR0Qr/YXw7nkF3Pw==",
       "cpu": [
         "arm"
       ],
@@ -1520,9 +1520,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.19.0",
+      "version": "4.19.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.19.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.19.1.tgz",
-      "integrity": "sha512-0EkX2HYPkSADo9cfeGFoQ7R0/wTKb7q6DdwI4Yn/ULFE1wuRRCHybxpl2goQrx4c/yzK3I8OlgtBu4xvted0ug==",
+      "integrity": "sha512-C7evongnjyxdngSDRRSQv5GvyfISizgtk9RM+z2biV5kY6S/NF/wta7K+DanmktC5DkuaJQgoKGf7KUDmA7RUw==",
       "cpu": [
         "arm64"
       ],
@@ -1534,9 +1534,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.19.0",
+      "version": "4.19.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.19.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.19.1.tgz",
-      "integrity": "sha512-GlIQRj9px52ISomIOEUq/IojLZqzkvRpdP3cLgIE1wUWaiU5Takwlzpz002q0Nxxr1y2ZgxC2obWxjr13lvxNQ==",
+      "integrity": "sha512-89tFWqxfxLLHkAthAcrTs9etAoBFRduNfWdl2xUs/yLV+7XDrJ5yuXMHptNqf1Zw0UCA3cAutkAiAokYCkaPtw==",
       "cpu": [
         "arm64"
       ],
@@ -1548,9 +1548,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-      "version": "4.19.0",
+      "version": "4.19.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.19.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.19.1.tgz",
-      "integrity": "sha512-N6cFJzssruDLUOKfEKeovCKiHcdwVYOT1Hs6dovDQ61+Y9n3Ek4zXvtghPPelt6U0AH4aDGnDLb83uiJMkWYzQ==",
+      "integrity": "sha512-PromGeV50sq+YfaisG8W3fd+Cl6mnOOiNv2qKKqKCpiiEke2KiKVyDqG/Mb9GWKbYMHj5a01fq/qlUR28PFhCQ==",
       "cpu": [
         "ppc64"
       ],
@@ -1562,9 +1562,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.19.0",
+      "version": "4.19.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.19.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.19.1.tgz",
-      "integrity": "sha512-2DnD3mkS2uuam/alF+I7M84koGwvn3ZVD7uG+LEWpyzo/bq8+kKnus2EVCkcvh6PlNB8QPNFOz6fWd5N8o1CYg==",
+      "integrity": "sha512-/1BmHYh+iz0cNCP0oHCuF8CSiNj0JOGf0jRlSo3L/FAyZyG2rGBuKpkZVH9YF+x58r1jgWxvm1aRg3DHrLDt6A==",
       "cpu": [
         "riscv64"
       ],
@@ -1576,9 +1576,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.19.0",
+      "version": "4.19.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.19.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.19.1.tgz",
-      "integrity": "sha512-D6pkaF7OpE7lzlTOFCB2m3Ngzu2ykw40Nka9WmKGUOTS3xcIieHe82slQlNq69sVB04ch73thKYIWz/Ian8DUA==",
+      "integrity": "sha512-0cYP5rGkQWRZKy9/HtsWVStLXzCF3cCBTRI+qRL8Z+wkYlqN7zrSYm6FuY5Kd5ysS5aH0q5lVgb/WbG4jqXN1Q==",
       "cpu": [
         "s390x"
       ],
@@ -1590,9 +1590,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.19.0",
+      "version": "4.19.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.19.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.19.1.tgz",
-      "integrity": "sha512-HBndjQLP8OsdJNSxpNIN0einbDmRFg9+UQeZV1eiYupIRuZsDEoeGU43NQsS34Pp166DtwQOnpcbV/zQxM+rWA==",
+      "integrity": "sha512-XUXeI9eM8rMP8aGvii/aOOiMvTs7xlCosq9xCjcqI9+5hBxtjDpD+7Abm1ZhVIFE1J2h2VIg0t2DX/gjespC2Q==",
       "cpu": [
         "x64"
       ],
@@ -1604,9 +1604,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.19.0",
+      "version": "4.19.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.19.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.19.1.tgz",
-      "integrity": "sha512-HxfbvfCKJe/RMYJJn0a12eiOI9OOtAUF4G6ozrFUK95BNyoJaSiBjIOHjZskTUffUrB84IPKkFG9H9nEvJGW6A==",
+      "integrity": "sha512-V7cBw/cKXMfEVhpSvVZhC+iGifD6U1zJ4tbibjjN+Xi3blSXaj/rJynAkCFFQfoG6VZrAiP7uGVzL440Q6Me2Q==",
       "cpu": [
         "x64"
       ],
@@ -1618,9 +1618,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.19.0",
+      "version": "4.19.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.19.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.19.1.tgz",
-      "integrity": "sha512-HxDMKIhmcguGTiP5TsLNolwBUK3nGGUEoV/BO9ldUBoMLBssvh4J0X8pf11i1fTV7WShWItB1bKAKjX4RQeYmg==",
+      "integrity": "sha512-88brja2vldW/76jWATlBqHEoGjJLRnP0WOEKAUbMcXaAZnemNhlAHSyj4jIwMoP2T750LE9lblvD4e2jXleZsA==",
       "cpu": [
         "arm64"
       ],
@@ -1632,9 +1632,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.19.0",
+      "version": "4.19.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.19.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.19.1.tgz",
-      "integrity": "sha512-xItlIAZZaiG/u0wooGzRsx11rokP4qyc/79LkAOdznGRAbOFc+SfEdfUOszG1odsHNgwippUJavag/+W/Etc6Q==",
+      "integrity": "sha512-LdxxcqRVSXi6k6JUrTah1rHuaupoeuiv38du8Mt4r4IPer3kwlTo+RuvfE8KzZ/tL6BhaPlzJ3835i6CxrFIRQ==",
       "cpu": [
         "ia32"
       ],
@@ -1646,9 +1646,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.19.0",
+      "version": "4.19.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.19.0.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.19.1.tgz",
-      "integrity": "sha512-xNo5fV5ycvCCKqiZcpB65VMR11NJB+StnxHz20jdqRAktfdfzhgjTiJ2doTDQE/7dqGaV5I7ZGqKpgph6lCIag==",
+      "integrity": "sha512-2bIrL28PcK3YCqD9anGxDxamxdiJAxA+l7fWIwM5o8UqNy1t3d1NdAweO2XhA0KTDJ5aH1FsuiT5+7VhtHliXg==",
       "cpu": [
         "x64"
       ],
@@ -1660,9 +1660,9 @@
       ]
     },
     "node_modules/@rushstack/eslint-patch": {
-      "version": "1.10.3",
+      "version": "1.10.4",
-      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.10.3.tgz",
+      "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.10.4.tgz",
-      "integrity": "sha512-qC/xYId4NMebE6w/V33Fh9gWxLgURiNYgVNObbJl2LZv0GUUItCcCqC5axQSwRaAgaxl2mELq1rMzlswaQ0Zxg==",
+      "integrity": "sha512-WJgX9nzTqknM393q1QJDJmoW28kUfEnybeTfVNcNAPnIx210RXm2DiXiHzfNPJNIUUb1tJnz/l4QGtJ30PgWmA==",
       "dev": true,
       "license": "MIT"
     },
@@ -1928,9 +1928,9 @@
       "license": "ISC"
     },
     "node_modules/@vitejs/plugin-vue": {
-      "version": "5.1.0",
+      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.1.1.tgz",
-      "integrity": "sha512-QMRxARyrdiwi1mj3AW4fLByoHTavreXq0itdEW696EihXglf1MB3D4C2gBvE0jMPH29ZjC3iK8aIaUMLf4EOGA==",
+      "integrity": "sha512-sDckXxlHpMsjRQbAH9WanangrfrblsOd3pNifePs+FOHjJg1jfWq5L/P0PsBRndEt3nmdUnmvieP8ULDeX5AvA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -3200,9 +3200,9 @@
       "license": "MIT"
     },
     "node_modules/debug": {
-      "version": "4.3.5",
+      "version": "4.3.6",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.6.tgz",
-      "integrity": "sha512-pt0bNEmneDIvdL1Xsd9oDQ/wrQRkXDT4AUWlNZNPKvW5x/jyO9VFXkJUP07vQ2upmw5PlaITaPKc31jK13V+jg==",
+      "integrity": "sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==",
       "license": "MIT",
       "dependencies": {
         "ms": "2.1.2"
@@ -6069,9 +6069,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.19.0",
+      "version": "4.19.1",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.19.0.tgz",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.19.1.tgz",
-      "integrity": "sha512-5r7EYSQIowHsK4eTZ0Y81qpZuJz+MUuYeqmmYmRMl1nwhdmbiYqt5jwzf6u7wyOzJgYqtCRMtVRKOtHANBz7rA==",
+      "integrity": "sha512-K5vziVlg7hTpYfFBI+91zHBEMo6jafYXpkMlqZjg7/zhIG9iHqazBf4xz9AVdjS9BruRn280ROqLI7G3OFRIlw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -6085,22 +6085,22 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.19.0",
+        "@rollup/rollup-android-arm-eabi": "4.19.1",
-        "@rollup/rollup-android-arm64": "4.19.0",
+        "@rollup/rollup-android-arm64": "4.19.1",
-        "@rollup/rollup-darwin-arm64": "4.19.0",
+        "@rollup/rollup-darwin-arm64": "4.19.1",
-        "@rollup/rollup-darwin-x64": "4.19.0",
+        "@rollup/rollup-darwin-x64": "4.19.1",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.19.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.19.1",
-        "@rollup/rollup-linux-arm-musleabihf": "4.19.0",
+        "@rollup/rollup-linux-arm-musleabihf": "4.19.1",
-        "@rollup/rollup-linux-arm64-gnu": "4.19.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.19.1",
-        "@rollup/rollup-linux-arm64-musl": "4.19.0",
+        "@rollup/rollup-linux-arm64-musl": "4.19.1",
-        "@rollup/rollup-linux-powerpc64le-gnu": "4.19.0",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.19.1",
-        "@rollup/rollup-linux-riscv64-gnu": "4.19.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.19.1",
-        "@rollup/rollup-linux-s390x-gnu": "4.19.0",
+        "@rollup/rollup-linux-s390x-gnu": "4.19.1",
-        "@rollup/rollup-linux-x64-gnu": "4.19.0",
+        "@rollup/rollup-linux-x64-gnu": "4.19.1",
-        "@rollup/rollup-linux-x64-musl": "4.19.0",
+        "@rollup/rollup-linux-x64-musl": "4.19.1",
-        "@rollup/rollup-win32-arm64-msvc": "4.19.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.19.1",
-        "@rollup/rollup-win32-ia32-msvc": "4.19.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.19.1",
-        "@rollup/rollup-win32-x64-msvc": "4.19.0",
+        "@rollup/rollup-win32-x64-msvc": "4.19.1",
         "fsevents": "~2.3.2"
       }
     },

src/components/utilities/Controls.vue

@@ -4,23 +4,17 @@
 
 <script setup lang="ts">
 import { Image, useScene } from 'phavuer'
-import { onBeforeUnmount, ref, watch } from 'vue'
+import { onBeforeUnmount, ref } from 'vue'
-import { storeToRefs } from 'pinia'
-import config from '@/config'
-import { getTile, tileToWorldXY } from '@/services/zone'
 import { useZoneEditorStore } from '@/stores/zoneEditor'
-import { useGameStore } from '@/stores/game'
+import { usePointerHandlers } from '@/composables/usePointerHandlers'
+import { useCameraControls } from '@/composables/useCameraControls'
 
 interface Props {
   layer: Phaser.Tilemaps.TilemapLayer
 }
 
 const props = defineProps<Props>()
-
 const scene = useScene()
-const zoneEditorStore = useZoneEditorStore()
-const gameStore = useGameStore()
-const { tool } = storeToRefs(zoneEditorStore)
 
 const waypoint = ref({
   visible: false,
@@ -28,132 +22,9 @@ const waypoint = ref({
   y: 0
 })
 
-const cam = ref(scene.cameras.main)
+const { camera, isDragging } = useCameraControls(scene)
-const isDragging = ref(false)
+const { setupPointerHandlers, cleanupPointerHandlers } = usePointerHandlers(scene, props.layer, waypoint, camera, isDragging)
-let pointerDownTimer: number | null = null
-let pointerUpTimer: number | null = null
 
-const DRAG_DELAY = 150
+setupPointerHandlers()
-const MOVE_RESET_DELAY = 100
+onBeforeUnmount(cleanupPointerHandlers)
-const CAMERA_SPEED = 4 // Adjust this value to change arrow key movement speed
-
-function updateWaypoint(pointer: Phaser.Input.Pointer) {
-  const { x: px, y: py } = scene.cameras.main.getWorldPoint(pointer.x, pointer.y)
-  const pointerTile = getTile(px, py, props.layer)
-
-  if (!pointerTile) {
-    waypoint.value.visible = false
-    return
-  }
-
-  const worldPoint = tileToWorldXY(props.layer, pointerTile.x, pointerTile.y)
-  waypoint.value = {
-    visible: true,
-    x: worldPoint.position_x,
-    y: worldPoint.position_y + config.tile_size.y + 15
-  }
-}
-
-function dragZone(pointer: Phaser.Input.Pointer) {
-  if (!isDragging.value) return
-  const { x, y, prevPosition } = pointer
-  cam.value.scrollX -= (x - prevPosition.x) / cam.value.zoom
-  cam.value.scrollY -= (y - prevPosition.y) / cam.value.zoom
-}
-
-function handleZoom(pointer: Phaser.Input.Pointer, _: unknown, __: unknown, deltaY: number) {
-  if (pointer.event instanceof WheelEvent && pointer.event.altKey) {
-    scene.scale.setZoom(scene.scale.zoom - deltaY * 0.01)
-    cam.value = scene.cameras.main
-  }
-}
-
-function onPointerDown(pointer: Phaser.Input.Pointer) {
-  if (pointer.event instanceof MouseEvent && (pointer.event.altKey || tool.value === 'move')) {
-    pointerDownTimer = setTimeout(() => {
-      isDragging.value = true
-      gameStore.setMovingCamera(true)
-      scene.input.on(Phaser.Input.Events.POINTER_MOVE, dragZone)
-    }, DRAG_DELAY)
-  }
-}
-
-function onPointerUp() {
-  if (pointerDownTimer) {
-    clearTimeout(pointerDownTimer)
-    pointerDownTimer = null
-  }
-  isDragging.value = false
-  scene.input.off(Phaser.Input.Events.POINTER_MOVE, dragZone)
-
-  if (pointerUpTimer) {
-    clearTimeout(pointerUpTimer)
-  }
-
-  pointerUpTimer = setTimeout(() => {
-    gameStore.setMovingCamera(false)
-  }, MOVE_RESET_DELAY)
-}
-
-function handleKeyboardInput() {
-  const cursors = scene.input.keyboard?.createCursorKeys()
-
-  if (!cursors) return
-
-  if (cursors.left.isDown) {
-    cam.value.scrollX -= CAMERA_SPEED
-  }
-  if (cursors.right.isDown) {
-    cam.value.scrollX += CAMERA_SPEED
-  }
-  if (cursors.up.isDown) {
-    cam.value.scrollY -= CAMERA_SPEED
-  }
-  if (cursors.down.isDown) {
-    cam.value.scrollY += CAMERA_SPEED
-  }
-
-  if (cursors.left.isDown || cursors.right.isDown || cursors.up.isDown || cursors.down.isDown) {
-    gameStore.setMovingCamera(true)
-  } else {
-    gameStore.setMovingCamera(false)
-  }
-}
-
-function setupEventListeners() {
-  scene.input.on(Phaser.Input.Events.POINTER_MOVE, updateWaypoint)
-  scene.input.on(Phaser.Input.Events.POINTER_WHEEL, handleZoom)
-  scene.input.on(Phaser.Input.Events.POINTER_DOWN, onPointerDown)
-  scene.input.on(Phaser.Input.Events.POINTER_UP, onPointerUp)
-  scene.events.on(Phaser.Scenes.Events.UPDATE, handleKeyboardInput)
-}
-
-function cleanupEventListeners() {
-  scene.input.off(Phaser.Input.Events.POINTER_MOVE, updateWaypoint)
-  scene.input.off(Phaser.Input.Events.POINTER_MOVE, dragZone)
-  scene.input.off(Phaser.Input.Events.POINTER_DOWN, onPointerDown)
-  scene.input.off(Phaser.Input.Events.POINTER_UP, onPointerUp)
-  scene.input.off(Phaser.Input.Events.POINTER_WHEEL, handleZoom)
-  scene.events.off(Phaser.Scenes.Events.UPDATE, handleKeyboardInput)
-
-  if (pointerDownTimer) {
-    clearTimeout(pointerDownTimer)
-    pointerDownTimer = null
-  }
-  if (pointerUpTimer) {
-    clearTimeout(pointerUpTimer)
-    pointerUpTimer = null
-  }
-}
-
-watch(tool, (newTool) => {
-  if (newTool === 'move') {
-    scene.input.on(Phaser.Input.Events.POINTER_MOVE, dragZone)
-  } else {
-    scene.input.off(Phaser.Input.Events.POINTER_MOVE, dragZone)
-  }
-})
-
-setupEventListeners()
-onBeforeUnmount(cleanupEventListeners)
 </script>

src/components/utilities/Modal.vue

@@ -1,6 +1,6 @@
 <template>
   <Teleport to="body">
-    <div v-if="isModalOpenRef" class="fixed bg-gray-300/80 border-solid border-2 border-cyan-200 z-50 flex flex-col rounded-lg backdrop-blur-sm shadow-lg" :style="modalStyle">
+    <div v-if="isModalOpenRef" class="fixed bg-gray-300/80 border-solid border-2 border-cyan-200 z-50 flex flex-col backdrop-blur-sm shadow-lg" :style="modalStyle">
       <div @mousedown="startDrag" class="cursor-move p-2.5 flex justify-between items-center border-solid border-0 border-b border-cyan-200">
         <slot name="modalHeader" />
         <div class="flex gap-2.5">
@@ -76,6 +76,7 @@ let startHeight = 0
 let preFullScreenState = { x: 0, y: 0, width: 0, height: 0 }
 
 const modalStyle = computed(() => ({
+  borderRadius: isFullScreen.value ? '0' : '10px',
   top: isFullScreen.value ? '0' : `${y.value}px`,
   left: isFullScreen.value ? '0' : `${x.value}px`,
   width: isFullScreen.value ? '100vw' : `${width.value}px`,

src/components/utilities/zoneEditor/partials/Toolbar.vue

@@ -161,7 +161,7 @@ onBeforeUnmount(() => {
 function initKeyShortcuts(event: KeyboardEvent) {
   if (!zoneEditorStore.zone) return
 
-  // prevent if focussed on input
+  // prevent if focussed on composables
   if (document.activeElement?.tagName === 'INPUT') return
 
   if (event.key === 'm') {

src/composables/useCameraControls.ts

@@ -0,0 +1,46 @@
+import { ref } from 'vue'
+import { useGameStore } from '@/stores/game'
+
+export function useCameraControls(scene: Phaser.Scene): any {
+  const gameStore = useGameStore()
+  const camera = ref(scene.cameras.main)
+  const isDragging = ref(false)
+  let pointerDownTimer: number | null = null
+  let pointerUpTimer: number | null = null
+
+  const DRAG_DELAY = 150
+  const MOVE_RESET_DELAY = 100
+
+  function onPointerDown(pointer: Phaser.Input.Pointer) {
+    if (pointer.event instanceof MouseEvent || pointer.event.altKey) {
+      pointerDownTimer = setTimeout(() => {
+        isDragging.value = true
+        gameStore.setMovingCamera(true)
+      }, DRAG_DELAY)
+    }
+  }
+
+  function onPointerUp() {
+    if (pointerDownTimer) {
+      clearTimeout(pointerDownTimer)
+      pointerDownTimer = null
+    }
+    isDragging.value = false
+
+    if (pointerUpTimer) {
+      clearTimeout(pointerUpTimer)
+    }
+
+    pointerUpTimer = setTimeout(() => {
+      gameStore.setMovingCamera(false)
+    }, MOVE_RESET_DELAY)
+  }
+
+  scene.input.on(Phaser.Input.Events.POINTER_DOWN, onPointerDown)
+  scene.input.on(Phaser.Input.Events.POINTER_UP, onPointerUp)
+
+  return {
+    camera,
+    isDragging
+  }
+}

src/composables/usePointerHandlers.ts

@@ -0,0 +1,92 @@
+import config from '@/config'
+import { computed, ref, type Ref, watch } from 'vue'
+import { getTile, tileToWorldXY } from '@/services/zone'
+import { useGameStore } from '@/stores/game'
+import { useZoneEditorStore } from '@/stores/zoneEditor'
+
+export function usePointerHandlers(
+  scene: Phaser.Scene,
+  layer: Phaser.Tilemaps.TilemapLayer,
+  waypoint: Ref<{ visible: boolean; x: number; y: number }>,
+  camera: Ref<Phaser.Cameras.Scene2D.Camera>,
+  isDragging: Ref<boolean>
+) {
+  const gameStore = useGameStore()
+  const zoneEditorStore = useZoneEditorStore()
+
+  function updateWaypoint(pointer: Phaser.Input.Pointer) {
+    const { x: px, y: py } = camera.value.getWorldPoint(pointer.x, pointer.y)
+    const pointerTile = getTile(px, py, layer)
+
+    if (!pointerTile) {
+      waypoint.value.visible = false
+      return
+    }
+
+    const worldPoint = tileToWorldXY(layer, pointerTile.x, pointerTile.y)
+    waypoint.value = {
+      visible: true,
+      x: worldPoint.position_x,
+      y: worldPoint.position_y + config.tile_size.y + 15
+    }
+  }
+
+  const isMoveTool = computed(() => zoneEditorStore.tool === 'move')
+
+  watch(isMoveTool, (newValue) => {
+    if (newValue) {
+      scene.input.on(Phaser.Input.Events.POINTER_MOVE, dragZone)
+    } else {
+      scene.input.off(Phaser.Input.Events.POINTER_MOVE, dragZone)
+    }
+  })
+
+  function dragZone(pointer: Phaser.Input.Pointer) {
+    if (!isDragging.value) return
+    const { x, y, prevPosition } = pointer
+    camera.value.scrollX -= (x - prevPosition.x) / camera.value.zoom
+    camera.value.scrollY -= (y - prevPosition.y) / camera.value.zoom
+  }
+
+  function clickTile(pointer: Phaser.Input.Pointer) {
+    const { x: px, y: py } = camera.value.getWorldPoint(pointer.x, pointer.y)
+    const pointerTile = getTile(px, py, layer)
+
+    if (!pointerTile) {
+      return
+    }
+    gameStore.connection?.emit('character:move', { position_x: pointerTile.x, position_y: pointerTile.y })
+  }
+
+  function handleZoom(pointer: Phaser.Input.Pointer, _: unknown, __: unknown, deltaY: number) {
+    if (pointer.event instanceof WheelEvent && pointer.event.altKey) {
+      scene.scale.setZoom(scene.scale.zoom - deltaY * 0.01)
+      camera.value = scene.cameras.main
+    }
+  }
+
+  function setupPointerHandlers() {
+    scene.input.on(Phaser.Input.Events.POINTER_MOVE, updateWaypoint)
+    scene.input.on(Phaser.Input.Events.POINTER_WHEEL, handleZoom)
+
+    // These are for in-game only, not for in the zone editor
+    if (!zoneEditorStore.active) {
+      scene.input.on(Phaser.Input.Events.POINTER_UP, clickTile)
+    }
+  }
+
+  function cleanupPointerHandlers() {
+    scene.input.off(Phaser.Input.Events.POINTER_MOVE, updateWaypoint)
+    scene.input.off(Phaser.Input.Events.POINTER_WHEEL, handleZoom)
+
+    // These are for in-game only, not for in the zone editor
+    if (!zoneEditorStore.active) {
+      scene.input.off(Phaser.Input.Events.POINTER_UP, clickTile)
+    }
+  }
+
+  return {
+    setupPointerHandlers,
+    cleanupPointerHandlers
+  }
+}