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

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

@ -3,10 +3,10 @@
<div class="asset-categories">
<!-- Asset Categories -->
<a class="category selected">
<a class="category" :class="{ selected: selectedCategory === 'tiles' }" @click="() => selectedCategory = 'tiles'">
<span class="category-name">Tiles</span>
</a>
<a class="category">
<a class="category" :class="{ selected: selectedCategory === 'objects' }" @click="() => selectedCategory = 'objects'">
<span class="category-name">Objects</span>
</a>
<a class="category">
@ -19,25 +19,10 @@
<div class="divider categories"></div>
<!-- Assets -->
<div class="assets active" ref="elementToScroll" @scroll="onScroll">
<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>
<div class="assets" :class="{ active: selectedCategory === 'tiles' }" ref="elementToScroll" @scroll="onScroll">
<TileList />
</div>
<div class="assets">
<div class="assets" :class="{ active: selectedCategory === 'objects' }">
<a class="asset selected">
<span class="asset-name">Wall #1</span>
</a>
@ -54,6 +39,7 @@
<div class="divider assets-list"></div>
<div class="asset-info">
<div class="image-container">
<img src="/assets/placeholders/wall-1.png" />
</div>
@ -70,6 +56,7 @@
</div>
</form>
</div>
</div>
</div>
</template>
@ -77,11 +64,11 @@
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import {useSocketStore} from '@/stores/socket'
import config from '@/config'
import TileList from '@/components/utilities/assetManager/partials/TileList.vue'
const socket = useSocketStore()
const tileUploadField = ref(null)
const tiles = ref()
const selectedCategory = ref('tiles')
const hasScrolled = ref(false)
const elementToScroll = ref()
@ -102,30 +89,9 @@ function toTop() {
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>
<style lang="scss" scroped>
<style lang="scss">
@import '@/assets/scss/main';
.container {
@ -241,6 +207,12 @@ onMounted(() => {
}
}
.category {
&:hover {
cursor: pointer;
}
}
.asset-categories, .assets, .asset-info {
flex-direction: column;
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>