imshvc/noxious_client
1
0
Fork 0
forked from noxious/client
Code Pull Requests Activity

Moved tile list to its own component

Browse Source
This commit is contained in:
Dennis Postma 2024-06-23 16:50:28 +02:00
parent b2aa37d35b
commit 8896624e03
3 changed files with 163 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

177
package-lock.json generated
View File

@ -2244,39 +2244,39 @@
} }
}, },
"node_modules/@vue/compiler-core": { "node_modules/@vue/compiler-core": {
"version": "3.4.29", "version": "3.4.30",
"resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.29.tgz", "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.30.tgz",
"integrity": "sha512-TFKiRkKKsRCKvg/jTSSKK7mYLJEQdUiUfykbG49rubC9SfDyvT2JrzTReopWlz2MxqeLyxh9UZhvxEIBgAhtrg==", "integrity": "sha512-ZL8y4Xxdh8O6PSwfdZ1IpQ24PjTAieOz3jXb/MDTfDtANcKBMxg1KLm6OX2jofsaQGYfIVzd3BAG22i56/cF1w==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@babel/parser": "^7.24.7", "@babel/parser": "^7.24.7",
"@vue/shared": "3.4.29", "@vue/shared": "3.4.30",
"entities": "^4.5.0", "entities": "^4.5.0",
"estree-walker": "^2.0.2", "estree-walker": "^2.0.2",
"source-map-js": "^1.2.0" "source-map-js": "^1.2.0"
} }
}, },
"node_modules/@vue/compiler-dom": { "node_modules/@vue/compiler-dom": {
"version": "3.4.29", "version": "3.4.30",
"resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.29.tgz", "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.30.tgz",
"integrity": "sha512-A6+iZ2fKIEGnfPJejdB7b1FlJzgiD+Y/sxxKwJWg1EbJu6ZPgzaPQQ51ESGNv0CP6jm6Z7/pO6Ia8Ze6IKrX7w==", "integrity": "sha512-+16Sd8lYr5j/owCbr9dowcNfrHd+pz+w2/b5Lt26Oz/kB90C9yNbxQ3bYOvt7rI2bxk0nqda39hVcwDFw85c2Q==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@vue/compiler-core": "3.4.29", "@vue/compiler-core": "3.4.30",
"@vue/shared": "3.4.29" "@vue/shared": "3.4.30"
} }
}, },
"node_modules/@vue/compiler-sfc": { "node_modules/@vue/compiler-sfc": {
"version": "3.4.29", "version": "3.4.30",
"resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.29.tgz", "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.30.tgz",
"integrity": "sha512-zygDcEtn8ZimDlrEQyLUovoWgKQic6aEQqRXce2WXBvSeHbEbcAsXyCk9oG33ZkyWH4sl9D3tkYc1idoOkdqZQ==", "integrity": "sha512-8vElKklHn/UY8+FgUFlQrYAPbtiSB2zcgeRKW7HkpSRn/JjMRmZvuOtwDx036D1aqKNSTtXkWRfqx53Qb+HmMg==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@babel/parser": "^7.24.7", "@babel/parser": "^7.24.7",
"@vue/compiler-core": "3.4.29", "@vue/compiler-core": "3.4.30",
"@vue/compiler-dom": "3.4.29", "@vue/compiler-dom": "3.4.30",
"@vue/compiler-ssr": "3.4.29", "@vue/compiler-ssr": "3.4.30",
"@vue/shared": "3.4.29", "@vue/shared": "3.4.30",
"estree-walker": "^2.0.2", "estree-walker": "^2.0.2",
"magic-string": "^0.30.10", "magic-string": "^0.30.10",
"postcss": "^8.4.38", "postcss": "^8.4.38",
@ -2284,13 +2284,13 @@
} }
}, },
"node_modules/@vue/compiler-ssr": { "node_modules/@vue/compiler-ssr": {
"version": "3.4.29", "version": "3.4.30",
"resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.29.tgz", "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.30.tgz",
"integrity": "sha512-rFbwCmxJ16tDp3N8XCx5xSQzjhidYjXllvEcqX/lopkoznlNPz3jyy0WGJCyhAaVQK677WWFt3YO/WUEkMMUFQ==", "integrity": "sha512-ZJ56YZGXJDd6jky4mmM0rNaNP6kIbQu9LTKZDhcpddGe/3QIalB1WHHmZ6iZfFNyj5mSypTa4+qDJa5VIuxMSg==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@vue/compiler-dom": "3.4.29", "@vue/compiler-dom": "3.4.30",
"@vue/shared": "3.4.29" "@vue/shared": "3.4.30"
} }
}, },
"node_modules/@vue/devtools-api": { "node_modules/@vue/devtools-api": {
@ -2300,28 +2300,31 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/@vue/devtools-core": { "node_modules/@vue/devtools-core": {
"version": "7.3.3", "version": "7.3.4",
"resolved": "https://registry.npmjs.org/@vue/devtools-core/-/devtools-core-7.3.3.tgz", "resolved": "https://registry.npmjs.org/@vue/devtools-core/-/devtools-core-7.3.4.tgz",
"integrity": "sha512-i6Bwkx4OwfY0QVHjAdsivhlzZ2HMj7fbNRYJsWspQ+dkA1f3nTzycPqZmVUsm2TGkbQlhTMhCAdDoP97JKoc+g==", "integrity": "sha512-HiaskdszC1ajYhZkglBzc4BBb4OHAhYonoOaQMx62ZId++ezpd4n0CbM9SXYp8o1JhxImSdueKgJgtyvhm4vAA==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@vue/devtools-kit": "^7.3.3", "@vue/devtools-kit": "^7.3.4",
"@vue/devtools-shared": "^7.3.3", "@vue/devtools-shared": "^7.3.4",
"mitt": "^3.0.1", "mitt": "^3.0.1",
"nanoid": "^3.3.4", "nanoid": "^3.3.4",
"pathe": "^1.1.2", "pathe": "^1.1.2",
"vite-hot-client": "^0.2.3" "vite-hot-client": "^0.2.3"
},
"peerDependencies": {
"vue": "^3.0.0"
} }
}, },
"node_modules/@vue/devtools-kit": { "node_modules/@vue/devtools-kit": {
"version": "7.3.3", "version": "7.3.4",
"resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.3.3.tgz", "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.3.4.tgz",
"integrity": "sha512-m+dFI57BrzKYPKq73mt4CJ5GWld5OLBseLHPHGVP7CaILNY9o1gWVJWAJeF8XtQ9LTiMxZSaK6NcBsFuxAhD0g==", "integrity": "sha512-DalQZWaFLRyA4qfKT0WT7e+q2AwvYoTwd0pWqswHqcpviXw+oU6FlSJHMrEACB3lBHjN1KBS9Kh527sWIe1vcg==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@vue/devtools-shared": "^7.3.3", "@vue/devtools-shared": "^7.3.4",
"birpc": "^0.2.17", "birpc": "^0.2.17",
"hookable": "^5.5.3", "hookable": "^5.5.3",
"mitt": "^3.0.1", "mitt": "^3.0.1",
@ -2331,9 +2334,9 @@
} }
}, },
"node_modules/@vue/devtools-shared": { "node_modules/@vue/devtools-shared": {
"version": "7.3.3", "version": "7.3.4",
"resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.3.3.tgz", "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.3.4.tgz",
"integrity": "sha512-JQTVDM1WE4RRAsHTZvAB7+jczdHcbHgNUU/MWSIx5sV7FzCmnyWETPQ7K4/Y477weqT5xbybtBaK/OpzdaCiBQ==", "integrity": "sha512-5S5cHh7oWLZdboujnLteR3rT8UGfKHfA34aGLyFRB/B5TqBxmeLW1Rq32xW6TCDEy4isoYsYHGwJVp6DQcpiDA==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
@ -2381,17 +2384,18 @@
} }
}, },
"node_modules/@vue/language-core": { "node_modules/@vue/language-core": {
"version": "2.0.21", "version": "2.0.22",
"resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.0.21.tgz", "resolved": "https://registry.npmjs.org/@vue/language-core/-/language-core-2.0.22.tgz",
"integrity": "sha512-vjs6KwnCK++kIXT+eI63BGpJHfHNVJcUCr3RnvJsccT3vbJnZV5IhHR2puEkoOkIbDdp0Gqi1wEnv3hEd3WsxQ==", "integrity": "sha512-dNTAAtEOuMiz7N1s5tKpypnVVCtawxVSF5BukD0ELcYSw+DSbrSlYYSw8GuwvurodCeYFSHsmslE+c2sYDNoiA==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@volar/language-core": "~2.3.0-alpha.15", "@volar/language-core": "~2.3.1",
"@vue/compiler-dom": "^3.4.0", "@vue/compiler-dom": "^3.4.0",
"@vue/shared": "^3.4.0", "@vue/shared": "^3.4.0",
"computeds": "^0.0.1", "computeds": "^0.0.1",
"minimatch": "^9.0.3", "minimatch": "^9.0.3",
"muggle-string": "^0.4.1",
"path-browserify": "^1.0.1", "path-browserify": "^1.0.1",
"vue-template-compiler": "^2.7.14" "vue-template-compiler": "^2.7.14"
}, },
@ -2405,53 +2409,53 @@
} }
}, },
"node_modules/@vue/reactivity": { "node_modules/@vue/reactivity": {
"version": "3.4.29", "version": "3.4.30",
"resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.29.tgz", "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.30.tgz",
"integrity": "sha512-w8+KV+mb1a8ornnGQitnMdLfE0kXmteaxLdccm2XwdFxXst4q/Z7SEboCV5SqJNpZbKFeaRBBJBhW24aJyGINg==", "integrity": "sha512-bVJurnCe3LS0JII8PPoAA63Zd2MBzcKrEzwdQl92eHCcxtIbxD2fhNwJpa+KkM3Y/A4T5FUnmdhgKwOf6BfbcA==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@vue/shared": "3.4.29" "@vue/shared": "3.4.30"
} }
}, },
"node_modules/@vue/runtime-core": { "node_modules/@vue/runtime-core": {
"version": "3.4.29", "version": "3.4.30",
"resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.29.tgz", "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.30.tgz",
"integrity": "sha512-s8fmX3YVR/Rk5ig0ic0NuzTNjK2M7iLuVSZyMmCzN/+Mjuqqif1JasCtEtmtoJWF32pAtUjyuT2ljNKNLeOmnQ==", "integrity": "sha512-qaFEbnNpGz+tlnkaualomogzN8vBLkgzK55uuWjYXbYn039eOBZrWxyXWq/7qh9Bz2FPifZqGjVDl/FXiq9L2g==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@vue/reactivity": "3.4.29", "@vue/reactivity": "3.4.30",
"@vue/shared": "3.4.29" "@vue/shared": "3.4.30"
} }
}, },
"node_modules/@vue/runtime-dom": { "node_modules/@vue/runtime-dom": {
"version": "3.4.29", "version": "3.4.30",
"resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.29.tgz", "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.30.tgz",
"integrity": "sha512-gI10atCrtOLf/2MPPMM+dpz3NGulo9ZZR9d1dWo4fYvm+xkfvRrw1ZmJ7mkWtiJVXSsdmPbcK1p5dZzOCKDN0g==", "integrity": "sha512-tV6B4YiZRj5QsaJgw2THCy5C1H+2UeywO9tqgWEc21tn85qHEERndHN/CxlyXvSBFrpmlexCIdnqPuR9RM9thw==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@vue/reactivity": "3.4.29", "@vue/reactivity": "3.4.30",
"@vue/runtime-core": "3.4.29", "@vue/runtime-core": "3.4.30",
"@vue/shared": "3.4.29", "@vue/shared": "3.4.30",
"csstype": "^3.1.3" "csstype": "^3.1.3"
} }
}, },
"node_modules/@vue/server-renderer": { "node_modules/@vue/server-renderer": {
"version": "3.4.29", "version": "3.4.30",
"resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.29.tgz", "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.30.tgz",
"integrity": "sha512-HMLCmPI2j/k8PVkSBysrA2RxcxC5DgBiCdj7n7H2QtR8bQQPqKAe8qoaxLcInzouBmzwJ+J0x20ygN/B5mYBng==", "integrity": "sha512-TBD3eqR1DeDc0cMrXS/vEs/PWzq1uXxnvjoqQuDGFIEHFIwuDTX/KWAQKIBjyMWLFHEeTDGYVsYci85z2UbTDg==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@vue/compiler-ssr": "3.4.29", "@vue/compiler-ssr": "3.4.30",
"@vue/shared": "3.4.29" "@vue/shared": "3.4.30"
}, },
"peerDependencies": { "peerDependencies": {
"vue": "3.4.29" "vue": "3.4.30"
} }
}, },
"node_modules/@vue/shared": { "node_modules/@vue/shared": {
"version": "3.4.29", "version": "3.4.30",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.29.tgz", "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.30.tgz",
"integrity": "sha512-hQ2gAQcBO/CDpC82DCrinJNgOHI2v+FA7BDW4lMSPeBpQ7sRe2OLHWe5cph1s7D8DUQAwRt18dBDfJJ220APEA==", "integrity": "sha512-CLg+f8RQCHQnKvuHY9adMsMaQOcqclh6Z5V9TaoMgy0ut0tz848joZ7/CYFFyF/yZ5i2yaw7Fn498C+CNZVHIg==",
"license": "MIT" "license": "MIT"
}, },
"node_modules/@vue/test-utils": { "node_modules/@vue/test-utils": {
@ -5056,6 +5060,13 @@
"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
"license": "MIT" "license": "MIT"
}, },
"node_modules/muggle-string": {
"version": "0.4.1",
"resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.4.1.tgz",
"integrity": "sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==",
"dev": true,
"license": "MIT"
},
"node_modules/mustache": { "node_modules/mustache": {
"version": "4.2.0", "version": "4.2.0",
"resolved": "https://registry.npmjs.org/mustache/-/mustache-4.2.0.tgz", "resolved": "https://registry.npmjs.org/mustache/-/mustache-4.2.0.tgz",
@ -6836,15 +6847,15 @@
} }
}, },
"node_modules/vite-plugin-vue-devtools": { "node_modules/vite-plugin-vue-devtools": {
"version": "7.3.3", "version": "7.3.4",
"resolved": "https://registry.npmjs.org/vite-plugin-vue-devtools/-/vite-plugin-vue-devtools-7.3.3.tgz", "resolved": "https://registry.npmjs.org/vite-plugin-vue-devtools/-/vite-plugin-vue-devtools-7.3.4.tgz",
"integrity": "sha512-LWOCjArhHaSJ/rzInFkCnEccUB/F1sxyof0govFPpUeglq3CLnkP7bj55bQAixwYBN2pwK9DmDidcXXrX6QVFw==", "integrity": "sha512-5WKGIFldO9/E/J6d+x286ENieFUsexcg8Qgh/js3rEJtzipHzxiD47xMJVSBhl14n1E4jABIMuwmn1FYtpwm3w==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@vue/devtools-core": "^7.3.3", "@vue/devtools-core": "^7.3.4",
"@vue/devtools-kit": "^7.3.3", "@vue/devtools-kit": "^7.3.4",
"@vue/devtools-shared": "^7.3.3", "@vue/devtools-shared": "^7.3.4",
"execa": "^8.0.1", "execa": "^8.0.1",
"sirv": "^2.0.4", "sirv": "^2.0.4",
"vite-plugin-inspect": "^0.8.4", "vite-plugin-inspect": "^0.8.4",
@ -6952,16 +6963,16 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/vue": { "node_modules/vue": {
"version": "3.4.29", "version": "3.4.30",
"resolved": "https://registry.npmjs.org/vue/-/vue-3.4.29.tgz", "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.30.tgz",
"integrity": "sha512-8QUYfRcYzNlYuzKPfge1UWC6nF9ym0lx7mpGVPJYNhddxEf3DD0+kU07NTL0sXuiT2HuJuKr/iEO8WvXvT0RSQ==", "integrity": "sha512-NcxtKCwkdf1zPsr7Y8+QlDBCGqxvjLXF2EX+yi76rV5rrz90Y6gK1cq0olIhdWGgrlhs9ElHuhi9t3+W5sG5Xw==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@vue/compiler-dom": "3.4.29", "@vue/compiler-dom": "3.4.30",
"@vue/compiler-sfc": "3.4.29", "@vue/compiler-sfc": "3.4.30",
"@vue/runtime-dom": "3.4.29", "@vue/runtime-dom": "3.4.30",
"@vue/server-renderer": "3.4.29", "@vue/server-renderer": "3.4.30",
"@vue/shared": "3.4.29" "@vue/shared": "3.4.30"
}, },
"peerDependencies": { "peerDependencies": {
"typescript": "*" "typescript": "*"
@ -6973,9 +6984,9 @@
} }
}, },
"node_modules/vue-component-type-helpers": { "node_modules/vue-component-type-helpers": {
"version": "2.0.21", "version": "2.0.22",
"resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-2.0.21.tgz", "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-2.0.22.tgz",
"integrity": "sha512-3NaicyZ7N4B6cft4bfb7dOnPbE9CjLcx+6wZWAg5zwszfO4qXRh+U52dN5r5ZZfc6iMaxKCEcoH9CmxxoFZHLg==", "integrity": "sha512-gPr2Ba7efUwy/Vfbuf735bHSVdN4ycoZUCHfypkI33M9DUH+ieRblLLVM2eImccFYaWNWwEzURx02EgoXDBmaQ==",
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
@ -7016,14 +7027,14 @@
} }
}, },
"node_modules/vue-tsc": { "node_modules/vue-tsc": {
"version": "2.0.21", "version": "2.0.22",
"resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.21.tgz", "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-2.0.22.tgz",
"integrity": "sha512-E6x1p1HaHES6Doy8pqtm7kQern79zRtIewkf9fiv7Y43Zo4AFDS5hKi+iHi2RwEhqRmuiwliB1LCEFEGwvxQnw==", "integrity": "sha512-lMBIwPBO0sxCcmvu45yt1b035AaQ8/XSXQDk8m75y4j0jSXY/y/XzfEtssQ9JMS47lDaR10O3/926oCs8OeGUw==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@volar/typescript": "~2.3.0-alpha.15", "@volar/typescript": "~2.3.1",
"@vue/language-core": "2.0.21", "@vue/language-core": "2.0.22",
"semver": "^7.5.4" "semver": "^7.5.4"
}, },
"bin": { "bin": {

62
src/components/utilities/assetManager/AssetManager.vue
View File

@ -3,10 +3,10 @@
<div class="asset-categories"> <div class="asset-categories">
<!-- Asset Categories --> <!-- Asset Categories -->
<a class="category selected"> <a class="category" :class="{ selected: selectedCategory === 'tiles' }" @click="() => selectedCategory = 'tiles'">
<span class="category-name">Tiles</span> <span class="category-name">Tiles</span>
</a> </a>
<a class="category"> <a class="category" :class="{ selected: selectedCategory === 'objects' }" @click="() => selectedCategory = 'objects'">
<span class="category-name">Objects</span> <span class="category-name">Objects</span>
</a> </a>
<a class="category"> <a class="category">
@ -19,25 +19,10 @@
<div class="divider categories"></div> <div class="divider categories"></div>
<!-- Assets --> <!-- Assets -->
<div class="assets active" ref="elementToScroll" @scroll="onScroll"> <div class="assets" :class="{ active: selectedCategory === 'tiles' }" ref="elementToScroll" @scroll="onScroll">
<div class="asset"> <TileList />
<input class="input-cyan search-field" placeholder="Search..." />
</div>
<div class="asset add-new">
<span class="asset-name">Upload new</span>
<label for="upload-asset" class="file-upload">
<input id="upload-asset" ref="tileUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
Choose file
</label>
</div>
<a class="asset" v-for="(tile, index) in tiles" :key="index">
<div class="asset-details">
<img :src="`${config.server_endpoint}/assets/tiles/${tile}`" />
<span class="asset-name">{{ tile }}</span>
</div>
</a>
</div> </div>
<div class="assets"> <div class="assets" :class="{ active: selectedCategory === 'objects' }">
<a class="asset selected"> <a class="asset selected">
<span class="asset-name">Wall #1</span> <span class="asset-name">Wall #1</span>
</a> </a>
@ -54,6 +39,7 @@
<div class="divider assets-list"></div> <div class="divider assets-list"></div>
<div class="asset-info"> <div class="asset-info">
<div class="image-container"> <div class="image-container">
<img src="/assets/placeholders/wall-1.png" /> <img src="/assets/placeholders/wall-1.png" />
</div> </div>
@ -70,6 +56,7 @@
</div> </div>
</form> </form>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
@ -77,11 +64,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, ref } from 'vue' import { onMounted, ref } from 'vue'
import {useSocketStore} from '@/stores/socket' import {useSocketStore} from '@/stores/socket'
import config from '@/config' import TileList from '@/components/utilities/assetManager/partials/TileList.vue'
const socket = useSocketStore() const socket = useSocketStore()
const tileUploadField = ref(null)
const tiles = ref() const selectedCategory = ref('tiles')
const hasScrolled = ref(false) const hasScrolled = ref(false)
const elementToScroll = ref() const elementToScroll = ref()
@ -102,30 +89,9 @@ function toTop() {
behavior: "smooth", behavior: "smooth",
}); });
} }
const handleFileUpload = (e: Event) => {
const files = (e.target as HTMLInputElement).files
if (!files) return
socket.connection.emit('gm:tile:upload', files, (response: boolean) => {
if (!response) {
console.error('Failed to upload tile')
return
}
socket.connection.emit('gm:tile:list', {}, (response: string[]) => {
tiles.value = response
})
})
}
onMounted(() => {
socket.connection.emit('gm:tile:list', {}, (response: string[]) => {
tiles.value = response
})
})
</script> </script>
<style lang="scss" scroped> <style lang="scss">
@import '@/assets/scss/main'; @import '@/assets/scss/main';
.container { .container {
@ -241,6 +207,12 @@ onMounted(() => {
} }
} }
.category {
&:hover {
cursor: pointer;
}
}
.asset-categories, .assets, .asset-info { .asset-categories, .assets, .asset-info {
flex-direction: column; flex-direction: column;
position: relative; position: relative;

52
src/components/utilities/assetManager/partials/TileList.vue Normal file
View File

@ -0,0 +1,52 @@
<template>
<div class="asset">
<input class="input-cyan search-field" placeholder="Search..." />
</div>
<div class="asset add-new">
<span class="asset-name">Upload new</span>
<label for="upload-asset" class="file-upload">
<input id="upload-asset" ref="tileUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
Choose file
</label>
</div>
<a class="asset" v-for="(tile, index) in tiles" :key="index">
<div class="asset-details">
<img :src="`${config.server_endpoint}/assets/tiles/${tile}`" />
<span class="asset-name">{{ tile }}</span>
</div>
</a>
</template>
<script setup lang="ts">
import {useSocketStore} from '@/stores/socket'
import config from '@/config'
import { onMounted, ref } from 'vue'
const socket = useSocketStore()
const tileUploadField = ref(null)
const tiles = ref()
const handleFileUpload = (e: Event) => {
const files = (e.target as HTMLInputElement).files
if (!files) return
socket.connection.emit('gm:tile:upload', files, (response: boolean) => {
if (!response) {
console.error('Failed to upload tile')
return
}
socket.connection.emit('gm:tile:list', {}, (response: string[]) => {
tiles.value = response
})
})
}
onMounted(() => {
socket.connection.emit('gm:tile:list', {}, (response: string[]) => {
tiles.value = response
})
})
</script>
<style lang="scss" scoped>
</style>