noxious/client
6
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
Download Patch File Download Diff File Expand all files Collapse all files

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>

38
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)
@ -72,4 +98,4 @@ onMounted(async () => {
zoneEditorStore.setObjectList(response)
})
})
</script>
</script>

38
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) => {
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>