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

Small styling fixes, added better filter options in zone editor, added tags to objects, npm update

Browse Source
This commit is contained in:
Dennis Postma 2024-07-16 00:16:10 +02:00
parent 5561373e33
commit 5784b0fa9c
11 changed files with 176 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
package-lock.json generated
View File

@ -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",

2
src/assets/scss/main.scss
View File

@ -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;

36
src/components/forms/ChipsInput.vue
View File

@ -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>

33
src/components/utilities/assetManager/partials/ObjectDetails.vue
View File

@ -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>

2
src/components/utilities/assetManager/partials/ObjectList.vue
View File

@ -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>

2
src/components/utilities/assetManager/partials/TileDetails.vue
View File

@ -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'

2
src/components/utilities/assetManager/partials/TileList.vue
View File

@ -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>

36
src/components/utilities/zoneEditor/Objects.vue
View File

@ -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)

36
src/components/utilities/zoneEditor/Tiles.vue
View File

@ -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) => tile.name.toLowerCase().includes(searchQuery.value.toLowerCase()))
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)
}
}
onMounted(async () => {
isModalOpen.value = true

2
src/stores/zoneEditor.ts
View File

@ -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',

1
src/types.ts
View File

@ -21,6 +21,7 @@ export type Tile = {
export type Object = {
id: string
name: string
tags: string[]
origin_x: number
origin_y: number
createdAt: Date