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

Improved object selection

Browse Source
This commit is contained in:
Dennis Postma
2024-07-06 19:37:14 +02:00
parent f40297485f
commit c0ccb30019
5 changed files with 68 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -52,7 +52,10 @@ import { useAssetManagerStore } from '@/stores/assetManager'
const socket = useSocketStore()
const assetManagerStore = useAssetManagerStore()
const selectedCategory = ref('tiles')
const selectedTile = ref('')
const selectedObject = ref('')
const hasScrolled = ref(false)
const elementToScroll = ref()

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

@ -1,22 +1,22 @@
<template>
<div class="object-manager h-full overflow-auto">
<div class="image-container relative p-2.5 flex items-center justify-center h-[300px]">
<img class="max-h-[280px]" :src="objectImageUrl" :alt="'Object ' + selectedObject" />
<img class="max-h-[280px]" :src="`${config.server_endpoint}/assets/objects/${selectedObject?.id}.png`" :alt="'Object ' + selectedObject?.id" />
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
</div>
<div class="modal-form asset-manager m-2.5 p-2.5 block">
<form class="flex gap-2.5 flex-wrap" @submit.prevent>
<div class="w-full flex flex-col mb-5">
<label class="mb-1.5 font-titles" for="name">Name</label>
<input class="input-cyan" type="text" name="name" placeholder="Wall #1" />
<input v-model="objectName" class="input-cyan" type="text" name="name" placeholder="Wall #1" />
</div>
<div class="w-[48%] flex flex-col mb-5"> <!-- @TODO: find Tailwind alternative to use 50% and accomodate gap -->
<label class="mb-1.5 font-titles" for="origin-x">Origin X</label>
<input class="input-cyan" type="number" name="origin-x" placeholder="Origin X" />
<input v-model="objectOriginX" class="input-cyan" type="number" name="origin-x" placeholder="Origin X" />
</div>
<div class="w-[48%] flex flex-col mb-5"> <!-- @TODO: find Tailwind alternative to use 50% and accomodate gap -->
<label class="mb-1.5 font-titles" for="origin-y">Origin Y</label>
<input class="input-cyan" type="number" name="origin-y" placeholder="Origin Y" />
<input v-model="objectOriginY" class="input-cyan" type="number" name="origin-y" placeholder="Origin Y" />
</div>
<button class="btn-cyan px-[15px] py-1.5 min-w-[100px]" type="button" @click="removeObject">Save</button>
<button class="btn-bordeaux px-[15px] py-1.5 min-w-[100px]" type="button" @click="removeObject">Remove</button>
@ -26,7 +26,7 @@
</template>
<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted } from 'vue'
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
import { useAssetManagerStore } from '@/stores/assetManager'
import { useSocketStore } from '@/stores/socket'
import config from '@/config'
@ -34,8 +34,20 @@ import config from '@/config'
const socket = useSocketStore()
const assetManagerStore = useAssetManagerStore()
const selectedObject = computed(() => assetManagerStore.selectedObject)
const objectImageUrl = computed(() => `${config.server_endpoint}/assets/objects/${selectedObject.value}.png`)
const objectDetails = computed(() => assetManagerStore.objectDetails)
const objectName = ref('')
const objectOriginX = ref(0)
const objectOriginY = ref(0)
if (!selectedObject.value) {
console.error('No object selected')
}
if (selectedObject.value) {
objectName.value = selectedObject.value.name
objectOriginX.value = selectedObject.value.origin_x
objectOriginY.value = selectedObject.value.origin_y
}
function removeObject() {
socket.connection.emit('gm:object:remove', { object: selectedObject.value }, (response: boolean) => {

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

@ -7,7 +7,7 @@
<input class="input-cyan search-field w-full" placeholder="Search..." />
<div class="absolute left-0 bottom-0 w-full h-[1px] bg-cyan-200"></div>
</div>
<a class="asset relative p-2.5 cursor-pointer" :class="{ active: assetManagerStore.selectedObject === object.id }" v-for="(object, index) in assetManagerStore.objectList" :key="index" @click="assetManagerStore.setSelectedObject(object.id)">
<a class="asset relative p-2.5 cursor-pointer" :class="{ active: assetManagerStore.selectedObject?.id === object.id }" v-for="(object, index) in assetManagerStore.objectList" :key="index" @click="assetManagerStore.setSelectedObject(object as Object)">
<div class="asset-details flex items-center gap-2.5">
<div class="h-[28px] w-[75px] max-w-[75px] flex justify-center">
<img class="h-[28px]" :src="`${config.server_endpoint}/assets/objects/${object.id}.png`" alt="Object" />