45 lines
1.5 KiB
Vue
45 lines
1.5 KiB
Vue
<template>
|
|
<Modal :isModalOpen="true" :closable="false" :is-resizable="false" :modal-width="modalWidth" :modal-height="modalHeight" :modal-position-x="posXY.x" :modal-position-y="posXY.y">
|
|
<template #modalHeader>
|
|
<h3 class="m-0 font-medium shrink-0 text-gray-300">GM tools</h3>
|
|
</template>
|
|
<template #modalBody>
|
|
<div class="content flex flex-col gap-2.5 m-4 h-20">
|
|
<button class="btn-cyan py-1.5 px-4 w-full" type="button" @click="gameStore.toggleGmPanel()">Toggle GM panel</button>
|
|
<button class="btn-cyan py-1.5 px-4 w-full" type="button" @click="() => zoneEditorStore.toggleActive()">Zone manager</button>
|
|
</div>
|
|
</template>
|
|
</Modal>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import Modal from '@/components/utilities/Modal.vue'
|
|
import { useZoneEditorStore } from '@/stores/zoneEditorStore'
|
|
import { useGameStore } from '@/stores/gameStore'
|
|
import { onMounted, ref } from 'vue'
|
|
|
|
const zoneEditorStore = useZoneEditorStore()
|
|
const gameStore = useGameStore()
|
|
const modalWidth = ref(200)
|
|
const modalHeight = ref(180)
|
|
|
|
let posXY = ref({ x: 0, y: 0 })
|
|
|
|
onMounted(() => {
|
|
window.addEventListener('resize', () => {
|
|
posXY.value = customPositionGmPanel(modalWidth.value)
|
|
})
|
|
})
|
|
|
|
const customPositionGmPanel = (modalWidth: number) => {
|
|
const padding = 25
|
|
const width = window.innerWidth
|
|
|
|
const x = width - (modalWidth + 4) - 25
|
|
const y = padding
|
|
|
|
return { x, y }
|
|
}
|
|
|
|
posXY.value = customPositionGmPanel(modalWidth.value)
|
|
</script>
|