Compare commits
34 Commits
feature/#2
...
feature/#2
| Author | SHA1 | Date | |
|---|---|---|---|
| 90bdf43b64 | |||
| e9dfcf7870 | |||
| d0c08c25fd | |||
| 7bb7af9476 | |||
| e4186a1bf5 | |||
| 8c664d7774 | |||
| 744df2e2dc | |||
| b4f9b11143 | |||
| 18b07d2f46 | |||
| 9d0f810ab3 | |||
| cf3f17dfef | |||
| 6be1134c8c | |||
| 6dad7bc9dd | |||
| 231f19a30f | |||
| 9c105d6df6 | |||
| 179ceb0ca0 | |||
| 680661f07c | |||
| c54d2a2da8 | |||
| 85f0fca2ae | |||
| 420e63b724 | |||
| 5d9b4fd19a | |||
| b3d68ef562 | |||
| baae737d6b | |||
| 03f8b327c5 | |||
| b9a1ce5ab5 | |||
| 1b650bd733 | |||
| b867250580 | |||
| 2c7a1e27be | |||
| 0e455f8ffc | |||
| 8005bc1318 | |||
| 11e978121f | |||
| 727ca99b73 | |||
| 97080d7380 | |||
| 1a3a53a229 |
@ -1,4 +1,4 @@
|
||||
VITE_NAME=Sylvan Quest
|
||||
VITE_NAME=Noxious
|
||||
VITE_DEVELOPMENT=true
|
||||
VITE_SERVER_ENDPOINT=http://localhost:4000
|
||||
VITE_TILE_SIZE_X=64
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title>Sylvan Quest - Play</title>
|
||||
<title>Noxious - Play</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
194
package-lock.json
generated
194
package-lock.json
generated
@ -1656,9 +1656,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@rollup/rollup-android-arm-eabi": {
|
||||
"version": "4.29.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.29.0.tgz",
|
||||
"integrity": "sha512-TnF0md3qWSRDlU96y9+0dd5RNrlXiQUp1K2pK1UpNmjeND+o9ts9Jxv3G6ntagkt8jVh0KAT1VYgU0nCz5gt2w==",
|
||||
"version": "4.29.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.29.1.tgz",
|
||||
"integrity": "sha512-ssKhA8RNltTZLpG6/QNkCSge+7mBQGUqJRisZ2MDQcEGaK93QESEgWK2iOpIDZ7k9zPVkG5AS3ksvD5ZWxmItw==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
@ -1670,9 +1670,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-android-arm64": {
|
||||
"version": "4.29.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.29.0.tgz",
|
||||
"integrity": "sha512-L/7oX07eY6ACt2NXDrku1JIPdf9VGV/DI92EjAd8FRDzMMub5hXFpT1OegBqimJh9xy9Vv+nToaVtZp4Ku9SEA==",
|
||||
"version": "4.29.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.29.1.tgz",
|
||||
"integrity": "sha512-CaRfrV0cd+NIIcVVN/jx+hVLN+VRqnuzLRmfmlzpOzB87ajixsN/+9L5xNmkaUUvEbI5BmIKS+XTwXsHEb65Ew==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@ -1684,9 +1684,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-darwin-arm64": {
|
||||
"version": "4.29.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.29.0.tgz",
|
||||
"integrity": "sha512-I1ZucWPVS96hjAsMSJiGosHTqMulMynrmTN+Xde5OsLcU5SjE0xylBmQ/DbB2psJ+HasINrJYz8HQpojtAw2eA==",
|
||||
"version": "4.29.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.29.1.tgz",
|
||||
"integrity": "sha512-2ORr7T31Y0Mnk6qNuwtyNmy14MunTAMx06VAPI6/Ju52W10zk1i7i5U3vlDRWjhOI5quBcrvhkCHyF76bI7kEw==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@ -1698,9 +1698,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-darwin-x64": {
|
||||
"version": "4.29.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.29.0.tgz",
|
||||
"integrity": "sha512-CTZ+lHMsTbH1q/XLKzmnJWxl2r/1xdv7cnjwbi5v+95nVA1syikxWLvqur4nDoGDHjC8oNMBGurnQptpuFJHXA==",
|
||||
"version": "4.29.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.29.1.tgz",
|
||||
"integrity": "sha512-j/Ej1oanzPjmN0tirRd5K2/nncAhS9W6ICzgxV+9Y5ZsP0hiGhHJXZ2JQ53iSSjj8m6cRY6oB1GMzNn2EUt6Ng==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@ -1712,9 +1712,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-freebsd-arm64": {
|
||||
"version": "4.29.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.29.0.tgz",
|
||||
"integrity": "sha512-BB8+4OMzk2JiKL5+aK8A0pi9DPB5pkIBZWXr19+grdez9b0VKihvV432uSwuZLO0sI6zCyxak8NO3mZ1yjM1jA==",
|
||||
"version": "4.29.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.29.1.tgz",
|
||||
"integrity": "sha512-91C//G6Dm/cv724tpt7nTyP+JdN12iqeXGFM1SqnljCmi5yTXriH7B1r8AD9dAZByHpKAumqP1Qy2vVNIdLZqw==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@ -1726,9 +1726,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-freebsd-x64": {
|
||||
"version": "4.29.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.29.0.tgz",
|
||||
"integrity": "sha512-Udz9Uh26uEE6phGMG2++TfpsLK/z4cYJqrIOyVhig/PMoWiZLghpjZUQvsAylsoztbpg0/QmplkDAyyVq0x6Jg==",
|
||||
"version": "4.29.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.29.1.tgz",
|
||||
"integrity": "sha512-hEioiEQ9Dec2nIRoeHUP6hr1PSkXzQaCUyqBDQ9I9ik4gCXQZjJMIVzoNLBRGet+hIUb3CISMh9KXuCcWVW/8w==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@ -1740,9 +1740,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-arm-gnueabihf": {
|
||||
"version": "4.29.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.29.0.tgz",
|
||||
"integrity": "sha512-IPSCTzP8GRYzY+siSnggIKrckC2U+kVXoen6eSHRDgU9a4EZCHHWWOiKio1EkieOOk2j6EvZaaHfQUCmt8UJBg==",
|
||||
"version": "4.29.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.29.1.tgz",
|
||||
"integrity": "sha512-Py5vFd5HWYN9zxBv3WMrLAXY3yYJ6Q/aVERoeUFwiDGiMOWsMs7FokXihSOaT/PMWUty/Pj60XDQndK3eAfE6A==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
@ -1754,9 +1754,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-arm-musleabihf": {
|
||||
"version": "4.29.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.29.0.tgz",
|
||||
"integrity": "sha512-GvHPu0UIDx+ohyS8vTYnwoSVMM5BH3NO+JwQs6GWNCuQVlC5rKxnH2WClTGu3NxiIfhKLai08IKUwn3QbzX1UQ==",
|
||||
"version": "4.29.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.29.1.tgz",
|
||||
"integrity": "sha512-RiWpGgbayf7LUcuSNIbahr0ys2YnEERD4gYdISA06wa0i8RALrnzflh9Wxii7zQJEB2/Eh74dX4y/sHKLWp5uQ==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
@ -1768,9 +1768,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-arm64-gnu": {
|
||||
"version": "4.29.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.29.0.tgz",
|
||||
"integrity": "sha512-Pnnn/2CAZWcH9GQoj1nnr85Ejh7aNDe5MsEV0xhuFNUPF0SdnutJ7b2muOI5Kx12T0/i2ol5B/tlhMviZQDL3g==",
|
||||
"version": "4.29.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.29.1.tgz",
|
||||
"integrity": "sha512-Z80O+taYxTQITWMjm/YqNoe9d10OX6kDh8X5/rFCMuPqsKsSyDilvfg+vd3iXIqtfmp+cnfL1UrYirkaF8SBZA==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@ -1782,9 +1782,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-arm64-musl": {
|
||||
"version": "4.29.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.29.0.tgz",
|
||||
"integrity": "sha512-AP+DLj4q9FT22ZL43ssA3gizEn7/MfJcZ1BOuyEPqoriuH3a8VRuDddN0MtpUwEtiZL6jc1GY5/eL99hkloQ1Q==",
|
||||
"version": "4.29.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.29.1.tgz",
|
||||
"integrity": "sha512-fOHRtF9gahwJk3QVp01a/GqS4hBEZCV1oKglVVq13kcK3NeVlS4BwIFzOHDbmKzt3i0OuHG4zfRP0YoG5OF/rA==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@ -1796,9 +1796,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-loongarch64-gnu": {
|
||||
"version": "4.29.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.29.0.tgz",
|
||||
"integrity": "sha512-1+jPFClHmDATqbk0Cwi74KEOymVcs09Vbqe/CTKqLwCP0TeP2CACfnMnjYBs5CJgO20e/4bxFtmbR/9fKE1gug==",
|
||||
"version": "4.29.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.29.1.tgz",
|
||||
"integrity": "sha512-5a7q3tnlbcg0OodyxcAdrrCxFi0DgXJSoOuidFUzHZ2GixZXQs6Tc3CHmlvqKAmOs5eRde+JJxeIf9DonkmYkw==",
|
||||
"cpu": [
|
||||
"loong64"
|
||||
],
|
||||
@ -1810,9 +1810,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
|
||||
"version": "4.29.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.29.0.tgz",
|
||||
"integrity": "sha512-Nmt5Us5w2dL8eh7QVyAIDVVwBv4wk8ljrBQe7lWkLaOcwABDaFQ3K4sAAC6IsOdJwaXXW+d85zVaMN+Xl8Co2w==",
|
||||
"version": "4.29.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.29.1.tgz",
|
||||
"integrity": "sha512-9b4Mg5Yfz6mRnlSPIdROcfw1BU22FQxmfjlp/CShWwO3LilKQuMISMTtAu/bxmmrE6A902W2cZJuzx8+gJ8e9w==",
|
||||
"cpu": [
|
||||
"ppc64"
|
||||
],
|
||||
@ -1824,9 +1824,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-riscv64-gnu": {
|
||||
"version": "4.29.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.29.0.tgz",
|
||||
"integrity": "sha512-KGuQ8WGhnq09LR7eOru7P9jfBSYXTMhq6TyavWfmEo+TxvkvuRwOCee5lPIa6HYjblOuFr4GeOxSE0c8iyw2Fg==",
|
||||
"version": "4.29.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.29.1.tgz",
|
||||
"integrity": "sha512-G5pn0NChlbRM8OJWpJFMX4/i8OEU538uiSv0P6roZcbpe/WfhEO+AT8SHVKfp8qhDQzaz7Q+1/ixMy7hBRidnQ==",
|
||||
"cpu": [
|
||||
"riscv64"
|
||||
],
|
||||
@ -1838,9 +1838,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-s390x-gnu": {
|
||||
"version": "4.29.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.29.0.tgz",
|
||||
"integrity": "sha512-lSQtvrYIONme7a4gbf4O9d3zbZat3/5covIeoqk27ZIkTgBeL/67x+wq2bZfpLjkqQQp5SjBPQ/n0sg8iArzTg==",
|
||||
"version": "4.29.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.29.1.tgz",
|
||||
"integrity": "sha512-WM9lIkNdkhVwiArmLxFXpWndFGuOka4oJOZh8EP3Vb8q5lzdSCBuhjavJsw68Q9AKDGeOOIHYzYm4ZFvmWez5g==",
|
||||
"cpu": [
|
||||
"s390x"
|
||||
],
|
||||
@ -1852,9 +1852,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-x64-gnu": {
|
||||
"version": "4.29.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.29.0.tgz",
|
||||
"integrity": "sha512-qh0ussrXBwnF4L07M9t1+jpHRhiGSae+wpNQDbmlXHXciT7pqpZ5zpk4dyGZPtDGB2l2clDiufE16BufXPGRWQ==",
|
||||
"version": "4.29.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.29.1.tgz",
|
||||
"integrity": "sha512-87xYCwb0cPGZFoGiErT1eDcssByaLX4fc0z2nRM6eMtV9njAfEE6OW3UniAoDhX4Iq5xQVpE6qO9aJbCFumKYQ==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@ -1866,9 +1866,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-x64-musl": {
|
||||
"version": "4.29.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.29.0.tgz",
|
||||
"integrity": "sha512-YEABzSaRS7+v14yw6MVBZoMqLoUyTX1/sJoGeC0euvgMrzvw0i+jHo4keDZgYeOblfwdseVAf6ylxWSvcBAKTA==",
|
||||
"version": "4.29.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.29.1.tgz",
|
||||
"integrity": "sha512-xufkSNppNOdVRCEC4WKvlR1FBDyqCSCpQeMMgv9ZyXqqtKBfkw1yfGMTUTs9Qsl6WQbJnsGboWCp7pJGkeMhKA==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@ -1880,9 +1880,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-win32-arm64-msvc": {
|
||||
"version": "4.29.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.29.0.tgz",
|
||||
"integrity": "sha512-jA4+oxG7QTTtSQxwSHzFVwShcppHO2DpkbAM59pfD5WMG/da79yQaeBtXAfGTI+ciUx8hqK3RF3H2KWByITXtQ==",
|
||||
"version": "4.29.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.29.1.tgz",
|
||||
"integrity": "sha512-F2OiJ42m77lSkizZQLuC+jiZ2cgueWQL5YC9tjo3AgaEw+KJmVxHGSyQfDUoYR9cci0lAywv2Clmckzulcq6ig==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@ -1894,9 +1894,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-win32-ia32-msvc": {
|
||||
"version": "4.29.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.29.0.tgz",
|
||||
"integrity": "sha512-4TQbLoAQVu9uE+cvh47JnjRZylXVdRCoOkRSVF2Rr2T0U1YwphGRjR0sHyRPEt95y3ETT4YFTTzQPq1O4bcjmw==",
|
||||
"version": "4.29.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.29.1.tgz",
|
||||
"integrity": "sha512-rYRe5S0FcjlOBZQHgbTKNrqxCBUmgDJem/VQTCcTnA2KCabYSWQDrytOzX7avb79cAAweNmMUb/Zw18RNd4mng==",
|
||||
"cpu": [
|
||||
"ia32"
|
||||
],
|
||||
@ -1908,9 +1908,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-win32-x64-msvc": {
|
||||
"version": "4.29.0",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.29.0.tgz",
|
||||
"integrity": "sha512-GsFvcTZ7Yj9k94Qm0qgav7pxmQ7lQDR9NjoelRaxeV1UF6JSDfanR/2tHZ8hS7Ps4KPIVf5AElYPRPmN/Q0ZkQ==",
|
||||
"version": "4.29.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.29.1.tgz",
|
||||
"integrity": "sha512-+10CMg9vt1MoHj6x1pxyjPSMjHTIlqs8/tBztXvPAx24SKs9jwVnKqHJumlH/IzhaPUaj3T6T6wfZr8okdXaIg==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@ -3594,9 +3594,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/electron-to-chromium": {
|
||||
"version": "1.5.75",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.75.tgz",
|
||||
"integrity": "sha512-Lf3++DumRE/QmweGjU+ZcKqQ+3bKkU/qjaKYhIJKEOhgIO9Xs6IiAQFkfFoj+RhgDk4LUeNsLo6plExHqSyu6Q==",
|
||||
"version": "1.5.76",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.76.tgz",
|
||||
"integrity": "sha512-CjVQyG7n7Sr+eBXE86HIulnL5N8xZY1sgmOPGuq/F0Rr0FJq63lg0kEtOIDfZBk44FnDLf6FUJ+dsJcuiUDdDQ==",
|
||||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
@ -3690,9 +3690,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/es-module-lexer": {
|
||||
"version": "1.5.4",
|
||||
"resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.5.4.tgz",
|
||||
"integrity": "sha512-MVNK56NiMrOwitFB7cqDwq0CQutbw+0BvLshJSse0MUNU+y1FC3bUS/AQg7oUng+/wKrrki7JfmwtVHkVfPLlw==",
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.6.0.tgz",
|
||||
"integrity": "sha512-qqnD1yMU6tk/jnaMosogGySTZP8YtUgAffA9nMN+E/rjxcfRQ6IEk7IiozUjgxKoFHBGjTLnrHB/YC45r/59EQ==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
@ -4118,9 +4118,9 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/fastq": {
|
||||
"version": "1.17.1",
|
||||
"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
|
||||
"integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
|
||||
"version": "1.18.0",
|
||||
"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.18.0.tgz",
|
||||
"integrity": "sha512-QKHXPW0hD8g4UET03SdOdunzSouc9N4AuHdsX8XNcTsuz+yYFILVNIX4l9yHABMhiEI9Db0JTTIpu0wB+Y1QQw==",
|
||||
"dev": true,
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
@ -4715,9 +4715,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/is-core-module": {
|
||||
"version": "2.16.0",
|
||||
"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.0.tgz",
|
||||
"integrity": "sha512-urTSINYfAYgcbLb0yDQ6egFm6h3Mo1DcF9EkyXSRjjzdHbsulg01qhwWuXdOoUBuTkbQ80KDboXa0vFJ+BDH+g==",
|
||||
"version": "2.16.1",
|
||||
"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
|
||||
"integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
@ -6389,9 +6389,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/rollup": {
|
||||
"version": "4.29.0",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.29.0.tgz",
|
||||
"integrity": "sha512-pdftUn12oB9Qlka+Vpyc39R28D4NsP9Sz6neepSrekofJmWzPD1sxcSO9hEOxFF8+7Kz3sHvwSkkRREI28M1/w==",
|
||||
"version": "4.29.1",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.29.1.tgz",
|
||||
"integrity": "sha512-RaJ45M/kmJUzSWDs1Nnd5DdV4eerC98idtUOVr6FfKcgxqvjwHmxc5upLF9qZU9EpsVzzhleFahrT3shLuJzIw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
@ -6405,25 +6405,25 @@
|
||||
"npm": ">=8.0.0"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@rollup/rollup-android-arm-eabi": "4.29.0",
|
||||
"@rollup/rollup-android-arm64": "4.29.0",
|
||||
"@rollup/rollup-darwin-arm64": "4.29.0",
|
||||
"@rollup/rollup-darwin-x64": "4.29.0",
|
||||
"@rollup/rollup-freebsd-arm64": "4.29.0",
|
||||
"@rollup/rollup-freebsd-x64": "4.29.0",
|
||||
"@rollup/rollup-linux-arm-gnueabihf": "4.29.0",
|
||||
"@rollup/rollup-linux-arm-musleabihf": "4.29.0",
|
||||
"@rollup/rollup-linux-arm64-gnu": "4.29.0",
|
||||
"@rollup/rollup-linux-arm64-musl": "4.29.0",
|
||||
"@rollup/rollup-linux-loongarch64-gnu": "4.29.0",
|
||||
"@rollup/rollup-linux-powerpc64le-gnu": "4.29.0",
|
||||
"@rollup/rollup-linux-riscv64-gnu": "4.29.0",
|
||||
"@rollup/rollup-linux-s390x-gnu": "4.29.0",
|
||||
"@rollup/rollup-linux-x64-gnu": "4.29.0",
|
||||
"@rollup/rollup-linux-x64-musl": "4.29.0",
|
||||
"@rollup/rollup-win32-arm64-msvc": "4.29.0",
|
||||
"@rollup/rollup-win32-ia32-msvc": "4.29.0",
|
||||
"@rollup/rollup-win32-x64-msvc": "4.29.0",
|
||||
"@rollup/rollup-android-arm-eabi": "4.29.1",
|
||||
"@rollup/rollup-android-arm64": "4.29.1",
|
||||
"@rollup/rollup-darwin-arm64": "4.29.1",
|
||||
"@rollup/rollup-darwin-x64": "4.29.1",
|
||||
"@rollup/rollup-freebsd-arm64": "4.29.1",
|
||||
"@rollup/rollup-freebsd-x64": "4.29.1",
|
||||
"@rollup/rollup-linux-arm-gnueabihf": "4.29.1",
|
||||
"@rollup/rollup-linux-arm-musleabihf": "4.29.1",
|
||||
"@rollup/rollup-linux-arm64-gnu": "4.29.1",
|
||||
"@rollup/rollup-linux-arm64-musl": "4.29.1",
|
||||
"@rollup/rollup-linux-loongarch64-gnu": "4.29.1",
|
||||
"@rollup/rollup-linux-powerpc64le-gnu": "4.29.1",
|
||||
"@rollup/rollup-linux-riscv64-gnu": "4.29.1",
|
||||
"@rollup/rollup-linux-s390x-gnu": "4.29.1",
|
||||
"@rollup/rollup-linux-x64-gnu": "4.29.1",
|
||||
"@rollup/rollup-linux-x64-musl": "4.29.1",
|
||||
"@rollup/rollup-win32-arm64-msvc": "4.29.1",
|
||||
"@rollup/rollup-win32-ia32-msvc": "4.29.1",
|
||||
"@rollup/rollup-win32-x64-msvc": "4.29.1",
|
||||
"fsevents": "~2.3.2"
|
||||
}
|
||||
},
|
||||
@ -7053,9 +7053,9 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/tinyexec": {
|
||||
"version": "0.3.1",
|
||||
"resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-0.3.1.tgz",
|
||||
"integrity": "sha512-WiCJLEECkO18gwqIp6+hJg0//p23HXp4S+gGtAKu3mI2F2/sXC4FvHvXvB0zJVVaTPhx1/tOwdbRsa1sOBIKqQ==",
|
||||
"version": "0.3.2",
|
||||
"resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-0.3.2.tgz",
|
||||
"integrity": "sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
@ -7606,9 +7606,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/vue-component-type-helpers": {
|
||||
"version": "2.1.10",
|
||||
"resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-2.1.10.tgz",
|
||||
"integrity": "sha512-lfgdSLQKrUmADiSV6PbBvYgQ33KF3Ztv6gP85MfGaGaSGMTXORVaHT1EHfsqCgzRNBstPKYDmvAV9Do5CmJ07A==",
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-2.2.0.tgz",
|
||||
"integrity": "sha512-cYrAnv2me7bPDcg9kIcGwjJiSB6Qyi08+jLDo9yuvoFQjzHiPTzML7RnkJB1+3P6KMsX/KbCD4QE3Tv/knEllw==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 9.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 162 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 274 B |
BIN
public/assets/tlogo.png
Normal file
BIN
public/assets/tlogo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 301 KiB After Width: | Height: | Size: 302 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 400 KiB After Width: | Height: | Size: 400 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB |
@ -4,15 +4,24 @@ export type Notification = {
|
||||
message?: string
|
||||
}
|
||||
|
||||
export type HttpResponse<T> = {
|
||||
success: boolean
|
||||
message?: string
|
||||
data?: T
|
||||
}
|
||||
|
||||
export type AssetDataT = {
|
||||
key: string
|
||||
data: string
|
||||
group: 'tiles' | 'objects' | 'sprites' | 'sprite_animations' | 'sound' | 'music' | 'ui' | 'font' | 'other'
|
||||
updatedAt: Date
|
||||
originX?: number
|
||||
originY?: number
|
||||
isAnimated?: boolean
|
||||
frameCount?: number
|
||||
frameRate?: number
|
||||
frameWidth?: number
|
||||
frameHeight?: number
|
||||
frameCount?: number
|
||||
}
|
||||
|
||||
export type Tile = {
|
||||
@ -30,7 +39,7 @@ export type Object = {
|
||||
originX: number
|
||||
originY: number
|
||||
isAnimated: boolean
|
||||
frameSpeed: number
|
||||
frameRate: number
|
||||
frameWidth: number
|
||||
frameHeight: number
|
||||
createdAt: Date
|
||||
@ -42,12 +51,18 @@ export type Item = {
|
||||
id: string
|
||||
name: string
|
||||
description: string | null
|
||||
itemType: ItemType
|
||||
stackable: boolean
|
||||
rarity: ItemRarity
|
||||
spriteId: string | null
|
||||
sprite?: Sprite
|
||||
createdAt: Date
|
||||
updatedAt: Date
|
||||
characters: CharacterItem[]
|
||||
}
|
||||
|
||||
export type ItemType = 'WEAPON' | 'HELMET' | 'CHEST' | 'LEGS' | 'BOOTS' | 'GLOVES' | 'RING' | 'NECKLACE'
|
||||
export type ItemRarity = 'COMMON' | 'UNCOMMON' | 'RARE' | 'EPIC' | 'LEGENDARY'
|
||||
|
||||
export type Zone = {
|
||||
id: number
|
||||
name: string
|
||||
@ -137,7 +152,7 @@ export type CharacterType = {
|
||||
name: string
|
||||
gender: CharacterGender
|
||||
race: CharacterRace
|
||||
isEnabledForCharCreation: boolean
|
||||
isSelectable: boolean
|
||||
characters: Character[]
|
||||
spriteId?: string
|
||||
sprite?: Sprite
|
||||
@ -148,11 +163,9 @@ export type CharacterType = {
|
||||
export type CharacterHair = {
|
||||
id: number
|
||||
name: string
|
||||
spriteId: string
|
||||
sprite: Sprite
|
||||
gender: CharacterGender
|
||||
isEnabledForCharCreation: boolean
|
||||
// @TODO: Do we need addedAt and updatedAt?
|
||||
isSelectable: boolean
|
||||
}
|
||||
|
||||
export type Character = {
|
||||
@ -177,6 +190,7 @@ export type Character = {
|
||||
zone: Zone
|
||||
chats: Chat[]
|
||||
items: CharacterItem[]
|
||||
equipment: CharacterEquipment[]
|
||||
}
|
||||
|
||||
export type ZoneCharacter = {
|
||||
@ -193,6 +207,22 @@ export type CharacterItem = {
|
||||
quantity: number
|
||||
}
|
||||
|
||||
export type CharacterEquipment = {
|
||||
id: number
|
||||
slot: CharacterEquipmentSlotType
|
||||
characterItemId: number
|
||||
characterItem: CharacterItem
|
||||
}
|
||||
|
||||
export enum CharacterEquipmentSlotType {
|
||||
HEAD = 'HEAD',
|
||||
BODY = 'BODY',
|
||||
ARMS = 'ARMS',
|
||||
LEGS = 'LEGS',
|
||||
NECK = 'NECK',
|
||||
RING = 'RING'
|
||||
}
|
||||
|
||||
export type Sprite = {
|
||||
id: string
|
||||
name: string
|
||||
@ -214,7 +244,7 @@ export type SpriteAction = {
|
||||
isLooping: boolean
|
||||
frameWidth: number
|
||||
frameHeight: number
|
||||
frameSpeed: number
|
||||
frameRate: number
|
||||
}
|
||||
|
||||
export type Chat = {
|
||||
@ -240,3 +270,8 @@ export type WeatherState = {
|
||||
isFogEnabled: boolean
|
||||
fogDensity: number
|
||||
}
|
||||
|
||||
export type zoneLoadData = {
|
||||
zone: ZoneT
|
||||
characters: ZoneCharacter[]
|
||||
}
|
||||
Binary file not shown.
@ -128,7 +128,7 @@ button {
|
||||
&.active,
|
||||
&.selected,
|
||||
&:hover {
|
||||
@apply bg-gray-700 border-gray-700;
|
||||
@apply bg-gray border-gray;
|
||||
}
|
||||
}
|
||||
|
||||
@ -145,10 +145,8 @@ button {
|
||||
}
|
||||
}
|
||||
|
||||
.character {
|
||||
&.active {
|
||||
@apply pr-px border-r-0;
|
||||
}
|
||||
.character.active {
|
||||
@apply bg-gray bg-none
|
||||
}
|
||||
|
||||
.hair-deselect:has(:checked) {
|
||||
@ -157,6 +155,14 @@ button {
|
||||
}
|
||||
}
|
||||
|
||||
.default-border {
|
||||
@apply border border-solid border-gray-500;
|
||||
}
|
||||
|
||||
.center-element {
|
||||
@apply absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2;
|
||||
}
|
||||
|
||||
.text-pixel {
|
||||
@apply text-white font-ui drop-shadow-pixel-black;
|
||||
}
|
||||
|
||||
@ -7,7 +7,7 @@ import { Scene } from 'phavuer'
|
||||
import { useZoneStore } from '@/stores/zoneStore'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
||||
import type { WeatherState } from '@/types'
|
||||
import type { WeatherState } from '@/application/types'
|
||||
|
||||
// Constants
|
||||
const LIGHT_CONFIG = {
|
||||
@ -21,6 +21,7 @@ const LIGHT_CONFIG = {
|
||||
const gameStore = useGameStore()
|
||||
const zoneStore = useZoneStore()
|
||||
const sceneRef = ref<Phaser.Scene | null>(null)
|
||||
const zoneEffectsReady = ref(false)
|
||||
|
||||
// Effect objects
|
||||
const effects = {
|
||||
@ -54,20 +55,23 @@ const initializeEffects = (scene: Phaser.Scene) => {
|
||||
effects.light.value = scene.add.graphics().setDepth(1000)
|
||||
|
||||
// Rain
|
||||
effects.rain.value = scene.add.particles(0, 0, 'raindrop', {
|
||||
x: { min: 0, max: window.innerWidth },
|
||||
y: -50,
|
||||
quantity: 5,
|
||||
lifespan: 2000,
|
||||
speedY: { min: 300, max: 500 },
|
||||
scale: { start: 0.005, end: 0.005 },
|
||||
alpha: { start: 0.5, end: 0 },
|
||||
blendMode: 'ADD'
|
||||
}).setDepth(900)
|
||||
effects.rain.value = scene.add
|
||||
.particles(0, 0, 'raindrop', {
|
||||
x: { min: 0, max: window.innerWidth },
|
||||
y: -50,
|
||||
quantity: 5,
|
||||
lifespan: 2000,
|
||||
speedY: { min: 300, max: 500 },
|
||||
scale: { start: 0.005, end: 0.005 },
|
||||
alpha: { start: 0.5, end: 0 },
|
||||
blendMode: 'ADD'
|
||||
})
|
||||
.setDepth(900)
|
||||
effects.rain.value.stop()
|
||||
|
||||
// Fog
|
||||
effects.fog.value = scene.add.sprite(window.innerWidth / 2, window.innerHeight / 2, 'fog')
|
||||
effects.fog.value = scene.add
|
||||
.sprite(window.innerWidth / 2, window.innerHeight / 2, 'fog')
|
||||
.setScale(2)
|
||||
.setAlpha(0)
|
||||
.setDepth(950)
|
||||
@ -76,32 +80,44 @@ const initializeEffects = (scene: Phaser.Scene) => {
|
||||
// Effect updates
|
||||
const updateScene = () => {
|
||||
const timeBasedLight = calculateLightStrength(gameStore.world.date)
|
||||
const zoneEffects = zoneStore.zone?.zoneEffects as Array<{ effect: string, strength: number }>
|
||||
const zoneEffects = zoneStore.zone?.zoneEffects?.reduce(
|
||||
(acc, curr) => ({
|
||||
...acc,
|
||||
[curr.effect]: curr.strength
|
||||
}),
|
||||
{}
|
||||
) as { [key: string]: number }
|
||||
|
||||
if (zoneEffects?.length) {
|
||||
applyEffects(zoneEffects)
|
||||
} else {
|
||||
applyEffects({
|
||||
light: timeBasedLight,
|
||||
rain: weatherState.value.isRainEnabled ? weatherState.value.rainPercentage : 0,
|
||||
fog: weatherState.value.isFogEnabled ? weatherState.value.fogDensity * 100 : 0
|
||||
})
|
||||
// Only update effects once zoneEffects are loaded
|
||||
if (!zoneEffectsReady.value) {
|
||||
if (zoneEffects && Object.keys(zoneEffects).length) {
|
||||
zoneEffectsReady.value = true
|
||||
} else {
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
const finalEffects =
|
||||
zoneEffects && Object.keys(zoneEffects).length
|
||||
? zoneEffects
|
||||
: {
|
||||
light: timeBasedLight,
|
||||
rain: weatherState.value.isRainEnabled ? weatherState.value.rainPercentage : 0,
|
||||
fog: weatherState.value.isFogEnabled ? weatherState.value.fogDensity * 100 : 0
|
||||
}
|
||||
|
||||
applyEffects(finalEffects)
|
||||
}
|
||||
|
||||
const applyEffects = (effectValues: any) => {
|
||||
if (effects.light.value) {
|
||||
const darkness = 1 - (effectValues.light ?? 100) / 100
|
||||
effects.light.value.clear()
|
||||
.fillStyle(0x000000, darkness)
|
||||
.fillRect(0, 0, window.innerWidth, window.innerHeight)
|
||||
effects.light.value.clear().fillStyle(0x000000, darkness).fillRect(0, 0, window.innerWidth, window.innerHeight)
|
||||
}
|
||||
|
||||
if (effects.rain.value) {
|
||||
const strength = effectValues.rain ?? 0
|
||||
strength > 0
|
||||
? effects.rain.value.start().setQuantity(Math.floor((strength / 100) * 10))
|
||||
: effects.rain.value.stop()
|
||||
strength > 0 ? effects.rain.value.start().setQuantity(Math.floor((strength / 100) * 10)) : effects.rain.value.stop()
|
||||
}
|
||||
|
||||
if (effects.fog.value) {
|
||||
@ -113,19 +129,14 @@ const calculateLightStrength = (time: Date): number => {
|
||||
const hour = time.getHours()
|
||||
const minute = time.getMinutes()
|
||||
|
||||
if (hour >= LIGHT_CONFIG.SUNSET_HOUR || hour < LIGHT_CONFIG.SUNRISE_HOUR)
|
||||
return LIGHT_CONFIG.NIGHT_STRENGTH
|
||||
if (hour >= LIGHT_CONFIG.SUNSET_HOUR || hour < LIGHT_CONFIG.SUNRISE_HOUR) return LIGHT_CONFIG.NIGHT_STRENGTH
|
||||
|
||||
if (hour > LIGHT_CONFIG.SUNRISE_HOUR && hour < LIGHT_CONFIG.SUNSET_HOUR - 2)
|
||||
return LIGHT_CONFIG.DAY_STRENGTH
|
||||
if (hour > LIGHT_CONFIG.SUNRISE_HOUR && hour < LIGHT_CONFIG.SUNSET_HOUR - 2) return LIGHT_CONFIG.DAY_STRENGTH
|
||||
|
||||
if (hour === LIGHT_CONFIG.SUNRISE_HOUR)
|
||||
return LIGHT_CONFIG.NIGHT_STRENGTH +
|
||||
((LIGHT_CONFIG.DAY_STRENGTH - LIGHT_CONFIG.NIGHT_STRENGTH) * minute) / 60
|
||||
if (hour === LIGHT_CONFIG.SUNRISE_HOUR) return LIGHT_CONFIG.NIGHT_STRENGTH + ((LIGHT_CONFIG.DAY_STRENGTH - LIGHT_CONFIG.NIGHT_STRENGTH) * minute) / 60
|
||||
|
||||
const totalMinutes = (hour - (LIGHT_CONFIG.SUNSET_HOUR - 2)) * 60 + minute
|
||||
return LIGHT_CONFIG.DAY_STRENGTH -
|
||||
(LIGHT_CONFIG.DAY_STRENGTH - LIGHT_CONFIG.NIGHT_STRENGTH) * (totalMinutes / 120)
|
||||
return LIGHT_CONFIG.DAY_STRENGTH - (LIGHT_CONFIG.DAY_STRENGTH - LIGHT_CONFIG.NIGHT_STRENGTH) * (totalMinutes / 120)
|
||||
}
|
||||
|
||||
// Socket and window handlers
|
||||
@ -144,14 +155,19 @@ const setupSocketListeners = () => {
|
||||
}
|
||||
|
||||
const handleResize = () => {
|
||||
if (effects.rain.value)
|
||||
effects.rain.value.updateConfig({ x: { min: 0, max: window.innerWidth } })
|
||||
if (effects.fog.value)
|
||||
effects.fog.value.setPosition(window.innerWidth / 2, window.innerHeight / 2)
|
||||
if (effects.rain.value) effects.rain.value.updateConfig({ x: { min: 0, max: window.innerWidth } })
|
||||
if (effects.fog.value) effects.fog.value.setPosition(window.innerWidth / 2, window.innerHeight / 2)
|
||||
}
|
||||
|
||||
// Lifecycle
|
||||
watch(() => zoneStore.zone?.zoneEffects, updateScene, { deep: true })
|
||||
watch(
|
||||
() => zoneStore.zone,
|
||||
() => {
|
||||
zoneEffectsReady.value = false
|
||||
updateScene()
|
||||
},
|
||||
{ deep: true }
|
||||
)
|
||||
|
||||
onMounted(() => window.addEventListener('resize', handleResize))
|
||||
|
||||
@ -160,4 +176,4 @@ onBeforeUnmount(() => {
|
||||
if (sceneRef.value) sceneRef.value.scene.remove('effects')
|
||||
gameStore.connection?.off('weather')
|
||||
})
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -3,22 +3,24 @@
|
||||
<Healthbar :zoneCharacter="props.zoneCharacter" :currentX="currentX" :currentY="currentY" />
|
||||
<Container ref="charContainer" :depth="isometricDepth" :x="currentX" :y="currentY">
|
||||
<CharacterHair :zoneCharacter="props.zoneCharacter" :currentX="currentX" :currentY="currentY" />
|
||||
<!-- <CharacterChest :zoneCharacter="props.zoneCharacter" :currentX="currentX" :currentY="currentY" />-->
|
||||
<Sprite ref="charSprite" :origin-y="1" :flipX="isFlippedX" />
|
||||
</Container>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import config from '@/config'
|
||||
import { type Sprite as SpriteT, type ZoneCharacter } from '@/types'
|
||||
import config from '@/application/config'
|
||||
import { type Sprite as SpriteT, type ZoneCharacter } from '@/application/types'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useZoneStore } from '@/stores/zoneStore'
|
||||
import { watch, computed, ref, onMounted, onUnmounted } from 'vue'
|
||||
import { Container, Image, refObj, RoundRectangle, Sprite, Text, useGame, useScene } from 'phavuer'
|
||||
import { Container, refObj, Sprite, useScene } from 'phavuer'
|
||||
import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
|
||||
import { loadSpriteTextures } from '@/composables/gameComposable'
|
||||
import ChatBubble from '@/components/game/character/partials/ChatBubble.vue'
|
||||
import Healthbar from '@/components/game/character/partials/Healthbar.vue'
|
||||
import CharacterHair from '@/components/game/character/partials/CharacterHair.vue'
|
||||
// import CharacterChest from '@/components/game/character/partials/CharacterChest.vue'
|
||||
|
||||
enum Direction {
|
||||
POSITIVE,
|
||||
@ -154,7 +156,7 @@ onMounted(() => {
|
||||
zoneStore.setCharacterLoaded(true)
|
||||
|
||||
// #146 : Set camera position to character, need to be improved still
|
||||
scene.cameras.main.startFollow(charContainer.value as Phaser.GameObjects.Container)
|
||||
// scene.cameras.main.startFollow(charContainer.value as Phaser.GameObjects.Container)
|
||||
// scene.cameras.main.stopFollow()
|
||||
}
|
||||
|
||||
|
||||
51
src/components/game/character/partials/CharacterChest.vue
Normal file
51
src/components/game/character/partials/CharacterChest.vue
Normal file
@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<Image v-bind="imageProps" v-if="gameStore.getLoadedAsset(texture)" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue'
|
||||
import { Image, useScene } from 'phavuer'
|
||||
import type { Sprite as SpriteT, ZoneCharacter } from '@/application/types'
|
||||
import { loadSpriteTextures } from '@/composables/gameComposable'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
|
||||
const props = defineProps<{
|
||||
zoneCharacter: ZoneCharacter
|
||||
currentX: number
|
||||
currentY: number
|
||||
}>()
|
||||
|
||||
const gameStore = useGameStore()
|
||||
const scene = useScene()
|
||||
|
||||
const texture = computed(() => {
|
||||
const { rotation, characterHair } = props.zoneCharacter.character
|
||||
const spriteId = characterHair?.sprite?.id
|
||||
const direction = [0, 6].includes(rotation) ? 'back' : 'front'
|
||||
|
||||
return `${spriteId}-${direction}`
|
||||
})
|
||||
|
||||
const isFlippedX = computed(() => [6, 4].includes(props.zoneCharacter.character.rotation ?? 0))
|
||||
|
||||
const imageProps = computed(() => {
|
||||
// Get the current sprite action based on direction
|
||||
const direction = [0, 6].includes(props.zoneCharacter.character.rotation ?? 0) ? 'back' : 'front'
|
||||
const spriteAction = props.zoneCharacter.character.characterHair?.sprite?.spriteActions?.find((spriteAction) => spriteAction.action === direction)
|
||||
|
||||
return {
|
||||
depth: 1,
|
||||
originX: Number(spriteAction?.originX) ?? 0,
|
||||
originY: Number(spriteAction?.originY) ?? 0,
|
||||
flipX: isFlippedX.value,
|
||||
texture: texture.value
|
||||
// y: props.zoneCharacter.isMoving ? Math.floor(Date.now() / 250) % 2 : 0
|
||||
}
|
||||
})
|
||||
|
||||
loadSpriteTextures(scene, props.zoneCharacter.character.characterHair?.sprite as SpriteT)
|
||||
.then(() => {})
|
||||
.catch((error) => {
|
||||
console.error('Error loading texture:', error)
|
||||
})
|
||||
</script>
|
||||
@ -5,7 +5,7 @@
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue'
|
||||
import { Image, useScene } from 'phavuer'
|
||||
import type { Sprite as SpriteT, ZoneCharacter } from '@/types'
|
||||
import type { Sprite as SpriteT, ZoneCharacter } from '@/application/types'
|
||||
import { loadSpriteTextures } from '@/composables/gameComposable'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
|
||||
@ -28,16 +28,20 @@ const texture = computed(() => {
|
||||
|
||||
const isFlippedX = computed(() => [6, 4].includes(props.zoneCharacter.character.rotation ?? 0))
|
||||
|
||||
const ANIMATION_MS = 500 // Animation duration in milliseconds
|
||||
const imageProps = computed(() => ({
|
||||
depth: 1,
|
||||
originY: [0, 6].includes(props.zoneCharacter.character.rotation ?? 0) ? 4.30 : 5.30,
|
||||
flipX: isFlippedX.value,
|
||||
texture: texture.value,
|
||||
y: props.zoneCharacter.isMoving ? (scene.time.now % ANIMATION_MS < (ANIMATION_MS / 2) ? 0.5 : -0.5) : 0,
|
||||
x: props.zoneCharacter.isMoving ? (scene.time.now % ANIMATION_MS < (ANIMATION_MS / 2) ? -0.5 : 0.5) : 0,
|
||||
}))
|
||||
const imageProps = computed(() => {
|
||||
// Get the current sprite action based on direction
|
||||
const direction = [0, 6].includes(props.zoneCharacter.character.rotation ?? 0) ? 'back' : 'front'
|
||||
const spriteAction = props.zoneCharacter.character.characterHair?.sprite?.spriteActions?.find((spriteAction) => spriteAction.action === direction)
|
||||
|
||||
return {
|
||||
depth: 1,
|
||||
originX: Number(spriteAction?.originX) ?? 0,
|
||||
originY: Number(spriteAction?.originY) ?? 0,
|
||||
flipX: isFlippedX.value,
|
||||
texture: texture.value,
|
||||
y: props.zoneCharacter.isMoving ? Math.floor(Date.now() / 250) % 2 : 0
|
||||
}
|
||||
})
|
||||
|
||||
loadSpriteTextures(scene, props.zoneCharacter.character.characterHair?.sprite as SpriteT)
|
||||
.then(() => {})
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Container, refObj, RoundRectangle, Text, useGame } from 'phavuer'
|
||||
import type { ZoneCharacter } from '@/types'
|
||||
import type { ZoneCharacter } from '@/application/types'
|
||||
import { onMounted } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Container, RoundRectangle, Text, useGame } from 'phavuer'
|
||||
import type { ZoneCharacter } from '@/types'
|
||||
import type { ZoneCharacter } from '@/application/types'
|
||||
|
||||
const props = defineProps<{
|
||||
zoneCharacter: ZoneCharacter
|
||||
|
||||
@ -5,12 +5,12 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onUnmounted } from 'vue'
|
||||
import { ref, onUnmounted, onMounted, onBeforeMount } from 'vue'
|
||||
import { useScene } from 'phavuer'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useZoneStore } from '@/stores/zoneStore'
|
||||
import { loadZoneTilesIntoScene } from '@/composables/zoneComposable'
|
||||
import type { Zone as ZoneT, ZoneCharacter } from '@/types'
|
||||
import type { Zone as ZoneT, ZoneCharacter, zoneLoadData } from '@/application/types'
|
||||
import ZoneTiles from '@/components/game/zone/ZoneTiles.vue'
|
||||
import ZoneObjects from '@/components/game/zone/ZoneObjects.vue'
|
||||
import Characters from '@/components/game/zone/Characters.vue'
|
||||
@ -21,29 +21,22 @@ const zoneStore = useZoneStore()
|
||||
|
||||
const tileMap = ref(null as Phaser.Tilemaps.Tilemap | null)
|
||||
|
||||
type zoneLoadData = {
|
||||
zone: ZoneT
|
||||
characters: ZoneCharacter[]
|
||||
}
|
||||
onUnmounted(() => {
|
||||
zoneStore.reset()
|
||||
gameStore.connection!.off('zone:character:teleport')
|
||||
gameStore.connection!.off('zone:character:join')
|
||||
gameStore.connection!.off('zone:character:leave')
|
||||
gameStore.connection!.off('zone:character:move')
|
||||
})
|
||||
|
||||
// Event listeners
|
||||
gameStore.connection!.on('zone:character:teleport', async (data: zoneLoadData) => {
|
||||
/**
|
||||
* @TODO : Update character via global event server-side, remove this and listen for it somewhere not here
|
||||
*/
|
||||
gameStore.setCharacter({
|
||||
...gameStore.character!,
|
||||
zoneId: data.zone.id
|
||||
})
|
||||
|
||||
await loadZoneTilesIntoScene(data.zone, scene)
|
||||
zoneStore.setZone(data.zone)
|
||||
zoneStore.setCharacters(data.characters)
|
||||
})
|
||||
|
||||
gameStore.connection!.on('zone:character:join', async (data: ZoneCharacter) => {
|
||||
// If data is from the current user, don't add it to the store
|
||||
if (data.character.id === gameStore.character?.id) return
|
||||
zoneStore.addCharacter(data)
|
||||
})
|
||||
|
||||
@ -51,22 +44,7 @@ gameStore.connection!.on('zone:character:leave', (characterId: number) => {
|
||||
zoneStore.removeCharacter(characterId)
|
||||
})
|
||||
|
||||
gameStore.connection!.on('character:move', (data: ZoneCharacter) => {
|
||||
zoneStore.updateCharacter(data)
|
||||
})
|
||||
|
||||
// Emit zone:character:join event to server and wait for response, then set zone and characters
|
||||
gameStore!.connection!.emit('zone:character:join', async (response: zoneLoadData) => {
|
||||
await loadZoneTilesIntoScene(response.zone, scene)
|
||||
zoneStore.setZone(response.zone)
|
||||
zoneStore.setCharacters(response.characters)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
zoneStore.reset()
|
||||
gameStore.connection!.off('zone:character:teleport')
|
||||
gameStore.connection!.off('zone:character:join')
|
||||
gameStore.connection!.off('zone:character:leave')
|
||||
gameStore.connection!.off('character:move')
|
||||
gameStore.connection!.on('zone:character:move', (data: { id: number; positionX: number; positionY: number; rotation: number; isMoving: boolean }) => {
|
||||
zoneStore.updateCharacterPosition(data)
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -3,13 +3,13 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import config from '@/config'
|
||||
import config from '@/application/config'
|
||||
import { useScene } from 'phavuer'
|
||||
import { useZoneStore } from '@/stores/zoneStore'
|
||||
import { onBeforeUnmount } from 'vue'
|
||||
import { FlattenZoneArray, setLayerTiles } from '@/composables/zoneComposable'
|
||||
import Controls from '@/components/utilities/Controls.vue'
|
||||
import { unduplicateArray } from '@/utilities'
|
||||
import { unduplicateArray } from '@/application/utilities'
|
||||
|
||||
const emit = defineEmits(['tileMap:create'])
|
||||
|
||||
|
||||
@ -7,7 +7,7 @@ import { computed } from 'vue'
|
||||
import { Image, useScene } from 'phavuer'
|
||||
import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
|
||||
import { loadTexture } from '@/composables/gameComposable'
|
||||
import type { AssetDataT, ZoneObject } from '@/types'
|
||||
import type { AssetDataT, ZoneObject } from '@/application/types'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
|
||||
const props = defineProps<{
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="flex gap-4 h-[calc(100%_-_32px)] w-[calc(100%_-_32px)] relative m-4">
|
||||
<div class="w-2/12 flex flex-col relative overflow-auto rounded-md border border-solid border-gray-500 bg-gray-700 p-2.5">
|
||||
<div class="w-2/12 flex flex-col relative overflow-auto rounded-md default-border bg-gray p-2.5">
|
||||
<!-- Asset Categories -->
|
||||
<a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group" :class="{ 'bg-cyan': selectedCategory === 'tiles' }" @click="() => (selectedCategory = 'tiles')">
|
||||
<span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'tiles' }">Tiles</span>
|
||||
@ -11,8 +11,8 @@
|
||||
<a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group" :class="{ 'bg-cyan': selectedCategory === 'sprites' }" @click="() => (selectedCategory = 'sprites')">
|
||||
<span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'sprites' }">Sprites</span>
|
||||
</a>
|
||||
<a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group">
|
||||
<span class="group-hover:text-white">Items</span>
|
||||
<a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group" :class="{ 'bg-cyan': selectedCategory === 'items' }" @click="() => (selectedCategory = 'items')">
|
||||
<span class="group-hover:text-white" :class="{ 'text-white': selectedCategory === 'items' }">Items</span>
|
||||
</a>
|
||||
<a class="relative p-2.5 hover:cursor-pointer hover:bg-cyan rounded group">
|
||||
<span class="group-hover:text-white">NPC's</span>
|
||||
@ -42,15 +42,17 @@
|
||||
<TileList v-if="selectedCategory === 'tiles'" />
|
||||
<ObjectList v-if="selectedCategory === 'objects'" />
|
||||
<SpriteList v-if="selectedCategory === 'sprites'" />
|
||||
<ItemList v-if="selectedCategory === 'items'" />
|
||||
<CharacterTypeList v-if="selectedCategory === 'characterTypes'" />
|
||||
<CharacterHairList v-if="selectedCategory === 'characterHair'" />
|
||||
</div>
|
||||
|
||||
<!-- Asset details -->
|
||||
<div class="flex w-4/12 after:hidden flex-col relative overflow-auto">
|
||||
<div class="flex w-7/12 after:hidden flex-col relative overflow-auto">
|
||||
<TileDetails v-if="selectedCategory === 'tiles' && assetManagerStore.selectedTile" />
|
||||
<ObjectDetails v-if="selectedCategory === 'objects' && assetManagerStore.selectedObject" />
|
||||
<SpriteDetails v-if="selectedCategory === 'sprites' && assetManagerStore.selectedSprite" />
|
||||
<ItemDetails v-if="selectedCategory === 'items' && assetManagerStore.selectedItem" />
|
||||
<CharacterTypeDetails v-if="selectedCategory === 'characterTypes' && assetManagerStore.selectedCharacterType" />
|
||||
<CharacterHairDetails v-if="selectedCategory === 'characterHair' && assetManagerStore.selectedCharacterHair" />
|
||||
</div>
|
||||
@ -70,6 +72,8 @@ import CharacterTypeList from '@/components/gameMaster/assetManager/partials/cha
|
||||
import CharacterTypeDetails from '@/components/gameMaster/assetManager/partials/characterType/CharacterTypeDetails.vue'
|
||||
import CharacterHairList from '@/components/gameMaster/assetManager/partials/characterHair/CharacterHairList.vue'
|
||||
import CharacterHairDetails from '@/components/gameMaster/assetManager/partials/characterHair/CharacterHairDetails.vue'
|
||||
import ItemList from '@/components/gameMaster/assetManager/partials/item/itemList.vue'
|
||||
import ItemDetails from '@/components/gameMaster/assetManager/partials/item/itemDetails.vue'
|
||||
|
||||
const assetManagerStore = useAssetManagerStore()
|
||||
const selectedCategory = ref('tiles')
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="h-full overflow-auto">
|
||||
<div class="p-2.5 block rounded-md border border-solid border-gray-500 bg-gray-700">
|
||||
<div class="p-2.5 block rounded-md default-border bg-gray">
|
||||
<form class="flex gap-2.5 flex-wrap" @submit.prevent="saveCharacterHair">
|
||||
<div class="form-field-full">
|
||||
<label for="name">Name</label>
|
||||
@ -13,8 +13,8 @@
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-field-full">
|
||||
<label for="isEnabledForCharCreation">Is enabled for character creation</label>
|
||||
<select v-model="characterIsEnabledForCharCreation" class="input-field" name="isEnabledForCharCreation">
|
||||
<label for="isSelectable">Is selectable</label>
|
||||
<select v-model="characterIsSelectable" class="input-field" name="isSelectable">
|
||||
<option :value="false">No</option>
|
||||
<option :value="true">Yes</option>
|
||||
</select>
|
||||
@ -34,7 +34,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { CharacterHair, CharacterGender, Sprite } from '@/types'
|
||||
import type { CharacterHair, CharacterGender, Sprite } from '@/application/types'
|
||||
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
||||
import { useAssetManagerStore } from '@/stores/assetManagerStore'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
@ -46,7 +46,7 @@ const selectedCharacterHair = computed(() => assetManagerStore.selectedCharacter
|
||||
|
||||
const characterName = ref('')
|
||||
const characterGender = ref<CharacterGender>('MALE' as CharacterGender.MALE)
|
||||
const characterIsEnabledForCharCreation = ref<boolean>(false)
|
||||
const characterIsSelectable = ref<boolean>(false)
|
||||
const characterSpriteId = ref<string | null | undefined>(null)
|
||||
|
||||
const genderOptions: CharacterGender[] = ['MALE' as CharacterGender.MALE, 'FEMALE' as CharacterGender.FEMALE]
|
||||
@ -58,7 +58,7 @@ if (!selectedCharacterHair.value) {
|
||||
if (selectedCharacterHair.value) {
|
||||
characterName.value = selectedCharacterHair.value.name
|
||||
characterGender.value = selectedCharacterHair.value.gender
|
||||
characterIsEnabledForCharCreation.value = selectedCharacterHair.value.isEnabledForCharCreation
|
||||
characterIsSelectable.value = selectedCharacterHair.value.isSelectable
|
||||
characterSpriteId.value = selectedCharacterHair.value.spriteId
|
||||
}
|
||||
|
||||
@ -89,7 +89,7 @@ function saveCharacterHair() {
|
||||
id: selectedCharacterHair.value!.id,
|
||||
name: characterName.value,
|
||||
gender: characterGender.value,
|
||||
isEnabledForCharCreation: characterIsEnabledForCharCreation.value,
|
||||
isSelectable: characterIsSelectable.value,
|
||||
spriteId: characterSpriteId.value
|
||||
}
|
||||
|
||||
@ -106,7 +106,7 @@ watch(selectedCharacterHair, (characterHair: CharacterHair | null) => {
|
||||
if (!characterHair) return
|
||||
characterName.value = characterHair.name
|
||||
characterGender.value = characterHair.gender
|
||||
characterIsEnabledForCharCreation.value = characterHair.isEnabledForCharCreation
|
||||
characterIsSelectable.value = characterHair.isSelectable
|
||||
characterSpriteId.value = characterHair.spriteId
|
||||
})
|
||||
|
||||
|
||||
@ -9,9 +9,15 @@
|
||||
</button>
|
||||
</label>
|
||||
</div>
|
||||
<div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md border border-solid border-gray-500 bg-gray-700" @scroll="onScroll">
|
||||
<div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
|
||||
<div v-bind="wrapperProps" ref="elementToScroll">
|
||||
<a v-for="{ data: characterHair } in list" :key="characterHair.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedCharacterHair?.id === characterHair.id }" @click="assetManagerStore.setSelectedCharacterHair(characterHair as CharacterHair)">
|
||||
<a
|
||||
v-for="{ data: characterHair } in list"
|
||||
:key="characterHair.id"
|
||||
class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group"
|
||||
:class="{ 'bg-cyan': assetManagerStore.selectedCharacterHair?.id === characterHair.id }"
|
||||
@click="assetManagerStore.setSelectedCharacterHair(characterHair as CharacterHair)"
|
||||
>
|
||||
<div class="flex items-center gap-2.5">
|
||||
<span class="group-hover:text-white" :class="{ 'text-white': assetManagerStore.selectedCharacterHair?.id === characterHair.id }">{{ characterHair.name }}</span>
|
||||
</div>
|
||||
@ -19,7 +25,7 @@
|
||||
</div>
|
||||
<div class="absolute w-12 h-12 bottom-2.5 right-2.5">
|
||||
<button class="fixed min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
|
||||
<img class="absolute invert w-8 h-8 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
|
||||
<img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -29,7 +35,7 @@
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { onMounted, ref, computed } from 'vue'
|
||||
import { useAssetManagerStore } from '@/stores/assetManagerStore'
|
||||
import type { CharacterHair } from '@/types'
|
||||
import type { CharacterHair } from '@/application/types'
|
||||
import { useVirtualList } from '@vueuse/core'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="h-full overflow-auto">
|
||||
<div class="p-2.5 block rounded-md border border-solid border-gray-500 bg-gray-700">
|
||||
<div class="p-2.5 block rounded-md default-border bg-gray">
|
||||
<form class="flex gap-2.5 flex-wrap" @submit.prevent="saveCharacterType">
|
||||
<div class="form-field-full">
|
||||
<label for="name">Name</label>
|
||||
@ -19,8 +19,8 @@
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-field-full">
|
||||
<label for="isEnabledForCharCreation">Is enabled for character creation</label>
|
||||
<select v-model="characterIsEnabledForCharCreation" class="input-field" name="isEnabledForCharCreation">
|
||||
<label for="isSelectable">Is selectable</label>
|
||||
<select v-model="characterIsSelectable" class="input-field" name="isSelectable">
|
||||
<option :value="false">No</option>
|
||||
<option :value="true">Yes</option>
|
||||
</select>
|
||||
@ -40,7 +40,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { CharacterType, CharacterGender, CharacterRace, Sprite } from '@/types'
|
||||
import type { CharacterType, CharacterGender, CharacterRace, Sprite } from '@/application/types'
|
||||
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
||||
import { useAssetManagerStore } from '@/stores/assetManagerStore'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
@ -53,7 +53,7 @@ const selectedCharacterType = computed(() => assetManagerStore.selectedCharacter
|
||||
const characterName = ref('')
|
||||
const characterGender = ref<CharacterGender>('MALE' as CharacterGender.MALE)
|
||||
const characterRace = ref<CharacterRace>('HUMAN' as CharacterRace.HUMAN)
|
||||
const characterIsEnabledForCharCreation = ref<boolean>(false)
|
||||
const characterIsSelectable = ref<boolean>(false)
|
||||
const characterSpriteId = ref<string | null | undefined>(null)
|
||||
|
||||
const genderOptions: CharacterGender[] = ['MALE' as CharacterGender.MALE, 'FEMALE' as CharacterGender.FEMALE]
|
||||
@ -67,7 +67,7 @@ if (selectedCharacterType.value) {
|
||||
characterName.value = selectedCharacterType.value.name
|
||||
characterGender.value = selectedCharacterType.value.gender
|
||||
characterRace.value = selectedCharacterType.value.race
|
||||
characterIsEnabledForCharCreation.value = selectedCharacterType.value.isEnabledForCharCreation
|
||||
characterIsSelectable.value = selectedCharacterType.value.isSelectable
|
||||
characterSpriteId.value = selectedCharacterType.value.spriteId
|
||||
}
|
||||
|
||||
@ -99,7 +99,7 @@ function saveCharacterType() {
|
||||
name: characterName.value,
|
||||
gender: characterGender.value,
|
||||
race: characterRace.value,
|
||||
isEnabledForCharCreation: characterIsEnabledForCharCreation.value,
|
||||
isSelectable: characterIsSelectable.value,
|
||||
spriteId: characterSpriteId.value
|
||||
}
|
||||
|
||||
@ -117,7 +117,7 @@ watch(selectedCharacterType, (characterType: CharacterType | null) => {
|
||||
characterName.value = characterType.name
|
||||
characterGender.value = characterType.gender
|
||||
characterRace.value = characterType.race
|
||||
characterIsEnabledForCharCreation.value = characterType.isEnabledForCharCreation
|
||||
characterIsSelectable.value = characterType.isSelectable
|
||||
characterSpriteId.value = characterType.spriteId
|
||||
})
|
||||
|
||||
|
||||
@ -9,9 +9,15 @@
|
||||
</button>
|
||||
</label>
|
||||
</div>
|
||||
<div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md border border-solid border-gray-500 bg-gray-700" @scroll="onScroll">
|
||||
<div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
|
||||
<div v-bind="wrapperProps" ref="elementToScroll">
|
||||
<a v-for="{ data: characterType } in list" :key="characterType.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedCharacterType?.id === characterType.id }" @click="assetManagerStore.setSelectedCharacterType(characterType as CharacterType)">
|
||||
<a
|
||||
v-for="{ data: characterType } in list"
|
||||
:key="characterType.id"
|
||||
class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group"
|
||||
:class="{ 'bg-cyan': assetManagerStore.selectedCharacterType?.id === characterType.id }"
|
||||
@click="assetManagerStore.setSelectedCharacterType(characterType as CharacterType)"
|
||||
>
|
||||
<div class="flex items-center gap-2.5">
|
||||
<span class="group-hover:text-white" :class="{ 'text-white': assetManagerStore.selectedCharacterType?.id === characterType.id }">{{ characterType.name }}</span>
|
||||
</div>
|
||||
@ -19,7 +25,7 @@
|
||||
</div>
|
||||
<div class="absolute w-12 h-12 bottom-2.5 right-2.5">
|
||||
<button class="fixed min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
|
||||
<img class="absolute invert w-8 h-8 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
|
||||
<img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -29,7 +35,7 @@
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { onMounted, ref, computed } from 'vue'
|
||||
import { useAssetManagerStore } from '@/stores/assetManagerStore'
|
||||
import type { CharacterType } from '@/types'
|
||||
import type { CharacterType } from '@/application/types'
|
||||
import { useVirtualList } from '@vueuse/core'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
|
||||
@ -0,0 +1,143 @@
|
||||
<template>
|
||||
<div class="h-full overflow-auto">
|
||||
<div class="p-2.5 block rounded-md default-border bg-gray">
|
||||
<form class="flex gap-2.5 flex-wrap" @submit.prevent="saveItem">
|
||||
<div class="form-field-full">
|
||||
<label for="name">Name</label>
|
||||
<input v-model="itemName" class="input-field" type="text" name="name" placeholder="Item Name" />
|
||||
</div>
|
||||
<div class="form-field-full">
|
||||
<label for="description">Description</label>
|
||||
<input v-model="itemDescription" class="input-field" type="text" name="description" placeholder="Item Description" />
|
||||
</div>
|
||||
<div class="form-field-full">
|
||||
<label for="itemType">Type</label>
|
||||
<select v-model="itemType" class="input-field" name="itemType">
|
||||
<option v-for="type in itemTypeOptions" :key="type" :value="type">{{ type }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-field-full">
|
||||
<label for="rarity">Rarity</label>
|
||||
<select v-model="itemRarity" class="input-field" name="rarity">
|
||||
<option v-for="rarity in rarityOptions" :key="rarity" :value="rarity">{{ rarity }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-field-full">
|
||||
<label for="stackable">Stackable</label>
|
||||
<select v-model="itemStackable" class="input-field" name="stackable">
|
||||
<option :value="false">No</option>
|
||||
<option :value="true">Yes</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-field-full">
|
||||
<label for="spriteId">Sprite</label>
|
||||
<select v-model="itemSpriteId" class="input-field" name="spriteId">
|
||||
<option disabled selected value="">Select sprite</option>
|
||||
<option v-for="sprite in assetManagerStore.spriteList" :key="sprite.id" :value="sprite.id">{{ sprite.name }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<button class="btn-cyan px-4 py-1.5 min-w-24" type="submit">Save</button>
|
||||
<button class="btn-red px-4 py-1.5 min-w-24" type="button" @click.prevent="removeItem">Remove</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Item, ItemType, ItemRarity } from '@/application/types'
|
||||
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
||||
import { useAssetManagerStore } from '@/stores/assetManagerStore'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
const assetManagerStore = useAssetManagerStore()
|
||||
|
||||
const selectedItem = computed(() => assetManagerStore.selectedItem)
|
||||
|
||||
const itemName = ref('')
|
||||
const itemDescription = ref('')
|
||||
const itemType = ref<ItemType>('WEAPON' as ItemType)
|
||||
const itemRarity = ref<ItemRarity>('COMMON' as ItemRarity)
|
||||
const itemStackable = ref<boolean>(false)
|
||||
const itemSpriteId = ref<string | null | undefined>(null)
|
||||
|
||||
const itemTypeOptions: ItemType[] = ['WEAPON', 'HELMET', 'CHEST', 'LEGS', 'BOOTS', 'GLOVES', 'RING', 'NECKLACE']
|
||||
const rarityOptions: ItemRarity[] = ['COMMON', 'UNCOMMON', 'RARE', 'EPIC', 'LEGENDARY']
|
||||
|
||||
if (!selectedItem.value) {
|
||||
console.error('No item selected')
|
||||
}
|
||||
|
||||
if (selectedItem.value) {
|
||||
itemName.value = selectedItem.value.name
|
||||
itemDescription.value = selectedItem.value.description || ''
|
||||
itemType.value = selectedItem.value.itemType
|
||||
itemRarity.value = selectedItem.value.rarity
|
||||
itemStackable.value = selectedItem.value.stackable
|
||||
itemSpriteId.value = selectedItem.value.spriteId
|
||||
}
|
||||
|
||||
function removeItem() {
|
||||
if (!selectedItem.value) return
|
||||
|
||||
gameStore.connection?.emit('gm:item:remove', { id: selectedItem.value.id }, (response: boolean) => {
|
||||
if (!response) {
|
||||
console.error('Failed to remove item')
|
||||
return
|
||||
}
|
||||
refreshItemList()
|
||||
})
|
||||
}
|
||||
|
||||
function refreshItemList(unsetSelectedItem = true) {
|
||||
gameStore.connection?.emit('gm:item:list', {}, (response: Item[]) => {
|
||||
assetManagerStore.setItemList(response)
|
||||
|
||||
if (unsetSelectedItem) {
|
||||
assetManagerStore.setSelectedItem(null)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function saveItem() {
|
||||
const itemData = {
|
||||
id: selectedItem.value!.id,
|
||||
name: itemName.value,
|
||||
description: itemDescription.value,
|
||||
itemType: itemType.value,
|
||||
rarity: itemRarity.value,
|
||||
stackable: itemStackable.value,
|
||||
spriteId: itemSpriteId.value
|
||||
}
|
||||
|
||||
gameStore.connection?.emit('gm:item:update', itemData, (response: boolean) => {
|
||||
if (!response) {
|
||||
console.error('Failed to save item')
|
||||
return
|
||||
}
|
||||
refreshItemList(false)
|
||||
})
|
||||
}
|
||||
|
||||
watch(selectedItem, (item: Item | null) => {
|
||||
if (!item) return
|
||||
itemName.value = item.name
|
||||
itemDescription.value = item.description || ''
|
||||
itemType.value = item.itemType
|
||||
itemRarity.value = item.rarity
|
||||
itemStackable.value = item.stackable
|
||||
itemSpriteId.value = item.spriteId
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
if (!selectedItem.value) return
|
||||
|
||||
gameStore.connection?.emit('gm:sprite:list', {}, (response: Sprite[]) => {
|
||||
assetManagerStore.setSpriteList(response)
|
||||
})
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
assetManagerStore.setSelectedItem(null)
|
||||
})
|
||||
</script>
|
||||
@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<div class="relative mb-5 flex items-center gap-x-2.5">
|
||||
<input v-model="searchQuery" class="input-field flex-grow" placeholder="Search..." @input="handleSearch" />
|
||||
<label for="create-item" class="bg-cyan text-white border border-solid border-white/25 rounded drop-shadow-20 p-2.5 inline-flex items-center justify-center hover:bg-cyan-800 hover:cursor-pointer">
|
||||
<button class="p-0 h-5" id="create-item" @click="createNewItem">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="white">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
</button>
|
||||
</label>
|
||||
</div>
|
||||
<div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
|
||||
<div v-bind="wrapperProps" ref="elementToScroll">
|
||||
<a v-for="{ data: item } in list" :key="item.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedItem?.id === item.id }" @click="assetManagerStore.setSelectedItem(item as Item)">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<span class="group-hover:text-white" :class="{ 'text-white': assetManagerStore.selectedItem?.id === item.id }">
|
||||
{{ item.name }}
|
||||
<small class="text-gray-400">({{ item.itemType }})</small>
|
||||
</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="absolute w-12 h-12 bottom-2.5 right-2.5">
|
||||
<button class="fixed min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
|
||||
<img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { onMounted, ref, computed } from 'vue'
|
||||
import { useAssetManagerStore } from '@/stores/assetManagerStore'
|
||||
import type { Item } from '@/application/types'
|
||||
import { useVirtualList } from '@vueuse/core'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
const assetManagerStore = useAssetManagerStore()
|
||||
|
||||
const searchQuery = ref('')
|
||||
|
||||
const hasScrolled = ref(false)
|
||||
const elementToScroll = ref()
|
||||
|
||||
const handleSearch = () => {
|
||||
virtualList.value?.scrollTo(0)
|
||||
}
|
||||
|
||||
const createNewItem = () => {
|
||||
gameStore.connection?.emit('gm:item:create', {}, (response: boolean) => {
|
||||
if (!response) {
|
||||
console.error('Failed to create new item')
|
||||
return
|
||||
}
|
||||
|
||||
gameStore.connection?.emit('gm:item:list', {}, (response: Item[]) => {
|
||||
assetManagerStore.setItemList(response)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const filteredItems = computed(() => {
|
||||
if (!searchQuery.value) {
|
||||
return assetManagerStore.itemList
|
||||
}
|
||||
return assetManagerStore.itemList.filter((item) => item.name.toLowerCase().includes(searchQuery.value.toLowerCase()) || item.itemType.toLowerCase().includes(searchQuery.value.toLowerCase()))
|
||||
})
|
||||
|
||||
const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(filteredItems, {
|
||||
itemHeight: 48
|
||||
})
|
||||
|
||||
const virtualList = ref({ scrollTo })
|
||||
|
||||
const onScroll = () => {
|
||||
let scrollTop = elementToScroll.value.style.marginTop.replace('px', '')
|
||||
|
||||
if (scrollTop > 80) {
|
||||
hasScrolled.value = true
|
||||
} else if (scrollTop <= 80) {
|
||||
hasScrolled.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function toTop() {
|
||||
virtualList.value?.scrollTo(0)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
gameStore.connection?.emit('gm:item:list', {}, (response: Item[]) => {
|
||||
assetManagerStore.setItemList(response)
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="h-full overflow-auto">
|
||||
<div class="relative p-2.5 flex flex-col items-center justify-center h-72 rounded-md border border-solid border-gray-500 bg-gray-700">
|
||||
<div class="relative p-2.5 flex flex-col items-center justify-center h-72 rounded-md default-border bg-gray">
|
||||
<img class="max-h-56" :src="`${config.server_endpoint}/assets/objects/${selectedObject?.id}.png`" :alt="'Object ' + selectedObject?.id" />
|
||||
</div>
|
||||
<div class="mt-5 block">
|
||||
@ -18,19 +18,19 @@
|
||||
<input v-model="objectOriginY" class="input-field" type="number" step="any" name="origin-y" placeholder="Origin Y" />
|
||||
</div>
|
||||
<div class="form-field-full">
|
||||
<label for="origin-x">Tags</label>
|
||||
<label for="tags">Tags</label>
|
||||
<ChipsInput v-model="objectTags" @update:modelValue="objectTags = $event" />
|
||||
</div>
|
||||
<div class="form-field-full">
|
||||
<label for="origin-x">Is animated</label>
|
||||
<label for="is-animated">Is animated</label>
|
||||
<select v-model="objectIsAnimated" class="input-field" name="is-animated">
|
||||
<option :value="false">No</option>
|
||||
<option :value="true">Yes</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-field-full">
|
||||
<label for="frame-speed">Frame speed</label>
|
||||
<input v-model="objectFrameSpeed" class="input-field" type="number" step="any" name="frame-speed" placeholder="Frame speed" />
|
||||
<label for="frame-speed">Frame rate</label>
|
||||
<input v-model="objectFrameRate" class="input-field" type="number" step="any" name="frame-speed" placeholder="Frame rate" />
|
||||
</div>
|
||||
<div class="form-field-half">
|
||||
<label for="frame-width">Frame width</label>
|
||||
@ -50,12 +50,12 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Object } from '@/types'
|
||||
import type { Object } from '@/application/types'
|
||||
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
||||
import { useAssetManagerStore } from '@/stores/assetManagerStore'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import config from '@/config'
|
||||
import config from '@/application/config'
|
||||
import ChipsInput from '@/components/forms/ChipsInput.vue'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
@ -69,7 +69,7 @@ const objectTags = ref<string[]>([])
|
||||
const objectOriginX = ref(0)
|
||||
const objectOriginY = ref(0)
|
||||
const objectIsAnimated = ref(false)
|
||||
const objectFrameSpeed = ref(0)
|
||||
const objectFrameRate = ref(0)
|
||||
const objectFrameWidth = ref(0)
|
||||
const objectFrameHeight = ref(0)
|
||||
|
||||
@ -83,7 +83,7 @@ if (selectedObject.value) {
|
||||
objectOriginX.value = selectedObject.value.originX
|
||||
objectOriginY.value = selectedObject.value.originY
|
||||
objectIsAnimated.value = selectedObject.value.isAnimated
|
||||
objectFrameSpeed.value = selectedObject.value.frameSpeed
|
||||
objectFrameRate.value = selectedObject.value.frameRate
|
||||
objectFrameWidth.value = selectedObject.value.frameWidth
|
||||
objectFrameHeight.value = selectedObject.value.frameHeight
|
||||
}
|
||||
@ -127,7 +127,7 @@ function saveObject() {
|
||||
originX: objectOriginX.value,
|
||||
originY: objectOriginY.value,
|
||||
isAnimated: objectIsAnimated.value,
|
||||
frameSpeed: objectFrameSpeed.value,
|
||||
frameRate: objectFrameRate.value,
|
||||
frameWidth: objectFrameWidth.value,
|
||||
frameHeight: objectFrameHeight.value
|
||||
},
|
||||
@ -148,7 +148,7 @@ watch(selectedObject, (object: Object | null) => {
|
||||
objectOriginX.value = object.originX
|
||||
objectOriginY.value = object.originY
|
||||
objectIsAnimated.value = object.isAnimated
|
||||
objectFrameSpeed.value = object.frameSpeed
|
||||
objectFrameRate.value = object.frameRate
|
||||
objectFrameWidth.value = object.frameWidth
|
||||
objectFrameHeight.value = object.frameHeight
|
||||
})
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
</svg>
|
||||
</label>
|
||||
</div>
|
||||
<div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md border border-solid border-gray-500 bg-gray-700" @scroll="onScroll">
|
||||
<div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
|
||||
<div v-bind="wrapperProps" ref="elementToScroll">
|
||||
<a v-for="{ data: object } in list" :key="object.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedObject?.id === object.id }" @click="assetManagerStore.setSelectedObject(object as Object)">
|
||||
<div class="flex items-center gap-2.5">
|
||||
@ -21,18 +21,18 @@
|
||||
</div>
|
||||
<div class="absolute w-12 h-12 bottom-2.5 right-2.5">
|
||||
<button class="fixed min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
|
||||
<img class="absolute invert w-8 h-8 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
|
||||
<img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import config from '@/config'
|
||||
import config from '@/application/config'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { onMounted, ref, computed } from 'vue'
|
||||
import { useAssetManagerStore } from '@/stores/assetManagerStore'
|
||||
import type { Object } from '@/types'
|
||||
import type { Object } from '@/application/types'
|
||||
import { useVirtualList } from '@vueuse/core'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="h-full overflow-auto">
|
||||
<div class="relative flex flex-col">
|
||||
<div class="flex flex-wrap gap-2 p-2.5 rounded-md border border-solid border-gray-500 bg-gray-700">
|
||||
<div class="flex flex-wrap gap-2 p-2.5 rounded-md default-border bg-gray">
|
||||
<div class="w-full flex flex-col">
|
||||
<label class="mb-1.5 font-titles" for="name">Name</label>
|
||||
<input v-model="spriteName" class="input-field" type="text" name="name" placeholder="New sprite" />
|
||||
@ -10,6 +10,11 @@
|
||||
<div class="w-full flex gap-2 mt-2 pb-4 relative">
|
||||
<button class="btn-cyan px-4 py-2 flex-1 sm:flex-none sm:min-w-24" type="button" @click.prevent="saveSprite">Save</button>
|
||||
<button class="btn-red px-4 py-2 flex-1 sm:flex-none sm:min-w-24" type="button" @click.prevent="deleteSprite">Delete</button>
|
||||
<button class="btn bg-indigo-500 hover:bg-indigo-600 rounded text-white px-4 py-2 flex-1 sm:flex-none" type="button" @click.prevent="copySprite">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -50,8 +55,8 @@
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-field-full" v-if="action.isAnimated">
|
||||
<label for="frame-speed">Frame speed</label>
|
||||
<input v-model.number="action.frameSpeed" class="input-field" type="number" step="any" name="frame-speed" placeholder="Frame speed" />
|
||||
<label for="frame-speed">Frame rate</label>
|
||||
<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" />
|
||||
@ -64,13 +69,13 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Sprite, SpriteAction } from '@/types'
|
||||
import type { Sprite, SpriteAction } from '@/application/types'
|
||||
import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
|
||||
import { useAssetManagerStore } from '@/stores/assetManagerStore'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import Accordion from '@/components/utilities/Accordion.vue'
|
||||
import SpriteActionsInput from '@/components/gameMaster/assetManager/partials/sprite/partials/SpriteImagesInput.vue'
|
||||
import { uuidv4 } from '@/utilities'
|
||||
import { uuidv4 } from '@/application/utilities'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
const assetManagerStore = useAssetManagerStore()
|
||||
@ -86,7 +91,7 @@ if (!selectedSprite.value) {
|
||||
|
||||
if (selectedSprite.value) {
|
||||
spriteName.value = selectedSprite.value.name
|
||||
spriteActions.value = selectedSprite.value.spriteActions
|
||||
spriteActions.value = sortSpriteActions(selectedSprite.value.spriteActions)
|
||||
}
|
||||
|
||||
function deleteSprite() {
|
||||
@ -99,6 +104,16 @@ function deleteSprite() {
|
||||
})
|
||||
}
|
||||
|
||||
function copySprite() {
|
||||
gameStore.connection?.emit('gm:sprite:copy', { id: selectedSprite.value?.id }, (response: boolean) => {
|
||||
if (!response) {
|
||||
console.error('Failed to copy sprite')
|
||||
return
|
||||
}
|
||||
refreshSpriteList(false)
|
||||
})
|
||||
}
|
||||
|
||||
function refreshSpriteList(unsetSelectedSprite = true) {
|
||||
gameStore.connection?.emit('gm:sprite:list', {}, (response: Sprite[]) => {
|
||||
assetManagerStore.setSpriteList(response)
|
||||
@ -127,7 +142,7 @@ function saveSprite() {
|
||||
originY: action.originY,
|
||||
isAnimated: action.isAnimated,
|
||||
isLooping: action.isLooping,
|
||||
frameSpeed: action.frameSpeed,
|
||||
frameRate: action.frameRate,
|
||||
frameWidth: action.frameWidth,
|
||||
frameHeight: action.frameHeight
|
||||
}
|
||||
@ -147,7 +162,7 @@ function addNewImage() {
|
||||
if (!selectedSprite.value) return
|
||||
|
||||
const newImage: SpriteAction = {
|
||||
id: uuidv4(), // Temporary ID, should be replaced by server-generated ID
|
||||
id: uuidv4(),
|
||||
spriteId: selectedSprite.value.id,
|
||||
sprite: selectedSprite.value,
|
||||
action: 'new_action',
|
||||
@ -156,7 +171,7 @@ function addNewImage() {
|
||||
originY: 0,
|
||||
isAnimated: false,
|
||||
isLooping: false,
|
||||
frameSpeed: 0,
|
||||
frameRate: 0,
|
||||
frameWidth: 0,
|
||||
frameHeight: 0
|
||||
}
|
||||
@ -165,13 +180,17 @@ function addNewImage() {
|
||||
spriteActions.value = []
|
||||
}
|
||||
|
||||
spriteActions.value.push(newImage)
|
||||
spriteActions.value = sortSpriteActions([...spriteActions.value, newImage])
|
||||
}
|
||||
|
||||
function sortSpriteActions(actions: SpriteAction[]): SpriteAction[] {
|
||||
return [...actions].sort((a, b) => a.action.localeCompare(b.action))
|
||||
}
|
||||
|
||||
watch(selectedSprite, (sprite: Sprite | null) => {
|
||||
if (!sprite) return
|
||||
spriteName.value = sprite.name
|
||||
spriteActions.value = sprite.spriteActions
|
||||
spriteActions.value = sortSpriteActions(sprite.spriteActions)
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md border border-solid border-gray-500 bg-gray-700" @scroll="onScroll">
|
||||
<div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
|
||||
<div v-bind="wrapperProps" ref="elementToScroll">
|
||||
<a v-for="{ data: sprite } in list" :key="sprite.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedSprite?.id === sprite.id }" @click="assetManagerStore.setSelectedSprite(sprite as Sprite)">
|
||||
<div class="flex items-center gap-2.5">
|
||||
@ -17,19 +17,19 @@
|
||||
</div>
|
||||
<div class="absolute w-12 h-12 bottom-2.5 right-2.5">
|
||||
<button class="fixed min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
|
||||
<img class="absolute invert w-8 h-8 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
|
||||
<img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import config from '@/config'
|
||||
import config from '@/application/config'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { onMounted, ref, computed } from 'vue'
|
||||
import { useAssetManagerStore } from '@/stores/assetManagerStore'
|
||||
import { useVirtualList } from '@vueuse/core'
|
||||
import type { Sprite } from '@/types'
|
||||
import type { Sprite } from '@/application/types'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
const assetManagerStore = useAssetManagerStore()
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="h-full overflow-auto">
|
||||
<div class="relative p-2.5 flex flex-col items-center justify-center h-72 rounded-md border border-solid border-gray-500 bg-gray-700">
|
||||
<div class="relative p-2.5 flex flex-col items-center justify-center h-72 rounded-md default-border bg-gray">
|
||||
<img class="max-h-72" :src="`${config.server_endpoint}/assets/tiles/${selectedTile?.id}.png`" :alt="'Tile ' + selectedTile?.id" />
|
||||
</div>
|
||||
<div class="mt-5 block">
|
||||
@ -23,12 +23,12 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Tile } from '@/types'
|
||||
import type { Tile } from '@/application/types'
|
||||
import { computed, onBeforeUnmount, onMounted, ref, toRaw, watch } from 'vue'
|
||||
import { useAssetManagerStore } from '@/stores/assetManagerStore'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import config from '@/config'
|
||||
import config from '@/application/config'
|
||||
import ChipsInput from '@/components/forms/ChipsInput.vue'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
</svg>
|
||||
</label>
|
||||
</div>
|
||||
<div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md border border-solid border-gray-500 bg-gray-700" @scroll="onScroll">
|
||||
<div v-bind="containerProps" class="overflow-y-auto relative p-2.5 rounded-md default-border bg-gray" @scroll="onScroll">
|
||||
<div v-bind="wrapperProps" ref="elementToScroll">
|
||||
<a v-for="{ data: tile } in list" :key="tile.id" class="relative p-2.5 cursor-pointer block rounded hover:bg-cyan group" :class="{ 'bg-cyan': assetManagerStore.selectedTile?.id === tile.id }" @click="assetManagerStore.setSelectedTile(tile)">
|
||||
<div class="flex items-center gap-2.5">
|
||||
@ -21,18 +21,18 @@
|
||||
</div>
|
||||
<div class="absolute w-12 h-12 bottom-2.5 right-2.5">
|
||||
<button class="fixed min-w-[unset] w-12 h-12 rounded-md bg-cyan p-0 hover:bg-cyan-800" v-show="hasScrolled" @click="toTop">
|
||||
<img class="absolute invert w-8 h-8 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
|
||||
<img class="invert w-8 h-8 center-element rotate-180" src="/assets/icons/zoneEditor/chevron.svg" alt="" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import config from '@/config'
|
||||
import config from '@/application/config'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { onMounted, ref, computed } from 'vue'
|
||||
import { useAssetManagerStore } from '@/stores/assetManagerStore'
|
||||
import type { Tile } from '@/types'
|
||||
import type { Tile } from '@/application/types'
|
||||
import { useVirtualList } from '@vueuse/core'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
import { onUnmounted, ref } from 'vue'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import { type Zone } from '@/types'
|
||||
import { type Zone } from '@/application/types'
|
||||
// Components
|
||||
import Toolbar from '@/components/gameMaster/zoneEditor/partials/Toolbar.vue'
|
||||
import TileList from '@/components/gameMaster/zoneEditor/partials/TileList.vue'
|
||||
|
||||
@ -40,7 +40,7 @@ import { ref } from 'vue'
|
||||
import Modal from '@/components/utilities/Modal.vue'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import type { Zone } from '@/types'
|
||||
import type { Zone } from '@/application/types'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
|
||||
@ -41,12 +41,12 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import config from '@/config'
|
||||
import config from '@/application/config'
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import Modal from '@/components/utilities/Modal.vue'
|
||||
import type { Object, ZoneObject } from '@/types'
|
||||
import type { Object, ZoneObject } from '@/application/types'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
const isModalOpen = ref(false)
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { ZoneObject } from '@/types'
|
||||
import type { ZoneObject } from '@/application/types'
|
||||
|
||||
const props = defineProps<{
|
||||
zoneObject: ZoneObject
|
||||
|
||||
@ -43,7 +43,7 @@ import { computed, onMounted, ref, watch } from 'vue'
|
||||
import Modal from '@/components/utilities/Modal.vue'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import type { Zone } from '@/types'
|
||||
import type { Zone } from '@/application/types'
|
||||
|
||||
const showTeleportModal = computed(() => zoneEditorStore.tool === 'pencil' && zoneEditorStore.drawMode === 'teleport')
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
|
||||
@ -81,12 +81,12 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import config from '@/config'
|
||||
import config from '@/application/config'
|
||||
import { ref, onMounted, computed } from 'vue'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import Modal from '@/components/utilities/Modal.vue'
|
||||
import type { Tile } from '@/types'
|
||||
import type { Tile } from '@/application/types'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
const isModalOpen = ref(false)
|
||||
|
||||
@ -29,7 +29,7 @@
|
||||
import { onMounted } from 'vue'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import Modal from '@/components/utilities/Modal.vue'
|
||||
import type { Zone } from '@/types'
|
||||
import type { Zone } from '@/application/types'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import CreateZone from '@/components/gameMaster/zoneEditor/partials/CreateZone.vue'
|
||||
|
||||
|
||||
@ -3,11 +3,11 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { type ZoneEventTile, ZoneEventTileType } from '@/types'
|
||||
import { type ZoneEventTile, ZoneEventTileType } from '@/application/types'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import { Image, useScene } from 'phavuer'
|
||||
import { getTile, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
|
||||
import { uuidv4 } from '@/utilities'
|
||||
import { uuidv4 } from '@/application/utilities'
|
||||
import { onMounted, onUnmounted } from 'vue'
|
||||
|
||||
const scene = useScene()
|
||||
|
||||
@ -7,7 +7,7 @@ import { computed } from 'vue'
|
||||
import { Image, useScene } from 'phavuer'
|
||||
import { calculateIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
|
||||
import { loadTexture } from '@/composables/gameComposable'
|
||||
import type { AssetDataT, ZoneObject } from '@/types'
|
||||
import type { AssetDataT, ZoneObject } from '@/application/types'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
|
||||
const props = defineProps<{
|
||||
|
||||
@ -4,14 +4,14 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { uuidv4 } from '@/utilities'
|
||||
import { uuidv4 } from '@/application/utilities'
|
||||
import { getTile } from '@/composables/zoneComposable'
|
||||
import { useScene } from 'phavuer'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import SelectedZoneObject from '@/components/gameMaster/zoneEditor/partials/SelectedZoneObject.vue'
|
||||
import { onMounted, onUnmounted, ref, watch } from 'vue'
|
||||
import ZoneObject from '@/components/gameMaster/zoneEditor/zonePartials/ZoneObject.vue'
|
||||
import type { ZoneObject as ZoneObjectT } from '@/types'
|
||||
import type { ZoneObject as ZoneObjectT } from '@/application/types'
|
||||
|
||||
const scene = useScene()
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
|
||||
@ -3,14 +3,14 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import config from '@/config'
|
||||
import config from '@/application/config'
|
||||
import { useScene } from 'phavuer'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import { onMounted, onUnmounted, watch } from 'vue'
|
||||
import { createTileArray, getTile, placeTile, setLayerTiles } from '@/composables/zoneComposable'
|
||||
import Controls from '@/components/utilities/Controls.vue'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import type { AssetDataT } from '@/types'
|
||||
import type { AssetDataT } from '@/application/types'
|
||||
|
||||
const emit = defineEmits(['tileMap:create'])
|
||||
|
||||
|
||||
@ -22,35 +22,35 @@
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<div class="flex flex-col gap-0.5">
|
||||
<div class="w-9 h-9 border border-solid border-gray-500 rounded-sm bg-gray relative hover:bg-gray-600">
|
||||
<div class="w-9 h-9 default-border rounded-sm bg-gray relative hover:bg-gray-600">
|
||||
<span class="absolute w-full top-1/2 -translate-y-1/2 text-[6px] text-center">CROWN</span>
|
||||
</div>
|
||||
<div class="w-9 h-9 border border-solid border-gray-500 rounded-sm bg-gray relative hover:bg-gray-600">
|
||||
<div class="w-9 h-9 default-border rounded-sm bg-gray relative hover:bg-gray-600">
|
||||
<span class="absolute w-full top-1/2 -translate-y-1/2 text-[6px] text-center">R-HAND</span>
|
||||
</div>
|
||||
<div class="flex gap-0.5 items-end">
|
||||
<div class="w-9 h-9 border border-solid border-gray-500 rounded-sm bg-gray relative hover:bg-gray-600">
|
||||
<div class="w-9 h-9 default-border rounded-sm bg-gray relative hover:bg-gray-600">
|
||||
<span class="absolute w-full top-1/2 -translate-y-1/2 text-[6px] text-center">L-HAND</span>
|
||||
</div>
|
||||
<div class="w-6 h-6 border border-solid border-gray-500 rounded-sm bg-gray relative hover:bg-gray-600">
|
||||
<div class="w-6 h-6 default-border rounded-sm bg-gray relative hover:bg-gray-600">
|
||||
<span class="absolute w-full top-1/2 -translate-y-1/2 text-[6px] text-center">RING</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<img src="/assets/placeholders/inventory_player.png" class="w-8 h-auto" />
|
||||
<div class="flex flex-col items-end gap-0.5">
|
||||
<div class="w-9 h-9 border border-solid border-gray-500 rounded-sm bg-gray relative hover:bg-gray-600">
|
||||
<img class="absolute w-6 h-6 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" src="/assets/icons/profile/helmet.svg" />
|
||||
<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" />
|
||||
</div>
|
||||
<div class="w-9 h-9 border border-solid border-gray-500 rounded-sm bg-gray relative hover:bg-gray-600">
|
||||
<img class="absolute w-6 h-6 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" src="/assets/icons/profile/chestplate.svg" />
|
||||
<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" />
|
||||
</div>
|
||||
<div class="flex gap-0.5 items-end">
|
||||
<div class="w-6 h-6 border border-solid border-gray-500 rounded-sm bg-gray relative hover:bg-gray-600">
|
||||
<img class="absolute w-4 h-4 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" src="/assets/icons/profile/boots.svg" />
|
||||
<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" />
|
||||
</div>
|
||||
<div class="w-9 h-9 border border-solid border-gray-500 rounded-sm bg-gray relative hover:bg-gray-600">
|
||||
<img class="absolute w-6 h-6 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" src="/assets/icons/profile/legs.svg" />
|
||||
<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" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -110,7 +110,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-rows-4 grid-cols-6 gap-0.5">
|
||||
<div v-for="n in 24" class="w-9 h-9 border border-solid border-gray-500 rounded-sm bg-gray relative hover:bg-gray-600"></div>
|
||||
<div v-for="n in 24" class="w-9 h-9 default-border rounded-sm bg-gray relative hover:bg-gray-600"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -21,10 +21,10 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onBeforeUnmount, ref, nextTick } from 'vue'
|
||||
import { onClickOutside } from '@vueuse/core'
|
||||
import { onBeforeUnmount, ref, nextTick, onMounted } from 'vue'
|
||||
import { onClickOutside, useFocus } from '@vueuse/core'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import type { Chat } from '@/types'
|
||||
import type { Chat } from '@/application/types'
|
||||
import { useZoneStore } from '@/stores/zoneStore'
|
||||
import { useScene } from 'phavuer'
|
||||
|
||||
@ -37,6 +37,14 @@ const chats = ref([] as Chat[])
|
||||
const chatWindow = ref<HTMLElement | null>(null)
|
||||
const chatInput = ref<HTMLElement | null>(null)
|
||||
|
||||
const { focused } = useFocus(chatInput)
|
||||
|
||||
function focusChat(event: KeyboardEvent) {
|
||||
if (event.key === 'Enter' && !focused.value) {
|
||||
focused.value = true
|
||||
}
|
||||
}
|
||||
|
||||
onClickOutside(chatInput, (event) => unfocusChat(event, chatInput.value as HTMLElement))
|
||||
|
||||
function unfocusChat(event: Event, targetElement: HTMLElement) {
|
||||
@ -128,7 +136,12 @@ gameStore.connection?.on('chat:message', (data: Chat) => {
|
||||
})
|
||||
scrollToBottom()
|
||||
|
||||
onMounted(() => {
|
||||
addEventListener('keydown', focusChat)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
gameStore.connection?.off('chat:message')
|
||||
removeEventListener('keydown', focusChat)
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -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/avatar/default/head.png" />
|
||||
<img class="group-hover:drop-shadow-default w-8 h-8 m-[5px] object-contain" draggable="false" src="/assets/placeholders/head.png" />
|
||||
<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>
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
<template>
|
||||
<div class="absolute top-4 right-4 hidden lg:block">
|
||||
<div class="w-40 h-40 rounded-full border border-solid border-gray-500 bg-[url('/assets/ui-texture.png')] bg-no-repeat">
|
||||
<div class="w-40 h-40 rounded-full default-border bg-[url('/assets/ui-texture.png')] bg-no-repeat">
|
||||
<div class="w-40 h-40 rounded-full shadow-inner"></div>
|
||||
</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="absolute w-3 h-3 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" src="/assets/icons/plus-icon.svg" />
|
||||
<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" />
|
||||
</button>
|
||||
<button class="w-6 h-6 relative p-0">
|
||||
<img class="absolute w-3 h-3 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2" src="/assets/icons/minus-icon.svg" />
|
||||
<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" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="absolute z-50 w-full h-dvh top-0 left-0 bg-black/60" v-show="false">
|
||||
<div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 max-w-[875px] max-h-[600px] h-full w-[80%] bg-gray-700 border-solid border-2 border-gray-500 rounded-md z-50 flex flex-col backdrop-blur-sm shadow-lg">
|
||||
<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">
|
||||
|
||||
@ -14,47 +14,47 @@
|
||||
<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="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
|
||||
<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="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
|
||||
<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="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
|
||||
<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="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-10/12 opacity-20" />
|
||||
<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="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
|
||||
<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="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
|
||||
<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="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
|
||||
<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="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-11/12 opacity-20" />
|
||||
<img src="/assets/icons/inventory/boots.svg" class="center-element w-11/12 opacity-20" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<form @submit.prevent="loginFunc" class="relative px-6 py-11">
|
||||
<form @submit.prevent="submit" class="relative px-6 py-[70px]">
|
||||
<div class="flex flex-col gap-5 p-2 mb-8 relative">
|
||||
<div class="w-full grid gap-3 relative">
|
||||
<input class="input-field xs:min-w-[350px] min-w-64" id="username-login" v-model="username" type="text" name="username" placeholder="Username" required autofocus />
|
||||
@ -7,7 +7,7 @@
|
||||
<input class="input-field xs:min-w-[350px] min-w-64" id="password-login" v-model="password" :type="showPassword ? 'text' : 'password'" name="password" placeholder="Password" required />
|
||||
<button type="button" @click.prevent="showPassword = !showPassword" :class="{ 'eye-open': showPassword }" class="bg-[url('/assets/icons/eye.svg')] p-0 absolute right-3 w-5 h-4 top-1/2 -translate-y-1/2 bg-no-repeat bg-center"></button>
|
||||
</div>
|
||||
<span v-if="loginError" class="text-red-200 text-xs absolute top-full mt-1">{{ loginError }}</span>
|
||||
<span v-if="formError" class="text-red-200 text-xs absolute top-full mt-1">{{ formError }}</span>
|
||||
</div>
|
||||
<button @click.stop="() => emit('openResetPasswordModal')" type="button" class="inline-flex self-end p-0 text-cyan-300 text-base">Forgot password?</button>
|
||||
<button class="btn-cyan px-0 xs:w-full" type="submit">Play now</button>
|
||||
@ -36,7 +36,7 @@ const emit = defineEmits(['openResetPasswordModal', 'switchToRegister'])
|
||||
const gameStore = useGameStore()
|
||||
const username = ref('')
|
||||
const password = ref('')
|
||||
const loginError = ref('')
|
||||
const formError = ref('')
|
||||
const showPassword = ref(false)
|
||||
|
||||
// automatic login because of development
|
||||
@ -48,10 +48,10 @@ onMounted(async () => {
|
||||
}
|
||||
})
|
||||
|
||||
async function loginFunc() {
|
||||
async function submit() {
|
||||
// check if username and password are valid
|
||||
if (username.value === '' || password.value === '') {
|
||||
loginError.value = 'Please enter a valid username and password'
|
||||
formError.value = 'Please enter a valid username and password'
|
||||
return
|
||||
}
|
||||
|
||||
@ -59,7 +59,7 @@ async function loginFunc() {
|
||||
const response = await login(username.value, password.value)
|
||||
|
||||
if (response.success === undefined) {
|
||||
loginError.value = response.error
|
||||
formError.value = response.error
|
||||
return
|
||||
}
|
||||
gameStore.setToken(response.token)
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<form @submit.prevent="registerFunc" class="relative px-6 py-11">
|
||||
<form @submit.prevent="submit" class="relative px-6 py-16">
|
||||
<div class="flex flex-col gap-5 p-2 mb-8 relative">
|
||||
<div class="w-full grid gap-3 relative">
|
||||
<input class="input-field xs:min-w-[350px] min-w-64" id="username-register" v-model="username" type="text" name="username" placeholder="Username" required autofocus />
|
||||
@ -8,7 +8,7 @@
|
||||
<input class="input-field xs:min-w-[350px] min-w-64" id="password-register" v-model="password" :type="showPassword ? 'text' : 'password'" name="password" placeholder="Password" required />
|
||||
<button type="button" @click.prevent="showPassword = !showPassword" :class="{ 'eye-open': showPassword }" class="bg-[url('/assets/icons/eye.svg')] p-0 absolute right-3 w-4 h-3 top-1/2 -translate-y-1/2 bg-no-repeat"></button>
|
||||
</div>
|
||||
<span v-if="loginError" class="text-red-200 text-xs -mt-2">{{ loginError }}</span>
|
||||
<span v-if="formError" class="text-red-200 text-xs -mt-2">{{ formError }}</span>
|
||||
</div>
|
||||
<button class="btn-cyan xs:w-full" type="submit">Register now</button>
|
||||
|
||||
@ -37,7 +37,7 @@ const gameStore = useGameStore()
|
||||
const username = ref('')
|
||||
const password = ref('')
|
||||
const email = ref('')
|
||||
const loginError = ref('')
|
||||
const formError = ref('')
|
||||
const showPassword = ref(false)
|
||||
|
||||
// automatic login because of development
|
||||
@ -49,34 +49,15 @@ onMounted(async () => {
|
||||
}
|
||||
})
|
||||
|
||||
async function loginFunc() {
|
||||
// check if username and password are valid
|
||||
if (username.value === '' || password.value === '') {
|
||||
loginError.value = 'Please enter a valid username and password'
|
||||
return
|
||||
}
|
||||
|
||||
// send login event to server
|
||||
const response = await login(username.value, password.value)
|
||||
|
||||
if (response.success === undefined) {
|
||||
loginError.value = response.error
|
||||
return
|
||||
}
|
||||
gameStore.setToken(response.token)
|
||||
gameStore.initConnection()
|
||||
return true // Indicate success
|
||||
}
|
||||
|
||||
async function registerFunc() {
|
||||
async function submit() {
|
||||
// check if username and password are valid
|
||||
if (username.value === '' || email.value === '' || password.value === '') {
|
||||
loginError.value = 'Please enter a valid username, email, and password'
|
||||
formError.value = 'Please enter a valid username, email, and password'
|
||||
return
|
||||
}
|
||||
|
||||
if (email.value === '') {
|
||||
loginError.value = 'Please enter an email'
|
||||
formError.value = 'Please enter an email'
|
||||
return
|
||||
}
|
||||
|
||||
@ -84,14 +65,18 @@ async function registerFunc() {
|
||||
const response = await register(username.value, email.value, password.value)
|
||||
|
||||
if (response.success === undefined) {
|
||||
loginError.value = response.error
|
||||
formError.value = response.error
|
||||
return
|
||||
}
|
||||
|
||||
const loginSuccess = await loginFunc()
|
||||
if (!loginSuccess) {
|
||||
loginError.value = 'Login after registration failed. Please try logging in manually.'
|
||||
const loginResponse = await login(username.value, password.value)
|
||||
|
||||
if (!loginResponse) {
|
||||
formError.value = 'Login after registration failed. Please try logging in manually.'
|
||||
return
|
||||
}
|
||||
|
||||
gameStore.setToken(loginResponse.token)
|
||||
gameStore.initConnection()
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -13,21 +13,16 @@
|
||||
<h1 class="text-white font-bold">SELECT CHARACTER TO PLAY</h1>
|
||||
<p class="m-0">Maximum of 4 characters can be created per player</p>
|
||||
</div>
|
||||
<div class="flex w-full max-lg:flex-col lg:h-[400px] border border-solid border-gray-500 rounded-md rounded-tl-none bg-gray">
|
||||
<div class="lg:min-w-[285px] max-lg:min-h-[383px] lg:w-1/3 h-full bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-cover bg-center border-0 max-lg:border-b lg:border-r border-solid border-gray-500 max-lg:rounded-tr-md lg:rounded-bl-md relative">
|
||||
<div class="absolute right-full -top-px flex gap-1 flex-col">
|
||||
<div
|
||||
v-for="character in characters"
|
||||
:key="character.id"
|
||||
class="character relative rounded-l border border-solid border-gray-500 w-9 h-[50px] bg-[url('/assets/ui-texture.png')] after:absolute after:w-full after:h-px after:bg-gray-500"
|
||||
:class="{ active: selectedCharacterId == character.id }"
|
||||
>
|
||||
<img src="/assets/avatar/default/head.png" class="w-9 h-9 object-contain absolute top-1/2 -translate-y-1/2" alt="Player head" />
|
||||
<div class="flex w-full max-lg:flex-col lg:h-[400px] default-border rounded-md bg-gray">
|
||||
<div class="lg:min-w-[285px] max-lg:min-h-[383px] lg:w-1/3 h-full bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-cover bg-center border-0 max-lg:border-b lg:border-r border-solid border-gray-500 max-lg:rounded-t-md lg:rounded-l-md relative">
|
||||
<div class="absolute right-[calc(100%_+_16px)] -top-px flex gap-2 flex-col">
|
||||
<div v-for="character in characters" :key="character.id" class="character relative rounded default-border w-12 h-12 bg-[url('/assets/ui-texture.png')] after:absolute after:w-full after:h-px after:bg-gray-500" :class="{ active: selectedCharacterId === character.id }">
|
||||
<img src="/assets/placeholders/head.png" class="w-9 h-9 object-contain center-element" alt="Player head" />
|
||||
<input class="h-full w-full absolute m-0 z-10 hover:cursor-pointer focus-visible:outline-offset-0" type="radio" name="character" :value="character.id" v-model="selectedCharacterId" />
|
||||
</div>
|
||||
<div class="character relative rounded-l border border-solid border-gray-500 w-9 h-[50px] bg-[url('/assets/ui-texture.png')]" :class="{ active: characters.length == 0 }" v-if="characters.length < 4">
|
||||
<div class="character relative rounded default-border w-12 h-12 bg-[url('/assets/ui-texture.png')]" :class="{ active: characters.length == 0 }" v-if="characters.length < 4">
|
||||
<button class="p-0 h-full w-full flex flex-col justify-between focus-visible:outline-offset-0" @click="isCreateNewCharacterModalOpen = true">
|
||||
<img class="w-6 h-6 object-contain absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2" draggable="false" src="/assets/icons/plus-icon.svg" />
|
||||
<img class="w-6 h-6 object-contain center-element" draggable="false" src="/assets/icons/plus-icon.svg" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@ -39,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-12 object-contain mb-3.5" src="/assets/avatar/default/0.png" alt="Player avatar" />
|
||||
<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?.id + '/' + (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>
|
||||
@ -69,7 +64,7 @@
|
||||
<span class="text-sm">Hairstyle</span>
|
||||
<div class="flex gap-2 flex-wrap max-h-20 overflow-y-auto scrollbar">
|
||||
<div
|
||||
class="hair-deselect relative flex justify-center items-center bg-gray border border-solid border-gray-500 w-[18px] h-[18px] p-2 rounded-sm hover:bg-gray-500 hover:border-gray-400 focus-visible:outline-none focus-visible:border-white focus-visible:bg-cyan has-[:checked]:bg-cyan has-[:checked]:border-transparent"
|
||||
class="hair-deselect relative flex justify-center items-center bg-gray default-border w-[18px] h-[18px] p-2 rounded-sm hover:bg-gray-500 hover:border-gray-400 focus-visible:outline-none focus-visible:border-white focus-visible:bg-cyan has-[:checked]:bg-cyan has-[:checked]:border-transparent"
|
||||
>
|
||||
<img src="/assets/icons/x-button-gray.svg" class="w-4 h-4" alt="Empty button" />
|
||||
<input type="radio" name="hair" :value="null" v-model="selectedHairId" class="h-full w-full absolute left-0 top-0 m-0 z-10 hover:cursor-pointer focus-visible:outline-offset-0 focus-visible:outline-white" />
|
||||
@ -77,9 +72,9 @@
|
||||
<!-- TODO #255: make radio button so we can set a value, do the same with swatches -->
|
||||
<div
|
||||
v-for="hair in characterHairs"
|
||||
class="relative flex justify-center items-center bg-gray border border-solid border-gray-500 w-[18px] h-[18px] p-2 rounded-sm hover:bg-gray-500 hover:border-gray-400 focus-visible:outline-none focus-visible:border-gray-300 focus-visible:bg-gray-500 has-[:checked]:bg-cyan has-[:checked]:border-transparent"
|
||||
class="relative flex justify-center items-center bg-gray default-border w-[18px] h-[18px] p-2 rounded-sm hover:bg-gray-500 hover:border-gray-400 focus-visible:outline-none focus-visible:border-gray-300 focus-visible:bg-gray-500 has-[:checked]:bg-cyan has-[:checked]:border-transparent"
|
||||
>
|
||||
<img class="w-4 h-4" :src="config.server_endpoint + '/assets/sprites/' + hair.spriteId + '/front.png'" alt="Hair sprite" />
|
||||
<img class="h-4 object-contain" :src="config.server_endpoint + '/assets/sprites/' + hair.sprite.id + '/front.png'" alt="Hair sprite" />
|
||||
<input type="radio" name="hair" :value="hair.id" v-model="selectedHairId" class="h-full w-full absolute left-0 top-0 m-0 z-10 hover:cursor-pointer focus-visible:outline-offset-0 focus-visible:outline-white" />
|
||||
</div>
|
||||
</div>
|
||||
@ -127,33 +122,18 @@
|
||||
</div>
|
||||
</template>
|
||||
</Modal>
|
||||
|
||||
<!-- DELETE CHARACTER MODAL -->
|
||||
<ConfirmationModal v-if="deletingCharacter != null" :confirm-function="deleteCharacter.bind(this, deletingCharacter.id)" :cancel-function="(() => (deletingCharacter = null)).bind(this)" confirm-button-text="Delete">
|
||||
<template #modalHeader>
|
||||
<h3 class="m-0 font-medium text-white">Delete character?</h3>
|
||||
</template>
|
||||
<template #modalBody>
|
||||
<p class="mt-0 mb-5 text-white text-lg">
|
||||
Do you want to permanently delete <span class="font-extrabold text-white">{{ deletingCharacter.name }}</span
|
||||
>?
|
||||
</p>
|
||||
</template>
|
||||
</ConfirmationModal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import config from '@/config'
|
||||
import config from '@/application/config'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { onBeforeUnmount, ref, watch } from 'vue'
|
||||
import Modal from '@/components/utilities/Modal.vue'
|
||||
import { type Character as CharacterT, type CharacterHair } from '@/types'
|
||||
import ConfirmationModal from '@/components/utilities/ConfirmationModal.vue'
|
||||
import { type Character as CharacterT, type CharacterHair, type Zone } from '@/application/types'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
const isLoading = ref<boolean>(true)
|
||||
const characters = ref<CharacterT[]>([])
|
||||
const deletingCharacter = ref(null as CharacterT | null)
|
||||
const selectedCharacterId = ref<number | null>(null)
|
||||
const isCreateNewCharacterModalOpen = ref<boolean>(false)
|
||||
const newCharacterName = ref<string>('')
|
||||
@ -183,15 +163,9 @@ function loginWithCharacter() {
|
||||
gameStore.connection?.emit('character:connect', {
|
||||
characterId: selectedCharacterId.value,
|
||||
characterHairId: selectedHairId.value
|
||||
}, (response: { character: CharacterT, zone: Zone, characters: CharacterT[] }) => {
|
||||
gameStore.setCharacter(response.character)
|
||||
})
|
||||
gameStore.connection?.on('character:connect', (data: CharacterT) => gameStore.setCharacter(data))
|
||||
}
|
||||
|
||||
// Delete character logics
|
||||
function deleteCharacter(characterId: number) {
|
||||
if (!characterId) return
|
||||
deletingCharacter.value = null
|
||||
gameStore.connection?.emit('character:delete', { characterId: characterId })
|
||||
}
|
||||
|
||||
// Create character logics
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import config from '@/config'
|
||||
import config from '@/application/config'
|
||||
import 'phaser'
|
||||
import { Game, Scene } from 'phavuer'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<div class="bg-[url('/assets/login/login-bg.png')] w-full lg:w-1/2 h-[35dvh] lg:h-dvh absolute left-0 max-lg:bottom-0 lg:top-0 bg-no-repeat bg-cover bg-center"></div>
|
||||
<div class="bg-gray-900 z-20 w-full lg:w-1/2 h-[65dvh] lg:h-dvh relative">
|
||||
<div class="h-dvh flex items-center lg:justify-center flex-col px-8 max-lg:pt-20">
|
||||
<img src="/assets/login/sq-logo-v1.svg" class="mb-10" alt="Sylvan Quest logo" />
|
||||
<!-- <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)] max-lg:hidden" alt="UI box inner" />
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import config from '@/config'
|
||||
import config from '@/application/config'
|
||||
import 'phaser'
|
||||
import { Game, Scene } from 'phavuer'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
@ -17,7 +17,7 @@ import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import ZoneEditor from '@/components/gameMaster/zoneEditor/ZoneEditor.vue'
|
||||
import AwaitLoaderPlugin from 'phaser3-rex-plugins/plugins/awaitloader-plugin'
|
||||
import { loadTexture } from '@/composables/gameComposable'
|
||||
import type { AssetDataT } from '@/types'
|
||||
import type { AssetDataT } from '@/application/types'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
|
||||
@ -32,21 +32,13 @@ const { setupPointerHandlers, cleanupPointerHandlers } = usePointerHandlers(scen
|
||||
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
|
||||
)
|
||||
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
|
||||
)
|
||||
const zoomLevel = Phaser.Math.Clamp(camera.zoom + deltaY * ZOOM_SETTINGS.KEY_FACTOR, ZOOM_SETTINGS.MIN, ZOOM_SETTINGS.MAX)
|
||||
camera.setZoom(zoomLevel)
|
||||
}
|
||||
|
||||
@ -63,4 +55,4 @@ onBeforeUnmount(() => {
|
||||
scene.input.keyboard?.off('keycombomatch')
|
||||
scene.input.off(Phaser.Input.Events.POINTER_WHEEL, handleScrollZoom)
|
||||
})
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<div
|
||||
:class="{
|
||||
'bg-[url(/assets/ui-texture.png)] bg-no-repeat bg-center bg-cover opacity-90': bgStyle === 'textured',
|
||||
'bg-gray-700': bgStyle !== 'textured'
|
||||
'bg-gray': bgStyle !== 'textured'
|
||||
}"
|
||||
class="rounded-t absolute w-full h-full top-0 left-0"
|
||||
/>
|
||||
@ -29,7 +29,7 @@
|
||||
:class="{
|
||||
'bg-[url(/assets/ui-texture.png)] bg-no-repeat bg-center bg-cover opacity-90': bgStyle === 'textured',
|
||||
'bg-gray-800': bgStyle === 'dark',
|
||||
'bg-gray-700': bgStyle === 'none'
|
||||
'bg-gray': bgStyle === 'none'
|
||||
}"
|
||||
class="rounded-b absolute w-full h-full top-0 left-0"
|
||||
/>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import type { AssetDataT, Sprite } from '@/types'
|
||||
import type { AssetDataT, HttpResponse, Sprite, SpriteAction } from '@/application/types'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { AssetStorage } from '@/storage/assetStorage'
|
||||
import config from '@/config'
|
||||
import config from '@/application/config'
|
||||
|
||||
const textureLoadingPromises = new Map<string, Promise<boolean>>()
|
||||
|
||||
@ -59,16 +59,21 @@ export async function loadTexture(scene: Phaser.Scene, assetData: AssetDataT): P
|
||||
export async function loadSpriteTextures(scene: Phaser.Scene, sprite: Sprite) {
|
||||
if (!sprite) return
|
||||
|
||||
const sprite_actions = await fetch(config.server_endpoint + '/assets/list_sprite_actions/' + sprite?.id).then((response) => response.json())
|
||||
for await (const sprite_action of sprite_actions) {
|
||||
// @TODO: Fix this
|
||||
const sprite_actions: HttpResponse<any[]> = await fetch(config.server_endpoint + '/assets/list_sprite_actions/' + sprite?.id).then((response) => response.json())
|
||||
|
||||
for await (const sprite_action of sprite_actions.data ?? []) {
|
||||
await loadTexture(scene, {
|
||||
key: sprite_action.key,
|
||||
data: sprite_action.data,
|
||||
group: sprite_action.isAnimated ? 'sprite_animations' : 'sprites',
|
||||
updatedAt: sprite_action.updatedAt,
|
||||
frameCount: sprite_action.frameCount,
|
||||
originX: sprite_action.originX ?? 0,
|
||||
originY: sprite_action.originY ?? 0,
|
||||
isAnimated: sprite_action.isAnimated,
|
||||
frameWidth: sprite_action.frameWidth,
|
||||
frameHeight: sprite_action.frameHeight
|
||||
frameHeight: sprite_action.frameHeight,
|
||||
frameRate: sprite_action.frameRate
|
||||
} as AssetDataT)
|
||||
|
||||
// If the sprite is not animated, skip
|
||||
@ -82,7 +87,7 @@ export async function loadSpriteTextures(scene: Phaser.Scene, sprite: Sprite) {
|
||||
scene.textures.addSpriteSheet(sprite_action.key, anim, { frameWidth: sprite_action.frameWidth ?? 0, frameHeight: sprite_action.frameHeight ?? 0 })
|
||||
scene.anims.create({
|
||||
key: sprite_action.key,
|
||||
frameRate: 7, // TODO | 262 : Allow configuring frame rate
|
||||
frameRate: sprite_action.frameRate,
|
||||
frames: scene.anims.generateFrameNumbers(sprite_action.key, { start: 0, end: sprite_action.frameCount! - 1 }),
|
||||
repeat: -1
|
||||
})
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { type Ref, ref } from 'vue'
|
||||
import { getTile, tileToWorldXY } from '@/composables/zoneComposable'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import config from '@/config'
|
||||
import config from '@/application/config'
|
||||
|
||||
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()
|
||||
@ -48,7 +48,7 @@ export function useGamePointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilema
|
||||
if (distance <= dragThreshold) {
|
||||
const pointerTile = getTile(layer, pointer.worldX, pointer.worldY)
|
||||
if (pointerTile) {
|
||||
gameStore.connection?.emit('character:move', {
|
||||
gameStore.connection?.emit('zone:character:move', {
|
||||
positionX: pointerTile.x,
|
||||
positionY: pointerTile.y
|
||||
})
|
||||
|
||||
@ -2,7 +2,7 @@ import { computed, type Ref } from 'vue'
|
||||
import { getTile, tileToWorldXY } from '@/composables/zoneComposable'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import config from '@/config'
|
||||
import config from '@/application/config'
|
||||
|
||||
export function useZoneEditorPointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilemaps.TilemapLayer, waypoint: Ref<{ visible: boolean; x: number; y: number }>, camera: Phaser.Cameras.Scene2D.Camera) {
|
||||
const gameStore = useGameStore()
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import config from '@/config'
|
||||
import config from '@/application/config'
|
||||
import Tilemap = Phaser.Tilemaps.Tilemap
|
||||
import TilemapLayer = Phaser.Tilemaps.TilemapLayer
|
||||
import Tileset = Phaser.Tilemaps.Tileset
|
||||
import Tile = Phaser.Tilemaps.Tile
|
||||
import type { AssetDataT, Zone as ZoneT } from '@/types'
|
||||
import type { AssetDataT, HttpResponse, Zone as ZoneT } from '@/application/types'
|
||||
import { loadTexture } from '@/composables/gameComposable'
|
||||
|
||||
export function getTile(layer: TilemapLayer | Tilemap, x: number, y: number): Tile | undefined {
|
||||
@ -47,7 +47,6 @@ export function tileToWorldY(layer: TilemapLayer | Tilemap, pos_x: number, pos_y
|
||||
export function placeTile(zone: Tilemap, layer: TilemapLayer, x: number, y: number, tileName: string) {
|
||||
let tileImg = zone.getTileset(tileName) as Tileset
|
||||
if (!tileImg) {
|
||||
console.log('tile not found:', tileName)
|
||||
tileImg = zone.getTileset('blank_tile') as Tileset
|
||||
}
|
||||
layer.putTileAt(tileImg.firstgid, x, y)
|
||||
@ -85,12 +84,12 @@ export function FlattenZoneArray(tiles: string[][]) {
|
||||
return normalArray
|
||||
}
|
||||
|
||||
export async function loadZoneTilesIntoScene(zone: ZoneT, scene: Phaser.Scene) {
|
||||
export async function loadZoneTilesIntoScene(zone_id: number, scene: Phaser.Scene) {
|
||||
// Fetch the list of tiles from the server
|
||||
const tileArray: AssetDataT[] = await fetch(config.server_endpoint + '/assets/list_tiles/' + zone.id).then((response) => response.json())
|
||||
const tileArray: HttpResponse<AssetDataT[]> = await fetch(config.server_endpoint + '/assets/list_tiles/' + zone_id).then((response) => response.json())
|
||||
|
||||
// Load each tile into the scene
|
||||
for (const tile of tileArray) {
|
||||
for (const tile of tileArray.data ?? []) {
|
||||
await loadTexture(scene, tile)
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,13 +1,15 @@
|
||||
import axios from 'axios'
|
||||
import config from '@/config'
|
||||
import config from '@/application/config'
|
||||
import { useCookies } from '@vueuse/integrations/useCookies'
|
||||
import { getDomain } from '@/utilities'
|
||||
import { getDomain } from '@/application/utilities'
|
||||
|
||||
export async function register(username: string, email: string, password: string) {
|
||||
try {
|
||||
const response = await axios.post(`${config.server_endpoint}/register`, { username, email, password })
|
||||
useCookies().set('token', response.data.token as string)
|
||||
return { success: true, token: response.data.token }
|
||||
if (response.status === 200) {
|
||||
return { success: true }
|
||||
}
|
||||
return { error: response.data.message }
|
||||
} catch (error: any) {
|
||||
if (typeof error.response?.data === 'undefined') {
|
||||
return { error: 'Could not connect to server' }
|
||||
@ -19,10 +21,10 @@ export async function register(username: string, email: string, password: string
|
||||
export async function login(username: string, password: string) {
|
||||
try {
|
||||
const response = await axios.post(`${config.server_endpoint}/login`, { username, password })
|
||||
useCookies().set('token', response.data.token as string, {
|
||||
useCookies().set('token', response.data.data.token as string, {
|
||||
domain: getDomain()
|
||||
})
|
||||
return { success: true, token: response.data.token }
|
||||
return { success: true, token: response.data.data.token }
|
||||
} catch (error: any) {
|
||||
if (typeof error.response?.data === 'undefined') {
|
||||
return { error: 'Could not connect to server' }
|
||||
@ -34,7 +36,7 @@ export async function login(username: string, password: string) {
|
||||
export async function resetPassword(email: string) {
|
||||
try {
|
||||
const response = await axios.post(`${config.server_endpoint}/reset-password`, { email })
|
||||
return { success: true, token: response.data.token }
|
||||
return { success: true, token: response.data.data.token }
|
||||
} catch (error: any) {
|
||||
if (typeof error.response?.data === 'undefined') {
|
||||
return { error: 'Could not connect to server' }
|
||||
@ -46,7 +48,7 @@ export async function resetPassword(email: string) {
|
||||
export async function newPassword(urlToken: string, password: string) {
|
||||
try {
|
||||
const response = await axios.post(`${config.server_endpoint}/new-password`, { urlToken, password })
|
||||
return { success: true, token: response.data.token }
|
||||
return { success: true, token: response.data.data.token }
|
||||
} catch (error: any) {
|
||||
if (typeof error.response?.data === 'undefined') {
|
||||
return { error: 'Could not connect to server' }
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import config from '@/config'
|
||||
import config from '@/application/config'
|
||||
import Dexie from 'dexie'
|
||||
import type { AssetDataT } from '@/types'
|
||||
import type { AssetDataT } from '@/application/types'
|
||||
|
||||
export class AssetStorage {
|
||||
private db: Dexie
|
||||
@ -25,7 +25,19 @@ export class AssetStorage {
|
||||
const blob = await response.blob()
|
||||
|
||||
// Store the asset in the database
|
||||
await this.db.table('assets').put({ key: asset.key, data: blob, group: asset.group, updatedAt: asset.updatedAt, frameCount: asset.frameCount, frameWidth: asset.frameWidth, frameHeight: asset.frameHeight })
|
||||
await this.db.table('assets').put({
|
||||
key: asset.key,
|
||||
data: blob,
|
||||
group: asset.group,
|
||||
updatedAt: asset.updatedAt,
|
||||
originX: asset.originX,
|
||||
originY: asset.originY,
|
||||
isAnimated: asset.isAnimated,
|
||||
frameRate: asset.frameRate,
|
||||
frameWidth: asset.frameWidth,
|
||||
frameHeight: asset.frameHeight,
|
||||
frameCount: asset.frameCount
|
||||
})
|
||||
} catch (error) {
|
||||
console.error(`Failed to add asset ${asset.key}:`, error)
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { ref } from 'vue'
|
||||
import { defineStore } from 'pinia'
|
||||
import type { Tile, Object, Sprite, CharacterType, CharacterHair } from '@/types'
|
||||
import type { Tile, Object, Sprite, CharacterType, CharacterHair, Item } from '@/application/types'
|
||||
|
||||
export const useAssetManagerStore = defineStore('assetManager', () => {
|
||||
const tileList = ref<Tile[]>([])
|
||||
@ -18,6 +18,9 @@ export const useAssetManagerStore = defineStore('assetManager', () => {
|
||||
const characterHairList = ref<CharacterHair[]>([])
|
||||
const selectedCharacterHair = ref<CharacterHair | null>(null)
|
||||
|
||||
const itemList = ref<Item[]>([])
|
||||
const selectedItem = ref<Item | null>(null)
|
||||
|
||||
function setTileList(tiles: Tile[]) {
|
||||
tileList.value = tiles
|
||||
}
|
||||
@ -58,6 +61,14 @@ export const useAssetManagerStore = defineStore('assetManager', () => {
|
||||
selectedCharacterHair.value = characterHair
|
||||
}
|
||||
|
||||
function setItemList(items: Item[]) {
|
||||
itemList.value = items
|
||||
}
|
||||
|
||||
function setSelectedItem(item: Item | null) {
|
||||
selectedItem.value = item
|
||||
}
|
||||
|
||||
return {
|
||||
tileList,
|
||||
selectedTile,
|
||||
@ -69,6 +80,8 @@ export const useAssetManagerStore = defineStore('assetManager', () => {
|
||||
selectedCharacterType,
|
||||
characterHairList,
|
||||
selectedCharacterHair,
|
||||
itemList,
|
||||
selectedItem,
|
||||
setTileList,
|
||||
setSelectedTile,
|
||||
setObjectList,
|
||||
@ -78,6 +91,8 @@ export const useAssetManagerStore = defineStore('assetManager', () => {
|
||||
setSelectedSprite,
|
||||
setSelectedCharacterType,
|
||||
setCharacterHairList,
|
||||
setSelectedCharacterHair
|
||||
setSelectedCharacterHair,
|
||||
setItemList,
|
||||
setSelectedItem
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { io, Socket } from 'socket.io-client'
|
||||
import type { AssetDataT, Character, Notification, User, WorldSettings } from '@/types'
|
||||
import config from '@/config'
|
||||
import type { AssetDataT, Character, Notification, User, WorldSettings } from '@/application/types'
|
||||
import config from '@/application/config'
|
||||
import { useCookies } from '@vueuse/integrations/useCookies'
|
||||
import { getDomain } from '@/utilities'
|
||||
import { getDomain } from '@/application/utilities'
|
||||
|
||||
export const useGameStore = defineStore('game', {
|
||||
state: () => {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import type { Zone, Object, Tile, ZoneEffect, ZoneObject } from '@/types'
|
||||
import type { Zone, Object, Tile, ZoneEffect, ZoneObject } from '@/application/types'
|
||||
|
||||
export type TeleportSettings = {
|
||||
toZoneId: number
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import type { ZoneCharacter, Zone } from '@/types'
|
||||
import type { ZoneCharacter, Zone } from '@/application/types'
|
||||
|
||||
export const useZoneStore = defineStore('zone', {
|
||||
state: () => {
|
||||
@ -40,6 +40,15 @@ export const useZoneStore = defineStore('zone', {
|
||||
setCharacterLoaded(loaded: boolean) {
|
||||
this.characterLoaded = loaded
|
||||
},
|
||||
updateCharacterPosition(data: { id: number; positionX: number; positionY: number; rotation: number; isMoving: boolean }) {
|
||||
const character = this.characters.find((char) => char.character.id === data.id)
|
||||
if (character) {
|
||||
character.character.positionX = data.positionX
|
||||
character.character.positionY = data.positionY
|
||||
character.character.rotation = data.rotation
|
||||
character.isMoving = data.isMoving
|
||||
}
|
||||
},
|
||||
reset() {
|
||||
this.zone = null
|
||||
this.characters = []
|
||||
|
||||
@ -2,12 +2,14 @@ import { fileURLToPath, URL } from 'node:url';
|
||||
import { defineConfig } from 'vite';
|
||||
import vue from '@vitejs/plugin-vue';
|
||||
import VueDevTools from 'vite-plugin-vue-devtools'
|
||||
import viteCompression from 'vite-plugin-compression'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
VueDevTools(),
|
||||
viteCompression()
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
|
||||
Reference in New Issue
Block a user