diff --git a/package-lock.json b/package-lock.json
index 55710e7..fecad17 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -100,9 +100,9 @@
}
},
"node_modules/@babel/compat-data": {
- "version": "7.24.8",
- "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.24.8.tgz",
- "integrity": "sha512-c4IM7OTg6k1Q+AJ153e2mc2QVTezTwnb4VzquwcyiEzGnW0Kedv4do/TrkU98qPeC5LNiMt/QXwIjzYXLBpyZg==",
+ "version": "7.24.9",
+ "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.24.9.tgz",
+ "integrity": "sha512-e701mcfApCJqMMueQI0Fb68Amflj83+dvAvHawoBpAz+GDjCIyGHzNwnefjsWJ3xiYAqqiQFoWbspGYBdb2/ng==",
"dev": true,
"license": "MIT",
"engines": {
@@ -110,22 +110,22 @@
}
},
"node_modules/@babel/core": {
- "version": "7.24.8",
- "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.8.tgz",
- "integrity": "sha512-6AWcmZC/MZCO0yKys4uhg5NlxL0ESF3K6IAaoQ+xSXvPyPyxNWRafP+GDbI88Oh68O7QkJgmEtedWPM9U0pZNg==",
+ "version": "7.24.9",
+ "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.9.tgz",
+ "integrity": "sha512-5e3FI4Q3M3Pbr21+5xJwCv6ZT6KmGkI0vw3Tozy5ODAQFTIWe37iT8Cr7Ice2Ntb+M3iSKCEWMB1MBgKrW3whg==",
"dev": true,
"license": "MIT",
"dependencies": {
"@ampproject/remapping": "^2.2.0",
"@babel/code-frame": "^7.24.7",
- "@babel/generator": "^7.24.8",
+ "@babel/generator": "^7.24.9",
"@babel/helper-compilation-targets": "^7.24.8",
- "@babel/helper-module-transforms": "^7.24.8",
+ "@babel/helper-module-transforms": "^7.24.9",
"@babel/helpers": "^7.24.8",
"@babel/parser": "^7.24.8",
"@babel/template": "^7.24.7",
"@babel/traverse": "^7.24.8",
- "@babel/types": "^7.24.8",
+ "@babel/types": "^7.24.9",
"convert-source-map": "^2.0.0",
"debug": "^4.1.0",
"gensync": "^1.0.0-beta.2",
@@ -151,13 +151,13 @@
}
},
"node_modules/@babel/generator": {
- "version": "7.24.8",
- "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.24.8.tgz",
- "integrity": "sha512-47DG+6F5SzOi0uEvK4wMShmn5yY0mVjVJoWTphdY2B4Rx9wHgjK7Yhtr0ru6nE+sn0v38mzrWOlah0p/YlHHOQ==",
+ "version": "7.24.9",
+ "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.24.9.tgz",
+ "integrity": "sha512-G8v3jRg+z8IwY1jHFxvCNhOPYPterE4XljNgdGTYfSTtzzwjIswIzIaSPSLs3R7yFuqnqNeay5rjICfqVr+/6A==",
"dev": true,
"license": "MIT",
"dependencies": {
- "@babel/types": "^7.24.8",
+ "@babel/types": "^7.24.9",
"@jridgewell/gen-mapping": "^0.3.5",
"@jridgewell/trace-mapping": "^0.3.25",
"jsesc": "^2.5.1"
@@ -319,9 +319,9 @@
}
},
"node_modules/@babel/helper-module-transforms": {
- "version": "7.24.8",
- "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.24.8.tgz",
- "integrity": "sha512-m4vWKVqvkVAWLXfHCCfff2luJj86U+J0/x+0N3ArG/tP0Fq7zky2dYwMbtPmkc/oulkkbjdL3uWzuoBwQ8R00Q==",
+ "version": "7.24.9",
+ "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.24.9.tgz",
+ "integrity": "sha512-oYbh+rtFKj/HwBQkFlUzvcybzklmVdVV3UU+mN7n2t/q3yGHbuVdNxyFvSBO1tfvjyArpHNcWMAzsSPdyI46hw==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -745,9 +745,9 @@
}
},
"node_modules/@babel/types": {
- "version": "7.24.8",
- "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.8.tgz",
- "integrity": "sha512-SkSBEHwwJRU52QEVZBmMBnE5Ux2/6WU1grdYyOhpbCNxbmJrDuDCphBzKZSO3taf0zztp+qkWlymE5tVL5l0TA==",
+ "version": "7.24.9",
+ "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.9.tgz",
+ "integrity": "sha512-xm8XrMKz0IlUdocVbYJe0Z9xEgidU7msskG8BbhnTPK/HZ2z/7FP7ykqPgrUH+C+r414mNfNWam1f2vqOjqjYQ==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -2153,30 +2153,30 @@
}
},
"node_modules/@volar/language-core": {
- "version": "2.4.0-alpha.15",
- "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.0-alpha.15.tgz",
- "integrity": "sha512-mt8z4Fm2WxfQYoQHPcKVjLQV6PgPqyKLbkCVY2cr5RSaamqCHjhKEpsFX66aL4D/7oYguuaUw9Bx03Vt0TpIIA==",
+ "version": "2.4.0-alpha.16",
+ "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.0-alpha.16.tgz",
+ "integrity": "sha512-oOTnIZlx0P/idFwVw+W0NbzKDtZAQMzXSdIFfTePCKcXlb4Ys12GaGkx8NF9dsvPYV3nbv3ZsSxnkZWBmNKd7A==",
"dev": true,
"license": "MIT",
"dependencies": {
- "@volar/source-map": "2.4.0-alpha.15"
+ "@volar/source-map": "2.4.0-alpha.16"
}
},
"node_modules/@volar/source-map": {
- "version": "2.4.0-alpha.15",
- "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.0-alpha.15.tgz",
- "integrity": "sha512-8Htngw5TmBY4L3ClDqBGyfLhsB8EmoEXUH1xydyEtEoK0O6NX5ur4Jw8jgvscTlwzizyl/wsN1vn0cQXVbbXYg==",
+ "version": "2.4.0-alpha.16",
+ "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.0-alpha.16.tgz",
+ "integrity": "sha512-sL9vNG7iR2hiKZor7UkD5Sufu3QCia4cbp2gX/nGRNSdaPbhOpdAoavwlBm0PrVkpiA19NZuavZoobD8krviFg==",
"dev": true,
"license": "MIT"
},
"node_modules/@volar/typescript": {
- "version": "2.4.0-alpha.15",
- "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.0-alpha.15.tgz",
- "integrity": "sha512-U3StRBbDuxV6Woa4hvGS4kz3XcOzrWUKgFdEFN+ba1x3eaYg7+ytau8ul05xgA+UNGLXXsKur7fTUhDFyISk0w==",
+ "version": "2.4.0-alpha.16",
+ "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.0-alpha.16.tgz",
+ "integrity": "sha512-WCx7z5O81McCQp2cC0c8081y+MgTiAR2WAiJjVL4tr4Qh4GgqK0lgn3CqAjcKizaK1R5y3wfrUqgIYr+QeFYcw==",
"dev": true,
"license": "MIT",
"dependencies": {
- "@volar/language-core": "2.4.0-alpha.15",
+ "@volar/language-core": "2.4.0-alpha.16",
"path-browserify": "^1.0.1",
"vscode-uri": "^3.0.8"
}
@@ -2316,14 +2316,14 @@
"license": "MIT"
},
"node_modules/@vue/devtools-core": {
- "version": "7.3.5",
- "resolved": "https://registry.npmjs.org/@vue/devtools-core/-/devtools-core-7.3.5.tgz",
- "integrity": "sha512-uSC3IkIp6MtyJYSh5xzY99sgqlAXLq+peE2KKXTi6JeRHOtMngFWFWENXi70IJ1EVGYztiFQoHhI9WZcgKBz8g==",
+ "version": "7.3.6",
+ "resolved": "https://registry.npmjs.org/@vue/devtools-core/-/devtools-core-7.3.6.tgz",
+ "integrity": "sha512-XqFYVkyS3eySHF4bgLt+KF6yL6nYzVY/JTJHnK6KIJXIE4GIAxmn5Gxfsb4cUG9sl0FGiMqRCnM37Q+P08wr8A==",
"dev": true,
"license": "MIT",
"dependencies": {
- "@vue/devtools-kit": "^7.3.5",
- "@vue/devtools-shared": "^7.3.5",
+ "@vue/devtools-kit": "^7.3.6",
+ "@vue/devtools-shared": "^7.3.6",
"mitt": "^3.0.1",
"nanoid": "^3.3.4",
"pathe": "^1.1.2",
@@ -2334,13 +2334,13 @@
}
},
"node_modules/@vue/devtools-kit": {
- "version": "7.3.5",
- "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.3.5.tgz",
- "integrity": "sha512-wwfi10gJ1HMtjzcd8aIOnzBHlIRqsYDgcDyrKvkeyc0Gbcoe7UrkXRVHZUOtcxxoplHA0PwpT6wFg0uUCmi8Ww==",
+ "version": "7.3.6",
+ "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.3.6.tgz",
+ "integrity": "sha512-5Ym9V3fkJenEoptqKoo+cgY5RTVwrSssFdzRsuyIgaeiskCT+rRJeQdwoo81tyrQ1mfS7Er1rYZlSzr3Y3L/ew==",
"dev": true,
"license": "MIT",
"dependencies": {
- "@vue/devtools-shared": "^7.3.5",
+ "@vue/devtools-shared": "^7.3.6",
"birpc": "^0.2.17",
"hookable": "^5.5.3",
"mitt": "^3.0.1",
@@ -2350,9 +2350,9 @@
}
},
"node_modules/@vue/devtools-shared": {
- "version": "7.3.5",
- "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.3.5.tgz",
- "integrity": "sha512-Rqii3VazmWTi67a86rYopi61n5Ved05EybJCwyrfoO9Ok3MaS/4yRFl706ouoISMlyrASJFEzM0/AiDA6w4f9A==",
+ "version": "7.3.6",
+ "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.3.6.tgz",
+ "integrity": "sha512-R/FOmdJV+hhuwcNoxp6e87RRkEeDMVhWH+nOsnHUrwjjsyeXJ2W1475Ozmw+cbZhejWQzftkHVKO28Fuo1yqCw==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -3037,9 +3037,9 @@
}
},
"node_modules/caniuse-lite": {
- "version": "1.0.30001641",
- "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001641.tgz",
- "integrity": "sha512-Phv5thgl67bHYo1TtMY/MurjkHhV4EDaCosezRXgZ8jzA/Ub+wjxAvbGvjoFENStinwi5kCyOYV3mi5tOGykwA==",
+ "version": "1.0.30001642",
+ "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001642.tgz",
+ "integrity": "sha512-3XQ0DoRgLijXJErLSl+bLnJ+Et4KqV1PY6JJBGAFlsNsz31zeAIncyeZfLCabHK/jtSh+671RM9YMldxjUPZtA==",
"dev": true,
"funding": [
{
@@ -6067,9 +6067,9 @@
}
},
"node_modules/prettier": {
- "version": "3.3.2",
- "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.2.tgz",
- "integrity": "sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA==",
+ "version": "3.3.3",
+ "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
+ "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
"dev": true,
"license": "MIT",
"bin": {
@@ -6906,9 +6906,9 @@
}
},
"node_modules/tailwindcss": {
- "version": "3.4.4",
- "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.4.tgz",
- "integrity": "sha512-ZoyXOdJjISB7/BcLTR6SEsLgKtDStYyYZVLsUtWChO4Ps20CBad7lfJKVDiejocV4ME1hLmyY0WJE3hSDcmQ2A==",
+ "version": "3.4.5",
+ "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.5.tgz",
+ "integrity": "sha512-DlTxttYcogpDfx3tf/8jfnma1nfAYi2cBUYV2YNoPPecwmO3YGiFlOX9D8tGAu+EDF38ryBzvrDKU/BLMsUwbw==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -7356,15 +7356,15 @@
}
},
"node_modules/vite-plugin-vue-devtools": {
- "version": "7.3.5",
- "resolved": "https://registry.npmjs.org/vite-plugin-vue-devtools/-/vite-plugin-vue-devtools-7.3.5.tgz",
- "integrity": "sha512-6omLXTfYu0bmSmncPSbj4mdMPB3t5dAZkUyriJikahGEnvv5gynHlydDsJShHT6l/5dCkvmSesSji/2a6FfutQ==",
+ "version": "7.3.6",
+ "resolved": "https://registry.npmjs.org/vite-plugin-vue-devtools/-/vite-plugin-vue-devtools-7.3.6.tgz",
+ "integrity": "sha512-j4Cssv6DVBtMZfyVBEm/4MZy7BiL6RedEn+f9jT3zFyGZKG1vNuEpTO86XvPPbHbYdITFyrkWb7VQuWyhfSgqA==",
"dev": true,
"license": "MIT",
"dependencies": {
- "@vue/devtools-core": "^7.3.5",
- "@vue/devtools-kit": "^7.3.5",
- "@vue/devtools-shared": "^7.3.5",
+ "@vue/devtools-core": "^7.3.6",
+ "@vue/devtools-kit": "^7.3.6",
+ "@vue/devtools-shared": "^7.3.6",
"execa": "^8.0.1",
"sirv": "^2.0.4",
"vite-plugin-inspect": "^0.8.4",
diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
index 745079c..3177c5d 100644
--- a/src/assets/scss/main.scss
+++ b/src/assets/scss/main.scss
@@ -59,7 +59,7 @@ input {
}
.input-cyan {
- @apply py-2 px-2.5 font-titles border border-solid border-cyan bg-white/80 rounded;
+ @apply py-2 px-2.5 font-titles border border-solid border-cyan bg-white/70 rounded;
&:focus,
&:focus-visible {
@apply outline-2 outline-cyan;
diff --git a/src/components/forms/ChipsInput.vue b/src/components/forms/ChipsInput.vue
index 30d3784..4a4415f 100644
--- a/src/components/forms/ChipsInput.vue
+++ b/src/components/forms/ChipsInput.vue
@@ -4,34 +4,50 @@
<span>{{ chip }}</span>
<i class="cursor-pointer text-white font-light font-default not-italic hover:text-gray-50" @click="deleteChip(i)">X</i>
</div>
- <!-- Use keypress event and prevent modifier -->
- <input class="outline-none border-none max-w-[250px] p-1 m-1 text-white" v-model="currentInput" @keypress.enter.prevent="saveChip" @keydown.delete="backspaceDelete" />
+ <input
+ class="outline-none border-none max-w-[250px] p-1 m-1 text-white"
+ v-model="currentInput"
+ @keypress.enter.prevent="saveChip"
+ @keydown.delete="backspaceDelete"
+ />
</div>
</template>
<script setup>
-import { ref } from 'vue'
+import { ref, watch } from 'vue'
-const modelValue = defineModel('modelValue', { type: Array, default: () => [] })
+const props = defineProps({
+ modelValue: {
+ type: Array,
+ default: () => []
+ }
+})
+
+const emit = defineEmits(['update:modelValue'])
const currentInput = ref('')
+const internalValue = ref(props.modelValue || [])
+
+watch(() => props.modelValue, (newVal) => {
+ internalValue.value = newVal || []
+}, { immediate: true })
const saveChip = (event) => {
- // Prevent form submission explicitly if needed
event.preventDefault()
- if (currentInput.value.trim() && !modelValue.value.includes(currentInput.value)) {
- modelValue.value = [...modelValue.value, currentInput.value]
+
+ if (currentInput.value.trim() && !internalValue.value.includes(currentInput.value)) {
+ emit('update:modelValue', [...internalValue.value, currentInput.value])
currentInput.value = ''
}
}
const deleteChip = (index) => {
- modelValue.value = modelValue.value.filter((_, i) => i !== index)
+ emit('update:modelValue', internalValue.value.filter((_, i) => i !== index))
}
const backspaceDelete = (event) => {
- if (event.key === 'Backspace' && currentInput.value === '' && modelValue.value.length > 0) {
- modelValue.value = modelValue.value.slice(0, -1)
+ if (event.key === 'Backspace' && currentInput.value === '' && internalValue.value.length > 0) {
+ emit('update:modelValue', internalValue.value.slice(0, -1))
}
}
-</script>
+</script>
\ No newline at end of file
diff --git a/src/components/utilities/assetManager/partials/ObjectDetails.vue b/src/components/utilities/assetManager/partials/ObjectDetails.vue
index 5b2d4f1..9080d38 100644
--- a/src/components/utilities/assetManager/partials/ObjectDetails.vue
+++ b/src/components/utilities/assetManager/partials/ObjectDetails.vue
@@ -20,6 +20,10 @@
<label class="mb-1.5 font-titles" for="origin-y">Origin Y</label>
<input v-model="objectOriginY" class="input-cyan" type="number" step="any" name="origin-y" placeholder="Origin Y" />
</div>
+ <div class="w-full flex flex-col mb-5">
+ <label class="mb-1.5 font-titles" for="origin-x">Tags</label>
+ <ChipsInput v-model="objectTags" @update:modelValue="objectTags = $event" />
+ </div>
<button class="btn-cyan px-[15px] py-1.5 min-w-[100px]" type="submit">Save</button>
</form>
</div>
@@ -28,11 +32,12 @@
<script setup lang="ts">
import type { Object } from '@/types'
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { computed, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { useAssetManagerStore } from '@/stores/assetManager'
import { useZoneEditorStore } from '@/stores/zoneEditor'
import { useGameStore } from '@/stores/game'
import config from '@/config'
+import ChipsInput from '@/components/forms/ChipsInput.vue'
const gameStore = useGameStore()
const assetManagerStore = useAssetManagerStore()
@@ -41,6 +46,7 @@ const zoneEditorStore = useZoneEditorStore()
const selectedObject = computed(() => assetManagerStore.selectedObject)
const objectName = ref('')
+const objectTags = ref([] as string[])
const objectOriginX = ref(0)
const objectOriginY = ref(0)
@@ -50,19 +56,13 @@ if (!selectedObject.value) {
if (selectedObject.value) {
objectName.value = selectedObject.value.name
+ objectTags.value = selectedObject.value.tags
objectOriginX.value = selectedObject.value.origin_x
objectOriginY.value = selectedObject.value.origin_y
}
-watch(selectedObject, (object: Object | null) => {
- if (!object) return
- objectName.value = object.name
- objectOriginX.value = object.origin_x
- objectOriginY.value = object.origin_y
-})
-
function removeObject() {
- gameStore.connection.emit('gm:object:remove', { object: selectedObject.value?.id }, (response: boolean) => {
+ gameStore.connection?.emit('gm:object:remove', { object: selectedObject.value?.id }, (response: boolean) => {
if (!response) {
console.error('Failed to remove object')
return
@@ -72,7 +72,7 @@ function removeObject() {
}
function refreshObjectList() {
- gameStore.connection.emit('gm:object:list', {}, (response: Object[]) => {
+ gameStore.connection?.emit('gm:object:list', {}, (response: Object[]) => {
assetManagerStore.setObjectList(response)
assetManagerStore.setSelectedObject(null)
@@ -89,11 +89,13 @@ function saveObject() {
return
}
- gameStore.connection.emit(
+ console.log(objectTags.value)
+ gameStore.connection?.emit(
'gm:object:update',
{
id: selectedObject.value.id,
name: objectName.value,
+ tags: objectTags.value,
origin_x: objectOriginX.value,
origin_y: objectOriginY.value
},
@@ -107,6 +109,14 @@ function saveObject() {
)
}
+watch(selectedObject, (object: Object | null) => {
+ if (!object) return
+ objectName.value = object.name
+ objectTags.value = object.tags
+ objectOriginX.value = object.origin_x
+ objectOriginY.value = object.origin_y
+})
+
onMounted(() => {
if (!selectedObject.value) return
})
@@ -114,4 +124,5 @@ onMounted(() => {
onBeforeUnmount(() => {
assetManagerStore.setSelectedObject(null)
})
+
</script>
diff --git a/src/components/utilities/assetManager/partials/ObjectList.vue b/src/components/utilities/assetManager/partials/ObjectList.vue
index c09d512..a3e97f8 100644
--- a/src/components/utilities/assetManager/partials/ObjectList.vue
+++ b/src/components/utilities/assetManager/partials/ObjectList.vue
@@ -1,6 +1,6 @@
<template>
<div class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap">
- <label for="upload-asset" class="bg-cyan/50 border border-solid border-white rounded drop-shadow-20 py-1.5 px-[15px] inline-flex hover:bg-cyan hover:cursor-pointer">
+ <label for="upload-asset" class="bg-cyan/50 border border-solid border-white/25 rounded drop-shadow-20 py-1.5 px-[15px] inline-flex hover:bg-cyan hover:cursor-pointer">
<input class="hidden" id="upload-asset" ref="objectUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
Upload object(s)
</label>
diff --git a/src/components/utilities/assetManager/partials/TileDetails.vue b/src/components/utilities/assetManager/partials/TileDetails.vue
index 518b800..7e4d244 100644
--- a/src/components/utilities/assetManager/partials/TileDetails.vue
+++ b/src/components/utilities/assetManager/partials/TileDetails.vue
@@ -24,7 +24,7 @@
<script setup lang="ts">
import type { Tile } from '@/types'
-import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref, toRaw, watch } from 'vue'
import { useAssetManagerStore } from '@/stores/assetManager'
import { useZoneEditorStore } from '@/stores/zoneEditor'
import { useGameStore } from '@/stores/game'
diff --git a/src/components/utilities/assetManager/partials/TileList.vue b/src/components/utilities/assetManager/partials/TileList.vue
index e9571e4..dbef42f 100644
--- a/src/components/utilities/assetManager/partials/TileList.vue
+++ b/src/components/utilities/assetManager/partials/TileList.vue
@@ -1,6 +1,6 @@
<template>
<div class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap">
- <label for="upload-asset" class="bg-cyan/50 border border-solid border-white rounded drop-shadow-20 py-1.5 px-[15px] inline-flex hover:bg-cyan hover:cursor-pointer">
+ <label for="upload-asset" class="bg-cyan/50 border border-solid border-white/25 rounded drop-shadow-20 py-1.5 px-[15px] inline-flex hover:bg-cyan hover:cursor-pointer">
<input class="hidden" id="upload-asset" ref="tileUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
Upload tile(s)
</label>
diff --git a/src/components/utilities/zoneEditor/Objects.vue b/src/components/utilities/zoneEditor/Objects.vue
index 1179a0f..237aec0 100644
--- a/src/components/utilities/zoneEditor/Objects.vue
+++ b/src/components/utilities/zoneEditor/Objects.vue
@@ -18,6 +18,17 @@
</template>
<template #modalBody>
<div class="m-[15px]">
+ <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) }"
+ >
+ {{ tag }}
+ </button>
+ </div>
<div class="flex justify-between flex-wrap gap-2.5 items-center">
<div v-for="(object, index) in filteredObjects" :key="index" class="max-w-[25%] inline-block">
<img
@@ -52,18 +63,33 @@ const isModalOpen = ref(false)
const zoneEditorStore = useZoneEditorStore()
const searchQuery = ref('')
const objectDepth = ref(0)
+const selectedTags = ref<string[]>([])
watch(objectDepth, (depth) => {
zoneEditorStore.setObjectDepth(depth)
})
-const filteredObjects = computed(() => {
- if (!searchQuery.value) {
- return zoneEditorStore.objectList
- }
- return zoneEditorStore.objectList.filter((object) => object.name.toLowerCase().includes(searchQuery.value.toLowerCase()))
+const uniqueTags = computed(() => {
+ const allTags = zoneEditorStore.objectList.flatMap(obj => obj.tags || [])
+ return Array.from(new Set(allTags))
})
+const filteredObjects = computed(() => {
+ return zoneEditorStore.objectList.filter((object) => {
+ const matchesSearch = !searchQuery.value || object.name.toLowerCase().includes(searchQuery.value.toLowerCase());
+ const matchesTags = selectedTags.value.length === 0 || (object.tags && selectedTags.value.some(tag => object.tags.includes(tag)));
+ return matchesSearch && matchesTags;
+ })
+});
+
+const toggleTag = (tag: string) => {
+ if (selectedTags.value.includes(tag)) {
+ selectedTags.value = selectedTags.value.filter(t => t !== tag)
+ } else {
+ selectedTags.value.push(tag)
+ }
+}
+
onMounted(async () => {
zoneEditorStore.setObjectDepth(0)
@@ -72,4 +98,4 @@ onMounted(async () => {
zoneEditorStore.setObjectList(response)
})
})
-</script>
+</script>
\ No newline at end of file
diff --git a/src/components/utilities/zoneEditor/Tiles.vue b/src/components/utilities/zoneEditor/Tiles.vue
index e8222ae..4a30c22 100644
--- a/src/components/utilities/zoneEditor/Tiles.vue
+++ b/src/components/utilities/zoneEditor/Tiles.vue
@@ -14,6 +14,17 @@
</template>
<template #modalBody>
<div class="m-[15px]">
+ <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) }"
+ >
+ {{ tag }}
+ </button>
+ </div>
<div class="flex justify-between flex-wrap gap-2.5 items-center">
<div v-for="(tile, index) in filteredTiles" :key="index" class="max-w-[25%] inline-block">
<img
@@ -37,7 +48,7 @@
<script setup lang="ts">
import config from '@/config'
-import { ref, onMounted, computed, watch } from 'vue'
+import { ref, onMounted, computed } from 'vue'
import { useZoneEditorStore } from '@/stores/zoneEditor'
import { useGameStore } from '@/stores/game'
import Modal from '@/components/utilities/Modal.vue'
@@ -47,13 +58,28 @@ const gameStore = useGameStore()
const isModalOpen = ref(false)
const zoneEditorStore = useZoneEditorStore()
const searchQuery = ref('')
+const selectedTags = ref<string[]>([])
+
+const uniqueTags = computed(() => {
+ const allTags = zoneEditorStore.tileList.flatMap(tile => tile.tags || [])
+ return Array.from(new Set(allTags))
+})
const filteredTiles = computed(() => {
- if (!searchQuery.value) {
- return zoneEditorStore.tileList
+ return zoneEditorStore.tileList.filter((tile) => {
+ const matchesSearch = !searchQuery.value || tile.name.toLowerCase().includes(searchQuery.value.toLowerCase());
+ const matchesTags = selectedTags.value.length === 0 || (tile.tags && selectedTags.value.some(tag => tile.tags.includes(tag)));
+ return matchesSearch && matchesTags;
+ })
+});
+
+const toggleTag = (tag: string) => {
+ if (selectedTags.value.includes(tag)) {
+ selectedTags.value = selectedTags.value.filter(t => t !== tag)
+ } else {
+ selectedTags.value.push(tag)
}
- return zoneEditorStore.tileList.filter((tile) => tile.name.toLowerCase().includes(searchQuery.value.toLowerCase()))
-})
+}
onMounted(async () => {
isModalOpen.value = true
@@ -61,4 +87,4 @@ onMounted(async () => {
zoneEditorStore.setTileList(response)
})
})
-</script>
+</script>
\ No newline at end of file
diff --git a/src/stores/zoneEditor.ts b/src/stores/zoneEditor.ts
index 215075e..c9a9eb4 100644
--- a/src/stores/zoneEditor.ts
+++ b/src/stores/zoneEditor.ts
@@ -3,7 +3,7 @@ import type { Zone, Object, Tile } from '@/types'
export const useZoneEditorStore = defineStore('zoneEditor', {
state: () => ({
- active: false,
+ active: true,
zone: null as Zone | null,
tool: 'move',
drawMode: 'tile',
diff --git a/src/types.ts b/src/types.ts
index 1d062f3..86cf7d9 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -21,6 +21,7 @@ export type Tile = {
export type Object = {
id: string
name: string
+ tags: string[]
origin_x: number
origin_y: number
createdAt: Date