forked from noxious/client
Compare commits
44 Commits
feature/#1
...
feature/#1
| Author | SHA1 | Date | |
|---|---|---|---|
| a0f0b40ed3 | |||
| 68222ab511 | |||
| fe804037d0 | |||
| 5d288772b5 | |||
| 3c9b92ccbd | |||
| 13cb46658f | |||
| 222614b856 | |||
| 9f10db142b | |||
| 860fe705c6 | |||
| 352ec3fad8 | |||
| c7a3d74408 | |||
| 1e0da5f7cc | |||
| 7ce054191a | |||
| 34f547f0a6 | |||
| 14e07aa4a1 | |||
| 95dcf237cf | |||
| 5cc1821922 | |||
| 9d774bcb18 | |||
| c6869f47b1 | |||
| 390b9517e0 | |||
| 2497da30b7 | |||
| 66e56d3626 | |||
| d68ee120ab | |||
| aff32c33c7 | |||
| 3c8744dc75 | |||
| 774871510e | |||
| e61b705031 | |||
| 3902c611fa | |||
| 3765cfe5e9 | |||
| 2fad54fd26 | |||
| be3cbf77bf | |||
| f24a498246 | |||
| 9686381745 | |||
| e42c530685 | |||
| e56e078042 | |||
| 13be1a38fa | |||
| 27e857b9a6 | |||
| 2b2c290db0 | |||
| 245b50c1fd | |||
| 32dc7a2963 | |||
| a9c2b209d9 | |||
| a6c22df528 | |||
| 7dd2d70eca | |||
| 5fc3547d9c |
@ -27,5 +27,6 @@ RUN npm run build-ntc
|
||||
# Production stage
|
||||
FROM nginx:1.26.1-alpine
|
||||
COPY --from=builder /usr/src/app/dist /usr/share/nginx/html
|
||||
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||
EXPOSE 80
|
||||
CMD ["nginx", "-g", "daemon off;"]
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<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=0"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Sylvan Quest - Play</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
16
nginx.conf
Normal file
16
nginx.conf
Normal file
@ -0,0 +1,16 @@
|
||||
server {
|
||||
listen 80;
|
||||
server_name localhost;
|
||||
root /usr/share/nginx/html;
|
||||
index index.html;
|
||||
|
||||
# Redirect example
|
||||
location /discord {
|
||||
return 301 https://discord.gg/JTev3nzeDa;
|
||||
}
|
||||
|
||||
# Serve static files
|
||||
location / {
|
||||
try_files $uri $uri/ /index.html;
|
||||
}
|
||||
}
|
||||
131
package-lock.json
generated
131
package-lock.json
generated
@ -11,11 +11,11 @@
|
||||
"@vueuse/core": "^10.5.0",
|
||||
"@vueuse/integrations": "^10.5.0",
|
||||
"axios": "^1.7.7",
|
||||
"phaser": "^3.85.2",
|
||||
"phaser": "^3.86.0",
|
||||
"pinia": "^2.1.6",
|
||||
"socket.io-client": "^4.8.0",
|
||||
"universal-cookie": "^6.1.3",
|
||||
"vue": "^3.5.10",
|
||||
"vue": "^3.5.12",
|
||||
"zod": "^3.22.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -41,8 +41,8 @@
|
||||
"sass": "^1.79.4",
|
||||
"tailwindcss": "^3.4.13",
|
||||
"typescript": "~5.6.2",
|
||||
"vite": "^5.4.8",
|
||||
"vite-plugin-vue-devtools": "^7.4.6",
|
||||
"vite": "^5.4.9",
|
||||
"vite-plugin-vue-devtools": "^7.5.2",
|
||||
"vitest": "^2.0.3",
|
||||
"vue-tsc": "^1.6.5"
|
||||
}
|
||||
@ -1991,9 +1991,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@types/node": {
|
||||
"version": "20.16.11",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.16.11.tgz",
|
||||
"integrity": "sha512-y+cTCACu92FyA5fgQSAI8A1H429g7aSK2HsO7K4XYUWc4dY5IUz55JSDIYT6/VsOLfGy8vmvQYC2hfb0iF16Uw==",
|
||||
"version": "20.16.12",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.16.12.tgz",
|
||||
"integrity": "sha512-LfPFB0zOeCeCNQV3i+67rcoVvoN5n0NVuR2vLG0O5ySQMgchuZlC4lgz546ZOJyDtj5KIgOxy+lacOimfqZAIA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
@ -2490,14 +2490,14 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@vue/devtools-core": {
|
||||
"version": "7.4.6",
|
||||
"resolved": "https://registry.npmjs.org/@vue/devtools-core/-/devtools-core-7.4.6.tgz",
|
||||
"integrity": "sha512-7ATNPEbVqThOOAp2bg/YUIm9MqqgimbSk24D05hdXUp89JlXX12aTzdrWd9xZRwS78hDR+wCToHl1C/8sopBrg==",
|
||||
"version": "7.5.2",
|
||||
"resolved": "https://registry.npmjs.org/@vue/devtools-core/-/devtools-core-7.5.2.tgz",
|
||||
"integrity": "sha512-J7vcCb2P7bH3TvikqSe3BquCZsgWC7PL0t9yO88c3LUK3cyhQdJoWcn0Tkgop55UztHWs40+7uQNDmTkcdNZAQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@vue/devtools-kit": "^7.4.6",
|
||||
"@vue/devtools-shared": "^7.4.6",
|
||||
"@vue/devtools-kit": "^7.5.2",
|
||||
"@vue/devtools-shared": "^7.5.2",
|
||||
"mitt": "^3.0.1",
|
||||
"nanoid": "^3.3.4",
|
||||
"pathe": "^1.1.2",
|
||||
@ -2508,14 +2508,14 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/devtools-kit": {
|
||||
"version": "7.4.6",
|
||||
"resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.4.6.tgz",
|
||||
"integrity": "sha512-NbYBwPWgEic1AOd9bWExz9weBzFdjiIfov0yRn4DrRfR+EQJCI9dn4I0XS7IxYGdkmUJi8mFW42LLk18WsGqew==",
|
||||
"version": "7.5.2",
|
||||
"resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.5.2.tgz",
|
||||
"integrity": "sha512-0leUOE2HBfl8sHf9ePKzxqnCFskkU22tWWqd9OfeSlslAKE30/TViYvWcF4vgQmPlJnAAdHU0WfW5dYlCeOiuw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@vue/devtools-shared": "^7.4.6",
|
||||
"birpc": "^0.2.17",
|
||||
"@vue/devtools-shared": "^7.5.2",
|
||||
"birpc": "^0.2.19",
|
||||
"hookable": "^5.5.3",
|
||||
"mitt": "^3.0.1",
|
||||
"perfect-debounce": "^1.0.0",
|
||||
@ -2524,9 +2524,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@vue/devtools-shared": {
|
||||
"version": "7.4.6",
|
||||
"resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.4.6.tgz",
|
||||
"integrity": "sha512-rPeSBzElnHYMB05Cc056BQiJpgocQjY8XVulgni+O9a9Gr9tNXgPteSzFFD+fT/iWMxNuUgGKs9CuW5DZewfIg==",
|
||||
"version": "7.5.2",
|
||||
"resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.5.2.tgz",
|
||||
"integrity": "sha512-+zmcixnD6TAo+zwm30YuwZckhL9iIi4u+gFwbq9C8zpm3SMndTlEYZtNhAHUhOXB+bCkzyunxw80KQ/T0trF4w==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
@ -2858,9 +2858,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/acorn": {
|
||||
"version": "8.12.1",
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.12.1.tgz",
|
||||
"integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==",
|
||||
"version": "8.13.0",
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.13.0.tgz",
|
||||
"integrity": "sha512-8zSiw54Oxrdym50NlZ9sUusyO1Z1ZchgRLWRaK6c86XJFClyCgFKetdowBg5bKxyp/u+CDBJG4Mpp0m3HLZl9w==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
@ -3186,9 +3186,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/caniuse-lite": {
|
||||
"version": "1.0.30001668",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001668.tgz",
|
||||
"integrity": "sha512-nWLrdxqCdblixUO+27JtGJJE/txpJlyUy5YN1u53wLZkP0emYCo5zgS6QYft7VUYR42LGgi/S5hdLZTrnyIddw==",
|
||||
"version": "1.0.30001669",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001669.tgz",
|
||||
"integrity": "sha512-DlWzFDJqstqtIVx1zeSpIMLjunf5SmwOw0N2Ck/QSQdS8PLS4+9HrLaYei4w8BIAL7IB/UEDu889d8vhCTPA0w==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
@ -3642,9 +3642,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/electron-to-chromium": {
|
||||
"version": "1.5.36",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.36.tgz",
|
||||
"integrity": "sha512-HYTX8tKge/VNp6FGO+f/uVDmUkq+cEfcxYhKf15Akc4M5yxt5YmorwlAitKWjWhWQnKcDRBAQKXkhqqXMqcrjw==",
|
||||
"version": "1.5.41",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.41.tgz",
|
||||
"integrity": "sha512-dfdv/2xNjX0P8Vzme4cfzHqnPm5xsZXwsolTYr0eyW18IUmNyG08vL+fttvinTfhKfIKdRoqkDIC9e9iWQCNYQ==",
|
||||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
@ -5417,9 +5417,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/npm-run-all2": {
|
||||
"version": "6.2.3",
|
||||
"resolved": "https://registry.npmjs.org/npm-run-all2/-/npm-run-all2-6.2.3.tgz",
|
||||
"integrity": "sha512-5RsxC7jEc/RjxOYBVdEfrJf5FsJ0pHA7jr2/OxrThXknajETCTYjigOCG3iaGjdYIKEQlDuCG0ir0T1HTva8pg==",
|
||||
"version": "6.2.4",
|
||||
"resolved": "https://registry.npmjs.org/npm-run-all2/-/npm-run-all2-6.2.4.tgz",
|
||||
"integrity": "sha512-h/v0JWs0P12iR076jL0iTi4JzZVaJPnwse2+s4XzaIxwjtybQbQM2kg/Wd7Lxi0iEOXy3ZX2tLPNbm3MqzIFqw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
@ -5429,7 +5429,8 @@
|
||||
"minimatch": "^9.0.0",
|
||||
"pidtree": "^0.6.0",
|
||||
"read-package-json-fast": "^3.0.2",
|
||||
"shell-quote": "^1.7.3"
|
||||
"shell-quote": "^1.7.3",
|
||||
"which": "^3.0.1"
|
||||
},
|
||||
"bin": {
|
||||
"npm-run-all": "bin/npm-run-all/index.js",
|
||||
@ -5455,6 +5456,22 @@
|
||||
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/npm-run-all2/node_modules/which": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/which/-/which-3.0.1.tgz",
|
||||
"integrity": "sha512-XA1b62dzQzLfaEOSQFTCOd5KFf/1VSzZo7/7TUjnya6u0vGGKzU96UQBZTAThCb2j4/xjBAyii1OhRLJEivHvg==",
|
||||
"dev": true,
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"isexe": "^2.0.0"
|
||||
},
|
||||
"bin": {
|
||||
"node-which": "bin/which.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/npm-run-path": {
|
||||
"version": "5.3.0",
|
||||
"resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.3.0.tgz",
|
||||
@ -5764,9 +5781,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/phaser3-rex-plugins": {
|
||||
"version": "1.80.8",
|
||||
"resolved": "https://registry.npmjs.org/phaser3-rex-plugins/-/phaser3-rex-plugins-1.80.8.tgz",
|
||||
"integrity": "sha512-/uZMauVrOC/uiywQF37yH5Q6eUMOL2knMCnfEDWnc5ek40jvQOKjsenjB6q6hYuMvV54C8m0q2p1oL6B/rz12g==",
|
||||
"version": "1.80.9",
|
||||
"resolved": "https://registry.npmjs.org/phaser3-rex-plugins/-/phaser3-rex-plugins-1.80.9.tgz",
|
||||
"integrity": "sha512-yx+WSAf4MOF2AimVL/Dv7eN65/YuO4LVNlYihDP0tAgFfCoTBunAd0YDbv82eoSkOAd0gy6w3Qh71p3kq1eRTA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
@ -5798,9 +5815,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/picocolors": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
|
||||
"integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==",
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
|
||||
"integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/picomatch": {
|
||||
@ -6409,9 +6426,9 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/sass": {
|
||||
"version": "1.79.5",
|
||||
"resolved": "https://registry.npmjs.org/sass/-/sass-1.79.5.tgz",
|
||||
"integrity": "sha512-W1h5kp6bdhqFh2tk3DsI771MoEJjvrSY/2ihJRJS4pjIyfJCw0nTsxqhnrUzaLMOJjFchj8rOvraI/YUVjtx5g==",
|
||||
"version": "1.80.2",
|
||||
"resolved": "https://registry.npmjs.org/sass/-/sass-1.80.2.tgz",
|
||||
"integrity": "sha512-9wXY8cGBlUmoUoT+vwOZOFCiS+naiWVjqlreN9ar9PudXbGwlMTFwCR5K9kB4dFumJ6ib98wZyAObJKsWf1nAA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
@ -6818,9 +6835,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/tailwindcss": {
|
||||
"version": "3.4.13",
|
||||
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.13.tgz",
|
||||
"integrity": "sha512-KqjHOJKogOUt5Bs752ykCeiwvi0fKVkr5oqsFNt/8px/tA8scFPIlkygsf6jXrfCqGHz7VflA6+yytWuM+XhFw==",
|
||||
"version": "3.4.14",
|
||||
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.14.tgz",
|
||||
"integrity": "sha512-IcSvOcTRcUtQQ7ILQL5quRDg7Xs93PdJEk1ZLbhhvJc7uj/OAhYOnruEiwnGgBvUtaUAJ8/mhSw1o8L2jCiENA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
@ -6944,9 +6961,9 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/tinyexec": {
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-0.3.0.tgz",
|
||||
"integrity": "sha512-tVGE0mVJPGb0chKhqmsoosjsS+qUnJVGJpZgsHYQcGoPlG3B51R3PouqTgEGH2Dc9jjFyOqOpix6ZHNMXp1FZg==",
|
||||
"version": "0.3.1",
|
||||
"resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-0.3.1.tgz",
|
||||
"integrity": "sha512-WiCJLEECkO18gwqIp6+hJg0//p23HXp4S+gGtAKu3mI2F2/sXC4FvHvXvB0zJVVaTPhx1/tOwdbRsa1sOBIKqQ==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
@ -7062,9 +7079,9 @@
|
||||
"license": "Apache-2.0"
|
||||
},
|
||||
"node_modules/tslib": {
|
||||
"version": "2.7.0",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz",
|
||||
"integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==",
|
||||
"version": "2.8.0",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.0.tgz",
|
||||
"integrity": "sha512-jWVzBLplnCmoaTr13V9dYbiQ99wvZRd0vNWaDRg+aVYRcjDF3nDksxFDE/+fkXnKhpnUUkmx5pK/v8mCtLVqZA==",
|
||||
"dev": true,
|
||||
"license": "0BSD"
|
||||
},
|
||||
@ -7322,15 +7339,15 @@
|
||||
}
|
||||
},
|
||||
"node_modules/vite-plugin-vue-devtools": {
|
||||
"version": "7.4.6",
|
||||
"resolved": "https://registry.npmjs.org/vite-plugin-vue-devtools/-/vite-plugin-vue-devtools-7.4.6.tgz",
|
||||
"integrity": "sha512-lOKur3qovCB3BQStL0qfHEoIusqya1ngfxfWuqn9DTa6h9rlw6+S3PV4geOP5YBGYQ4NW1hRX70OD8I+sYr1dA==",
|
||||
"version": "7.5.2",
|
||||
"resolved": "https://registry.npmjs.org/vite-plugin-vue-devtools/-/vite-plugin-vue-devtools-7.5.2.tgz",
|
||||
"integrity": "sha512-+lQOKW0kZAvLxy9KcsmtOk5Hsu0ibVAot9odFwCCASE4jukb0zaWGIyZwFLk4IsWNDT3iISvajIr704UYcZL6g==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@vue/devtools-core": "^7.4.6",
|
||||
"@vue/devtools-kit": "^7.4.6",
|
||||
"@vue/devtools-shared": "^7.4.6",
|
||||
"@vue/devtools-core": "^7.5.2",
|
||||
"@vue/devtools-kit": "^7.5.2",
|
||||
"@vue/devtools-shared": "^7.5.2",
|
||||
"execa": "^8.0.1",
|
||||
"sirv": "^2.0.4",
|
||||
"vite-plugin-inspect": "^0.8.7",
|
||||
|
||||
@ -18,11 +18,11 @@
|
||||
"@vueuse/core": "^10.5.0",
|
||||
"@vueuse/integrations": "^10.5.0",
|
||||
"axios": "^1.7.7",
|
||||
"phaser": "^3.85.2",
|
||||
"phaser": "^3.86.0",
|
||||
"pinia": "^2.1.6",
|
||||
"socket.io-client": "^4.8.0",
|
||||
"universal-cookie": "^6.1.3",
|
||||
"vue": "^3.5.10",
|
||||
"vue": "^3.5.12",
|
||||
"zod": "^3.22.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
@ -48,8 +48,8 @@
|
||||
"sass": "^1.79.4",
|
||||
"tailwindcss": "^3.4.13",
|
||||
"typescript": "~5.6.2",
|
||||
"vite": "^5.4.8",
|
||||
"vite-plugin-vue-devtools": "^7.4.6",
|
||||
"vite": "^5.4.9",
|
||||
"vite-plugin-vue-devtools": "^7.5.2",
|
||||
"vitest": "^2.0.3",
|
||||
"vue-tsc": "^1.6.5"
|
||||
}
|
||||
|
||||
51
public/assets/icons/increase-size-option.svg
Normal file
51
public/assets/icons/increase-size-option.svg
Normal file
@ -0,0 +1,51 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="438.529px" height="438.529px" viewBox="0 0 438.529 438.529" style="enable-background:new 0 0 438.529 438.529;"
|
||||
xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<path d="M180.156,225.828c-1.903-1.902-4.093-2.854-6.567-2.854c-2.475,0-4.665,0.951-6.567,2.854l-94.787,94.787l-41.112-41.117
|
||||
c-3.617-3.61-7.895-5.421-12.847-5.421c-4.952,0-9.235,1.811-12.851,5.421c-3.617,3.621-5.424,7.905-5.424,12.854v127.907
|
||||
c0,4.948,1.807,9.229,5.424,12.847c3.619,3.613,7.902,5.424,12.851,5.424h127.906c4.949,0,9.23-1.811,12.847-5.424
|
||||
c3.615-3.617,5.424-7.898,5.424-12.847s-1.809-9.233-5.424-12.854l-41.112-41.104l94.787-94.793
|
||||
c1.902-1.903,2.853-4.086,2.853-6.564c0-2.478-0.953-4.66-2.853-6.57L180.156,225.828z"/>
|
||||
<path d="M433.11,5.424C429.496,1.807,425.212,0,420.263,0H292.356c-4.948,0-9.227,1.807-12.847,5.424
|
||||
c-3.614,3.615-5.421,7.898-5.421,12.847s1.807,9.233,5.421,12.847l41.106,41.112l-94.786,94.787
|
||||
c-1.901,1.906-2.854,4.093-2.854,6.567s0.953,4.665,2.854,6.567l32.552,32.548c1.902,1.903,4.086,2.853,6.563,2.853
|
||||
s4.661-0.95,6.563-2.853l94.794-94.787l41.104,41.109c3.62,3.616,7.905,5.428,12.854,5.428s9.229-1.812,12.847-5.428
|
||||
c3.614-3.614,5.421-7.898,5.421-12.847V18.268C438.53,13.315,436.734,9.04,433.11,5.424z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
10
public/assets/icons/minus-icon.svg
Normal file
10
public/assets/icons/minus-icon.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 597 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 325 B After Width: | Height: | Size: 597 KiB |
@ -1,4 +1,4 @@
|
||||
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M21 15L15 21M21 8L8 21" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M21 15L15 21M21 8L8 21" stroke="#4d4d4d" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 346 B After Width: | Height: | Size: 346 B |
15
public/assets/login/sq-logo-v1.svg
Normal file
15
public/assets/login/sq-logo-v1.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 12 KiB |
34
src/App.vue
34
src/App.vue
@ -1,34 +1,32 @@
|
||||
<template>
|
||||
<div class="overflow-hidden">
|
||||
<Notifications />
|
||||
<Login v-if="screen === 'login'" />
|
||||
<!-- <Register v-if="screen === 'register'" />-->
|
||||
<Characters v-if="screen === 'characters'" />
|
||||
<Game v-if="screen === 'game'" />
|
||||
</div>
|
||||
<Notifications />
|
||||
<GmTools v-if="gameStore.character?.role === 'gm'" />
|
||||
<GmPanel v-if="gameStore.character?.role === 'gm'" />
|
||||
|
||||
<component :is="currentScreen" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import Notifications from '@/components/utilities/Notifications.vue'
|
||||
import GmTools from '@/components/gameMaster/GmTools.vue'
|
||||
import GmPanel from '@/components/gameMaster/GmPanel.vue'
|
||||
import Login from '@/screens/Login.vue'
|
||||
// import Register from '@/screens/Register.vue'
|
||||
import Characters from '@/screens/Characters.vue'
|
||||
import Game from '@/screens/Game.vue'
|
||||
import ZoneEditor from '@/screens/ZoneEditor.vue'
|
||||
import { computed } from 'vue'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
|
||||
const screen = computed(() => {
|
||||
if (!gameStore.connection) {
|
||||
return 'login'
|
||||
} else if (gameStore.token && gameStore.connection) {
|
||||
if (gameStore.character) {
|
||||
return 'game'
|
||||
}
|
||||
return 'characters'
|
||||
}
|
||||
return 'login' // default fallback
|
||||
const currentScreen = computed(() => {
|
||||
if (!gameStore.connection) return Login
|
||||
if (!gameStore.token) return Login
|
||||
if (!gameStore.character) return Characters
|
||||
if (zoneEditorStore.active) return ZoneEditor
|
||||
return Game
|
||||
})
|
||||
|
||||
// Disable right click
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
//Globals
|
||||
|
||||
body {
|
||||
@apply bg-black m-0 select-none overscroll-none overflow-hidden;
|
||||
@apply bg-black m-0 select-none;
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
|
||||
@ -61,7 +61,7 @@ input {
|
||||
}
|
||||
|
||||
.input-field {
|
||||
@apply px-4 py-2.5 text-base focus-visible:outline-none bg-gray border border-solid border-gray-500 rounded text-gray-300;
|
||||
@apply px-4 py-2.5 text-base leading-5 focus-visible:outline-none bg-gray border border-solid border-gray-500 rounded text-gray-300;
|
||||
&.inactive {
|
||||
@apply bg-gray-600/50 hover:cursor-not-allowed;
|
||||
&::placeholder {
|
||||
@ -87,7 +87,7 @@ button {
|
||||
@apply text-center;
|
||||
|
||||
&.btn-cyan {
|
||||
@apply bg-cyan text-gray-50 text-base rounded py-2.5;
|
||||
@apply bg-cyan text-gray-50 text-base leading-5 rounded py-2.5;
|
||||
|
||||
&.active,
|
||||
&:hover {
|
||||
@ -96,7 +96,7 @@ button {
|
||||
}
|
||||
|
||||
&.btn-red {
|
||||
@apply bg-red text-gray-50 text-base rounded py-2.5;
|
||||
@apply bg-red text-gray-50 text-base leading-5 rounded py-2.5;
|
||||
|
||||
&.active,
|
||||
&:hover {
|
||||
@ -104,6 +104,15 @@ button {
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-empty {
|
||||
@apply text-gray-50 border-2 border-solid border-gray-500 text-base leading-5 rounded py-2.5;
|
||||
|
||||
&.active,
|
||||
&:hover {
|
||||
@apply bg-gray-700 border-gray-700;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
@apply cursor-pointer;
|
||||
}
|
||||
@ -120,3 +129,12 @@ button {
|
||||
::-webkit-scrollbar {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
canvas {
|
||||
image-rendering: -moz-crisp-edges;
|
||||
image-rendering: -webkit-crisp-edges;
|
||||
image-rendering: pixelated;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
@ -1,28 +1,21 @@
|
||||
<template>
|
||||
<Scene name="effects" @preload="preloadScene" @create="createScene" @update="updateScene">
|
||||
</Scene>
|
||||
<Scene name="effects" @preload="preloadScene" @create="createScene" @update="updateScene"> </Scene>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { Scene } from 'phavuer'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import { onBeforeMount, onBeforeUnmount, ref } from 'vue'
|
||||
import { useZoneStore } from '@/stores/zoneStore'
|
||||
import { onBeforeUnmount, ref, watch } from 'vue'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
const zoneStore = useZoneStore()
|
||||
|
||||
const sceneRef = ref<Phaser.Scene | null>(null)
|
||||
|
||||
// Effect-related refs
|
||||
const dayNightCycle = ref<Phaser.GameObjects.Graphics | null>(null)
|
||||
const lightEffect = ref<Phaser.GameObjects.Graphics | null>(null)
|
||||
const rainEmitter = ref<Phaser.GameObjects.Particles.ParticleEmitter | null>(null)
|
||||
const fogSprite = ref<Phaser.GameObjects.Sprite | null>(null)
|
||||
|
||||
// Effect parameters
|
||||
const dayNightDuration = 300000 // 5 minutes in milliseconds
|
||||
const maxDarkness = 0.7
|
||||
|
||||
const preloadScene = async (scene: Phaser.Scene) => {
|
||||
scene.load.image('raindrop', 'assets/raindrop.png')
|
||||
scene.load.image('fog', 'assets/fog.png')
|
||||
@ -30,28 +23,18 @@ const preloadScene = async (scene: Phaser.Scene) => {
|
||||
|
||||
const createScene = async (scene: Phaser.Scene) => {
|
||||
sceneRef.value = scene
|
||||
createDayNightCycle(scene)
|
||||
createLightEffect(scene)
|
||||
createRainEffect(scene)
|
||||
createFogEffect(scene)
|
||||
}
|
||||
|
||||
const updateScene = (scene: Phaser.Scene, time: number) => {
|
||||
updateDayNightCycle(time)
|
||||
updateFogEffect()
|
||||
const updateScene = () => {
|
||||
updateEffects()
|
||||
}
|
||||
|
||||
const createDayNightCycle = (scene: Phaser.Scene) => {
|
||||
dayNightCycle.value = scene.add.graphics()
|
||||
dayNightCycle.value.setDepth(1000)
|
||||
}
|
||||
|
||||
const updateDayNightCycle = (time: number) => {
|
||||
if (!dayNightCycle.value) return
|
||||
|
||||
const darkness = Math.sin((time % dayNightDuration) / dayNightDuration * Math.PI) * maxDarkness
|
||||
dayNightCycle.value.clear()
|
||||
dayNightCycle.value.fillStyle(0x000000, darkness)
|
||||
dayNightCycle.value.fillRect(0, 0, window.innerWidth, window.innerHeight)
|
||||
const createLightEffect = (scene: Phaser.Scene) => {
|
||||
lightEffect.value = scene.add.graphics()
|
||||
lightEffect.value.setDepth(1000)
|
||||
}
|
||||
|
||||
const createRainEffect = (scene: Phaser.Scene) => {
|
||||
@ -66,13 +49,7 @@ const createRainEffect = (scene: Phaser.Scene) => {
|
||||
blendMode: 'ADD'
|
||||
})
|
||||
rainEmitter.value.setDepth(900)
|
||||
toggleRain(true) // Start with rain off
|
||||
}
|
||||
|
||||
const toggleRain = (isRaining: boolean) => {
|
||||
if (rainEmitter.value) {
|
||||
rainEmitter.value.setVisible(isRaining)
|
||||
}
|
||||
rainEmitter.value.stop()
|
||||
}
|
||||
|
||||
const createFogEffect = (scene: Phaser.Scene) => {
|
||||
@ -82,28 +59,52 @@ const createFogEffect = (scene: Phaser.Scene) => {
|
||||
fogSprite.value.setDepth(950)
|
||||
}
|
||||
|
||||
const updateFogEffect = () => {
|
||||
if (fogSprite.value) {
|
||||
// Example: Oscillate fog opacity
|
||||
const fogOpacity = (Math.sin(Date.now() / 5000) + 1) / 2 * 0.3
|
||||
fogSprite.value.setAlpha(fogOpacity)
|
||||
}
|
||||
}
|
||||
const updateEffects = () => {
|
||||
const effects = zoneStore.zone?.zoneEffects || []
|
||||
|
||||
// Expose methods to control effects
|
||||
const controlEffects = {
|
||||
toggleRain,
|
||||
setFogDensity: (density: number) => {
|
||||
if (fogSprite.value) {
|
||||
fogSprite.value.setAlpha(density)
|
||||
effects.forEach((effect) => {
|
||||
switch (effect.effect) {
|
||||
case 'light':
|
||||
updateLightEffect(effect.strength)
|
||||
break
|
||||
case 'rain':
|
||||
updateRainEffect(effect.strength)
|
||||
break
|
||||
case 'fog':
|
||||
updateFogEffect(effect.strength)
|
||||
break
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const updateLightEffect = (strength: number) => {
|
||||
if (!lightEffect.value) return
|
||||
const darkness = 1 - strength / 100
|
||||
lightEffect.value.clear()
|
||||
lightEffect.value.fillStyle(0x000000, darkness)
|
||||
lightEffect.value.fillRect(0, 0, window.innerWidth, window.innerHeight)
|
||||
}
|
||||
|
||||
const updateRainEffect = (strength: number) => {
|
||||
if (!rainEmitter.value) return
|
||||
if (strength > 0) {
|
||||
rainEmitter.value.start()
|
||||
rainEmitter.value.setQuantity(Math.floor((strength / 100) * 10))
|
||||
} else {
|
||||
rainEmitter.value.stop()
|
||||
}
|
||||
}
|
||||
|
||||
// Make control methods available to parent components
|
||||
defineExpose(controlEffects)
|
||||
const updateFogEffect = (strength: number) => {
|
||||
if (!fogSprite.value) return
|
||||
fogSprite.value.setAlpha(strength / 100)
|
||||
}
|
||||
|
||||
watch(() => zoneStore.zone?.zoneEffects, updateEffects, { deep: true })
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (sceneRef.value) sceneRef.value.scene.remove('effects')
|
||||
})
|
||||
</script>
|
||||
|
||||
// @TODO : Fix resize issue
|
||||
</script>
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
<template>
|
||||
<Modal :isModalOpen="gameStore.uiSettings.isGmPanelOpen" @modal:close="() => gameStore.toggleGmPanel()" :modal-width="1000" :modal-height="650" :can-full-screen="true">
|
||||
<template #modalHeader>
|
||||
<h3 class="m-0 font-medium shrink-0 text-gray-300">GM Panel</h3>
|
||||
<div class="flex gap-1.5 flex-wrap">
|
||||
<button @mousedown.stop class="btn-cyan py-1.5 px-4 min-w-24">General</button>
|
||||
<button @mousedown.stop class="btn-cyan py-1.5 px-4 min-w-24">Users</button>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<Modal :isModalOpen="true" :closable="false" :is-resizable="false" :modal-width="modalWidth" :modal-height="modalHeight" :modal-position-x="posXY.x" :modal-position-y="posXY.y">
|
||||
<template #modalHeader>
|
||||
<h3 class="m-0 font-medium shrink-0 text-gray-300">GM tools</h3>
|
||||
<h3 class="m-0 font-medium shrink-0 text-white">GM tools</h3>
|
||||
</template>
|
||||
<template #modalBody>
|
||||
<div class="content flex flex-col gap-2.5 m-4 h-20">
|
||||
@ -20,7 +20,7 @@ import { onMounted, ref } from 'vue'
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
const gameStore = useGameStore()
|
||||
const modalWidth = ref(200)
|
||||
const modalHeight = ref(180)
|
||||
const modalHeight = ref(170)
|
||||
|
||||
let posXY = ref({ x: 0, y: 0 })
|
||||
|
||||
|
||||
@ -4,53 +4,67 @@
|
||||
<!-- Asset Categories -->
|
||||
<a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'tiles' }" @click="() => (selectedCategory = 'tiles')">
|
||||
<span>Tiles</span>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
|
||||
</a>
|
||||
<a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'objects' }" @click="() => (selectedCategory = 'objects')">
|
||||
<span>Objects</span>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
|
||||
</a>
|
||||
<a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'sprites' }" @click="() => (selectedCategory = 'sprites')">
|
||||
<span>Sprites</span>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
|
||||
</a>
|
||||
<a class="relative p-2.5 hover:cursor-pointer">
|
||||
<span>Items</span>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
|
||||
</a>
|
||||
<a class="relative p-2.5 hover:cursor-pointer">
|
||||
<span>NPC's</span>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
|
||||
</a>
|
||||
<a class="relative p-2.5 hover:cursor-pointer">
|
||||
<span>Characters</span>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
|
||||
<a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'shops' }" @click="() => (selectedCategory = 'shops')">
|
||||
<span>Shops</span>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
|
||||
</a>
|
||||
<a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'characterTypes' }" @click="() => (selectedCategory = 'characterTypes')">
|
||||
<span>Character types</span>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
|
||||
</a>
|
||||
<a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': selectedCategory === 'characterHair' }" @click="() => (selectedCategory = 'characterHair')">
|
||||
<span>Character hair</span>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
|
||||
</a>
|
||||
<a class="relative p-2.5 hover:cursor-pointer">
|
||||
<span>Mounts</span>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
|
||||
</a>
|
||||
<a class="relative p-2.5 hover:cursor-pointer">
|
||||
<span>Pets</span>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
|
||||
</a>
|
||||
<a class="relative p-2.5 hover:cursor-pointer">
|
||||
<span>Emoticons</span>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="absolute w-px bg-cyan-200 h-full top-0 left-1/6"></div>
|
||||
<div class="absolute w-px bg-gray-500 h-full top-0 left-1/6"></div>
|
||||
|
||||
<!-- Assets list -->
|
||||
<div class="overflow-auto h-full w-4/12 flex flex-col relative">
|
||||
<TileList v-if="selectedCategory === 'tiles'" />
|
||||
<ObjectList v-if="selectedCategory === 'objects'" />
|
||||
<SpriteList v-if="selectedCategory === 'sprites'" />
|
||||
<CharacterTypeList v-if="selectedCategory === 'characterTypes'" />
|
||||
</div>
|
||||
|
||||
<div class="absolute w-px bg-cyan-200 h-full top-0 left-1/2"></div>
|
||||
<div class="absolute w-px bg-gray-500 h-full top-0 left-1/2"></div>
|
||||
|
||||
<!-- Asset details -->
|
||||
<div class="flex w-1/2 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" />
|
||||
<CharacterTypeDetails v-if="selectedCategory === 'characterTypes' && assetManagerStore.selectedCharacterType" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -64,6 +78,8 @@ import ObjectList from '@/components/gameMaster/assetManager/partials/object/Obj
|
||||
import ObjectDetails from '@/components/gameMaster/assetManager/partials/object/ObjectDetails.vue'
|
||||
import SpriteList from '@/components/gameMaster/assetManager/partials/sprite/SpriteList.vue'
|
||||
import SpriteDetails from '@/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue'
|
||||
import CharacterTypeList from '@/components/gameMaster/assetManager/partials/characterType/CharacterTypeList.vue'
|
||||
import CharacterTypeDetails from '@/components/gameMaster/assetManager/partials/characterType/CharacterTypeDetails.vue'
|
||||
|
||||
const assetManagerStore = useAssetManagerStore()
|
||||
const selectedCategory = ref('tiles')
|
||||
|
||||
@ -0,0 +1,117 @@
|
||||
<template>
|
||||
<div class="h-full overflow-auto">
|
||||
<div class="m-2.5 p-2.5 block">
|
||||
<form class="flex gap-2.5 flex-wrap" @submit.prevent="saveCharacterType">
|
||||
<div class="form-field-full">
|
||||
<label for="name">Name</label>
|
||||
<input v-model="characterName" class="input-field" type="text" name="name" placeholder="Character Type Name" />
|
||||
</div>
|
||||
<div class="form-field-half">
|
||||
<label for="gender">Gender</label>
|
||||
<select v-model="characterGender" class="input-field" name="gender">
|
||||
<option v-for="gender in genderOptions" :key="gender" :value="gender">{{ gender }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-field-half">
|
||||
<label for="race">Race</label>
|
||||
<select v-model="characterRace" class="input-field" name="race">
|
||||
<option v-for="race in raceOptions" :key="race" :value="race">{{ race }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-field-full">
|
||||
<label for="spriteId">Sprite ID</label>
|
||||
<input v-model="characterSpriteId" class="input-field" type="text" name="spriteId" placeholder="Sprite ID" />
|
||||
</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="removeCharacterType">Remove</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { CharacterType, CharacterGender, CharacterRace } from '@/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 selectedCharacterType = computed(() => assetManagerStore.selectedCharacterType)
|
||||
|
||||
const characterName = ref('')
|
||||
const characterGender = ref<CharacterGender>('MALE' as CharacterGender.MALE)
|
||||
const characterRace = ref<CharacterRace>('HUMAN' as CharacterRace.HUMAN)
|
||||
const characterSpriteId = ref('')
|
||||
|
||||
const genderOptions: CharacterGender[] = ['MALE' as CharacterGender.MALE, 'FEMALE' as CharacterGender.FEMALE]
|
||||
const raceOptions: CharacterRace[] = ['HUMAN' as CharacterRace.HUMAN, 'ELF' as CharacterRace.ELF, 'DWARF' as CharacterRace.DWARF, 'ORC' as CharacterRace.ORC, 'GOBLIN' as CharacterRace.GOBLIN]
|
||||
|
||||
if (!selectedCharacterType.value) {
|
||||
console.error('No character type selected')
|
||||
}
|
||||
|
||||
if (selectedCharacterType.value) {
|
||||
characterName.value = selectedCharacterType.value.name
|
||||
characterGender.value = selectedCharacterType.value.gender
|
||||
characterRace.value = selectedCharacterType.value.race
|
||||
characterSpriteId.value = selectedCharacterType.value.spriteId
|
||||
}
|
||||
|
||||
function removeCharacterType() {
|
||||
if (!selectedCharacterType.value) return
|
||||
|
||||
gameStore.connection?.emit('gm:characterType:remove', { id: selectedCharacterType.value.id }, (response: boolean) => {
|
||||
if (!response) {
|
||||
console.error('Failed to remove character type')
|
||||
return
|
||||
}
|
||||
refreshCharacterTypeList()
|
||||
})
|
||||
}
|
||||
|
||||
function refreshCharacterTypeList(unsetSelectedCharacterType = true) {
|
||||
gameStore.connection?.emit('gm:characterType:list', {}, (response: CharacterType[]) => {
|
||||
assetManagerStore.setCharacterTypeList(response)
|
||||
|
||||
if (unsetSelectedCharacterType) {
|
||||
assetManagerStore.setSelectedCharacterType(null)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function saveCharacterType() {
|
||||
const characterTypeData = {
|
||||
id: selectedCharacterType.value?.id,
|
||||
name: characterName.value,
|
||||
gender: characterGender.value,
|
||||
race: characterRace.value,
|
||||
spriteId: characterSpriteId.value
|
||||
}
|
||||
|
||||
gameStore.connection?.emit('gm:characterType:update', characterTypeData, (response: boolean) => {
|
||||
if (!response) {
|
||||
console.error('Failed to save character type')
|
||||
return
|
||||
}
|
||||
refreshCharacterTypeList(false)
|
||||
})
|
||||
}
|
||||
|
||||
watch(selectedCharacterType, (characterType: CharacterType | null) => {
|
||||
if (!characterType) return
|
||||
characterName.value = characterType.name
|
||||
characterGender.value = characterType.gender
|
||||
characterRace.value = characterType.race
|
||||
characterSpriteId.value = characterType.spriteId
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
if (!selectedCharacterType.value) return
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
assetManagerStore.setSelectedCharacterType(null)
|
||||
})
|
||||
</script>
|
||||
@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div class="relative p-2.5 flex items-center gap-x-2.5">
|
||||
<input v-model="searchQuery" class="input-field flex-grow" placeholder="Search..." @input="handleSearch" />
|
||||
<label for="create-character" class="bg-cyan/50 border border-solid border-white/25 rounded drop-shadow-20 p-2 inline-flex items-center justify-center hover:bg-cyan hover:cursor-pointer">
|
||||
<button id="create-character" @click="createNewCharacterType">
|
||||
<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="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
</button>
|
||||
</label>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
|
||||
</div>
|
||||
<div v-bind="containerProps" class="overflow-y-auto relative" @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" :class="{ 'bg-cyan/80': assetManagerStore.selectedCharacterType?.id === characterType.id }" @click="assetManagerStore.setSelectedCharacterType(characterType as CharacterType)">
|
||||
<div class="flex items-center gap-2.5">
|
||||
<span>{{ characterType.name }}</span>
|
||||
</div>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
|
||||
</a>
|
||||
</div>
|
||||
<button class="left-[calc(50%_-_60px)] fixed bottom-2.5 min-w-[unset] w-12 h-12 rounded-md bg-cyan/50 p-0 hover:bg-cyan" 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="" />
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { onMounted, ref, computed } from 'vue'
|
||||
import { useAssetManagerStore } from '@/stores/assetManagerStore'
|
||||
import type { CharacterType } from '@/types'
|
||||
import { useVirtualList } from '@vueuse/core'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
const assetManagerStore = useAssetManagerStore()
|
||||
|
||||
const searchQuery = ref('')
|
||||
|
||||
const hasScrolled = ref(false)
|
||||
const elementToScroll = ref()
|
||||
|
||||
const handleSearch = () => {
|
||||
// Trigger a re-render of the virtual list
|
||||
virtualList.value?.scrollTo(0)
|
||||
}
|
||||
|
||||
const createNewCharacterType = () => {
|
||||
gameStore.connection?.emit('gm:characterType:create', {}, (response: boolean) => {
|
||||
if (!response) {
|
||||
console.error('Failed to create new character type')
|
||||
return
|
||||
}
|
||||
|
||||
gameStore.connection?.emit('gm:characterType:list', {}, (response: CharacterType[]) => {
|
||||
assetManagerStore.setCharacterTypeList(response)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const filteredCharacterTypes = computed(() => {
|
||||
if (!searchQuery.value) {
|
||||
return assetManagerStore.characterTypeList
|
||||
}
|
||||
return assetManagerStore.characterTypeList.filter((character) => character.name.toLowerCase().includes(searchQuery.value.toLowerCase()))
|
||||
})
|
||||
|
||||
const { list, containerProps, wrapperProps, scrollTo } = useVirtualList(filteredCharacterTypes, {
|
||||
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:characterType:list', {}, (response: CharacterType[]) => {
|
||||
assetManagerStore.setCharacterTypeList(response)
|
||||
})
|
||||
})
|
||||
</script>
|
||||
@ -4,7 +4,7 @@
|
||||
<div class="filler"></div>
|
||||
<img class="max-h-56" :src="`${config.server_endpoint}/assets/objects/${selectedObject?.id}.png`" :alt="'Object ' + selectedObject?.id" />
|
||||
<button class="btn-red px-4 py-1.5 min-w-24" type="button" @click.prevent="removeObject">Remove</button>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
|
||||
</div>
|
||||
<div class="m-2.5 p-2.5 block">
|
||||
<form class="flex gap-2.5 flex-wrap" @submit.prevent="saveObject">
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
</label>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
|
||||
</div>
|
||||
<div v-bind="containerProps" class="overflow-y-auto relative" @scroll="onScroll">
|
||||
<div v-bind="wrapperProps" ref="elementToScroll">
|
||||
@ -18,7 +18,7 @@
|
||||
</div>
|
||||
<span>{{ object.name }}</span>
|
||||
</div>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
|
||||
</a>
|
||||
</div>
|
||||
<button class="left-[calc(50%_-_60px)] fixed bottom-2.5 min-w-[unset] w-12 h-12 rounded-md bg-cyan/50 p-0 hover:bg-cyan" v-show="hasScrolled" @click="toTop">
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
<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>
|
||||
<div class="w-[calc(100%_+_32px)] absolute left-[-15px] bottom-0 h-px bg-cyan-200"></div>
|
||||
<div class="w-[calc(100%_+_32px)] absolute left-[-15px] bottom-0 h-px bg-gray-500"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -6,7 +6,7 @@
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
</button>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
|
||||
</div>
|
||||
<div v-bind="containerProps" class="overflow-y-auto relative" @scroll="onScroll">
|
||||
<div v-bind="wrapperProps" ref="elementToScroll">
|
||||
@ -14,7 +14,7 @@
|
||||
<div class="flex items-center gap-2.5">
|
||||
<span>{{ sprite.name }}</span>
|
||||
</div>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
|
||||
</a>
|
||||
</div>
|
||||
<button class="left-[calc(50%_-_60px)] fixed bottom-2.5 min-w-[unset] w-12 h-12 rounded-md bg-cyan/50 p-0 hover:bg-cyan" v-show="hasScrolled" @click="toTop">
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<div class="filler"></div>
|
||||
<img class="max-h-72" :src="`${config.server_endpoint}/assets/tiles/${selectedTile?.id}.png`" :alt="'Tile ' + selectedTile?.id" />
|
||||
<button class="btn-red px-4 py-1.5 min-w-24" type="button" @click.prevent="deleteTile">Delete</button>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
|
||||
</div>
|
||||
<div class="m-2.5 p-2.5 block">
|
||||
<form class="flex gap-2.5 flex-wrap" @submit.prevent="saveTile">
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
</label>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
|
||||
</div>
|
||||
<div v-bind="containerProps" class="overflow-y-auto relative" @scroll="onScroll">
|
||||
<div v-bind="wrapperProps" ref="elementToScroll">
|
||||
@ -18,7 +18,7 @@
|
||||
</div>
|
||||
<span>{{ tile.name }}</span>
|
||||
</div>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
|
||||
</a>
|
||||
</div>
|
||||
<button class="left-[calc(50%_-_60px)] fixed bottom-2.5 min-w-[unset] w-12 h-12 rounded-md bg-cyan/50 p-0 hover:bg-cyan" v-show="hasScrolled" @click="toTop">
|
||||
|
||||
112
src/components/gameMaster/zoneEditor/EventTiles.vue
Normal file
112
src/components/gameMaster/zoneEditor/EventTiles.vue
Normal file
@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<Image v-for="tile in zoneEditorStore.zone?.zoneEventTiles" v-bind="getImageProps(tile)" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { type ZoneEventTile, ZoneEventTileType } from '@/types'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import { Image, useScene } from 'phavuer'
|
||||
import { getTile, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
|
||||
import { uuidv4 } from '@/utilities'
|
||||
import { onBeforeMount, onBeforeUnmount } from 'vue'
|
||||
|
||||
const scene = useScene()
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
|
||||
const props = defineProps<{
|
||||
tilemap: Phaser.Tilemaps.Tilemap
|
||||
}>()
|
||||
|
||||
function getImageProps(tile: ZoneEventTile) {
|
||||
return {
|
||||
x: tileToWorldX(props.tilemap, tile.positionX, tile.positionY),
|
||||
y: tileToWorldY(props.tilemap, tile.positionX, tile.positionY),
|
||||
texture: tile.type,
|
||||
depth: 999
|
||||
}
|
||||
}
|
||||
|
||||
function pencil(pointer: Phaser.Input.Pointer) {
|
||||
// Check if zone is set
|
||||
if (!zoneEditorStore.zone) return
|
||||
|
||||
// Check if tool is pencil
|
||||
if (zoneEditorStore.tool !== 'pencil') return
|
||||
|
||||
// Check if draw mode is blocking tile or teleport
|
||||
if (zoneEditorStore.drawMode !== 'blocking tile' && zoneEditorStore.drawMode !== 'teleport') return
|
||||
|
||||
// Check if left mouse button is pressed
|
||||
if (!pointer.isDown) return
|
||||
|
||||
// Check if there is a tile
|
||||
const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
|
||||
if (!tile) return
|
||||
|
||||
// Check if event tile already exists on position
|
||||
const existingEventTile = zoneEditorStore.zone.zoneEventTiles.find((eventTile) => eventTile.positionX === tile.x && eventTile.positionY === tile.y)
|
||||
if (existingEventTile) return
|
||||
|
||||
// If teleport, check if there is a selected zone
|
||||
if (zoneEditorStore.drawMode === 'teleport' && !zoneEditorStore.teleportSettings.toZoneId) return
|
||||
|
||||
const newEventTile = {
|
||||
id: uuidv4(),
|
||||
zoneId: zoneEditorStore.zone.id,
|
||||
zone: zoneEditorStore.zone,
|
||||
type: zoneEditorStore.drawMode === 'blocking tile' ? ZoneEventTileType.BLOCK : ZoneEventTileType.TELEPORT,
|
||||
positionX: tile.x,
|
||||
positionY: tile.y,
|
||||
teleport:
|
||||
zoneEditorStore.drawMode === 'teleport'
|
||||
? {
|
||||
toZoneId: zoneEditorStore.teleportSettings.toZoneId,
|
||||
toPositionX: zoneEditorStore.teleportSettings.toPositionX,
|
||||
toPositionY: zoneEditorStore.teleportSettings.toPositionY,
|
||||
toRotation: zoneEditorStore.teleportSettings.toRotation
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
|
||||
zoneEditorStore.zone.zoneEventTiles = zoneEditorStore.zone.zoneEventTiles.concat(newEventTile as ZoneEventTile)
|
||||
}
|
||||
|
||||
function eraser(pointer: Phaser.Input.Pointer) {
|
||||
// Check if zone is set
|
||||
if (!zoneEditorStore.zone) return
|
||||
|
||||
// Check if tool is pencil
|
||||
if (zoneEditorStore.tool !== 'eraser') return
|
||||
|
||||
// Check if draw mode is blocking tile or teleport
|
||||
if (zoneEditorStore.eraserMode !== 'blocking tile' && zoneEditorStore.eraserMode !== 'teleport') return
|
||||
|
||||
// Check if left mouse button is pressed
|
||||
if (!pointer.isDown) return
|
||||
|
||||
// Check if there is a tile
|
||||
const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
|
||||
if (!tile) return
|
||||
|
||||
// Check if event tile already exists on position
|
||||
const existingEventTile = zoneEditorStore.zone.zoneEventTiles.find((eventTile) => eventTile.positionX === tile.x && eventTile.positionY === tile.y)
|
||||
if (!existingEventTile) return
|
||||
|
||||
// Remove existing event tile
|
||||
zoneEditorStore.zone.zoneEventTiles = zoneEditorStore.zone.zoneEventTiles.filter((eventTile) => eventTile.id !== existingEventTile.id)
|
||||
}
|
||||
|
||||
onBeforeMount(() => {
|
||||
scene.input.on(Phaser.Input.Events.POINTER_DOWN, pencil)
|
||||
scene.input.on(Phaser.Input.Events.POINTER_MOVE, pencil)
|
||||
scene.input.on(Phaser.Input.Events.POINTER_DOWN, eraser)
|
||||
scene.input.on(Phaser.Input.Events.POINTER_MOVE, eraser)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
scene.input.off(Phaser.Input.Events.POINTER_DOWN, pencil)
|
||||
scene.input.off(Phaser.Input.Events.POINTER_MOVE, pencil)
|
||||
scene.input.off(Phaser.Input.Events.POINTER_DOWN, eraser)
|
||||
scene.input.off(Phaser.Input.Events.POINTER_MOVE, eraser)
|
||||
})
|
||||
</script>
|
||||
206
src/components/gameMaster/zoneEditor/Objects.vue
Normal file
206
src/components/gameMaster/zoneEditor/Objects.vue
Normal file
@ -0,0 +1,206 @@
|
||||
<template>
|
||||
<SelectedZoneObject v-if="selectedZoneObject" :zoneObject="selectedZoneObject" @move="moveZoneObject" @rotate="rotateZoneObject" @delete="deleteZoneObject" />
|
||||
<Image v-for="object in zoneEditorStore.zone?.zoneObjects" v-bind="getImageProps(object)" @pointerup="() => (selectedZoneObject = object)" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { uuidv4 } from '@/utilities'
|
||||
import { calculateIsometricDepth, getTile, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
|
||||
import { Image, useScene } from 'phavuer'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import type { ZoneObject } from '@/types'
|
||||
import SelectedZoneObject from '@/components/gameMaster/zoneEditor/partials/SelectedZoneObject.vue'
|
||||
import { onBeforeMount, onBeforeUnmount, ref, watch } from 'vue'
|
||||
|
||||
const scene = useScene()
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
const selectedZoneObject = ref<ZoneObject | null>(null)
|
||||
const movingZoneObject = ref<ZoneObject | null>(null)
|
||||
|
||||
const props = defineProps<{
|
||||
tilemap: Phaser.Tilemaps.Tilemap
|
||||
}>()
|
||||
|
||||
function getImageProps(zoneObject: ZoneObject) {
|
||||
return {
|
||||
alpha: zoneObject.id === movingZoneObject.value?.id ? 0.5 : 1,
|
||||
depth: calculateIsometricDepth(zoneObject.positionX, zoneObject.positionY, zoneObject.object.frameWidth, zoneObject.object.frameHeight),
|
||||
tint: selectedZoneObject.value?.id === zoneObject.id ? 0x00ff00 : 0xffffff,
|
||||
x: tileToWorldX(props.tilemap, zoneObject.positionX, zoneObject.positionY),
|
||||
y: tileToWorldY(props.tilemap, zoneObject.positionX, zoneObject.positionY),
|
||||
flipX: zoneObject.isRotated,
|
||||
texture: zoneObject.object.id,
|
||||
originY: Number(zoneObject.object.originX),
|
||||
originX: Number(zoneObject.object.originY)
|
||||
}
|
||||
}
|
||||
|
||||
function pencil(pointer: Phaser.Input.Pointer) {
|
||||
// Check if zone is set
|
||||
if (!zoneEditorStore.zone) return
|
||||
|
||||
// Check if tool is pencil
|
||||
if (zoneEditorStore.tool !== 'pencil') return
|
||||
|
||||
// Check if draw mode is object
|
||||
if (zoneEditorStore.drawMode !== 'object') return
|
||||
|
||||
// Check if there is a selected object
|
||||
if (!zoneEditorStore.selectedObject) return
|
||||
|
||||
// Check if left mouse button is pressed
|
||||
if (!pointer.isDown) return
|
||||
|
||||
// Check if there is a tile
|
||||
const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
|
||||
if (!tile) return
|
||||
|
||||
// Check if object already exists on position
|
||||
const existingObject = zoneEditorStore.zone?.zoneObjects.find((object) => object.positionX === tile.x && object.positionY === tile.y)
|
||||
if (existingObject) return
|
||||
|
||||
const newObject = {
|
||||
id: uuidv4(),
|
||||
zoneId: zoneEditorStore.zone.id,
|
||||
zone: zoneEditorStore.zone,
|
||||
object: zoneEditorStore.selectedObject,
|
||||
depth: 0,
|
||||
isRotated: false,
|
||||
positionX: tile.x,
|
||||
positionY: tile.y
|
||||
}
|
||||
|
||||
// Add new object to zoneObjects
|
||||
zoneEditorStore.zone.zoneObjects = zoneEditorStore.zone.zoneObjects.concat(newObject as ZoneObject)
|
||||
}
|
||||
|
||||
function eraser(pointer: Phaser.Input.Pointer) {
|
||||
// Check if zone is set
|
||||
if (!zoneEditorStore.zone) return
|
||||
|
||||
// Check if tool is eraser
|
||||
if (zoneEditorStore.tool !== 'eraser') return
|
||||
|
||||
// Check if draw mode is object
|
||||
if (zoneEditorStore.eraserMode !== 'object') return
|
||||
|
||||
// Check if left mouse button is pressed
|
||||
if (!pointer.isDown) return
|
||||
|
||||
// Check if there is a tile
|
||||
const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
|
||||
if (!tile) return
|
||||
|
||||
// Check if object already exists on position
|
||||
const existingObject = zoneEditorStore.zone.zoneObjects.find((object) => object.positionX === tile.x && object.positionY === tile.y)
|
||||
if (!existingObject) return
|
||||
|
||||
// Remove existing object
|
||||
zoneEditorStore.zone.zoneObjects = zoneEditorStore.zone.zoneObjects.filter((object) => object.id !== existingObject.id)
|
||||
}
|
||||
|
||||
function moveZoneObject(id: string) {
|
||||
// Check if zone is set
|
||||
if (!zoneEditorStore.zone) return
|
||||
|
||||
movingZoneObject.value = zoneEditorStore.zone.zoneObjects.find((object) => object.id === id) as ZoneObject
|
||||
|
||||
function handlePointerMove(pointer: Phaser.Input.Pointer) {
|
||||
if (!movingZoneObject.value) return
|
||||
|
||||
const tile = getTile(props.tilemap, pointer.worldX, pointer.worldY)
|
||||
if (!tile) return
|
||||
|
||||
movingZoneObject.value.positionX = tile.x
|
||||
movingZoneObject.value.positionY = tile.y
|
||||
}
|
||||
|
||||
scene.input.on(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
|
||||
|
||||
function handlePointerUp() {
|
||||
scene.input.off(Phaser.Input.Events.POINTER_MOVE, handlePointerMove)
|
||||
movingZoneObject.value = null
|
||||
}
|
||||
|
||||
scene.input.on(Phaser.Input.Events.POINTER_UP, handlePointerUp)
|
||||
}
|
||||
|
||||
function rotateZoneObject(id: string) {
|
||||
// Check if zone is set
|
||||
if (!zoneEditorStore.zone) return
|
||||
|
||||
zoneEditorStore.zone.zoneObjects = zoneEditorStore.zone.zoneObjects.map((object) => {
|
||||
if (object.id === id) {
|
||||
return {
|
||||
...object,
|
||||
isRotated: !object.isRotated
|
||||
}
|
||||
}
|
||||
return object
|
||||
})
|
||||
}
|
||||
|
||||
function deleteZoneObject(id: string) {
|
||||
// Check if zone is set
|
||||
if (!zoneEditorStore.zone) return
|
||||
|
||||
zoneEditorStore.zone.zoneObjects = zoneEditorStore.zone.zoneObjects.filter((object) => object.id !== id)
|
||||
selectedZoneObject.value = null
|
||||
}
|
||||
|
||||
onBeforeMount(() => {
|
||||
scene.input.on(Phaser.Input.Events.POINTER_DOWN, pencil)
|
||||
scene.input.on(Phaser.Input.Events.POINTER_MOVE, pencil)
|
||||
scene.input.on(Phaser.Input.Events.POINTER_DOWN, eraser)
|
||||
scene.input.on(Phaser.Input.Events.POINTER_MOVE, eraser)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
scene.input.off(Phaser.Input.Events.POINTER_DOWN, pencil)
|
||||
scene.input.off(Phaser.Input.Events.POINTER_MOVE, pencil)
|
||||
scene.input.off(Phaser.Input.Events.POINTER_DOWN, eraser)
|
||||
scene.input.off(Phaser.Input.Events.POINTER_MOVE, eraser)
|
||||
})
|
||||
|
||||
// watch zoneEditorStore.objectList and update originX and originY of objects in zoneObjects
|
||||
watch(
|
||||
() => zoneEditorStore.objectList,
|
||||
(newObjects) => {
|
||||
if (!zoneEditorStore.zone) return
|
||||
|
||||
const updatedZoneObjects = zoneEditorStore.zone.zoneObjects.map((zoneObject) => {
|
||||
const updatedObject = newObjects.find((obj) => obj.id === zoneObject.object.id)
|
||||
if (updatedObject) {
|
||||
return {
|
||||
...zoneObject,
|
||||
object: {
|
||||
...zoneObject.object,
|
||||
originX: updatedObject.originX,
|
||||
originY: updatedObject.originY
|
||||
}
|
||||
}
|
||||
}
|
||||
return zoneObject
|
||||
})
|
||||
|
||||
// Update the zone with the new zoneObjects
|
||||
zoneEditorStore.setZone({
|
||||
...zoneEditorStore.zone,
|
||||
zoneObjects: updatedZoneObjects
|
||||
})
|
||||
|
||||
// Update selectedObject if it's set
|
||||
if (zoneEditorStore.selectedObject) {
|
||||
const updatedObject = newObjects.find((obj) => obj.id === zoneEditorStore.selectedObject?.id)
|
||||
if (updatedObject) {
|
||||
zoneEditorStore.setSelectedObject({
|
||||
...zoneEditorStore.selectedObject,
|
||||
originX: updatedObject.originX,
|
||||
originY: updatedObject.originY
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
)
|
||||
</script>
|
||||
140
src/components/gameMaster/zoneEditor/Tiles.vue
Normal file
140
src/components/gameMaster/zoneEditor/Tiles.vue
Normal file
@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<Controls :layer="tiles" :depth="0" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import config from '@/config'
|
||||
import { useScene } from 'phavuer'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import { onBeforeMount, onBeforeUnmount } from 'vue'
|
||||
import { createTileArray, getTile, placeTile, setAllTiles } from '@/composables/zoneComposable'
|
||||
import Controls from '@/components/utilities/Controls.vue'
|
||||
|
||||
const emit = defineEmits(['tilemap:create'])
|
||||
|
||||
const scene = useScene()
|
||||
const gameStore = useGameStore()
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
|
||||
const zoneTilemap = createTilemap()
|
||||
const tiles = createTileLayer()
|
||||
|
||||
function createTilemap() {
|
||||
const zoneData = new Phaser.Tilemaps.MapData({
|
||||
width: zoneEditorStore.zone?.width,
|
||||
height: zoneEditorStore.zone?.height,
|
||||
tileWidth: config.tile_size.x,
|
||||
tileHeight: config.tile_size.y,
|
||||
orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
|
||||
format: Phaser.Tilemaps.Formats.ARRAY_2D
|
||||
})
|
||||
const tilemap = new Phaser.Tilemaps.Tilemap(scene, zoneData)
|
||||
emit('tilemap:create', tilemap)
|
||||
return tilemap
|
||||
}
|
||||
|
||||
function createTileLayer() {
|
||||
const tilesetImages = gameStore.assets.filter((asset) => asset.group === 'tiles').map((asset, index) => zoneTilemap.addTilesetImage(asset.key, asset.key, config.tile_size.x, config.tile_size.y, 1, 2, index + 1, { x: 0, y: -config.tile_size.y }))
|
||||
tilesetImages.push(zoneTilemap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 1, 2, 0, { x: 0, y: -config.tile_size.y }))
|
||||
|
||||
const layer = zoneTilemap.createBlankLayer('tiles', tilesetImages as any, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer
|
||||
|
||||
layer.setDepth(0)
|
||||
layer.setCullPadding(2, 2)
|
||||
|
||||
return layer
|
||||
}
|
||||
|
||||
function pencil(pointer: Phaser.Input.Pointer) {
|
||||
// Check if zone is set
|
||||
if (!zoneEditorStore.zone) return
|
||||
|
||||
// Check if tool is pencil
|
||||
if (zoneEditorStore.tool !== 'pencil') return
|
||||
|
||||
// Check if draw mode is tile
|
||||
if (zoneEditorStore.drawMode !== 'tile') return
|
||||
|
||||
// Check if there is a selected tile
|
||||
if (!zoneEditorStore.selectedTile) return
|
||||
|
||||
// Check if left mouse button is pressed
|
||||
if (!pointer.isDown) return
|
||||
|
||||
// Check if there is a tile
|
||||
const tile = getTile(tiles, pointer.worldX, pointer.worldY)
|
||||
if (!tile) return
|
||||
|
||||
// Place tile
|
||||
placeTile(zoneTilemap, tiles, tile.x, tile.y, zoneEditorStore.selectedTile.id)
|
||||
|
||||
// Adjust zoneEditorStore.zone.tiles
|
||||
zoneEditorStore.zone.tiles[tile.y][tile.x] = zoneEditorStore.selectedTile.id
|
||||
}
|
||||
|
||||
function eraser(pointer: Phaser.Input.Pointer) {
|
||||
// Check if zone is set
|
||||
if (!zoneEditorStore.zone) return
|
||||
|
||||
// Check if tool is pencil
|
||||
if (zoneEditorStore.tool !== 'eraser') return
|
||||
|
||||
// Check if draw mode is tile
|
||||
if (zoneEditorStore.eraserMode !== 'tile') return
|
||||
|
||||
// Check if left mouse button is pressed
|
||||
if (!pointer.isDown) return
|
||||
|
||||
// Check if there is a tile
|
||||
const tile = getTile(tiles, pointer.worldX, pointer.worldY)
|
||||
if (!tile) return
|
||||
|
||||
// Place tile
|
||||
placeTile(zoneTilemap, tiles, tile.x, tile.y, 'blank_tile')
|
||||
|
||||
// Adjust zoneEditorStore.zone.tiles
|
||||
zoneEditorStore.zone.tiles[tile.y][tile.x] = 'blank_tile'
|
||||
}
|
||||
|
||||
function paint(pointer: Phaser.Input.Pointer) {
|
||||
// Check if zone is set
|
||||
if (!zoneEditorStore.zone) return
|
||||
|
||||
// Check if tool is pencil
|
||||
if (zoneEditorStore.tool !== 'paint') return
|
||||
|
||||
// Check if there is a selected tile
|
||||
if (!zoneEditorStore.selectedTile) return
|
||||
|
||||
// Check if left mouse button is pressed
|
||||
if (!pointer.isDown) return
|
||||
|
||||
// Set new tileArray with selected tile
|
||||
setAllTiles(zoneTilemap, tiles, createTileArray(zoneTilemap.width, zoneTilemap.height, zoneEditorStore.selectedTile.id))
|
||||
|
||||
// Adjust zoneEditorStore.zone.tiles
|
||||
zoneEditorStore.zone.tiles = createTileArray(zoneTilemap.width, zoneTilemap.height, zoneEditorStore.selectedTile.id)
|
||||
}
|
||||
|
||||
onBeforeMount(() => {
|
||||
if (!zoneEditorStore.zone?.tiles) {
|
||||
return
|
||||
}
|
||||
setAllTiles(zoneTilemap, tiles, zoneEditorStore.zone.tiles)
|
||||
|
||||
scene.input.on(Phaser.Input.Events.POINTER_MOVE, pencil)
|
||||
scene.input.on(Phaser.Input.Events.POINTER_MOVE, eraser)
|
||||
scene.input.on(Phaser.Input.Events.POINTER_DOWN, paint)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
scene.input.off(Phaser.Input.Events.POINTER_MOVE, pencil)
|
||||
scene.input.off(Phaser.Input.Events.POINTER_MOVE, eraser)
|
||||
scene.input.off(Phaser.Input.Events.POINTER_DOWN, paint)
|
||||
|
||||
zoneTilemap.destroyLayer('tiles')
|
||||
zoneTilemap.removeAllLayers()
|
||||
zoneTilemap.destroy()
|
||||
})
|
||||
</script>
|
||||
@ -1,215 +1,56 @@
|
||||
<template>
|
||||
<Toolbar :layer="tiles" @eraser="eraser" @pencil="pencil" @paint="paint" @clear="clear" @save="save" />
|
||||
<ZoneList v-if="zoneEditorStore.isZoneListModalShown" />
|
||||
<Tiles @tilemap:create="tileMap = $event" />
|
||||
<Objects v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
|
||||
<EventTiles v-if="tileMap" :tilemap="tileMap as Phaser.Tilemaps.Tilemap" />
|
||||
|
||||
<template v-if="zoneEditorStore.zone">
|
||||
<Controls :layer="tiles as TilemapLayer" />
|
||||
<Toolbar @save="save" />
|
||||
|
||||
<Tiles />
|
||||
<Objects />
|
||||
<ZoneList />
|
||||
<TileList />
|
||||
<ObjectList />
|
||||
|
||||
<ZoneSettings />
|
||||
<TeleportModal v-if="shouldShowTeleportModal" />
|
||||
|
||||
<Container :depth="2">
|
||||
<Image v-for="object in zoneObjects" :depth="calculateIsometricDepth(object.positionX, object.positionY, 0)" :key="object.id" v-bind="getObjectImageProps(object)" @pointerup="() => setSelectedZoneObject(object)" :flipX="object.isRotated" />
|
||||
</Container>
|
||||
|
||||
<Container :depth="3">
|
||||
<Image v-for="tile in zoneEventTiles" :key="tile.id" v-bind="getEventTileImageProps(tile)" />
|
||||
</Container>
|
||||
|
||||
<SelectedZoneObject v-if="zoneEditorStore.selectedZoneObject" @update_depth="updateZoneObjectDepth" @delete="deleteZoneObject" @move="handleMove" @rotate="handleRotate" />
|
||||
</template>
|
||||
<ZoneSettings />
|
||||
<TeleportModal />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onBeforeMount, onMounted, onUnmounted, ref, watch } from 'vue'
|
||||
import { Container, Image, useScene } from 'phavuer'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { onBeforeMount, onUnmounted, ref } from 'vue'
|
||||
import { useScene } from 'phavuer'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import { calculateIsometricDepth, loadAssets, placeTile, setAllTiles, sortByIsometricDepth, tileToWorldX, tileToWorldY } from '@/composables/zoneComposable'
|
||||
import { ZoneEventTileType, type ZoneObject, type ZoneEventTile, type Zone } from '@/types'
|
||||
import { uuidv4 } from '@/utilities'
|
||||
import config from '@/config'
|
||||
import { loadAssets } from '@/composables/zoneComposable'
|
||||
import { type Zone } from '@/types'
|
||||
|
||||
// Components
|
||||
import Controls from '@/components/utilities/Controls.vue'
|
||||
import Toolbar from '@/components/gameMaster/zoneEditor/partials/Toolbar.vue'
|
||||
import Tiles from '@/components/gameMaster/zoneEditor/partials/TileList.vue'
|
||||
import SelectedZoneObject from '@/components/gameMaster/zoneEditor/partials/SelectedZoneObject.vue'
|
||||
import TileList from '@/components/gameMaster/zoneEditor/partials/TileList.vue'
|
||||
import ObjectList from '@/components/gameMaster/zoneEditor/partials/ObjectList.vue'
|
||||
import ZoneSettings from '@/components/gameMaster/zoneEditor/partials/ZoneSettings.vue'
|
||||
import Objects from '@/components/gameMaster/zoneEditor/partials/ObjectList.vue'
|
||||
import ZoneList from '@/components/gameMaster/zoneEditor/partials/ZoneList.vue'
|
||||
import TeleportModal from '@/components/gameMaster/zoneEditor/partials/TeleportModal.vue'
|
||||
import Tilemap = Phaser.Tilemaps.Tilemap
|
||||
import TilemapLayer = Phaser.Tilemaps.TilemapLayer
|
||||
|
||||
/**
|
||||
* @TODO:
|
||||
* Clean all the code in this file
|
||||
*/
|
||||
import Tiles from '@/components/gameMaster/zoneEditor/Tiles.vue'
|
||||
import Objects from '@/components/gameMaster/zoneEditor/Objects.vue'
|
||||
import EventTiles from '@/components/gameMaster/zoneEditor/EventTiles.vue'
|
||||
|
||||
const scene = useScene()
|
||||
const gameStore = useGameStore()
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
|
||||
const { objectList, zone, selectedTile, selectedObject, selectedZoneObject, eraserMode, drawMode } = storeToRefs(zoneEditorStore)
|
||||
|
||||
const zoneTilemap = createTilemap()
|
||||
const tiles = createTileLayer()
|
||||
const zoneObjects = ref<ZoneObject[]>([])
|
||||
const zoneEventTiles = ref<ZoneEventTile[]>([])
|
||||
let tileArray = createTileArray()
|
||||
|
||||
const shouldShowTeleportModal = computed(() => zoneEditorStore.tool === 'pencil' && drawMode.value === 'teleport')
|
||||
|
||||
function createTilemap() {
|
||||
const zoneData = new Phaser.Tilemaps.MapData({
|
||||
width: zone.value?.width ?? 10,
|
||||
height: zone.value?.height ?? 10,
|
||||
tileWidth: config.tile_size.x,
|
||||
tileHeight: config.tile_size.y,
|
||||
orientation: Phaser.Tilemaps.Orientation.ISOMETRIC,
|
||||
format: Phaser.Tilemaps.Formats.ARRAY_2D
|
||||
})
|
||||
const tilemap = new Phaser.Tilemaps.Tilemap(scene, zoneData)
|
||||
return tilemap
|
||||
}
|
||||
|
||||
function createTileLayer() {
|
||||
const tilesetImages = gameStore.assets.filter((asset) => asset.group === 'tiles').map((asset, index) => zoneTilemap.addTilesetImage(asset.key, asset.key, config.tile_size.x, config.tile_size.y, 1, 2, index + 1, { x: 0, y: -config.tile_size.y }))
|
||||
tilesetImages.push(zoneTilemap.addTilesetImage('blank_tile', 'blank_tile', config.tile_size.x, config.tile_size.y, 1, 2, 0, { x: 0, y: -config.tile_size.y }))
|
||||
|
||||
const layer = zoneTilemap.createBlankLayer('tiles', tilesetImages as any, 0, config.tile_size.y) as Phaser.Tilemaps.TilemapLayer
|
||||
|
||||
layer.setDepth(0)
|
||||
|
||||
return layer
|
||||
}
|
||||
|
||||
function createTileArray() {
|
||||
return Array.from({ length: zoneTilemap.height || 0 }, () => Array.from({ length: zoneTilemap.width || 0 }, () => 'blank_tile'))
|
||||
}
|
||||
|
||||
function getObjectImageProps(object: ZoneObject) {
|
||||
return {
|
||||
tint: selectedZoneObject.value?.id === object.id ? 0x00ff00 : 0xffffff,
|
||||
x: tileToWorldX(zoneTilemap as any, object.positionX, object.positionY),
|
||||
y: tileToWorldY(zoneTilemap as any, object.positionX, object.positionY),
|
||||
texture: object.object.id,
|
||||
originY: Number(object.object.originX),
|
||||
originX: Number(object.object.originY)
|
||||
}
|
||||
}
|
||||
|
||||
function getEventTileImageProps(tile: ZoneEventTile) {
|
||||
return {
|
||||
x: tileToWorldX(zoneTilemap as any, tile.positionX, tile.positionY),
|
||||
y: tileToWorldY(zoneTilemap as any, tile.positionX, tile.positionY),
|
||||
texture: tile.type
|
||||
}
|
||||
}
|
||||
|
||||
function eraser(tile: Phaser.Tilemaps.Tile) {
|
||||
if (eraserMode.value === 'tile') {
|
||||
placeTile(zoneTilemap as Tilemap, tiles as TilemapLayer, tile.x, tile.y, 'blank_tile')
|
||||
tileArray[tile.y][tile.x] = 'blank_tile'
|
||||
} else if (eraserMode.value === 'object') {
|
||||
zoneObjects.value = zoneObjects.value.filter((object) => object.positionX !== tile.x || object.positionY !== tile.y)
|
||||
} else if (eraserMode.value === 'blocking tile' || eraserMode.value === 'teleport') {
|
||||
zoneEventTiles.value = zoneEventTiles.value.filter((eventTile) => eventTile.positionX !== tile.x || eventTile.positionY !== tile.y || (eraserMode.value === 'teleport' && eventTile.type !== ZoneEventTileType.TELEPORT))
|
||||
}
|
||||
}
|
||||
|
||||
function pencil(tile: Phaser.Tilemaps.Tile) {
|
||||
if (drawMode.value === 'tile' && selectedTile.value) {
|
||||
placeTile(zoneTilemap as Tilemap, tiles as TilemapLayer, tile.x, tile.y, selectedTile.value.id)
|
||||
tileArray[tile.y][tile.x] = selectedTile.value.id
|
||||
} else if (drawMode.value === 'object' && selectedObject.value) {
|
||||
addZoneObject(tile)
|
||||
} else if (drawMode.value === 'blocking tile' || drawMode.value === 'teleport') {
|
||||
addZoneEventTile(tile)
|
||||
}
|
||||
}
|
||||
|
||||
function addZoneObject(tile: Phaser.Tilemaps.Tile) {
|
||||
// Check if object already exists on position
|
||||
const existingObject = zoneObjects.value.find((object) => object.positionX === tile.x && object.positionY === tile.y)
|
||||
if (existingObject) return
|
||||
|
||||
const newObject = {
|
||||
id: uuidv4(),
|
||||
zoneId: zone.value!.id,
|
||||
zone: zone.value!,
|
||||
objectId: selectedObject.value!.id,
|
||||
object: selectedObject.value!,
|
||||
depth: 0,
|
||||
isRotated: false,
|
||||
positionX: tile.x,
|
||||
positionY: tile.y
|
||||
}
|
||||
// Add new object to zoneObjects
|
||||
zoneObjects.value = zoneObjects.value.concat(newObject)
|
||||
}
|
||||
|
||||
function addZoneEventTile(tile: Phaser.Tilemaps.Tile) {
|
||||
// Check if event tile already exists on position
|
||||
const existingEventTile = zoneEventTiles.value.find((eventTile) => eventTile.positionX === tile.x && eventTile.positionY === tile.y)
|
||||
if (existingEventTile) return
|
||||
|
||||
const newEventTile = {
|
||||
id: uuidv4(),
|
||||
zoneId: zone.value!.id,
|
||||
zone: zone.value!,
|
||||
type: drawMode.value === 'blocking tile' ? ZoneEventTileType.BLOCK : ZoneEventTileType.TELEPORT,
|
||||
positionX: tile.x,
|
||||
positionY: tile.y,
|
||||
teleport:
|
||||
drawMode.value === 'teleport'
|
||||
? {
|
||||
toZoneId: zoneEditorStore.teleportSettings.toZoneId,
|
||||
toPositionX: zoneEditorStore.teleportSettings.toPositionX,
|
||||
toPositionY: zoneEditorStore.teleportSettings.toPositionY,
|
||||
toRotation: zoneEditorStore.teleportSettings.toRotation
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
zoneEventTiles.value = zoneEventTiles.value.concat(newEventTile as any)
|
||||
}
|
||||
|
||||
function paint() {
|
||||
if (!selectedTile.value) return
|
||||
|
||||
// Ensure tileArray is initialized with correct dimensions
|
||||
if (!tileArray || tileArray.length !== zoneTilemap.height) {
|
||||
tileArray = Array.from({ length: zoneTilemap.height }, () => Array.from({ length: zoneTilemap.width }, () => 'blank_tile'))
|
||||
}
|
||||
|
||||
// Set all tiles in the tilemap to the selected tile's id
|
||||
for (let y = 0; y < zoneTilemap.height; y++) {
|
||||
if (!tileArray[y]) {
|
||||
tileArray[y] = Array(zoneTilemap.width).fill('blank_tile')
|
||||
}
|
||||
for (let x = 0; x < zoneTilemap.width; x++) {
|
||||
placeTile(zoneTilemap as Tilemap, tiles as TilemapLayer, x, y, selectedTile.value.id)
|
||||
tileArray[y][x] = selectedTile.value.id
|
||||
}
|
||||
}
|
||||
}
|
||||
const tileMap = ref(null as Phaser.Tilemaps.Tilemap | null)
|
||||
|
||||
function save() {
|
||||
if (!zone.value) return
|
||||
if (!zoneEditorStore.zone) return
|
||||
|
||||
const data = {
|
||||
zoneId: zone.value.id,
|
||||
zoneId: zoneEditorStore.zone.id,
|
||||
name: zoneEditorStore.zoneSettings.name,
|
||||
width: zoneEditorStore.zoneSettings.width,
|
||||
height: zoneEditorStore.zoneSettings.height,
|
||||
tiles: tileArray,
|
||||
pvp: zone.value.pvp,
|
||||
zoneEventTiles: zoneEventTiles.value.map(({ id, zoneId, type, positionX, positionY, teleport }) => ({ id, zoneId, type, positionX, positionY, teleport })),
|
||||
zoneObjects: zoneObjects.value.map(({ id, zoneId, objectId, depth, isRotated, positionX, positionY }) => ({ id, zoneId, objectId, depth, isRotated, positionX, positionY }))
|
||||
tiles: zoneEditorStore.zone.tiles,
|
||||
pvp: zoneEditorStore.zone.pvp,
|
||||
zoneEffects: zoneEditorStore.zone.zoneEffects.map(({ id, zoneId, effect, strength }) => ({ id, zoneId, effect, strength })),
|
||||
zoneEventTiles: zoneEditorStore.zone.zoneEventTiles.map(({ id, zoneId, type, positionX, positionY, teleport }) => ({ id, zoneId, type, positionX, positionY, teleport })),
|
||||
zoneObjects: zoneEditorStore.zone.zoneObjects.map(({ id, zoneId, objectId, depth, isRotated, positionX, positionY }) => ({ id, zoneId, objectId, depth, isRotated, positionX, positionY }))
|
||||
}
|
||||
|
||||
if (zoneEditorStore.isSettingsModalShown) {
|
||||
@ -217,111 +58,16 @@ function save() {
|
||||
}
|
||||
|
||||
gameStore.connection?.emit('gm:zone_editor:zone:update', data, (response: Zone) => {
|
||||
console.log('zone updated')
|
||||
zoneEditorStore.setZone(response)
|
||||
})
|
||||
}
|
||||
|
||||
function clear() {
|
||||
for (let y = 0; y < zoneTilemap.height; y++) {
|
||||
if (!tileArray[y]) {
|
||||
tileArray[y] = Array(zoneTilemap.width).fill('blank_tile')
|
||||
}
|
||||
for (let x = 0; x < zoneTilemap.width; x++) {
|
||||
placeTile(zoneTilemap as Tilemap, tiles as TilemapLayer, x, y, 'blank_tile')
|
||||
tileArray[y][x] = 'blank_tile'
|
||||
}
|
||||
}
|
||||
|
||||
zoneEventTiles.value = []
|
||||
zoneObjects.value = []
|
||||
}
|
||||
|
||||
function updateZoneObjectDepth(depth: number) {
|
||||
zoneObjects.value = zoneObjects.value.map((object) => (object.id === selectedZoneObject.value?.id ? { ...object, depth } : object))
|
||||
}
|
||||
|
||||
function deleteZoneObject(objectId: string) {
|
||||
zoneObjects.value = zoneObjects.value.filter((object) => object.id !== objectId)
|
||||
}
|
||||
|
||||
function handleMove() {
|
||||
console.log('move btn clicked')
|
||||
}
|
||||
|
||||
function handleRotate(objectId: string) {
|
||||
const object = zoneObjects.value.find((obj) => obj.id === objectId)
|
||||
if (object) {
|
||||
object.isRotated = !object.isRotated
|
||||
}
|
||||
}
|
||||
|
||||
// watch zoneEditorStore.objectList and update originX and originY of objects in zoneObjects
|
||||
watch(
|
||||
objectList,
|
||||
(newObjects) => {
|
||||
zoneObjects.value = zoneObjects.value.map((zoneObject) => {
|
||||
const updatedObject = newObjects.find((obj) => obj.id === zoneObject.objectId)
|
||||
if (updatedObject) {
|
||||
return {
|
||||
...zoneObject,
|
||||
object: {
|
||||
...zoneObject.object,
|
||||
originX: updatedObject.originX,
|
||||
originY: updatedObject.originY
|
||||
}
|
||||
}
|
||||
}
|
||||
return zoneObject
|
||||
})
|
||||
|
||||
// Update selectedObject if it exists
|
||||
if (zoneEditorStore.selectedObject) {
|
||||
const updatedObject = newObjects.find((obj) => obj.id === zoneEditorStore.selectedObject?.id)
|
||||
if (updatedObject) {
|
||||
zoneEditorStore.setSelectedObject({
|
||||
...zoneEditorStore.selectedObject,
|
||||
originX: updatedObject.originX,
|
||||
originY: updatedObject.originY
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
{ deep: true }
|
||||
)
|
||||
|
||||
const setSelectedZoneObject = (zoneObject: ZoneObject | null) => {
|
||||
if (!zoneObject) return
|
||||
if (zoneEditorStore.tool !== 'move') return
|
||||
zoneEditorStore.setSelectedZoneObject(zoneObject)
|
||||
}
|
||||
|
||||
onBeforeMount(async () => {
|
||||
await gameStore.fetchAllZoneAssets()
|
||||
await loadAssets(scene)
|
||||
|
||||
tileArray.forEach((row, y) => row.forEach((_, x) => placeTile(zoneTilemap, tiles, x, y, 'blank_tile')))
|
||||
|
||||
if (zone.value?.tiles) {
|
||||
setAllTiles(zoneTilemap, tiles, zone.value.tiles)
|
||||
tileArray = zone.value.tiles.map((row) => row.map((tileId) => tileId || 'blank_tile'))
|
||||
}
|
||||
|
||||
zoneEventTiles.value = zone.value?.zoneEventTiles ?? []
|
||||
zoneObjects.value = sortByIsometricDepth(zone.value?.zoneObjects ?? [])
|
||||
|
||||
// Center camera
|
||||
const centerY = (zoneTilemap.height * zoneTilemap.tileHeight) / 2
|
||||
const centerX = (zoneTilemap.width * zoneTilemap.tileWidth) / 2
|
||||
scene.cameras.main.centerOn(centerX, centerY)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
zoneEventTiles.value = []
|
||||
zoneObjects.value = []
|
||||
tiles?.destroy()
|
||||
zoneTilemap?.removeAllLayers()
|
||||
zoneTilemap?.destroy()
|
||||
zoneEditorStore.reset()
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<Modal :isModalOpen="true" @modal:close="() => zoneEditorStore.toggleCreateZoneModal()" :modal-width="300" :modal-height="400" :is-resizable="false">
|
||||
<template #modalHeader>
|
||||
<h3 class="m-0 font-medium shrink-0 text-gray-300">Create new zone</h3>
|
||||
<h3 class="m-0 font-medium shrink-0 text-white">Create new zone</h3>
|
||||
</template>
|
||||
|
||||
<template #modalBody>
|
||||
|
||||
@ -2,21 +2,17 @@
|
||||
<Teleport to="body">
|
||||
<Modal :isModalOpen="zoneEditorStore.isObjectListModalShown" :modal-width="645" :modal-height="260" @modal:close="() => (zoneEditorStore.isObjectListModalShown = false)">
|
||||
<template #modalHeader>
|
||||
<h3 class="text-lg text-gray-300">Objects</h3>
|
||||
<div class="flex">
|
||||
<h3 class="text-lg text-white">Objects</h3>
|
||||
</template>
|
||||
<template #modalBody>
|
||||
<div class="flex pt-4 pl-4">
|
||||
<div class="w-full flex gap-1.5 flex-row">
|
||||
<div>
|
||||
<label class="mb-1.5 font-titles hidden" for="search">Search...</label>
|
||||
<input @mousedown.stop class="input-field" type="text" name="search" placeholder="Search" v-model="searchQuery" />
|
||||
</div>
|
||||
<!-- <div>-->
|
||||
<!-- <label class="mb-1.5 font-titles hidden" for="depth">Depth</label>-->
|
||||
<!-- <input v-model="objectDepth" @mousedown.stop class="input-field" type="number" name="depth" placeholder="Depth" />-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #modalBody>
|
||||
<div class="flex flex-col h-full p-4">
|
||||
<div class="mb-4 flex flex-wrap gap-2">
|
||||
<button v-for="tag in uniqueTags" :key="tag" @click="toggleTag(tag)" class="btn-cyan" :class="{ 'opacity-50': !selectedTags.includes(tag) }">
|
||||
|
||||
@ -1,10 +1,6 @@
|
||||
<template>
|
||||
<div class="flex flex-col items-center py-5 px-3 fixed bottom-14 right-0" v-if="zoneEditorStore.selectedZoneObject">
|
||||
<div class="flex flex-col items-center py-5 px-3 fixed bottom-14 right-0">
|
||||
<div class="self-end mt-2 flex gap-2">
|
||||
<div>
|
||||
<label class="mb-1.5 font-titles block text-sm text-gray-700 hidden" for="depth">Depth</label>
|
||||
<input v-model="objectDepth" @mousedown.stop @input="handleDepthInput" class="input-field max-w-24 px-2 py-1 border rounded" type="number" name="depth" placeholder="Depth" />
|
||||
</div>
|
||||
<button @mousedown.stop @click="handleDelete" class="btn-red py-1.5 px-4">
|
||||
<img src="/assets/icons/trashcan.svg" class="w-4 h-4" alt="Delete" />
|
||||
</button>
|
||||
@ -15,38 +11,23 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import type { ZoneObject } from '@/types'
|
||||
|
||||
const emit = defineEmits(['update_depth', 'move', 'delete', 'rotate'])
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
const props = defineProps<{
|
||||
zoneObject: ZoneObject
|
||||
}>()
|
||||
|
||||
const objectDepth = ref(zoneEditorStore.objectDepth)
|
||||
const emit = defineEmits(['move', 'rotate', 'delete'])
|
||||
|
||||
watch(
|
||||
() => zoneEditorStore.selectedZoneObject,
|
||||
(selectedZoneObject) => {
|
||||
objectDepth.value = selectedZoneObject?.depth ?? 0
|
||||
}
|
||||
)
|
||||
|
||||
const handleDepthInput = () => {
|
||||
const depth = parseFloat(objectDepth.value.toString())
|
||||
if (!isNaN(depth)) {
|
||||
emit('update_depth', depth)
|
||||
}
|
||||
const handleMove = () => {
|
||||
emit('move', props.zoneObject.id)
|
||||
}
|
||||
|
||||
const handleRotate = () => {
|
||||
emit('rotate', zoneEditorStore.selectedZoneObject?.id)
|
||||
}
|
||||
|
||||
const handleMove = () => {
|
||||
emit('move')
|
||||
emit('rotate', props.zoneObject.id)
|
||||
}
|
||||
|
||||
const handleDelete = () => {
|
||||
emit('delete', zoneEditorStore.selectedZoneObject?.id)
|
||||
zoneEditorStore.setSelectedZoneObject(null)
|
||||
emit('delete', props.zoneObject.id)
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,9 +1,8 @@
|
||||
<template>
|
||||
<Modal :is-modal-open="true" @modal:close="() => zoneEditorStore.setTool('move')" :modal-width="300" :modal-height="350" :is-resizable="false">
|
||||
<Modal :is-modal-open="showTeleportModal" @modal:close="() => zoneEditorStore.setTool('move')" :modal-width="300" :modal-height="350" :is-resizable="false">
|
||||
<template #modalHeader>
|
||||
<h3 class="m-0 font-medium shrink-0 text-gray-300">Teleport settings</h3>
|
||||
<h3 class="m-0 font-medium shrink-0 text-white">Teleport settings</h3>
|
||||
</template>
|
||||
|
||||
<template #modalBody>
|
||||
<div class="m-4">
|
||||
<form method="post" @submit.prevent="" class="inline">
|
||||
@ -40,12 +39,13 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, watch } from 'vue'
|
||||
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'
|
||||
|
||||
const showTeleportModal = computed(() => zoneEditorStore.tool === 'pencil' && zoneEditorStore.drawMode === 'teleport')
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
const gameStore = useGameStore()
|
||||
|
||||
|
||||
@ -2,8 +2,10 @@
|
||||
<Teleport to="body">
|
||||
<Modal :isModalOpen="zoneEditorStore.isTileListModalShown" :modal-width="645" :modal-height="600" @modal:close="() => (zoneEditorStore.isTileListModalShown = false)">
|
||||
<template #modalHeader>
|
||||
<h3 class="text-lg text-gray-300">Tiles</h3>
|
||||
<div class="flex">
|
||||
<h3 class="text-lg text-white">Tiles</h3>
|
||||
</template>
|
||||
<template #modalBody>
|
||||
<div class="flex pt-4 pl-4">
|
||||
<div class="w-full flex gap-1.5 flex-row">
|
||||
<div>
|
||||
<label class="mb-1.5 font-titles hidden" for="search">Search...</label>
|
||||
@ -11,8 +13,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #modalBody>
|
||||
<div class="flex flex-col h-full p-4">
|
||||
<div class="mb-4 flex flex-wrap gap-2">
|
||||
<button v-for="tag in uniqueTags" :key="tag" @click="toggleTag(tag)" class="btn-cyan" :class="{ 'opacity-50': !selectedTags.includes(tag) }">
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="flex justify-center p-5">
|
||||
<div class="toolbar fixed bottom-0 left-0 m-3 rounded flex bg-gray solid border-solid border-2 border-gray-500 text-gray-300 p-1.5 px-3 h-10">
|
||||
<div ref="clickOutsideElement" class="tools flex gap-2.5" v-if="zoneEditorStore.zone">
|
||||
<div ref="toolbar" class="tools flex gap-2.5" v-if="zoneEditorStore.zone">
|
||||
<button class="flex justify-center items-center min-w-10 p-0 relative" :class="{ 'border-0 border-b-[3px] border-solid border-cyan gap-2.5': zoneEditorStore.tool === 'move' }" @click="handleClick('move')">
|
||||
<img class="invert w-5 h-5" src="/assets/icons/zoneEditor/move.svg" alt="Move camera" /> <span :class="{ 'ml-2.5': zoneEditorStore.tool !== 'move' }">(M)</span>
|
||||
</button>
|
||||
@ -83,22 +83,15 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onBeforeUnmount, onMounted, ref } from 'vue'
|
||||
import { useScene } from 'phavuer'
|
||||
import { getTile } from '@/composables/zoneComposable'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import { onClickOutside } from '@vueuse/core'
|
||||
import TilemapLayer = Phaser.Tilemaps.TilemapLayer
|
||||
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
|
||||
const props = defineProps({
|
||||
layer: Phaser.Tilemaps.TilemapLayer
|
||||
})
|
||||
const scene = useScene()
|
||||
const emit = defineEmits(['move', 'eraser', 'pencil', 'paint', 'save', 'clear'])
|
||||
const emit = defineEmits(['save', 'clear'])
|
||||
|
||||
// track when clicked outside of toolbar items
|
||||
const clickOutsideElement = ref(null)
|
||||
const toolbar = ref(null)
|
||||
|
||||
// track select state
|
||||
let selectPencilOpen = ref(false)
|
||||
@ -119,47 +112,6 @@ function setEraserMode(value: string) {
|
||||
selectEraserOpen.value = false
|
||||
}
|
||||
|
||||
function clickTile(pointer: Phaser.Input.Pointer) {
|
||||
if (zoneEditorStore.tool !== 'eraser' && zoneEditorStore.tool !== 'pencil' && zoneEditorStore.tool !== 'paint') return
|
||||
if (pointer.event.shiftKey) return
|
||||
|
||||
const px = scene.cameras.main.worldView.x + pointer.x
|
||||
const py = scene.cameras.main.worldView.y + pointer.y
|
||||
|
||||
const pointer_tile = getTile(px, py, props.layer as TilemapLayer) as Phaser.Tilemaps.Tile
|
||||
if (!pointer_tile) return
|
||||
|
||||
if (zoneEditorStore.tool === 'eraser') {
|
||||
emit('eraser', pointer_tile)
|
||||
}
|
||||
|
||||
if (zoneEditorStore.tool === 'pencil') {
|
||||
emit('pencil', pointer_tile)
|
||||
}
|
||||
|
||||
if (zoneEditorStore.tool === 'paint') {
|
||||
emit('paint', pointer_tile)
|
||||
}
|
||||
}
|
||||
|
||||
function drawTiles(pointer: Phaser.Input.Pointer) {
|
||||
if (!pointer.isDown) return
|
||||
clickTile(pointer)
|
||||
}
|
||||
|
||||
scene.input.on(Phaser.Input.Events.POINTER_UP, clickTile)
|
||||
scene.input.on(Phaser.Input.Events.POINTER_MOVE, drawTiles)
|
||||
|
||||
onMounted(() => {
|
||||
addEventListener('keydown', initKeyShortcuts)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
scene.input.off(Phaser.Input.Events.POINTER_UP, clickTile)
|
||||
scene.input.off(Phaser.Input.Events.POINTER_MOVE, drawTiles)
|
||||
removeEventListener('keydown', initKeyShortcuts)
|
||||
})
|
||||
|
||||
function handleClick(tool: string) {
|
||||
if (tool === 'settings') {
|
||||
zoneEditorStore.toggleSettingsModal()
|
||||
@ -172,21 +124,23 @@ function handleClick(tool: string) {
|
||||
}
|
||||
|
||||
function cycleToolMode(tool: 'pencil' | 'eraser') {
|
||||
const modes = ['tile', 'object', 'teleport', 'blocking tile'];
|
||||
const currentMode = tool === 'pencil' ? zoneEditorStore.drawMode : zoneEditorStore.eraserMode;
|
||||
const currentIndex = modes.indexOf(currentMode);
|
||||
const nextIndex = (currentIndex + 1) % modes.length;
|
||||
const nextMode = modes[nextIndex];
|
||||
const modes = ['tile', 'object', 'teleport', 'blocking tile']
|
||||
const currentMode = tool === 'pencil' ? zoneEditorStore.drawMode : zoneEditorStore.eraserMode
|
||||
const currentIndex = modes.indexOf(currentMode)
|
||||
const nextIndex = (currentIndex + 1) % modes.length
|
||||
const nextMode = modes[nextIndex]
|
||||
|
||||
if (tool === 'pencil') {
|
||||
setDrawMode(nextMode);
|
||||
setDrawMode(nextMode)
|
||||
} else {
|
||||
setEraserMode(nextMode);
|
||||
setEraserMode(nextMode)
|
||||
}
|
||||
}
|
||||
|
||||
function initKeyShortcuts(event: KeyboardEvent) {
|
||||
// Check if zone is set
|
||||
if (!zoneEditorStore.zone) return
|
||||
|
||||
// prevent if focused on composables
|
||||
if (document.activeElement?.tagName === 'INPUT') return
|
||||
|
||||
@ -199,19 +153,26 @@ function initKeyShortcuts(event: KeyboardEvent) {
|
||||
}
|
||||
|
||||
if (keyActions.hasOwnProperty(event.key)) {
|
||||
const tool = keyActions[event.key];
|
||||
const tool = keyActions[event.key]
|
||||
if ((tool === 'pencil' || tool === 'eraser') && zoneEditorStore.tool === tool) {
|
||||
cycleToolMode(tool);
|
||||
cycleToolMode(tool)
|
||||
} else {
|
||||
handleClick(tool);
|
||||
handleClick(tool)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onClickOutside(clickOutsideElement, handleClickOutside)
|
||||
|
||||
function handleClickOutside() {
|
||||
selectPencilOpen.value = false
|
||||
selectEraserOpen.value = false
|
||||
}
|
||||
onClickOutside(toolbar, handleClickOutside)
|
||||
|
||||
onMounted(() => {
|
||||
addEventListener('keydown', initKeyShortcuts)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
removeEventListener('keydown', initKeyShortcuts)
|
||||
})
|
||||
</script>
|
||||
|
||||
@ -1,31 +1,28 @@
|
||||
<template>
|
||||
<CreateZone v-if="zoneEditorStore.isCreateZoneModalShown" />
|
||||
|
||||
<Teleport to="body">
|
||||
<Modal @modal:close="() => zoneEditorStore.toggleZoneListModal()" :is-resizable="false" :is-modal-open="true" :modal-width="300" :modal-height="360">
|
||||
<template #modalHeader>
|
||||
<h3 class="text-lg text-gray-300">Zones</h3>
|
||||
</template>
|
||||
<template #modalBody>
|
||||
<div class="my-4 mx-auto">
|
||||
<div class="text-center mb-4 px-2 flex gap-2.5">
|
||||
<button class="btn-cyan py-1.5 min-w-[calc(50%_-_5px)]" @click="fetchZones">Refresh</button>
|
||||
<button class="btn-cyan py-1.5 min-w-[calc(50%_-_5px)]" @click="() => zoneEditorStore.toggleCreateZoneModal()">New</button>
|
||||
</div>
|
||||
<div class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap" v-for="(zone, index) in zoneEditorStore.zoneList" :key="zone.id">
|
||||
<div class="absolute left-0 top-0 w-full h-px bg-cyan-200" v-if="index === 0"></div>
|
||||
<div class="flex gap-3 items-center w-full" @click="() => loadZone(zone.id)">
|
||||
<span>{{ zone.name }}</span>
|
||||
<span class="ml-auto gap-1 flex">
|
||||
<button class="btn-red py-0.5 px-2.5 z-50" @click.stop="() => deleteZone(zone.id)">X</button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
|
||||
</div>
|
||||
<Modal :is-modal-open="zoneEditorStore.isZoneListModalShown" @modal:close="() => zoneEditorStore.toggleZoneListModal()" :is-resizable="false" :modal-width="300" :modal-height="360">
|
||||
<template #modalHeader>
|
||||
<h3 class="text-lg text-white">Zones</h3>
|
||||
</template>
|
||||
<template #modalBody>
|
||||
<div class="my-4 mx-auto">
|
||||
<div class="text-center mb-4 px-2 flex gap-2.5">
|
||||
<button class="btn-cyan py-1.5 min-w-[calc(50%_-_5px)]" @click="fetchZones">Refresh</button>
|
||||
<button class="btn-cyan py-1.5 min-w-[calc(50%_-_5px)]" @click="() => zoneEditorStore.toggleCreateZoneModal()">New</button>
|
||||
</div>
|
||||
</template>
|
||||
</Modal>
|
||||
</Teleport>
|
||||
<div class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap" v-for="(zone, index) in zoneEditorStore.zoneList" :key="zone.id">
|
||||
<div class="absolute left-0 top-0 w-full h-px bg-gray-500" v-if="index === 0"></div>
|
||||
<div class="flex gap-3 items-center w-full" @click="() => loadZone(zone.id)">
|
||||
<span>{{ zone.name }}</span>
|
||||
<span class="ml-auto gap-1 flex">
|
||||
<button class="btn-red w-11 h-11 z-50" @click.stop="() => deleteZone(zone.id)">X</button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@ -1,24 +1,28 @@
|
||||
<template>
|
||||
<Modal :is-modal-open="zoneEditorStore.isSettingsModalShown" @modal:close="() => zoneEditorStore.toggleSettingsModal()" :modal-width="600" :modal-height="350">
|
||||
<template #modalHeader>
|
||||
<h3 class="m-0 font-medium shrink-0 text-gray-300">Zone settings</h3>
|
||||
<h3 class="m-0 font-medium shrink-0 text-white">Zone settings</h3>
|
||||
</template>
|
||||
|
||||
<template #modalBody>
|
||||
<div class="m-4">
|
||||
<form method="post" @submit.prevent="" class="inline">
|
||||
<div class="gap-2.5 flex flex-wrap">
|
||||
<div class="space-x-2">
|
||||
<button class="btn-cyan py-1.5 px-4" type="button" @click.prevent="screen = 'settings'">Settings</button>
|
||||
<button class="btn-cyan py-1.5 px-4" type="button" @click.prevent="screen = 'effects'">Effects</button>
|
||||
</div>
|
||||
<form method="post" @submit.prevent="" class="inline" v-if="screen === 'settings'">
|
||||
<div class="gap-2.5 flex flex-wrap mt-4">
|
||||
<div class="form-field-full">
|
||||
<label for="name">Name</label>
|
||||
<input class="input-field" v-model="name" name="name" id="name" />
|
||||
</div>
|
||||
<div class="form-field-half">
|
||||
<label for="name">Width</label>
|
||||
<input class="input-field" v-model="width" name="name" id="name" type="number" />
|
||||
<label for="width">Width</label>
|
||||
<input class="input-field" v-model="width" name="width" id="width" type="number" />
|
||||
</div>
|
||||
<div class="form-field-half">
|
||||
<label for="name">Height</label>
|
||||
<input class="input-field" v-model="height" name="name" id="name" type="number" />
|
||||
<label for="height">Height</label>
|
||||
<input class="input-field" v-model="height" name="height" id="height" type="number" />
|
||||
</div>
|
||||
<div class="form-field-full">
|
||||
<label for="pvp">PVP enabled</label>
|
||||
@ -29,6 +33,14 @@
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
<form method="post" @submit.prevent="" class="inline" v-if="screen === 'effects'">
|
||||
<div v-for="(effect, index) in zoneEffects" :key="effect.id" class="mb-2 flex items-center space-x-2 mt-4">
|
||||
<input class="input-field flex-grow" v-model="effect.effect" placeholder="Effect name" />
|
||||
<input class="input-field w-20" v-model.number="effect.strength" type="number" placeholder="Strength" />
|
||||
<button class="btn-red py-1 px-2" type="button" @click="removeEffect(index)">Delete</button>
|
||||
</div>
|
||||
<button class="btn-green py-1 px-2 mt-2" type="button" @click="addEffect">Add Effect</button>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
</Modal>
|
||||
@ -40,16 +52,19 @@ import Modal from '@/components/utilities/Modal.vue'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
const screen = ref('settings')
|
||||
|
||||
zoneEditorStore.setZoneName(zoneEditorStore.zone.name)
|
||||
zoneEditorStore.setZoneWidth(zoneEditorStore.zone.width)
|
||||
zoneEditorStore.setZoneHeight(zoneEditorStore.zone.height)
|
||||
zoneEditorStore.setZonePvp(zoneEditorStore.zone.pvp)
|
||||
zoneEditorStore.setZoneName(zoneEditorStore.zone?.name)
|
||||
zoneEditorStore.setZoneWidth(zoneEditorStore.zone?.width)
|
||||
zoneEditorStore.setZoneHeight(zoneEditorStore.zone?.height)
|
||||
zoneEditorStore.setZonePvp(zoneEditorStore.zone?.pvp)
|
||||
zoneEditorStore.setZoneEffects(zoneEditorStore.zone?.zoneEffects)
|
||||
|
||||
const name = ref(zoneEditorStore.zoneSettings.name)
|
||||
const width = ref(zoneEditorStore.zoneSettings.width)
|
||||
const height = ref(zoneEditorStore.zoneSettings.height)
|
||||
const pvp = ref(zoneEditorStore.zoneSettings.pvp)
|
||||
const name = ref(zoneEditorStore.zoneSettings?.name)
|
||||
const width = ref(zoneEditorStore.zoneSettings?.width)
|
||||
const height = ref(zoneEditorStore.zoneSettings?.height)
|
||||
const pvp = ref(zoneEditorStore.zoneSettings?.pvp)
|
||||
const zoneEffects = ref(zoneEditorStore.zoneSettings?.zoneEffects || [])
|
||||
|
||||
watch(name, (value) => {
|
||||
zoneEditorStore.setZoneName(value)
|
||||
@ -66,4 +81,26 @@ watch(height, (value) => {
|
||||
watch(pvp, (value) => {
|
||||
zoneEditorStore.setZonePvp(value)
|
||||
})
|
||||
|
||||
watch(
|
||||
zoneEffects,
|
||||
(value) => {
|
||||
zoneEditorStore.setZoneEffects(value)
|
||||
},
|
||||
{ deep: true }
|
||||
)
|
||||
|
||||
const addEffect = () => {
|
||||
zoneEffects.value.push({
|
||||
id: Date.now().toString(), // Simple unique id generation
|
||||
zoneId: zoneEditorStore.zone?.id,
|
||||
zone: zoneEditorStore.zone,
|
||||
effect: '',
|
||||
strength: 1
|
||||
})
|
||||
}
|
||||
|
||||
const removeEffect = (index) => {
|
||||
zoneEffects.value.splice(index, 1)
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -2,14 +2,14 @@
|
||||
<div class="w-full md:min-w-[350px] max-w-[750px] flex flex-col absolute left-1/2 -translate-x-1/2 bottom-5">
|
||||
<div ref="chatWindow" class="w-full overflow-auto h-32 mb-5 bg-gray rounded-md border-2 border-solid border-gray-500 text-gray-300" v-show="gameStore.uiSettings.isChatOpen">
|
||||
<div v-for="message in chats" class="flex-col py-2 items-center p-3">
|
||||
<span class="text-ellipsis overflow-hidden whitespace-nowrap text-sm" :class="{'text-cyan-300': gameStore.character?.role == 'gm'}">{{ message.character.name }}</span>
|
||||
<span class="text-ellipsis overflow-hidden whitespace-nowrap text-sm" :class="{ 'text-cyan-300': gameStore.character?.role == 'gm' }">{{ message.character.name }}</span>
|
||||
<p class="text-gray-50 m-0">{{ message.message }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-64 mx-auto relative">
|
||||
<img src="/assets/icons/chat-icon.svg" class="absolute top-1/2 -translate-y-1/2 left-1.5 h-4 w-4 opacity-50" />
|
||||
<div class="w-96 mx-auto relative">
|
||||
<img src="/assets/icons/chat-icon.svg" class="absolute top-1/2 -translate-y-1/2 left-2.5 h-4 w-4 opacity-50" />
|
||||
<input
|
||||
class="w-[204px] h-6 rounded-sm text-xs font-default pl-8 pr-4 py-0 bg-gray-600 border-2 border-solid border-gray-500 text-gray-300 bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-cover focus:outline-none focus:ring-0 focus:border-cyan-800"
|
||||
class="w-[332px] h-8 rounded-sm text-xs font-default pl-8 pr-4 py-0 bg-gray-600 border-2 border-solid border-gray-500 text-gray-300 bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-cover focus:outline-none focus:ring-0 focus:border-cyan-800"
|
||||
placeholder="Type something..."
|
||||
v-model="message"
|
||||
@keypress="handleKeyPress"
|
||||
|
||||
@ -1,9 +1,7 @@
|
||||
<template>
|
||||
|
||||
</template>
|
||||
<template></template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -1,48 +1,52 @@
|
||||
<template>
|
||||
<div class="absolute left-[300px] top-4">
|
||||
<div class="absolute top-4 left-[300px] w-[422px]">
|
||||
<div class="flex gap-2.5">
|
||||
<div class="relative">
|
||||
<button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
|
||||
<span class="z-10 text-pixel absolute top-1 left-2">F1</span>
|
||||
<div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f1-icon.png')] bg-no-repeat"></div>
|
||||
</div>
|
||||
<div class="absolute left-[346px] top-4">
|
||||
</div>
|
||||
<div class="relative">
|
||||
<button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
|
||||
<span class="z-10 text-pixel absolute top-1 left-2">F2</span>
|
||||
<div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f2-icon.png')] bg-no-repeat"></div>
|
||||
</div>
|
||||
<div class="absolute left-[392px] top-4">
|
||||
</div>
|
||||
<div class="relative">
|
||||
<button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
|
||||
<span class="z-10 text-pixel absolute top-1 left-2">F3</span>
|
||||
<div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f3-icon.png')] bg-no-repeat"></div>
|
||||
</div>
|
||||
<div class="absolute left-[438px] top-4">
|
||||
</div>
|
||||
<div class="relative">
|
||||
<button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
|
||||
<span class="z-10 text-pixel absolute top-1 left-2">F4</span>
|
||||
<div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f4-icon.png')] bg-no-repeat"></div>
|
||||
</div>
|
||||
<div class="absolute left-[484px] top-4">
|
||||
</div>
|
||||
<div class="relative">
|
||||
<button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
|
||||
<span class="z-10 text-pixel absolute top-1 left-2">F5</span>
|
||||
<div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f5-icon.png')] bg-no-repeat"></div>
|
||||
</div>
|
||||
<div class="absolute left-[530px] top-4">
|
||||
</div>
|
||||
<div class="relative">
|
||||
<button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
|
||||
<span class="z-10 text-pixel absolute top-1 left-2">F6</span>
|
||||
<div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f6-icon.png')] bg-no-repeat"></div>
|
||||
</div>
|
||||
<div class="absolute left-[576px] top-4">
|
||||
</div>
|
||||
<div class="relative">
|
||||
<button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
|
||||
<span class="z-10 text-pixel absolute top-1 left-2">F7</span>
|
||||
<div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f7-icon.png')] bg-no-repeat"></div>
|
||||
</div>
|
||||
<div class="absolute left-[622px] top-4">
|
||||
</div>
|
||||
<div class="relative">
|
||||
<button class="z-20 group-hover:cursor-pointer bg-[url('/assets/ui-border-4-corners-light.svg')] bg-no-repeat block w-[42px] h-[42px] relative p-0"></button>
|
||||
<span class="z-10 text-pixel absolute top-1 left-2">F8</span>
|
||||
<div class="absolute top-0 left-0 h-full w-full bg-[url('/assets/icons/f8-icon.png')] bg-no-repeat"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
</script>
|
||||
</script>
|
||||
@ -24,7 +24,7 @@
|
||||
<p class="absolute w-full bottom-0 m-0 text-xs leading-6 text-white">Open Chat</p>
|
||||
<div class="group-hover:block absolute -left-2 bg-gray-500 h-3.5 w-2 [clip-path:polygon(100%_0,_0_50%,_100%_100%)] top-1/2 -translate-y-1/2 hidden"></div>
|
||||
</div>
|
||||
<a class="group-hover:bg-gray-800 group-hover:cursor-pointer border border-b-4 border-solid rounded border-gray-500 block w-[34px] h-[31px]">
|
||||
<a class="group-hover:bg-gray-800 bg-gray-900 group-hover:cursor-pointer border border-b-4 border-solid rounded border-gray-500 block w-[34px] h-[31px]">
|
||||
<img class="group-hover:drop-shadow-default w-6 h-6 m-[5px] object-contain" draggable="false" src="/assets/icons/chat-icon.svg" />
|
||||
</a>
|
||||
</li>
|
||||
@ -33,7 +33,7 @@
|
||||
<p class="absolute w-full bottom-0 m-0 text-xs leading-6 text-white">World map</p>
|
||||
<div class="group-hover:block absolute -left-2 bg-gray-500 h-3.5 w-2 [clip-path:polygon(100%_0,_0_50%,_100%_100%)] top-1/2 -translate-y-1/2 hidden"></div>
|
||||
</div>
|
||||
<a class="group-hover:bg-gray-800 group-hover:cursor-pointer border border-b-4 border-solid rounded border-gray-500 block w-[34px] h-[31px]">
|
||||
<a class="group-hover:bg-gray-800 bg-gray-900 group-hover:cursor-pointer border border-b-4 border-solid rounded border-gray-500 block w-[34px] h-[31px]">
|
||||
<img class="group-hover:drop-shadow-default w-6 h-6 m-[5px] object-contain" draggable="false" src="/assets/icons/map-icon.svg" />
|
||||
</a>
|
||||
</li>
|
||||
@ -42,7 +42,7 @@
|
||||
<p class="absolute w-full bottom-0 m-0 text-xs leading-6 text-white">Users</p>
|
||||
<div class="group-hover:block absolute -left-2 bg-gray-500 h-3.5 w-2 [clip-path:polygon(100%_0,_0_50%,_100%_100%)] top-1/2 -translate-y-1/2 hidden"></div>
|
||||
</div>
|
||||
<a class="group-hover:bg-gray-800 group-hover:cursor-pointer border border-b-4 border-solid rounded border-gray-500 block w-[34px] h-[31px]">
|
||||
<a class="group-hover:bg-gray-800 bg-gray-900 group-hover:cursor-pointer border border-b-4 border-solid rounded border-gray-500 block w-[34px] h-[31px]">
|
||||
<img class="group-hover:drop-shadow-default w-6 h-6 m-[5px] object-contain" draggable="false" src="/assets/icons/socials-icon.svg" />
|
||||
</a>
|
||||
</li>
|
||||
@ -53,5 +53,5 @@
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
let characterLevel = gameStore.character?.level.toString().padStart(2, '0');
|
||||
let characterLevel = gameStore.character?.level.toString().padStart(2, '0')
|
||||
</script>
|
||||
|
||||
@ -1,9 +1,23 @@
|
||||
<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 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-full h-full" src="/assets/ui-border-4-corners.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-full h-full" src="/assets/ui-border-4-corners.svg" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
</script>
|
||||
</script>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="absolute z-50 w-full h-dvh top-0 left-0 bg-black/60" v-show="gameStore.uiSettings.isUserPanelOpen">
|
||||
<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-300/80 border-solid border-2 border-cyan-200 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-cyan-200">
|
||||
<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="p-2.5 flex max-sm:flex-wrap justify-between items-center gap-5 border-solid border-0 border-b border-gray-500">
|
||||
<h3 class="m-0 font-medium shrink-0">Game menu</h3>
|
||||
<div class="hidden sm:flex gap-1.5 flex-wrap">
|
||||
<button @click.stop="userPanelScreen = 'inventory'" :class="{ active: userPanelScreen === 'inventory' }" class="btn-cyan py-1.5 px-4 min-w-24">Inventory</button>
|
||||
|
||||
@ -39,7 +39,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute -left-5 -bottom-5 w-[calc(100%_+_40px)] my-px h-px bg-cyan-200"></div>
|
||||
<div class="absolute -left-5 -bottom-5 w-[calc(100%_+_40px)] my-px h-px bg-gray-500"></div>
|
||||
</div>
|
||||
<div class="m-4">
|
||||
<h4 class="font-medium text-lg max-w-[375px]">Character stats</h4>
|
||||
|
||||
@ -13,54 +13,54 @@
|
||||
<div class="flex flex-col gap-3 mx-5 mt-2">
|
||||
<div class="flex gap-3 justify-center">
|
||||
<!-- Helmet -->
|
||||
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-11 w-11 relative hover:bg-gray-200">
|
||||
<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" />
|
||||
</div>
|
||||
|
||||
<!-- Head charm -->
|
||||
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-11 w-11 relative hover:bg-gray-200">
|
||||
<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" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-3 justify-center">
|
||||
<!-- Bracers -->
|
||||
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md w-11 h-[104px] relative hover:bg-gray-200">
|
||||
<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" />
|
||||
</div>
|
||||
|
||||
<!-- Chestplate -->
|
||||
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square w-[104px] h-[104px] relative hover:bg-gray-200">
|
||||
<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" />
|
||||
</div>
|
||||
|
||||
<!-- Primary Weapon -->
|
||||
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md w-11 h-[104px] self-stretch justify-self-stretch relative hover:bg-gray-200">
|
||||
<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" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-3 justify-center">
|
||||
<!-- Legs -->
|
||||
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md w-11 h-[104px] self-stretch justify-self-stretch relative hover:bg-gray-200">
|
||||
<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" />
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-3">
|
||||
<!-- Belt/pouch -->
|
||||
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-11 w-11 self-stretch justify-self-stretch relative hover:bg-gray-200">
|
||||
<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" />
|
||||
</div>
|
||||
|
||||
<!-- Boots -->
|
||||
<div class="bg-gray-300/80 border-solid border-2 border-cyan-200 rounded-md aspect-square h-11 w-11 self-stretch justify-self-stretch relative hover:bg-gray-200">
|
||||
<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" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="absolute -left-5 -bottom-5 w-[calc(100%_+_40px)] my-px h-px bg-cyan-200"></div>
|
||||
<div class="absolute -left-5 -bottom-5 w-[calc(100%_+_40px)] my-px h-px bg-gray-500"></div>
|
||||
</div>
|
||||
<div class="m-4">
|
||||
<h4 class="font-medium text-lg max-w-[375px]">Equipment Bonus</h4>
|
||||
|
||||
@ -3,14 +3,14 @@
|
||||
<div class="m-4 relative">
|
||||
<h4 class="m-auto font-medium text-lg max-w-[375px]">Inventory</h4>
|
||||
<div class="flex gap-3 mt-4 mx-auto flex-wrap max-w-[375px]">
|
||||
<div v-for="n in 24" class="bg-gray-300/80 border-solid border-2 border-cyan-200 w-12 h-12 rounded-md aspect-square shrink-0 justify-self-stretch hover:bg-gray-200"></div>
|
||||
<div v-for="n in 24" class="bg-gray-300/80 border-solid border-2 border-gray-500 w-12 h-12 rounded-md aspect-square shrink-0 justify-self-stretch hover:bg-gray-200"></div>
|
||||
</div>
|
||||
<div class="absolute -left-5 -bottom-5 w-[calc(100%_+_40px)] my-px h-px bg-cyan-200"></div>
|
||||
<div class="absolute -left-5 -bottom-5 w-[calc(100%_+_40px)] my-px h-px bg-gray-500"></div>
|
||||
</div>
|
||||
<div class="m-4">
|
||||
<h4 class="m-auto font-medium text-lg max-w-[375px]">Chest items</h4>
|
||||
<div class="flex gap-3 mt-4 mx-auto flex-wrap max-w-[375px]">
|
||||
<div v-for="n in 12" class="bg-gray-300/80 border-solid border-2 border-cyan-200 w-12 h-12 rounded-md aspect-square shrink-0 justify-self-stretch hover:bg-gray-200"></div>
|
||||
<div v-for="n in 12" class="bg-gray-300/80 border-solid border-2 border-gray-500 w-12 h-12 rounded-md aspect-square shrink-0 justify-self-stretch hover:bg-gray-200"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -4,26 +4,26 @@
|
||||
<!-- Settings Categories -->
|
||||
<div class="relative p-2.5">
|
||||
<h3>Settings</h3>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
|
||||
</div>
|
||||
<a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': settingCategory === 'character' }" @click.stop="settingCategory = 'character'">
|
||||
<span>Character</span>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
|
||||
</a>
|
||||
<a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': settingCategory === 'account' }" @click.stop="settingCategory = 'account'">
|
||||
<span>Account</span>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
|
||||
</a>
|
||||
<a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': settingCategory === 'audio' }" @click.stop="settingCategory = 'audio'">
|
||||
<span>Audio</span>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
|
||||
</a>
|
||||
<a class="relative p-2.5 hover:cursor-pointer" :class="{ 'bg-cyan/80': settingCategory === 'video' }" @click.stop="settingCategory = 'video'">
|
||||
<span>Video</span>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-cyan-200"></div>
|
||||
<div class="absolute left-0 bottom-0 w-full h-px bg-gray-500"></div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="absolute w-px bg-cyan-200 h-full top-0 left-1/6"></div>
|
||||
<div class="absolute w-px bg-gray-500 h-full top-0 left-1/6"></div>
|
||||
|
||||
<!-- Assets list -->
|
||||
<div class="overflow-auto h-full w-10/12 flex flex-col relative">
|
||||
|
||||
@ -38,24 +38,20 @@ const modalOpened = ref(props.modalOpened)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal :closable="false" :is-resizable="false" :isModalOpen="true" @modal:close="() => (modalOpened = !modalOpened)" :modal-width="300" :modal-height="190">
|
||||
<Modal :closable="false" :is-resizable="false" :isModalOpen="true" @modal:close="() => (modalOpened = !modalOpened)" :modal-width="350" :modal-height="230">
|
||||
<template #modalHeader>
|
||||
<div class="text-gray-300">
|
||||
<slot name="modalHeader"></slot>
|
||||
</div>
|
||||
<slot name="modalHeader"></slot>
|
||||
</template>
|
||||
<template #modalBody>
|
||||
<div class="text-gray-300 h-full">
|
||||
<div class="flex h-full flex-col justify-between">
|
||||
<span class="p-2">
|
||||
<slot name="modalBody"></slot>
|
||||
</span>
|
||||
<div class="flex justify-between p-2">
|
||||
<button class="btn-cyan py-1.5 px-4 min-w-24 inline-block" @click="props.cancelFunction()">
|
||||
<div class="h-[calc(100%_-_32px)] p-4">
|
||||
<div class="h-full flex flex-col justify-between">
|
||||
<slot name="modalBody"></slot>
|
||||
<div class="grid grid-flow-col justify-stretch gap-4">
|
||||
<button class="btn-empty py-1.5 px-4 min-w-24 inline-block" @click="props.cancelFunction()">
|
||||
{{ props.cancelButtonText }}
|
||||
</button>
|
||||
|
||||
<button class="btn-cyan py-1.5 px-4 min-w-24 inline-block" type="submit" @click="props.confirmFunction()">
|
||||
<button class="btn-red py-1.5 px-4 min-w-24 inline-block" type="submit" @click="props.confirmFunction()">
|
||||
{{ props.confirmButtonText }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -1,23 +1,26 @@
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<div v-if="isModalOpenRef" class="fixed bg-gray border-solid border-2 border-gray-500 z-50 flex flex-col backdrop-blur-sm shadow-lg" :style="modalStyle">
|
||||
<div @mousedown="startDrag" class="cursor-move p-2.5 flex justify-between items-center border-solid border-0 border-b border-gray-500">
|
||||
<slot name="modalHeader" />
|
||||
<div v-if="isModalOpenRef" class="fixed border-solid border-2 border-gray-500 z-50 flex flex-col backdrop-blur-sm shadow-lg" :style="modalStyle">
|
||||
<div @mousedown="startDrag" class="cursor-move p-2.5 flex justify-between items-center border-solid border-0 border-b border-gray-500 relative">
|
||||
<div class="rounded-t-md absolute w-full h-full top-0 left-0 bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-center bg-cover opacity-90"></div>
|
||||
<div class="relative z-10">
|
||||
<slot name="modalHeader" />
|
||||
</div>
|
||||
<div class="flex gap-2.5">
|
||||
<button @click="toggleFullScreen" class="w-5 h-5 m-0 p-0 relative hover:scale-110 transition-transform duration-300 ease-in-out" v-if="canFullScreen">
|
||||
<img :alt="isFullScreen ? 'exit full-screen' : 'full-screen'" draggable="false" :src="isFullScreen ? '/assets/icons/minimize.svg' : '/assets/icons/full-screen.svg'" class="w-full h-full invert" />
|
||||
<img :alt="isFullScreen ? 'exit full-screen' : 'full-screen'" draggable="false" :src="isFullScreen ? '/assets/icons/minimize.svg' : '/assets/icons/increase-size-option.svg'" class="w-3.5 h-3.5 invert" />
|
||||
</button>
|
||||
<button @click="close" v-if="closable" class="w-3.5 h-3.5 m-0 p-0 relative hover:rotate-180 transition-transform duration-300 ease-in-out">
|
||||
<img alt="close" draggable="false" src="/assets/icons/close-button-white.svg" class="w-full h-full" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overflow-hidden grow">
|
||||
<slot name="modalBody" />
|
||||
<img v-if="isResizable && !isFullScreen" src="/assets/icons/resize-icon.svg" alt="resize" class="absolute bottom-0 right-0 w-5 h-5 cursor-nwse-resize invert-[60%]" @mousedown="startResize" />
|
||||
</div>
|
||||
<div v-if="$slots.modalFooter" class="px-5 min-h-12 flex justify-end gap-7.5 items-center border-solid border-t border-gray-500">
|
||||
<slot name="modalFooter" />
|
||||
<div class="overflow-hidden grow relative">
|
||||
<div class="rounded-b-md absolute w-full h-full top-0 left-0 bg-[url('/assets/ui-texture.png')] bg-no-repeat bg-cover bg-center opacity-90"></div>
|
||||
<div class="relative z-10 h-full">
|
||||
<slot name="modalBody" />
|
||||
</div>
|
||||
<img v-if="isResizable && !isFullScreen" src="/assets/icons/resize-icon.svg" alt="resize" class="absolute z-10 bottom-0 right-0 w-5 h-5 cursor-nwse-resize" @mousedown="startResize" />
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
@ -84,7 +87,7 @@ let startHeight = 0
|
||||
let preFullScreenState = { x: 0, y: 0, width: 0, height: 0 }
|
||||
|
||||
const modalStyle = computed(() => ({
|
||||
borderRadius: isFullScreen.value ? '0' : '10px',
|
||||
borderRadius: isFullScreen.value ? '0' : '6px',
|
||||
top: isFullScreen.value ? '0' : `${y.value}px`,
|
||||
left: isFullScreen.value ? '0' : `${x.value}px`,
|
||||
width: isFullScreen.value ? '100vw' : `${width.value}px`,
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<Modal v-for="notification in gameStore.getNotifications" :key="notification.id" :isModalOpen="true" @modal:close="closeNotification(notification.id)">
|
||||
<template #modalHeader v-if="notification.title">
|
||||
<h3 class="m-0 font-medium shrink-0 text-gray-300">{{ notification.title }}</h3>
|
||||
<h3 class="m-0 font-medium shrink-0 text-white">{{ notification.title }}</h3>
|
||||
</template>
|
||||
<template #modalBody v-if="notification.message">
|
||||
<p class="m-4">{{ notification.message }}</p>
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
<template>
|
||||
<Image v-for="object in zoneStore.zone?.zoneObjects" :depth="calculateIsometricDepth(object.positionX, object.positionY, object.object.frameWidth, object.object.frameHeight)" :key="object.id" v-bind="getObjectImageProps(object)" :flipX="object.isRotated" />
|
||||
<!-- <Text v-for="object in zoneStore.zone?.zoneObjects" :key="object.id" :depth="99999" :text="Math.ceil(calculateIsometricDepth(object.positionX, object.positionY, object.object.frameWidth, object.object.frameHeight))" v-bind="getObjectProps(object)" />-->
|
||||
<Image v-for="object in zoneStore.zone?.zoneObjects" v-bind="getImageProps(object)" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
@ -15,19 +14,12 @@ const props = defineProps<{
|
||||
tilemap: Phaser.Tilemaps.Tilemap
|
||||
}>()
|
||||
|
||||
const getObjectProps = (object: ZoneObject) => {
|
||||
return {
|
||||
x: tileToWorldX(props.tilemap as any, object.positionX, object.positionY),
|
||||
y: tileToWorldY(props.tilemap as any, object.positionX, object.positionY),
|
||||
originY: Number(object.object.originX),
|
||||
originX: Number(object.object.originY)
|
||||
}
|
||||
}
|
||||
|
||||
const getObjectImageProps = (object: ZoneObject) => {
|
||||
const getImageProps = (object: ZoneObject) => {
|
||||
return {
|
||||
depth: calculateIsometricDepth(object.positionX, object.positionY, object.object.frameWidth, object.object.frameHeight),
|
||||
x: tileToWorldX(props.tilemap as any, object.positionX, object.positionY),
|
||||
y: tileToWorldY(props.tilemap as any, object.positionX, object.positionY),
|
||||
flipX: object.isRotated,
|
||||
texture: object.object.id,
|
||||
originY: Number(object.object.originX),
|
||||
originX: Number(object.object.originY)
|
||||
|
||||
@ -17,7 +17,6 @@ const scene = useScene()
|
||||
|
||||
const zoneTilemap = createTilemap()
|
||||
const tiles = createTileLayer()
|
||||
let tileArray = createTileArray()
|
||||
|
||||
function createTilemap() {
|
||||
const zoneData = new Phaser.Tilemaps.MapData({
|
||||
@ -51,17 +50,11 @@ function createTileLayer() {
|
||||
return layer
|
||||
}
|
||||
|
||||
function createTileArray() {
|
||||
return Array.from({ length: zoneStore.zone?.width ?? 0 }, () => Array.from({ length: zoneStore.zone?.height ?? 0 }, () => 'blank_tile'))
|
||||
}
|
||||
|
||||
onBeforeMount(() => {
|
||||
if (zoneStore.zone?.tiles) {
|
||||
setAllTiles(zoneTilemap, tiles, zoneStore.zone.tiles)
|
||||
tileArray = zoneStore.zone.tiles.map((row) => row.map((tileId) => tileId || 'blank_tile'))
|
||||
} else {
|
||||
tileArray.forEach((row, y) => row.forEach((_, x) => placeTile(zoneTilemap, tiles, x, y, 'blank_tile')))
|
||||
if (!zoneStore.zone?.tiles) {
|
||||
return
|
||||
}
|
||||
setAllTiles(zoneTilemap, tiles, zoneStore.zone.tiles)
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
|
||||
@ -9,7 +9,7 @@ export function useGamePointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilema
|
||||
const dragThreshold = 5 // pixels
|
||||
|
||||
function updateWaypoint(worldX: number, worldY: number) {
|
||||
const pointerTile = getTile(worldX, worldY, layer)
|
||||
const pointerTile = getTile(layer, worldX, worldY)
|
||||
if (pointerTile) {
|
||||
const worldPoint = tileToWorldXY(layer, pointerTile.x, pointerTile.y)
|
||||
waypoint.value = {
|
||||
@ -46,7 +46,7 @@ export function useGamePointerHandlers(scene: Phaser.Scene, layer: Phaser.Tilema
|
||||
const distance = Phaser.Math.Distance.Between(pointerStartPosition.value.x, pointerStartPosition.value.y, pointer.x, pointer.y)
|
||||
|
||||
if (distance <= dragThreshold) {
|
||||
const pointerTile = getTile(pointer.worldX, pointer.worldY, layer)
|
||||
const pointerTile = getTile(layer, pointer.worldX, pointer.worldY)
|
||||
if (pointerTile) {
|
||||
gameStore.connection?.emit('character:initMove', {
|
||||
positionX: pointerTile.x,
|
||||
|
||||
@ -11,7 +11,7 @@ export function useZoneEditorPointerHandlers(scene: Phaser.Scene, layer: Phaser.
|
||||
|
||||
function updateWaypoint(pointer: Phaser.Input.Pointer) {
|
||||
const { x: px, y: py } = camera.getWorldPoint(pointer.x, pointer.y)
|
||||
const pointerTile = getTile(px, py, layer)
|
||||
const pointerTile = getTile(layer, px, py)
|
||||
|
||||
if (pointerTile) {
|
||||
const worldPoint = tileToWorldXY(layer, pointerTile.x, pointerTile.y)
|
||||
|
||||
@ -2,46 +2,71 @@ import config from '@/config'
|
||||
import Tilemap = Phaser.Tilemaps.Tilemap
|
||||
import TilemapLayer = Phaser.Tilemaps.TilemapLayer
|
||||
import Tileset = Phaser.Tilemaps.Tileset
|
||||
import Tile = Phaser.Tilemaps.Tile
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
|
||||
export function getTile(x: number, y: number, layer: Phaser.Tilemaps.TilemapLayer): Phaser.Tilemaps.Tile | undefined {
|
||||
const tile: Phaser.Tilemaps.Tile = layer.getTileAtWorldXY(x, y)
|
||||
export function getTile(layer: TilemapLayer | Tilemap, x: number, y: number): Tile | undefined {
|
||||
const tile = layer.getTileAtWorldXY(x, y)
|
||||
if (!tile) return undefined
|
||||
return tile
|
||||
}
|
||||
|
||||
export function tileToWorldXY(layer: Phaser.Tilemaps.TilemapLayer, pos_x: number, pos_y: number) {
|
||||
export function tileToWorldXY(layer: TilemapLayer | Tilemap, pos_x: number, pos_y: number) {
|
||||
const worldPoint = layer.tileToWorldXY(pos_x, pos_y)
|
||||
if (!worldPoint) return { positionX: 0, positionY: 0 }
|
||||
|
||||
const positionX = worldPoint.x + config.tile_size.y
|
||||
const positionY = worldPoint.y
|
||||
|
||||
return { positionX, positionY }
|
||||
}
|
||||
|
||||
export function tileToWorldX(layer: Phaser.Tilemaps.TilemapLayer, pos_x: number, pos_y: number): number {
|
||||
export function tileToWorldX(layer: TilemapLayer | Tilemap, pos_x: number, pos_y: number): number {
|
||||
const worldPoint = layer.tileToWorldXY(pos_x, pos_y)
|
||||
if (!worldPoint) return 0
|
||||
|
||||
return worldPoint.x + config.tile_size.x / 2
|
||||
}
|
||||
|
||||
export function tileToWorldY(layer: TilemapLayer, pos_x: number, pos_y: number): number {
|
||||
export function tileToWorldY(layer: TilemapLayer | Tilemap, pos_x: number, pos_y: number): number {
|
||||
const worldPoint = layer.tileToWorldXY(pos_x, pos_y)
|
||||
if (!worldPoint) return 0
|
||||
|
||||
return worldPoint.y + config.tile_size.y * 1.5
|
||||
}
|
||||
|
||||
/**
|
||||
* Can also be used to replace tiles
|
||||
* @param zone
|
||||
* @param layer
|
||||
* @param x
|
||||
* @param y
|
||||
* @param tileName
|
||||
*/
|
||||
export function placeTile(zone: Tilemap, layer: TilemapLayer, x: number, y: number, tileName: string) {
|
||||
const tileImg = zone.getTileset(tileName) as Tileset
|
||||
if (!tileImg) return
|
||||
let tileImg = zone.getTileset(tileName) as Tileset
|
||||
if (!tileImg) {
|
||||
tileImg = zone.getTileset('blank_tile') as Tileset
|
||||
}
|
||||
layer.putTileAt(tileImg.firstgid, x, y)
|
||||
}
|
||||
|
||||
export function deleteTile(layer: TilemapLayer, x: number, y: number) {
|
||||
layer.removeTileAt(x, y)
|
||||
}
|
||||
|
||||
export function setAllTiles(zone: Tilemap, layer: TilemapLayer, tiles: string[][]) {
|
||||
tiles.forEach((row, y) => {
|
||||
row.forEach((tile, x) => {
|
||||
tiles.forEach((row: string[], y: number) => {
|
||||
row.forEach((tile: string, x: number) => {
|
||||
placeTile(zone, layer, x, y, tile)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
export function createTileArray(width: number, height: number, tile: string = 'blank_tile') {
|
||||
return Array.from({ length: height }, () => Array.from({ length: width }, () => tile))
|
||||
}
|
||||
|
||||
export const calculateIsometricDepth = (x: number, y: number, width: number = 0, height: number = 0, isCharacter: boolean = false) => {
|
||||
const baseDepth = x + y
|
||||
if (isCharacter) {
|
||||
@ -58,6 +83,10 @@ export const sortByIsometricDepth = <T extends { positionX: number; positionY: n
|
||||
})
|
||||
}
|
||||
|
||||
export const clearAssets = (scene: Phaser.Scene) => {
|
||||
scene.load.destroy()
|
||||
}
|
||||
|
||||
export const loadAssets = (scene: Phaser.Scene): Promise<void> => {
|
||||
return new Promise((resolve) => {
|
||||
const gameStore = useGameStore()
|
||||
|
||||
@ -5,14 +5,9 @@
|
||||
<div class="filler"></div>
|
||||
<div class="flex gap-14 w-full max-h-[650px] overflow-x-auto" v-if="!isLoading">
|
||||
<!-- CHARACTER LIST -->
|
||||
<div
|
||||
v-for="character in characters"
|
||||
:key="character.id"
|
||||
class="group first:ml-auto last:mr-auto m-4 w-[170px] h-[275px] flex flex-col shrink-0 relative shadow-character"
|
||||
:class="{ active: selected_character == character.id }"
|
||||
>
|
||||
<img src="/assets/ui-box-outer.svg" class="absolute w-full h-full max-lg:hidden" />
|
||||
<img src="/assets/ui-box-inner.svg" class="absolute left-2 bottom-2 w-[calc(100%_-_16px)] h-[calc(100%_-_40px)] max-lg:hidden" />
|
||||
<div v-for="character in characters" :key="character.id" class="group first:ml-auto last:mr-auto m-4 w-[170px] h-[275px] flex flex-col shrink-0 relative shadow-character" :class="{ active: selected_character == character.id }">
|
||||
<img src="/assets/ui-box-outer.svg" class="absolute w-full h-full" />
|
||||
<img src="/assets/ui-box-inner.svg" class="absolute left-2 bottom-2 w-[calc(100%_-_16px)] h-[calc(100%_-_40px)]" />
|
||||
<input class="opacity-0 h-full w-full absolute m-0 z-10" type="radio" :id="character.id" name="character" :value="character.id" v-model="selected_character" />
|
||||
<label class="font-bold absolute left-1/2 top-4 max-w-32 -translate-x-1/2 -translate-y-1/2 text-center text-ellipsis overflow-hidden whitespace-nowrap drop-shadow-text" :for="character.id">{{ character.name }}</label>
|
||||
|
||||
@ -66,21 +61,23 @@
|
||||
</div>
|
||||
|
||||
<!-- CREATE CHARACTER MODAL -->
|
||||
<Modal :isModalOpen="isModalOpen" @modal:close="isModalOpen = false">
|
||||
<Modal :isModalOpen="isModalOpen" @modal:close="isModalOpen = false" :modal-width="430" :modal-height="275">
|
||||
<template #modalHeader>
|
||||
<h3 class="m-0 font-medium text-gray-300">Create your character</h3>
|
||||
<h3 class="m-0 font-medium text-white">Create your character</h3>
|
||||
</template>
|
||||
|
||||
<template #modalBody>
|
||||
<div class="m-4 character-form">
|
||||
<form method="post" @submit.prevent="create" class="inline">
|
||||
<div class="p-4 h-[calc(100%_-_32px)]">
|
||||
<form method="post" @submit.prevent="create" class="h-full flex flex-col justify-between">
|
||||
<div class="form-field-full">
|
||||
<label for="name">Name</label>
|
||||
<input class="input-field max-w-64" v-model="name" name="name" id="name" />
|
||||
<label for="name" class="text-white">Nickname</label>
|
||||
<input class="input-field" v-model="name" name="name" id="name" placeholder="Enter a nickname.." />
|
||||
</div>
|
||||
<div class="grid grid-flow-col justify-stretch gap-4">
|
||||
<button type="button" class="btn-empty py-1.5 px-4 inline-block" @click.prevent="isModalOpen = false">Cancel</button>
|
||||
<button class="btn-cyan py-1.5 px-4 inline-block" type="submit">Create</button>
|
||||
</div>
|
||||
<button class="btn-cyan py-1.5 px-4 mr-5 min-w-24 inline-block" type="submit">CREATE</button>
|
||||
</form>
|
||||
<button class="btn-cyan py-1.5 px-4 min-w-24 inline-block" @click="isModalOpen = false">CANCEL</button>
|
||||
</div>
|
||||
</template>
|
||||
</Modal>
|
||||
@ -88,11 +85,13 @@
|
||||
<!-- DELETE CHARACTER MODAL -->
|
||||
<ConfirmationModal v-if="deletingCharacter != null" :confirm-function="delete_character.bind(this, deletingCharacter.id)" :cancel-function="(() => (deletingCharacter = null)).bind(this)" confirm-button-text="Delete">
|
||||
<template #modalHeader>
|
||||
<h3 class="m-0 font-medium text-gray-300">Deleting character</h3>
|
||||
<h3 class="m-0 font-medium text-white">Delete character?</h3>
|
||||
</template>
|
||||
<template #modalBody>
|
||||
You are about to delete <span class="font-extrabold">{{ deletingCharacter.name }}</span
|
||||
>, are you sure about that?
|
||||
<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>
|
||||
|
||||
@ -1,63 +1,46 @@
|
||||
<template>
|
||||
<div class="flex justify-center items-center h-dvh relative">
|
||||
<GmTools v-if="gameStore.character?.role === 'gm'" />
|
||||
<GmPanel v-if="gameStore.character?.role === 'gm'" />
|
||||
<Game :config="gameConfig" @create="createGame">
|
||||
<Scene name="main" @preload="preloadScene" @create="createScene">
|
||||
<div v-if="isLoaded">
|
||||
<Menu />
|
||||
<Hud />
|
||||
<Hotkeys />
|
||||
<Minimap />
|
||||
<Zone />
|
||||
<Chat />
|
||||
<ExpBar />
|
||||
|
||||
<div v-if="!zoneEditorStore.active">
|
||||
<Game :config="gameConfig" @create="createGame">
|
||||
<Scene name="main" @preload="preloadScene" @create="createScene">
|
||||
<div v-if="isLoaded">
|
||||
<Menu />
|
||||
<Hud />
|
||||
<Keybindings />
|
||||
<Minimap />
|
||||
<Zone />
|
||||
<Chat />
|
||||
<ExpBar />
|
||||
|
||||
<Inventory />
|
||||
<Effects />
|
||||
</div>
|
||||
</Scene>
|
||||
</Game>
|
||||
</div>
|
||||
<div v-if="zoneEditorStore.active">
|
||||
<Game :config="gameConfig" @create="createGame">
|
||||
<Scene name="main" @preload="preloadScene" @create="createScene">
|
||||
<ZoneEditor v-if="isLoaded" :key="JSON.stringify(`${zoneEditorStore.zone?.id}_${zoneEditorStore.zone?.createdAt}_${zoneEditorStore.zone?.updatedAt}`)" />
|
||||
</Scene>
|
||||
</Game>
|
||||
</div>
|
||||
<Inventory />
|
||||
<Effects />
|
||||
</div>
|
||||
</Scene>
|
||||
</Game>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import config from '@/config'
|
||||
import 'phaser'
|
||||
import { ref, onBeforeUnmount } from 'vue'
|
||||
import { Game, Scene } from 'phavuer'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import Menu from '@/components/gui/Menu.vue'
|
||||
import ExpBar from '@/components/gui/ExpBar.vue'
|
||||
import Hud from '@/components/gui/Hud.vue'
|
||||
import Zone from '@/components/zone/Zone.vue'
|
||||
import Keybindings from '@/components/gui/Keybindings.vue'
|
||||
import Hotkeys from '@/components/gui/Hotkeys.vue'
|
||||
import Chat from '@/components/gui/Chat.vue'
|
||||
import GmTools from '@/components/gameMaster/GmTools.vue'
|
||||
import ZoneEditor from '@/components/gameMaster/zoneEditor/ZoneEditor.vue'
|
||||
import GmPanel from '@/components/gameMaster/GmPanel.vue'
|
||||
import Inventory from '@/components/gui/UserPanel.vue'
|
||||
import Effects from '@/components/Effects.vue'
|
||||
import { loadAssets } from '@/composables/zoneComposable'
|
||||
import Minimap from '@/components/gui/Minimap.vue'
|
||||
|
||||
|
||||
const gameStore = useGameStore()
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
const isLoaded = ref(false)
|
||||
|
||||
const gameConfig = {
|
||||
name: 'Sylvan Quest',
|
||||
name: config.name,
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight,
|
||||
type: Phaser.AUTO, // AUTO, CANVAS, WEBGL, HEADLESS
|
||||
@ -123,10 +106,7 @@ const preloadScene = async (scene: Phaser.Scene) => {
|
||||
/**
|
||||
* Load the base assets into the Phaser scene
|
||||
*/
|
||||
scene.load.image('BLOCK', '/assets/zone/bt_tile.png')
|
||||
scene.load.image('TELEPORT', '/assets/zone/tp_tile.png')
|
||||
scene.load.image('blank_tile', '/assets/zone/blank_tile.png')
|
||||
scene.load.image('blank_object', '/assets/zone/blank_tile.png')
|
||||
scene.load.image('waypoint', '/assets/waypoint.png')
|
||||
|
||||
/**
|
||||
@ -154,14 +134,5 @@ const createScene = async (scene: Phaser.Scene) => {
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
isLoaded.value = false
|
||||
gameStore.disconnectSocket()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
canvas {
|
||||
image-rendering: -moz-crisp-edges;
|
||||
image-rendering: -webkit-crisp-edges;
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<div class="bg-[url('/assets/login/login-bg.png')] w-full lg:w-1/2 h-[35dvh] lg:h-dvh absolute right-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/nq-logo-v1.png" class="mb-10" />
|
||||
<img src="/assets/login/sq-logo-v1.svg" class="mb-10" />
|
||||
<div class="relative">
|
||||
<img src="/assets/ui-box-outer.svg" class="absolute w-full h-full" />
|
||||
<img src="/assets/ui-box-inner.svg" class="absolute left-2 top-2 w-[calc(100%_-_16px)] h-[calc(100%_-_16px)] max-lg:hidden" />
|
||||
@ -16,12 +16,12 @@
|
||||
<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 />
|
||||
<div class="relative">
|
||||
<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 @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>
|
||||
<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 absolute top-full mt-1">{{ loginError }}</span>
|
||||
</div>
|
||||
<button class="text-right text-cyan-300 text-base">Forgot password?</button>
|
||||
<button class="btn-cyan px-0 xs:w-full" type="submit">Play now</button>
|
||||
<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>
|
||||
|
||||
<!-- Divider shape -->
|
||||
<div class="absolute w-40 h-0.5 -bottom-8 left-1/2 -translate-x-1/2 flex justify-between">
|
||||
@ -42,11 +42,11 @@
|
||||
<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 />
|
||||
<div class="relative">
|
||||
<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 @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>
|
||||
<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 absolute top-full mt-1">{{ loginError }}</span>
|
||||
</div>
|
||||
<button class="btn-cyan xs:w-full" type="submit">Register now</button>
|
||||
<button class="btn-cyan xs:w-full" type="submit">Register now</button>
|
||||
|
||||
<!-- Divider shape -->
|
||||
<div class="absolute w-40 h-0.5 -bottom-8 left-1/2 -translate-x-1/2 flex justify-between">
|
||||
|
||||
123
src/screens/ZoneEditor.vue
Normal file
123
src/screens/ZoneEditor.vue
Normal file
@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<div class="flex justify-center items-center h-dvh relative">
|
||||
<Game :config="gameConfig" @create="createGame">
|
||||
<Scene name="main" @preload="preloadScene" @create="createScene">
|
||||
<ZoneEditor v-if="isLoaded" :key="JSON.stringify(`${zoneEditorStore.zone?.id}_${zoneEditorStore.zone?.createdAt}_${zoneEditorStore.zone?.updatedAt}`)" />
|
||||
</Scene>
|
||||
</Game>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import config from '@/config'
|
||||
import 'phaser'
|
||||
import { ref, onBeforeUnmount } from 'vue'
|
||||
import { Game, Scene } from 'phavuer'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
||||
import ZoneEditor from '@/components/gameMaster/zoneEditor/ZoneEditor.vue'
|
||||
import { loadAssets } from '@/composables/zoneComposable'
|
||||
|
||||
const gameStore = useGameStore()
|
||||
const zoneEditorStore = useZoneEditorStore()
|
||||
const isLoaded = ref(false)
|
||||
|
||||
const gameConfig = {
|
||||
name: config.name,
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight,
|
||||
type: Phaser.AUTO, // AUTO, CANVAS, WEBGL, HEADLESS
|
||||
resolution: 5
|
||||
}
|
||||
|
||||
const createGame = (game: Phaser.Game) => {
|
||||
/**
|
||||
* Resize the game when the window is resized
|
||||
*/
|
||||
addEventListener('resize', () => {
|
||||
game.scale.resize(window.innerWidth, window.innerHeight)
|
||||
})
|
||||
|
||||
// We don't support canvas mode, only WebGL
|
||||
if (game.renderer.type === Phaser.CANVAS) {
|
||||
gameStore.addNotification({
|
||||
title: 'Warning',
|
||||
message: 'Your browser does not support WebGL. Please use a modern browser like Chrome, Firefox, or Edge.'
|
||||
})
|
||||
gameStore.disconnectSocket()
|
||||
}
|
||||
}
|
||||
|
||||
const preloadScene = async (scene: Phaser.Scene) => {
|
||||
isLoaded.value = false
|
||||
|
||||
/**
|
||||
* Create loading bar
|
||||
*/
|
||||
const width = scene.cameras.main.width
|
||||
const height = scene.cameras.main.height
|
||||
|
||||
const progressBox = scene.add.graphics()
|
||||
const progressBar = scene.add.graphics()
|
||||
progressBox.fillStyle(0x222222, 0.8)
|
||||
progressBox.fillRect(width / 2 - 180, height / 2, 320, 50)
|
||||
|
||||
const loadingText = scene.make.text({
|
||||
x: width / 2,
|
||||
y: height / 2 - 50,
|
||||
text: 'Loading...',
|
||||
style: {
|
||||
font: '20px monospace',
|
||||
fill: '#ffffff'
|
||||
}
|
||||
})
|
||||
loadingText.setOrigin(0.5, 0.5)
|
||||
|
||||
scene.load.on(Phaser.Loader.Events.PROGRESS, function (value: any) {
|
||||
progressBar.clear()
|
||||
progressBar.fillStyle(0x368f8b, 1)
|
||||
progressBar.fillRect(width / 2 - 180 + 10, height / 2 + 10, 300 * value, 30)
|
||||
})
|
||||
|
||||
scene.load.on(Phaser.Loader.Events.COMPLETE, function () {
|
||||
progressBar.destroy()
|
||||
progressBox.destroy()
|
||||
loadingText.destroy()
|
||||
isLoaded.value = true
|
||||
})
|
||||
|
||||
/**
|
||||
* Load the base assets into the Phaser scene
|
||||
*/
|
||||
scene.load.image('BLOCK', '/assets/zone/bt_tile.png')
|
||||
scene.load.image('TELEPORT', '/assets/zone/tp_tile.png')
|
||||
scene.load.image('blank_tile', '/assets/zone/blank_tile.png')
|
||||
scene.load.image('waypoint', '/assets/waypoint.png')
|
||||
|
||||
/**
|
||||
* Load the assets into the Phaser scene
|
||||
*/
|
||||
await loadAssets(scene)
|
||||
}
|
||||
|
||||
const createScene = async (scene: Phaser.Scene) => {
|
||||
/**
|
||||
* Create sprite animations
|
||||
* This is done here because phaser forces us to
|
||||
*/
|
||||
gameStore.assets.forEach((asset) => {
|
||||
if (asset.group !== 'sprite_animations') return
|
||||
|
||||
scene.anims.create({
|
||||
key: asset.key,
|
||||
frameRate: 7,
|
||||
frames: scene.anims.generateFrameNumbers(asset.key, { start: 0, end: asset.frameCount! - 1 }),
|
||||
repeat: -1
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
isLoaded.value = false
|
||||
})
|
||||
</script>
|
||||
@ -1,6 +1,6 @@
|
||||
import { ref } from 'vue'
|
||||
import { defineStore } from 'pinia'
|
||||
import type { Tile, Object, Sprite } from '@/types'
|
||||
import type { Tile, Object, Sprite, CharacterType } from '@/types'
|
||||
|
||||
export const useAssetManagerStore = defineStore('assetManager', () => {
|
||||
const tileList = ref<Tile[]>([])
|
||||
@ -12,6 +12,9 @@ export const useAssetManagerStore = defineStore('assetManager', () => {
|
||||
const spriteList = ref<Sprite[]>([])
|
||||
const selectedSprite = ref<Sprite | null>(null)
|
||||
|
||||
const characterTypeList = ref<CharacterType[]>([])
|
||||
const selectedCharacterType = ref<CharacterType | null>(null)
|
||||
|
||||
function setTileList(tiles: Tile[]) {
|
||||
tileList.value = tiles
|
||||
}
|
||||
@ -36,6 +39,14 @@ export const useAssetManagerStore = defineStore('assetManager', () => {
|
||||
selectedSprite.value = sprite
|
||||
}
|
||||
|
||||
function setCharacterTypeList(characterTypes: CharacterType[]) {
|
||||
characterTypeList.value = characterTypes
|
||||
}
|
||||
|
||||
function setSelectedCharacterType(characterType: CharacterType | null) {
|
||||
selectedCharacterType.value = characterType
|
||||
}
|
||||
|
||||
return {
|
||||
tileList,
|
||||
selectedTile,
|
||||
@ -43,11 +54,15 @@ export const useAssetManagerStore = defineStore('assetManager', () => {
|
||||
selectedObject,
|
||||
spriteList,
|
||||
selectedSprite,
|
||||
characterTypeList,
|
||||
selectedCharacterType,
|
||||
setTileList,
|
||||
setSelectedTile,
|
||||
setObjectList,
|
||||
setCharacterTypeList,
|
||||
setSelectedObject,
|
||||
setSpriteList,
|
||||
setSelectedSprite
|
||||
setSelectedSprite,
|
||||
setSelectedCharacterType
|
||||
}
|
||||
})
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { useGameStore } from '@/stores/gameStore'
|
||||
import type { Zone, Object, Tile, ZoneObject, ZoneEffects } from '@/types'
|
||||
import type { Zone, Object, Tile, ZoneEffect } from '@/types'
|
||||
|
||||
export type TeleportSettings = {
|
||||
toZoneId: number
|
||||
@ -22,7 +22,6 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
|
||||
objectList: [] as Object[],
|
||||
selectedTile: null as Tile | null,
|
||||
selectedObject: null as Object | null,
|
||||
selectedZoneObject: null as ZoneObject | null,
|
||||
objectDepth: 0,
|
||||
isTileListModalShown: false,
|
||||
isObjectListModalShown: false,
|
||||
@ -34,7 +33,7 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
|
||||
width: 0,
|
||||
height: 0,
|
||||
pvp: false,
|
||||
effects: [] as ZoneEffects[]
|
||||
zoneEffects: [] as ZoneEffect[]
|
||||
},
|
||||
teleportSettings: {
|
||||
toZoneId: 0,
|
||||
@ -67,9 +66,9 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
|
||||
if (!this.zone) return
|
||||
this.zone.pvp = pvp
|
||||
},
|
||||
setZoneEffects(zoneEffects: ZoneEffects) {
|
||||
setZoneEffects(zoneEffects: ZoneEffect[]) {
|
||||
if (!this.zone) return
|
||||
this.zone.zoneEffects = zoneEffects
|
||||
this.zoneSettings.zoneEffects = zoneEffects
|
||||
},
|
||||
setTool(tool: string) {
|
||||
this.tool = tool
|
||||
@ -95,9 +94,6 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
|
||||
setSelectedObject(object: any) {
|
||||
this.selectedObject = object
|
||||
},
|
||||
setSelectedZoneObject(zoneObject: ZoneObject | null) {
|
||||
this.selectedZoneObject = zoneObject
|
||||
},
|
||||
setObjectDepth(depth: number) {
|
||||
this.objectDepth = depth
|
||||
},
|
||||
@ -114,8 +110,8 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
|
||||
setTeleportSettings(teleportSettings: TeleportSettings) {
|
||||
this.teleportSettings = teleportSettings
|
||||
},
|
||||
reset() {
|
||||
// this.zone = null
|
||||
reset(resetZone = false) {
|
||||
if (resetZone) this.zone = null
|
||||
this.zoneList = []
|
||||
this.tileList = []
|
||||
this.objectList = []
|
||||
@ -123,7 +119,6 @@ export const useZoneEditorStore = defineStore('zoneEditor', {
|
||||
this.drawMode = 'tile'
|
||||
this.selectedTile = null
|
||||
this.selectedObject = null
|
||||
this.selectedZoneObject = null
|
||||
this.objectDepth = 0
|
||||
this.isSettingsModalShown = false
|
||||
this.isZoneListModalShown = false
|
||||
|
||||
10
src/types.ts
10
src/types.ts
@ -53,7 +53,7 @@ export type Zone = {
|
||||
height: number
|
||||
tiles: any | null
|
||||
pvp: boolean
|
||||
zoneEffects: ZoneEffects
|
||||
zoneEffects: ZoneEffect[]
|
||||
zoneEventTiles: ZoneEventTile[]
|
||||
zoneObjects: ZoneObject[]
|
||||
characters: Character[]
|
||||
@ -62,7 +62,7 @@ export type Zone = {
|
||||
updatedAt: Date
|
||||
}
|
||||
|
||||
export type ZoneEffects = {
|
||||
export type ZoneEffect = {
|
||||
id: string
|
||||
zoneId: number
|
||||
zone: Zone
|
||||
@ -136,8 +136,8 @@ export type CharacterType = {
|
||||
gender: CharacterGender
|
||||
race: CharacterRace
|
||||
characters: Character[]
|
||||
spriteId: string
|
||||
sprite: Sprite
|
||||
spriteId?: string
|
||||
sprite?: Sprite
|
||||
createdAt: Date
|
||||
updatedAt: Date
|
||||
}
|
||||
@ -221,4 +221,4 @@ export type WorldSettings = {
|
||||
isRainEnabled: boolean
|
||||
isFogEnabled: boolean
|
||||
fogDensity: number
|
||||
}
|
||||
}
|
||||
|
||||
@ -50,6 +50,7 @@ export default {
|
||||
},
|
||||
boxShadow: {
|
||||
'character': '0 4px 30px rgba(0, 0, 0, 0.1)',
|
||||
'inner': 'inset 0 0 12px 8px rgb(0, 0, 0)',
|
||||
},
|
||||
colors: {
|
||||
cyan: {
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import { fileURLToPath, URL } from 'node:url';
|
||||
import { defineConfig } from 'vite';
|
||||
import vue from '@vitejs/plugin-vue';
|
||||
import VueDevTools from 'vite-plugin-vue-devtools';
|
||||
import VueDevTools from 'vite-plugin-vue-devtools'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import { fileURLToPath, URL } from 'node:url'
|
||||
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import vue from '@vitejs/plugin-vue';
|
||||
import VueDevTools from 'vite-plugin-vue-devtools'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
@ -15,4 +14,4 @@ export default defineConfig({
|
||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user