noxious/client
3
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki 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": { "node_modules/@babel/compat-data": {
"version": "7.24.8", "version": "7.24.9",
"resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.24.8.tgz", "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.24.9.tgz",
"integrity": "sha512-c4IM7OTg6k1Q+AJ153e2mc2QVTezTwnb4VzquwcyiEzGnW0Kedv4do/TrkU98qPeC5LNiMt/QXwIjzYXLBpyZg==", "integrity": "sha512-e701mcfApCJqMMueQI0Fb68Amflj83+dvAvHawoBpAz+GDjCIyGHzNwnefjsWJ3xiYAqqiQFoWbspGYBdb2/ng==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"engines": { "engines": {
@ -110,22 +110,22 @@
} }
}, },
"node_modules/@babel/core": { "node_modules/@babel/core": {
"version": "7.24.8", "version": "7.24.9",
"resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.8.tgz", "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.9.tgz",
"integrity": "sha512-6AWcmZC/MZCO0yKys4uhg5NlxL0ESF3K6IAaoQ+xSXvPyPyxNWRafP+GDbI88Oh68O7QkJgmEtedWPM9U0pZNg==", "integrity": "sha512-5e3FI4Q3M3Pbr21+5xJwCv6ZT6KmGkI0vw3Tozy5ODAQFTIWe37iT8Cr7Ice2Ntb+M3iSKCEWMB1MBgKrW3whg==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@ampproject/remapping": "^2.2.0", "@ampproject/remapping": "^2.2.0",
"@babel/code-frame": "^7.24.7", "@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-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/helpers": "^7.24.8",
"@babel/parser": "^7.24.8", "@babel/parser": "^7.24.8",
"@babel/template": "^7.24.7", "@babel/template": "^7.24.7",
"@babel/traverse": "^7.24.8", "@babel/traverse": "^7.24.8",
"@babel/types": "^7.24.8", "@babel/types": "^7.24.9",
"convert-source-map": "^2.0.0", "convert-source-map": "^2.0.0",
"debug": "^4.1.0", "debug": "^4.1.0",
"gensync": "^1.0.0-beta.2", "gensync": "^1.0.0-beta.2",
@ -151,13 +151,13 @@
} }
}, },
"node_modules/@babel/generator": { "node_modules/@babel/generator": {
"version": "7.24.8", "version": "7.24.9",
"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.24.8.tgz", "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.24.9.tgz",
"integrity": "sha512-47DG+6F5SzOi0uEvK4wMShmn5yY0mVjVJoWTphdY2B4Rx9wHgjK7Yhtr0ru6nE+sn0v38mzrWOlah0p/YlHHOQ==", "integrity": "sha512-G8v3jRg+z8IwY1jHFxvCNhOPYPterE4XljNgdGTYfSTtzzwjIswIzIaSPSLs3R7yFuqnqNeay5rjICfqVr+/6A==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@babel/types": "^7.24.8", "@babel/types": "^7.24.9",
"@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/gen-mapping": "^0.3.5",
"@jridgewell/trace-mapping": "^0.3.25", "@jridgewell/trace-mapping": "^0.3.25",
"jsesc": "^2.5.1" "jsesc": "^2.5.1"
@ -319,9 +319,9 @@
} }
}, },
"node_modules/@babel/helper-module-transforms": { "node_modules/@babel/helper-module-transforms": {
"version": "7.24.8", "version": "7.24.9",
"resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.24.8.tgz", "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.24.9.tgz",
"integrity": "sha512-m4vWKVqvkVAWLXfHCCfff2luJj86U+J0/x+0N3ArG/tP0Fq7zky2dYwMbtPmkc/oulkkbjdL3uWzuoBwQ8R00Q==", "integrity": "sha512-oYbh+rtFKj/HwBQkFlUzvcybzklmVdVV3UU+mN7n2t/q3yGHbuVdNxyFvSBO1tfvjyArpHNcWMAzsSPdyI46hw==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
@ -745,9 +745,9 @@
} }
}, },
"node_modules/@babel/types": { "node_modules/@babel/types": {
"version": "7.24.8", "version": "7.24.9",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.8.tgz", "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.9.tgz",
"integrity": "sha512-SkSBEHwwJRU52QEVZBmMBnE5Ux2/6WU1grdYyOhpbCNxbmJrDuDCphBzKZSO3taf0zztp+qkWlymE5tVL5l0TA==", "integrity": "sha512-xm8XrMKz0IlUdocVbYJe0Z9xEgidU7msskG8BbhnTPK/HZ2z/7FP7ykqPgrUH+C+r414mNfNWam1f2vqOjqjYQ==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
@ -2153,30 +2153,30 @@
} }
}, },
"node_modules/@volar/language-core": { "node_modules/@volar/language-core": {
"version": "2.4.0-alpha.15", "version": "2.4.0-alpha.16",
"resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.0-alpha.15.tgz", "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-2.4.0-alpha.16.tgz",
"integrity": "sha512-mt8z4Fm2WxfQYoQHPcKVjLQV6PgPqyKLbkCVY2cr5RSaamqCHjhKEpsFX66aL4D/7oYguuaUw9Bx03Vt0TpIIA==", "integrity": "sha512-oOTnIZlx0P/idFwVw+W0NbzKDtZAQMzXSdIFfTePCKcXlb4Ys12GaGkx8NF9dsvPYV3nbv3ZsSxnkZWBmNKd7A==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@volar/source-map": "2.4.0-alpha.15" "@volar/source-map": "2.4.0-alpha.16"
} }
}, },
"node_modules/@volar/source-map": { "node_modules/@volar/source-map": {
"version": "2.4.0-alpha.15", "version": "2.4.0-alpha.16",
"resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.0-alpha.15.tgz", "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-2.4.0-alpha.16.tgz",
"integrity": "sha512-8Htngw5TmBY4L3ClDqBGyfLhsB8EmoEXUH1xydyEtEoK0O6NX5ur4Jw8jgvscTlwzizyl/wsN1vn0cQXVbbXYg==", "integrity": "sha512-sL9vNG7iR2hiKZor7UkD5Sufu3QCia4cbp2gX/nGRNSdaPbhOpdAoavwlBm0PrVkpiA19NZuavZoobD8krviFg==",
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/@volar/typescript": { "node_modules/@volar/typescript": {
"version": "2.4.0-alpha.15", "version": "2.4.0-alpha.16",
"resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.0-alpha.15.tgz", "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-2.4.0-alpha.16.tgz",
"integrity": "sha512-U3StRBbDuxV6Woa4hvGS4kz3XcOzrWUKgFdEFN+ba1x3eaYg7+ytau8ul05xgA+UNGLXXsKur7fTUhDFyISk0w==", "integrity": "sha512-WCx7z5O81McCQp2cC0c8081y+MgTiAR2WAiJjVL4tr4Qh4GgqK0lgn3CqAjcKizaK1R5y3wfrUqgIYr+QeFYcw==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@volar/language-core": "2.4.0-alpha.15", "@volar/language-core": "2.4.0-alpha.16",
"path-browserify": "^1.0.1", "path-browserify": "^1.0.1",
"vscode-uri": "^3.0.8" "vscode-uri": "^3.0.8"
} }
@ -2316,14 +2316,14 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/@vue/devtools-core": { "node_modules/@vue/devtools-core": {
"version": "7.3.5", "version": "7.3.6",
"resolved": "https://registry.npmjs.org/@vue/devtools-core/-/devtools-core-7.3.5.tgz", "resolved": "https://registry.npmjs.org/@vue/devtools-core/-/devtools-core-7.3.6.tgz",
"integrity": "sha512-uSC3IkIp6MtyJYSh5xzY99sgqlAXLq+peE2KKXTi6JeRHOtMngFWFWENXi70IJ1EVGYztiFQoHhI9WZcgKBz8g==", "integrity": "sha512-XqFYVkyS3eySHF4bgLt+KF6yL6nYzVY/JTJHnK6KIJXIE4GIAxmn5Gxfsb4cUG9sl0FGiMqRCnM37Q+P08wr8A==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@vue/devtools-kit": "^7.3.5", "@vue/devtools-kit": "^7.3.6",
"@vue/devtools-shared": "^7.3.5", "@vue/devtools-shared": "^7.3.6",
"mitt": "^3.0.1", "mitt": "^3.0.1",
"nanoid": "^3.3.4", "nanoid": "^3.3.4",
"pathe": "^1.1.2", "pathe": "^1.1.2",
@ -2334,13 +2334,13 @@
} }
}, },
"node_modules/@vue/devtools-kit": { "node_modules/@vue/devtools-kit": {
"version": "7.3.5", "version": "7.3.6",
"resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.3.5.tgz", "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.3.6.tgz",
"integrity": "sha512-wwfi10gJ1HMtjzcd8aIOnzBHlIRqsYDgcDyrKvkeyc0Gbcoe7UrkXRVHZUOtcxxoplHA0PwpT6wFg0uUCmi8Ww==", "integrity": "sha512-5Ym9V3fkJenEoptqKoo+cgY5RTVwrSssFdzRsuyIgaeiskCT+rRJeQdwoo81tyrQ1mfS7Er1rYZlSzr3Y3L/ew==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@vue/devtools-shared": "^7.3.5", "@vue/devtools-shared": "^7.3.6",
"birpc": "^0.2.17", "birpc": "^0.2.17",
"hookable": "^5.5.3", "hookable": "^5.5.3",
"mitt": "^3.0.1", "mitt": "^3.0.1",
@ -2350,9 +2350,9 @@
} }
}, },
"node_modules/@vue/devtools-shared": { "node_modules/@vue/devtools-shared": {
"version": "7.3.5", "version": "7.3.6",
"resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.3.5.tgz", "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.3.6.tgz",
"integrity": "sha512-Rqii3VazmWTi67a86rYopi61n5Ved05EybJCwyrfoO9Ok3MaS/4yRFl706ouoISMlyrASJFEzM0/AiDA6w4f9A==", "integrity": "sha512-R/FOmdJV+hhuwcNoxp6e87RRkEeDMVhWH+nOsnHUrwjjsyeXJ2W1475Ozmw+cbZhejWQzftkHVKO28Fuo1yqCw==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
@ -3037,9 +3037,9 @@
} }
}, },
"node_modules/caniuse-lite": { "node_modules/caniuse-lite": {
"version": "1.0.30001641", "version": "1.0.30001642",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001641.tgz", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001642.tgz",
"integrity": "sha512-Phv5thgl67bHYo1TtMY/MurjkHhV4EDaCosezRXgZ8jzA/Ub+wjxAvbGvjoFENStinwi5kCyOYV3mi5tOGykwA==", "integrity": "sha512-3XQ0DoRgLijXJErLSl+bLnJ+Et4KqV1PY6JJBGAFlsNsz31zeAIncyeZfLCabHK/jtSh+671RM9YMldxjUPZtA==",
"dev": true, "dev": true,
"funding": [ "funding": [
{ {
@ -6067,9 +6067,9 @@
} }
}, },
"node_modules/prettier": { "node_modules/prettier": {
"version": "3.3.2", "version": "3.3.3",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.2.tgz", "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
"integrity": "sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA==", "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"bin": { "bin": {
@ -6906,9 +6906,9 @@
} }
}, },
"node_modules/tailwindcss": { "node_modules/tailwindcss": {
"version": "3.4.4", "version": "3.4.5",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.4.tgz", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.5.tgz",
"integrity": "sha512-ZoyXOdJjISB7/BcLTR6SEsLgKtDStYyYZVLsUtWChO4Ps20CBad7lfJKVDiejocV4ME1hLmyY0WJE3hSDcmQ2A==", "integrity": "sha512-DlTxttYcogpDfx3tf/8jfnma1nfAYi2cBUYV2YNoPPecwmO3YGiFlOX9D8tGAu+EDF38ryBzvrDKU/BLMsUwbw==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
@ -7356,15 +7356,15 @@
} }
}, },
"node_modules/vite-plugin-vue-devtools": { "node_modules/vite-plugin-vue-devtools": {
"version": "7.3.5", "version": "7.3.6",
"resolved": "https://registry.npmjs.org/vite-plugin-vue-devtools/-/vite-plugin-vue-devtools-7.3.5.tgz", "resolved": "https://registry.npmjs.org/vite-plugin-vue-devtools/-/vite-plugin-vue-devtools-7.3.6.tgz",
"integrity": "sha512-6omLXTfYu0bmSmncPSbj4mdMPB3t5dAZkUyriJikahGEnvv5gynHlydDsJShHT6l/5dCkvmSesSji/2a6FfutQ==", "integrity": "sha512-j4Cssv6DVBtMZfyVBEm/4MZy7BiL6RedEn+f9jT3zFyGZKG1vNuEpTO86XvPPbHbYdITFyrkWb7VQuWyhfSgqA==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@vue/devtools-core": "^7.3.5", "@vue/devtools-core": "^7.3.6",
"@vue/devtools-kit": "^7.3.5", "@vue/devtools-kit": "^7.3.6",
"@vue/devtools-shared": "^7.3.5", "@vue/devtools-shared": "^7.3.6",
"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",

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

@ -59,7 +59,7 @@ input {
} }
.input-cyan { .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,
&:focus-visible { &:focus-visible {
@apply outline-2 outline-cyan; @apply outline-2 outline-cyan;

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

@ -4,34 +4,50 @@
<span>{{ chip }}</span> <span>{{ chip }}</span>
<i class="cursor-pointer text-white font-light font-default not-italic hover:text-gray-50" @click="deleteChip(i)">X</i> <i class="cursor-pointer text-white font-light font-default not-italic hover:text-gray-50" @click="deleteChip(i)">X</i>
</div> </div>
<!-- Use keypress event and prevent modifier --> <input
<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" /> 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> </div>
</template> </template>
<script setup> <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 currentInput = ref('')
const internalValue = ref(props.modelValue || [])
watch(() => props.modelValue, (newVal) => {
internalValue.value = newVal || []
}, { immediate: true })
const saveChip = (event) => { const saveChip = (event) => {
// Prevent form submission explicitly if needed
event.preventDefault() 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 = '' currentInput.value = ''
} }
} }
const deleteChip = (index) => { const deleteChip = (index) => {
modelValue.value = modelValue.value.filter((_, i) => i !== index) emit('update:modelValue', internalValue.value.filter((_, i) => i !== index))
} }
const backspaceDelete = (event) => { const backspaceDelete = (event) => {
if (event.key === 'Backspace' && currentInput.value === '' && modelValue.value.length > 0) { if (event.key === 'Backspace' && currentInput.value === '' && internalValue.value.length > 0) {
modelValue.value = modelValue.value.slice(0, -1) emit('update:modelValue', internalValue.value.slice(0, -1))
} }
} }
</script> </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> <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" /> <input v-model="objectOriginY" class="input-cyan" type="number" step="any" name="origin-y" placeholder="Origin Y" />
</div> </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> <button class="btn-cyan px-[15px] py-1.5 min-w-[100px]" type="submit">Save</button>
</form> </form>
</div> </div>
@ -28,11 +32,12 @@
<script setup lang="ts"> <script setup lang="ts">
import type { Object } from '@/types' 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 { useAssetManagerStore } from '@/stores/assetManager'
import { useZoneEditorStore } from '@/stores/zoneEditor' import { useZoneEditorStore } from '@/stores/zoneEditor'
import { useGameStore } from '@/stores/game' import { useGameStore } from '@/stores/game'
import config from '@/config' import config from '@/config'
import ChipsInput from '@/components/forms/ChipsInput.vue'
const gameStore = useGameStore() const gameStore = useGameStore()
const assetManagerStore = useAssetManagerStore() const assetManagerStore = useAssetManagerStore()
@ -41,6 +46,7 @@ const zoneEditorStore = useZoneEditorStore()
const selectedObject = computed(() => assetManagerStore.selectedObject) const selectedObject = computed(() => assetManagerStore.selectedObject)
const objectName = ref('') const objectName = ref('')
const objectTags = ref([] as string[])
const objectOriginX = ref(0) const objectOriginX = ref(0)
const objectOriginY = ref(0) const objectOriginY = ref(0)
@ -50,19 +56,13 @@ if (!selectedObject.value) {
if (selectedObject.value) { if (selectedObject.value) {
objectName.value = selectedObject.value.name objectName.value = selectedObject.value.name
objectTags.value = selectedObject.value.tags
objectOriginX.value = selectedObject.value.origin_x objectOriginX.value = selectedObject.value.origin_x
objectOriginY.value = selectedObject.value.origin_y 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() { 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) { if (!response) {
console.error('Failed to remove object') console.error('Failed to remove object')
return return
@ -72,7 +72,7 @@ function removeObject() {
} }
function refreshObjectList() { function refreshObjectList() {
gameStore.connection.emit('gm:object:list', {}, (response: Object[]) => { gameStore.connection?.emit('gm:object:list', {}, (response: Object[]) => {
assetManagerStore.setObjectList(response) assetManagerStore.setObjectList(response)
assetManagerStore.setSelectedObject(null) assetManagerStore.setSelectedObject(null)
@ -89,11 +89,13 @@ function saveObject() {
return return
} }
gameStore.connection.emit( console.log(objectTags.value)
gameStore.connection?.emit(
'gm:object:update', 'gm:object:update',
{ {
id: selectedObject.value.id, id: selectedObject.value.id,
name: objectName.value, name: objectName.value,
tags: objectTags.value,
origin_x: objectOriginX.value, origin_x: objectOriginX.value,
origin_y: objectOriginY.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(() => { onMounted(() => {
if (!selectedObject.value) return if (!selectedObject.value) return
}) })
@ -114,4 +124,5 @@ onMounted(() => {
onBeforeUnmount(() => { onBeforeUnmount(() => {
assetManagerStore.setSelectedObject(null) assetManagerStore.setSelectedObject(null)
}) })
</script> </script>

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

@ -1,6 +1,6 @@
<template> <template>
<div class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap"> <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" /> <input class="hidden" id="upload-asset" ref="objectUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
Upload object(s) Upload object(s)
</label> </label>

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

@ -24,7 +24,7 @@
<script setup lang="ts"> <script setup lang="ts">
import type { Tile } from '@/types' 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 { useAssetManagerStore } from '@/stores/assetManager'
import { useZoneEditorStore } from '@/stores/zoneEditor' import { useZoneEditorStore } from '@/stores/zoneEditor'
import { useGameStore } from '@/stores/game' import { useGameStore } from '@/stores/game'

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

@ -1,6 +1,6 @@
<template> <template>
<div class="relative p-2.5 cursor-pointer flex gap-y-2.5 gap-x-5 flex-wrap"> <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" /> <input class="hidden" id="upload-asset" ref="tileUploadField" type="file" accept="image/png" multiple @change="handleFileUpload" />
Upload tile(s) Upload tile(s)
</label> </label>

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

@ -18,6 +18,17 @@
</template> </template>
<template #modalBody> <template #modalBody>
<div class="m-[15px]"> <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 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"> <div v-for="(object, index) in filteredObjects" :key="index" class="max-w-[25%] inline-block">
<img <img
@ -52,18 +63,33 @@ const isModalOpen = ref(false)
const zoneEditorStore = useZoneEditorStore() const zoneEditorStore = useZoneEditorStore()
const searchQuery = ref('') const searchQuery = ref('')
const objectDepth = ref(0) const objectDepth = ref(0)
const selectedTags = ref<string[]>([])
watch(objectDepth, (depth) => { watch(objectDepth, (depth) => {
zoneEditorStore.setObjectDepth(depth) zoneEditorStore.setObjectDepth(depth)
}) })
const filteredObjects = computed(() => { const uniqueTags = computed(() => {
if (!searchQuery.value) { const allTags = zoneEditorStore.objectList.flatMap(obj => obj.tags || [])
return zoneEditorStore.objectList return Array.from(new Set(allTags))
}
return zoneEditorStore.objectList.filter((object) => object.name.toLowerCase().includes(searchQuery.value.toLowerCase()))
}) })
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 () => { onMounted(async () => {
zoneEditorStore.setObjectDepth(0) zoneEditorStore.setObjectDepth(0)

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

@ -14,6 +14,17 @@
</template> </template>
<template #modalBody> <template #modalBody>
<div class="m-[15px]"> <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 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"> <div v-for="(tile, index) in filteredTiles" :key="index" class="max-w-[25%] inline-block">
<img <img
@ -37,7 +48,7 @@
<script setup lang="ts"> <script setup lang="ts">
import config from '@/config' import config from '@/config'
import { ref, onMounted, computed, watch } from 'vue' import { ref, onMounted, computed } from 'vue'
import { useZoneEditorStore } from '@/stores/zoneEditor' import { useZoneEditorStore } from '@/stores/zoneEditor'
import { useGameStore } from '@/stores/game' import { useGameStore } from '@/stores/game'
import Modal from '@/components/utilities/Modal.vue' import Modal from '@/components/utilities/Modal.vue'
@ -47,13 +58,28 @@ const gameStore = useGameStore()
const isModalOpen = ref(false) const isModalOpen = ref(false)
const zoneEditorStore = useZoneEditorStore() const zoneEditorStore = useZoneEditorStore()
const searchQuery = ref('') 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(() => { const filteredTiles = computed(() => {
if (!searchQuery.value) { return zoneEditorStore.tileList.filter((tile) => {
return zoneEditorStore.tileList 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 zoneEditorStore.tileList.filter((tile) => tile.name.toLowerCase().includes(searchQuery.value.toLowerCase())) 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 () => { onMounted(async () => {
isModalOpen.value = true 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', { export const useZoneEditorStore = defineStore('zoneEditor', {
state: () => ({ state: () => ({
active: false, active: true,
zone: null as Zone | null, zone: null as Zone | null,
tool: 'move', tool: 'move',
drawMode: 'tile', drawMode: 'tile',

1
src/types.ts
View File

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