54 lines
2.0 KiB
Vue
54 lines
2.0 KiB
Vue
<template>
|
|
<Teleport to="body">
|
|
<Modal v-if="isModalOpen" @modal:close="() => zoneEditorStore.setTool('move')" :isModalOpen="true" :modal-width="645" :modal-height="260">
|
|
<template #modalHeader>
|
|
<h3 class="text-lg">Objects</h3>
|
|
<div class="flex gap-1.5 flex-wrap">
|
|
<div class="w-full flex flex-col">
|
|
<label class="mb-1.5 font-titles hidden" for="z-index">Z-index</label>
|
|
<input class="input-cyan" type="number" name="z-index" placeholder="Z-index" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template #modalBody>
|
|
<div class="my-[15px] mx-auto">
|
|
<div class="columns-2 sm:columns-3 md:columns-4 lg:columns-5 gap-4">
|
|
<div v-for="(object, index) in objects" :key="index" class="mb-4">
|
|
<img
|
|
:src="`${config.server_endpoint}/assets/objects/${object.id}.png`"
|
|
alt="Object"
|
|
@click="zoneEditorStore.setSelectedObject(object.id)"
|
|
:class="{
|
|
'w-full h-auto cursor-pointer border-2 transition-all duration-300': true,
|
|
'border-2 border-solid border-cyan shadow-lg scale-105': zoneEditorStore.selectedObject === object.id,
|
|
'border-transparent hover:border-gray-300': zoneEditorStore.selectedObject !== object.id
|
|
}"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</Modal>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import config from '@/config'
|
|
import { ref, onMounted } from 'vue'
|
|
import { useZoneEditorStore } from '@/stores/zoneEditor'
|
|
import { useSocketStore } from '@/stores/socket'
|
|
import Modal from '@/components/utilities/Modal.vue'
|
|
import type { Object } from '@/types'
|
|
|
|
const socket = useSocketStore()
|
|
const objects = ref<Object[]>([])
|
|
const isModalOpen = ref(false)
|
|
const zoneEditorStore = useZoneEditorStore()
|
|
|
|
onMounted(async () => {
|
|
isModalOpen.value = true
|
|
socket.connection.emit('gm:object:list', {}, (response: Object[]) => {
|
|
objects.value = response
|
|
})
|
|
})
|
|
</script> |