forked from noxious/client
116 lines
4.1 KiB
Vue
116 lines
4.1 KiB
Vue
<template>
|
|
<div class="flex flex-col items-center px-5 py-1 fixed bottom-20 left-0 z-20">
|
|
<div class="flex h-10 gap-2">
|
|
<button @mousedown.stop @click="handleDelete" class="btn-red !py-3 px-4">
|
|
<img src="/assets/icons/trashcan.svg" class="w-4 h-4" alt="Delete" />
|
|
</button>
|
|
<button @mousedown.stop @click="showMapObjectSettings = !showMapObjectSettings" class="btn-indigo !py-3 px-4">
|
|
<img src="/assets/icons/mapEditor/gear.svg" class="w-4 h-4 invert" alt="Delete" />
|
|
</button>
|
|
<button @mousedown.stop @click="handleRotate" class="btn-cyan py-1.5 px-4">Rotate</button>
|
|
<button @mousedown.stop @click="handleMove" class="btn-cyan py-1.5 px-4 min-w-24">Move</button>
|
|
</div>
|
|
</div>
|
|
|
|
<Modal :is-modal-open="showMapObjectSettings" @modal:close="showMapObjectSettings = false" :modal-height="320" bg-style="none">
|
|
<template #modalHeader>
|
|
<h3 class="m-0 font-medium shrink-0 text-white">Map object settings</h3>
|
|
</template>
|
|
<template #modalBody>
|
|
<div class="m-4">
|
|
<form method="post" @submit.prevent="" class="inline">
|
|
<div class="gap-2.5 flex flex-wrap">
|
|
<div class="form-field-full">
|
|
<label for="name">Name</label>
|
|
<input class="input-field" v-model="mapObjectName" name="name" id="name" />
|
|
</div>
|
|
<div class="form-field-half">
|
|
<label for="originX">Origin X</label>
|
|
<input class="input-field" v-model="mapObjectOriginX" name="originX" id="originX" type="number" min="0.0" step="0.01" />
|
|
</div>
|
|
<div class="form-field-half">
|
|
<label for="originY">Origin Y</label>
|
|
<input class="input-field" v-model="mapObjectOriginY" name="originY" id="originY" type="number" min="0.0" step="0.01" />
|
|
</div>
|
|
</div>
|
|
<button class="btn-cyan px-4 py-1.5 min-w-24" @click="handleUpdate">Save</button>
|
|
</form>
|
|
</div>
|
|
</template>
|
|
</Modal>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { SocketEvent } from '@/application/enums'
|
|
import type { MapObject, Map as MapT, PlacedMapObject } from '@/application/types'
|
|
import Modal from '@/components/utilities/Modal.vue'
|
|
import { useMapEditorComposable } from '@/composables/useMapEditorComposable'
|
|
import { socketManager } from '@/managers/SocketManager'
|
|
import { MapObjectStorage } from '@/storage/storages'
|
|
import { useGameStore } from '@/stores/gameStore'
|
|
import { onMounted, ref } from 'vue'
|
|
|
|
const props = defineProps<{
|
|
placedMapObject: PlacedMapObject
|
|
map: MapT
|
|
}>()
|
|
|
|
const emit = defineEmits(['move', 'rotate', 'delete'])
|
|
|
|
const gameStore = useGameStore()
|
|
const mapEditor = useMapEditorComposable()
|
|
|
|
const mapObjectStorage = new MapObjectStorage()
|
|
const mapObject = ref<MapObject | null>(null)
|
|
const showMapObjectSettings = ref(false)
|
|
const mapObjectName = ref('')
|
|
const mapObjectOriginX = ref(0)
|
|
const mapObjectOriginY = ref(0)
|
|
|
|
const handleMove = () => {
|
|
emit('move', props.placedMapObject.id, props.map)
|
|
}
|
|
|
|
const handleRotate = () => {
|
|
emit('rotate', props.placedMapObject.id, props.map)
|
|
}
|
|
|
|
const handleDelete = () => {
|
|
emit('delete', props.placedMapObject.id, props.map)
|
|
}
|
|
|
|
async function handleUpdate() {
|
|
if (!mapObject.value) return
|
|
|
|
socketManager.emit(
|
|
SocketEvent.GM_MAPOBJECT_UPDATE,
|
|
{
|
|
id: props.placedMapObject.mapObject as string,
|
|
name: mapObjectName.value,
|
|
originX: mapObjectOriginX.value,
|
|
originY: mapObjectOriginY.value
|
|
},
|
|
async (response: boolean) => {
|
|
if (!response) return
|
|
await mapObjectStorage.update(mapObject.value!.id, {
|
|
name: mapObjectName.value,
|
|
originX: mapObjectOriginX.value,
|
|
originY: mapObjectOriginY.value
|
|
})
|
|
mapEditor.triggerMapObjectRefresh()
|
|
}
|
|
)
|
|
}
|
|
|
|
onMounted(async () => {
|
|
if (!props.placedMapObject.mapObject) return
|
|
|
|
mapObject.value = await mapObjectStorage.getById(props.placedMapObject.mapObject as string)
|
|
if (!mapObject.value) return
|
|
|
|
mapObjectName.value = mapObject.value.name
|
|
mapObjectOriginX.value = mapObject.value.originX
|
|
mapObjectOriginY.value = mapObject.value.originY
|
|
})
|
|
</script>
|