Merge remote-tracking branch 'origin/main' into feature/map-refactor
# Conflicts: # src/components/gameMaster/mapEditor/Map.vue # src/components/gameMaster/mapEditor/partials/MapObjectList.vue # src/components/gameMaster/mapEditor/partials/TileList.vue # src/components/screens/MapEditor.vue # src/composables/pointerHandlers/useMapEditorPointerHandlers.ts
This commit is contained in:
commit
cf54ab842a
200
package-lock.json
generated
200
package-lock.json
generated
@ -1161,9 +1161,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@rollup/rollup-android-arm-eabi": {
|
||||
"version": "4.32.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.32.0.tgz",
|
||||
"integrity": "sha512-G2fUQQANtBPsNwiVFg4zKiPQyjVKZCUdQUol53R8E71J7AsheRMV/Yv/nB8giOcOVqP7//eB5xPqieBYZe9bGg==",
|
||||
"version": "4.34.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.34.0.tgz",
|
||||
"integrity": "sha512-Eeao7ewDq79jVEsrtWIj5RNqB8p2knlm9fhR6uJ2gqP7UfbLrTrxevudVrEPDM7Wkpn/HpRC2QfazH7MXLz3vQ==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
@ -1175,9 +1175,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-android-arm64": {
|
||||
"version": "4.32.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.32.0.tgz",
|
||||
"integrity": "sha512-qhFwQ+ljoymC+j5lXRv8DlaJYY/+8vyvYmVx074zrLsu5ZGWYsJNLjPPVJJjhZQpyAKUGPydOq9hRLLNvh1s3A==",
|
||||
"version": "4.34.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.34.0.tgz",
|
||||
"integrity": "sha512-yVh0Kf1f0Fq4tWNf6mWcbQBCLDpDrDEl88lzPgKhrgTcDrTtlmun92ywEF9dCjmYO3EFiSuJeeo9cYRxl2FswA==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@ -1189,9 +1189,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-darwin-arm64": {
|
||||
"version": "4.32.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.32.0.tgz",
|
||||
"integrity": "sha512-44n/X3lAlWsEY6vF8CzgCx+LQaoqWGN7TzUfbJDiTIOjJm4+L2Yq+r5a8ytQRGyPqgJDs3Rgyo8eVL7n9iW6AQ==",
|
||||
"version": "4.34.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.34.0.tgz",
|
||||
"integrity": "sha512-gCs0ErAZ9s0Osejpc3qahTsqIPUDjSKIyxK/0BGKvL+Tn0n3Kwvj8BrCv7Y5sR1Ypz1K2qz9Ny0VvkVyoXBVUQ==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@ -1203,9 +1203,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-darwin-x64": {
|
||||
"version": "4.32.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.32.0.tgz",
|
||||
"integrity": "sha512-F9ct0+ZX5Np6+ZDztxiGCIvlCaW87HBdHcozUfsHnj1WCUTBUubAoanhHUfnUHZABlElyRikI0mgcw/qdEm2VQ==",
|
||||
"version": "4.34.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.34.0.tgz",
|
||||
"integrity": "sha512-aIB5Anc8hngk15t3GUkiO4pv42ykXHfmpXGS+CzM9CTyiWyT8HIS5ygRAy7KcFb/wiw4Br+vh1byqcHRTfq2tQ==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@ -1217,9 +1217,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-freebsd-arm64": {
|
||||
"version": "4.32.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.32.0.tgz",
|
||||
"integrity": "sha512-JpsGxLBB2EFXBsTLHfkZDsXSpSmKD3VxXCgBQtlPcuAqB8TlqtLcbeMhxXQkCDv1avgwNjF8uEIbq5p+Cee0PA==",
|
||||
"version": "4.34.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.34.0.tgz",
|
||||
"integrity": "sha512-kpdsUdMlVJMRMaOf/tIvxk8TQdzHhY47imwmASOuMajg/GXpw8GKNd8LNwIHE5Yd1onehNpcUB9jHY6wgw9nHQ==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@ -1231,9 +1231,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-freebsd-x64": {
|
||||
"version": "4.32.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.32.0.tgz",
|
||||
"integrity": "sha512-wegiyBT6rawdpvnD9lmbOpx5Sph+yVZKHbhnSP9MqUEDX08G4UzMU+D87jrazGE7lRSyTRs6NEYHtzfkJ3FjjQ==",
|
||||
"version": "4.34.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.34.0.tgz",
|
||||
"integrity": "sha512-D0RDyHygOBCQiqookcPevrvgEarN0CttBecG4chOeIYCNtlKHmf5oi5kAVpXV7qs0Xh/WO2RnxeicZPtT50V0g==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@ -1245,9 +1245,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-arm-gnueabihf": {
|
||||
"version": "4.32.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.32.0.tgz",
|
||||
"integrity": "sha512-3pA7xecItbgOs1A5H58dDvOUEboG5UfpTq3WzAdF54acBbUM+olDJAPkgj1GRJ4ZqE12DZ9/hNS2QZk166v92A==",
|
||||
"version": "4.34.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.34.0.tgz",
|
||||
"integrity": "sha512-mCIw8j5LPDXmCOW8mfMZwT6F/Kza03EnSr4wGYEswrEfjTfVsFOxvgYfuRMxTuUF/XmRb9WSMD5GhCWDe2iNrg==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
@ -1259,9 +1259,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-arm-musleabihf": {
|
||||
"version": "4.32.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.32.0.tgz",
|
||||
"integrity": "sha512-Y7XUZEVISGyge51QbYyYAEHwpGgmRrAxQXO3siyYo2kmaj72USSG8LtlQQgAtlGfxYiOwu+2BdbPjzEpcOpRmQ==",
|
||||
"version": "4.34.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.34.0.tgz",
|
||||
"integrity": "sha512-AwwldAu4aCJPob7zmjuDUMvvuatgs8B/QiVB0KwkUarAcPB3W+ToOT+18TQwY4z09Al7G0BvCcmLRop5zBLTag==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
@ -1273,9 +1273,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-arm64-gnu": {
|
||||
"version": "4.32.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.32.0.tgz",
|
||||
"integrity": "sha512-r7/OTF5MqeBrZo5omPXcTnjvv1GsrdH8a8RerARvDFiDwFpDVDnJyByYM/nX+mvks8XXsgPUxkwe/ltaX2VH7w==",
|
||||
"version": "4.34.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.34.0.tgz",
|
||||
"integrity": "sha512-e7kDUGVP+xw05pV65ZKb0zulRploU3gTu6qH1qL58PrULDGxULIS0OSDQJLH7WiFnpd3ZKUU4VM3u/Z7Zw+e7Q==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@ -1287,9 +1287,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-arm64-musl": {
|
||||
"version": "4.32.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.32.0.tgz",
|
||||
"integrity": "sha512-HJbifC9vex9NqnlodV2BHVFNuzKL5OnsV2dvTw6e1dpZKkNjPG6WUq+nhEYV6Hv2Bv++BXkwcyoGlXnPrjAKXw==",
|
||||
"version": "4.34.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.34.0.tgz",
|
||||
"integrity": "sha512-SXYJw3zpwHgaBqTXeAZ31qfW/v50wq4HhNVvKFhRr5MnptRX2Af4KebLWR1wpxGJtLgfS2hEPuALRIY3LPAAcA==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@ -1301,9 +1301,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-loongarch64-gnu": {
|
||||
"version": "4.32.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.32.0.tgz",
|
||||
"integrity": "sha512-VAEzZTD63YglFlWwRj3taofmkV1V3xhebDXffon7msNz4b14xKsz7utO6F8F4cqt8K/ktTl9rm88yryvDpsfOw==",
|
||||
"version": "4.34.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.34.0.tgz",
|
||||
"integrity": "sha512-e5XiCinINCI4RdyU3sFyBH4zzz7LiQRvHqDtRe9Dt8o/8hTBaYpdPimayF00eY2qy5j4PaaWK0azRgUench6WQ==",
|
||||
"cpu": [
|
||||
"loong64"
|
||||
],
|
||||
@ -1315,9 +1315,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
|
||||
"version": "4.32.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.32.0.tgz",
|
||||
"integrity": "sha512-Sts5DST1jXAc9YH/iik1C9QRsLcCoOScf3dfbY5i4kH9RJpKxiTBXqm7qU5O6zTXBTEZry69bGszr3SMgYmMcQ==",
|
||||
"version": "4.34.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.34.0.tgz",
|
||||
"integrity": "sha512-3SWN3e0bAsm9ToprLFBSro8nJe6YN+5xmB11N4FfNf92wvLye/+Rh5JGQtKOpwLKt6e61R1RBc9g+luLJsc23A==",
|
||||
"cpu": [
|
||||
"ppc64"
|
||||
],
|
||||
@ -1329,9 +1329,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-riscv64-gnu": {
|
||||
"version": "4.32.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.32.0.tgz",
|
||||
"integrity": "sha512-qhlXeV9AqxIyY9/R1h1hBD6eMvQCO34ZmdYvry/K+/MBs6d1nRFLm6BOiITLVI+nFAAB9kUB6sdJRKyVHXnqZw==",
|
||||
"version": "4.34.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.34.0.tgz",
|
||||
"integrity": "sha512-B1Oqt3GLh7qmhvfnc2WQla4NuHlcxAD5LyueUi5WtMc76ZWY+6qDtQYqnxARx9r+7mDGfamD+8kTJO0pKUJeJA==",
|
||||
"cpu": [
|
||||
"riscv64"
|
||||
],
|
||||
@ -1343,9 +1343,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-s390x-gnu": {
|
||||
"version": "4.32.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.32.0.tgz",
|
||||
"integrity": "sha512-8ZGN7ExnV0qjXa155Rsfi6H8M4iBBwNLBM9lcVS+4NcSzOFaNqmt7djlox8pN1lWrRPMRRQ8NeDlozIGx3Omsw==",
|
||||
"version": "4.34.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.34.0.tgz",
|
||||
"integrity": "sha512-UfUCo0h/uj48Jq2lnhX0AOhZPSTAq3Eostas+XZ+GGk22pI+Op1Y6cxQ1JkUuKYu2iU+mXj1QjPrZm9nNWV9rg==",
|
||||
"cpu": [
|
||||
"s390x"
|
||||
],
|
||||
@ -1357,9 +1357,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-x64-gnu": {
|
||||
"version": "4.32.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.32.0.tgz",
|
||||
"integrity": "sha512-VDzNHtLLI5s7xd/VubyS10mq6TxvZBp+4NRWoW+Hi3tgV05RtVm4qK99+dClwTN1McA6PHwob6DEJ6PlXbY83A==",
|
||||
"version": "4.34.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.34.0.tgz",
|
||||
"integrity": "sha512-chZLTUIPbgcpm+Z7ALmomXW8Zh+wE2icrG+K6nt/HenPLmtwCajhQC5flNSk1Xy5EDMt/QAOz2MhzfOfJOLSiA==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@ -1371,9 +1371,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-x64-musl": {
|
||||
"version": "4.32.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.32.0.tgz",
|
||||
"integrity": "sha512-qcb9qYDlkxz9DxJo7SDhWxTWV1gFuwznjbTiov289pASxlfGbaOD54mgbs9+z94VwrXtKTu+2RqwlSTbiOqxGg==",
|
||||
"version": "4.34.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.34.0.tgz",
|
||||
"integrity": "sha512-jo0UolK70O28BifvEsFD/8r25shFezl0aUk2t0VJzREWHkq19e+pcLu4kX5HiVXNz5qqkD+aAq04Ct8rkxgbyQ==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@ -1385,9 +1385,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-win32-arm64-msvc": {
|
||||
"version": "4.32.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.32.0.tgz",
|
||||
"integrity": "sha512-pFDdotFDMXW2AXVbfdUEfidPAk/OtwE/Hd4eYMTNVVaCQ6Yl8et0meDaKNL63L44Haxv4UExpv9ydSf3aSayDg==",
|
||||
"version": "4.34.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.34.0.tgz",
|
||||
"integrity": "sha512-Vmg0NhAap2S54JojJchiu5An54qa6t/oKT7LmDaWggpIcaiL8WcWHEN6OQrfTdL6mQ2GFyH7j2T5/3YPEDOOGA==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@ -1399,9 +1399,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-win32-ia32-msvc": {
|
||||
"version": "4.32.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.32.0.tgz",
|
||||
"integrity": "sha512-/TG7WfrCAjeRNDvI4+0AAMoHxea/USWhAzf9PVDFHbcqrQ7hMMKp4jZIy4VEjk72AAfN5k4TiSMRXRKf/0akSw==",
|
||||
"version": "4.34.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.34.0.tgz",
|
||||
"integrity": "sha512-CV2aqhDDOsABKHKhNcs1SZFryffQf8vK2XrxP6lxC99ELZAdvsDgPklIBfd65R8R+qvOm1SmLaZ/Fdq961+m7A==",
|
||||
"cpu": [
|
||||
"ia32"
|
||||
],
|
||||
@ -1413,9 +1413,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-win32-x64-msvc": {
|
||||
"version": "4.32.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.32.0.tgz",
|
||||
"integrity": "sha512-5hqO5S3PTEO2E5VjCePxv40gIgyS2KvO7E7/vvC/NbIW4SIRamkMr1hqj+5Y67fbBWv/bQLB6KelBQmXlyCjWA==",
|
||||
"version": "4.34.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.34.0.tgz",
|
||||
"integrity": "sha512-g2ASy1QwHP88y5KWvblUolJz9rN+i4ZOsYzkEwcNfaNooxNUXG+ON6F5xFo0NIItpHqxcdAyls05VXpBnludGw==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@ -2168,9 +2168,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/caniuse-lite": {
|
||||
"version": "1.0.30001695",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001695.tgz",
|
||||
"integrity": "sha512-vHyLade6wTgI2u1ec3WQBxv+2BrTERV28UXQu9LO6lZ9pYeMk34vjXFLOxo1A4UBA8XTL4njRQZdno/yYaSmWw==",
|
||||
"version": "1.0.30001696",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001696.tgz",
|
||||
"integrity": "sha512-pDCPkvzfa39ehJtJ+OwGT/2yvT2SbjfHhiIW2LWOAcMQ7BzwxT/XuyUp4OTOd0XFWA6BKw0JalnBHgSi5DGJBQ==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
@ -2535,9 +2535,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/electron-to-chromium": {
|
||||
"version": "1.5.88",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.88.tgz",
|
||||
"integrity": "sha512-K3C2qf1o+bGzbilTDCTBhTQcMS9KW60yTAaTeeXsfvQuTDDwlokLam/AdqlqcSy9u4UainDgsHV23ksXAOgamw==",
|
||||
"version": "1.5.90",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.90.tgz",
|
||||
"integrity": "sha512-C3PN4aydfW91Natdyd449Kw+BzhLmof6tzy5W1pFC5SpQxVXT+oyiyOG9AgYYSN9OdA/ik3YkCrpwqI8ug5Tug==",
|
||||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
@ -2743,9 +2743,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/fastq": {
|
||||
"version": "1.18.0",
|
||||
"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.18.0.tgz",
|
||||
"integrity": "sha512-QKHXPW0hD8g4UET03SdOdunzSouc9N4AuHdsX8XNcTsuz+yYFILVNIX4l9yHABMhiEI9Db0JTTIpu0wB+Y1QQw==",
|
||||
"version": "1.19.0",
|
||||
"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.0.tgz",
|
||||
"integrity": "sha512-7SFSRCNjBQIZH/xZR3iy5iQYR8aGBE0h3VG6/cwlbrpdciNYBMotQav8c1XI3HjHH+NikUpP53nPdlZSdWmFzA==",
|
||||
"dev": true,
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
@ -3393,9 +3393,9 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/loupe": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/loupe/-/loupe-3.1.2.tgz",
|
||||
"integrity": "sha512-23I4pFZHmAemUnz8WZXbYRSKYj801VDaNv9ETuMh7IrMc7VuVVSo+Z9iLE3ni30+U48iDWfi30d3twAXBYmnCg==",
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/loupe/-/loupe-3.1.3.tgz",
|
||||
"integrity": "sha512-kkIp7XSkP78ZxJEsSxW3712C6teJVoeHHwgo9zJ380de7IYyJ2ISlxojcH2pC5OFLewESmnRi/+XCDIEEVyoug==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
@ -3740,9 +3740,9 @@
|
||||
"license": "BlueOak-1.0.0"
|
||||
},
|
||||
"node_modules/papaparse": {
|
||||
"version": "5.5.1",
|
||||
"resolved": "https://registry.npmjs.org/papaparse/-/papaparse-5.5.1.tgz",
|
||||
"integrity": "sha512-EuEKUhyxrHVozD7g3/ztsJn6qaKse8RPfR6buNB2dMJvdtXNhcw8jccVi/LxNEY3HVrV6GO6Z4OoeCG9Iy9wpA==",
|
||||
"version": "5.5.2",
|
||||
"resolved": "https://registry.npmjs.org/papaparse/-/papaparse-5.5.2.tgz",
|
||||
"integrity": "sha512-PZXg8UuAc4PcVwLosEEDYjPyfWnTEhOrUfdv+3Bx+NuAb+5NhDmXzg5fHWmdCh1mP5p7JAZfFr3IMQfcntNAdA==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
@ -3827,9 +3827,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/phaser3-rex-plugins": {
|
||||
"version": "1.80.12",
|
||||
"resolved": "https://registry.npmjs.org/phaser3-rex-plugins/-/phaser3-rex-plugins-1.80.12.tgz",
|
||||
"integrity": "sha512-6vzYVhiSeiQSBBDXl2xQyF1omVhElF9yQTW7DKl0JHXchQ0bmvj4B+YVT5EFcle7y+3reedwOUDlchLvoccxsQ==",
|
||||
"version": "1.80.13",
|
||||
"resolved": "https://registry.npmjs.org/phaser3-rex-plugins/-/phaser3-rex-plugins-1.80.13.tgz",
|
||||
"integrity": "sha512-d2P3c+0r7h/GXtOZIjB6DLjBQ2rSEeZ+AOG1D6jgGGn/Txb+PiDmFMhBF3qJ6YoPlVarSE8lw6V8Jy7K7xPnLg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
@ -4250,9 +4250,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/rollup": {
|
||||
"version": "4.32.0",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.32.0.tgz",
|
||||
"integrity": "sha512-JmrhfQR31Q4AuNBjjAX4s+a/Pu/Q8Q9iwjWBsjRH1q52SPFE2NqRMK6fUZKKnvKO6id+h7JIRf0oYsph53eATg==",
|
||||
"version": "4.34.0",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.34.0.tgz",
|
||||
"integrity": "sha512-+4C/cgJ9w6sudisA0nZz0+O7lTP9a3CzNLsoDwaRumM8QHwghUsu6tqHXiTmNUp/rqNiM14++7dkzHDyCRs0Jg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
@ -4266,25 +4266,25 @@
|
||||
"npm": ">=8.0.0"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@rollup/rollup-android-arm-eabi": "4.32.0",
|
||||
"@rollup/rollup-android-arm64": "4.32.0",
|
||||
"@rollup/rollup-darwin-arm64": "4.32.0",
|
||||
"@rollup/rollup-darwin-x64": "4.32.0",
|
||||
"@rollup/rollup-freebsd-arm64": "4.32.0",
|
||||
"@rollup/rollup-freebsd-x64": "4.32.0",
|
||||
"@rollup/rollup-linux-arm-gnueabihf": "4.32.0",
|
||||
"@rollup/rollup-linux-arm-musleabihf": "4.32.0",
|
||||
"@rollup/rollup-linux-arm64-gnu": "4.32.0",
|
||||
"@rollup/rollup-linux-arm64-musl": "4.32.0",
|
||||
"@rollup/rollup-linux-loongarch64-gnu": "4.32.0",
|
||||
"@rollup/rollup-linux-powerpc64le-gnu": "4.32.0",
|
||||
"@rollup/rollup-linux-riscv64-gnu": "4.32.0",
|
||||
"@rollup/rollup-linux-s390x-gnu": "4.32.0",
|
||||
"@rollup/rollup-linux-x64-gnu": "4.32.0",
|
||||
"@rollup/rollup-linux-x64-musl": "4.32.0",
|
||||
"@rollup/rollup-win32-arm64-msvc": "4.32.0",
|
||||
"@rollup/rollup-win32-ia32-msvc": "4.32.0",
|
||||
"@rollup/rollup-win32-x64-msvc": "4.32.0",
|
||||
"@rollup/rollup-android-arm-eabi": "4.34.0",
|
||||
"@rollup/rollup-android-arm64": "4.34.0",
|
||||
"@rollup/rollup-darwin-arm64": "4.34.0",
|
||||
"@rollup/rollup-darwin-x64": "4.34.0",
|
||||
"@rollup/rollup-freebsd-arm64": "4.34.0",
|
||||
"@rollup/rollup-freebsd-x64": "4.34.0",
|
||||
"@rollup/rollup-linux-arm-gnueabihf": "4.34.0",
|
||||
"@rollup/rollup-linux-arm-musleabihf": "4.34.0",
|
||||
"@rollup/rollup-linux-arm64-gnu": "4.34.0",
|
||||
"@rollup/rollup-linux-arm64-musl": "4.34.0",
|
||||
"@rollup/rollup-linux-loongarch64-gnu": "4.34.0",
|
||||
"@rollup/rollup-linux-powerpc64le-gnu": "4.34.0",
|
||||
"@rollup/rollup-linux-riscv64-gnu": "4.34.0",
|
||||
"@rollup/rollup-linux-s390x-gnu": "4.34.0",
|
||||
"@rollup/rollup-linux-x64-gnu": "4.34.0",
|
||||
"@rollup/rollup-linux-x64-musl": "4.34.0",
|
||||
"@rollup/rollup-win32-arm64-msvc": "4.34.0",
|
||||
"@rollup/rollup-win32-ia32-msvc": "4.34.0",
|
||||
"@rollup/rollup-win32-x64-msvc": "4.34.0",
|
||||
"fsevents": "~2.3.2"
|
||||
}
|
||||
},
|
||||
@ -4361,9 +4361,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/semver": {
|
||||
"version": "7.6.3",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
|
||||
"integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
|
||||
"version": "7.7.0",
|
||||
"resolved": "https://registry.npmjs.org/semver/-/semver-7.7.0.tgz",
|
||||
"integrity": "sha512-DrfFnPzblFmNrIZzg5RzHegbiRWg7KMR7btwi2yjHwx06zsUbO5g613sVwEV7FTwmzJu+Io0lJe2GJ3LxqpvBQ==",
|
||||
"dev": true,
|
||||
"license": "ISC",
|
||||
"bin": {
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 453 KiB After Width: | Height: | Size: 454 KiB |
5
src/application/enums.ts
Normal file
5
src/application/enums.ts
Normal file
@ -0,0 +1,5 @@
|
||||
export enum Direction {
|
||||
POSITIVE,
|
||||
NEGATIVE,
|
||||
UNCHANGED
|
||||
}
|
||||
@ -183,6 +183,7 @@ export type Character = {
|
||||
export type MapCharacter = {
|
||||
character: Character
|
||||
isMoving: boolean
|
||||
isAttacking?: boolean
|
||||
}
|
||||
|
||||
export type CharacterItem = {
|
||||
@ -216,11 +217,19 @@ export type Sprite = {
|
||||
characterTypes: CharacterType[]
|
||||
}
|
||||
|
||||
export interface SpriteImage {
|
||||
url: string
|
||||
offset: {
|
||||
x: number
|
||||
y: number
|
||||
}
|
||||
}
|
||||
|
||||
export type SpriteAction = {
|
||||
id: UUID
|
||||
sprite: Sprite
|
||||
id: string
|
||||
sprite: string
|
||||
action: string
|
||||
sprites: string[]
|
||||
sprites: SpriteImage[]
|
||||
originX: number
|
||||
originY: number
|
||||
frameWidth: number
|
||||
@ -229,7 +238,7 @@ export type SpriteAction = {
|
||||
}
|
||||
|
||||
export type Chat = {
|
||||
id: UUID
|
||||
id: string
|
||||
character: Character
|
||||
map: Map
|
||||
message: string
|
||||
|
||||
@ -1,123 +1,45 @@
|
||||
<template>
|
||||
<ChatBubble :mapCharacter="props.mapCharacter" :currentX="currentPositionX" :currentY="currentPositionY" />
|
||||
<Healthbar :mapCharacter="props.mapCharacter" :currentX="currentPositionX" :currentY="currentPositionY" />
|
||||
<Sprite ref="charSprite" :depth="isometricDepth" :x="currentPositionX" :y="currentPositionY" :origin-y="1" :flipX="isFlippedX" />
|
||||
<Container ref="characterContainer" :x="currentPositionX" :y="currentPositionY" :depth="isometricDepth">
|
||||
<ChatBubble :mapCharacter="props.mapCharacter" />
|
||||
<HealthBar :mapCharacter="props.mapCharacter" />
|
||||
<CharacterHair :mapCharacter="props.mapCharacter" />
|
||||
<Sprite ref="characterSprite" :origin-y="1" :flipX="isFlippedX" />
|
||||
</Container>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import config from '@/application/config'
|
||||
import { Direction } from '@/application/enums'
|
||||
import { type MapCharacter } from '@/application/types'
|
||||
import CharacterHair from '@/components/game/character/partials/CharacterHair.vue'
|
||||
import ChatBubble from '@/components/game/character/partials/ChatBubble.vue'
|
||||
import Healthbar from '@/components/game/character/partials/Healthbar.vue'
|
||||
import { loadSpriteTextures } from '@/composables/gameComposable'
|
||||
import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/mapComposable'
|
||||
import { CharacterTypeStorage } from '@/storage/storages'
|
||||
import HealthBar from '@/components/game/character/partials/HealthBar.vue'
|
||||
import { useCharacterSprite } from '@/composables/useCharacterSpriteComposable'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useMapStore } from '@/stores/mapStore'
|
||||
import { refObj, Sprite, useScene } from 'phavuer'
|
||||
import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
|
||||
|
||||
enum Direction {
|
||||
POSITIVE,
|
||||
NEGATIVE,
|
||||
UNCHANGED
|
||||
}
|
||||
import { Container, Sprite, useScene } from 'phavuer'
|
||||
import { onMounted, onUnmounted, watch } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
tilemap: Phaser.Tilemaps.Tilemap
|
||||
mapCharacter: MapCharacter
|
||||
}>()
|
||||
|
||||
const charSprite = refObj<Phaser.GameObjects.Sprite>()
|
||||
const charSpriteId = ref('')
|
||||
|
||||
const gameStore = useGameStore()
|
||||
const mapStore = useMapStore()
|
||||
const scene = useScene()
|
||||
|
||||
const currentPositionX = ref(0)
|
||||
const currentPositionY = ref(0)
|
||||
const isometricDepth = ref(1)
|
||||
const isInitialPosition = ref(true)
|
||||
const tween = ref<Phaser.Tweens.Tween | null>(null)
|
||||
const { characterContainer, characterSprite, currentPositionX, currentPositionY, isometricDepth, isFlippedX, updatePosition, calcDirection, updateSprite, initializeSprite, cleanup } = useCharacterSprite(scene, props.tilemap, props.mapCharacter)
|
||||
|
||||
const updateIsometricDepth = (positionX: number, positionY: number) => {
|
||||
isometricDepth.value = calculateIsometricDepth(positionX, positionY, 28, 94, true)
|
||||
}
|
||||
const handlePositionUpdate = (newValues: any, oldValues: any) => {
|
||||
if (!newValues) return
|
||||
|
||||
const updatePosition = (positionX: number, positionY: number, direction: Direction) => {
|
||||
const newPositionX = tileToWorldX(props.tilemap, positionX, positionY)
|
||||
const newPositionY = tileToWorldY(props.tilemap, positionX, positionY)
|
||||
|
||||
if (isInitialPosition.value) {
|
||||
currentPositionX.value = newPositionX
|
||||
currentPositionY.value = newPositionY
|
||||
isInitialPosition.value = false
|
||||
return
|
||||
if (!oldValues || newValues.positionX !== oldValues.positionX || newValues.positionY !== oldValues.positionY) {
|
||||
const direction = !oldValues ? Direction.POSITIVE : calcDirection(oldValues.positionX, oldValues.positionY, newValues.positionX, newValues.positionY)
|
||||
updatePosition(newValues.positionX, newValues.positionY, direction)
|
||||
}
|
||||
|
||||
if (tween.value?.isPlaying()) {
|
||||
tween.value.stop()
|
||||
}
|
||||
|
||||
const distance = Math.sqrt(Math.pow(newPositionX - currentPositionX.value, 2) + Math.pow(newPositionY - currentPositionY.value, 2))
|
||||
|
||||
if (distance >= config.tile_size.width / 1.1) {
|
||||
currentPositionX.value = newPositionX
|
||||
currentPositionY.value = newPositionY
|
||||
return
|
||||
}
|
||||
|
||||
const duration = distance * 5.7
|
||||
|
||||
tween.value = props.tilemap.scene.tweens.add({
|
||||
targets: { x: currentPositionX.value, y: currentPositionY.value },
|
||||
x: newPositionX,
|
||||
y: newPositionY,
|
||||
duration,
|
||||
ease: 'Linear',
|
||||
onStart: () => {
|
||||
if (direction === Direction.POSITIVE) {
|
||||
updateIsometricDepth(positionX, positionY)
|
||||
}
|
||||
},
|
||||
onUpdate: (tween) => {
|
||||
// @ts-ignore
|
||||
currentPositionX.value = tween.targets[0].x
|
||||
// @ts-ignore
|
||||
currentPositionY.value = tween.targets[0].y
|
||||
},
|
||||
onComplete: () => {
|
||||
if (direction === Direction.NEGATIVE) {
|
||||
updateIsometricDepth(positionX, positionY)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const calcDirection = (oldPositionX: number, oldPositionY: number, newPositionX: number, newPositionY: number): Direction => {
|
||||
if (newPositionY < oldPositionY || newPositionX < oldPositionX) return Direction.NEGATIVE
|
||||
if (newPositionX > oldPositionX || newPositionY > oldPositionY) return Direction.POSITIVE
|
||||
return Direction.UNCHANGED
|
||||
}
|
||||
|
||||
const isFlippedX = computed(() => [6, 4].includes(props.mapCharacter.character.rotation ?? 0))
|
||||
|
||||
const charTexture = computed(() => {
|
||||
const spriteId = charSpriteId.value ?? 'idle_right_down'
|
||||
const action = props.mapCharacter.isMoving ? 'walk' : 'idle'
|
||||
const direction = [0, 6].includes(props.mapCharacter.character.rotation) ? 'left_up' : 'right_down'
|
||||
|
||||
return `${spriteId}-${action}_${direction}`
|
||||
})
|
||||
|
||||
const updateSprite = () => {
|
||||
if (props.mapCharacter.isMoving) {
|
||||
charSprite.value!.anims.play(charTexture.value, true)
|
||||
} else {
|
||||
charSprite.value!.anims.stop()
|
||||
charSprite.value!.setFrame(0)
|
||||
charSprite.value!.setTexture(charTexture.value)
|
||||
if (newValues.isMoving !== oldValues?.isMoving || newValues.rotation !== oldValues?.rotation) {
|
||||
updateSprite()
|
||||
}
|
||||
}
|
||||
|
||||
@ -126,51 +48,22 @@ watch(
|
||||
positionX: props.mapCharacter.character.positionX,
|
||||
positionY: props.mapCharacter.character.positionY,
|
||||
isMoving: props.mapCharacter.isMoving,
|
||||
rotation: props.mapCharacter.character.rotation
|
||||
rotation: props.mapCharacter.character.rotation,
|
||||
isAttacking: props.mapCharacter.isAttacking
|
||||
}),
|
||||
(newValues, oldValues) => {
|
||||
if (!newValues) return
|
||||
|
||||
if (!oldValues || newValues.positionX !== oldValues.positionX || newValues.positionY !== oldValues.positionY) {
|
||||
const direction = !oldValues ? Direction.POSITIVE : calcDirection(oldValues.positionX, oldValues.positionY, newValues.positionX, newValues.positionY)
|
||||
updatePosition(newValues.positionX, newValues.positionY, direction)
|
||||
}
|
||||
|
||||
// Handle animation updates
|
||||
if (newValues.isMoving !== oldValues?.isMoving || newValues.rotation !== oldValues?.rotation) {
|
||||
updateSprite()
|
||||
}
|
||||
}
|
||||
handlePositionUpdate
|
||||
)
|
||||
|
||||
onMounted(async () => {
|
||||
let character = props.mapCharacter.character
|
||||
await initializeSprite()
|
||||
|
||||
const characterTypeStorage = new CharacterTypeStorage()
|
||||
|
||||
const spriteId = await characterTypeStorage.getSpriteId(character.characterType!)
|
||||
if (!spriteId) return
|
||||
|
||||
charSpriteId.value = spriteId
|
||||
|
||||
await loadSpriteTextures(scene, spriteId)
|
||||
|
||||
charSprite.value!.setTexture(charTexture.value)
|
||||
charSprite.value!.setFlipX(isFlippedX.value)
|
||||
|
||||
charSprite.value!.setName(props.mapCharacter.character!.name)
|
||||
|
||||
if (character.id === gameStore.character!.id) {
|
||||
if (props.mapCharacter.character.id === gameStore.character!.id) {
|
||||
mapStore.setCharacterLoaded(true)
|
||||
|
||||
// #146 : Set camera position to character, need to be improved still
|
||||
scene.cameras.main.startFollow(charSprite.value as Phaser.GameObjects.Sprite)
|
||||
scene.cameras.main.startFollow(characterContainer.value as Phaser.GameObjects.Container)
|
||||
}
|
||||
|
||||
updatePosition(character.positionX, character.positionY, character.rotation)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
tween.value?.stop()
|
||||
cleanup()
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -1,51 +1,54 @@
|
||||
<template>
|
||||
<Image v-bind="imageProps" v-if="gameStore.getLoadedAsset(texture)" />
|
||||
<Image v-bind="imageProps" v-if="gameStore.isTextureLoaded(texture)" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { MapCharacter, Sprite as SpriteT } from '@/application/types'
|
||||
import { loadSpriteTextures } from '@/composables/gameComposable'
|
||||
import { CharacterHairStorage, CharacterTypeStorage, SpriteStorage } from '@/storage/storages'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { Image, useScene } from 'phavuer'
|
||||
import { computed } from 'vue'
|
||||
import { computed, onMounted, ref } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
mapCharacter: MapCharacter
|
||||
currentX: number
|
||||
currentY: number
|
||||
}>()
|
||||
|
||||
const gameStore = useGameStore()
|
||||
const scene = useScene()
|
||||
const hairSpriteId = ref('')
|
||||
const sprite = ref<SpriteT | null>(null)
|
||||
|
||||
const texture = computed(() => {
|
||||
const { rotation, characterHair } = props.mapCharacter.character
|
||||
const spriteId = characterHair?.sprite?.id
|
||||
const { rotation } = props.mapCharacter.character
|
||||
const direction = [0, 6].includes(rotation) ? 'back' : 'front'
|
||||
|
||||
return `${spriteId}-${direction}`
|
||||
return `${hairSpriteId.value}-${direction}`
|
||||
})
|
||||
|
||||
const isFlippedX = computed(() => [6, 4].includes(props.mapCharacter.character.rotation ?? 0))
|
||||
|
||||
const imageProps = computed(() => {
|
||||
// Get the current sprite action based on direction
|
||||
const direction = [0, 6].includes(props.mapCharacter.character.rotation ?? 0) ? 'back' : 'front'
|
||||
const spriteAction = props.mapCharacter.character.characterHair?.sprite?.spriteActions?.find((spriteAction) => spriteAction.action === direction)
|
||||
const spriteAction = sprite.value?.spriteActions?.find((spriteAction) => spriteAction.action === direction)
|
||||
|
||||
return {
|
||||
depth: 1,
|
||||
depth: 9999,
|
||||
originX: Number(spriteAction?.originX) ?? 0,
|
||||
originY: Number(spriteAction?.originY) ?? 0,
|
||||
flipX: isFlippedX.value,
|
||||
texture: texture.value,
|
||||
y: props.mapCharacter.isMoving ? Math.floor(Date.now() / 250) % 2 : 0
|
||||
texture: texture.value
|
||||
}
|
||||
})
|
||||
|
||||
loadSpriteTextures(scene, props.mapCharacter.character.characterHair?.sprite as SpriteT)
|
||||
.then(() => {})
|
||||
.catch((error) => {
|
||||
console.error('Error loading texture:', error)
|
||||
})
|
||||
onMounted(async () => {
|
||||
const characterHairStorage = new CharacterHairStorage()
|
||||
const spriteId = await characterHairStorage.getSpriteId(props.mapCharacter.character.characterHair!)
|
||||
if (!spriteId) return
|
||||
|
||||
hairSpriteId.value = spriteId
|
||||
const spriteStorage = new SpriteStorage()
|
||||
sprite.value = await spriteStorage.get(spriteId)
|
||||
await loadSpriteTextures(scene, spriteId)
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<Container ref="charChatContainer" :depth="999" :x="currentX" :y="currentY">
|
||||
<Container ref="characterChatContainer" :depth="999">
|
||||
<RoundRectangle @create="createChatBubble" :origin-x="0.5" :origin-y="7.5" :fillColor="0xffffff" :width="194" :height="21" :radius="20" />
|
||||
<Text @create="createChatText" :style="{ fontSize: 13, fontFamily: 'Arial', color: '#000' }" />
|
||||
</Container>
|
||||
@ -12,12 +12,10 @@ import { onMounted } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
mapCharacter: MapCharacter
|
||||
currentX: number
|
||||
currentY: number
|
||||
}>()
|
||||
|
||||
const game = useGame()
|
||||
const charChatContainer = refObj<Phaser.GameObjects.Container>()
|
||||
const characterChatContainer = refObj<Phaser.GameObjects.Container>()
|
||||
|
||||
const createChatBubble = (container: Phaser.GameObjects.Container) => {
|
||||
container.setName(`${props.mapCharacter.character.name}_chatBubble`)
|
||||
@ -41,7 +39,7 @@ const createChatText = (text: Phaser.GameObjects.Text) => {
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
charChatContainer.value!.setName(`${props.mapCharacter.character!.name}_chatContainer`)
|
||||
charChatContainer.value!.setVisible(false)
|
||||
characterChatContainer.value!.setName(`${props.mapCharacter.character!.name}_chatContainer`)
|
||||
characterChatContainer.value!.setVisible(false)
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<Container :depth="999" :x="currentX" :y="currentY">
|
||||
<Container :depth="999">
|
||||
<Text @create="createNicknameText" :text="props.mapCharacter.character.name" />
|
||||
<RoundRectangle :origin-x="0.5" :origin-y="18.5" :fillColor="0xffffff" :width="74" :height="6" :radius="5" />
|
||||
<RoundRectangle :origin-x="0.5" :origin-y="36.4" :fillColor="0x00b3b3" :width="70" :height="3" :radius="5" />
|
||||
@ -12,8 +12,6 @@ import { Container, RoundRectangle, Text, useGame } from 'phavuer'
|
||||
|
||||
const props = defineProps<{
|
||||
mapCharacter: MapCharacter
|
||||
currentX: number
|
||||
currentY: number
|
||||
}>()
|
||||
|
||||
const game = useGame()
|
||||
@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<div class="absolute" v-if="gameStore.uiSettings.isCharacterProfileOpen" :style="modalStyle">
|
||||
<div class="relative">
|
||||
<img src="/assets/ui-elements/profile-ui-box-outer.svg" class="absolute w-full h-full" />
|
||||
<img src="/assets/ui-elements/profile-ui-box-inner.svg" class="absolute left-2 bottom-2 w-[calc(100%_-_16px)] h-[calc(100%_-_40px)]" />
|
||||
<img src="/assets/ui-elements/profile-ui-box-outer.svg" class="absolute w-full h-full" alt="" />
|
||||
<img src="/assets/ui-elements/profile-ui-box-inner.svg" class="absolute left-2 bottom-2 w-[calc(100%_-_16px)] h-[calc(100%_-_40px)]" alt="" />
|
||||
<div @mousedown="startDrag" class="cursor-move px-5 py-2.5 flex justify-between items-center relative">
|
||||
<span class="text-xs text-white font-thin">Character Profile [Alt+C]</span>
|
||||
<button @click="gameStore.uiSettings.isCharacterProfileOpen = false" class="w-3.5 h-3.5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out">
|
||||
<img alt="close" draggable="false" src="/assets/icons/modal/close-button-white.svg" class="w-full h-full" />
|
||||
<img draggable="false" src="/assets/icons/modal/close-button-white.svg" class="w-full h-full" alt="Close button icon" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="py-4 px-6 flex flex-col gap-7 relative z-10">
|
||||
@ -17,7 +17,7 @@
|
||||
<span class="text-xs">{{ gameStore.character?.experience }} / 18.600XP</span>
|
||||
</div>
|
||||
<a class="hover:cursor-pointer bg-[url('/assets/ui-elements/button-ui-box-textured-small.svg')] bg-no-repeat block w-8 h-8 relative mx-[3px]">
|
||||
<img class="hover:drop-shadow-default w-3.5 h-3.5 m-[9px] object-contain" draggable="false" src="/assets/icons/plus-green-icon.svg" />
|
||||
<img class="hover:drop-shadow-default w-3.5 h-3.5 m-[9px] object-contain" draggable="false" src="/assets/icons/plus-green-icon.svg" alt="Plus button icon" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
@ -37,20 +37,20 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<img src="/assets/placeholders/inventory_player.png" class="w-8 h-auto" />
|
||||
<img src="/assets/placeholders/inventory_player.png" class="w-8 h-auto" alt="Player character sprite" />
|
||||
<div class="flex flex-col items-end gap-0.5">
|
||||
<div class="w-9 h-9 default-border rounded-sm bg-gray relative hover:bg-gray-600">
|
||||
<img class="w-6 h-6 center-element" src="/assets/icons/profile/helmet.svg" />
|
||||
<img class="w-6 h-6 center-element" src="/assets/icons/profile/helmet.svg" alt="Helmet icon" />
|
||||
</div>
|
||||
<div class="w-9 h-9 default-border rounded-sm bg-gray relative hover:bg-gray-600">
|
||||
<img class="w-6 h-6 center-element" src="/assets/icons/profile/chestplate.svg" />
|
||||
<img class="w-6 h-6 center-element" src="/assets/icons/profile/chestplate.svg" alt="Chestplate icon" />
|
||||
</div>
|
||||
<div class="flex gap-0.5 items-end">
|
||||
<div class="w-6 h-6 default-border rounded-sm bg-gray relative hover:bg-gray-600">
|
||||
<img class="w-4 h-4 center-element" src="/assets/icons/profile/boots.svg" />
|
||||
<img class="w-4 h-4 center-element" src="/assets/icons/profile/boots.svg" alt="Boots icon" />
|
||||
</div>
|
||||
<div class="w-9 h-9 default-border rounded-sm bg-gray relative hover:bg-gray-600">
|
||||
<img class="w-6 h-6 center-element" src="/assets/icons/profile/legs.svg" />
|
||||
<img class="w-6 h-6 center-element" src="/assets/icons/profile/legs.svg" alt="Legs icon" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -119,111 +119,44 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
|
||||
import { computed, onMounted, onUnmounted, ref } from 'vue'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
|
||||
let startX = 0
|
||||
let startY = 0
|
||||
let initialX = 0
|
||||
let initialY = 0
|
||||
let modalPositionX = 0
|
||||
let modalPositionY = 0
|
||||
let modalWidth = 286
|
||||
let modalHeight = 483
|
||||
|
||||
const width = ref(modalWidth)
|
||||
const height = ref(modalHeight)
|
||||
const x = ref(0)
|
||||
const y = ref(0)
|
||||
const width = ref(286)
|
||||
const height = ref(483)
|
||||
const x = ref(window.innerWidth / 2 - 143)
|
||||
const y = ref(window.innerHeight / 2 - 241)
|
||||
const isDragging = ref(false)
|
||||
|
||||
const modalStyle = computed(() => ({
|
||||
top: `${y.value}px`,
|
||||
left: `${x.value}px`,
|
||||
width: `${width.value}px`,
|
||||
height: `${height.value}px`,
|
||||
maxWidth: '100vw',
|
||||
maxHeight: '100vh'
|
||||
height: `${height.value}px`
|
||||
}))
|
||||
|
||||
function startDrag(event: MouseEvent) {
|
||||
isDragging.value = true
|
||||
startX = event.clientX
|
||||
startY = event.clientY
|
||||
initialX = x.value
|
||||
initialY = y.value
|
||||
event.preventDefault()
|
||||
const startX = event.clientX - x.value
|
||||
const startY = event.clientY - y.value
|
||||
|
||||
function drag(event: MouseEvent) {
|
||||
if (!isDragging.value) return
|
||||
x.value = event.clientX - startX
|
||||
y.value = event.clientY - startY
|
||||
}
|
||||
|
||||
function stopDrag() {
|
||||
isDragging.value = false
|
||||
removeEventListener('mousemove', drag)
|
||||
removeEventListener('mouseup', stopDrag)
|
||||
}
|
||||
|
||||
addEventListener('mousemove', drag)
|
||||
addEventListener('mouseup', stopDrag)
|
||||
}
|
||||
|
||||
function drag(event: MouseEvent) {
|
||||
if (!isDragging.value) return
|
||||
const dx = event.clientX - startX
|
||||
const dy = event.clientY - startY
|
||||
x.value = initialX + dx
|
||||
y.value = initialY + dy
|
||||
adjustPosition()
|
||||
}
|
||||
|
||||
function stopDrag() {
|
||||
isDragging.value = false
|
||||
}
|
||||
|
||||
function adjustPosition() {
|
||||
x.value = Math.min(x.value, window.innerWidth - width.value)
|
||||
y.value = Math.min(y.value, window.innerHeight - height.value)
|
||||
}
|
||||
|
||||
function initializePosition() {
|
||||
width.value = Math.min(modalWidth, window.innerWidth)
|
||||
height.value = Math.min(modalHeight, window.innerHeight)
|
||||
if (modalPositionX !== 0 && modalPositionY !== 0) {
|
||||
x.value = modalPositionX
|
||||
y.value = modalPositionY
|
||||
} else {
|
||||
x.value = (window.innerWidth - width.value) / 2
|
||||
y.value = (window.innerHeight - height.value) / 2
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => gameStore.uiSettings.isCharacterProfileOpen,
|
||||
(value) => {
|
||||
gameStore.uiSettings.isCharacterProfileOpen = value
|
||||
if (value) {
|
||||
initializePosition()
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => modalWidth,
|
||||
(value) => {
|
||||
width.value = Math.min(value, window.innerWidth)
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => modalHeight,
|
||||
(value) => {
|
||||
height.value = Math.min(value, window.innerHeight)
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => modalPositionX,
|
||||
(value) => {
|
||||
x.value = value
|
||||
}
|
||||
)
|
||||
|
||||
watch(
|
||||
() => modalPositionY,
|
||||
(value) => {
|
||||
y.value = value
|
||||
}
|
||||
)
|
||||
|
||||
function keyPress(event: KeyboardEvent) {
|
||||
if (event.altKey && event.key === 'c') {
|
||||
gameStore.toggleCharacterProfile()
|
||||
@ -232,14 +165,9 @@ function keyPress(event: KeyboardEvent) {
|
||||
|
||||
onMounted(() => {
|
||||
addEventListener('keydown', keyPress)
|
||||
addEventListener('mousemove', drag)
|
||||
addEventListener('mouseup', stopDrag)
|
||||
initializePosition()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
removeEventListener('keydown', keyPress)
|
||||
removeEventListener('mousemove', drag)
|
||||
removeEventListener('mouseup', stopDrag)
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-96 mx-auto relative">
|
||||
<img src="/assets/icons/ingameUI/chat-icon.svg" class="absolute top-1/2 -translate-y-1/2 left-2.5 h-4 w-4 opacity-50" />
|
||||
<img src="/assets/icons/ingameUI/chat-icon.svg" class="absolute top-1/2 -translate-y-1/2 left-2.5 h-4 w-4 opacity-50" alt="" />
|
||||
<input
|
||||
class="w-[332px] h-8 rounded-sm text-xs font-default pl-8 pr-4 py-0 bg-gray-600 border-2 border-solid border-gray-500 text-gray-300 bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-cover focus:outline-none focus:ring-0 focus:border-cyan-800"
|
||||
placeholder="Type something..."
|
||||
@ -85,11 +85,14 @@ gameStore.connection?.on('chat:message', (data: Chat) => {
|
||||
|
||||
if (!mapStore.characterLoaded) return
|
||||
|
||||
const charChatContainer = scene.children.getByName(data.character.name + '_chatContainer') as Phaser.GameObjects.Container
|
||||
if (!charChatContainer) return
|
||||
const characterContainer = scene.children.getByName(data.character.name) as Phaser.GameObjects.Container
|
||||
if (!characterContainer) return
|
||||
|
||||
const chatBubble = charChatContainer.getByName(data.character.name + '_chatBubble') as Phaser.GameObjects.Container
|
||||
const chatText = charChatContainer.getByName(data.character.name + '_chatText') as Phaser.GameObjects.Text
|
||||
const characterChatContainer = characterContainer.getByName(data.character.name + '_chatContainer') as Phaser.GameObjects.Container
|
||||
if (!characterChatContainer) return
|
||||
|
||||
const chatBubble = characterChatContainer.getByName(data.character.name + '_chatBubble') as Phaser.GameObjects.Container
|
||||
const chatText = characterChatContainer.getByName(data.character.name + '_chatText') as Phaser.GameObjects.Text
|
||||
if (!chatText || !chatBubble) return
|
||||
|
||||
function calculateTextWidth(text: string, font: string, fontSize: number): number {
|
||||
@ -115,24 +118,24 @@ gameStore.connection?.on('chat:message', (data: Chat) => {
|
||||
// setText but with max. char limit of 90
|
||||
chatText.setText(data.message.substring(0, 90))
|
||||
|
||||
charChatContainer.setVisible(true)
|
||||
characterChatContainer.setVisible(true)
|
||||
|
||||
/**
|
||||
* Hide chat bubble after a few seconds
|
||||
*/
|
||||
|
||||
// Clear any existing hide timer
|
||||
if (charChatContainer.getData('hideTimer')) {
|
||||
clearTimeout(charChatContainer.getData('hideTimer'))
|
||||
if (characterChatContainer.getData('hideTimer')) {
|
||||
clearTimeout(characterChatContainer.getData('hideTimer'))
|
||||
}
|
||||
|
||||
// Set a new hide timer
|
||||
const hideTimer = setTimeout(() => {
|
||||
charChatContainer.setVisible(false)
|
||||
characterChatContainer.setVisible(false)
|
||||
}, 3000)
|
||||
|
||||
// Store the timer on the container itself
|
||||
charChatContainer.setData('hideTimer', hideTimer)
|
||||
characterChatContainer.setData('hideTimer', hideTimer)
|
||||
})
|
||||
scrollToBottom()
|
||||
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<div class="group-hover:block absolute -left-2 bg-gray-500 h-3.5 w-2 [clip-path:polygon(100%_0,_0_50%,_100%_100%)] top-1/2 -translate-y-1/2 hidden"></div>
|
||||
</div>
|
||||
<a class="group-hover:cursor-pointer bg-[url('/assets/ui-elements/button-ui-box-textured.svg')] bg-no-repeat block w-[42px] h-[42px] relative">
|
||||
<img class="group-hover:drop-shadow-default w-6 h-5 mx-[9px] my-[11px] object-contain" draggable="false" src="/assets/icons/ingameUI/menu-icon.svg" />
|
||||
<img class="group-hover:drop-shadow-default w-6 h-5 mx-[9px] my-[11px] object-contain" draggable="false" src="/assets/icons/ingameUI/menu-icon.svg" alt="Menu button icon" />
|
||||
</a>
|
||||
</li>
|
||||
<li class="menu-item group relative" @click="gameStore.toggleCharacterProfile">
|
||||
@ -15,7 +15,7 @@
|
||||
<div class="group-hover:block absolute -left-2 bg-gray-500 h-3.5 w-2 [clip-path:polygon(100%_0,_0_50%,_100%_100%)] top-1/2 -translate-y-1/2 hidden"></div>
|
||||
</div>
|
||||
<a class="group-hover:cursor-pointer bg-[url('/assets/ui-elements/button-ui-box-textured.svg')] bg-no-repeat block w-[42px] h-[42px] relative">
|
||||
<img class="group-hover:drop-shadow-default w-8 h-8 m-[5px] object-contain" draggable="false" src="/assets/placeholders/head.png" />
|
||||
<img class="group-hover:drop-shadow-default w-8 h-8 m-[5px] object-contain" draggable="false" src="/assets/placeholders/head.png" alt="User profile button icon" />
|
||||
<p class="absolute bottom-0 -right-1.5 m-0 max-w-4 font-ui z-10 text-white text-[12px] leading-[6px] drop-shadow-pixel"><span class="font-ui text-white text-[8px] ml-0.5">LVL</span> {{ characterLevel }}</p>
|
||||
</a>
|
||||
</li>
|
||||
@ -25,7 +25,7 @@
|
||||
<div class="group-hover:block absolute -left-2 bg-gray-500 h-3.5 w-2 [clip-path:polygon(100%_0,_0_50%,_100%_100%)] top-1/2 -translate-y-1/2 hidden"></div>
|
||||
</div>
|
||||
<a class="group-hover:bg-gray-800 bg-gray-900 group-hover:cursor-pointer border-2 border-solid rounded border-gray-500 block w-[34px] h-[31px]">
|
||||
<img class="group-hover:drop-shadow-default w-6 h-6 m-[5px] object-contain" draggable="false" src="/assets/icons/ingameUI/chat-icon.svg" />
|
||||
<img class="group-hover:drop-shadow-default w-6 h-6 m-[5px] object-contain" draggable="false" src="/assets/icons/ingameUI/chat-icon.svg" alt="Open chat button icon" />
|
||||
</a>
|
||||
</li>
|
||||
<li class="menu-item group relative">
|
||||
@ -34,7 +34,7 @@
|
||||
<div class="group-hover:block absolute -left-2 bg-gray-500 h-3.5 w-2 [clip-path:polygon(100%_0,_0_50%,_100%_100%)] top-1/2 -translate-y-1/2 hidden"></div>
|
||||
</div>
|
||||
<a class="group-hover:bg-gray-800 bg-gray-900 group-hover:cursor-pointer border-2 border-solid rounded border-gray-500 block w-[34px] h-[31px]">
|
||||
<img class="group-hover:drop-shadow-default w-6 h-6 m-[5px] object-contain" draggable="false" src="/assets/icons/ingameUI/map-icon.svg" />
|
||||
<img class="group-hover:drop-shadow-default w-6 h-6 m-[5px] object-contain" draggable="false" src="/assets/icons/ingameUI/map-icon.svg" alt="World map button icon" />
|
||||
</a>
|
||||
</li>
|
||||
<li class="menu-item group relative">
|
||||
@ -43,7 +43,7 @@
|
||||
<div class="group-hover:block absolute -left-2 bg-gray-500 h-3.5 w-2 [clip-path:polygon(100%_0,_0_50%,_100%_100%)] top-1/2 -translate-y-1/2 hidden"></div>
|
||||
</div>
|
||||
<a class="group-hover:bg-gray-800 bg-gray-900 group-hover:cursor-pointer border-2 border-solid rounded border-gray-500 block w-[34px] h-[31px]">
|
||||
<img class="group-hover:drop-shadow-default w-6 h-6 m-[5px] object-contain" draggable="false" src="/assets/icons/ingameUI/socials-icon.svg" />
|
||||
<img class="group-hover:drop-shadow-default w-6 h-6 m-[5px] object-contain" draggable="false" src="/assets/icons/ingameUI/socials-icon.svg" alt="Users button icon" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@ -5,12 +5,12 @@
|
||||
</div>
|
||||
<div class="absolute -bottom-3 left-1/2 -translate-x-1/2 flex gap-1">
|
||||
<button class="w-6 h-6 relative p-0">
|
||||
<img class="w-3 h-3 center-element" src="/assets/icons/plus-icon.svg" />
|
||||
<img class="w-full h-full" src="/assets/ui-elements/button-ui-box-textured.svg" />
|
||||
<img class="w-3 h-3 center-element" src="/assets/icons/plus-icon.svg" alt="Zoom-in button icon" />
|
||||
<img class="w-full h-full" src="/assets/ui-elements/button-ui-box-textured.svg" alt="" />
|
||||
</button>
|
||||
<button class="w-6 h-6 relative p-0">
|
||||
<img class="w-3 h-3 center-element" src="/assets/icons/minus-icon.svg" />
|
||||
<img class="w-full h-full" src="/assets/ui-elements/button-ui-box-textured.svg" />
|
||||
<img class="w-3 h-3 center-element" src="/assets/icons/minus-icon.svg" alt="Zoom-out button icon" />
|
||||
<img class="w-full h-full" src="/assets/ui-elements/button-ui-box-textured.svg" alt="" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,42 +0,0 @@
|
||||
<template>
|
||||
<div class="absolute z-50 w-full h-dvh top-0 left-0 bg-black/60" v-show="false">
|
||||
<div class="center-element max-w-[875px] max-h-[600px] h-full w-[80%] bg-gray border-solid border-2 border-gray-500 rounded-md z-50 flex flex-col backdrop-blur-sm shadow-lg">
|
||||
<div class="p-2.5 flex max-sm:flex-wrap justify-between items-center gap-5 border-solid border-0 border-b border-gray-500">
|
||||
<h3 class="m-0 font-medium shrink-0">Game menu</h3>
|
||||
<div class="hidden sm:flex gap-1.5 flex-wrap">
|
||||
<button @click.stop="userPanelScreen = 'inventory'" :class="{ active: userPanelScreen === 'inventory' }" class="btn-cyan py-1.5 px-4 min-w-24">Inventory</button>
|
||||
<button @click.stop="userPanelScreen = 'equipment'" :class="{ active: userPanelScreen === 'equipment' }" class="btn-cyan py-1.5 px-4 min-w-24">Equipment</button>
|
||||
<button @click.stop="userPanelScreen = 'characterScreen'" :class="{ active: userPanelScreen === 'characterScreen' }" class="btn-cyan py-1.5 px-4 min-w-24">Character</button>
|
||||
<button @click.stop="userPanelScreen = 'settings'" :class="{ active: userPanelScreen === 'settings' }" class="btn-cyan py-1.5 px-4 min-w-24">Settings</button>
|
||||
</div>
|
||||
<div class="flex gap-2.5">
|
||||
<button class="w-3.5 h-3.5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out">
|
||||
<img alt="close" draggable="false" src="/assets/icons/modal/close-button-white.svg" class="w-full h-full" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex sm:hidden gap-1.5 flex-wrap">
|
||||
<button @click.stop="userPanelScreen = 'inventory'" :class="{ active: userPanelScreen === 'inventory' }" class="btn-cyan py-1.5 px-4 min-w-24">Inventory</button>
|
||||
<button @click.stop="userPanelScreen = 'equipment'" :class="{ active: userPanelScreen === 'equipment' }" class="btn-cyan py-1.5 px-4 min-w-24">Equipment</button>
|
||||
<button @click.stop="userPanelScreen = 'characterScreen'" :class="{ active: userPanelScreen === 'characterScreen' }" class="btn-cyan py-1.5 px-4 min-w-24">Character</button>
|
||||
<button @click.stop="userPanelScreen = 'settings'" :class="{ active: userPanelScreen === 'settings' }" class="btn-cyan py-1.5 px-4 min-w-24">Settings</button>
|
||||
</div>
|
||||
</div>
|
||||
<Inventory v-show="userPanelScreen === 'inventory'" />
|
||||
<Equipment v-show="userPanelScreen === 'equipment'" />
|
||||
<CharacterScreen v-show="userPanelScreen === 'characterScreen'" />
|
||||
<Settings v-show="userPanelScreen === 'settings'" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import CharacterScreen from '@/components/game/gui/partials/CharacterScreen.vue'
|
||||
import Equipment from '@/components/game/gui/partials/Equipment.vue'
|
||||
import Inventory from '@/components/game/gui/partials/Inventory.vue'
|
||||
import Settings from '@/components/game/gui/partials/Settings.vue'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
let userPanelScreen = ref('inventory')
|
||||
</script>
|
||||
@ -1,68 +0,0 @@
|
||||
<template>
|
||||
<div class="grow flex flex-col w-full h-full relative overflow-auto">
|
||||
<div class="m-4 relative">
|
||||
<h4 class="font-medium text-lg max-w-[375px]">Character</h4>
|
||||
<div class="flex justify-center flex-wrap gap-20">
|
||||
<div class="flex gap-3 mt-2 flex-wrap max-w-[375px]">
|
||||
<div class="h-full flex flex-col justify-center items-center">
|
||||
<img class="h-72 my-2 mx-auto" src="/assets/placeholders/inventory_player.png" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex flex-col gap-3 mx-5 mt-2">
|
||||
<h3>{{ gameStore.character?.name }}</h3>
|
||||
<div class="flex gap-4 flex-wrap max-w-[375px]">
|
||||
<ul class="p-0 m-0 list-none">
|
||||
<li class="leading-6 text-lg">Class:</li>
|
||||
<li class="leading-6 text-lg">Race:</li>
|
||||
<li class="leading-6 text-lg">Hit Points:</li>
|
||||
<li class="leading-6 text-lg">Mana Points:</li>
|
||||
<li class="leading-6 text-lg">Level:</li>
|
||||
<li class="leading-6 text-lg">Stat Points:</li>
|
||||
</ul>
|
||||
<ul class="p-0 m-0 list-none">
|
||||
<li class="leading-6 text-lg min-h-6">Knight</li>
|
||||
<li class="leading-6 text-lg min-h-6">{{ gameStore.character?.characterType?.race }}</li>
|
||||
<li class="leading-6 text-lg min-h-6">{{ gameStore.character?.hitpoints }} <span class="text-green">(+15)</span></li>
|
||||
<li class="leading-6 text-lg min-h-6">{{ gameStore.character?.mana }}</li>
|
||||
<li class="leading-6 text-lg min-h-6">{{ gameStore.character?.level }}</li>
|
||||
<li class="leading-6 text-lg min-h-6">3</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3 mx-5 mt-2">
|
||||
<h3>Alignment</h3>
|
||||
<div class="h-8 w-64 rounded border border-solid border-white bg-gradient-to-r from-red to-blue relative">
|
||||
<!-- TODO: Give slider left value based on alignment (0-100), new characters start with 50 -->
|
||||
<div class="rounded border-2 border-solid border-white h-10 w-2 absolute top-1/2 -translate-y-1/2 -translate-x-1/2" :style="{ left: gameStore.character?.alignment + '%' }"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute -left-5 -bottom-5 w-[calc(100%_+_40px)] my-px h-px bg-gray-500"></div>
|
||||
</div>
|
||||
<div class="m-4">
|
||||
<h4 class="font-medium text-lg max-w-[375px]">Character stats</h4>
|
||||
<div class="flex gap-3 mt-4 flex-wrap max-w-[375px]">
|
||||
<ul class="p-0 m-0 list-none">
|
||||
<li class="leading-6">Health:</li>
|
||||
<li class="leading-6">Defense:</li>
|
||||
<li class="leading-6">More stats:</li>
|
||||
<li class="leading-6">Extra stats:</li>
|
||||
</ul>
|
||||
<ul class="p-0 m-0 list-none text-right">
|
||||
<li class="leading-6">100 <span class="text-green">(+15)</span></li>
|
||||
<li class="leading-6">1000 <span class="text-green">(+500)</span></li>
|
||||
<li class="leading-6"></li>
|
||||
<li class="leading-6"></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
</script>
|
||||
@ -1,89 +0,0 @@
|
||||
<template>
|
||||
<div class="grow flex flex-col w-full h-full relative overflow-auto">
|
||||
<div class="m-4 relative">
|
||||
<h4 class="font-medium text-lg max-w-[375px]">Equipment</h4>
|
||||
<div class="flex justify-center items-center flex-wrap gap-20">
|
||||
<div class="flex gap-3 mt-2 flex-wrap max-w-[375px]">
|
||||
<div class="h-full flex flex-col justify-center items-center">
|
||||
<h3>{{ gameStore.character?.name }}</h3>
|
||||
<img class="h-60 my-2 mx-auto" src="/assets/placeholders/inventory_player.png" />
|
||||
<span class="block text-sm">Level {{ gameStore.character?.level }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3 mx-5 mt-2">
|
||||
<div class="flex gap-3 justify-center">
|
||||
<!-- Helmet -->
|
||||
<div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md aspect-square h-11 w-11 relative hover:bg-gray-200">
|
||||
<img src="/assets/icons/inventory/helmet.svg" class="center-element w-11/12 opacity-20" />
|
||||
</div>
|
||||
|
||||
<!-- Head charm -->
|
||||
<div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md aspect-square h-11 w-11 relative hover:bg-gray-200">
|
||||
<img src="/assets/icons/inventory/head_charm.svg" class="center-element w-11/12 opacity-20" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-3 justify-center">
|
||||
<!-- Bracers -->
|
||||
<div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md w-11 h-[104px] relative hover:bg-gray-200">
|
||||
<img src="/assets/icons/inventory/bracers.svg" class="center-element w-11/12 opacity-20" />
|
||||
</div>
|
||||
|
||||
<!-- Chestplate -->
|
||||
<div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md aspect-square w-[104px] h-[104px] relative hover:bg-gray-200">
|
||||
<img src="/assets/icons/inventory/chestplate.svg" class="center-element w-10/12 opacity-20" />
|
||||
</div>
|
||||
|
||||
<!-- Primary Weapon -->
|
||||
<div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md w-11 h-[104px] self-stretch justify-self-stretch relative hover:bg-gray-200">
|
||||
<img src="/assets/icons/inventory/primary_weapon.svg" class="center-element w-11/12 opacity-20" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-3 justify-center">
|
||||
<!-- Legs -->
|
||||
<div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md w-11 h-[104px] self-stretch justify-self-stretch relative hover:bg-gray-200">
|
||||
<img src="/assets/icons/inventory/legs.svg" class="center-element w-11/12 opacity-20" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-3">
|
||||
<!-- Belt/pouch -->
|
||||
<div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md aspect-square h-11 w-11 self-stretch justify-self-stretch relative hover:bg-gray-200">
|
||||
<img src="/assets/icons/inventory/pouch.svg" class="center-element w-11/12 opacity-20" />
|
||||
</div>
|
||||
|
||||
<!-- Boots -->
|
||||
<div class="bg-gray-300/80 border-solid border-2 border-gray-500 rounded-md aspect-square h-11 w-11 self-stretch justify-self-stretch relative hover:bg-gray-200">
|
||||
<img src="/assets/icons/inventory/boots.svg" class="center-element w-11/12 opacity-20" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute -left-5 -bottom-5 w-[calc(100%_+_40px)] my-px h-px bg-gray-500"></div>
|
||||
</div>
|
||||
<div class="m-4">
|
||||
<h4 class="font-medium text-lg max-w-[375px]">Equipment Bonus</h4>
|
||||
<div class="flex gap-3 mt-4 flex-wrap max-w-[375px]">
|
||||
<ul class="p-0 m-0 list-none">
|
||||
<li class="leading-6">Health:</li>
|
||||
<li class="leading-6">Defense:</li>
|
||||
<li class="leading-6">More stats:</li>
|
||||
<li class="leading-6">Extra stats:</li>
|
||||
</ul>
|
||||
<ul class="p-0 m-0 list-none text-right">
|
||||
<li class="leading-6">+15</li>
|
||||
<li class="leading-6">500</li>
|
||||
<li class="leading-6"></li>
|
||||
<li class="leading-6"></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
</script>
|
||||
@ -1,17 +0,0 @@
|
||||
<template>
|
||||
<div class="grow flex flex-col w-full h-full relative overflow-auto">
|
||||
<div class="m-4 relative">
|
||||
<h4 class="m-auto font-medium text-lg max-w-[375px]">Inventory</h4>
|
||||
<div class="flex gap-3 mt-4 mx-auto flex-wrap max-w-[375px]">
|
||||
<div v-for="n in 24" class="bg-gray-300/80 border-solid border-2 border-gray-500 w-12 h-12 rounded-md aspect-square shrink-0 justify-self-stretch hover:bg-gray-200"></div>
|
||||
</div>
|
||||
<div class="absolute -left-5 -bottom-5 w-[calc(100%_+_40px)] my-px h-px bg-gray-500"></div>
|
||||
</div>
|
||||
<div class="m-4">
|
||||
<h4 class="m-auto font-medium text-lg max-w-[375px]">Chest items</h4>
|
||||
<div class="flex gap-3 mt-4 mx-auto flex-wrap max-w-[375px]">
|
||||
<div v-for="n in 12" class="bg-gray-300/80 border-solid border-2 border-gray-500 w-12 h-12 rounded-md aspect-square shrink-0 justify-self-stretch hover:bg-gray-200"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -1,40 +0,0 @@
|
||||
<template>
|
||||
<div class="flex h-full w-full relative">
|
||||
<div class="w-2/12 flex flex-col relative">
|
||||
<!-- Settings Categories -->
|
||||
<div class="relative p-2.5">
|
||||
<h3>Settings</h3>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
|
||||
</div>
|
||||
<a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': settingCategory === 'character' }" @click.stop="settingCategory = 'character'">
|
||||
<span>Character</span>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
|
||||
</a>
|
||||
<a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': settingCategory === 'account' }" @click.stop="settingCategory = 'account'">
|
||||
<span>Account</span>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
|
||||
</a>
|
||||
<a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': settingCategory === 'audio' }" @click.stop="settingCategory = 'audio'">
|
||||
<span>Audio</span>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
|
||||
</a>
|
||||
<a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': settingCategory === 'video' }" @click.stop="settingCategory = 'video'">
|
||||
<span>Video</span>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="absolute w-px bg-gray-500 h-full top-0 left-1/6"></div>
|
||||
|
||||
<!-- Assets list -->
|
||||
<div class="overflow-auto h-full w-10/12 flex flex-col relative">
|
||||
<CharacterSettings v-show="settingCategory == 'character'" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import CharacterSettings from '@/components/game/gui/partials/settings/CharacterSettings.vue'
|
||||
import { ref } from 'vue'
|
||||
|
||||
let settingCategory = ref('character')
|
||||
</script>
|
||||
@ -1,34 +0,0 @@
|
||||
<template>
|
||||
<div class="h-full overflow-auto">
|
||||
<div class="relative p-2.5 flex flex-col gap-5 h-72">
|
||||
<h3>Character details</h3>
|
||||
<button @click="toggle" class="btn-cyan px-4 py-1.5 w-24">Edit</button>
|
||||
<form class="flex gap-2.5 flex-wrap">
|
||||
<div class="form-field-half max-w-[300px]">
|
||||
<label for="name">Name</label>
|
||||
<input class="input-field" :class="{ inactive: !editCharacter }" type="text" name="name" placeholder="Ethereal" :disabled="!editCharacter" />
|
||||
</div>
|
||||
<div class="form-field-half max-w-[300px] relative">
|
||||
<label for="class">Class</label>
|
||||
<select class="input-field" v-model="characterClass" :class="{ inactive: !editCharacter }" name="class" :disabled="!editCharacter">
|
||||
<option value="Knight" :selected="characterClass == 'Knight'" :disabled="characterClass == 'Knight'">Knight</option>
|
||||
<option value="Paladin" :selected="characterClass == 'Paladin'" :disabled="characterClass == 'Paladin'">Paladin</option>
|
||||
</select>
|
||||
<span v-if="!editCharacter" class="absolute bottom-[9px] left-[14px] text-sm text-gray-300/50">{{ characterClass }}</span>
|
||||
</div>
|
||||
<button v-if="editCharacter" @click="toggle" class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
const editCharacter = ref(false)
|
||||
const characterClass = ref('')
|
||||
|
||||
const toggle = () => {
|
||||
editCharacter.value = !editCharacter.value
|
||||
}
|
||||
</script>
|
||||
@ -32,8 +32,18 @@ gameStore.connection?.on('map:character:leave', (characterId: UUID) => {
|
||||
mapStore.removeCharacter(characterId)
|
||||
})
|
||||
|
||||
gameStore.connection?.on('map:character:attack', (characterId: UUID) => {
|
||||
mapStore.updateCharacterProperty(characterId, 'isAttacking', true)
|
||||
})
|
||||
|
||||
gameStore.connection?.on('map:character:move', (data: { characterId: UUID; positionX: number; positionY: number; rotation: number; isMoving: boolean }) => {
|
||||
mapStore.updateCharacterPosition(data)
|
||||
// @TODO: Replace with universal class, composable or store
|
||||
if (data.characterId === gameStore.character?.id) {
|
||||
gameStore.character!.positionX = data.positionX
|
||||
gameStore.character!.positionY = data.positionY
|
||||
gameStore.character!.rotation = data.rotation
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
|
||||
@ -21,9 +21,12 @@
|
||||
<button class="btn-cyan py-2 my-4" type="button" @click.prevent="addNewImage">New action</button>
|
||||
<Accordion v-for="action in spriteActions" :key="action.id">
|
||||
<template #header>
|
||||
<div class="flex justify-between items-center">
|
||||
<div class="flex items-center">
|
||||
{{ action.action }}
|
||||
<button class="btn-red px-4 py-1.5 min-w-24" type="button" @click.prevent="() => spriteActions.splice(spriteActions.indexOf(action), 1)">Delete</button>
|
||||
<div class="ml-auto space-x-2">
|
||||
<button class="btn-cyan px-4 py-1.5 min-w-24" type="button" @click.stop.prevent="openPreviewModal(action)">View</button>
|
||||
<button class="btn-red px-4 py-1.5 min-w-24" type="button" @click.stop.prevent="() => spriteActions.splice(spriteActions.indexOf(action), 1)">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #content>
|
||||
@ -45,19 +48,30 @@
|
||||
<input v-model.number="action.frameRate" class="input-field" type="number" step="any" name="frame-speed" placeholder="Frame rate" />
|
||||
</div>
|
||||
<div class="form-field-full">
|
||||
<SpriteActionsInput v-model="action.sprites" />
|
||||
<SpriteActionsInput v-model="action.sprites" @tempOffsetChange="(index, offset) => handleTempOffsetChange(action, index, offset)" />
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
</Accordion>
|
||||
<SpritePreview
|
||||
v-if="selectedAction"
|
||||
:sprites="selectedAction.sprites"
|
||||
:frame-rate="selectedAction.frameRate"
|
||||
:is-modal-open="isModalOpen"
|
||||
:temp-offset-index="tempOffsetData.index"
|
||||
:temp-offset="tempOffsetData.offset"
|
||||
@update:frame-rate="updateFrameRate"
|
||||
@update:is-modal-open="isModalOpen = $event"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Sprite, SpriteAction } from '@/application/types'
|
||||
import type { Sprite, SpriteAction, UUID } from '@/application/types'
|
||||
import { uuidv4 } from '@/application/utilities'
|
||||
import SpriteActionsInput from '@/components/gameMaster/assetManager/partials/sprite/partials/SpriteImagesInput.vue'
|
||||
import SpritePreview from '@/components/gameMaster/assetManager/partials/sprite/partials/SpritePreview.vue'
|
||||
import Accordion from '@/components/utilities/Accordion.vue'
|
||||
import { useAssetManagerStore } from '@/stores/assetManagerStore'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
@ -70,6 +84,8 @@ const selectedSprite = computed(() => assetManagerStore.selectedSprite)
|
||||
|
||||
const spriteName = ref('')
|
||||
const spriteActions = ref<SpriteAction[]>([])
|
||||
const isModalOpen = ref(false)
|
||||
const selectedAction = ref<SpriteAction | null>(null)
|
||||
|
||||
if (!selectedSprite.value) {
|
||||
console.error('No sprite selected')
|
||||
@ -147,8 +163,7 @@ function addNewImage() {
|
||||
|
||||
const newImage: SpriteAction = {
|
||||
id: uuidv4(),
|
||||
spriteId: selectedSprite.value.id,
|
||||
sprite: selectedSprite.value,
|
||||
sprite: selectedSprite.value.id,
|
||||
action: 'new_action',
|
||||
sprites: [],
|
||||
originX: 0,
|
||||
@ -170,12 +185,40 @@ function sortSpriteActions(actions: SpriteAction[]): SpriteAction[] {
|
||||
return [...actions].sort((a, b) => a.action.localeCompare(b.action))
|
||||
}
|
||||
|
||||
function openPreviewModal(action: SpriteAction) {
|
||||
selectedAction.value = action
|
||||
isModalOpen.value = true
|
||||
}
|
||||
|
||||
function updateFrameRate(value: number) {
|
||||
if (selectedAction.value) {
|
||||
selectedAction.value.frameRate = value
|
||||
}
|
||||
}
|
||||
|
||||
const tempOffsetData = ref<{ index: number | undefined; offset: { x: number; y: number } | undefined }>({
|
||||
index: undefined,
|
||||
offset: undefined
|
||||
})
|
||||
|
||||
function handleTempOffsetChange(action: SpriteAction, index: number, offset: { x: number; y: number }) {
|
||||
if (selectedAction.value === action) {
|
||||
tempOffsetData.value = { index, offset }
|
||||
}
|
||||
}
|
||||
|
||||
watch(selectedSprite, (sprite: Sprite | null) => {
|
||||
if (!sprite) return
|
||||
spriteName.value = sprite.name
|
||||
spriteActions.value = sortSpriteActions(sprite.spriteActions)
|
||||
})
|
||||
|
||||
watch(isModalOpen, (newValue) => {
|
||||
if (!newValue) {
|
||||
selectedAction.value = null
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
if (!selectedSprite.value) return
|
||||
})
|
||||
|
||||
@ -1,19 +1,44 @@
|
||||
<template>
|
||||
<div class="flex flex-wrap gap-3">
|
||||
<div v-for="(image, index) in modelValue" :key="index" class="h-20 w-20 p-4 bg-gray-300 bg-opacity-50 rounded text-center relative group cursor-move" draggable="true" @dragstart="dragStart($event, index)" @dragover.prevent @dragenter.prevent @drop="drop($event, index)">
|
||||
<img :src="image" class="max-w-full max-h-full object-contain pointer-events-none" alt="Uploaded image" />
|
||||
<img :src="image.url" class="max-w-full max-h-full object-contain pointer-events-none" alt="Uploaded image" @load="updateImageDimensions($event, index)" />
|
||||
<div v-if="imageDimensions[index]" class="absolute bottom-1 right-1 bg-black/50 text-white text-xs px-1 py-0.5 rounded transition-opacity font-default">{{ image.dimensions.width }}x{{ image.dimensions.height }}</div>
|
||||
<div class="absolute top-1 left-1 flex-row space-y-1">
|
||||
<button @click.stop="deleteImage(index)" class="bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity" aria-label="Delete image">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
<button class="bg-blue-500 text-white rounded-full w-6 h-6 flex items-center justify-center cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity" aria-label="Scope image">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
<button @click.stop="openOffsetModal(index)" class="bg-blue-500 text-white rounded-full w-6 h-6 flex items-center justify-center cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity" aria-label="Scope image">
|
||||
<svg width="50px" height="50px" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8.29289 3.70711L1 11V15H5L12.2929 7.70711L8.29289 3.70711Z" fill="white" />
|
||||
<path d="M9.70711 2.29289L13.7071 6.29289L15.1716 4.82843C15.702 4.29799 16 3.57857 16 2.82843C16 1.26633 14.7337 0 13.1716 0C12.4214 0 11.702 0.297995 11.1716 0.828428L9.70711 2.29289Z" fill="white" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<Modal :is-modal-open="selectedImageIndex === index" :modal-width="300" :modal-height="210" :is-resizable="false" :bg-style="'none'" @modal:close="closeOffsetModal">
|
||||
<template #modalHeader>
|
||||
<h3 class="m-0 font-medium shrink-0 text-white">Action offset ({{ selectedImageIndex }})</h3>
|
||||
</template>
|
||||
<template #modalBody>
|
||||
<div class="m-4">
|
||||
<form method="post" @submit.prevent="saveOffset(index)" class="inline">
|
||||
<div class="gap-2.5 flex flex-wrap">
|
||||
<div class="form-field-half">
|
||||
<label for="offsetX">Offset X</label>
|
||||
<input class="input-field max-w-64" v-model="tempOffset.x" name="offsetX" id="offsetX" type="number" />
|
||||
</div>
|
||||
<div class="form-field-half">
|
||||
<label for="offsetY">Offset Y</label>
|
||||
<input class="input-field max-w-64" v-model="tempOffset.y" name="offsetY" id="offsetY" type="number" />
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
</Modal>
|
||||
</div>
|
||||
<div class="h-20 w-20 p-4 bg-gray-200 bg-opacity-50 rounded justify-center items-center flex hover:cursor-pointer" @click="triggerFileInput" @drop.prevent="onDrop" @dragover.prevent>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 invert" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
@ -25,10 +50,19 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import Modal from '@/components/utilities/Modal.vue'
|
||||
import { ref, watch } from 'vue'
|
||||
|
||||
interface SpriteImage {
|
||||
url: string
|
||||
offset: {
|
||||
x: number
|
||||
y: number
|
||||
}
|
||||
}
|
||||
|
||||
interface Props {
|
||||
modelValue: string[]
|
||||
modelValue: SpriteImage[]
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
@ -36,11 +70,15 @@ const props = withDefaults(defineProps<Props>(), {
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: string[]): void
|
||||
(e: 'update:modelValue', value: SpriteImage[]): void
|
||||
(e: 'close'): void
|
||||
(e: 'tempOffsetChange', index: number, offset: { x: number; y: number }): void
|
||||
}>()
|
||||
|
||||
const fileInput = ref<HTMLInputElement | null>(null)
|
||||
const draggedIndex = ref<number | null>(null)
|
||||
const selectedImageIndex = ref<number | null>(null)
|
||||
const tempOffset = ref({ x: 0, y: 0 })
|
||||
|
||||
const triggerFileInput = () => {
|
||||
fileInput.value?.click()
|
||||
@ -61,19 +99,25 @@ const onDrop = (event: DragEvent) => {
|
||||
|
||||
const handleFiles = (files: FileList) => {
|
||||
Array.from(files).forEach((file) => {
|
||||
if (file.type.startsWith('image/')) {
|
||||
const reader = new FileReader()
|
||||
reader.onload = (e) => {
|
||||
if (typeof e.target?.result === 'string') {
|
||||
updateImages([...props.modelValue, e.target.result])
|
||||
}
|
||||
}
|
||||
reader.readAsDataURL(file)
|
||||
if (!file.type.startsWith('image/')) {
|
||||
return
|
||||
}
|
||||
|
||||
const reader = new FileReader()
|
||||
reader.onload = (e) => {
|
||||
if (typeof e.target?.result === 'string') {
|
||||
const newImage: SpriteImage = {
|
||||
url: e.target.result,
|
||||
offset: { x: 0, y: 0 }
|
||||
}
|
||||
updateImages([...props.modelValue, newImage])
|
||||
}
|
||||
}
|
||||
reader.readAsDataURL(file)
|
||||
})
|
||||
}
|
||||
|
||||
const updateImages = (newImages: string[]) => {
|
||||
const updateImages = (newImages: SpriteImage[]) => {
|
||||
emit('update:modelValue', newImages)
|
||||
}
|
||||
|
||||
@ -101,4 +145,41 @@ const drop = (event: DragEvent, dropIndex: number) => {
|
||||
}
|
||||
draggedIndex.value = null
|
||||
}
|
||||
|
||||
const openOffsetModal = (index: number) => {
|
||||
selectedImageIndex.value = index
|
||||
tempOffset.value = { ...props.modelValue[index].offset }
|
||||
}
|
||||
|
||||
const closeOffsetModal = () => {
|
||||
selectedImageIndex.value = null
|
||||
}
|
||||
|
||||
const saveOffset = (index: number) => {
|
||||
const newImages = [...props.modelValue]
|
||||
newImages[index] = {
|
||||
...newImages[index],
|
||||
offset: { ...tempOffset.value }
|
||||
}
|
||||
updateImages(newImages)
|
||||
closeOffsetModal()
|
||||
}
|
||||
|
||||
const onOffsetChange = () => {
|
||||
if (selectedImageIndex.value !== null) {
|
||||
emit('tempOffsetChange', selectedImageIndex.value, tempOffset.value)
|
||||
}
|
||||
}
|
||||
|
||||
watch(tempOffset, onOffsetChange, { deep: true })
|
||||
|
||||
const imageDimensions = ref<{ [key: number]: { width: number; height: number } }>({})
|
||||
|
||||
const updateImageDimensions = (event: Event, index: number) => {
|
||||
const img = event.target as HTMLImageElement
|
||||
imageDimensions.value[index] = {
|
||||
width: img.naturalWidth,
|
||||
height: img.naturalHeight
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -0,0 +1,146 @@
|
||||
<template>
|
||||
<Modal :is-modal-open="isModalOpen" :modal-width="700" :modal-height="330" :bg-style="'none'" @modal:close="closeModal">
|
||||
<template #modalHeader>
|
||||
<h3 class="m-0 font-medium shrink-0 text-white">View sprite</h3>
|
||||
</template>
|
||||
<template #modalBody>
|
||||
<div class="m-4 flex gap-8">
|
||||
<div class="relative">
|
||||
<div
|
||||
class="sprite-container bg-gray-800"
|
||||
:style="{
|
||||
width: `${maxWidth}px`,
|
||||
height: `${maxHeight}px`,
|
||||
position: 'relative',
|
||||
overflow: 'hidden'
|
||||
}"
|
||||
>
|
||||
<img
|
||||
v-for="(sprite, index) in spritesWithTempOffset"
|
||||
:key="index"
|
||||
:src="sprite.url"
|
||||
alt="Sprite"
|
||||
:style="{
|
||||
position: 'absolute',
|
||||
left: `${sprite.offset?.x || 0}px`,
|
||||
bottom: `${sprite.offset?.y || 0}px`,
|
||||
display: currentFrame === index ? 'block' : 'none',
|
||||
transform: `scale(${zoomLevel / 100})`,
|
||||
transformOrigin: 'bottom left'
|
||||
}"
|
||||
@load="updateContainerSize"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col justify-center gap-8 flex-1">
|
||||
<div class="flex flex-col">
|
||||
<label class="block mb-2 text-white">Frame Rate: {{ frameRate }} FPS</label>
|
||||
<input type="range" v-model.number="localFrameRate" min="0" max="60" step="1" class="w-full accent-cyan-500" @input="updateFrameRate" />
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<label class="block mb-2 text-white">Frame: {{ currentFrame + 1 }} of {{ sprites.length }}</label>
|
||||
<input type="range" v-model.number="currentFrame" :min="0" :max="sprites.length - 1" step="1" class="w-full accent-cyan-500" @input="stopAnimation" />
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<label class="block mb-2 text-white">Zoom: {{ zoomLevel }}%</label>
|
||||
<input type="range" v-model.number="zoomLevel" min="10" max="200" step="10" class="w-full accent-cyan-500" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { SpriteImage } from '@/application/types'
|
||||
import Modal from '@/components/utilities/Modal.vue'
|
||||
import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
sprites: SpriteImage[]
|
||||
frameRate: number
|
||||
isModalOpen?: boolean
|
||||
tempOffsetIndex?: number
|
||||
tempOffset?: { x: number; y: number }
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:frameRate', value: number): void
|
||||
(e: 'update:isModalOpen', value: boolean): void
|
||||
}>()
|
||||
|
||||
const currentFrame = ref(0)
|
||||
const maxWidth = ref(250)
|
||||
const maxHeight = ref(250)
|
||||
const localFrameRate = ref(props.frameRate)
|
||||
const zoomLevel = ref(100)
|
||||
let animationInterval: number | null = null
|
||||
|
||||
const spritesWithTempOffset = computed(() => {
|
||||
return props.sprites.map((sprite, index) => {
|
||||
if (index === props.tempOffsetIndex && props.tempOffset) {
|
||||
return { ...sprite, offset: props.tempOffset }
|
||||
}
|
||||
return sprite
|
||||
})
|
||||
})
|
||||
|
||||
function updateContainerSize(event: Event) {
|
||||
const img = event.target as HTMLImageElement
|
||||
maxWidth.value = Math.max(maxWidth.value, img.naturalWidth)
|
||||
maxHeight.value = Math.max(maxHeight.value, img.naturalHeight)
|
||||
}
|
||||
|
||||
function updateAnimation() {
|
||||
stopAnimation()
|
||||
if (props.frameRate <= 0 || props.sprites.length === 0) {
|
||||
currentFrame.value = 0
|
||||
return
|
||||
}
|
||||
|
||||
animationInterval = window.setInterval(() => {
|
||||
currentFrame.value = (currentFrame.value + 1) % props.sprites.length
|
||||
}, 1000 / props.frameRate)
|
||||
}
|
||||
|
||||
function stopAnimation() {
|
||||
if (animationInterval) {
|
||||
clearInterval(animationInterval)
|
||||
animationInterval = null
|
||||
}
|
||||
}
|
||||
|
||||
function updateFrameRate() {
|
||||
emit('update:frameRate', localFrameRate.value)
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
emit('update:isModalOpen', false)
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.frameRate,
|
||||
(newValue) => {
|
||||
localFrameRate.value = newValue
|
||||
updateAnimation()
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
watch(() => props.sprites, updateAnimation, { immediate: true })
|
||||
|
||||
onMounted(() => {
|
||||
updateAnimation()
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
stopAnimation()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sprite-container {
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
@ -13,11 +13,11 @@
|
||||
</div>
|
||||
<div class="form-field-half">
|
||||
<label for="name">Width</label>
|
||||
<input class="input-field max-w-64" v-model="width" name="name" id="name" type="number" />
|
||||
<input class="input-field max-w-64" v-model="width" name="width" id="width" type="number" />
|
||||
</div>
|
||||
<div class="form-field-half">
|
||||
<label for="name">Height</label>
|
||||
<input class="input-field max-w-64" v-model="height" name="name" id="name" type="number" />
|
||||
<input class="input-field max-w-64" v-model="height" name="height" id="height" type="number" />
|
||||
</div>
|
||||
<div class="form-field-full">
|
||||
<label for="name">PVP enabled</label>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="flex justify-center p-5">
|
||||
<div class="toolbar fixed bottom-0 left-0 m-3 rounded flex bg-gray solid border-solid border-2 border-gray-500 text-gray-300 p-1.5 px-3 h-10">
|
||||
<div class="toolbar fixed bottom-0 left-0 m-3 rounded flex bg-gray solid border-solid border-2 border-gray-500 text-gray-300 p-1.5 px-3 h-10 z-20">
|
||||
<div ref="toolbar" class="tools flex gap-2.5" v-if="mapEditor.currentMap.value">
|
||||
<button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan gap-2.5': mapEditor.tool.value === 'move' }" @click="handleClick('move')">
|
||||
<img class="invert w-5 h-5" src="/assets/icons/mapEditor/move.svg" alt="Move camera" /> <span class="h-5" :class="{ 'ml-2.5': mapEditor.tool.value !== 'move' }">(M)</span>
|
||||
@ -40,7 +40,7 @@
|
||||
<div class="select" v-if="mapEditor.tool.value === 'eraser'">
|
||||
<div class="select-trigger group capitalize flex gap-3.5" :class="{ open: selectEraserOpen }">
|
||||
{{ mapEditor.drawMode.value.replace('_', ' ') }}
|
||||
<img class="group-[.open]:rotate-180 invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/mapEditor/chevron.svg" />
|
||||
<img class="group-[.open]:rotate-180 invert w-5 h-5 rotate-0 transition ease-in-out duration-200" src="/assets/icons/mapEditor/chevron.svg" alt="" />
|
||||
</div>
|
||||
<div class="flex flex-col absolute bottom-full mb-5 left-1/2 -translate-x-1/2 bg-gray rounded min-w-28 border border-gray-500 border-solid text-left" v-show="selectEraserOpen">
|
||||
<span class="py-2 px-2.5 relative hover:bg-cyan hover:text-white" @click="() => handleModeClick('tile', 'eraser')">
|
||||
@ -111,7 +111,7 @@ defineExpose({ tileListShown, mapObjectListShown })
|
||||
|
||||
// drawMode
|
||||
function setDrawMode(value: string) {
|
||||
if (mapEditor.tool.value === 'paint' || mapEditor.tool.value === 'pencil') {
|
||||
if (mapEditor.tool.value === 'paint' || mapEditor.tool.value === 'pencil' || mapEditor.tool.value === 'eraser') {
|
||||
emit('close-lists')
|
||||
if (value === 'tile') emit('open-tile-list')
|
||||
if (value === 'map_object') emit('open-map-object-list')
|
||||
@ -145,6 +145,10 @@ function handleModeClick(mode: string, type: 'pencil' | 'eraser') {
|
||||
function handleClick(tool: string) {
|
||||
if (tool === 'settings') {
|
||||
emit('open-settings')
|
||||
emit('close-lists')
|
||||
} else if (tool === 'move') {
|
||||
emit('close-lists')
|
||||
mapEditor.setTool(tool)
|
||||
} else {
|
||||
mapEditor.setTool(tool)
|
||||
}
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
<button class="ml-6 w-4 h-8 p-0">
|
||||
<img src="/assets/icons/triangle-icon.svg" class="w-3 h-3.5 m-auto" alt="Arrow left" />
|
||||
</button>
|
||||
<img class="w-24 object-contain mb-3.5" alt="Player avatar" :src="config.server_endpoint + '/avatar/s/' + characters.find((c) => c.id === selectedCharacterId)?.characterType + '/' + (selectedHairId ?? 'default')" />
|
||||
<img class="w-24 object-contain mb-3.5 max-h-[70%]" alt="Player avatar" :src="config.server_endpoint + '/avatar/s/' + characters.find((c) => c.id === selectedCharacterId)?.characterType + '/' + (selectedHairId ?? 'default')" />
|
||||
<button class="mr-6 w-4 h-8 p-0">
|
||||
<img src="/assets/icons/triangle-icon.svg" class="w-3 h-3.5 -scale-x-100" alt="Arrow right" />
|
||||
</button>
|
||||
@ -87,7 +87,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<img class="w-20 invert-80" src="/assets/icons/loading-icon1.svg" />
|
||||
<img class="w-20 invert-80" src="/assets/icons/loading-icon1.svg" alt="Loading" />
|
||||
</div>
|
||||
|
||||
<div class="w-2/3 button-wrapper flex self-center justify-center lg:justify-end gap-4 max-w-[860px]" v-if="!isLoading">
|
||||
@ -131,11 +131,11 @@ import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
||||
const gameStore = useGameStore()
|
||||
const isLoading = ref<boolean>(true)
|
||||
const characters = ref<CharacterT[]>([])
|
||||
const selectedCharacterId = ref<number | null>(null)
|
||||
const selectedCharacterId = ref<string | null>(null)
|
||||
const isCreateNewCharacterModalOpen = ref<boolean>(false)
|
||||
const newCharacterName = ref<string>('')
|
||||
const characterHairs = ref<CharacterHair[]>([])
|
||||
const selectedHairId = ref<number | null>(null)
|
||||
const selectedHairId = ref<string | null>(null)
|
||||
|
||||
// Fetch characters
|
||||
setTimeout(() => {
|
||||
|
||||
@ -1,16 +1,6 @@
|
||||
<template>
|
||||
<div class="flex flex-col justify-center items-center h-dvh relative col">
|
||||
<svg width="40" height="40" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="4" cy="12" r="3" fill="white">
|
||||
<animate id="spinner_qFRN" begin="0;spinner_OcgL.end+0.25s" attributeName="cy" calcMode="spline" dur="0.6s" values="12;6;12" keySplines=".33,.66,.66,1;.33,0,.66,.33" />
|
||||
</circle>
|
||||
<circle cx="12" cy="12" r="3" fill="white">
|
||||
<animate begin="spinner_qFRN.begin+0.1s" attributeName="cy" calcMode="spline" dur="0.6s" values="12;6;12" keySplines=".33,.66,.66,1;.33,0,.66,.33" />
|
||||
</circle>
|
||||
<circle cx="20" cy="12" r="3" fill="white">
|
||||
<animate id="spinner_OcgL" begin="spinner_qFRN.begin+0.2s" attributeName="cy" calcMode="spline" dur="0.6s" values="12;6;12" keySplines=".33,.66,.66,1;.33,0,.66,.33" />
|
||||
</circle>
|
||||
</svg>
|
||||
<img class="w-20 invert-80" src="/assets/icons/loading-icon1.svg" alt="Loading" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -8,8 +8,8 @@
|
||||
<div class="h-dvh flex items-center lg:justify-center flex-col px-8 max-lg:pt-20">
|
||||
<!-- <img src="/assets/tlogo.png" class="mb-10 w-52" alt="Noxious logo" />-->
|
||||
<div class="relative">
|
||||
<img src="/assets/ui-elements/login-ui-box-outer.svg" class="absolute w-full h-full" alt="UI box outer" />
|
||||
<img src="/assets/ui-elements/login-ui-box-inner.svg" class="absolute left-2 top-2 w-[calc(100%_-_16px)] h-[calc(100%_-_16px)]" alt="UI box inner" />
|
||||
<img src="/assets/ui-elements/login-ui-box-outer.svg" class="absolute w-full h-full" alt="" />
|
||||
<img src="/assets/ui-elements/login-ui-box-inner.svg" class="absolute left-2 top-2 w-[calc(100%_-_16px)] h-[calc(100%_-_16px)]" alt="" />
|
||||
|
||||
<!-- Login Form -->
|
||||
<LoginForm v-if="currentForm === 'login' && !doesUrlHaveToken" @openResetPasswordModal="() => (isPasswordResetFormShown = true)" @switchToRegister="currentForm = 'register'" />
|
||||
|
||||
@ -12,13 +12,14 @@
|
||||
@open-maps="mapModal?.open"
|
||||
@open-settings="mapSettingsModal?.open"
|
||||
@close-editor="mapEditor.toggleActive"
|
||||
@close-lists="closeLists"
|
||||
@open-tile-list="tileModal?.open"
|
||||
@open-map-object-list="objectModal?.open"
|
||||
@close-lists="tileList?.close"
|
||||
@closeLists="objectList?.close"
|
||||
@open-tile-list="tileList?.open"
|
||||
@open-map-object-list="objectList?.open"
|
||||
/>
|
||||
<MapList ref="mapModal" @open-create-map="mapSettingsModal?.open" />
|
||||
<TileList ref="tileModal" />
|
||||
<ObjectList ref="objectModal" />
|
||||
<TileList ref="tileList" />
|
||||
<ObjectList ref="objectList" />
|
||||
<MapSettings ref="mapSettingsModal" />
|
||||
<TeleportModal ref="teleportModal" />
|
||||
</div>
|
||||
@ -52,8 +53,8 @@ const gameStore = useGameStore()
|
||||
|
||||
const toolbar = useTemplateRef('toolbar')
|
||||
const mapModal = useTemplateRef('mapModal')
|
||||
const tileModal = useTemplateRef('tileModal')
|
||||
const objectModal = useTemplateRef('objectModal')
|
||||
const tileList = useTemplateRef('tileList')
|
||||
const objectList = useTemplateRef('objectList')
|
||||
const mapSettingsModal = useTemplateRef('mapSettingsModal')
|
||||
const teleportModal = useTemplateRef('teleportModal')
|
||||
|
||||
@ -115,10 +116,10 @@ function save() {
|
||||
}
|
||||
|
||||
function closeLists() {
|
||||
tileModal.value?.getModal()?.setPosition(window.innerWidth-650,6)
|
||||
tileModal.value?.close()
|
||||
objectModal.value?.getModal()?.setPosition(window.innerWidth-650,6)
|
||||
objectModal.value?.close()
|
||||
tileList.value?.getModal()?.setPosition(window.innerWidth-650,6)
|
||||
tileList.value?.close()
|
||||
objectList.value?.getModal()?.setPosition(window.innerWidth-650,6)
|
||||
objectList.value?.close()
|
||||
}
|
||||
|
||||
function clear() {
|
||||
|
||||
@ -3,8 +3,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useCameraControls } from '@/composables/useCameraControls'
|
||||
import { usePointerHandlers } from '@/composables/usePointerHandlers'
|
||||
import { useControlsComposable } from '@/composables/useControlsComposable'
|
||||
import { Image, useScene } from 'phavuer'
|
||||
import { onBeforeUnmount, ref } from 'vue'
|
||||
|
||||
@ -14,45 +13,16 @@ type WayPoint = { visible: boolean; x: number; y: number }
|
||||
// Props
|
||||
const props = defineProps<{ layer: Phaser.Tilemaps.TilemapLayer }>()
|
||||
|
||||
// Constants
|
||||
const ZOOM_SETTINGS = {
|
||||
WHEEL_FACTOR: 0.005,
|
||||
KEY_FACTOR: 0.3,
|
||||
MIN: 1,
|
||||
MAX: 3
|
||||
} as const
|
||||
|
||||
// Setup
|
||||
const scene = useScene()
|
||||
const waypoint = ref<WayPoint>({ visible: false, x: 0, y: 0 })
|
||||
const { camera } = useCameraControls(scene)
|
||||
const { setupPointerHandlers, cleanupPointerHandlers } = usePointerHandlers(scene, props.layer, waypoint, camera)
|
||||
|
||||
// Handlers
|
||||
function handleScrollZoom(pointer: Phaser.Input.Pointer) {
|
||||
if (!(pointer.event instanceof WheelEvent && pointer.event.shiftKey)) return
|
||||
|
||||
const zoomLevel = Phaser.Math.Clamp(camera.zoom - pointer.event.deltaY * ZOOM_SETTINGS.WHEEL_FACTOR, ZOOM_SETTINGS.MIN, ZOOM_SETTINGS.MAX)
|
||||
camera.setZoom(zoomLevel)
|
||||
}
|
||||
|
||||
function handleKeyComboZoom(event: { keyCodes: number[] }) {
|
||||
const deltaY = event.keyCodes[1] === 38 ? 1 : -1 // 38 is Up, 40 is Down
|
||||
const zoomLevel = Phaser.Math.Clamp(camera.zoom + deltaY * ZOOM_SETTINGS.KEY_FACTOR, ZOOM_SETTINGS.MIN, ZOOM_SETTINGS.MAX)
|
||||
camera.setZoom(zoomLevel)
|
||||
}
|
||||
const { setupControls, cleanupControls } = useControlsComposable(scene, props.layer, waypoint)
|
||||
|
||||
// Event setup
|
||||
setupPointerHandlers()
|
||||
scene.input.keyboard?.createCombo([16, 38], { resetOnMatch: true }) // Shift + Up
|
||||
scene.input.keyboard?.createCombo([16, 40], { resetOnMatch: true }) // Shift + Down
|
||||
scene.input.keyboard?.on('keycombomatch', handleKeyComboZoom)
|
||||
scene.input.on(Phaser.Input.Events.POINTER_WHEEL, handleScrollZoom)
|
||||
setupControls()
|
||||
|
||||
// Cleanup
|
||||
onBeforeUnmount(() => {
|
||||
cleanupPointerHandlers()
|
||||
scene.input.keyboard?.off('keycombomatch')
|
||||
scene.input.off(Phaser.Input.Events.POINTER_WHEEL, handleScrollZoom)
|
||||
cleanupControls()
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
<button v-if="canFullScreen" @click="toggleFullScreen" class="w-5 h-5 m-0 p-0 relative hover:scale-110 transition-transform duration-300 ease-in-out">
|
||||
<img :alt="isFullScreen ? 'exit full-screen' : 'full-screen'" :src="isFullScreen ? '/assets/icons/modal/minimize.svg' : '/assets/icons/modal/increase-size-option.svg'" class="w-3.5 h-3.5 invert" draggable="false" />
|
||||
</button>
|
||||
<button v-if="closable" @click="isModalOpenRef = false" class="w-3.5 h-3.5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out">
|
||||
<button v-if="closable" @click="closeModal" class="w-3.5 h-3.5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out">
|
||||
<img alt="close" src="/assets/icons/modal/close-button-white.svg" class="w-full h-full" draggable="false" />
|
||||
</button>
|
||||
</div>
|
||||
@ -81,7 +81,6 @@ const props = withDefaults(defineProps<ModalProps>(), {
|
||||
const emit = defineEmits<{
|
||||
'modal:open': []
|
||||
'modal:close': []
|
||||
'character:create': []
|
||||
}>()
|
||||
|
||||
defineExpose({
|
||||
@ -158,6 +157,11 @@ function drag(event: MouseEvent) {
|
||||
y.value = dragState.initialY + (event.clientY - dragState.startY)
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
isModalOpenRef.value = false
|
||||
emit('modal:close')
|
||||
}
|
||||
|
||||
function toggleFullScreen() {
|
||||
if (isFullScreen.value) {
|
||||
Object.assign({ x, y, width, height }, preFullScreenState)
|
||||
|
||||
69
src/composables/controls/useBaseControlsComposable.ts
Normal file
69
src/composables/controls/useBaseControlsComposable.ts
Normal file
@ -0,0 +1,69 @@
|
||||
import config from '@/application/config'
|
||||
import { getTile, tileToWorldXY } from '@/composables/mapComposable'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { ref, type Ref } from 'vue'
|
||||
|
||||
export function useBaseControlsComposable(scene: Phaser.Scene, layer: Phaser.Tilemaps.TilemapLayer, waypoint: Ref<{ visible: boolean; x: number; y: number }>, camera: Phaser.Cameras.Scene2D.Camera) {
|
||||
const gameStore = useGameStore()
|
||||
const pointerStartPosition = ref({ x: 0, y: 0 })
|
||||
const dragThreshold = 5 // pixels
|
||||
|
||||
function updateWaypoint(worldX: number, worldY: number) {
|
||||
const pointerTile = getTile(layer, worldX, worldY)
|
||||
if (!pointerTile) {
|
||||
waypoint.value.visible = false
|
||||
return
|
||||
}
|
||||
const worldPoint = tileToWorldXY(layer, pointerTile.x, pointerTile.y)
|
||||
if (!worldPoint.worldPositionX || !worldPoint.worldPositionX) return
|
||||
|
||||
waypoint.value = {
|
||||
visible: true,
|
||||
x: worldPoint.worldPositionX,
|
||||
y: worldPoint.worldPositionY + config.tile_size.height + 15
|
||||
}
|
||||
}
|
||||
|
||||
function handleDragMap(pointer: Phaser.Input.Pointer) {
|
||||
if (!gameStore.game.isPlayerDraggingCamera) return
|
||||
|
||||
const deltaX = pointer.x - pointerStartPosition.value.x
|
||||
const deltaY = pointer.y - pointerStartPosition.value.y
|
||||
|
||||
if (Math.abs(deltaX) <= dragThreshold && Math.abs(deltaY) <= dragThreshold) return
|
||||
|
||||
const scrollX = camera.scrollX - deltaX / camera.zoom
|
||||
const scrollY = camera.scrollY - deltaY / camera.zoom
|
||||
|
||||
camera.setScroll(scrollX, scrollY)
|
||||
pointerStartPosition.value = { x: pointer.x, y: pointer.y }
|
||||
}
|
||||
|
||||
function startDragging(pointer: Phaser.Input.Pointer) {
|
||||
pointerStartPosition.value = { x: pointer.x, y: pointer.y }
|
||||
gameStore.setPlayerDraggingCamera(true)
|
||||
}
|
||||
|
||||
function stopDragging() {
|
||||
gameStore.setPlayerDraggingCamera(false)
|
||||
}
|
||||
|
||||
function handleZoom(pointer: Phaser.Input.Pointer) {
|
||||
if (pointer.event instanceof WheelEvent && pointer.event.shiftKey) {
|
||||
const deltaY = pointer.event.deltaY
|
||||
const zoomLevel = camera.zoom - deltaY * 0.005
|
||||
if (zoomLevel > 0 && zoomLevel < 3) {
|
||||
camera.setZoom(zoomLevel)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
updateWaypoint,
|
||||
handleDragMap,
|
||||
startDragging,
|
||||
stopDragging,
|
||||
handleZoom,
|
||||
pointerStartPosition
|
||||
}
|
||||
}
|
||||
114
src/composables/controls/useGameControlsComposable.ts
Normal file
114
src/composables/controls/useGameControlsComposable.ts
Normal file
@ -0,0 +1,114 @@
|
||||
import { getTile } from '@/composables/mapComposable'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import type { Ref } from 'vue'
|
||||
import { useBaseControlsComposable } from './useBaseControlsComposable'
|
||||
|
||||
export function useGameControlsComposable(scene: Phaser.Scene, layer: Phaser.Tilemaps.TilemapLayer, waypoint: Ref<{ visible: boolean; x: number; y: number }>, camera: Phaser.Cameras.Scene2D.Camera) {
|
||||
const gameStore = useGameStore()
|
||||
const baseHandlers = useBaseControlsComposable(scene, layer, waypoint, camera)
|
||||
|
||||
function handlePointerDown(pointer: Phaser.Input.Pointer) {
|
||||
baseHandlers.startDragging(pointer)
|
||||
}
|
||||
|
||||
function handlePointerMove(pointer: Phaser.Input.Pointer) {
|
||||
baseHandlers.updateWaypoint(pointer.worldX, pointer.worldY)
|
||||
baseHandlers.handleDragMap(pointer)
|
||||
}
|
||||
|
||||
function handlePointerUp(pointer: Phaser.Input.Pointer) {
|
||||
baseHandlers.stopDragging()
|
||||
|
||||
const pointerTile = getTile(layer, pointer.worldX, pointer.worldY)
|
||||
if (!pointerTile) return
|
||||
|
||||
gameStore.connection?.emit('map:character:move', {
|
||||
positionX: pointerTile.x,
|
||||
positionY: pointerTile.y
|
||||
})
|
||||
}
|
||||
|
||||
const pressedKeys = new Set<string>()
|
||||
let moveInterval: number | null = null
|
||||
|
||||
function handleKeyDown(event: KeyboardEvent) {
|
||||
if (!gameStore.character) return
|
||||
|
||||
// console.log(event.key)
|
||||
|
||||
if (['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown'].includes(event.key)) {
|
||||
pressedKeys.add(event.key)
|
||||
|
||||
// Start movement loop if not already running
|
||||
if (!moveInterval) {
|
||||
moveInterval = window.setInterval(moveCharacter, 250) // Adjust timing as needed
|
||||
moveCharacter() // Move immediately on first press
|
||||
}
|
||||
}
|
||||
|
||||
// Attack on CTRL
|
||||
if (event.key === 'Control') {
|
||||
gameStore.connection?.emit('map:character:attack')
|
||||
}
|
||||
}
|
||||
|
||||
function handleKeyUp(event: KeyboardEvent) {
|
||||
pressedKeys.delete(event.key)
|
||||
|
||||
// If no movement keys are pressed, clear the interval
|
||||
if (pressedKeys.size === 0 && moveInterval) {
|
||||
clearInterval(moveInterval)
|
||||
moveInterval = null
|
||||
}
|
||||
}
|
||||
|
||||
function moveCharacter() {
|
||||
if (!gameStore.character) return
|
||||
const { positionX, positionY } = gameStore.character
|
||||
|
||||
if (pressedKeys.has('ArrowLeft')) {
|
||||
gameStore.connection?.emit('map:character:move', {
|
||||
positionX: positionX - 1,
|
||||
positionY: positionY
|
||||
})
|
||||
}
|
||||
if (pressedKeys.has('ArrowRight')) {
|
||||
gameStore.connection?.emit('map:character:move', {
|
||||
positionX: positionX + 1,
|
||||
positionY: positionY
|
||||
})
|
||||
}
|
||||
if (pressedKeys.has('ArrowUp')) {
|
||||
gameStore.connection?.emit('map:character:move', {
|
||||
positionX: positionX,
|
||||
positionY: positionY - 1
|
||||
})
|
||||
}
|
||||
if (pressedKeys.has('ArrowDown')) {
|
||||
gameStore.connection?.emit('map:character:move', {
|
||||
positionX: positionX,
|
||||
positionY: positionY + 1
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const setupControls = () => {
|
||||
scene.input.on(Phaser.Input.Events.POINTER_DOWN, handlePointerDown)
|
||||
scene.input.on(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
|
||||
scene.input.on(Phaser.Input.Events.POINTER_UP, handlePointerUp)
|
||||
scene.input.on(Phaser.Input.Events.POINTER_WHEEL, baseHandlers.handleZoom)
|
||||
scene.input.keyboard!.on('keydown', handleKeyDown)
|
||||
scene.input.keyboard!.on('keyup', handleKeyUp)
|
||||
}
|
||||
|
||||
const cleanupControls = () => {
|
||||
scene.input.off(Phaser.Input.Events.POINTER_DOWN, handlePointerDown)
|
||||
scene.input.off(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
|
||||
scene.input.off(Phaser.Input.Events.POINTER_UP, handlePointerUp)
|
||||
scene.input.off(Phaser.Input.Events.POINTER_WHEEL, baseHandlers.handleZoom)
|
||||
scene.input.keyboard!.off('keydown', handleKeyDown)
|
||||
scene.input.keyboard!.off('keyup', handleKeyUp)
|
||||
}
|
||||
|
||||
return { setupControls, cleanupControls }
|
||||
}
|
||||
42
src/composables/controls/useMapEditorControlsComposable.ts
Normal file
42
src/composables/controls/useMapEditorControlsComposable.ts
Normal file
@ -0,0 +1,42 @@
|
||||
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
|
||||
import { computed, type Ref } from 'vue'
|
||||
import { useBaseControlsComposable } from './useBaseControlsComposable'
|
||||
|
||||
export function useMapEditorControlsComposable(scene: Phaser.Scene, layer: Phaser.Tilemaps.TilemapLayer, waypoint: Ref<{ visible: boolean; x: number; y: number }>, camera: Phaser.Cameras.Scene2D.Camera) {
|
||||
const mapEditor = useMapEditorComposable()
|
||||
const baseHandlers = useBaseControlsComposable(scene, layer, waypoint, camera)
|
||||
const isMoveTool = computed(() => mapEditor.tool.value === 'move')
|
||||
|
||||
function handlePointerDown(pointer: Phaser.Input.Pointer) {
|
||||
if (isMoveTool.value || pointer.event.shiftKey) {
|
||||
baseHandlers.startDragging(pointer)
|
||||
}
|
||||
}
|
||||
|
||||
function handlePointerMove(pointer: Phaser.Input.Pointer) {
|
||||
if (isMoveTool.value || pointer.event.shiftKey) {
|
||||
baseHandlers.handleDragMap(pointer)
|
||||
}
|
||||
baseHandlers.updateWaypoint(pointer.worldX, pointer.worldY)
|
||||
}
|
||||
|
||||
function handlePointerUp(pointer: Phaser.Input.Pointer) {
|
||||
baseHandlers.stopDragging()
|
||||
}
|
||||
|
||||
const setupControls = () => {
|
||||
scene.input.on(Phaser.Input.Events.POINTER_DOWN, handlePointerDown)
|
||||
scene.input.on(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
|
||||
scene.input.on(Phaser.Input.Events.POINTER_UP, handlePointerUp)
|
||||
scene.input.on(Phaser.Input.Events.POINTER_WHEEL, baseHandlers.handleZoom)
|
||||
}
|
||||
|
||||
const cleanupControls = () => {
|
||||
scene.input.off(Phaser.Input.Events.POINTER_DOWN, handlePointerDown)
|
||||
scene.input.off(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
|
||||
scene.input.off(Phaser.Input.Events.POINTER_UP, handlePointerUp)
|
||||
scene.input.off(Phaser.Input.Events.POINTER_WHEEL, baseHandlers.handleZoom)
|
||||
}
|
||||
|
||||
return { setupControls, cleanupControls }
|
||||
}
|
||||
@ -59,7 +59,6 @@ export async function loadTexture(scene: Phaser.Scene, textureData: TextureData)
|
||||
export async function loadSpriteTextures(scene: Phaser.Scene, sprite_id: string) {
|
||||
if (!sprite_id) return false
|
||||
|
||||
// @TODO: Fix this
|
||||
const spriteStorage = new SpriteStorage()
|
||||
const sprite = await spriteStorage.get(sprite_id)
|
||||
|
||||
|
||||
@ -1,70 +0,0 @@
|
||||
import config from '@/application/config'
|
||||
import { getTile, tileToWorldXY } from '@/composables/mapComposable'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { ref, type Ref } from 'vue'
|
||||
|
||||
export function useGamePointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilemaps.TilemapLayer, waypoint: Ref<{ visible: boolean; x: number; y: number }>, camera: Phaser.Cameras.Scene2D.Camera) {
|
||||
const gameStore = useGameStore()
|
||||
const pointerStartPosition = ref({ x: 0, y: 0 })
|
||||
const dragThreshold = 5 // pixels
|
||||
|
||||
function updateWaypoint(worldX: number, worldY: number) {
|
||||
const pointerTile = getTile(layer, worldX, worldY)
|
||||
if (!pointerTile) {
|
||||
waypoint.value.visible = false
|
||||
return
|
||||
}
|
||||
const worldPoint = tileToWorldXY(layer, pointerTile.x, pointerTile.y)
|
||||
if (!worldPoint.worldPositionX || !worldPoint.worldPositionX) return
|
||||
|
||||
waypoint.value = {
|
||||
visible: true,
|
||||
x: worldPoint.worldPositionX,
|
||||
y: worldPoint.worldPositionY + config.tile_size.height + 15
|
||||
}
|
||||
}
|
||||
|
||||
function handlePointerDown(pointer: Phaser.Input.Pointer) {
|
||||
pointerStartPosition.value = pointer.position
|
||||
gameStore.setPlayerDraggingCamera(true)
|
||||
}
|
||||
|
||||
function handlePointerMove(pointer: Phaser.Input.Pointer) {
|
||||
updateWaypoint(pointer.worldX, pointer.worldY)
|
||||
|
||||
if (!gameStore.game.isPlayerDraggingCamera) return
|
||||
|
||||
// If the distance is less than the drag threshold, return
|
||||
// We do this to prevent the camera from scrolling too quickly
|
||||
const distance = Phaser.Math.Distance.Between(pointerStartPosition.value.x, pointerStartPosition.value.y, pointer.x, pointer.y)
|
||||
if (distance <= dragThreshold) return
|
||||
|
||||
camera.setScroll(camera.scrollX - (pointer.x - pointer.prevPosition.x) / camera.zoom, camera.scrollY - (pointer.y - pointer.prevPosition.y) / camera.zoom)
|
||||
}
|
||||
|
||||
function handlePointerUp(pointer: Phaser.Input.Pointer) {
|
||||
gameStore.setPlayerDraggingCamera(false)
|
||||
|
||||
const pointerTile = getTile(layer, pointer.worldX, pointer.worldY)
|
||||
if (!pointerTile) return
|
||||
|
||||
gameStore.connection?.emit('map:character:move', {
|
||||
positionX: pointerTile.x,
|
||||
positionY: pointerTile.y
|
||||
})
|
||||
}
|
||||
|
||||
const setupPointerHandlers = () => {
|
||||
scene.input.on(Phaser.Input.Events.POINTER_DOWN, handlePointerDown)
|
||||
scene.input.on(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
|
||||
scene.input.on(Phaser.Input.Events.POINTER_UP, handlePointerUp)
|
||||
}
|
||||
|
||||
const cleanupPointerHandlers = () => {
|
||||
scene.input.off(Phaser.Input.Events.POINTER_DOWN, handlePointerDown)
|
||||
scene.input.off(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
|
||||
scene.input.off(Phaser.Input.Events.POINTER_UP, handlePointerUp)
|
||||
}
|
||||
|
||||
return { setupPointerHandlers, cleanupPointerHandlers }
|
||||
}
|
||||
@ -1,85 +0,0 @@
|
||||
import config from '@/application/config'
|
||||
import { getTile, tileToWorldXY } from '@/composables/mapComposable'
|
||||
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { computed, ref, type Ref } from 'vue'
|
||||
|
||||
export function useMapEditorPointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilemaps.TilemapLayer, waypoint: Ref<{ visible: boolean; x: number; y: number }>, camera: Phaser.Cameras.Scene2D.Camera) {
|
||||
const gameStore = useGameStore()
|
||||
const mapEditor = useMapEditorComposable()
|
||||
const pointerStartPosition = ref({ x: 0, y: 0 })
|
||||
const dragThreshold = 5 // pixels
|
||||
|
||||
function updateWaypoint(worldX: number, worldY: number) {
|
||||
const pointerTile = getTile(layer, worldX, worldY)
|
||||
if (!pointerTile) {
|
||||
waypoint.value.visible = false
|
||||
return
|
||||
}
|
||||
const worldPoint = tileToWorldXY(layer, pointerTile.x, pointerTile.y)
|
||||
if (!worldPoint.worldPositionX || !worldPoint.worldPositionX) return
|
||||
|
||||
waypoint.value = {
|
||||
visible: true,
|
||||
x: worldPoint.worldPositionX,
|
||||
y: worldPoint.worldPositionY + config.tile_size.height + 15
|
||||
}
|
||||
}
|
||||
|
||||
function handlePointerDown(pointer: Phaser.Input.Pointer) {
|
||||
pointerStartPosition.value = { x: pointer.x, y: pointer.y }
|
||||
if (mapEditor.tool.value === 'move' || pointer.event.shiftKey) {
|
||||
gameStore.setPlayerDraggingCamera(true)
|
||||
}
|
||||
}
|
||||
|
||||
function dragMap(pointer: Phaser.Input.Pointer) {
|
||||
if (!gameStore.game.isPlayerDraggingCamera) return
|
||||
|
||||
const distance = Phaser.Math.Distance.Between(pointerStartPosition.value.x, pointerStartPosition.value.y, pointer.x, pointer.y)
|
||||
|
||||
// If the distance is less than the drag threshold, return
|
||||
// We do this to prevent the camera from scrolling too quickly
|
||||
|
||||
if (distance <= dragThreshold) return
|
||||
|
||||
camera.setScroll(camera.scrollX - (pointer.x - pointer.prevPosition.x) / camera.zoom, camera.scrollY - (pointer.y - pointer.prevPosition.y) / camera.zoom)
|
||||
}
|
||||
|
||||
function handlePointerMove(pointer: Phaser.Input.Pointer) {
|
||||
if (mapEditor.tool.value === 'move' || pointer.event.shiftKey) {
|
||||
dragMap(pointer)
|
||||
}
|
||||
updateWaypoint(pointer.worldX, pointer.worldY)
|
||||
}
|
||||
|
||||
function handlePointerUp(pointer: Phaser.Input.Pointer) {
|
||||
gameStore.setPlayerDraggingCamera(false)
|
||||
}
|
||||
|
||||
function handleZoom(pointer: Phaser.Input.Pointer) {
|
||||
if (pointer.event instanceof WheelEvent && pointer.event.shiftKey) {
|
||||
const deltaY = pointer.event.deltaY
|
||||
const zoomLevel = camera.zoom - deltaY * 0.005
|
||||
if (zoomLevel > 0 && zoomLevel < 3) {
|
||||
camera.setZoom(zoomLevel)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const setupPointerHandlers = () => {
|
||||
scene.input.on(Phaser.Input.Events.POINTER_DOWN, handlePointerDown)
|
||||
scene.input.on(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
|
||||
scene.input.on(Phaser.Input.Events.POINTER_UP, handlePointerUp)
|
||||
scene.input.on(Phaser.Input.Events.POINTER_WHEEL, handleZoom)
|
||||
}
|
||||
|
||||
const cleanupPointerHandlers = () => {
|
||||
scene.input.off(Phaser.Input.Events.POINTER_DOWN, handlePointerDown)
|
||||
scene.input.off(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
|
||||
scene.input.off(Phaser.Input.Events.POINTER_UP, handlePointerUp)
|
||||
scene.input.off(Phaser.Input.Events.POINTER_WHEEL, handleZoom)
|
||||
}
|
||||
|
||||
return { setupPointerHandlers, cleanupPointerHandlers }
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useMapStore } from '@/stores/mapStore'
|
||||
|
||||
export function useCameraControls(scene: Phaser.Scene) {
|
||||
const gameStore = useGameStore()
|
||||
const camera = scene.cameras.main
|
||||
|
||||
const onPointerDown = () => gameStore.setPlayerDraggingCamera(true)
|
||||
const onPointerUp = () => gameStore.setPlayerDraggingCamera(false)
|
||||
|
||||
scene.input.on(Phaser.Input.Events.POINTER_DOWN, onPointerDown)
|
||||
scene.input.on(Phaser.Input.Events.POINTER_UP, onPointerUp)
|
||||
|
||||
return { camera }
|
||||
}
|
||||
136
src/composables/useCharacterSpriteComposable.ts
Normal file
136
src/composables/useCharacterSpriteComposable.ts
Normal file
@ -0,0 +1,136 @@
|
||||
import { Direction } from '@/application/enums'
|
||||
import { type MapCharacter } from '@/application/types'
|
||||
import { loadSpriteTextures } from '@/composables/gameComposable'
|
||||
import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/mapComposable'
|
||||
import { CharacterTypeStorage } from '@/storage/storages'
|
||||
import { refObj } from 'phavuer'
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
export function useCharacterSprite(scene: Phaser.Scene, tilemap: Phaser.Tilemaps.Tilemap, mapCharacter: MapCharacter) {
|
||||
const characterContainer = refObj<Phaser.GameObjects.Container>()
|
||||
const characterSpriteId = ref('')
|
||||
const characterSprite = refObj<Phaser.GameObjects.Sprite>()
|
||||
const currentPositionX = ref(0)
|
||||
const currentPositionY = ref(0)
|
||||
const isometricDepth = ref(1)
|
||||
const isInitialPosition = ref(true)
|
||||
const tween = ref<Phaser.Tweens.Tween | null>(null)
|
||||
|
||||
const updateIsometricDepth = (positionX: number, positionY: number) => {
|
||||
isometricDepth.value = calculateIsometricDepth(positionX, positionY, 28, 94, true)
|
||||
}
|
||||
|
||||
const updatePosition = (positionX: number, positionY: number, direction: Direction) => {
|
||||
const newPositionX = tileToWorldX(tilemap, positionX, positionY)
|
||||
const newPositionY = tileToWorldY(tilemap, positionX, positionY)
|
||||
|
||||
if (isInitialPosition.value) {
|
||||
currentPositionX.value = newPositionX
|
||||
currentPositionY.value = newPositionY
|
||||
isInitialPosition.value = false
|
||||
return
|
||||
}
|
||||
|
||||
if (tween.value?.isPlaying()) {
|
||||
tween.value.stop()
|
||||
}
|
||||
|
||||
const distance = Math.sqrt(Math.pow(newPositionX - currentPositionX.value, 2) + Math.pow(newPositionY - currentPositionY.value, 2))
|
||||
const baseSpeed = 150 // pixels per second
|
||||
const duration = (distance / baseSpeed) * 1000 // Convert to milliseconds
|
||||
|
||||
tween.value = tilemap.scene.tweens.add({
|
||||
targets: characterContainer.value,
|
||||
x: newPositionX,
|
||||
y: newPositionY,
|
||||
duration,
|
||||
ease: 'Linear',
|
||||
onStart: () => {
|
||||
if (direction === Direction.POSITIVE) {
|
||||
updateIsometricDepth(positionX, positionY)
|
||||
}
|
||||
},
|
||||
onUpdate: () => {
|
||||
currentPositionX.value = characterContainer.value?.x ?? currentPositionX.value
|
||||
currentPositionY.value = characterContainer.value?.y ?? currentPositionY.value
|
||||
},
|
||||
onComplete: () => {
|
||||
if (direction === Direction.NEGATIVE) {
|
||||
updateIsometricDepth(positionX, positionY)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const calcDirection = (oldPositionX: number, oldPositionY: number, newPositionX: number, newPositionY: number): Direction => {
|
||||
if (newPositionY < oldPositionY || newPositionX < oldPositionX) return Direction.NEGATIVE
|
||||
if (newPositionX > oldPositionX || newPositionY > oldPositionY) return Direction.POSITIVE
|
||||
return Direction.UNCHANGED
|
||||
}
|
||||
|
||||
const isFlippedX = computed(() => [6, 4].includes(mapCharacter.character.rotation ?? 0))
|
||||
|
||||
const currentDirection = computed(() => {
|
||||
return [0, 6].includes(mapCharacter.character.rotation ?? 0) ? 'left_up' : 'right_down'
|
||||
})
|
||||
|
||||
const currentAction = computed(() => {
|
||||
return mapCharacter.isMoving ? 'walk' : 'idle'
|
||||
})
|
||||
|
||||
const charTexture = computed(() => {
|
||||
const spriteId = characterSpriteId.value ?? 'idle_right_down'
|
||||
return `${spriteId}-${currentAction.value}_${currentDirection.value}`
|
||||
})
|
||||
|
||||
const updateSprite = () => {
|
||||
if (!characterSprite.value) return
|
||||
|
||||
if (mapCharacter.isMoving) {
|
||||
characterSprite.value.anims.play(charTexture.value, true)
|
||||
} else {
|
||||
characterSprite.value.anims.stop()
|
||||
characterSprite.value.setFrame(0)
|
||||
characterSprite.value.setTexture(charTexture.value)
|
||||
}
|
||||
}
|
||||
|
||||
const initializeSprite = async () => {
|
||||
const characterTypeStorage = new CharacterTypeStorage()
|
||||
const spriteId = await characterTypeStorage.getSpriteId(mapCharacter.character.characterType!)
|
||||
if (!spriteId) return
|
||||
|
||||
characterSpriteId.value = spriteId
|
||||
await loadSpriteTextures(scene, spriteId)
|
||||
|
||||
if (characterContainer.value) {
|
||||
characterContainer.value.setName(mapCharacter.character.name)
|
||||
}
|
||||
|
||||
if (characterSprite.value) {
|
||||
characterSprite.value.setTexture(charTexture.value)
|
||||
characterSprite.value.setFlipX(isFlippedX.value)
|
||||
}
|
||||
|
||||
updatePosition(mapCharacter.character.positionX, mapCharacter.character.positionY, mapCharacter.character.rotation)
|
||||
}
|
||||
|
||||
const cleanup = () => {
|
||||
tween.value?.stop()
|
||||
}
|
||||
|
||||
return {
|
||||
characterContainer,
|
||||
characterSpriteId,
|
||||
characterSprite,
|
||||
currentPositionX,
|
||||
currentPositionY,
|
||||
isometricDepth,
|
||||
isFlippedX,
|
||||
updatePosition,
|
||||
calcDirection,
|
||||
updateSprite,
|
||||
initializeSprite,
|
||||
cleanup
|
||||
}
|
||||
}
|
||||
18
src/composables/useControlsComposable.ts
Normal file
18
src/composables/useControlsComposable.ts
Normal file
@ -0,0 +1,18 @@
|
||||
import { useGameControlsComposable } from '@/composables/controls/useGameControlsComposable'
|
||||
import { useMapEditorControlsComposable } from '@/composables/controls/useMapEditorControlsComposable'
|
||||
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
|
||||
import { computed, type Ref } from 'vue'
|
||||
|
||||
export function useControlsComposable(scene: Phaser.Scene, layer: Phaser.Tilemaps.TilemapLayer, waypoint: Ref<{ visible: boolean; x: number; y: number }>) {
|
||||
const camera = scene.cameras.main
|
||||
const gameHandlers = useGameControlsComposable(scene, layer, waypoint, camera)
|
||||
const mapEditorHandlers = useMapEditorControlsComposable(scene, layer, waypoint, camera)
|
||||
|
||||
const mapEditor = useMapEditorComposable()
|
||||
const currentHandlers = computed(() => (mapEditor.active.value ? mapEditorHandlers : gameHandlers))
|
||||
|
||||
const setupControls = () => currentHandlers.value.setupControls()
|
||||
const cleanupControls = () => currentHandlers.value.cleanupControls()
|
||||
|
||||
return { setupControls, cleanupControls, camera }
|
||||
}
|
||||
@ -1,25 +0,0 @@
|
||||
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
|
||||
import { computed, watch, type Ref } from 'vue'
|
||||
import { useGamePointerHandlers } from './pointerHandlers/useGamePointerHandlers'
|
||||
import { useMapEditorPointerHandlers } from './pointerHandlers/useMapEditorPointerHandlers'
|
||||
|
||||
export function usePointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilemaps.TilemapLayer, waypoint: Ref<{ visible: boolean; x: number; y: number }>, camera: Phaser.Cameras.Scene2D.Camera) {
|
||||
const mapEditor = useMapEditorComposable()
|
||||
const gameHandlers = useGamePointerHandlers(scene, layer, waypoint, camera)
|
||||
const mapEditorHandlers = useMapEditorPointerHandlers(scene, layer, waypoint, camera)
|
||||
|
||||
const currentHandlers = computed(() => (mapEditor.active.value ? mapEditorHandlers : gameHandlers))
|
||||
|
||||
const setupPointerHandlers = () => currentHandlers.value.setupPointerHandlers()
|
||||
const cleanupPointerHandlers = () => currentHandlers.value.cleanupPointerHandlers()
|
||||
|
||||
watch(
|
||||
() => mapEditor.active.value,
|
||||
() => {
|
||||
cleanupPointerHandlers()
|
||||
setupPointerHandlers()
|
||||
}
|
||||
)
|
||||
|
||||
return { setupPointerHandlers, cleanupPointerHandlers }
|
||||
}
|
||||
98
src/composables/useTileProcessingComposable.ts
Normal file
98
src/composables/useTileProcessingComposable.ts
Normal file
@ -0,0 +1,98 @@
|
||||
import config from '@/application/config'
|
||||
import type { Tile } from '@/application/types'
|
||||
import type { TileAnalysisResult, TileWorkerMessage } from '@/types/tileTypes'
|
||||
import { ref } from 'vue'
|
||||
|
||||
// Constants for image processing
|
||||
const DOWNSCALE_WIDTH = 32
|
||||
const DOWNSCALE_HEIGHT = 16
|
||||
const COLOR_SIMILARITY_THRESHOLD = 30
|
||||
const EDGE_SIMILARITY_THRESHOLD = 20
|
||||
const BATCH_SIZE = 4
|
||||
|
||||
export function useTileProcessingComposable() {
|
||||
const tileAnalysisCache = ref<Map<string, { color: { r: number; g: number; b: number }; edge: number; namePrefix: string }>>(new Map())
|
||||
const processingQueue = ref<Tile[]>([])
|
||||
let isProcessing = false
|
||||
const worker = new Worker(new URL('@/workers/tileAnalyzerWorker.ts', import.meta.url), { type: 'module' })
|
||||
|
||||
worker.onmessage = (e: MessageEvent<TileAnalysisResult>) => {
|
||||
const { tileId, color, edge, namePrefix } = e.data
|
||||
tileAnalysisCache.value.set(tileId, { color, edge, namePrefix })
|
||||
isProcessing = false
|
||||
processBatch()
|
||||
}
|
||||
|
||||
async function processTileAsync(tile: Tile): Promise<void> {
|
||||
if (tileAnalysisCache.value.has(tile.id)) return
|
||||
|
||||
return new Promise((resolve) => {
|
||||
const img = new Image()
|
||||
img.crossOrigin = 'Anonymous'
|
||||
img.onload = () => {
|
||||
const canvas = document.createElement('canvas')
|
||||
const ctx = canvas.getContext('2d')
|
||||
if (!ctx) {
|
||||
resolve()
|
||||
return
|
||||
}
|
||||
|
||||
canvas.width = DOWNSCALE_WIDTH
|
||||
canvas.height = DOWNSCALE_HEIGHT
|
||||
ctx.drawImage(img, 0, 0, DOWNSCALE_WIDTH, DOWNSCALE_HEIGHT)
|
||||
|
||||
const imageData = ctx.getImageData(0, 0, DOWNSCALE_WIDTH, DOWNSCALE_HEIGHT)
|
||||
const message: TileWorkerMessage = {
|
||||
imageData,
|
||||
tileId: tile.id,
|
||||
tileName: tile.name
|
||||
}
|
||||
worker.postMessage(message)
|
||||
resolve()
|
||||
}
|
||||
img.onerror = () => resolve()
|
||||
img.src = `${config.server_endpoint}/textures/tiles/${tile.id}.png`
|
||||
})
|
||||
}
|
||||
|
||||
function processBatch() {
|
||||
if (isProcessing || processingQueue.value.length === 0) return
|
||||
isProcessing = true
|
||||
|
||||
const batch = processingQueue.value.splice(0, BATCH_SIZE)
|
||||
Promise.all(batch.map((tile) => processTileAsync(tile))).then(() => {
|
||||
isProcessing = false
|
||||
if (processingQueue.value.length > 0) {
|
||||
setTimeout(processBatch, 0)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function processTile(tile: Tile) {
|
||||
if (!processingQueue.value.includes(tile)) {
|
||||
processingQueue.value.push(tile)
|
||||
processBatch()
|
||||
}
|
||||
}
|
||||
|
||||
function areTilesRelated(tile1: Tile, tile2: Tile): boolean {
|
||||
const data1 = tileAnalysisCache.value.get(tile1.id)
|
||||
const data2 = tileAnalysisCache.value.get(tile2.id)
|
||||
|
||||
if (!data1 || !data2) return false
|
||||
|
||||
const colorDifference = Math.sqrt(Math.pow(data1.color.r - data2.color.r, 2) + Math.pow(data1.color.g - data2.color.g, 2) + Math.pow(data1.color.b - data2.color.b, 2))
|
||||
|
||||
return colorDifference <= COLOR_SIMILARITY_THRESHOLD && Math.abs(data1.edge - data2.edge) <= EDGE_SIMILARITY_THRESHOLD && data1.namePrefix === data2.namePrefix
|
||||
}
|
||||
|
||||
function cleanup() {
|
||||
worker.terminate()
|
||||
}
|
||||
|
||||
return {
|
||||
processTile,
|
||||
areTilesRelated,
|
||||
cleanup
|
||||
}
|
||||
}
|
||||
@ -40,4 +40,9 @@ export class CharacterHairStorage extends BaseStorage<any> {
|
||||
constructor() {
|
||||
super('characterHairs', 'id, name, createdAt, updatedAt')
|
||||
}
|
||||
|
||||
async getSpriteId(characterTypeId: string) {
|
||||
const characterType = await this.get(characterTypeId)
|
||||
return characterType?.sprite
|
||||
}
|
||||
}
|
||||
|
||||
@ -31,6 +31,13 @@ export const useMapStore = defineStore('map', {
|
||||
const index = this.characters.findIndex((char) => char.character.id === updatedCharacter.character.id)
|
||||
if (index !== -1) this.characters[index] = updatedCharacter
|
||||
},
|
||||
// Property is mapCharacter key
|
||||
updateCharacterProperty<K extends keyof MapCharacter>(characterId: UUID, property: K, value: MapCharacter[K]) {
|
||||
const character = this.characters.find((char) => char.character.id === characterId)
|
||||
if (character) {
|
||||
character[property] = value
|
||||
}
|
||||
},
|
||||
removeCharacter(characterId: UUID) {
|
||||
this.characters = this.characters.filter((char) => char.character.id !== characterId)
|
||||
},
|
||||
|
||||
20
src/types/tileTypes.ts
Normal file
20
src/types/tileTypes.ts
Normal file
@ -0,0 +1,20 @@
|
||||
export interface TileAnalysisResult {
|
||||
tileId: string
|
||||
color: {
|
||||
r: number
|
||||
g: number
|
||||
b: number
|
||||
}
|
||||
edge: number
|
||||
namePrefix: string
|
||||
}
|
||||
|
||||
export interface TileWorkerMessage {
|
||||
imageData: ImageData
|
||||
tileId: string
|
||||
tileName: string
|
||||
}
|
||||
|
||||
export interface TileCache {
|
||||
[key: string]: TileAnalysisResult
|
||||
}
|
||||
68
src/workers/tileAnalyzerWorker.ts
Normal file
68
src/workers/tileAnalyzerWorker.ts
Normal file
@ -0,0 +1,68 @@
|
||||
import type { TileAnalysisResult } from '@/types/tileTypes'
|
||||
|
||||
const PIXEL_SAMPLE_RATE = 4
|
||||
|
||||
self.onmessage = async (e: MessageEvent) => {
|
||||
const { imageData, tileId, tileName } = e.data
|
||||
const result = analyzeTile(imageData, tileId, tileName)
|
||||
self.postMessage(result)
|
||||
}
|
||||
|
||||
function analyzeTile(imageData: ImageData, tileId: string, tileName: string): TileAnalysisResult {
|
||||
const { r, g, b } = getDominantColorFast(imageData)
|
||||
const edge = getEdgeComplexityFast(imageData)
|
||||
const namePrefix = tileName.split('_')[0]
|
||||
|
||||
return {
|
||||
tileId,
|
||||
color: { r, g, b },
|
||||
edge,
|
||||
namePrefix
|
||||
}
|
||||
}
|
||||
|
||||
function getDominantColorFast(imageData: ImageData) {
|
||||
const data = new Uint8ClampedArray(imageData.data.buffer)
|
||||
let r = 0,
|
||||
g = 0,
|
||||
b = 0,
|
||||
total = 0
|
||||
const length = data.length
|
||||
|
||||
for (let i = 0; i < length; i += 4 * PIXEL_SAMPLE_RATE) {
|
||||
if (data[i + 3] > 0) {
|
||||
r += data[i]
|
||||
g += data[i + 1]
|
||||
b += data[i + 2]
|
||||
total++
|
||||
}
|
||||
}
|
||||
|
||||
return total > 0
|
||||
? {
|
||||
r: Math.round(r / total),
|
||||
g: Math.round(g / total),
|
||||
b: Math.round(b / total)
|
||||
}
|
||||
: { r: 0, g: 0, b: 0 }
|
||||
}
|
||||
|
||||
function getEdgeComplexityFast(imageData: ImageData) {
|
||||
const data = new Uint8ClampedArray(imageData.data.buffer)
|
||||
const width = imageData.width
|
||||
const height = imageData.height
|
||||
let edgePixels = 0
|
||||
|
||||
for (let y = 0; y < height; y += PIXEL_SAMPLE_RATE) {
|
||||
for (let x = 0; x < width; x += PIXEL_SAMPLE_RATE) {
|
||||
const i = (y * width + x) * 4
|
||||
if (
|
||||
data[i + 3] > 0 &&
|
||||
(x === 0 || y === 0 || x >= width - PIXEL_SAMPLE_RATE || y >= height - PIXEL_SAMPLE_RATE || data[i - 4 * PIXEL_SAMPLE_RATE + 3] === 0 || data[i + 4 * PIXEL_SAMPLE_RATE + 3] === 0 || data[i - width * 4 * PIXEL_SAMPLE_RATE + 3] === 0 || data[i + width * 4 * PIXEL_SAMPLE_RATE + 3] === 0)
|
||||
) {
|
||||
edgePixels++
|
||||
}
|
||||
}
|
||||
}
|
||||
return edgePixels * PIXEL_SAMPLE_RATE
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user