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

npm update, npm run format

Browse Source
This commit is contained in:
Dennis Postma
2025-03-21 21:52:37 +01:00
parent fc34a488d9
commit 0d5acd48ce
6 changed files with 40 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/gameMaster/assetManager/partials/mapObject/MapObjectDetails.vue
View File

@ -3,26 +3,22 @@
<div class="relative p-2.5 flex flex-col items-center justify-center h-72 rounded-md default-border bg-gray">
<div class="grid grid-cols-[160px_auto_max-content] gap-12">
<div>
<input type="checkbox" checked v-model="showOrigin"><label>Show Origin</label>
<br>
<input type="checkbox" checked v-model="showPartitionOverlay"><label>Show Partitions</label>
<input type="checkbox" checked v-model="showOrigin" /><label>Show Origin</label>
<br />
<input type="checkbox" checked v-model="showPartitionOverlay" /><label>Show Partitions</label>
</div>
<div class="relative w-fit h-fit">
<img class="max-h-56" :src="`${config.server_endpoint}/textures/map_objects/${selectedMapObject?.id}.png`" :alt="'Object ' + selectedMapObject?.id" ref="imageRef" />
<svg ref="svg" class="absolute top-0 left-0 w-full h-full inline-block pointer-events-none">
<circle v-if="showOrigin && svg" r="4" :cx="mapObjectOriginX*width" :cy="mapObjectOriginY*height" stroke="white" stroke-width="2" />
<rect v-if="showPartitionOverlay && svg" v-for="(offset, index) in mapObjectDepthOffsets" style="opacity:0.5" stroke="red"
:x="index*(width/mapObjectDepthOffsets.length)"
:width="width/mapObjectDepthOffsets.length"
:y="0"
:height="height"/>
<circle v-if="showOrigin && svg" r="4" :cx="mapObjectOriginX * width" :cy="mapObjectOriginY * height" stroke="white" stroke-width="2" />
<rect v-if="showPartitionOverlay && svg" v-for="(offset, index) in mapObjectDepthOffsets" style="opacity: 0.5" stroke="red" :x="index * (width / mapObjectDepthOffsets.length)" :width="width / mapObjectDepthOffsets.length" :y="0" :height="height" />
</svg>
</div>
<div>
<button class="btn-cyan px-4 py-1.5 min-w-24" @click="mapObjectDepthOffsets.push(0)">Add Partition</button>
<p>Depth Offset</p>
<div class="text-white grid grid-cols-[120px_80px_auto] items-baseline gap-2" v-for="(offset, index) in mapObjectDepthOffsets">
<input class="input-field max-h-4 mt-2" type="number" :value="offset" @change="setPartitionDepth($event, index)">
<input class="input-field max-h-4 mt-2" type="number" :value="offset" @change="setPartitionDepth($event, index)" />
<button @click="mapObjectDepthOffsets.splice(index, 1)">Remove</button>
</div>
</div>
@ -77,15 +73,15 @@ import ChipsInput from '@/components/forms/ChipsInput.vue'
import { socketManager } from '@/managers/SocketManager'
import { MapObjectStorage } from '@/storage/storages'
import { useAssetManagerStore } from '@/stores/assetManagerStore'
import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue'
import { Rectangle } from 'phavuer'
import { useElementSize } from '@vueuse/core'
import { Rectangle } from 'phavuer'
import { computed, onBeforeUnmount, onMounted, ref, useTemplateRef, watch } from 'vue'
const assetManagerStore = useAssetManagerStore()
const selectedMapObject = computed(() => assetManagerStore.selectedMapObject)
const svg = useTemplateRef('svg')
const {width, height} = useElementSize(svg)
const { width, height } = useElementSize(svg)
const mapObjectName = ref('')
const mapObjectTags = ref<string[]>([])
@ -96,8 +92,8 @@ const mapObjectFrameRate = ref(0)
const mapObjectFrameWidth = ref(0)
const mapObjectFrameHeight = ref(0)
const imageRef = ref<HTMLImageElement | null>(null)
const showOrigin = ref(true);
const showPartitionOverlay = ref(true);
const showOrigin = ref(true)
const showPartitionOverlay = ref(true)
if (!selectedMapObject.value) {
console.error('No map mapObject selected')
@ -114,7 +110,7 @@ if (selectedMapObject.value) {
mapObjectFrameHeight.value = selectedMapObject.value.frameHeight
}
const setPartitionDepth = (event: any, idx: number) => mapObjectDepthOffsets.value[idx] = Number.parseInt(event.target.value)
const setPartitionDepth = (event: any, idx: number) => (mapObjectDepthOffsets.value[idx] = Number.parseInt(event.target.value))
async function removeObject() {
if (!selectedMapObject.value) return